@wordpress/components/build/tab-panel/index.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/tab-panel/index.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = id => {\n  if (typeof id === 'undefined' || id === null) {\n    return;\n  }\n  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = ({\n  className,\n  children,\n  tabs,\n  selectOnMove = true,\n  initialTabName,\n  orientation = 'horizontal',\n  activeClass = 'is-active',\n  onSelect\n}, ref) => {\n  const instanceId = useInstanceId(TabPanel, 'tab-panel');\n  const prependInstanceId = useCallback(tabName => {\n    if (typeof tabName === 'undefined') {\n      return;\n    }\n    return `${instanceId}-${tabName}`;\n  }, [instanceId]);\n  const tabStore = Ariakit.useTabStore({\n    setSelectedId: newTabValue => {\n      if (typeof newTabValue === 'undefined' || newTabValue === null) {\n        return;\n      }\n      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);\n      if (newTab?.disabled || newTab === selectedTab) {\n        return;\n      }\n      const simplifiedTabName = extractTabName(newTabValue);\n      if (typeof simplifiedTabName === 'undefined') {\n        return;\n      }\n      onSelect?.(simplifiedTabName);\n    },\n    orientation,\n    selectOnMove,\n    defaultSelectedId: prependInstanceId(initialTabName),\n    rtl: isRTL()\n  });\n  const selectedTabName = extractTabName(Ariakit.useStoreState(tabStore, 'selectedId'));\n  const setTabStoreSelectedId = useCallback(tabName => {\n    tabStore.setState('selectedId', prependInstanceId(tabName));\n  }, [prependInstanceId, tabStore]);\n  const selectedTab = tabs.find(({\n    name\n  }) => name === selectedTabName);\n  const previousSelectedTabName = usePrevious(selectedTabName);\n\n  // Ensure `onSelect` is called when the initial tab is selected.\n  useEffect(() => {\n    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {\n      onSelect?.(selectedTabName);\n    }\n  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);\n\n  // Handle selecting the initial tab.\n  useLayoutEffect(() => {\n    // If there's a selected tab, don't override it.\n    if (selectedTab) {\n      return;\n    }\n    const initialTab = tabs.find(tab => tab.name === initialTabName);\n    // Wait for the denoted initial tab to be declared before making a\n    // selection. This ensures that if a tab is declared lazily it can\n    // still receive initial selection.\n    if (initialTabName && !initialTab) {\n      return;\n    }\n    if (initialTab && !initialTab.disabled) {\n      // Select the initial tab if it's not disabled.\n      setTabStoreSelectedId(initialTab.name);\n    } else {\n      // Fallback to the first enabled tab when the initial tab is\n      // disabled or it can't be found.\n      const firstEnabledTab = tabs.find(tab => !tab.disabled);\n      if (firstEnabledTab) {\n        setTabStoreSelectedId(firstEnabledTab.name);\n      }\n    }\n  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);\n\n  // Handle the currently selected tab becoming disabled.\n  useEffect(() => {\n    // This effect only runs when the selected tab is defined and becomes disabled.\n    if (!selectedTab?.disabled) {\n      return;\n    }\n    const firstEnabledTab = tabs.find(tab => !tab.disabled);\n    // If the currently selected tab becomes disabled, select the first enabled tab.\n    // (if there is one).\n    if (firstEnabledTab) {\n      setTabStoreSelectedId(firstEnabledTab.name);\n    }\n  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(Ariakit.TabList, {\n      store: tabStore,\n      className: \"components-tab-panel__tabs\",\n      children: tabs.map(tab => {\n        return /*#__PURE__*/_jsx(Ariakit.Tab, {\n          id: prependInstanceId(tab.name),\n          className: clsx('components-tab-panel__tabs-item', tab.className, {\n            [activeClass]: tab.name === selectedTabName\n          }),\n          disabled: tab.disabled,\n          \"aria-controls\": `${prependInstanceId(tab.name)}-view`,\n          render: /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            icon: tab.icon,\n            label: tab.icon && tab.title,\n            showTooltip: !!tab.icon\n          }),\n          children: !tab.icon && tab.title\n        }, tab.name);\n      })\n    }), selectedTab && /*#__PURE__*/_jsx(Ariakit.TabPanel, {\n      id: `${prependInstanceId(selectedTab.name)}-view`,\n      store: tabStore,\n      tabId: prependInstanceId(selectedTab.name),\n      className: \"components-tab-panel__tab-content\",\n      children: children(selectedTab)\n    })]\n  });\n};\nexport const TabPanel = forwardRef(UnforwardedTabPanel);\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;"],
  "mappings": "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",
  "names": ["TabPanel", "_jsxs", "_jsx", "clsx", "Button"]
}