@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.88 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/tabs/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction externalToInternalTabId(externalId, instanceId) {\n return externalId && `${instanceId}-${externalId}`;\n}\nfunction internalToExternalTabId(internalId, instanceId) {\n return typeof internalId === 'string' ? internalId.replace(`${instanceId}-`, '') : internalId;\n}\n\n/**\n * Tabs is a collection of React components that combine to render\n * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * Tabs organizes content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when a tab is chosen.\n *\n * `Tabs` itself is a wrapper component and context provider.\n * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.\n */\nexport const Tabs = Object.assign(function Tabs({\n selectOnMove = true,\n defaultTabId,\n orientation = 'horizontal',\n onSelect,\n children,\n selectedTabId,\n activeTabId,\n defaultActiveTabId,\n onActiveTabIdChange\n}) {\n const instanceId = useInstanceId(Tabs, 'tabs');\n const store = Ariakit.useTabStore({\n selectOnMove,\n orientation,\n defaultSelectedId: externalToInternalTabId(defaultTabId, instanceId),\n setSelectedId: newSelectedId => {\n onSelect?.(internalToExternalTabId(newSelectedId, instanceId));\n },\n selectedId: externalToInternalTabId(selectedTabId, instanceId),\n defaultActiveId: externalToInternalTabId(defaultActiveTabId, instanceId),\n setActiveId: newActiveId => {\n onActiveTabIdChange?.(internalToExternalTabId(newActiveId, instanceId));\n },\n activeId: externalToInternalTabId(activeTabId, instanceId),\n rtl: isRTL()\n });\n const {\n items,\n activeId\n } = Ariakit.useStoreState(store);\n const {\n setActiveId\n } = store;\n useEffect(() => {\n requestAnimationFrame(() => {\n const focusedElement = items?.[0]?.element?.ownerDocument.activeElement;\n if (!focusedElement || !items.some(item => focusedElement === item.element)) {\n return; // Return early if no tabs are focused.\n }\n\n // If, after ariakit re-computes the active tab, that tab doesn't match\n // the currently focused tab, then we force an update to ariakit to avoid\n // any mismatches, especially when navigating to previous/next tab with\n // arrow keys.\n if (activeId !== focusedElement.id) {\n setActiveId(focusedElement.id);\n }\n });\n }, [activeId, items, setActiveId]);\n const contextValue = useMemo(() => ({\n store,\n instanceId\n }), [store, instanceId]);\n return /*#__PURE__*/_jsx(TabsContext.Provider, {\n value: contextValue,\n children: children\n });\n}, {\n /**\n * Renders a single tab.\n *\n * The currently active tab receives default styling that can be\n * overridden with CSS targeting `[aria-selected=\"true\"]`.\n */\n Tab: Object.assign(Tab, {\n displayName: 'Tabs.Tab'\n }),\n /**\n * A wrapper component for the `Tab` components.\n *\n * It is responsible for rendering the list of tabs.\n */\n TabList: Object.assign(TabList, {\n displayName: 'Tabs.TabList'\n }),\n /**\n * Renders the content to display for a single tab once that tab is selected.\n */\n TabPanel: Object.assign(TabPanel, {\n displayName: 'Tabs.TabPanel'\n }),\n Context: Object.assign(TabsContext, {\n displayName: 'Tabs.Context'\n })\n});"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA8B;AAC9B,qBAAmC;AACnC,kBAAsB;AAMtB,qBAA4B;AAC5B,iBAAoB;AACpB,qBAAwB;AACxB,sBAAyB;AACzB,yBAA4B;AAC5B,SAAS,wBAAwB,YAAY,YAAY;AACvD,SAAO,cAAc,GAAG,UAAU,IAAI,UAAU;AAClD;AACA,SAAS,wBAAwB,YAAY,YAAY;AACvD,SAAO,OAAO,eAAe,WAAW,WAAW,QAAQ,GAAG,UAAU,KAAK,EAAE,IAAI;AACrF;AAYO,IAAM,OAAO,OAAO,OAAO,SAASA,MAAK;AAAA,EAC9C,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,iBAAa,8BAAcA,OAAM,MAAM;AAC7C,QAAM,QAAgB,oBAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,mBAAmB,wBAAwB,cAAc,UAAU;AAAA,IACnE,eAAe,mBAAiB;AAC9B,iBAAW,wBAAwB,eAAe,UAAU,CAAC;AAAA,IAC/D;AAAA,IACA,YAAY,wBAAwB,eAAe,UAAU;AAAA,IAC7D,iBAAiB,wBAAwB,oBAAoB,UAAU;AAAA,IACvE,aAAa,iBAAe;AAC1B,4BAAsB,wBAAwB,aAAa,UAAU,CAAC;AAAA,IACxE;AAAA,IACA,UAAU,wBAAwB,aAAa,UAAU;AAAA,IACzD,SAAK,mBAAM;AAAA,EACb,CAAC;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAY,sBAAc,KAAK;AAC/B,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,gCAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,YAAM,iBAAiB,QAAQ,CAAC,GAAG,SAAS,cAAc;AAC1D,UAAI,CAAC,kBAAkB,CAAC,MAAM,KAAK,UAAQ,mBAAmB,KAAK,OAAO,GAAG;AAC3E;AAAA,MACF;AAMA,UAAI,aAAa,eAAe,IAAI;AAClC,oBAAY,eAAe,EAAE;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,OAAO,WAAW,CAAC;AACjC,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,UAAU,CAAC;AACvB,SAAoB,uCAAAC,KAAK,2BAAY,UAAU;AAAA,IAC7C,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,KAAK,OAAO,OAAO,gBAAK;AAAA,IACtB,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,SAAS,OAAO,OAAO,wBAAS;AAAA,IAC9B,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA,EAID,UAAU,OAAO,OAAO,0BAAU;AAAA,IAChC,aAAa;AAAA,EACf,CAAC;AAAA,EACD,SAAS,OAAO,OAAO,4BAAa;AAAA,IAClC,aAAa;AAAA,EACf,CAAC;AACH,CAAC;",
"names": ["Tabs", "_jsx"]
}