> ## Documentation Index
> Fetch the complete documentation index at: https://www.osohq.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Facts Management
> CRUD operations for managing facts.
export const Languages = {
JAVASCRIPT: "js",
PYTHON: "py",
RUBY: "rb",
JAVA: "java",
DOTNET: "dotnet",
GO: "go",
SHELL: "shell",
MACOS: "macos",
WINDOWS: "windows",
BASH: "bash",
CMD: "cmd",
TYPESCRIPT: "ts",
HTML: "html",
CSS: "css",
JSON: "json",
YAML: "yaml",
XML: "xml"
};
export const CodeTab = ({title, language, children, disabled = false}) => {
const getLanguageDisplayName = language => {
const displayNames = {
[Languages.JAVASCRIPT]: "JavaScript",
[Languages.PYTHON]: "Python",
[Languages.RUBY]: "Ruby",
[Languages.JAVA]: "Java",
[Languages.DOTNET]: ".NET",
[Languages.GO]: "Go",
[Languages.SHELL]: "Shell",
[Languages.MACOS]: "MacOS / Linux",
[Languages.WINDOWS]: "Windows",
[Languages.CMD]: "Command Prompt",
[Languages.TYPESCRIPT]: "TypeScript",
[Languages.HTML]: "HTML",
[Languages.CSS]: "CSS",
[Languages.JSON]: "JSON",
[Languages.YAML]: "YAML",
[Languages.XML]: "XML"
};
return displayNames[language] || language || "Code";
};
const displayTitle = title || getLanguageDisplayName(language);
if (!displayTitle) {
console.warn('CodeTab component requires either a title prop or language prop');
return null;
}
if (language && typeof language !== 'string') {
console.warn('CodeTab language prop must be a string');
}
if (title && typeof title !== 'string') {
console.warn('CodeTab title prop must be a string');
}
if (disabled && typeof disabled !== 'boolean') {
console.warn('CodeTab disabled prop must be a boolean');
}
return React.createElement(React.Fragment, null, children);
};
export const CodeTabs = ({children, defaultTab = 0, className = '', syncLanguages = true, onTabChange, 'aria-label': ariaLabel = 'Code examples'}) => {
const {useState, useMemo, useEffect, useCallback, useId, Children, isValidElement} = React;
const baseId = useId();
const getLanguageDisplayName = useCallback(language => {
const displayNames = {
[Languages.JAVASCRIPT]: "JavaScript",
[Languages.PYTHON]: "Python",
[Languages.RUBY]: "Ruby",
[Languages.JAVA]: "Java",
[Languages.DOTNET]: ".NET",
[Languages.GO]: "Go",
[Languages.SHELL]: "Shell",
[Languages.MACOS]: "MacOS / Linux",
[Languages.WINDOWS]: "Windows",
[Languages.CMD]: "Command Prompt",
[Languages.TYPESCRIPT]: "TypeScript",
[Languages.HTML]: "HTML",
[Languages.CSS]: "CSS",
[Languages.JSON]: "JSON",
[Languages.YAML]: "YAML",
[Languages.XML]: "XML"
};
return displayNames[language] || language || "Code";
}, []);
const LANGUAGE_PREF_KEY = useMemo(() => 'mintlify-tabs-language-preference', []);
const LANGUAGE_CHANGE_EVENT = useMemo(() => 'mintlify-tabs-language-change', []);
const findMatchingLanguageTab = useCallback((tabs, targetLanguage) => {
if (!targetLanguage?.trim() || !Array.isArray(tabs) || tabs.length === 0) return -1;
const normalizedTarget = targetLanguage.toLowerCase().trim();
return tabs.findIndex(tab => tab?.language?.toLowerCase().trim() === normalizedTarget);
}, []);
const getLanguagePreference = useCallback(() => {
if (typeof window === 'undefined' || !window.localStorage) return null;
try {
const stored = localStorage.getItem(LANGUAGE_PREF_KEY);
if (!stored) return null;
const parsed = JSON.parse(stored);
if (typeof parsed === 'object' && parsed.language && typeof parsed.language === 'string') {
return parsed;
}
return null;
} catch (error) {
console.warn('Failed to parse language preference:', error);
return null;
}
}, [LANGUAGE_PREF_KEY]);
const setLanguagePreference = useCallback(language => {
if (typeof window === 'undefined' || !window.localStorage || !language?.trim()) return;
try {
const preference = {
language: language.trim(),
timestamp: Date.now()
};
localStorage.setItem(LANGUAGE_PREF_KEY, JSON.stringify(preference));
if (window.CustomEvent && window.dispatchEvent) {
const event = new CustomEvent(LANGUAGE_CHANGE_EVENT, {
detail: preference,
bubbles: false,
cancelable: false
});
window.dispatchEvent(event);
}
} catch (error) {
console.warn('Failed to save language preference:', error);
}
}, [LANGUAGE_PREF_KEY, LANGUAGE_CHANGE_EVENT]);
const generateTabId = useCallback((title, index) => {
const cleanTitle = title?.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '') || 'tab';
return `${baseId}-${cleanTitle}-${index}`;
}, [baseId]);
const [announcement, setAnnouncement] = useState('');
const announceToScreenReader = useCallback((message, duration = 1000) => {
setAnnouncement(message);
const timeoutId = setTimeout(() => setAnnouncement(''), duration);
return () => clearTimeout(timeoutId);
}, []);
const processedTabs = useMemo(() => {
if (!children) return [];
const tabData = [];
Children.forEach(children, (child, index) => {
if (!isValidElement(child) || child.type !== CodeTab) {
console.warn(`Invalid child at index ${index}. Expected CodeTab component.`);
return;
}
const {title, language, disabled = false} = child.props || ({});
const displayTitle = title || getLanguageDisplayName(language);
if (!displayTitle || typeof displayTitle !== 'string') {
console.warn(`CodeTab at index ${index} missing title and language props`);
return;
}
tabData.push({
title: displayTitle.trim(),
language: language?.trim() || null,
disabled: Boolean(disabled),
content: child.props.children,
id: generateTabId(displayTitle, index),
index
});
});
return tabData;
}, [children, generateTabId]);
const [activeIndex, setActiveIndex] = useState(0);
useEffect(() => {
if (processedTabs.length === 0) return;
if (typeof defaultTab === 'number') {
const clampedIndex = Math.max(0, Math.min(defaultTab, processedTabs.length - 1));
setActiveIndex(clampedIndex);
return;
}
if (typeof defaultTab === 'string' && defaultTab.trim()) {
const matchIndex = processedTabs.findIndex(tab => tab.title?.toLowerCase() === defaultTab.toLowerCase().trim());
if (matchIndex >= 0 && !processedTabs[matchIndex].disabled) {
setActiveIndex(matchIndex);
return;
}
}
const firstEnabledIndex = processedTabs.findIndex(tab => !tab.disabled);
setActiveIndex(firstEnabledIndex >= 0 ? firstEnabledIndex : 0);
}, [processedTabs, defaultTab]);
useEffect(() => {
if (!syncLanguages || processedTabs.length === 0) return;
const preference = getLanguagePreference();
if (preference) {
const matchIndex = findMatchingLanguageTab(processedTabs, preference.language);
if (matchIndex >= 0) {
setActiveIndex(matchIndex);
}
}
}, [syncLanguages, processedTabs, getLanguagePreference, findMatchingLanguageTab]);
const handleTabClick = useCallback(index => {
const targetTab = processedTabs[index];
if (!targetTab || targetTab.disabled || index === activeIndex) return;
const previousIndex = activeIndex;
setActiveIndex(index);
const announcement = `${targetTab.title} tab selected. Tab ${index + 1} of ${processedTabs.length}.`;
const cleanup = announceToScreenReader(announcement);
if (syncLanguages && targetTab.language) {
setLanguagePreference(targetTab.language);
}
onTabChange?.(index, targetTab, previousIndex);
return cleanup;
}, [processedTabs, activeIndex, syncLanguages, setLanguagePreference, onTabChange, announceToScreenReader]);
useEffect(() => {
if (!syncLanguages || typeof window === 'undefined') return;
const handleLanguageChange = event => {
try {
const {language} = event.detail || ({});
if (!language || typeof language !== 'string') return;
const matchIndex = findMatchingLanguageTab(processedTabs, language);
if (matchIndex >= 0 && matchIndex !== activeIndex && !processedTabs[matchIndex]?.disabled) {
setActiveIndex(matchIndex);
const currentTab = processedTabs[matchIndex];
const announcement = `Synchronized to ${currentTab.title} tab. Tab ${matchIndex + 1} of ${processedTabs.length}.`;
announceToScreenReader(announcement, 600);
onTabChange?.(matchIndex, currentTab, activeIndex);
}
} catch (error) {
console.warn('Error handling language change event:', error);
}
};
window.addEventListener(LANGUAGE_CHANGE_EVENT, handleLanguageChange);
return () => {
window.removeEventListener(LANGUAGE_CHANGE_EVENT, handleLanguageChange);
};
}, [syncLanguages, processedTabs, activeIndex, findMatchingLanguageTab, LANGUAGE_CHANGE_EVENT, onTabChange, announceToScreenReader]);
const handleKeyDown = useCallback((event, index) => {
let targetIndex = -1;
switch (event.key) {
case 'ArrowLeft':
event.preventDefault();
targetIndex = index > 0 ? index - 1 : processedTabs.length - 1;
break;
case 'ArrowRight':
event.preventDefault();
targetIndex = index < processedTabs.length - 1 ? index + 1 : 0;
break;
case 'Enter':
case ' ':
event.preventDefault();
handleTabClick(index);
return;
case 'Home':
event.preventDefault();
targetIndex = 0;
break;
case 'End':
event.preventDefault();
targetIndex = processedTabs.length - 1;
break;
default:
return;
}
if (targetIndex !== -1) {
setActiveIndex(targetIndex);
}
}, [processedTabs.length, handleTabClick]);
if (processedTabs.length === 0) {
return
No valid tabs found. Please check your CodeTab components.
;
}
const safeActiveIndex = Math.max(0, Math.min(activeIndex, processedTabs.length - 1));
const activeTab = processedTabs[safeActiveIndex];
return
{}
{announcement}
{}
{processedTabs.map((tab, index) => {
const isActive = index === safeActiveIndex;
const isDisabled = tab.disabled;
return -
;
})}
{}
{activeTab?.content}