npm - @wordpress/components - Versions diffs - 25.14.0 → 25.15.1-next.79a6196f.0 - Mend

@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.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 (568) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["css","keyframes","DropdownMenu","COLORS","font","rtl","CONFIG","space","Icon","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PREFIX_WIDTH","ITEM_PADDING_INLINE_START","ITEM_PADDING_INLINE_END","DEFAULT_BORDER_COLOR","ui","borderDisabled","TOOLBAR_VARIANT_BORDER_COLOR","gray","DEFAULT_BOX_SHADOW","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","baseContent","variant","background","radiusBlockUi","process","env","NODE_ENV","itemPrefix","itemSuffix","ItemPrefixWrapper","_styled","target","label","ItemSuffixWrapper","baseItem","Content","props","SubContent","Item","CheckboxItem","RadioItem","SubTrigger","Label","Separator","ItemIndicator","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","SubmenuRtlChevronIcon"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\n/*\n Internal dependencies\n /\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport type { DropdownMenuInternalContext } 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( 2 );\nconst ITEM_PREFIX_WIDTH = space( 7 );\nconst ITEM_PADDING_INLINE_START = space( 2 );\nconst ITEM_PADDING_INLINE_END = space( 2.5 );\n\n// TODO: should bring this into the config, and make themeable\nconst DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;\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 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\nconst baseContent = (\n\tvariant: DropdownMenuInternalContext[ 'variant' ]\n) => css`\n\tmin-width: 220px;\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\tbox-shadow: ${ variant === 'toolbar'\n\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t: DEFAULT_BOX_SHADOW };\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\n\t&[data-side='top'] {\n\t\tanimation-name: ${ slideDownAndFade };\n\t}\n\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst itemPrefix = css`\n\twidth: ${ ITEM_PREFIX_WIDTH };\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/ Prefixes don't get affected by the item's inline start padding /\n\tmargin-inline-start: calc( -1 ${ ITEM_PADDING_INLINE_START } );\n\t/\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n`;\n\nconst itemSuffix = css`\n\twidth: max-content;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Push prefix to the inline-end of the item /\n\tmargin-inline-start: auto;\n\t/ Minimum space between the item's content and suffix /\n\tpadding-inline-start: ${ space( 6 ) };\n\t/\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n\n\t/\n\t\tOverride color in normal conditions, but inherit the item's color\n\t for altered conditions.\n\n\t\tTODO:\n\t\t - For now, used opacity like for disabled item, which makes it work\n\t\t\t regardless of the theme\n\t\t - how do we translate this for themes? Should we have a new variable\n\t\tfor \"secondary\" text?\n\t/\n\topacity: 0.6;\n\n\t[data-highlighted] > &,\n\t[data-state='open'] > &,\n\t[data-disabled] > & {\n\t\topacity: 1;\n\t}\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t${ itemPrefix }\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\t${ itemSuffix }\n`;\n\nconst baseItem = css`\n\tall: unset;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PADDING_INLINE_START };\n\tposition: relative;\n\tuser-select: none;\n\toutline: none;\n\n\t&[data-disabled] {\n\t\t/\n\t\t\tTODO:\n\t\t\t - we need a disabled color in the Theme variables\n\t\t\t - design specs use opacity instead of setting a new text color\n\t\t/\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t/ Hover and Focus styles /\n\t&[data-highlighted] {\n\t\t/ TODO: reconcile with global focus styles /\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\n\t\t/ Only visible in Windows High Contrast mode /\n\t\toutline: 2px solid transparent;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n\n\t&:not( :has( ${ ItemPrefixWrapper } ) ) {\n\t\tpadding-inline-start: ${ ITEM_PREFIX_WIDTH };\n\t}\n`;\n\nexport const Content = styled( DropdownMenu.Content )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\nexport const SubContent = styled( DropdownMenu.SubContent )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\n\nexport const Item = styled( DropdownMenu.Item )`\n\t${ baseItem }\n`;\nexport const CheckboxItem = styled( DropdownMenu.CheckboxItem )`\n\t${ baseItem }\n`;\nexport const RadioItem = styled( DropdownMenu.RadioItem )`\n\t${ baseItem }\n`;\nexport const SubTrigger = styled( DropdownMenu.SubTrigger )`\n\t${ baseItem }\n\n\t&[data-state='open'] {\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\t}\n`;\n\nexport const Label = styled( DropdownMenu.Label )`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: ${ space( 8 ) };\n\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PREFIX_WIDTH };\n\t/ TODO: color doesn't match available UI variables /\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t/ TODO: font size doesn't match available ones via \"font\" utils /\n\tfont-size: 11px;\n\tline-height: 1.4;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n`;\n\nexport const Separator = styled( DropdownMenu.Separator )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\theight: ${ CONFIG.borderWidth };\n\t/ TODO: doesn't match border color from variables /\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DEFAULT_BORDER_COLOR };\n\t/ Negative horizontal margin to make separator go from side to side /\n\tmargin: ${ space( 2 ) } calc( -1 ${ CONTENT_WRAPPER_PADDING } );\n`;\n\nexport const ItemIndicator = styled( DropdownMenu.ItemIndicator )`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const SubmenuRtlChevronIcon = styled( Icon )`\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1) translateX(${ space( 2 ) })`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1) translateX(${ space( 2 ) })`,\n\t\t}\n\t) }\n`;\n"],"mappings":"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"}
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 /\n// eslint-disable-next-line no-restricted-imports\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='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\t&[data-side='left'] {\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 var( --wp-admin-theme-color );\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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/dropdown-menu-v2/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type as ~~DropdownMenuPrimitive~~ from '@~~radix~~-ui/react-~~dropdown-menu~~';\n\nexport ~~type~~ ~~DropdownMenuProps~~ = {\n\t/*\n\t The ~~open~~ ~~state~~ of ~~the~~ ~~dropdown~~ ~~menu~~ ~~when it is initially rendered. Use when\n\t * you do not need to control its open state~~.\n\t \n\t /\n\~~tdefaultOpen?:~~ ~~DropdownMenuPrimitive~~.~~DropdownMenuProps[ 'defaultOpen' ]~~;\n\t/*\n\t The ~~controlled~~ ~~open~~ ~~state~~ of the ~~dropdown~~ menu. ~~Must be used in conjunction\~~n\t * with `onOpenChange`.\n\t /\n\~~topen~~?: ~~DropdownMenuPrimitive.DropdownMenuProps[~~ '~~open~~' ];\n\t/\n\t ~~Event~~ ~~handler~~ ~~called when the open state of the dropdown menu changes~~.\n\t /\n\~~tonOpenChange?:~~ ~~DropdownMenuPrimitive~~.~~DropdownMenuProps[ 'onOpenChange' ]~~;\n\t/\n\t The ~~modality~~ of the dropdown ~~menu. When set to true, interaction with\n\t * outside elements will be disabled and only menu content will be visible to\n\t * screen readers~~.\n\t \n\t @default true\n\t /\n\~~tmodal~~?: ~~DropdownMenuPrimitive~~.~~DropdownMenuProps[ 'modal' ]~~;\n\t/\n\t The ~~preferred~~ ~~side~~ of the ~~trigger~~ to ~~render against~~ when ~~open.\n\t~~ * Will be reversed when collisions occur and avoidCollisions is ~~enabled.\n\t~~ \n\t @default 'bottom'\n\t /\n\tside?: DropdownMenuPrimitive.~~DropdownMenuContentProps[~~ ~~'side'~~ ~~];\n~~\~~t/\~~n\t ~~The~~ ~~distance~~ in ~~pixels~~ ~~from~~ ~~the~~ ~~trigger~~.\n\t \n\t @default 0\n\t /\n\~~tsideOffset~~?: ~~DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ]~~;\n\t/\n\t The ~~preferred~~ ~~alignment~~ ~~against~~ the ~~trigger.\n\t~~ * ~~May~~ ~~change~~ ~~when~~ ~~collisions~~ ~~occur.\n~~\~~t \~~n\t ~~@default~~ ~~'start'\~~n\t /\n\~~talign~~?: ~~DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ]~~;\n\t/\n\t An ~~offset~~ in ~~pixels~~ ~~from~~ the ~~\"start\"~~ or ~~\"end\"~~ ~~alignment~~ ~~options.\n\t~~ \n\t @default 0\n\t /\n\~~talignOffset~~?: ~~DropdownMenuPrimitive.DropdownMenuContentProps[~~ ~~'alignOffset'~~ ~~];\n\t/\n\t~~ ~~The~~ ~~trigger button.\n\t /\n\ttrigger: React.ReactNode~~;\n\t/\n\t The ~~contents~~ of the dropdown~~\n\t~~ /\n\tchildren: React.~~ReactNode;\n};\n\nexport~~ ~~type~~ ~~DropdownSubMenuTriggerProps~~ = {\n\t~~/\n\t~~ ~~The~~ ~~contents~~ of ~~the~~ ~~item.\n\t~~ /\n\tchildren: ~~React.ReactNode;\n\t/\n\t~~ ~~The~~ ~~contents~~ of ~~the~~ ~~item's prefix.\n~~\~~t /\~~n\~~tprefix?: React.ReactNode;\n\~~t~~/\n\t~~ ~~The~~ ~~contents of the item's suffix~~.\n\t \n\t @default ~~The standard chevron icon for a submenu trigger.\~~n\t /\n\~~tsuffix~~?: ~~React.ReactNode~~;\n~~};\n~~\~~nexport type DropdownSubMenuProps = {\n\~~t/\n\t The ~~open~~ ~~state~~ of the ~~submenu~~ ~~when~~ ~~it is initially rendered. Use when you\~~n\t * do not need to control its open state.\n\t /\n\tdefaultOpen?: ~~DropdownMenuPrimitive.DropdownMenuSubProps[~~ '~~defaultOpen~~' ~~];\n\t/\n\t~~ ~~The~~ ~~controlled~~ ~~open~~ ~~state~~ ~~of the submenu. Must be used in conjunction with~~\n\t * `onOpenChange`.\n\t /\n\~~topen~~?: ~~DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ]~~;\n\t/\n\t ~~Event~~ ~~handler~~ ~~called~~ ~~when~~ the ~~open~~ ~~state~~ of the ~~submenu~~ ~~changes~~.\n\t /\n\~~tonOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];\n\~~t~~/\n\t~~ ~~When~~ ~~`true`,~~ ~~prevents~~ ~~the~~ ~~user~~ ~~from~~ ~~interacting~~ ~~with~~ ~~the item.\~~n\t /\n\~~tdisabled~~?: ~~DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ]~~;\n\t/\n\t ~~Optional~~ ~~text~~ ~~used~~ ~~for~~ ~~typeahead~~ ~~purposes~~ ~~for~~ the ~~trigger~~. By ~~default~~ ~~the~~ ~~typeahead~~\n\t * ~~behavior~~ ~~will~~ ~~use~~ ~~the~~ ~~`.textContent` of~~ the ~~trigger.~~ ~~Use~~ ~~this~~ ~~when~~ the ~~content~~\n\t * is ~~complex,~~ or ~~you~~ ~~have~~ ~~non~~-~~textual~~ ~~content~~ ~~inside.\~~n\t /\n\~~ttextValue~~?: ~~DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ]~~;\n\t/\n\t ~~The~~ ~~contents~~ ~~rendered inside~~ the ~~trigger.~~ ~~The~~ ~~trigger~~ ~~should~~ be~~\n\t~~ * an ~~instance of~~ the ~~`DropdownSubMenuTriggerProps`~~ ~~component.\n~~\~~t /\~~n\~~ttrigger: React.ReactNode;\n\~~t~~/\n\t~~ ~~The contents of~~ the ~~dropdown~~ ~~sub menu\~~n\t /\n\~~tchildren: React.ReactNode;\n};\n\nexport type DropdownMenuItemProps = {\n\~~t~~/\n\t~~ ~~When~~ ~~true,~~ ~~prevents~~ ~~the~~ ~~user~~ ~~from~~ ~~interacting~~ ~~with~~ ~~the~~ ~~item.\~~n\t \n\~~t @default false\~~n\t /\n\~~tdisabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];\~~n\t~~/\n~~\t ~~Event handler called when the user selects an item~~ (~~via mouse or keyboard).\~~n\t * Calling `event.preventDefault` in this handler will prevent the dropdown\n\t * ~~menu~~ ~~from~~ ~~closing~~ ~~when selecting that item.\~~n\t /\n\~~tonSelect?:~~ ~~DropdownMenuPrimitive.DropdownMenuItemProps[~~ ~~'onSelect'~~ ];\n\~~t/\~~n\t ~~Optional~~ ~~text used for typeahead purposes. By default the typeahead~~\n\t * behavior will use the `.textContent` of the item. Use this when the content\n\t * is ~~complex,~~ or ~~you~~ ~~have~~ ~~non-textual~~ ~~content inside~~.\n\t /\n\~~ttextValue?:~~ ~~DropdownMenuPrimitive~~.DropdownMenuItemProps[ ~~'textValue' ];\~~n\t/\n\t The contents of the item\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t The contents of the item's prefix\n\t /\n\tprefix?: React.ReactNode;\n\t/\n\t The contents of the item's suffix\n\t /\n\tsuffix?: React.ReactNode;\n~~};\n~~\~~nexport type DropdownMenuCheckboxItemProps = {\n\~~t/\n\t ~~The~~ ~~controlled~~ ~~checked~~ ~~state of~~ the ~~item.\n\t~~ * ~~Must~~ be ~~used~~ in ~~conjunction with `onCheckedChange`.\~~n\t \n\t @default ~~false~~\n\t /\n\~~tchecked~~?: ~~DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ]~~;\n\t/\n\t ~~Event~~ ~~handler~~ ~~called when~~ the ~~checked~~ ~~state~~ ~~changes~~.\n\t /\n\~~tonCheckedChange~~?: ~~DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ]~~;\n\~~t/\~~n\t ~~When~~ ~~`true`,~~ ~~prevents~~ ~~the~~ ~~user~~ ~~from~~ ~~interacting~~ ~~with the item.\n~~\~~t /\~~n\~~tdisabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];\n\~~t/\n\t ~~Event~~ ~~handler~~ ~~called~~ ~~when~~ the ~~user~~ ~~selects~~ an ~~item (via mouse or keyboard).\n\t * Calling `event.preventDefault` in this handler will prevent~~ the ~~dropdown\n\t~~ * ~~\tmenu from closing when selecting that item~~.\n\t /\n\~~tonSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];\n\~~t~~/\n\t~~ ~~Optional text used for typeahead purposes. By~~ default ~~the typeahead~~\n\t * behavior will use the `.textContent` of the item. Use this when the content\n\t * is complex, or you have non-textual content inside.\n\t /\n\~~ttextValue~~?: ~~DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ]~~;\n\t/\n\t The ~~contents~~ of ~~the~~ ~~checkbox item\~~n\t /\n\~~tchildren~~: ~~React.ReactNode~~;\n\t/\n\t The ~~contents of the~~ checkbox item's ~~suffix\n\t~~ /\n\tsuffix?: ~~React.ReactNode;\n};\n\nexport~~ ~~type~~ ~~DropdownMenuRadioGroupProps~~ = {\n\t~~/\n\t~~ ~~The~~ ~~value~~ of the ~~selected~~ ~~item in the group.\~~n\t /\n\tvalue?: ~~DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ]~~;\n\t/\n\t ~~Event~~ ~~handler~~ ~~called~~ ~~when~~ the ~~value~~ ~~changes~~.\n\t /\n\~~tonValueChange~~?: ~~DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ]~~;\n\t/\n\t The ~~contents~~ of the ~~radio~~ ~~group\n\t~~ /\n\tchildren: ~~React.ReactNode;\n};\n\nexport~~ ~~type~~ ~~DropdownMenuRadioItemProps~~ = ~~{\n\t/\n\t The unique value of the item~~.\n\t /\n\tvalue: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];\n\t/\n\t ~~When~~ ~~`true`,~~ ~~prevents~~ ~~the~~ ~~user~~ ~~from~~ ~~interacting~~ ~~with~~ ~~the item~~.\n\t /\n\~~tdisabled~~?: ~~DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ]~~;\n\t/\n\t Event handler called when the ~~user~~ ~~selects~~ an ~~item~~ ~~(via~~ ~~mouse~~ or ~~keyboard)~~.\n\t * ~~Calling~~ `event.~~preventDefault`~~ in ~~this~~ ~~handler~~ ~~will~~ ~~prevent~~ ~~the~~ ~~dropdown~~\n\t * ~~menu~~ ~~from~~ ~~closing~~ ~~when~~ ~~selecting~~ ~~that item.\n~~\~~t /\~~n\~~tonSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];\n\~~t/\n\t ~~Optional~~ ~~text~~ ~~used~~ ~~for typeahead purposes. By default~~ the ~~typeahead\n\t~~ * ~~behavior~~ ~~will use~~ the ~~`.textContent` of the~~ item. ~~Use~~ ~~this~~ ~~when the content\~~n\t * is ~~complex, or you have non-textual content inside.\~~n\t /\n\~~ttextValue~~?: ~~DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ]~~;\n\t/\n\t The ~~contents of the~~ radio item\n\t /\n\~~tchildren~~: ~~React.ReactNode~~;\n\t/\n\t The ~~contents of the~~ radio item's ~~suffix\~~n\t /\n\~~tsuffix?:~~ ~~React.ReactNode;\n};\n\nexport~~ ~~type~~ ~~DropdownMenuLabelProps = {\~~n\t/\n\t The ~~contents~~ of the ~~label\~~n\t /\n\~~tchildren:~~ ~~React.ReactNode~~;\n~~};\n~~\~~nexport type DropdownMenuGroupProps = {\n\~~t/\n\t The ~~contents~~ of the ~~group\n\t~~ /\n\tchildren: ~~React.ReactNode;\n};\n\nexport~~ ~~type~~ ~~DropdownMenuSeparatorProps~~ = ~~{};\n\nexport~~ ~~type DropdownMenuInternalContext = {\~~n\t~~/\n\t~~ ~~This~~ ~~variant~~ ~~can~~ be ~~used~~ to ~~change~~ ~~the~~ ~~appearance~~ of ~~the~~ ~~component in~~\n\t * ~~specific~~ ~~contexts,~~ ~~ie.~~ when ~~rendered~~ ~~inside~~ ~~the~~ ~~`Toolbar`~~ ~~component~~.\n\t */\n\~~tvariant~~?: ~~'toolbar';\n};\n\nexport~~ ~~type~~ ~~DropdownMenuPrivateContext~~ = ~~Pick<\n\tDropdownMenuInternalContext,\n\t'variant'\n~~> & {\n\~~tportalContainer?:~~ ~~HTMLElement~~ \| ~~null;\n~~};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/dropdown-menu-v2/types.ts"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport type as Ariakit from '@ariakit/react';\nimport type { Placement } from '@floating-ui/react-dom';\n\nexport interface DropdownMenuContext {\n\t/*\n\t The ariakit store shared across all DropdownMenu subcomponents.\n\t /\n\tstore: Ariakit.MenuStore;\n\t/\n\t The variant used by the underlying menu popover.\n\t /\n\tvariant?: 'toolbar';\n}\n\nexport interface DropdownMenuProps {\n\t/\n\t The trigger button.\n\t /\n\ttrigger: React.ReactElement;\n\t/\n\t The contents of the dropdown.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t The open state of the dropdown menu when it is initially rendered. Use when\n\t * not wanting to control its open state.\n\t \n\t @default false\n\t /\n\tdefaultOpen?: boolean;\n\t/\n\t The controlled open state of the dropdown menu. Must be used in conjunction\n\t * with `onOpenChange`.\n\t /\n\topen?: boolean;\n\t/\n\t Event handler called when the open state of the dropdown menu changes.\n\t /\n\tonOpenChange?: ( open: boolean ) => void;\n\t/\n\t The modality of the dropdown menu. When set to true, interaction with\n\t * outside elements will be disabled and only menu content will be visible to\n\t * screen readers.\n\t \n\t @default true\n\t /\n\tmodal?: boolean;\n\t/\n\t The placement of the dropdown menu popover.\n\t \n\t @default 'bottom-start' for root-level menus, 'right-start' for nested menus\n\t /\n\tplacement?: Placement;\n\t/\n\t The distance between the popover and the anchor element.\n\t \n\t @default 8 for root-level menus, 16 for nested menus\n\t /\n\tgutter?: number;\n\t/\n\t The skidding of the popover along the anchor element. Can be set to\n\t * negative values to make the popover shift to the opposite side.\n\t \n\t @default 0 for root-level menus, -8 for nested menus\n\t /\n\tshift?: number;\n\t/\n\t Determines whether the menu popover will be hidden when the user presses\n\t * the Escape key.\n\t \n\t @default `( event ) => { event.preventDefault(); return true; }`\n\t /\n\thideOnEscape?:\n\t\t\| boolean\n\t\t\| ( (\n\t\t\t\tevent: KeyboardEvent \| React.KeyboardEvent< Element >\n\t\t ) => boolean );\n}\n\nexport interface DropdownMenuGroupProps {\n\t/\n\t The contents of the dropdown menu group.\n\t /\n\tchildren: React.ReactNode;\n}\n\nexport interface DropdownMenuItemProps {\n\t/\n\t The contents of the menu item.\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t The contents of the menu item's prefix.\n\t /\n\tprefix?: React.ReactNode;\n\t/\n\t The contents of the menu item's suffix.\n\t /\n\tsuffix?: React.ReactNode;\n\t/\n\t Whether to hide the parent menu when the item is clicked.\n\t \n\t @default true\n\t /\n\thideOnClick?: boolean;\n\t/\n\t Determines if the element is disabled.\n\t /\n\tdisabled?: boolean;\n}\n\nexport interface DropdownMenuCheckboxItemProps\n\textends Omit< DropdownMenuItemProps, 'prefix' \| 'hideOnClick' > {\n\t/\n\t Whether to hide the dropdown menu when the item is clicked.\n\t \n\t @default false\n\t /\n\thideOnClick?: boolean;\n\t/\n\t The checkbox menu item's name.\n\t /\n\tname: string;\n\t/\n\t The checkbox item's value, useful when using multiple checkbox menu items\n\t * associated to the same `name`.\n\t /\n\tvalue?: string;\n\t/\n\t The controlled checked state of the checkbox menu item.\n\t /\n\tchecked?: boolean;\n\t/\n\t The checked state of the checkbox menu item when it is initially rendered.\n\t * Use when not wanting to control its checked state.\n\t /\n\tdefaultChecked?: boolean;\n\t/\n\t Event handler called when the checked state of the checkbox menu item changes.\n\t /\n\tonChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;\n}\n\nexport interface DropdownMenuRadioItemProps\n\textends Omit< DropdownMenuItemProps, 'prefix' \| 'hideOnClick' > {\n\t/\n\t Whether to hide the dropdown menu when the item is clicked.\n\t \n\t @default false\n\t /\n\thideOnClick?: boolean;\n\t/\n\t The radio item's name.\n\t /\n\tname: string;\n\t/\n\t The radio item's value.\n\t /\n\tvalue: string \| number;\n\t/\n\t The controlled checked state of the radio menu item.\n\t /\n\tchecked?: boolean;\n\t/\n\t The checked state of the radio menu item when it is initially rendered.\n\t * Use when not wanting to control its checked state.\n\t /\n\tdefaultChecked?: boolean;\n\t/\n\t Event handler called when the checked radio menu item changes.\n\t */\n\tonChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;\n}\n\nexport interface DropdownMenuSeparatorProps {}\n"],"mappings":""}

