npm - @wordpress/components - Versions diffs - 28.4.0 → 28.5.0 - Mend

@wordpress/components 28.4.0 → 28.5.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 (250) hide show

package/build-module/dropdown-menu-v2/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","css","keyframes","COLORS","font","rtl","CONFIG","space","Icon","Truncate","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","_styled","Menu","process","env","NODE_ENV","target","label","ui","background","props","variant","baseItem","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","DropdownMenuItemLabel","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/*\n Internal dependencies\n /\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - those values are different from saved variables?\n// - should bring this into the config, and make themeable\n// - border color and divider color are different?\nconst DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.gray[ 200 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nexport const DropdownMenu = styled( Ariakit.Menu )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\t/ Same as popover component /\n\t/ TODO: is there a way to read the sass variable? /\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: 4px;\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/ Only visible in Windows High Contrast mode /\n\toutline: 2px solid transparent !important;\n\n\t/ Animation /\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\t/ Default animation./\n\tanimation-name: ${ slideDownAndFade };\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\t&[data-side='up'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/ Occupy the width of all grid columns (ie. full width) /\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t /\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t /\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/ Hover /\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/ Keyboard focus (focus-visible) /\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/ Only visible in Windows High Contrast mode /\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/ Active (ie. pressed, mouse down) /\n\t&:active,\n\t&[data-active] {\n\t\t/ TODO: should there be a visual active state? /\n\t}\n\n\t/ When the item is the trigger of an open submenu /\n\t${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/ Always occupy the first column, even when auto-collapsing /\n\tgrid-column: 1;\n\n\t/\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t /\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/ Same width as the check icons /\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/ When the parent menu item is disabled /\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t /\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t /\n\t[data-active-item]:not( [data-focus-visible] ) :not(${ DropdownMenu }) &,\n\t/* When the parent menu item is disabled /\n\t[aria-disabled='true'] :not(${ DropdownMenu }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid /\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/ Occupy the width of all grid columns (ie. full width) /\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/ Align with menu items' content /\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/ Only visible in Windows High Contrast mode /\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t[data-active-item]:not( [data-focus-visible] ) :not( ${ DropdownMenu } ) &,\n\t[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["Ariakit","css","keyframes","COLORS","font","rtl","CONFIG","space","Icon","Truncate","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","_styled","Menu","process","env","NODE_ENV","target","label","ui","background","props","variant","baseItem","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","DropdownMenuItemLabel","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/*\n Internal dependencies\n /\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - those values are different from saved variables?\n// - should bring this into the config, and make themeable\n// - border color and divider color are different?\nconst DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.gray[ 200 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nexport const DropdownMenu = styled( Ariakit.Menu )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\t/ Same as popover component /\n\t/ TODO: is there a way to read the sass variable? /\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: 4px;\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/ Only visible in Windows High Contrast mode /\n\toutline: 2px solid transparent !important;\n\n\t/ Animation /\n\t&[data-open] {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\t\t\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\t\twill-change: transform, opacity;\n\t\t\t/ Default animation./\n\t\t\tanimation-name: ${ slideDownAndFade };\n\t\t\t&[data-side='left'] {\n\t\t\t\tanimation-name: ${ slideLeftAndFade };\n\t\t\t}\n\t\t\t&[data-side='up'] {\n\t\t\t\tanimation-name: ${ slideUpAndFade };\n\t\t\t}\n\t\t\t&[data-side='right'] {\n\t\t\t\tanimation-name: ${ slideRightAndFade };\n\t\t\t}\n\t\t}\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/ Occupy the width of all grid columns (ie. full width) /\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t /\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t /\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/ Hover /\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/ Keyboard focus (focus-visible) /\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/ Only visible in Windows High Contrast mode /\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/ Active (ie. pressed, mouse down) /\n\t&:active,\n\t&[data-active] {\n\t\t/ TODO: should there be a visual active state? /\n\t}\n\n\t/ When the item is the trigger of an open submenu /\n\t${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/ Always occupy the first column, even when auto-collapsing /\n\tgrid-column: 1;\n\n\t/\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t /\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/ Same width as the check icons /\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/ When the parent menu item is disabled /\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t /\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t /\n\t[data-active-item]:not( [data-focus-visible] ) :not(${ DropdownMenu }) &,\n\t/* When the parent menu item is disabled /\n\t[aria-disabled='true'] :not(${ DropdownMenu }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid /\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/ Occupy the width of all grid columns (ie. full width) /\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/ Align with menu items' content /\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/ Only visible in Windows High Contrast mode /\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ COLORS.gray[ '700' ] };\n\tword-break: break-all;\n\n\t[data-active-item]:not( [data-focus-visible] ) :not( ${ DropdownMenu } ) &,\n\t[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}

package/build-module/form-toggle/index.js CHANGED Viewed

@@ -13,27 +13,7 @@ import { forwardRef } from '@wordpress/element';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const noop = () => {};
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- *   const [ isChecked, setChecked ] = useState( true );
- *
- *   return (
- *     <FormToggle
- *       checked={ isChecked }
- *       onChange={ () => setChecked( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function FormToggle(props, ref) {
+function UnforwardedFormToggle(props, ref) {
   const {
     className,
     checked,
@@ -64,5 +44,26 @@ export function FormToggle(props, ref) {
     })]
   });
 }
-export default forwardRef(FormToggle);
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const FormToggle = forwardRef(UnforwardedFormToggle);
+export default FormToggle;
 //# sourceMappingURL=index.js.map

package/build-module/form-toggle/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","forwardRef","jsx","_jsx","jsxs","_jsxs","noop","~~FormToggle~~","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","children","type"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\~~n/\n~~ FormToggle switches a single setting on or off.\n \n ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyFormToggle = (~~) => {~~\n * const [ isChecked, setChecked ] = useState( true );\n \n return (\~~n * <FormToggle\n * checked={ isChecked }\n * onChange={ () => setChecked( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport function FormToggle(\n\~~tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = clsx( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport ~~default~~ forwardRef( ~~FormToggle~~ );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMA,OAAO,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAE5B~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~,~~OAAO,~~SAASC,~~UAAUA~~,~~CACzBC~~,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGR,IAAI;IACf,GAAGS;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAGhB,IAAI,CAAE,wBAAwB,EAAEU,SAAS,EAAE;IACjE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,oBACCR,KAAA;IAAMK,SAAS,EAAGM,cAAgB;IAAAC,QAAA,gBACjCd,IAAA;MACCO,SAAS,EAAC,+BAA+B;MACzCE,EAAE,EAAGA,EAAI;MACTM,IAAI,EAAC,UAAU;MACfP,OAAO,EAAGA,OAAS;MACnBG,QAAQ,EAAGA,QAAU;MACrBD,QAAQ,EAAGA,QAAU;MAAA,GAChBE,eAAe;MACpBN,GAAG,EAAGA;IAAK,CACX,CAAC,eACFN,IAAA;MAAMO,SAAS,EAAC;IAA+B,CAAO,CAAC,eACvDP,IAAA;MAAMO,SAAS,EAAC;IAA+B,CAAO,CAAC;EAAA,CAClD,CAAC;AAET;~~AAEA~~,~~eAAeT~~,UAAU,CAAEM,~~UAAW~~,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["clsx","forwardRef","jsx","_jsx","jsxs","_jsxs","noop","UnforwardedFormToggle","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","children","type","FormToggle"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\nfunction UnforwardedFormToggle(\n\tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = clsx( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\n/\n FormToggle switches a single setting on or off.\n \n ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyFormToggle = () => {\n * const [ isChecked, setChecked ] = useState( true );\n \n return (\n * <FormToggle\n * checked={ isChecked }\n * onChange={ () => setChecked( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport const FormToggle = forwardRef( UnforwardedFormToggle );\n\nexport default FormToggle;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMA,OAAO,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAE5B,SAASC,qBAAqBA,CAC7BC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGR,IAAI;IACf,GAAGS;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAGhB,IAAI,CAAE,wBAAwB,EAAEU,SAAS,EAAE;IACjE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,oBACCR,KAAA;IAAMK,SAAS,EAAGM,cAAgB;IAAAC,QAAA,gBACjCd,IAAA;MACCO,SAAS,EAAC,+BAA+B;MACzCE,EAAE,EAAGA,EAAI;MACTM,IAAI,EAAC,UAAU;MACfP,OAAO,EAAGA,OAAS;MACnBG,QAAQ,EAAGA,QAAU;MACrBD,QAAQ,EAAGA,QAAU;MAAA,GAChBE,eAAe;MACpBN,GAAG,EAAGA;IAAK,CACX,CAAC,eACFN,IAAA;MAAMO,SAAS,EAAC;IAA+B,CAAO,CAAC,eACvDP,IAAA;MAAMO,SAAS,EAAC;IAA+B,CAAO,CAAC;EAAA,CAClD,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,UAAU,GAAGlB,UAAU,CAAEM,qBAAsB,CAAC;AAE7D,eAAeY,UAAU","ignoreList":[]}

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

@@ -128,11 +128,13 @@ function Guide({
           className: "components-guide__back-button",
           variant: "tertiary",
           onClick: goBack,
+          __next40pxDefaultSize: true,
           children: __('Previous')
         }), canGoForward && /*#__PURE__*/_jsx(Button, {
           className: "components-guide__forward-button",
           variant: "primary",
           onClick: goForward,
+          __next40pxDefaultSize: true,
           children: __('Next')
         }), !canGoForward && /*#__PURE__*/_jsx(Button, {
           className: "components-guide__finish-button",

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

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","useState","useEffect","Children","useRef","deprecated","__","Modal","Button","PageControl","jsx","_jsx","jsxs","_jsxs","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","ref","currentPage","setCurrentPage","frame","current","querySelector","HTMLElement","focus","count","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","image","numberOfPages","variant","onClick"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/\n `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n \n ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n \n \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n \n \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,oBAAoB;AAC1E,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,WAAW,MAAM,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,KAAKA,CAAE;EACfC,QAAQ;EACRC,SAAS;EACTC,YAAY;EACZC,gBAAgB,GAAGZ,EAAE,CAAE,QAAS,CAAC;EACjCa,QAAQ;EACRC,KAAK,GAAG;AACG,CAAC,EAAG;EACf,MAAMC,GAAG,GAAGjB,MAAM,CAAoB,IAAK,CAAC;EAC5C,MAAM,CAAEkB,WAAW,EAAEC,cAAc,CAAE,GAAGtB,QAAQ,CAAE,CAAE,CAAC;EAErDC,SAAS,CAAE,MAAM;IAChB;IACA,MAAMsB,KAAK,GAAGH,GAAG,CAACI,OAAO,EAAEC,aAAa,CAAE,mBAAoB,CAAC;IAC/D,IAAKF,KAAK,YAAYG,WAAW,EAAG;MACnCH,KAAK,CAACI,KAAK,CAAC,CAAC;IACd;EACD,CAAC,EAAE,CAAEN,WAAW,CAAG,CAAC;EAEpBpB,SAAS,CAAE,MAAM;IAChB,IAAKC,QAAQ,CAAC0B,KAAK,CAAEd,QAAS,CAAC,EAAG;MACjCV,UAAU,CAAE,6BAA6B,EAAE;QAC1CyB,KAAK,EAAE,KAAK;QACZC,WAAW,EAAE;MACd,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,IAAKZ,QAAQ,CAAC0B,KAAK,CAAEd,QAAS,CAAC,EAAG;IAAA,IAAAiB,aAAA;IACjCZ,KAAK,IAAAY,aAAA,GACJ7B,QAAQ,CAAC8B,GAAG,CAAElB,QAAQ,EAAImB,KAAK,KAAQ;MACtCC,OAAO,EAAED;IACV,CAAC,CAAG,CAAC,cAAAF,aAAA,cAAAA,aAAA,GAAI,EAAE;EACb;EAEA,MAAMI,SAAS,GAAGd,WAAW,GAAG,CAAC;EACjC,MAAMe,YAAY,GAAGf,WAAW,GAAGF,KAAK,CAACkB,MAAM,GAAG,CAAC;EAEnD,MAAMC,MAAM,GAAGA,CAAA,KAAM;IACpB,IAAKH,SAAS,EAAG;MAChBb,cAAc,CAAED,WAAW,GAAG,CAAE,CAAC;IAClC;EACD,CAAC;EAED,MAAMkB,SAAS,GAAGA,CAAA,KAAM;IACvB,IAAKH,YAAY,EAAG;MACnBd,cAAc,CAAED,WAAW,GAAG,CAAE,CAAC;IAClC;EACD,CAAC;EAED,IAAKF,KAAK,CAACkB,MAAM,KAAK,CAAC,EAAG;IACzB,OAAO,IAAI;EACZ;EAEA,oBACC3B,IAAA,CAACJ,KAAK;IACLS,SAAS,EAAGhB,IAAI,CAAE,kBAAkB,EAAEgB,SAAU,CAAG;IACnDC,YAAY,EAAGA,YAAc;IAC7BwB,aAAa,EAAGrB,KAAK,CAACkB,MAAM,GAAG,CAAG;IAClCI,cAAc,EAAGvB,QAAU;IAC3BwB,SAAS,EAAKC,KAAK,IAAM;MACxB,IAAKA,KAAK,CAACC,IAAI,KAAK,WAAW,EAAG;QACjCN,MAAM,CAAC,CAAC;QACR;QACAK,KAAK,CAACE,cAAc,CAAC,CAAC;MACvB,CAAC,MAAM,IAAKF,KAAK,CAACC,IAAI,KAAK,YAAY,EAAG;QACzCL,SAAS,CAAC,CAAC;QACX;QACAI,KAAK,CAACE,cAAc,CAAC,CAAC;MACvB;IACD,CAAG;IACHzB,GAAG,EAAGA,GAAK;IAAAN,QAAA,eAEXF,KAAA;MAAKG,SAAS,EAAC,6BAA6B;MAAAD,QAAA,gBAC3CF,KAAA;QAAKG,SAAS,EAAC,wBAAwB;QAAAD,QAAA,GACpCK,KAAK,CAAEE,WAAW,CAAE,CAACyB,KAAK,EAE1B3B,KAAK,CAACkB,MAAM,GAAG,CAAC,iBACjB3B,IAAA,CAACF,WAAW;UACXa,WAAW,EAAGA,WAAa;UAC3B0B,aAAa,EAAG5B,KAAK,CAACkB,MAAQ;UAC9Bf,cAAc,EAAGA;QAAgB,CACjC,CACD,EAECH,KAAK,CAAEE,WAAW,CAAE,CAACa,OAAO;MAAA,CAC1B,CAAC,eAENtB,KAAA;QAAKG,SAAS,EAAC,0BAA0B;QAAAD,QAAA,GACtCqB,SAAS,iBACVzB,IAAA,CAACH,MAAM;UACNQ,SAAS,EAAC,+BAA+B;UACzCiC,OAAO,EAAC,UAAU;UAClBC,OAAO,EAAGX,MAAQ;~~UAAAxB~~,QAAA,~~EAEhBT~~,EAAE,CAAE,UAAW;QAAC,CACX,CACR,EACC+B,YAAY,iBACb1B,IAAA,CAACH,MAAM;UACNQ,SAAS,EAAC,kCAAkC;UAC5CiC,OAAO,EAAC,SAAS;UACjBC,OAAO,EAAGV,SAAW;~~UAAAzB~~,QAAA,EAEnBT,EAAE,CAAE,MAAO;QAAC,CACP,CACR,EACC,CAAE+B,YAAY,iBACf1B,IAAA,CAACH,MAAM;UACNQ,SAAS,EAAC,iCAAiC;UAC3CiC,OAAO,EAAC,SAAS;UACjBC,OAAO,EAAG/B,QAAU;UAAAJ,QAAA,EAElBG;QAAgB,CACX,CACR;MAAA,CACG,CAAC;IAAA,CACF;EAAC,CACA,CAAC;AAEV;AAEA,eAAeJ,KAAK","ignoreList":[]}
1	+ {"version":3,"names":["clsx","useState","useEffect","Children","useRef","deprecated","__","Modal","Button","PageControl","jsx","_jsx","jsxs","_jsxs","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","ref","currentPage","setCurrentPage","frame","current","querySelector","HTMLElement","focus","count","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","image","numberOfPages","variant","onClick","__next40pxDefaultSize"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/\n `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n \n ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n \n \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n \n \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/heading/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { Props as TextProps } from '../text/types';\n\nexport type HeadingSize =\n\t\| 1\n\t\| 2\n\t\| 3\n\t\| 4\n\t\| 5\n\t\| 6\n\t\| '1'\n\t\| '2'\n\t\| '3'\n\t\| '4'\n\t\| '5'\n\t\| '6';\n\nexport type HeadingProps = Omit~~<\n\tTextProps,\n\t'size'~~ \| 'isBlock' \| 'color' \| 'weight'\n> & {\n\t/\n\t Passing any of the heading levels to `level` will both render the correct\n\t * typographic text size as well as the semantic element corresponding to\n\t * the level (`h1` for `1` for example).\n\t \n\t @default 2\n\t /\n\tlevel?: HeadingSize;\n\t/\n\t Sets `Heading` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t \n\t @default true\n\t /\n\tisBlock?: TextProps[ 'isBlock' ];\n\t/\n\t Adjusts the text color.\n\t \n\t @default '#1e1e1e'\n\t /\n\tcolor?: TextProps[ 'color' ];\n\t/\n\t Adjusts font-weight of the text.\n\t \n\t @default '600'\n\t */\n\tweight?: TextProps[ 'weight' ];\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/heading/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { Props as TextProps } from '../text/types';\n\nexport type HeadingSize =\n\t\| 1\n\t\| 2\n\t\| 3\n\t\| 4\n\t\| 5\n\t\| 6\n\t\| '1'\n\t\| '2'\n\t\| '3'\n\t\| '4'\n\t\| '5'\n\t\| '6';\n\nexport type HeadingProps = Omit< TextProps, 'isBlock' \| 'color' \| 'weight' > & {\n\t/\n\t Passing any of the heading levels to `level` will both render the correct\n\t * typographic text size as well as the semantic element corresponding to\n\t * the level (`h1` for `1` for example).\n\t \n\t @default 2\n\t /\n\tlevel?: HeadingSize;\n\t/\n\t Sets `Heading` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t \n\t @default true\n\t /\n\tisBlock?: TextProps[ 'isBlock' ];\n\t/\n\t Adjusts the text color.\n\t \n\t @default '#1e1e1e'\n\t /\n\tcolor?: TextProps[ 'color' ];\n\t/\n\t Adjusts font-weight of the text.\n\t \n\t @default '600'\n\t */\n\tweight?: TextProps[ 'weight' ];\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -22,7 +22,7 @@ import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 // Used to track and dismiss the prior modal when another opens unless nested.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ModalContext = createContext([]);
+const ModalContext = createContext(new Set());
 // Used to track body class names applied while modals are open.
 const bodyOpenClasses = new Map();
@@ -109,22 +109,28 @@ function UnforwardedModal(props, forwardedRef) {
   // one should remain open at a time and the list enables closing prior ones.
   const dismissers = useContext(ModalContext);
   // Used for the tracking and dismissing any nested modals.
-  const nestedDismissers = useRef([]);
+  const [nestedDismissers] = useState(() => new Set());
   // Updates the stack tracking open modals at this level and calls
   // onRequestClose for any prior and/or nested modals as applicable.
   useEffect(() => {
-    dismissers.push(refOnRequestClose);
-    const [first, second] = dismissers;
-    if (second) {
-      first?.current?.();
+    // add this modal instance to the dismissers set
+    dismissers.add(refOnRequestClose);
+    // request that all the other modals close themselves
+    for (const dismisser of dismissers) {
+      if (dismisser !== refOnRequestClose) {
+        dismisser.current?.();
+      }
     }
-    const nested = nestedDismissers.current;
     return () => {
-      nested[0]?.current?.();
-      dismissers.shift();
+      // request that all the nested modals close themselves
+      for (const dismisser of nestedDismissers) {
+        dismisser.current?.();
+      }
+      // remove this modal instance from the dismissers set
+      dismissers.delete(refOnRequestClose);
     };
-  }, [dismissers]);
+  }, [dismissers, nestedDismissers]);
   // Adds/removes the value of bodyOpenClassName to body element.
   useEffect(() => {
@@ -257,7 +263,7 @@ function UnforwardedModal(props, forwardedRef) {
     })
   });
   return createPortal( /*#__PURE__*/_jsx(ModalContext.Provider, {
-    value: nestedDismissers.current,
+    value: nestedDismissers,
     children: modal
   }), document.body);
 }

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

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","createPortal","useCallback","useEffect","useRef","useState","forwardRef","useLayoutEffect","createContext","useContext","useInstanceId","useFocusReturn","useFocusOnMount","useConstrainedTabbing","useMergeRefs","__","close","getScrollContainer","ariaHelper","Button","StyleProvider","withIgnoreIMEEvents","jsx","_jsx","jsxs","_jsxs","ModalContext","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","instanceId","Modal","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","current","closestScrollContainer","modalize","unmodalize","refOnRequestClose","dismissers","nestedDismissers","push","first","second","nested","shift","_bodyOpenClasses$get","theClass","oneMore","get","set","document","body","classList","add","oneLess","remove","delete","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","e","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","tabIndex","onScroll","id","onClick","label","Provider","value"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type {\n\tForwardedRef,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tUIEvent,\n} from 'react';\n\n/\n WordPress dependencies\n /\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/\n Internal dependencies\n /\nimport as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nconst ModalContext = createContext<\n\tMutableRefObject< ModalProps[ 'onRequestClose' ] \| undefined >[]\n>( [] );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. /\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's content* when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen \|\| size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst nestedDismissers = useRef< typeof dismissers >( [] );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\tdismissers.push( refOnRequestClose );\n\t\tconst [ first, second ] = dismissers;\n\t\tif ( second ) {\n\t\t\tfirst?.current?.();\n\t\t}\n\n\t\tconst nested = nestedDismissers.current;\n\t\treturn () => {\n\t\t\tnested[ 0 ]?.current?.();\n\t\t\tdismissers.shift();\n\t\t};\n\t}, [ dismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver \|\| ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' \|\| event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget \| null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel \|\| __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\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</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers.current }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/*\n Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n \n ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyModal = () => {\n * const [ isOpen, setOpen ] = useState( false );\n * const openModal = () => setOpen( true );\n * const closeModal = () => setOpen( false );\n \n return (\n * <>\n * <Button variant=\"secondary\" onClick={ openModal }>\n * Open Modal\n * </Button>\n * { isOpen && (\n * <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n * <Button variant=\"secondary\" onClick={ closeModal }>\n * My custom close button\n * </Button>\n * </Modal>\n * ) }\n * </>\n * );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["clsx","createPortal","useCallback","useEffect","useRef","useState","forwardRef","useLayoutEffect","createContext","useContext","useInstanceId","useFocusReturn","useFocusOnMount","useConstrainedTabbing","useMergeRefs","__","close","getScrollContainer","ariaHelper","Button","StyleProvider","withIgnoreIMEEvents","jsx","_jsx","jsxs","_jsxs","ModalContext","Set","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","instanceId","Modal","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","current","closestScrollContainer","modalize","unmodalize","refOnRequestClose","dismissers","nestedDismissers","add","dismisser","delete","_bodyOpenClasses$get","theClass","oneMore","get","set","document","body","classList","oneLess","remove","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","e","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","tabIndex","onScroll","id","onClick","label","Provider","value"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/\n Internal dependencies\n /\nimport as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\ntype Dismissers = Set<\n\tRefObject< ModalProps[ 'onRequestClose' ] \| undefined >\n>;\nconst ModalContext = createContext< Dismissers >( new Set() );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. /\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's content* when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen \|\| size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst [ nestedDismissers ] = useState< Dismissers >( () => new Set() );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\t// add this modal instance to the dismissers set\n\t\tdismissers.add( refOnRequestClose );\n\t\t// request that all the other modals close themselves\n\t\tfor ( const dismisser of dismissers ) {\n\t\t\tif ( dismisser !== refOnRequestClose ) {\n\t\t\t\tdismisser.current?.();\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\t// request that all the nested modals close themselves\n\t\t\tfor ( const dismisser of nestedDismissers ) {\n\t\t\t\tdismisser.current?.();\n\t\t\t}\n\t\t\t// remove this modal instance from the dismissers set\n\t\t\tdismissers.delete( refOnRequestClose );\n\t\t};\n\t}, [ dismissers, nestedDismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver \|\| ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' \|\| event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget \| null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel \|\| __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\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</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/*\n Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n \n ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyModal = () => {\n * const [ isOpen, setOpen ] = useState( false );\n * const openModal = () => setOpen( true );\n * const closeModal = () => setOpen( false );\n \n return (\n * <>\n * <Button variant=\"secondary\" onClick={ openModal }>\n * Open Modal\n * </Button>\n * { isOpen && (\n * <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n * <Button variant=\"secondary\" onClick={ closeModal }>\n * My custom close button\n * </Button>\n * </Modal>\n * ) }\n * </>\n * );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}

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

@@ -72,7 +72,7 @@ export function QueryControls({
       __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: __next40pxDefaultSize,
       label: __('Order by'),
-      value: `${orderBy}/${order}`,
+      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,
       options: [{
         label: __('Newest to oldest'),
         value: 'date/desc'

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__","_x","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","jsx","_jsx","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","spacing","className","children","__nextHasNoMarginBottom","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 { __, _x } 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={ _x( 'All', 'categories' ) }\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={ _x( 'All', 'authors' ) }\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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","ignoreList":[]}
1	+ {"version":3,"names":["__","_x","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","jsx","_jsx","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","spacing","className","children","__nextHasNoMarginBottom","label","value","undefined","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 { __, _x } 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={\n\t\t\t\t\t\t\torderBy === undefined \|\| order === undefined\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: `${ orderBy }/${ order }`\n\t\t\t\t\t\t}\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={ _x( 'All', 'categories' ) }\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={ _x( 'All', 'authors' ) }\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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","ignoreList":[]}

package/build-module/radio-control/index.js CHANGED Viewed

@@ -12,6 +12,16 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import BaseControl from '../base-control';
 import { VStack } from '../v-stack';
+import { useBaseControlProps } from '../base-control/hooks';
+import { StyledHelp } from '../base-control/styles/base-control-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function generateOptionDescriptionId(radioGroupId, index) {
+  return `${radioGroupId}-${index}-option-description`;
+}
+function generateOptionId(radioGroupId, index) {
+  return `${radioGroupId}-${index}`;
+}
 /**
  * Render a user interface to select the user type using radio inputs.
@@ -38,8 +48,6 @@ import { VStack } from '../v-stack';
  * };
  * ```
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export function RadioControl(props) {
   const {
     label,
@@ -49,11 +57,21 @@ export function RadioControl(props) {
     onChange,
     hideLabelFromVision,
     options = [],
+    id: preferredId,
     ...additionalProps
   } = props;
-  const instanceId = useInstanceId(RadioControl);
-  const id = `inspector-radio-control-${instanceId}`;
+  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);
   const onChangeValue = event => onChange(event.target.value);
+  // Use `useBaseControlProps` to get the id of the help text.
+  const {
+    controlProps: {
+      'aria-describedby': helpTextId
+    }
+  } = useBaseControlProps({
+    id,
+    help
+  });
   if (!options?.length) {
     return null;
   }
@@ -65,25 +83,33 @@ export function RadioControl(props) {
     help: help,
     className: clsx(className, 'components-radio-control'),
     children: /*#__PURE__*/_jsx(VStack, {
-      spacing: 2,
+      spacing: 3,
+      className: clsx('components-radio-control__group-wrapper', {
+        'has-help': !!help
+      }),
       children: options.map((option, index) => /*#__PURE__*/_jsxs("div", {
         className: "components-radio-control__option",
         children: [/*#__PURE__*/_jsx("input", {
-          id: `${id}-${index}`,
+          id: generateOptionId(id, index),
           className: "components-radio-control__input",
           type: "radio",
           name: id,
           value: option.value,
           onChange: onChangeValue,
           checked: option.value === selected,
-          "aria-describedby": !!help ? `${id}__help` : undefined,
+          "aria-describedby": clsx([!!option.description && generateOptionDescriptionId(id, index), helpTextId]) || undefined,
           ...additionalProps
         }), /*#__PURE__*/_jsx("label", {
           className: "components-radio-control__label",
-          htmlFor: `${id}-${index}`,
+          htmlFor: generateOptionId(id, index),
           children: option.label
-        })]
-      }, `${id}-${index}`))
+        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {
+          __nextHasNoMarginBottom: true,
+          id: generateOptionDescriptionId(id, index),
+          className: "components-radio-control__option-description",
+          children: option.description
+        }) : null]
+      }, generateOptionId(id, index)))
     })
   });
 }

