@wordpress/components 28.3.0 → 28.4.0

package/build/dropdown-menu-v2/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_icon","_interopRequireDefault","_truncate","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","space","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","COLORS","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","CONFIG","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","keyframes","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","exports","_base","Menu","process","env","NODE_ENV","target","label","ui","background","props","css","variant","baseItem","font","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","Icon","rtl","DropdownMenuItemLabel","Truncate","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='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 ${ 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":[]}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_icon","_interopRequireDefault","_truncate","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","space","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","COLORS","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","CONFIG","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","keyframes","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","exports","_base","Menu","process","env","NODE_ENV","target","label","ui","background","props","css","variant","baseItem","font","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","Icon","rtl","DropdownMenuItemLabel","Truncate","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":[]}

package/build/focal-point-picker/index.js

@@ -66,6 +66,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 	return (
  * 		<>
  * 			<FocalPointPicker
+ *        __nextHasNoMarginBottom
  * 				url={ url }
  * 				value={ focalPoint }
  * 				onDragStart={ setFocalPoint }

package/build/focal-point-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","_jsxRuntime","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","clsx","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","jsxs","default","children","jsx","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = clsx( 'components-focal-point-picker-control', className );\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","_jsxRuntime","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","clsx","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","jsxs","default","children","jsx","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n *        __nextHasNoMarginBottom\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = clsx( 'components-focal-point-picker-control', className );\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/font-size-picker-select.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _i18n = require("@wordpress/i18n");
-var _legacyComponent = _interopRequireDefault(require("../custom-select-control-v2/legacy-component"));
+var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));
 var _unitControl = require("../unit-control");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,11 +53,11 @@ const FontSizePickerSelect = props => {
       key: fontSize.slug,
       name: fontSize.name || fontSize.slug,
       value: fontSize.size,
-      __experimentalHint: hint
+      hint
     };
   }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
   const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_legacyComponent.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelectControl.default, {
     __next40pxDefaultSize: __next40pxDefaultSize,
     className: "components-font-size-picker__select",
     label: (0, _i18n.__)('Font size'),
@@ -67,7 +67,7 @@ const FontSizePickerSelect = props => {
     (0, _i18n.__)('Currently selected font size: %s'), selectedOption.name),
     options: options,
     value: selectedOption,
-    __experimentalShowSelectedHint: true,
+    showSelectedHint: true,
     onChange: ({
       selectedItem
     }) => {

package/build/font-size-picker/font-size-picker-select.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_legacyComponent","_interopRequireDefault","_unitControl","_utils","_jsxRuntime","DEFAULT_OPTION","key","name","__","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","__next40pxDefaultSize","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","getCommonSizeUnit","options","map","fontSize","hint","quantity","parseQuantityAndUnitFromRawValue","String","isSimpleCssValue","slug","__experimentalHint","selectedOption","find","option","jsx","default","className","label","hideLabelFromVision","describedBy","sprintf","__experimentalShowSelectedHint","selectedItem","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control-v2/legacy-component';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AAA8D,IAAAK,WAAA,GAAAL,OAAA;AAd9D;AACA;AACA;;AAGA;AACA;AACA;;AASA,MAAMM,cAA0C,GAAG;EAClDC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACrBC,KAAK,EAAEC;AACR,CAAC;AAED,MAAMC,aAAyC,GAAG;EACjDL,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE,IAAAC,QAAE,EAAE,QAAS;AACpB,CAAC;AAED,MAAMI,oBAAoB,GAAKC,KAAgC,IAAM;EAAA,IAAAC,aAAA;EACpE,MAAM;IACLC,qBAAqB;IACrBC,SAAS;IACTP,KAAK;IACLQ,sBAAsB;IACtBC,IAAI;IACJC,QAAQ;IACRC;EACD,CAAC,GAAGP,KAAK;EAET,MAAMQ,mBAAmB,GAAG,CAAC,CAAE,IAAAC,wBAAiB,EAAEN,SAAU,CAAC;EAE7D,MAAMO,OAAqC,GAAG,CAC7ClB,cAAc,EACd,GAAGW,SAAS,CAACQ,GAAG,CAAIC,QAAQ,IAAM;IACjC,IAAIC,IAAI;IACR,IAAKL,mBAAmB,EAAG;MAC1B,MAAM,CAAEM,QAAQ,CAAE,GAAG,IAAAC,6CAAgC,EACpDH,QAAQ,CAACP,IACV,CAAC;MACD,IAAKS,QAAQ,KAAKjB,SAAS,EAAG;QAC7BgB,IAAI,GAAGG,MAAM,CAAEF,QAAS,CAAC;MAC1B;IACD,CAAC,MAAM,IAAK,IAAAG,uBAAgB,EAAEL,QAAQ,CAACP,IAAK,CAAC,EAAG;MAC/CQ,IAAI,GAAGG,MAAM,CAAEJ,QAAQ,CAACP,IAAK,CAAC;IAC/B;IACA,OAAO;MACNZ,GAAG,EAAEmB,QAAQ,CAACM,IAAI;MAClBxB,IAAI,EAAEkB,QAAQ,CAAClB,IAAI,IAAIkB,QAAQ,CAACM,IAAI;MACpCtB,KAAK,EAAEgB,QAAQ,CAACP,IAAI;MACpBc,kBAAkB,EAAEN;IACrB,CAAC;EACF,CAAE,CAAC,EACH,IAAKT,sBAAsB,GAAG,EAAE,GAAG,CAAEN,aAAa,CAAE,CAAE,CACtD;EAED,MAAMsB,cAAc,GAAGxB,KAAK,IAAAK,aAAA,GACzBS,OAAO,CAACW,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAAC1B,KAAK,KAAKA,KAAM,CAAC,cAAAK,aAAA,cAAAA,aAAA,GAAIH,aAAa,GACrEN,cAAc;EAEjB,oBACC,IAAAD,WAAA,CAAAgC,GAAA,EAACpC,gBAAA,CAAAqC,OAAmB;IACnBtB,qBAAqB,EAAGA,qBAAuB;IAC/CuB,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG,IAAA/B,QAAE,EAAE,WAAY,CAAG;IAC3BgC,mBAAmB;IACnBC,WAAW,EAAG,IAAAC,aAAO;IACpB;IACA,IAAAlC,QAAE,EAAE,kCAAmC,CAAC,EACxCyB,cAAc,CAAC1B,IAChB,CAAG;IACHgB,OAAO,EAAGA,OAAS;IACnBd,KAAK,EAAGwB,cAAgB;IACxBU,8BAA8B;IAC9BxB,QAAQ,EAAGA,CAAE;MACZyB;IAGD,CAAC,KAAM;MACN,IAAKA,YAAY,KAAKjC,aAAa,EAAG;QACrCS,cAAc,CAAC,CAAC;MACjB,CAAC,MAAM;QACND,QAAQ,CAAEyB,YAAY,CAACnC,KAAM,CAAC;MAC/B;IACD,CAAG;IACHS,IAAI,EAAGA;EAAM,CACb,CAAC;AAEJ,CAAC;AAAC,IAAA2B,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAEazB,oBAAoB","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_customSelectControl","_interopRequireDefault","_unitControl","_utils","_jsxRuntime","DEFAULT_OPTION","key","name","__","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","__next40pxDefaultSize","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","getCommonSizeUnit","options","map","fontSize","hint","quantity","parseQuantityAndUnitFromRawValue","String","isSimpleCssValue","slug","selectedOption","find","option","jsx","default","className","label","hideLabelFromVision","describedBy","sprintf","showSelectedHint","selectedItem","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\thint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\tshowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/index.js

@@ -35,6 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 
 const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
+const MAX_TOGGLE_GROUP_SIZES = 5;
 const UnforwardedFontSizePicker = (props, ref) => {
   const {
     __next40pxDefaultSize = false,
@@ -51,26 +52,37 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const units = (0, _unitControl.useCustomUnits)({
     availableUnits: unitsProp
   });
-  const shouldUseSelectControl = fontSizes.length > 5;
   const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
   const isCustomValue = !!value && !selectedFontSize;
-  const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
+
+  // Initially request a custom picker if the value is not from the predef list.
+  const [userRequestedCustom, setUserRequestedCustom] = (0, _element.useState)(isCustomValue);
+  let currentPickerType;
+  if (!disableCustomFontSizes && userRequestedCustom) {
+    // While showing the custom value picker, switch back to predef only if
+    // `disableCustomFontSizes` is set to `true`.
+    currentPickerType = 'custom';
+  } else {
+    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';
+  }
   const headerHint = (0, _element.useMemo)(() => {
-    if (showCustomValueControl) {
-      return (0, _i18n.__)('Custom');
-    }
-    if (!shouldUseSelectControl) {
-      if (selectedFontSize) {
-        return selectedFontSize.name || _constants.T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
-      }
-      return '';
-    }
-    const commonUnit = (0, _utils.getCommonSizeUnit)(fontSizes);
-    if (commonUnit) {
-      return `(${commonUnit})`;
+    switch (currentPickerType) {
+      case 'custom':
+        return (0, _i18n.__)('Custom');
+      case 'togglegroup':
+        if (selectedFontSize) {
+          return selectedFontSize.name || _constants.T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
+        }
+        break;
+      case 'select':
+        const commonUnit = (0, _utils.getCommonSizeUnit)(fontSizes);
+        if (commonUnit) {
+          return `(${commonUnit})`;
+        }
+        break;
     }
     return '';
-  }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
+  }, [currentPickerType, selectedFontSize, fontSizes]);
   if (fontSizes.length === 0 && disableCustomFontSizes) {
     return null;
   }
@@ -98,17 +110,15 @@ const UnforwardedFontSizePicker = (props, ref) => {
             children: headerHint
           })]
         }), !disableCustomFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HeaderToggle, {
-          label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
+          label: currentPickerType === 'custom' ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
           icon: _icons.settings,
-          onClick: () => {
-            setShowCustomValueControl(!showCustomValueControl);
-          },
-          isPressed: showCustomValueControl,
+          onClick: () => setUserRequestedCustom(!userRequestedCustom),
+          isPressed: currentPickerType === 'custom',
           size: "small"
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [!!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerSelect.default, {
+      children: [currentPickerType === 'select' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerSelect.default, {
         __next40pxDefaultSize: __next40pxDefaultSize,
         fontSizes: fontSizes,
         value: value,
@@ -121,8 +131,8 @@ const UnforwardedFontSizePicker = (props, ref) => {
             onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
           }
         },
-        onSelectCustom: () => setShowCustomValueControl(true)
-      }), !shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerToggleGroup.default, {
+        onSelectCustom: () => setUserRequestedCustom(true)
+      }), currentPickerType === 'togglegroup' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerToggleGroup.default, {
         fontSizes: fontSizes,
         value: value,
         __next40pxDefaultSize: __next40pxDefaultSize,
@@ -134,7 +144,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
             onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
           }
         }