package/build-module/duotone-picker/duotone-picker.js CHANGED Viewed

@@ -81,7 +81,7 @@ function DuotonePicker({
       onChange(isUnset ? undefined : 'unset');
     }
   });
-  const options = duotonePalette.map(({
+  const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
     name
@@ -136,15 +136,16 @@ function DuotonePicker({
       };
     }
   }
+  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
   return createElement(CircularOptionPicker, {
     ...otherProps,
     ...metaProps,
-    options: unsetable ? [unsetOption, ...options] : options,
+    options: options,
     actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
       onClick: () => onChange(undefined)
     }, __('Clear'))
   }, createElement(Spacer, {
-    paddingTop: 4
+    paddingTop: options.length === 0 ? 0 : 4
   }, createElement(VStack, {
     spacing: 3
   }, !disableCustomColors && !disableCustomDuotone && createElement(CustomDuotoneBar, {

package/build-module/duotone-picker/duotone-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","createElement","Option","key","isSelected","tooltipText","className","onClick","undefined","options","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","actions","ButtonAction","paddingTop","spacing","labels","enableAlpha","newColors","newValue","length"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/\n ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n \n const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n \n const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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"}
1	+ {"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","createElement","Option","key","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/\n ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n \n const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n \n const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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"}

package/build-module/font-size-picker/index.js CHANGED Viewed

@@ -80,6 +80,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string';
   const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
   const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
+  const isDisabled = value === undefined;
   return createElement(Container, {
     ref: ref,
     className: "components-font-size-picker"
@@ -98,7 +99,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
       setShowCustomValueControl(!showCustomValueControl);
     },
     isPressed: showCustomValueControl,
-    isSmall: true
+    size: "small"
   }))), createElement(Controls, {
     className: "components-font-size-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
@@ -176,7 +177,8 @@ const UnforwardedFontSizePicker = (props, ref) => {
     max: isValueUnitRelative ? 10 : 100,
     step: isValueUnitRelative ? 0.1 : 1
   }))), withReset && createElement(FlexItem, null, createElement(Button, {
-    disabled: value === undefined,
+    disabled: isDisabled,
+    __experimentalIsFocusable: true,
     onClick: () => {
       onChange?.(undefined);
     },

package/build-module/font-size-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","createElement","className","as","label","icon","onClick","isPressed","isSmall","newValue","undefined","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","initialPosition","withInputField","max","step","disabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp \|\| [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' \|\| typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint \|\| '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\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{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' \|\|\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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"}
1	+ {"version":3,"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Controls","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","isDisabled","undefined","createElement","className","as","label","icon","onClick","isPressed","newValue","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","initialPosition","withInputField","max","step","disabled","__experimentalIsFocusable","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n\tControls,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp \|\| [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' \|\| typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint \|\| '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\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{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' \|\|\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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"}

package/build-module/font-size-picker/index.native.js CHANGED Viewed

@@ -12,11 +12,11 @@ import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
 const DEFAULT_FONT_SIZE = 16;
@@ -62,6 +62,9 @@ function FontSizePicker({
   const units = useCustomUnits({
     availableUnits: ['px', 'em', 'rem']
   });
+  const accessibilityLabel = sprintf(
+  // translators: %1$s: Font size name e.g. Small
+  __('Font Size, %1$s'), selectedOption.name);
   return createElement(BottomSheet.SubSheet, {
     navigationButton: createElement(BottomSheet.Cell, {
       label: label,
@@ -71,7 +74,7 @@ function FontSizePicker({
       __('%1$s (%2$s)'), selectedOption.name, selectedPxValue) : __('Default'),
       onPress: openSubSheet,
       accessibilityRole: 'button',
-      accessibilityLabel: selectedOption.name,
+      accessibilityLabel: accessibilityLabel,
       accessibilityHint: sprintf(
       // translators: %s: Select control button label e.g. Small
       __('Navigates to select %s'), selectedOption.name)

package/build-module/font-size-picker/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["View","useWindowDimensions","useNavigation","useState","Icon","chevronRight","check","__","sprintf","BottomSheet","getPxFromCssUnit","default","UnitControl","useCustomUnits","styles","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","navigation","height","width","cssUnitOptions","fontSize","selectedPxValue","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","SubSheet","screenName","label","units","availableUnits","createElement","navigationButton","Cell","separatorType","onPress","accessibilityRole","accessibilityLabel","accessibilityHint","icon","showSheet","Fragment","NavBar","BackButton","Heading","style","customActionButton","undefined","leftAlign","key","map","item","index","parseFloat","subLabel","min","max","step","nextSize"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { View, useWindowDimensions } from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { getPxFromCssUnit } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t__( '%1$s (%2$s)' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ selectedOption.name }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. Small\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\tkey={ 'default' }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select font size option value e.g: \"Selected: Large\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) \|\|\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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"}
1	+ {"version":3,"names":["View","useWindowDimensions","useNavigation","useState","Icon","chevronRight","check","__","sprintf","BottomSheet","default","getPxFromCssUnit","UnitControl","useCustomUnits","styles","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","navigation","height","width","cssUnitOptions","fontSize","selectedPxValue","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","SubSheet","screenName","label","units","availableUnits","accessibilityLabel","createElement","navigationButton","Cell","separatorType","onPress","accessibilityRole","accessibilityHint","icon","showSheet","Fragment","NavBar","BackButton","Heading","style","customActionButton","undefined","leftAlign","key","map","item","index","parseFloat","subLabel","min","max","step","nextSize"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { View, useWindowDimensions } from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst accessibilityLabel = sprintf(\n\t\t// translators: %1$s: Font size name e.g. Small\n\t\t__( 'Font Size, %1$s' ),\n\t\tselectedOption.name\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t__( '%1$s (%2$s)' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. Small\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\tkey={ 'default' }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select font size option value e.g: \"Selected: Large\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) \|\|\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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"}

package/build-module/form-token-field/index.js CHANGED Viewed

@@ -144,11 +144,16 @@ export function FormTokenField(props) {
       setIncompleteTokenValue('');
       setInputOffsetFromEnd(0);
       setIsActive(false);
-      // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
-      // the user clicks on it (`tokensAndInput` will be the element that caused the blur).
-      const shouldKeepSuggestionsExpanded = !__experimentalExpandOnFocus || __experimentalExpandOnFocus && event.relatedTarget === tokensAndInput.current;
-      setIsExpanded(shouldKeepSuggestionsExpanded);
+      if (__experimentalExpandOnFocus) {
+        // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+        // the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+        const hasFocusWithin = event.relatedTarget === tokensAndInput.current;
+        setIsExpanded(hasFocusWithin);
+      } else {
+        // Else collapse the suggestion list. This will result in the suggestion list closing
+        // after a suggestion has been submitted since that causes a blur.
+        setIsExpanded(false);
+      }
       setSelectedSuggestionIndex(-1);
       setSelectedSuggestionScroll(false);
     }