@wordpress/components 25.16.0 → 26.0.0

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

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

package/build-module/external-link/index.js

@@ -37,7 +37,7 @@ function UnforwardedExternalLink(props, ref) {
       props.onClick(event);
     }
   };
-  return (/* eslint-disable react/jsx-no-target-blank */
+  return /* eslint-disable react/jsx-no-target-blank */(
     createElement("a", {
       ...additionalProps,
       className: classes,

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

@@ -208,8 +208,8 @@ export function FocalPointPicker({
     onChange?.(getFinalValue(value));
   };
   const focalPointPosition = {
-    left: x * bounds.width,
-    top: y * bounds.height
+    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
+    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height
   };
   const classes = classnames('components-focal-point-picker-control', className);
   const instanceId = useInstanceId(FocalPointPicker);

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","createElement","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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 ) return;\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 ) return;\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 ) return;\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 ) return;\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 ) return;\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\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 * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\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 ) endDrag();\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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"}
+{"version":3,"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","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","instanceId","id","timeout","window","setTimeout","clearTimeout","createElement","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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 ) return;\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 ) return;\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 ) return;\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 ) return;\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 ) return;\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\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 = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\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 ) endDrag();\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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"}

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

@@ -92,7 +92,6 @@ function FocalPointPicker(props) {
       }); // Set cursor to tap location.
       pan.extractOffset(); // Set offset to current value.
     },
-
     // Move cursor to match delta drag.
     onPanResponderMove: Animated.event([null, {
       dx: pan.x,

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

@@ -1 +1 @@
-{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","createElement","style","container","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","key","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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"}
+{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","createElement","style","container","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","key","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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"}