@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

package/build/tabs/tab.js

@@ -1,25 +1,43 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tab_exports = {};
+__export(tab_exports, {
+  Tab: () => Tab
 });
-exports.Tab = void 0;
-var _element = require("@wordpress/element");
-var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _context = require("./context");
-var _styles = require("./styles");
-var _icons = require("@wordpress/icons");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const Tab = exports.Tab = (0, _element.forwardRef)(function Tab({
+module.exports = __toCommonJS(tab_exports);
+var import_element = require("@wordpress/element");
+var import_warning = __toESM(require("@wordpress/warning"));
+var import_context = require("./context");
+var import_styles = require("./styles");
+var import_icons = require("@wordpress/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Tab = (0, import_element.forwardRef)(function Tab2({
   children,
   tabId,
   disabled,
@@ -30,24 +48,28 @@ const Tab = exports.Tab = (0, _element.forwardRef)(function Tab({
   const {
     store,
     instanceId
-  } = (_useTabsContext = (0, _context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+  } = (_useTabsContext = (0, import_context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
   if (!store) {
-    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("`Tabs.Tab` must be wrapped in a `Tabs` component.") : void 0;
     return null;
   }
   const instancedTabId = `${instanceId}-${tabId}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Tab, {
-    ref: ref,
-    store: store,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Tab, {
+    ref,
+    store,
     id: instancedTabId,
-    disabled: disabled,
-    render: render,
+    disabled,
+    render,
     ...otherProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabChildren, {
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabChevron, {
-      icon: _icons.chevronRight
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TabChildren, {
+      children
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TabChevron, {
+      icon: import_icons.chevronRight
     })]
   });
 });
-//# sourceMappingURL=tab.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab
+});
+//# sourceMappingURL=tab.js.map

package/build/tabs/tab.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_context","_styles","_icons","_jsxRuntime","Tab","exports","forwardRef","children","tabId","disabled","render","otherProps","ref","_useTabsContext","store","instanceId","useTabsContext","globalThis","SCRIPT_DEBUG","warning","instancedTabId","jsxs","id","jsx","TabChildren","TabChevron","icon","chevronRight"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport {\n\tTab as StyledTab,\n\tTabChildren as StyledTabChildren,\n\tTabChevron as StyledTabChevron,\n} from './styles';\nimport type { WordPressComponentProps } from '../context';\nimport { chevronRight } from '@wordpress/icons';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tOmit< WordPressComponentProps< TabProps, 'button', false >, 'id' >\n>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {\n\tconst { store, instanceId } = useTabsContext() ?? {};\n\n\tif ( ! store ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t<StyledTabChildren>{ children }</StyledTabChildren>\n\t\t\t<StyledTabChevron icon={ chevronRight } />\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAMA,IAAAK,MAAA,GAAAL,OAAA;AAAgD,IAAAM,WAAA,GAAAN,OAAA;AAlBhD;AACA;AACA;;AAIA;AACA;AACA;;AAYO,MAAMO,GAAG,GAAAC,OAAA,CAAAD,GAAA,GAAG,IAAAE,mBAAU,EAG1B,SAASF,GAAGA,CAAE;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAAA,IAAAC,eAAA;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,IAAAF,eAAA,GAAG,IAAAG,uBAAc,EAAC,CAAC,cAAAH,eAAA,cAAAA,eAAA,GAAI,CAAC,CAAC;EAEpD,IAAK,CAAEC,KAAK,EAAG;IACdG,UAAA,CAAAC,YAAA,gBAAAC,gBAAO,EAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EAEA,MAAMC,cAAc,GAAG,GAAIL,UAAU,IAAMP,KAAK,EAAG;EAEnD,oBACC,IAAAL,WAAA,CAAAkB,IAAA,EAACpB,OAAA,CAAAG,GAAS;IACTQ,GAAG,EAAGA,GAAK;IACXE,KAAK,EAAGA,KAAO;IACfQ,EAAE,EAAGF,cAAgB;IACrBX,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC,UAAU;IAAAJ,QAAA,gBAEf,IAAAJ,WAAA,CAAAoB,GAAA,EAACtB,OAAA,CAAAuB,WAAiB;MAAAjB,QAAA,EAAGA;IAAQ,CAAqB,CAAC,eACnD,IAAAJ,WAAA,CAAAoB,GAAA,EAACtB,OAAA,CAAAwB,UAAgB;MAACC,IAAI,EAAGC;IAAc,CAAE,CAAC;EAAA,CAChC,CAAC;AAEd,CAAE,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/tabs/tab.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab, TabChildren as StyledTabChildren, TabChevron as StyledTabChevron } from './styles';\nimport { chevronRight } from '@wordpress/icons';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Tab = forwardRef(function Tab({\n  children,\n  tabId,\n  disabled,\n  render,\n  ...otherProps\n}, ref) {\n  var _useTabsContext;\n  const {\n    store,\n    instanceId\n  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  const instancedTabId = `${instanceId}-${tabId}`;\n  return /*#__PURE__*/_jsxs(StyledTab, {\n    ref: ref,\n    store: store,\n    id: instancedTabId,\n    disabled: disabled,\n    render: render,\n    ...otherProps,\n    children: [/*#__PURE__*/_jsx(StyledTabChildren, {\n      children: children\n    }), /*#__PURE__*/_jsx(StyledTabChevron, {\n      icon: chevronRight\n    })]\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAA2B;AAM3B,qBAAoB;AACpB,qBAA+B;AAC/B,oBAAmG;AACnG,mBAA6B;AAC7B,yBAA2C;AACpC,MAAM,UAAM,2BAAW,SAASA,KAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,MAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,KAAK,sBAAkB,+BAAe,OAAO,QAAQ,oBAAoB,SAAS,kBAAkB,CAAC;AACrG,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,mDAAmD,IAAI;AAClG,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,uCAAAC,MAAM,cAAAC,KAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,CAAc,uCAAAC,KAAK,cAAAC,aAAmB;AAAA,MAC9C;AAAA,IACF,CAAC,GAAgB,uCAAAD,KAAK,cAAAE,YAAkB;AAAA,MACtC,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
+  "names": ["Tab", "warning", "_jsxs", "StyledTab", "_jsx", "StyledTabChildren", "StyledTabChevron"]
+}

package/build/tabs/tablist.js

@@ -1,46 +1,52 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tablist_exports = {};
+__export(tablist_exports, {
+  TabList: () => TabList
 });
-exports.TabList = void 0;
-var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _context = require("./context");
-var _styles = require("./styles");
-var _elementRect = require("../utils/element-rect");
-var _useTrackOverflow = require("./use-track-overflow");
-var _useAnimatedOffsetRect = require("../utils/hooks/use-animated-offset-rect");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(tablist_exports);
+var Ariakit = __toESM(require("@ariakit/react"));
+var import_clsx = __toESM(require("clsx"));
+var import_warning = __toESM(require("@wordpress/warning"));
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_context = require("./context");
+var import_styles = require("./styles");
+var import_element_rect = require("../utils/element-rect");
+var import_use_track_overflow = require("./use-track-overflow");
+var import_use_animated_offset_rect = require("../utils/hooks/use-animated-offset-rect");
+var import_jsx_runtime = require("react/jsx-runtime");
 const DEFAULT_SCROLL_MARGIN = 24;
-
-/**
- * Scrolls a given parent element so that a given rect is visible.
- *
- * The scroll is updated initially and whenever the rect changes.
- */
 function useScrollRectIntoView(parent, rect, {
   margin = DEFAULT_SCROLL_MARGIN
 } = {}) {
-  (0, _element.useLayoutEffect)(() => {
+  (0, import_element.useLayoutEffect)(() => {
     if (!parent || !rect) {
       return;
     }
@@ -63,88 +69,74 @@ function useScrollRectIntoView(parent, rect, {
       scrollLeft = parentScroll + rightOverflow;
     }
     if (scrollLeft !== null) {
-      /**
-       * The optional chaining is used here to avoid unit test failures.
-       * It can be removed when JSDOM supports `Element` scroll methods.
-       * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096
-       */
       parent.scroll?.({
         left: scrollLeft
       });
     }
   }, [margin, parent, rect]);
 }
-const TabList = exports.TabList = (0, _element.forwardRef)(function TabList({
+const TabList = (0, import_element.forwardRef)(function TabList2({
   children,
   ...otherProps
 }, ref) {
   var _useTabsContext;
   const {
     store
-  } = (_useTabsContext = (0, _context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
-  const selectedId = Ariakit.useStoreState(store, 'selectedId');
-  const activeId = Ariakit.useStoreState(store, 'activeId');
-  const selectOnMove = Ariakit.useStoreState(store, 'selectOnMove');
-  const items = Ariakit.useStoreState(store, 'items');
-  const [parent, setParent] = (0, _element.useState)();
-  const refs = (0, _compose.useMergeRefs)([ref, setParent]);
+  } = (_useTabsContext = (0, import_context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
+  const selectedId = Ariakit.useStoreState(store, "selectedId");
+  const activeId = Ariakit.useStoreState(store, "activeId");
+  const selectOnMove = Ariakit.useStoreState(store, "selectOnMove");
+  const items = Ariakit.useStoreState(store, "items");
+  const [parent, setParent] = (0, import_element.useState)();
+  const refs = (0, import_compose.useMergeRefs)([ref, setParent]);
   const selectedItem = store?.item(selectedId);
-  const renderedItems = Ariakit.useStoreState(store, 'renderedItems');
+  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
   const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;
-  // Use selectedItemIndex as a dependency to force recalculation when the
-  // selected item index changes (elements are swapped / added / removed).
-  const selectedRect = (0, _elementRect.useTrackElementOffsetRect)(selectedItem?.element, [selectedItemIndex]);
-
-  // Track overflow to show scroll hints.
-  const overflow = (0, _useTrackOverflow.useTrackOverflow)(parent, {
+  const selectedRect = (0, import_element_rect.useTrackElementOffsetRect)(selectedItem?.element, [selectedItemIndex]);
+  const overflow = (0, import_use_track_overflow.useTrackOverflow)(parent, {
     first: items?.at(0)?.element,
     last: items?.at(-1)?.element
   });
-
-  // Size, position, and animate the indicator.
-  (0, _useAnimatedOffsetRect.useAnimatedOffsetRect)(parent, selectedRect, {
-    prefix: 'selected',
-    dataAttribute: 'indicator-animated',
-    transitionEndFilter: event => event.pseudoElement === '::before',
+  (0, import_use_animated_offset_rect.useAnimatedOffsetRect)(parent, selectedRect, {
+    prefix: "selected",
+    dataAttribute: "indicator-animated",
+    transitionEndFilter: (event) => event.pseudoElement === "::before",
     roundRect: true
   });
-
-  // Make sure selected tab is scrolled into view.
   useScrollRectIntoView(parent, selectedRect);
   const onBlur = () => {
     if (!selectOnMove) {
       return;
     }
-
-    // When automatic tab selection is on, make sure that the active tab is up
-    // to date with the selected tab when leaving the tablist. This makes sure
-    // that the selected tab will receive keyboard focus when tabbing back into
-    // the tablist.
     if (selectedId !== activeId) {
       store?.setActiveId(selectedId);
     }
   };
   if (!store) {
-    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("`Tabs.TabList` must be wrapped in a `Tabs` component.") : void 0;
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledTabList, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabList, {
     ref: refs,
-    store: store,
-    render: props => {
+    store,
+    render: (props) => {
       var _props$tabIndex;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         ...props,
         // Fallback to -1 to prevent browsers from making the tablist
         // tabbable when it is a scrolling container.
         tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1
       });
     },
-    onBlur: onBlur,
-    "data-select-on-move": selectOnMove ? 'true' : 'false',
+    onBlur,
+    "data-select-on-move": selectOnMove ? "true" : "false",
     ...otherProps,
-    className: (0, _clsx.default)(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className),
-    children: children
+    className: (0, import_clsx.default)(overflow.first && "is-overflowing-first", overflow.last && "is-overflowing-last", otherProps.className),
+    children
   });
 });
-//# sourceMappingURL=tablist.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabList
+});
+//# sourceMappingURL=tablist.js.map

package/build/tabs/tablist.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_warning","_element","_compose","_context","_styles","_elementRect","_useTrackOverflow","_useAnimatedOffsetRect","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_SCROLL_MARGIN","useScrollRectIntoView","parent","rect","margin","useLayoutEffect","scrollLeft","parentScroll","parentWidth","getBoundingClientRect","width","left","childLeft","childWidth","parentRightEdge","childRightEdge","rightOverflow","leftOverflow","scroll","TabList","exports","forwardRef","children","otherProps","ref","_useTabsContext","store","useTabsContext","selectedId","useStoreState","activeId","selectOnMove","items","setParent","useState","refs","useMergeRefs","selectedItem","item","renderedItems","selectedItemIndex","indexOf","selectedRect","useTrackElementOffsetRect","element","overflow","useTrackOverflow","first","at","last","useAnimatedOffsetRect","prefix","dataAttribute","transitionEndFilter","event","pseudoElement","roundRect","onBlur","setActiveId","globalThis","SCRIPT_DEBUG","warning","jsx","StyledTabList","render","props","_props$tabIndex","tabIndex","className","clsx"],"sources":["@wordpress/components/src/tabs/tablist.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useLayoutEffect, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { TabListProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ElementOffsetRect } from '../utils/element-rect';\nimport { useTabsContext } from './context';\nimport { StyledTabList } from './styles';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useTrackOverflow } from './use-track-overflow';\nimport { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';\n\nconst DEFAULT_SCROLL_MARGIN = 24;\n\n/**\n * Scrolls a given parent element so that a given rect is visible.\n *\n * The scroll is updated initially and whenever the rect changes.\n */\nfunction useScrollRectIntoView(\n\tparent: HTMLElement | undefined,\n\trect: ElementOffsetRect,\n\t{ margin = DEFAULT_SCROLL_MARGIN } = {}\n) {\n\tuseLayoutEffect( () => {\n\t\tif ( ! parent || ! rect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollLeft: parentScroll } = parent;\n\t\tconst parentWidth = parent.getBoundingClientRect().width;\n\t\tconst { left: childLeft, width: childWidth } = rect;\n\n\t\tconst parentRightEdge = parentScroll + parentWidth;\n\t\tconst childRightEdge = childLeft + childWidth;\n\t\tconst rightOverflow = childRightEdge + margin - parentRightEdge;\n\t\tconst leftOverflow = parentScroll - ( childLeft - margin );\n\n\t\tlet scrollLeft = null;\n\t\tif ( leftOverflow > 0 ) {\n\t\t\tscrollLeft = parentScroll - leftOverflow;\n\t\t} else if ( rightOverflow > 0 ) {\n\t\t\tscrollLeft = parentScroll + rightOverflow;\n\t\t}\n\n\t\tif ( scrollLeft !== null ) {\n\t\t\t/**\n\t\t\t * The optional chaining is used here to avoid unit test failures.\n\t\t\t * It can be removed when JSDOM supports `Element` scroll methods.\n\t\t\t * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096\n\t\t\t */\n\t\t\tparent.scroll?.( { left: scrollLeft } );\n\t\t}\n\t}, [ margin, parent, rect ] );\n}\n\nexport const TabList = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< TabListProps, 'div', false >\n>( function TabList( { children, ...otherProps }, ref ) {\n\tconst { store } = useTabsContext() ?? {};\n\n\tconst selectedId = Ariakit.useStoreState( store, 'selectedId' );\n\tconst activeId = Ariakit.useStoreState( store, 'activeId' );\n\tconst selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );\n\tconst items = Ariakit.useStoreState( store, 'items' );\n\tconst [ parent, setParent ] = useState< HTMLElement >();\n\tconst refs = useMergeRefs( [ ref, setParent ] );\n\n\tconst selectedItem = store?.item( selectedId );\n\tconst renderedItems = Ariakit.useStoreState( store, 'renderedItems' );\n\n\tconst selectedItemIndex =\n\t\trenderedItems && selectedItem\n\t\t\t? renderedItems.indexOf( selectedItem )\n\t\t\t: -1;\n\t// Use selectedItemIndex as a dependency to force recalculation when the\n\t// selected item index changes (elements are swapped / added / removed).\n\tconst selectedRect = useTrackElementOffsetRect( selectedItem?.element, [\n\t\tselectedItemIndex,\n\t] );\n\n\t// Track overflow to show scroll hints.\n\tconst overflow = useTrackOverflow( parent, {\n\t\tfirst: items?.at( 0 )?.element,\n\t\tlast: items?.at( -1 )?.element,\n\t} );\n\n\t// Size, position, and animate the indicator.\n\tuseAnimatedOffsetRect( parent, selectedRect, {\n\t\tprefix: 'selected',\n\t\tdataAttribute: 'indicator-animated',\n\t\ttransitionEndFilter: ( event ) => event.pseudoElement === '::before',\n\t\troundRect: true,\n\t} );\n\n\t// Make sure selected tab is scrolled into view.\n\tuseScrollRectIntoView( parent, selectedRect );\n\n\tconst onBlur = () => {\n\t\tif ( ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// When automatic tab selection is on, make sure that the active tab is up\n\t\t// to date with the selected tab when leaving the tablist. This makes sure\n\t\t// that the selected tab will receive keyboard focus when tabbing back into\n\t\t// the tablist.\n\t\tif ( selectedId !== activeId ) {\n\t\t\tstore?.setActiveId( selectedId );\n\t\t}\n\t};\n\n\tif ( ! store ) {\n\t\twarning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledTabList\n\t\t\tref={ refs }\n\t\t\tstore={ store }\n\t\t\trender={ ( props ) => (\n\t\t\t\t<div\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t// Fallback to -1 to prevent browsers from making the tablist\n\t\t\t\t\t// tabbable when it is a scrolling container.\n\t\t\t\t\ttabIndex={ props.tabIndex ?? -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tonBlur={ onBlur }\n\t\t\tdata-select-on-move={ selectOnMove ? 'true' : 'false' }\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ clsx(\n\t\t\t\toverflow.first && 'is-overflowing-first',\n\t\t\t\toverflow.last && 'is-overflowing-last',\n\t\t\t\totherProps.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabList>\n\t);\n} );\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/tabs/tablist.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\nimport { forwardRef, useLayoutEffect, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { useTabsContext } from './context';\nimport { StyledTabList } from './styles';\nimport { useTrackElementOffsetRect } from '../utils/element-rect';\nimport { useTrackOverflow } from './use-track-overflow';\nimport { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_SCROLL_MARGIN = 24;\n\n/**\n * Scrolls a given parent element so that a given rect is visible.\n *\n * The scroll is updated initially and whenever the rect changes.\n */\nfunction useScrollRectIntoView(parent, rect, {\n  margin = DEFAULT_SCROLL_MARGIN\n} = {}) {\n  useLayoutEffect(() => {\n    if (!parent || !rect) {\n      return;\n    }\n    const {\n      scrollLeft: parentScroll\n    } = parent;\n    const parentWidth = parent.getBoundingClientRect().width;\n    const {\n      left: childLeft,\n      width: childWidth\n    } = rect;\n    const parentRightEdge = parentScroll + parentWidth;\n    const childRightEdge = childLeft + childWidth;\n    const rightOverflow = childRightEdge + margin - parentRightEdge;\n    const leftOverflow = parentScroll - (childLeft - margin);\n    let scrollLeft = null;\n    if (leftOverflow > 0) {\n      scrollLeft = parentScroll - leftOverflow;\n    } else if (rightOverflow > 0) {\n      scrollLeft = parentScroll + rightOverflow;\n    }\n    if (scrollLeft !== null) {\n      /**\n       * The optional chaining is used here to avoid unit test failures.\n       * It can be removed when JSDOM supports `Element` scroll methods.\n       * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096\n       */\n      parent.scroll?.({\n        left: scrollLeft\n      });\n    }\n  }, [margin, parent, rect]);\n}\nexport const TabList = forwardRef(function TabList({\n  children,\n  ...otherProps\n}, ref) {\n  var _useTabsContext;\n  const {\n    store\n  } = (_useTabsContext = useTabsContext()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};\n  const selectedId = Ariakit.useStoreState(store, 'selectedId');\n  const activeId = Ariakit.useStoreState(store, 'activeId');\n  const selectOnMove = Ariakit.useStoreState(store, 'selectOnMove');\n  const items = Ariakit.useStoreState(store, 'items');\n  const [parent, setParent] = useState();\n  const refs = useMergeRefs([ref, setParent]);\n  const selectedItem = store?.item(selectedId);\n  const renderedItems = Ariakit.useStoreState(store, 'renderedItems');\n  const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;\n  // Use selectedItemIndex as a dependency to force recalculation when the\n  // selected item index changes (elements are swapped / added / removed).\n  const selectedRect = useTrackElementOffsetRect(selectedItem?.element, [selectedItemIndex]);\n\n  // Track overflow to show scroll hints.\n  const overflow = useTrackOverflow(parent, {\n    first: items?.at(0)?.element,\n    last: items?.at(-1)?.element\n  });\n\n  // Size, position, and animate the indicator.\n  useAnimatedOffsetRect(parent, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: true\n  });\n\n  // Make sure selected tab is scrolled into view.\n  useScrollRectIntoView(parent, selectedRect);\n  const onBlur = () => {\n    if (!selectOnMove) {\n      return;\n    }\n\n    // When automatic tab selection is on, make sure that the active tab is up\n    // to date with the selected tab when leaving the tablist. This makes sure\n    // that the selected tab will receive keyboard focus when tabbing back into\n    // the tablist.\n    if (selectedId !== activeId) {\n      store?.setActiveId(selectedId);\n    }\n  };\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  return /*#__PURE__*/_jsx(StyledTabList, {\n    ref: refs,\n    store: store,\n    render: props => {\n      var _props$tabIndex;\n      return /*#__PURE__*/_jsx(\"div\", {\n        ...props,\n        // Fallback to -1 to prevent browsers from making the tablist\n        // tabbable when it is a scrolling container.\n        tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1\n      });\n    },\n    onBlur: onBlur,\n    \"data-select-on-move\": selectOnMove ? 'true' : 'false',\n    ...otherProps,\n    className: clsx(overflow.first && 'is-overflowing-first', overflow.last && 'is-overflowing-last', otherProps.className),\n    children: children\n  });\n});"],
+  "mappings": "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",
+  "names": ["TabList", "warning", "_jsx", "clsx"]
+}

package/build/tabs/tabpanel.js

@@ -1,38 +1,52 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabpanel_exports = {};
+__export(tabpanel_exports, {
+  TabPanel: () => TabPanel
 });
-exports.TabPanel = void 0;
-var _react = require("@ariakit/react");
-var _element = require("@wordpress/element");
-var _styles = require("./styles");
-var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _context = require("./context");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const TabPanel = exports.TabPanel = (0, _element.forwardRef)(function TabPanel({
+module.exports = __toCommonJS(tabpanel_exports);
+var import_react = require("@ariakit/react");
+var import_element = require("@wordpress/element");
+var import_styles = require("./styles");
+var import_warning = __toESM(require("@wordpress/warning"));
+var import_context = require("./context");
+var import_jsx_runtime = require("react/jsx-runtime");
+const TabPanel = (0, import_element.forwardRef)(function TabPanel2({
   children,
   tabId,
   focusable = true,
   ...otherProps
 }, ref) {
-  const context = (0, _context.useTabsContext)();
-  const selectedId = (0, _react.useStoreState)(context?.store, 'selectedId');
+  const context = (0, import_context.useTabsContext)();
+  const selectedId = (0, import_react.useStoreState)(context?.store, "selectedId");
   if (!context) {
-    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("`Tabs.TabPanel` must be wrapped in a `Tabs` component.") : void 0;
     return null;
   }
   const {
@@ -40,18 +54,18 @@ const TabPanel = exports.TabPanel = (0, _element.forwardRef)(function TabPanel({
     instanceId
   } = context;
   const instancedTabId = `${instanceId}-${tabId}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabPanel, {
-    ref: ref,
-    store: store
-    // For TabPanel, the id passed here is the id attribute of the DOM
-    // element.
-    // `tabId` is the id of the tab that controls this panel.
-    ,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TabPanel, {
+    ref,
+    store,
     id: `${instancedTabId}-view`,
     tabId: instancedTabId,
-    focusable: focusable,
+    focusable,
     ...otherProps,
     children: selectedId === instancedTabId && children
   });
 });
-//# sourceMappingURL=tabpanel.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabPanel
+});
+//# sourceMappingURL=tabpanel.js.map

package/build/tabs/tabpanel.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_react","require","_element","_styles","_warning","_interopRequireDefault","_context","_jsxRuntime","TabPanel","exports","forwardRef","children","tabId","focusable","otherProps","ref","context","useTabsContext","selectedId","useStoreState","store","globalThis","SCRIPT_DEBUG","warning","instanceId","instancedTabId","jsx","id"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tOmit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >\n>( function TabPanel(\n\t{ children, tabId, focusable = true, ...otherProps },\n\tref\n) {\n\tconst context = useTabsContext();\n\tconst selectedId = useStoreState( context?.store, 'selectedId' );\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\t// For TabPanel, the id passed here is the id attribute of the DOM\n\t\t\t// element.\n\t\t\t// `tabId` is the id of the tab that controls this panel.\n\t\t\tid={ `${ instancedTabId }-view` }\n\t\t\ttabId={ instancedTabId }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ selectedId === instancedTabId && children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,OAAA,GAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA2C,IAAAM,WAAA,GAAAN,OAAA;AAjB3C;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,MAAMO,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAG/B,SAASF,QAAQA,CACnB;EAAEG,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAG,IAAAC,uBAAc,EAAC,CAAC;EAChC,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAEH,OAAO,EAAEI,KAAK,EAAE,YAAa,CAAC;EAChE,IAAK,CAAEJ,OAAO,EAAG;IAChBK,UAAA,CAAAC,YAAA,gBAAAC,gBAAO,EAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAEH,KAAK;IAAEI;EAAW,CAAC,GAAGR,OAAO;EACrC,MAAMS,cAAc,GAAG,GAAID,UAAU,IAAMZ,KAAK,EAAG;EAEnD,oBACC,IAAAL,WAAA,CAAAmB,GAAA,EAACvB,OAAA,CAAAK,QAAc;IACdO,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA;IACR;IACA;IACA;IAAA;IACAO,EAAE,EAAG,GAAIF,cAAc,OAAU;IACjCb,KAAK,EAAGa,cAAgB;IACxBZ,SAAS,EAAGA,SAAW;IAAA,GAClBC,UAAU;IAAAH,QAAA,EAEbO,UAAU,KAAKO,cAAc,IAAId;EAAQ,CAC5B,CAAC;AAEnB,CAAE,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/tabs/tabpanel.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { TabPanel as StyledTabPanel } from './styles';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const TabPanel = forwardRef(function TabPanel({\n  children,\n  tabId,\n  focusable = true,\n  ...otherProps\n}, ref) {\n  const context = useTabsContext();\n  const selectedId = useStoreState(context?.store, 'selectedId');\n  if (!context) {\n    globalThis.SCRIPT_DEBUG === true ? warning('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;\n    return null;\n  }\n  const {\n    store,\n    instanceId\n  } = context;\n  const instancedTabId = `${instanceId}-${tabId}`;\n  return /*#__PURE__*/_jsx(StyledTabPanel, {\n    ref: ref,\n    store: store\n    // For TabPanel, the id passed here is the id attribute of the DOM\n    // element.\n    // `tabId` is the id of the tab that controls this panel.\n    ,\n    id: `${instancedTabId}-view`,\n    tabId: instancedTabId,\n    focusable: focusable,\n    ...otherProps,\n    children: selectedId === instancedTabId && children\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA8B;AAK9B,qBAA2B;AAM3B,oBAA2C;AAC3C,qBAAoB;AACpB,qBAA+B;AAC/B,yBAA4B;AACrB,MAAM,eAAW,2BAAW,SAASA,UAAS;AAAA,EACnD;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAU,+BAAe;AAC/B,QAAM,iBAAa,4BAAc,SAAS,OAAO,YAAY;AAC7D,MAAI,CAAC,SAAS;AACZ,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,wDAAwD,IAAI;AACvG,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAiB,GAAG,UAAU,IAAI,KAAK;AAC7C,SAAoB,uCAAAC,KAAK,cAAAC,UAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IAKA,IAAI,GAAG,cAAc;AAAA,IACrB,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,IACH,UAAU,eAAe,kBAAkB;AAAA,EAC7C,CAAC;AACH,CAAC;",
+  "names": ["TabPanel", "warning", "_jsx", "StyledTabPanel"]
+}

package/build/tabs/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/tabs/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as Ariakit from '@ariakit/react';\n\nexport type TabsContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * The tabStore object returned by Ariakit's `useTabStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.TabStore;\n\t\t\t/**\n\t\t\t * The unique id string for this instance of the Tabs component.\n\t\t\t */\n\t\t\tinstanceId: string;\n\t  }\n\t| undefined;\n\nexport type TabsProps = {\n\t/**\n\t * The children elements, which should include one instance of the\n\t * `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`\n\t * components as there are `Tabs.Tab` components.\n\t */\n\tchildren: Ariakit.TabProviderProps[ 'children' ];\n\t/**\n\t * Determines if the tab should be selected when it receives focus. If set to\n\t * `false`, the tab will only be selected upon clicking, not when using arrow\n\t * keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)\n\t * for more info.\n\t *\n\t * @default true\n\t */\n\tselectOnMove?: Ariakit.TabProviderProps[ 'selectOnMove' ];\n\t/**\n\t * The id of the tab whose panel is currently visible.\n\t *\n\t * If left `undefined`, it will be automatically set to the first enabled\n\t * tab, and the component assumes it is being used in \"uncontrolled\" mode.\n\t *\n\t * Consequently, any value different than `undefined` will set the component\n\t * in \"controlled\" mode. When in \"controlled\" mode, the `null` value will\n\t * result in no tabs being selected, and the tablist becoming tabbable.\n\t */\n\tselectedTabId?: Ariakit.TabProviderProps[ 'selectedId' ];\n\t/**\n\t * The id of the tab whose panel is currently visible.\n\t *\n\t * If left `undefined`, it will be automatically set to the first enabled\n\t * tab. If set to `null`, no tab will be selected, and the tablist will be\n\t * tabbable.\n\t *\n\t * Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided (meaning the component will be used in \"controlled\" mode).\n\t */\n\tdefaultTabId?: Ariakit.TabProviderProps[ 'defaultSelectedId' ];\n\t/**\n\t * The function called when the `selectedTabId` changes.\n\t */\n\tonSelect?: Ariakit.TabProviderProps[ 'setSelectedId' ];\n\t/**\n\t * The current active tab `id`. The active tab is the tab element within the\n\t * tablist widget that has DOM focus.\n\t *\n\t * - `null` represents the tablist (ie. the base composite element). Users\n\t *   will be able to navigate out of it using arrow keys.\n\t * - If `activeTabId` is initially set to `null`, the base composite element\n\t *   itself will have focus and users will be able to navigate to it using\n\t *   arrow keys.\n\t */\n\tactiveTabId?: Ariakit.TabProviderProps[ 'activeId' ];\n\t/**\n\t * The tab id that should be active by default when the composite widget is\n\t * rendered. If `null`, the tablist element itself will have focus\n\t * and users will be able to navigate to it using arrow keys. If `undefined`,\n\t * the first enabled item will be focused.\n\t *\n\t * Note: this prop will be overridden by the `activeTabId` prop if it is\n\t * provided.\n\t */\n\tdefaultActiveTabId?: Ariakit.TabProviderProps[ 'defaultActiveId' ];\n\t/**\n\t * A callback that gets called when the `activeTabId` state changes.\n\t */\n\tonActiveTabIdChange?: Ariakit.TabProviderProps[ 'setActiveId' ];\n\t/**\n\t * Defines the orientation of the tablist and determines which arrow keys\n\t * can be used to move focus:\n\t *\n\t * - `both`: all arrow keys work.\n\t * - `horizontal`: only left and right arrow keys work.\n\t * - `vertical`: only up and down arrow keys work.\n\t *\n\t * @default \"horizontal\"\n\t */\n\torientation?: Ariakit.TabProviderProps[ 'orientation' ];\n};\n\nexport type TabListProps = {\n\t/**\n\t * The children elements, which should include one or more instances of the\n\t * `Tabs.Tab` component.\n\t */\n\tchildren: Ariakit.TabListProps[ 'children' ];\n};\n\n// TODO: consider prop name changes (tabId, selectedTabId)\n// compound technique\n\nexport type TabProps = {\n\t/**\n\t * The unique ID of the tab. It will be used to register the tab and match\n\t * it to a corresponding `Tabs.TabPanel` component.\n\t */\n\ttabId: NonNullable< Ariakit.TabProps[ 'id' ] >;\n\t/**\n\t * The contents of the tab.\n\t */\n\tchildren?: Ariakit.TabProps[ 'children' ];\n\t/**\n\t * Determines if the tab should be disabled. Note that disabled tabs can\n\t * still be accessed via the keyboard when navigating through the tablist.\n\t *\n\t * @default false\n\t */\n\tdisabled?: Ariakit.TabProps[ 'disabled' ];\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t *\n\t * By default, the tab will be rendered as a `button` element.\n\t */\n\trender?: Ariakit.TabProps[ 'render' ];\n};\n\nexport type TabPanelProps = {\n\t/**\n\t * The contents of the tab panel.\n\t */\n\tchildren?: Ariakit.TabPanelProps[ 'children' ];\n\t/**\n\t * The unique `id` of the `Tabs.Tab` component controlling this panel. This\n\t * connection is used to assign the `aria-labelledby` attribute to the tab\n\t * panel and to determine if the tab panel should be visible.\n\t *\n\t * If not provided, this link is automatically established by matching the\n\t * order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM.\n\t */\n\ttabId: NonNullable< Ariakit.TabPanelProps[ 'tabId' ] >;\n\t/**\n\t * Determines whether or not the tabpanel element should be focusable.\n\t * If `false`, pressing the tab key will skip over the tabpanel, and instead\n\t * focus on the first focusable element in the panel (if there is one).\n\t *\n\t * @default true\n\t */\n\tfocusable?: Ariakit.TabPanelProps[ 'focusable' ];\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/tabs/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}