package/build-module/radio-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","jsx","_jsx","jsxs","_jsxs","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","~~additionalProps~~","~~instanceId~~","id","onChangeValue","event","target","value","length","__nextHasNoMarginBottom","children","spacing","map","option","~~index","~~type","name","checked","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/\n Render a user interface to select the user type using radio inputs.\n \n ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n \n return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst ~~instanceId~~ = useInstanceId( ~~RadioControl );\~~n\~~tconst id = `~~inspector-radio-control~~-${ instanceId }`;\~~n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack ~~spacing~~={ 2 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ ~~`${~~ id ~~}-${~~ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ ~~`${~~ id ~~}-${~~ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! ~~help~~ ? ~~`${~~ id ~~}__help` :~~ undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ ~~`${~~ id }-${ ~~index~~ }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.~~label~~ }\n\t\t\t\t\t\t</~~label~~>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;;~~AAEnC~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAxBA~~,~~SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAyBA,~~OAAO,~~SAASC~~,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;~~IACZ~~,GAAGC;EACJ,CAAC,~~GAAGR~~,KAAK;EACT,~~MAAMS~~,~~UAAU~~,~~GAAGjB~~,aAAa,~~CAAEO~~,~~YAAa~~,~~CAAC;EAChD~~,~~MAAMW~~,~~EAAE~~,~~GAAI~~,~~2BAA2BD,UAAY,EAAC~~;~~EACpD~~,MAAME,aAAa,GAAKC,KAAsC,IAC7DP,QAAQ,CAAEO,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,~~CAAEP~~,OAAO,~~EAAEQ~~,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,~~oBACCnB~~,IAAA,~~CAACH~~,WAAW;~~IACXuB~~,uBAAuB;~~IACvBf~~,KAAK,EAAGA,KAAO;~~IACfS~~,EAAE,EAAGA,EAAI;~~IACTJ~~,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,~~EAAGX~~,IAAI,~~CAAEW~~,SAAS,EAAE,0BAA2B,CAAG;~~IAAAe~~,QAAA,~~eAE3DrB~~,IAAA,~~CAACF~~,MAAM;~~MAACwB~~,OAAO,EAAG,CAAG;~~MAAAD~~,QAAA,~~EAClBV~~,OAAO,~~CAACY~~,GAAG,CAAE,CAAEC,MAAM,~~EAAEC~~,KAAK,~~kBAC7BvB~~,KAAA;~~QAECI~~,SAAS,EAAC,kCAAkC;~~QAAAe~~,QAAA,~~gBAE5CrB~~,IAAA;~~UACCc~~,EAAE,~~EAAI~~,~~GAAGA~~,~~EAAI~~,~~IAAIW~~,~~KAAO~~,~~EAAG~~;~~UAC3BnB~~,SAAS,EAAC,iCAAiC;~~UAC3CoB~~,IAAI,EAAC,OAAO;UACZC,IAAI,~~EAAGb~~,EAAI;~~UACXI~~,KAAK,~~EAAGM~~,MAAM,~~CAACN~~,KAAO;UACtBT,QAAQ,EAAGM,aAAe;~~UAC1Ba~~,OAAO,~~EAAGJ~~,MAAM,~~CAACN~~,KAAK,KAAKX,QAAU;UACrC,~~oBACC~~,CAAC,~~CAAEC~~,~~IAAI~~,~~GAAI~~,~~GAAGM~~,~~EAAI~~,~~QAAO~~,~~GAAGe~~,~~SAC5B~~;UAAA,GACIjB;QAAe,CACpB,CAAC,~~eACFZ~~,IAAA;~~UACCM~~,SAAS,EAAC,iCAAiC;~~UAC3CwB~~,OAAO,~~EAAI~~,~~GAAGhB~~,~~EAAI~~,~~IAAIW~~,~~KAAO~~,~~EAAG~~;~~UAAAJ~~,QAAA,~~EAE9BG~~,MAAM,~~CAACnB~~;QAAK,CACR,CAAC;MAAA,~~GArBD~~,~~GAAGS~~,~~EAAI~~,~~IAAIW~~,~~KAAO~~,~~EAsBrB~~,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAEA,~~eAAetB~~,YAAY","ignoreList":[]}
1	+ {"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","useBaseControlProps","StyledHelp","jsx","_jsx","jsxs","_jsxs","generateOptionDescriptionId","radioGroupId","index","generateOptionId","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","id","preferredId","additionalProps","onChangeValue","event","target","value","controlProps","helpTextId","length","__nextHasNoMarginBottom","children","spacing","map","option","type","name","checked","description","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\nimport { useBaseControlProps } from '../base-control/hooks';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\n\nfunction generateOptionDescriptionId( radioGroupId: string, index: number ) {\n\treturn `${ radioGroupId }-${ index }-option-description`;\n}\n\nfunction generateOptionId( radioGroupId: string, index: number ) {\n\treturn `${ radioGroupId }-${ index }`;\n}\n\n/\n Render a user interface to select the user type using radio inputs.\n \n ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n \n return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\tid: preferredId,\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId(\n\t\tRadioControl,\n\t\t'inspector-radio-control',\n\t\tpreferredId\n\t);\n\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\t// Use `useBaseControlProps` to get the id of the help text.\n\tconst {\n\t\tcontrolProps: { 'aria-describedby': helpTextId },\n\t} = useBaseControlProps( { id, help } );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack\n\t\t\t\tspacing={ 3 }\n\t\t\t\tclassName={ clsx( 'components-radio-control__group-wrapper', {\n\t\t\t\t\t'has-help': !! help,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ generateOptionId( id, index ) }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ generateOptionId( id, index ) }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\tclsx( [\n\t\t\t\t\t\t\t\t\t!! option.description &&\n\t\t\t\t\t\t\t\t\t\tgenerateOptionDescriptionId(\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\thelpTextId,\n\t\t\t\t\t\t\t\t] ) \|\| undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ generateOptionId( id, index ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t{ !! option.description ? (\n\t\t\t\t\t\t\t<StyledHelp\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tid={ generateOptionDescriptionId( id, index ) }\n\t\t\t\t\t\t\t\tclassName=\"components-radio-control__option-description\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ option.description }\n\t\t\t\t\t\t\t</StyledHelp>\n\t\t\t\t\t\t) : null }\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"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","ignoreList":[]}