npm - @wordpress/components - Versions diffs - 25.12.0 → 25.14.0 - Mend

@wordpress/components 25.12.0 → 25.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (342) hide show

package/build-module/query-controls/category-select.js CHANGED Viewed

@@ -10,6 +10,7 @@ import TreeSelect from '../tree-select';
  */
 import { useMemo } from '@wordpress/element';
 export default function CategorySelect({
+  __next40pxDefaultSize,
   label,
   noOptionLabel,
   categoriesList,
@@ -27,7 +28,8 @@ export default function CategorySelect({
     tree: termsTree,
     selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,
     ...props,
-    __nextHasNoMarginBottom: true
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize
   });
 }
 //# sourceMappingURL=category-select.js.map

package/build-module/query-controls/category-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["buildTermsTree","TreeSelect","useMemo","CategorySelect","label","noOptionLabel","categoriesList","selectedCategoryId","onChange","onChangeProp","props","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/category-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n /\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\n\n/\n WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { CategorySelectProps } from './types';\n\nexport default function CategorySelect( {\n\tlabel,\n\tnoOptionLabel,\n\tcategoriesList,\n\tselectedCategoryId,\n\tonChange: onChangeProp,\n\t...props\n}: CategorySelectProps ) {\n\tconst termsTree = useMemo( () => {\n\t\treturn buildTermsTree( categoriesList );\n\t}, [ categoriesList ] );\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedCategoryId !== undefined\n\t\t\t\t\t? String( selectedCategoryId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;;AAEvC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,eAAe,SAASC,cAAcA,CAAE;EACvCC,KAAK;EACLC,aAAa;EACbC,cAAc;EACdC,kBAAkB;EAClBC,QAAQ,EAAEC,YAAY;EACtB,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,SAAS,~~GAAGT~~,OAAO,CAAE,MAAM;IAChC,OAAOF,cAAc,~~CAAEM~~,cAAe,CAAC;EACxC,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,OACCM,aAAA,~~CAACX~~,UAAU;~~IAETG~~,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBI,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTP,kBAAkB,KAAKQ,SAAS,GAC7BC,MAAM,CAAET,kBAAmB,CAAC,GAC5BQ,SACH;IAAA,GACIL,KAAK;IACVO,uBAAuB;~~EAAA~~,~~CACvB~~,CAAC;AAEJ"}
1	+ {"version":3,"names":["buildTermsTree","TreeSelect","useMemo","CategorySelect","__next40pxDefaultSize","label","noOptionLabel","categoriesList","selectedCategoryId","onChange","onChangeProp","props","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/category-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n /\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\n\n/\n WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { CategorySelectProps } from './types';\n\nexport default function CategorySelect( {\n\t__next40pxDefaultSize,\n\tlabel,\n\tnoOptionLabel,\n\tcategoriesList,\n\tselectedCategoryId,\n\tonChange: onChangeProp,\n\t...props\n}: CategorySelectProps ) {\n\tconst termsTree = useMemo( () => {\n\t\treturn buildTermsTree( categoriesList );\n\t}, [ categoriesList ] );\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedCategoryId !== undefined\n\t\t\t\t\t? String( selectedCategoryId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;;AAEvC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,eAAe,SAASC,cAAcA,CAAE;EACvCC,qBAAqB;EACrBC,KAAK;EACLC,aAAa;EACbC,cAAc;EACdC,kBAAkB;EAClBC,QAAQ,EAAEC,YAAY;EACtB,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,SAAS,GAAGV,OAAO,CAAE,MAAM;IAChC,OAAOF,cAAc,CAAEO,cAAe,CAAC;EACxC,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,OACCM,aAAA,CAACZ,UAAU;IAETI,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBI,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTP,kBAAkB,KAAKQ,SAAS,GAC7BC,MAAM,CAAET,kBAAmB,CAAC,GAC5BQ,SACH;IAAA,GACIL,KAAK;IACVO,uBAAuB;IACvBd,qBAAqB,EAAGA;EAAuB,CAC/C,CAAC;AAEJ"}

package/build-module/query-controls/index.js CHANGED Viewed

@@ -49,6 +49,7 @@ function isMultipleCategorySelection(props) {
  * ```
  */
 export function QueryControls({
+  __next40pxDefaultSize = false,
   authorList,
   selectedAuthorId,
   numberOfItems,
@@ -69,6 +70,7 @@ export function QueryControls({
     className: "components-query-controls"
   }, [onOrderChange && onOrderByChange && createElement(SelectControl, {
     __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-order-select",
     label: __('Order by'),
     value: `${orderBy}/${order}`,
@@ -100,6 +102,7 @@ export function QueryControls({
       }
     }
   }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && createElement(CategorySelect, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-category-select",
     categoriesList: props.categoriesList,
     label: __('Category'),
@@ -107,6 +110,7 @@ export function QueryControls({
     selectedCategoryId: props.selectedCategoryId,
     onChange: props.onCategoryChange
   }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && createElement(FormTokenField, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     __nextHasNoMarginBottom: true,
     key: "query-controls-categories-select",
     label: __('Categories'),
@@ -122,6 +126,7 @@ export function QueryControls({
     onChange: props.onCategoryChange,
     maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
   }), onAuthorChange && createElement(AuthorSelect, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-author-select",
     authorList: authorList,
     label: __('Author'),
@@ -130,7 +135,7 @@ export function QueryControls({
     onChange: onAuthorChange
   }), onNumberOfItemsChange && createElement(RangeControl, {
     __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-range-control",
     label: __('Number of items'),
     value: numberOfItems,

package/build-module/query-controls/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","createElement","spacing","className","__nextHasNoMarginBottom","key","label","value","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","__next40pxDefaultSize","min","max","required"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/\n Controls to query for posts.\n \n ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\n * onOrderByChange={ ( newOrderBy ) => {\n * updateQuery( { orderBy: newOrderBy } )\n * }\n * onOrderChange={ ( newOrder ) => {\n * updateQuery( { order: newOrder } )\n * }\n * categoriesList={ categories }\n * selectedCategoryId={ category }\n * onCategoryChange={ ( newCategory ) => {\n * updateQuery( { category: newCategory } )\n * }\n * onNumberOfItemsChange={ ( newNumberOfItems ) => {\n * updateQuery( { numberOfItems: newNumberOfItems } )\n * } }\n * />\n * );\n * ```\n /\nexport function QueryControls( {\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in ascending order /\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name \|\| item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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"}
1	+ {"version":3,"names":["__","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","__next40pxDefaultSize","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","createElement","spacing","className","__nextHasNoMarginBottom","key","label","value","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","min","max","required"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/\n Controls to query for posts.\n \n ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\n * onOrderByChange={ ( newOrderBy ) => {\n * updateQuery( { orderBy: newOrderBy } )\n * }\n * onOrderChange={ ( newOrder ) => {\n * updateQuery( { order: newOrder } )\n * }\n * categoriesList={ categories }\n * selectedCategoryId={ category }\n * onCategoryChange={ ( newCategory ) => {\n * updateQuery( { category: newCategory } )\n * }\n * onNumberOfItemsChange={ ( newNumberOfItems ) => {\n * updateQuery( { numberOfItems: newNumberOfItems } )\n * } }\n * />\n * );\n * ```\n /\nexport function QueryControls( {\n\t__next40pxDefaultSize = false,\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in ascending order /\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name \|\| item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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"}

package/build-module/query-controls/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number \| null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n};\n\ntype Order = 'asc' \| 'desc';\ntype OrderBy = 'date' \| 'title';\n\ntype BaseQueryControlsProps = {\n\t/\n\t An array of the authors to select from.\n\t /\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/\n\t The maximum number of items.\n\t \n\t @default 100\n\t /\n\tmaxItems?: number;\n\t/\n\t The minimum number of items.\n\t \n\t @default 1\n\t /\n\tminItems?: number;\n\t/\n\t The selected number of items to retrieve via the query.\n\t /\n\tnumberOfItems?: number;\n\t/\n\t A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t /\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/\n\t A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t /\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/\n\t A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/\n\t A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/\n\t The order in which to retrieve posts.\n\t /\n\torder?: Order;\n\t/\n\t The meta key by which to order posts.\n\t /\n\torderBy?: OrderBy;\n\t/\n\t The selected author ID.\n\t /\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\n};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t /\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/\n\t\t The selected category for the `categoriesList` prop.\n\t\t /\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t /\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t /\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/\n\t\t The selected categories for the `categorySuggestions` prop.\n\t\t /\n\t\tselectedCategories?: Category[];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t\| QueryControlsWithSingleCategorySelectionProps\n\t\| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number \| null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\ntype Order = 'asc' \| 'desc';\ntype OrderBy = 'date' \| 'title';\n\ntype BaseQueryControlsProps = {\n\t/\n\t An array of the authors to select from.\n\t /\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/\n\t The maximum number of items.\n\t \n\t @default 100\n\t /\n\tmaxItems?: number;\n\t/\n\t The minimum number of items.\n\t \n\t @default 1\n\t /\n\tminItems?: number;\n\t/\n\t The selected number of items to retrieve via the query.\n\t /\n\tnumberOfItems?: number;\n\t/\n\t A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t /\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/\n\t A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t /\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/\n\t A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/\n\t A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/\n\t The order in which to retrieve posts.\n\t /\n\torder?: Order;\n\t/\n\t The meta key by which to order posts.\n\t /\n\torderBy?: OrderBy;\n\t/\n\t The selected author ID.\n\t /\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\n\t/\n\t Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t \n\t @default false\n\t /\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t /\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/\n\t\t The selected category for the `categoriesList` prop.\n\t\t /\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t /\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t /\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/\n\t\t The selected categories for the `categorySuggestions` prop.\n\t\t /\n\t\tselectedCategories?: Category[];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t\| QueryControlsWithSingleCategorySelectionProps\n\t\| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":""}

package/build-module/slot-fill/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/slot-fill/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Component, MutableRefObject, ReactNode, RefObject } from 'react';\n\nexport type DistributiveOmit< T, K extends keyof any > = T extends any\n\t? Omit< T, K >\n\t: never;\n\nexport type SlotKey = string \| symbol;\n\nexport type FillProps = Record< string, any >;\n\ntype SlotPropBase = {\n\t/\n\t Slot name.\n\t /\n\tname: SlotKey;\n\n\t/\n\t props to pass from `Slot` to `Fill`.\n\t \n\t @default {}\n\t /\n\tfillProps?: FillProps;\n};\n\nexport type SlotComponentProps =\n\t\| ( SlotPropBase & {\n\t\t\t/\n\t\t\t By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t /\n\t\t\tbubblesVirtually: true;\n\n\t\t\t/\n\t\t\t A function that returns nodes to be rendered.\n\t\t\t * ~~Not~~ ~~supported~~ when `bubblesVirtually` is ~~true.\~~n\t\t\t /\n\t\t\tchildren?: never;\n\n\t\t\t/\n\t\t\t className.\n\t\t\t * ~~Not~~ ~~supported~~ when `bubblesVirtually` is true.\n\t\t\t /\n\t\t\tclassName?: string;\n\t } )\n\t\| ( SlotPropBase & {\n\t\t\t/\n\t\t\t By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t /\n\t\t\tbubblesVirtually?: false;\n\n\t\t\t/\n\t\t\t A function that returns nodes to be rendered.\n\t\t\t * ~~Not~~ ~~supported~~ when `bubblesVirtually` is ~~true.\~~n\t\t\t /\n\t\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\n\t\t\t/\n\t\t\t className.\n\t\t\t * ~~Not~~ ~~supported~~ when `bubblesVirtually` is ~~false.\~~n\t\t\t /\n\t\t\tclassName?: never;\n\t } );\n\nexport type FillComponentProps = {\n\t/\n\t The name of the slot to fill into.\n\t /\n\tname: SlotKey;\n\n\t/\n\t Children elements or render function.\n\t /\n\tchildren?: ReactNode \| ( ( fillProps: FillProps ) => ReactNode );\n};\n\nexport type SlotFillProviderProps = {\n\t/\n\t The children elements.\n\t /\n\tchildren: ReactNode;\n};\n\nexport type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;\nexport type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {\n\trerender: () => void;\n} >;\n\nexport type SlotFillBubblesVirtuallyContext = {\n\tslots: Map<\n\t\tSlotKey,\n\t\t{\n\t\t\tref: SlotFillBubblesVirtuallySlotRef;\n\t\t\tfillProps: FillProps;\n\t\t}\n\t>;\n\tfills: Map< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef,\n\t\tfillProps: FillProps\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef\n\t) => void;\n\tupdateSlot: ( name: SlotKey, fillProps: FillProps ) => void;\n\tregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\tunregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\n\t/\n\t This helps the provider know if it's using the default context value or not.\n\t */\n\tisDefault?: boolean;\n};\n\nexport type BaseSlotFillContext = {\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tunregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tgetSlot: (\n\t\tname: SlotKey\n\t) => Component< BaseSlotComponentProps > \| undefined;\n\tgetFills: (\n\t\tname: SlotKey,\n\t\tslotInstance: Component< BaseSlotComponentProps >\n\t) => FillComponentProps[];\n\tsubscribe: ( listener: () => void ) => () => void;\n};\n\nexport type BaseSlotComponentProps = Pick<\n\tBaseSlotFillContext,\n\t'registerSlot' \| 'unregisterSlot' \| 'getFills'\n> &\n\tOmit< SlotComponentProps, 'bubblesVirtually' > & {\n\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\t};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/slot-fill/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Component, MutableRefObject, ReactNode, RefObject } from 'react';\n\nexport type DistributiveOmit< T, K extends keyof any > = T extends any\n\t? Omit< T, K >\n\t: never;\n\nexport type SlotKey = string \| symbol;\n\nexport type FillProps = Record< string, any >;\n\ntype SlotPropBase = {\n\t/\n\t Slot name.\n\t /\n\tname: SlotKey;\n\n\t/\n\t props to pass from `Slot` to `Fill`.\n\t \n\t @default {}\n\t /\n\tfillProps?: FillProps;\n};\n\nexport type SlotComponentProps =\n\t\| ( SlotPropBase & {\n\t\t\t/\n\t\t\t By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t /\n\t\t\tbubblesVirtually: true;\n\n\t\t\t/\n\t\t\t A function that returns nodes to be rendered.\n\t\t\t * Supported only when `bubblesVirtually` is `false`.\n\t\t\t /\n\t\t\tchildren?: never;\n\n\t\t\t/\n\t\t\t Additional className for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t /\n\t\t\tclassName?: string;\n\n\t\t\t/\n\t\t\t Additional styles for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t /\n\t\t\tstyle?: React.CSSProperties;\n\t } )\n\t\| ( SlotPropBase & {\n\t\t\t/\n\t\t\t By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).\n\t\t\t * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,\n\t\t\t * also accept an optional `className`, `id`, etc. to add to the slot container.\n\t\t\t /\n\t\t\tbubblesVirtually?: false;\n\n\t\t\t/\n\t\t\t A function that returns nodes to be rendered.\n\t\t\t * Supported only when `bubblesVirtually` is `false`.\n\t\t\t /\n\t\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\n\t\t\t/\n\t\t\t Additional className for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t /\n\t\t\tclassName?: never;\n\n\t\t\t/\n\t\t\t Additional styles for the `Slot` component.\n\t\t\t * Supported only when `bubblesVirtually` is `true`.\n\t\t\t /\n\t\t\tstyle?: never;\n\t } );\n\nexport type FillComponentProps = {\n\t/\n\t The name of the slot to fill into.\n\t /\n\tname: SlotKey;\n\n\t/\n\t Children elements or render function.\n\t /\n\tchildren?: ReactNode \| ( ( fillProps: FillProps ) => ReactNode );\n};\n\nexport type SlotFillProviderProps = {\n\t/\n\t The children elements.\n\t /\n\tchildren: ReactNode;\n};\n\nexport type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;\nexport type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {\n\trerender: () => void;\n} >;\n\nexport type SlotFillBubblesVirtuallyContext = {\n\tslots: Map<\n\t\tSlotKey,\n\t\t{\n\t\t\tref: SlotFillBubblesVirtuallySlotRef;\n\t\t\tfillProps: FillProps;\n\t\t}\n\t>;\n\tfills: Map< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef,\n\t\tfillProps: FillProps\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallySlotRef\n\t) => void;\n\tupdateSlot: ( name: SlotKey, fillProps: FillProps ) => void;\n\tregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\tunregisterFill: (\n\t\tname: SlotKey,\n\t\tref: SlotFillBubblesVirtuallyFillRef\n\t) => void;\n\n\t/\n\t This helps the provider know if it's using the default context value or not.\n\t */\n\tisDefault?: boolean;\n};\n\nexport type BaseSlotFillContext = {\n\tregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tunregisterSlot: (\n\t\tname: SlotKey,\n\t\tslot: Component< BaseSlotComponentProps >\n\t) => void;\n\tregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tunregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;\n\tgetSlot: (\n\t\tname: SlotKey\n\t) => Component< BaseSlotComponentProps > \| undefined;\n\tgetFills: (\n\t\tname: SlotKey,\n\t\tslotInstance: Component< BaseSlotComponentProps >\n\t) => FillComponentProps[];\n\tsubscribe: ( listener: () => void ) => () => void;\n};\n\nexport type BaseSlotComponentProps = Pick<\n\tBaseSlotFillContext,\n\t'registerSlot' \| 'unregisterSlot' \| 'getFills'\n> &\n\tOmit< SlotComponentProps, 'bubblesVirtually' > & {\n\t\tchildren?: ( fills: ReactNode ) => ReactNode;\n\t};\n"],"mappings":""}

package/build-module/tabs/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -44,7 +44,8 @@ function Tabs({
     selectedId
   } = store.useState();
   const {
-    setSelectedId
+    setSelectedId,
+    move
   } = store;
   // Keep track of whether tabs have been populated. This is used to prevent
@@ -128,15 +129,33 @@ function Tabs({
       setSelectedId(null);
     }
   }, [isControlled, selectedId, selectedTab, selectedTabId, setSelectedId]);
-  return createElement(TabsContext.Provider, {
-    value: {
-      store,
-      instanceId
+  // In controlled mode, make sure browser focus follows the selected tab if
+  // the selection is changed while a tab is already being focused.
+  useLayoutEffect(() => {
+    if (!isControlled || !selectOnMove) {
+      return;
+    }
+    const currentItem = items.find(item => item.id === selectedId);
+    const activeElement = currentItem?.element?.ownerDocument.activeElement;
+    const tabsHasFocus = items.some(item => {
+      return activeElement && activeElement === item.element;
+    });
+    if (activeElement && tabsHasFocus && selectedId !== activeElement.id) {
+      move(selectedId);
     }
+  }, [isControlled, items, move, selectOnMove, selectedId]);
+  const contextValue = useMemo(() => ({
+    store,
+    instanceId
+  }), [store, instanceId]);
+  return createElement(TabsContext.Provider, {
+    value: contextValue
   }, children);
 }
 Tabs.TabList = TabList;
 Tabs.Tab = Tab;
 Tabs.TabPanel = TabPanel;
+Tabs.Context = TabsContext;
 export default Tabs;
 //# sourceMappingURL=index.js.map

package/build-module/tabs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","createElement","Provider","value"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\~~treturn~~ (\n\t\t~~<TabsContext~~.~~Provider~~ ~~value~~={ { store, instanceId } }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nexport default Tabs;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,eAAe,EAAEC,MAAM,QAAQ,oBAAoB;;~~AAE5D~~;AACA;AACA;;AAEA,SAASC,WAAW,QAAQ,WAAW;AACvC,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,IAAIA,CAAE;EACdC,YAAY,GAAG,IAAI;EACnBC,YAAY;EACZC,WAAW,GAAG,YAAY;EAC1BC,QAAQ;EACRC,QAAQ;EACRC;AACU,CAAC,EAAG;EACd,MAAMC,UAAU,~~GAAGd~~,aAAa,~~CAAEO~~,IAAI,EAAE,MAAO,CAAC;EAChD,MAAMQ,KAAK,~~GAAGhB~~,OAAO,~~CAACiB~~,WAAW,CAAE;IAClCR,YAAY;IACZE,WAAW;IACXO,iBAAiB,EAAER,YAAY,IAAK,GAAGK,UAAY,IAAIL,YAAc,EAAC;IACtES,aAAa,EAAIC,UAAU,IAAM;MAChC,MAAMC,cAAc,GACnB,OAAOD,UAAU,KAAK,QAAQ,GAC3BA,UAAU,CAACE,OAAO,CAAG,GAAGP,UAAY,GAAE,EAAE,EAAG,CAAC,GAC5CK,UAAU;MACdR,QAAQ,GAAIS,cAAe,CAAC;IAC7B,CAAC;IACDD,UAAU,EAAEN,aAAa,IAAK,GAAGC,UAAY,IAAID,aAAe;EACjE,CAAE,CAAC;EAEH,MAAMS,YAAY,GAAGT,aAAa,KAAKU,SAAS;EAEhD,MAAM;IAAEC,KAAK;IAAEL;EAAW,CAAC,GAAGJ,KAAK,CAACU,QAAQ,CAAC,CAAC;EAC9C,MAAM;IAAEP;~~EAAc~~,CAAC,~~GAAGH~~,KAAK;;~~EAE/B~~;EACA;EACA;EACA,~~MAAMW~~,iBAAiB,~~GAAGxB~~,MAAM,CAAE,KAAM,CAAC;EACzC,IAAKsB,KAAK,~~CAACG~~,MAAM,GAAG,CAAC,EAAG;IACvBD,iBAAiB,CAACE,OAAO,GAAG,IAAI;EACjC;EAEA,MAAMC,WAAW,~~GAAGL~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,~~KAAKb~~,UAAW,CAAC;EACpE,~~MAAMc~~,eAAe,~~GAAGT~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAM;IAC/C;IACA,OAAO,CAAEA,IAAI,CAACG,MAAM;EACrB,CAAE,CAAC;EACH,MAAMC,UAAU,~~GAAGX~~,KAAK,~~CAACM~~,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACC,EAAE,KAAM,~~GAAGlB~~,UAAY,IAAIL,YAAc,EAC3D,CAAC;;EAED;~~EACAR~~,eAAe,CAAE,MAAM;IACtB,~~IAAKqB~~,YAAY,EAAG;MACnB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKb,YAAY,IAAI,~~CAAE0B~~,UAAU,EAAG;MACnC;IACD;;IAEA;IACA;IACA;IACA,IAAK,~~CAAEX~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,~~KAAKb~~,UAAW,CAAC,EAAG;MACzD,~~IAAKgB~~,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;~~QACxChB~~,aAAa,~~CAAEiB~~,UAAU,EAAEH,EAAG,CAAC;QAC/B;MACD;MAEA,IAAKC,eAAe,EAAG;~~QACtBf~~,aAAa,~~CAAEe~~,eAAe,CAACD,EAAG,CAAC;MACpC,CAAC,MAAM,IAAKN,iBAAiB,CAACE,OAAO,EAAG;~~QACvCV~~,aAAa,CAAE,IAAK,CAAC;MACtB;IACD;EACD,CAAC,EAAE,~~CACFe~~,eAAe,EACfE,UAAU,~~EACV1B~~,YAAY,EACZa,YAAY,EACZE,KAAK,EACLL,UAAU,EACVD,aAAa,CACZ,CAAC;;EAEH;~~EACAjB~~,eAAe,CAAE,MAAM;IACtB,IAAK,~~CAAE4B~~,WAAW,EAAEK,MAAM,EAAG;MAC5B;IACD;;IAEA;IACA;IACA,~~IAAKZ~~,YAAY,EAAG;MACnBJ,aAAa,CAAE,IAAK,CAAC;MACrB;IACD;;IAEA;IACA;IACA;IACA,~~IAAKiB~~,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;~~MACxChB~~,aAAa,~~CAAEiB~~,UAAU,CAACH,EAAG,CAAC;MAC9B;IACD;IAEA,IAAKC,eAAe,EAAG;~~MACtBf~~,aAAa,~~CAAEe~~,eAAe,CAACD,EAAG,CAAC;IACpC;EACD,CAAC,EAAE,CACFC,eAAe,EACfE,UAAU,~~EACVb~~,YAAY,~~EACZO~~,WAAW,EAAEK,MAAM,~~EACnBhB~~,aAAa,CACZ,CAAC;;EAEH;~~EACAjB~~,eAAe,CAAE,MAAM;IACtB,IAAK,~~CAAEqB~~,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA,~~IAAKI~~,iBAAiB,CAACE,OAAO,IAAI,CAAC,~~CAAEf~~,aAAa,IAAI,~~CAAEgB~~,WAAW,EAAG;~~MACrEX~~,aAAa,CAAE,IAAK,CAAC;IACtB;EACD,CAAC,EAAE,CACFI,YAAY,EACZH,UAAU,~~EACVU~~,WAAW,~~EACXhB~~,aAAa,EACbK,aAAa,CACZ,CAAC;~~EAEH~~,~~OACCkB~~,~~aAAA~~,~~CAACjC~~,WAAW,~~CAACkC~~,~~QAAQ~~;~~IAACC~~,KAAK,~~EAAG~~;~~MAAEvB~~,KAAK;~~MAAED~~;~~IAAW~~;~~EAAG~~,~~GAClDF~~,QACmB,CAAC;AAEzB;AAEAL,IAAI,CAACF,OAAO,GAAGA,OAAO;AACtBE,IAAI,CAACH,GAAG,GAAGA,GAAG;AACdG,IAAI,CAACD,QAAQ,GAAGA,QAAQ;~~AACxB~~,~~eAAeC~~,IAAI"}
1	+ {"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","move","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","currentItem","activeElement","element","ownerDocument","tabsHasFocus","some","contextValue","createElement","Provider","value","Context"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId, move } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\t// In controlled mode, make sure browser focus follows the selected tab if\n\t// the selection is changed while a tab is already being focused.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled \|\| ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentItem = items.find( ( item ) => item.id === selectedId );\n\t\tconst activeElement = currentItem?.element?.ownerDocument.activeElement;\n\t\tconst tabsHasFocus = items.some( ( item ) => {\n\t\t\treturn activeElement && activeElement === item.element;\n\t\t} );\n\n\t\tif (\n\t\t\tactiveElement &&\n\t\t\ttabsHasFocus &&\n\t\t\tselectedId !== activeElement.id\n\t\t) {\n\t\t\tmove( selectedId );\n\t\t}\n\t}, [ isControlled, items, move, selectOnMove, selectedId ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tstore,\n\t\t\tinstanceId,\n\t\t} ),\n\t\t[ store, instanceId ]\n\t);\n\n\treturn (\n\t\t<TabsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nTabs.Context = TabsContext;\n\nexport default Tabs;\n"],"mappings":"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"}

package/build-module/tabs/tab.js CHANGED Viewed

@@ -3,32 +3,32 @@ import { createElement } from "react";
  * WordPress dependencies
  */
-import { useContext, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import warning from '@wordpress/warning';
-import { TabsContext } from './context';
+import { useTabsContext } from './context';
 import { Tab as StyledTab } from './styles';
 export const Tab = forwardRef(function Tab({
   children,
-  id,
+  tabId,
   disabled,
   render,
   ...otherProps
 }, ref) {
-  const context = useContext(TabsContext);
+  const context = useTabsContext();
   if (!context) {
-    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.TabList` must be wrapped in a `Tabs` component.') : void 0;
+    typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.Tab` must be wrapped in a `Tabs` component.') : void 0;
     return null;
   }
   const {
     store,
     instanceId
   } = context;
-  const instancedTabId = `${instanceId}-${id}`;
+  const instancedTabId = `${instanceId}-${tabId}`;
   return createElement(StyledTab, {
     ref: ref,
     store: store,

package/build-module/tabs/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~useContext","~~forwardRef","warning","~~TabsContext~~","Tab","StyledTab","children","id","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\n\nimport { ~~useContext,~~ forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { ~~TabsContext~~ } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\~~tWordPressComponentProps~~< TabProps, 'button', false >\n>( function Tab( { children, id, disabled, render, ...otherProps }, ref ) {\n\tconst context = ~~useContext~~( ~~TabsContext~~ );\n\tif ( ! context ) {\n\t\twarning( '`Tabs.~~TabList~~` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ id }`;\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{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,~~EAAEC,UAAU,~~QAAQ,oBAAoB;;~~AAE3D~~;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,~~WAAW~~,QAAQ,WAAW;~~AACvC~~,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,~~EAAE~~;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;~~EACzE~~,MAAMC,OAAO,~~GAAGZ~~,~~UAAU~~,~~CAAEG~~,~~WAAY,~~CAAC;~~EACzC~~,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,~~uDAAwD~~,CAAC;~~IAClE~~,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,~~EAAI~~,EAAC;~~EAChD~~,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;~~IACfP~~,EAAE,~~EAAGS~~,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}
1	+ {"version":3,"names":["forwardRef","warning","useTabsContext","Tab","StyledTab","children","tabId","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement","id"],"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 { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\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 context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\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{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC5E,MAAMC,OAAO,GAAGT,cAAc,CAAC,CAAC;EAChC,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,KAAO,EAAC;EACnD,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfI,EAAE,EAAGF,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}

package/build-module/tabs/tabpanel.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -15,14 +15,14 @@ import { forwardRef, useContext } from '@wordpress/element';
 import { TabPanel as StyledTabPanel } from './styles';
 import warning from '@wordpress/warning';
-import { TabsContext } from './context';
+import { useTabsContext } from './context';
 export const TabPanel = forwardRef(function TabPanel({
   children,
-  id,
+  tabId,
   focusable = true,
   ...otherProps
 }, ref) {
-  const context = useContext(TabsContext);
+  const context = useTabsContext();
   if (!context) {
     typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : void 0;
     return null;
@@ -31,10 +31,11 @@ export const TabPanel = forwardRef(function TabPanel({
     store,
     instanceId
   } = context;
+  const instancedTabId = `${instanceId}-${tabId}`;
   return createElement(StyledTabPanel, {
     ref: ref,
     store: store,
-    id: `${instanceId}-${id}-view`,
+    id: instancedTabId,
     focusable: focusable,
     ...otherProps
   }, children);

package/build-module/tabs/tabpanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["forwardRef","~~useContext","~~TabPanel","StyledTabPanel","warning","~~TabsContext~~","children","id","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","createElement"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/*\n External dependencies\n /\n\n/\n WordPress dependencies\n /\n\nimport { forwardRef, ~~useContext~~ } 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 { ~~TabsContext~~ } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\~~tWordPressComponentProps~~< TabPanelProps, 'div', false >\n>( function TabPanel( { children, id, focusable = true, ...otherProps }~~, ref~~ ) {\n\tconst context = ~~useContext~~( ~~TabsContext~~ );\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\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ ~~`${~~ ~~instanceId~~ }~~-${ id }-view` }~~\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,~~EAAEC,UAAU,~~QAAQ,oBAAoB;;~~AAE3D~~;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,~~WAAW~~,QAAQ,WAAW;~~AAGvC~~,OAAO,MAAMH,QAAQ,~~GAAGF~~,UAAU,CAG/B,~~SAASE~~,QAAQA,~~CAAE~~;EAAEI,QAAQ;EAAEC,~~EAAE~~;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,~~EAAEC~~,GAAG,~~EAAG~~;~~EAC9E~~,MAAMC,OAAO,~~GAAGV~~,~~UAAU~~,~~CAAEI~~,~~WAAY,~~CAAC;~~EACzC~~,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;~~EAErC~~,~~OACCI~~,aAAA,~~CAACZ~~,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;~~IACfN~~,EAAE,~~EAAI~~,~~GAAGO,UAAY,IAAIP,EAAI,OAAQ~~;~~IACrCC~~,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}
1	+ {"version":3,"names":["forwardRef","TabPanel","StyledTabPanel","warning","useTabsContext","children","tabId","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement","id"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/*\n External dependencies\n /\n\n/\n WordPress dependencies\n /\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\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\tid={ instancedTabId }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAG1C,OAAO,MAAMH,QAAQ,GAAGD,UAAU,CAG/B,SAASC,QAAQA,CACnB;EAAEI,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAGN,cAAc,CAAC,CAAC;EAChC,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIP,KAAO,EAAC;EAEnD,OACCS,aAAA,CAACb,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfI,EAAE,EAAGF,cAAgB;IACrBP,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}

package/build-module/tabs/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\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 be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t \n\t @default true\n\t \n\t @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t /\n\tselectOnMove?: boolean;\n\t/\n\t The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t \n\t Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t /\n\tinitialTabId?: string;\n\t/\n\t The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t /\n\tonSelect?: ( selectedId: string \| null \| undefined ) => void;\n\n\t/\n\t The orientation of the tablist.\n\t \n\t @default `horizontal`\n\t /\n\torientation?: 'horizontal' \| 'vertical';\n\t/\n\t The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t \n\t If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t /\n\tselectedTabId?: string \| null;\n};\n\nexport type TabListProps = {\n\t/\n\t The children elements, which should be a series of `Tabs.TabPanel` components.\n\t /\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/\n\t The id of the tab, which is prepended with the `Tabs` instanceId.\n\t /\n\~~tid~~: string;\n\t/\n\t The children elements, generally the text to display on the tab.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t Determines if the tab button should be disabled.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t /\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/\n\t The children elements, generally the content to display on the tabpanel.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t A unique identifier for the tabpanel, which is used to generate a ~~unique~~ `id` for the underlying element.\n\t /\n\~~tid~~: string;\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?: boolean;\n};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\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 be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t \n\t @default true\n\t \n\t @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t /\n\tselectOnMove?: boolean;\n\t/\n\t The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t \n\t Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t /\n\tinitialTabId?: string;\n\t/\n\t The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t /\n\tonSelect?: ( selectedId: string \| null \| undefined ) => void;\n\n\t/\n\t The orientation of the tablist.\n\t \n\t @default `horizontal`\n\t /\n\torientation?: 'horizontal' \| 'vertical';\n\t/\n\t The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t \n\t If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t /\n\tselectedTabId?: string \| null;\n};\n\nexport type TabListProps = {\n\t/\n\t The children elements, which should be a series of `Tabs.TabPanel` components.\n\t /\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/\n\t The id of the tab, which is prepended with the `Tabs` instanceId.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.TabPanel` component.\n\t /\n\ttabId: string;\n\t/\n\t The children elements, generally the text to display on the tab.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t Determines if the tab button should be disabled.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t /\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/\n\t The children elements, generally the content to display on the tabpanel.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t A unique identifier for the tabpanel, which is used to generate an\n\t * instanced id for the underlying element.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.Tab` component.\n\t /\n\ttabId: string;\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?: boolean;\n};\n"],"mappings":""}

package/build-module/text/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/text/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { TruncateProps } from '../truncate/types';\n\n/\n External dependencies\n /\nimport type { CSSProperties } from 'react';\nimport type { FindAllArgs } from 'highlight-words-core';\n\nexport type TextSize =\n\t\| 'body'\n\t\| 'caption'\n\t\| 'footnote'\n\t\| 'largeTitle'\n\t\| 'subheadline'\n\t\| 'title';\n\ntype TextVariant = 'muted';\n\ntype TextWeight = 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900;\n\nexport interface Props extends TruncateProps {\n\t/\n\t Adjusts the text alignment.\n\t /\n\talign?: CSSProperties[ 'textAlign' ];\n\t/\n\t Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).\n\t /\n\tadjustLineHeightForInnerControls?: 'large' \| 'medium' \| 'small' \| 'xSmall';\n\t/\n\t Adjusts the text color.\n\t /\n\tcolor?: CSSProperties[ 'color' ];\n\t/\n\t Adjusts the CSS display.\n\t /\n\tdisplay?: CSSProperties[ 'display' ];\n\t/\n\t Renders a destructive color.\n\t \n\t @default false\n\t /\n\tisDestructive?: boolean;\n\t/\n\t Escape characters in `highlightWords` which are meaningful in regular expressions.\n\t /\n\thighlightEscape?: boolean;\n\t/\n\t Determines if `highlightWords` should be case sensitive.\n\t /\n\thighlightCaseSensitive?: boolean;\n\t/\n\t Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.\n\t /\n\thighlightSanitize?: FindAllArgs[ 'sanitize' ];\n\t/\n\t Sets `Text` to have `display: block`.\n\t /\n\tisBlock?: boolean;\n\t/\n\t Adjusts all text line-height based on the typography system.\n\t /\n\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t/\n\t The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).\n\t /\n\toptimizeReadabilityFor?: CSSProperties[ 'color' ];\n\t/\n\t Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.\n\t /\n\tsize?: CSSProperties[ 'fontSize' ] \| TextSize;\n\t/\n\t Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.\n\t /\n\ttruncate?: boolean;\n\t/\n\t Uppercases the text content.\n\t /\n\tupperCase?: boolean;\n\t/\n\t Adjusts style variation of the text.\n\t /\n\tvariant?: TextVariant;\n\t/\n\t Adjusts font-weight of the text.\n\t /\n\tweight?: CSSProperties[ 'fontWeight' ] \| TextWeight;\n\t/\n\t Adjusts letter-spacing of the text.\n\t /\n\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t/\n\t Letters or words within `Text` can be highlighted using `highlightWords`.\n\t */\n\thighlightWords?: string[];\n}\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/text/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { TruncateProps } from '../truncate/types';\n\n/\n External dependencies\n /\nimport type { CSSProperties } from 'react';\nimport type { FindAllArgs } from 'highlight-words-core';\n\nexport type TextSize =\n\t\| 'body'\n\t\| 'caption'\n\t\| 'footnote'\n\t\| 'largeTitle'\n\t\| 'subheadline'\n\t\| 'title';\n\ntype TextVariant = 'muted';\n\ntype TextWeight = 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900;\n\nexport interface Props extends TruncateProps {\n\t/\n\t Adjusts the text alignment.\n\t /\n\talign?: CSSProperties[ 'textAlign' ];\n\t/\n\t Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).\n\t /\n\tadjustLineHeightForInnerControls?: 'large' \| 'medium' \| 'small' \| 'xSmall';\n\t/\n\t Adjusts the text color.\n\t /\n\tcolor?: CSSProperties[ 'color' ];\n\t/\n\t Adjusts the CSS display.\n\t /\n\tdisplay?: CSSProperties[ 'display' ];\n\t/\n\t Renders a destructive color.\n\t \n\t @default false\n\t /\n\tisDestructive?: boolean;\n\t/\n\t Escape characters in `highlightWords` which are meaningful in regular expressions.\n\t \n\t @default false\n\t /\n\thighlightEscape?: boolean;\n\t/\n\t Determines if `highlightWords` should be case sensitive.\n\t \n\t @default false\n\t /\n\thighlightCaseSensitive?: boolean;\n\t/\n\t Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.\n\t /\n\thighlightSanitize?: FindAllArgs[ 'sanitize' ];\n\t/\n\t Sets `Text` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t \n\t @default false\n\t /\n\tisBlock?: boolean;\n\t/\n\t Adjusts all text line-height based on the typography system.\n\t /\n\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t/\n\t The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).\n\t /\n\toptimizeReadabilityFor?: CSSProperties[ 'color' ];\n\t/\n\t Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.\n\t /\n\tsize?: CSSProperties[ 'fontSize' ] \| TextSize;\n\t/\n\t Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways. Note: text truncation won't work if the `isBlock` property is set to `true`\n\t \n\t @default false\n\t /\n\ttruncate?: boolean;\n\t/\n\t Uppercases the text content.\n\t \n\t @default false\n\t /\n\tupperCase?: boolean;\n\t/\n\t Adjusts style variation of the text.\n\t /\n\tvariant?: TextVariant;\n\t/\n\t Adjusts font-weight of the text.\n\t \n\t @default 'normal'\n\t /\n\tweight?: CSSProperties[ 'fontWeight' ] \| TextWeight;\n\t/\n\t Adjusts letter-spacing of the text.\n\t /\n\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t/\n\t Letters or words within `Text` can be highlighted using `highlightWords`.\n\t */\n\thighlightWords?: string[];\n}\n"],"mappings":""}

package/build-module/toggle-group-control/toggle-group-control/utils.js CHANGED Viewed

@@ -16,27 +16,27 @@ import { useEffect, useRef } from '@wordpress/element';
  * @param valueProp The received `value`
  */
 export function useComputeControlledOrUncontrolledValue(valueProp) {
-  const hasEverBeenUsedInControlledMode = useRef(false);
-  const previousValueProp = usePrevious(valueProp);
+  const prevValueProp = usePrevious(valueProp);
+  const prevIsControlled = useRef(false);
+  // Assume the component is being used in controlled mode on the first re-render
+  // that has a different `valueProp` from the previous render.
+  const isControlled = prevIsControlled.current || prevValueProp !== undefined && valueProp !== undefined && prevValueProp !== valueProp;
   useEffect(() => {
-    if (!hasEverBeenUsedInControlledMode.current) {
-      // Assume the component is being used in controlled mode if:
-      // - the `value` prop is not `undefined`
-      // - the `value` prop was not previously `undefined` and was given a new value
-      hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp;
-    }
-  }, [valueProp, previousValueProp]);
-  let value, defaultValue;
-  if (hasEverBeenUsedInControlledMode.current) {
+    prevIsControlled.current = isControlled;
+  }, [isControlled]);
+  if (isControlled) {
     // When in controlled mode, use `''` instead of `undefined`
-    value = valueProp !== null && valueProp !== void 0 ? valueProp : '';
-  } else {
-    // When in uncontrolled mode, the `value` should be intended as the initial value
-    defaultValue = valueProp;
+    return {
+      value: valueProp !== null && valueProp !== void 0 ? valueProp : '',
+      defaultValue: undefined
+    };
   }
+  // When in uncontrolled mode, the `value` should be intended as the initial value
   return {
-    value,
-    defaultValue
+    value: undefined,
+    defaultValue: valueProp
   };
 }
 //# sourceMappingURL=utils.js.map

package/build-module/toggle-group-control/toggle-group-control/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["usePrevious","useEffect","useRef","useComputeControlledOrUncontrolledValue","valueProp","~~hasEverBeenUsedInControlledMode~~","~~previousValueProp~~","current","undefined","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/\n Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n \n @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst ~~hasEverBeenUsedInControlledMode~~ = ~~useRef~~( ~~false~~ );\n\tconst ~~previousValueProp~~ = ~~usePrevious~~( ~~valueProp~~ );\n\n\~~tuseEffect( () => {\n\~~t~~\tif ( ! hasEverBeenUsedInControlledMode.current ) {\n\t\t\t~~// Assume the component is being used in controlled mode ~~if:\n\t\t\t//~~ - the ~~`value`~~ ~~prop is not `undefined`\~~n\t~~\t\t~~// - ~~the~~ ~~`value`~~ ~~prop~~ ~~was not previously~~ `~~undefined~~` ~~and~~ ~~was~~ ~~given~~ a ~~new~~ ~~value\~~n\t\~~t\thasEverBeenUsedInControlledMode~~.current =\n\t\t~~\t\tvalueProp~~ !== undefined &&\n\t\t\~~t\tpreviousValueProp~~ !== undefined &&\n\t\t\~~t\tvalueProp~~ !== ~~previousValueProp~~;\n\t\t}\n\t}, [ ~~valueProp,~~ ~~previousValueProp~~ ] );\n\n\~~tlet value, defaultValue;\n\n\~~tif ( ~~hasEverBeenUsedInControlledMode.current~~ ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\~~tvalue~~ = valueProp ?? '';\n\t} ~~else {~~\n\t\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\~~t\tdefaultValue = valueProp;\n\t}\n\n\~~treturn { value, defaultValue };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,oBAAoB;AAChD,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC~~,+BAA+B~~,~~GAAGH~~,~~MAAM~~,~~CAAE~~,~~KAAM~~,CAAC;~~EACvD~~,~~MAAMI~~,~~iBAAiB~~,~~GAAGN~~,~~WAAW~~,~~CAAEI~~,~~SAAU~~,CAAC;~~EAElDH~~,~~SAAS~~,~~CAAE~~,~~MAAM;IAChB~~,~~IAAK~~,~~CAAEI,+BAA+B,~~CAACE,OAAO,~~EAAG;MAChD;MACA;MACA;MACAF,+BAA+B~~,~~CAACE~~,~~OAAO~~,~~GACtCH~~,SAAS,~~KAAKI~~,SAAS,~~IACvBF~~,~~iBAAiB~~,~~KAAKE~~,~~SAAS,IAC~~/BJ,SAAS,~~KAAKE~~,~~iBAAiB~~;~~IACjC~~;~~EACD~~,CAAC,EAAE,~~CAAEF~~,~~SAAS~~,~~EAAEE,iBAAiB,~~CAAG,CAAC;~~EAErC~~,~~IAAIG~~,~~KAAK,EAAEC,~~YAAY~~;EAEvB~~,~~IAAKL,+BAA+B,CAACE,OAAO,~~EAAG;~~IAC9C~~;~~IACAE~~,KAAK,~~GAAGL~~,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;~~EACxB~~,~~CAAC~~,~~MAAM~~;~~IACN;IACAM~~,~~YAAY,GAAGN,SAAS~~;~~EACzB~~;~~EAEA~~,OAAO;~~IAAEK~~,KAAK;~~IAAEC~~;~~EAAa~~,CAAC;~~AAC/B~~"}
1	+ {"version":3,"names":["usePrevious","useEffect","useRef","useComputeControlledOrUncontrolledValue","valueProp","prevValueProp","prevIsControlled","isControlled","current","undefined","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/\n Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n \n @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst prevValueProp = usePrevious( valueProp );\n\tconst prevIsControlled = useRef( false );\n\n\t// Assume the component is being used in controlled mode on the first re-render\n\t// that has a different `valueProp` from the previous render.\n\tconst isControlled =\n\t\tprevIsControlled.current \|\|\n\t\t( prevValueProp !== undefined &&\n\t\t\tvalueProp !== undefined &&\n\t\t\tprevValueProp !== valueProp );\n\tuseEffect( () => {\n\t\tprevIsControlled.current = isControlled;\n\t}, [ isControlled ] );\n\n\tif ( isControlled ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\treturn { value: valueProp ?? '', defaultValue: undefined };\n\t}\n\n\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\treturn { value: undefined, defaultValue: valueProp };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,oBAAoB;AAChD,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,aAAa,GAAGL,WAAW,CAAEI,SAAU,CAAC;EAC9C,MAAME,gBAAgB,GAAGJ,MAAM,CAAE,KAAM,CAAC;;EAExC;EACA;EACA,MAAMK,YAAY,GACjBD,gBAAgB,CAACE,OAAO,IACtBH,aAAa,KAAKI,SAAS,IAC5BL,SAAS,KAAKK,SAAS,IACvBJ,aAAa,KAAKD,SAAW;EAC/BH,SAAS,CAAE,MAAM;IAChBK,gBAAgB,CAACE,OAAO,GAAGD,YAAY;EACxC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,IAAKA,YAAY,EAAG;IACnB;IACA,OAAO;MAAEG,KAAK,EAAEN,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;MAAEO,YAAY,EAAEF;IAAU,CAAC;EAC3D;;EAEA;EACA,OAAO;IAAEC,KAAK,EAAED,SAAS;IAAEE,YAAY,EAAEP;EAAU,CAAC;AACrD"}

package/build-module/tools-panel/tools-panel-item/hook.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useLayoutEffect, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -39,14 +39,25 @@ export function useToolsPanelItem(props) {
     __experimentalFirstVisibleItemClass,
     __experimentalLastVisibleItemClass
   } = useToolsPanelContext();
-  const hasValueCallback = useCallback(hasValue, [panelId, hasValue]);
-  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId, resetAllFilter]);
+  // hasValue is a new function on every render, so do not add it as a
+  // dependency to the useCallback hook! If needed, we should use a ref.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const hasValueCallback = useCallback(hasValue, [panelId]);
+  // resetAllFilter is a new function on every render, so do not add it as a
+  // dependency to the useCallback hook! If needed, we should use a ref.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);
   const previousPanelId = usePrevious(currentPanelId);
   const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
   // Registering the panel item allows the panel to include it in its
   // automatically generated menu and determine its initial checked status.
-  useEffect(() => {
+  //
+  // This is performed in a layout effect to ensure that the panel item
+  // is registered before it is rendered preventing a rendering glitch.
+  // See: https://github.com/WordPress/gutenberg/issues/56470
+  useLayoutEffect(() => {
     if (hasMatchingPanel && previousPanelId !== null) {
       registerPanelItem({
         hasValue: hasValueCallback,
@@ -83,19 +94,12 @@ export function useToolsPanelItem(props) {
   const newValueSet = isValueSet && !wasValueSet;
   // Notify the panel when an item's value has been set.
-  //
-  // 1. For default controls, this is so "reset" appears beside its menu item.
-  // 2. For optional controls, when the panel ID is `null`, it allows the
-  // panel to ensure the item is toggled on for display in the menu, given the
-  // value has been set external to the control.
   useEffect(() => {
     if (!newValueSet) {
       return;
     }
-    if (isShownByDefault || currentPanelId === null) {
-      flagItemCustomization(label, menuGroup);
-    }
-  }, [currentPanelId, newValueSet, isShownByDefault, menuGroup, label, flagItemCustomization]);
+    flagItemCustomization(label, menuGroup);
+  }, [newValueSet, menuGroup, label, flagItemCustomization]);
   // Determine if the panel item's corresponding menu is being toggled and
   // trigger appropriate callback if it is.