-      }), !disableCustomFontSizes && showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
+      }), currentPickerType === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
         className: "components-font-size-picker__custom-size-control",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
           isBlock: true,
@@ -145,6 +155,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
             hideLabelFromVision: true,
             value: value,
             onChange: newValue => {
+              setUserRequestedCustom(true);
               if (newValue === undefined) {
                 onChange?.(undefined);
               } else {
@@ -170,6 +181,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
               initialPosition: fallbackFontSize,
               withInputField: false,
               onChange: newValue => {
+                setUserRequestedCustom(true);
                 if (newValue === undefined) {
                   onChange?.(undefined);
                 } else if (hasUnits) {

package/build/font-size-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_icons","_element","_button","_rangeControl","_interopRequireDefault","_flex","_unitControl","_interopRequireWildcard","_visuallyHidden","_utils","_styles","_spacer","_fontSizePickerSelect","_fontSizePickerToggleGroup","_constants","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_UNITS","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","useCustomUnits","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","useState","headerHint","useMemo","__","name","T_SHIRT_NAMES","indexOf","commonUnit","getCommonSizeUnit","hasUnits","valueQuantity","valueUnit","parseQuantityAndUnitFromRawValue","isValueUnitRelative","includes","isDisabled","undefined","jsxs","Container","className","children","jsx","VisuallyHidden","as","Spacer","Header","HeaderLabel","HeaderHint","HeaderToggle","label","icon","settings","onClick","isPressed","newValue","Number","onSelectCustom","Flex","FlexItem","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","initialPosition","withInputField","max","step","Button","disabled","accessibleWhenDisabled","variant","FontSizePicker","exports","forwardRef","_default"],"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 { __ } 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} 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 DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\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 = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\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', 'vw', 'vh' ].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<div>\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__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__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\taccessibleWhenDisabled\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</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_icons","_element","_button","_rangeControl","_interopRequireDefault","_flex","_unitControl","_interopRequireWildcard","_visuallyHidden","_utils","_styles","_spacer","_fontSizePickerSelect","_fontSizePickerToggleGroup","_constants","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","useCustomUnits","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","useState","currentPickerType","length","headerHint","useMemo","__","name","T_SHIRT_NAMES","indexOf","commonUnit","getCommonSizeUnit","hasUnits","valueQuantity","valueUnit","parseQuantityAndUnitFromRawValue","isValueUnitRelative","includes","isDisabled","undefined","jsxs","Container","className","children","jsx","VisuallyHidden","as","Spacer","Header","HeaderLabel","HeaderHint","HeaderToggle","label","icon","settings","onClick","isPressed","newValue","Number","onSelectCustom","Flex","FlexItem","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","initialPosition","withInputField","max","step","Button","disabled","accessibleWhenDisabled","variant","FontSizePicker","exports","forwardRef","_default"],"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 { __ } 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} 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 DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\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 = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\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', 'vw', 'vh' ].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\tcurrentPickerType === 'custom'\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\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\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<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\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\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\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__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{ currentPickerType === 'custom' && (\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\tsetUserRequestedCustom( true );\n\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__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\tsetUserRequestedCustom( true );\n\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\taccessibleWhenDisabled\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</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/font-size-picker/types.ts"],"sourcesContent":["export type FontSizePickerProps = {\n\t/**\n\t * If `true`, it will not be possible to choose a custom fontSize. The user\n\t * will be forced to pick one of the pre-defined sizes passed in fontSizes.\n\t *\n\t * @default false\n\t */\n\tdisableCustomFontSizes?: boolean;\n\t/**\n\t * If no value exists, this prop defines the starting position for the font\n\t * size picker slider. Only relevant if `withSlider` is `true`.\n\t */\n\tfallbackFontSize?: number;\n\t/**\n\t * An array of font size objects. The object should contain properties size,\n\t * name, and slug.\n\t */\n\tfontSizes?: FontSize[];\n\t/**\n\t * A function that receives the new font size value.\n\t * If onChange is called without any parameter, it should reset the value,\n\t * attending to what reset means in that context, e.g., set the font size to\n\t * undefined or set the font size a starting value.\n\t */\n\tonChange?: (\n\t\tvalue: number | string | undefined,\n\t\tselectedItem?: FontSize\n\t) => void;\n\t/**\n\t * Available units for custom font size selection.\n\t *\n\t * @default `[ 'px', 'em', 'rem' ]`\n\t */\n\tunits?: string[];\n\t/**\n\t * The current font size value.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * If `true`, the UI will contain a slider, instead of a numeric text input\n\t * field. If `false`, no slider will be present.\n\t *\n\t * @default false\n\t */\n\twithSlider?: boolean;\n\t/**\n\t * If `true`, a reset button will be displayed alongside the input field\n\t * when a custom font size is active. Has no effect when\n\t * `disableCustomFontSizes` or `withSlider` is `true`.\n\t *\n\t * @default true\n\t */\n\twithReset?: boolean;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n};\n\nexport type FontSize = {\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n};\n\nexport type FontSizePickerSelectProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tdisableCustomFontSizes: NonNullable<\n\t\tFontSizePickerProps[ 'disableCustomFontSizes' ]\n\t>;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n\tonSelectCustom: () => void;\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type FontSizePickerSelectOption = {\n\tkey: string;\n\tname: string;\n\tvalue?: FontSize[ 'size' ];\n\t__experimentalHint?: string;\n};\n\nexport type FontSizePickerToggleGroupProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size' | '__next40pxDefaultSize'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/font-size-picker/types.ts"],"sourcesContent":["export type FontSizePickerProps = {\n\t/**\n\t * If `true`, it will not be possible to choose a custom fontSize. The user\n\t * will be forced to pick one of the pre-defined sizes passed in fontSizes.\n\t *\n\t * @default false\n\t */\n\tdisableCustomFontSizes?: boolean;\n\t/**\n\t * If no value exists, this prop defines the starting position for the font\n\t * size picker slider. Only relevant if `withSlider` is `true`.\n\t */\n\tfallbackFontSize?: number;\n\t/**\n\t * An array of font size objects. The object should contain properties size,\n\t * name, and slug.\n\t */\n\tfontSizes?: FontSize[];\n\t/**\n\t * A function that receives the new font size value.\n\t * If onChange is called without any parameter, it should reset the value,\n\t * attending to what reset means in that context, e.g., set the font size to\n\t * undefined or set the font size a starting value.\n\t */\n\tonChange?: (\n\t\tvalue: number | string | undefined,\n\t\tselectedItem?: FontSize\n\t) => void;\n\t/**\n\t * Available units for custom font size selection.\n\t *\n\t * @default [ 'px', 'em', 'rem', 'vw', 'vh' ]\n\t */\n\tunits?: string[];\n\t/**\n\t * The current font size value.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * If `true`, a slider will be displayed alongside the input field when a\n\t * custom font size is active. Has no effect when `disableCustomFontSizes`\n\t * is `true`.\n\t *\n\t * @default false\n\t */\n\twithSlider?: boolean;\n\t/**\n\t * If `true`, a reset button will be displayed alongside the input field\n\t * when a custom font size is active. Has no effect when\n\t * `disableCustomFontSizes` is `true`.\n\t *\n\t * @default true\n\t */\n\twithReset?: boolean;\n\t/**\n\t * Start opting into the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMarginBottom?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | '__unstable-large';\n};\n\nexport type FontSize = {\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n};\n\nexport type FontSizePickerSelectProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tdisableCustomFontSizes: NonNullable<\n\t\tFontSizePickerProps[ 'disableCustomFontSizes' ]\n\t>;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n\tonSelectCustom: () => void;\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type FontSizePickerSelectOption = {\n\tkey: string;\n\tname: string;\n\tvalue?: FontSize[ 'size' ];\n\thint?: string;\n};\n\nexport type FontSizePickerToggleGroupProps = Pick<\n\tFontSizePickerProps,\n\t'value' | 'size' | '__next40pxDefaultSize'\n> & {\n\tfontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;\n\tonChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;\n};\n"],"mappings":"","ignoreList":[]}

package/build/form-token-field/index.js

@@ -12,6 +12,7 @@ var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
 var _a11y = require("@wordpress/a11y");
 var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _token = _interopRequireDefault(require("./token"));
 var _tokenInput = _interopRequireDefault(require("./token-input"));
 var _styles = require("./styles");
@@ -80,6 +81,13 @@ function FormTokenField(props) {
     __nextHasNoMarginBottom = false,
     tokenizeOnBlur = false
   } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
+  if (!__nextHasNoMarginBottom) {
+    (0, _deprecated.default)('Bottom margin styles for wp.components.FormTokenField', {
+      since: '6.7',
+      version: '7.0',
+      hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
+    });
+  }
   const instanceId = (0, _compose.useInstanceId)(FormTokenField);
 
   // We reset to these initial values again in the onBlur