@wordpress/components 27.4.0 → 27.5.0

package/build-module/input-control/styles/input-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","Flex","FlexItem","Text","baseLabelTypography","COLORS","CONFIG","rtl","space","Prefix","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Suffix","backdropBorderColor","disabled","isBorderless","ui","borderDisabled","border","BackdropUI","paddingLeft","Root","borderFocus","controlBoxShadowFocus","containerDisabledStyles","backgroundColor","backgroundDisabled","background","_ref","containerWidthStyles","__unstableInputWidth","labelPosition","flex","width","Container","disabledStyles","color","textDisabled","fontSizeStyles","inputSize","size","sizes","default","small","compact","fontSize","fontSizeMobile","getSizeConfig","__next40pxDefaultSize","height","lineHeight","minHeight","paddingRight","sizeStyles","props","customPaddings","paddingInlineStart","paddingInlineEnd","dragStyles","isDragging","dragCursor","defaultArrowStyles","activeDragCursorStyles","Input","theme","foreground","BaseLabel","Label","createElement","as","LabelWrapper"],"sources":["@wordpress/components/src/input-control/styles/input-control-styles.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { Flex, FlexItem } from '../../flex';\nimport { Text } from '../../text';\nimport { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';\nimport type { LabelPosition, Size } from '../types';\nimport { space } from '../../utils/space';\n\ntype ContainerProps = {\n\tdisabled?: boolean;\n\thideLabel?: boolean;\n\t__unstableInputWidth?: CSSProperties[ 'width' ];\n\tlabelPosition?: LabelPosition;\n};\n\nexport const Prefix = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n`;\n\nexport const Suffix = styled.span`\n\talign-items: center;\n\talign-self: stretch;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n`;\n\ntype BackdropProps = {\n\tdisabled?: boolean;\n\tisBorderless?: boolean;\n};\n\nconst backdropBorderColor = ( {\n\tdisabled,\n\tisBorderless,\n}: BackdropProps ): CSSProperties[ 'borderColor' ] => {\n\tif ( isBorderless ) {\n\t\treturn 'transparent';\n\t}\n\n\tif ( disabled ) {\n\t\treturn COLORS.ui.borderDisabled;\n\t}\n\n\treturn COLORS.ui.border;\n};\n\nexport const BackdropUI = styled.div< BackdropProps >`\n\t&&& {\n\t\tbox-sizing: border-box;\n\t\tborder-color: ${ backdropBorderColor };\n\t\tborder-radius: inherit;\n\t\tborder-style: solid;\n\t\tborder-width: 1px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\n\t\t${ rtl( { paddingLeft: 2 } ) }\n\t}\n`;\n\nexport const Root = styled( Flex )`\n\tbox-sizing: border-box;\n\tposition: relative;\n\tborder-radius: 2px;\n\tpadding-top: 0;\n\n\t// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.\n\t&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {\n\t\tz-index: 1;\n\n\t\t${ BackdropUI } {\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\t\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\t\t\toutline: 2px solid transparent;\n\t\t\toutline-offset: -2px;\n\t\t}\n\t}\n`;\n\nconst containerDisabledStyles = ( { disabled }: ContainerProps ) => {\n\tconst backgroundColor = disabled\n\t\t? COLORS.ui.backgroundDisabled\n\t\t: COLORS.ui.background;\n\n\treturn css( { backgroundColor } );\n};\n\nconst containerWidthStyles = ( {\n\t__unstableInputWidth,\n\tlabelPosition,\n}: ContainerProps ) => {\n\tif ( ! __unstableInputWidth ) return css( { width: '100%' } );\n\n\tif ( labelPosition === 'side' ) return '';\n\n\tif ( labelPosition === 'edge' ) {\n\t\treturn css( {\n\t\t\tflex: `0 0 ${ __unstableInputWidth }`,\n\t\t} );\n\t}\n\n\treturn css( { width: __unstableInputWidth } );\n};\n\nexport const Container = styled.div< ContainerProps >`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tborder-radius: inherit;\n\tdisplay: flex;\n\tflex: 1;\n\tposition: relative;\n\n\t${ containerDisabledStyles }\n\t${ containerWidthStyles }\n`;\n\ntype InputProps = {\n\t__next40pxDefaultSize?: boolean;\n\tdisabled?: boolean;\n\tinputSize?: Size;\n\tisDragging?: boolean;\n\tdragCursor?: CSSProperties[ 'cursor' ];\n\tpaddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];\n\tpaddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];\n};\n\nconst disabledStyles = ( { disabled }: InputProps ) => {\n\tif ( ! disabled ) return '';\n\n\treturn css( {\n\t\tcolor: COLORS.ui.textDisabled,\n\t} );\n};\n\nexport const fontSizeStyles = ( { inputSize: size }: InputProps ) => {\n\tconst sizes = {\n\t\tdefault: '13px',\n\t\tsmall: '11px',\n\t\tcompact: '13px',\n\t\t'__unstable-large': '13px',\n\t};\n\n\tconst fontSize = sizes[ size as Size ] || sizes.default;\n\tconst fontSizeMobile = '16px';\n\n\tif ( ! fontSize ) return '';\n\n\treturn css`\n\t\tfont-size: ${ fontSizeMobile };\n\n\t\t@media ( min-width: 600px ) {\n\t\t\tfont-size: ${ fontSize };\n\t\t}\n\t`;\n};\n\nexport const getSizeConfig = ( {\n\tinputSize: size,\n\t__next40pxDefaultSize,\n}: InputProps ) => {\n\t// Paddings may be overridden by the custom paddings props.\n\tconst sizes = {\n\t\tdefault: {\n\t\t\theight: 40,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 40,\n\t\t\tpaddingLeft: space( 4 ),\n\t\t\tpaddingRight: space( 4 ),\n\t\t},\n\t\tsmall: {\n\t\t\theight: 24,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 24,\n\t\t\tpaddingLeft: space( 2 ),\n\t\t\tpaddingRight: space( 2 ),\n\t\t},\n\t\tcompact: {\n\t\t\theight: 32,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 32,\n\t\t\tpaddingLeft: space( 2 ),\n\t\t\tpaddingRight: space( 2 ),\n\t\t},\n\t\t'__unstable-large': {\n\t\t\theight: 40,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 40,\n\t\t\tpaddingLeft: space( 4 ),\n\t\t\tpaddingRight: space( 4 ),\n\t\t},\n\t};\n\n\tif ( ! __next40pxDefaultSize ) {\n\t\tsizes.default = sizes.compact;\n\t}\n\n\treturn sizes[ size as Size ] || sizes.default;\n};\n\nconst sizeStyles = ( props: InputProps ) => {\n\treturn css( getSizeConfig( props ) );\n};\n\nconst customPaddings = ( {\n\tpaddingInlineStart,\n\tpaddingInlineEnd,\n}: InputProps ) => {\n\treturn css( { paddingInlineStart, paddingInlineEnd } );\n};\n\nconst dragStyles = ( { isDragging, dragCursor }: InputProps ) => {\n\tlet defaultArrowStyles: SerializedStyles | undefined;\n\tlet activeDragCursorStyles: SerializedStyles | undefined;\n\n\tif ( isDragging ) {\n\t\tdefaultArrowStyles = css`\n\t\t\tcursor: ${ dragCursor };\n\t\t\tuser-select: none;\n\n\t\t\t&::-webkit-outer-spin-button,\n\t\t\t&::-webkit-inner-spin-button {\n\t\t\t\t-webkit-appearance: none !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t}\n\t\t`;\n\t}\n\n\tif ( isDragging && dragCursor ) {\n\t\tactiveDragCursorStyles = css`\n\t\t\t&:active {\n\t\t\t\tcursor: ${ dragCursor };\n\t\t\t}\n\t\t`;\n\t}\n\n\treturn css`\n\t\t${ defaultArrowStyles }\n\t\t${ activeDragCursorStyles }\n\t`;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const Input = styled.input< InputProps >`\n\t&&& {\n\t\tbackground-color: transparent;\n\t\tbox-sizing: border-box;\n\t\tborder: none;\n\t\tbox-shadow: none !important;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\tmargin: 0;\n\t\toutline: none;\n\t\twidth: 100%;\n\n\t\t${ dragStyles }\n\t\t${ disabledStyles }\n\t\t${ fontSizeStyles }\n\t\t${ sizeStyles }\n\t\t${ customPaddings }\n\n\t\t&::-webkit-input-placeholder {\n\t\t\tline-height: normal;\n\t\t}\n\t}\n`;\n\nconst BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`\n\t&&& {\n\t\t${ baseLabelTypography };\n\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t\tmax-width: 100%;\n\t\tz-index: 1;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n`;\n\nexport const Label = (\n\tprops: WordPressComponentProps<\n\t\t{ labelPosition?: LabelPosition; children: ReactNode },\n\t\t'label',\n\t\tfalse\n\t>\n) => <BaseLabel { ...props } as=\"label\" />;\n\nexport const LabelWrapper = styled( FlexItem )`\n\tmax-width: calc( 100% - 10px );\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","Flex","FlexItem","Text","baseLabelTypography","COLORS","CONFIG","rtl","space","Prefix","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Suffix","backdropBorderColor","disabled","isBorderless","ui","borderDisabled","border","BackdropUI","paddingLeft","Root","borderFocus","controlBoxShadowFocus","containerDisabledStyles","backgroundColor","backgroundDisabled","background","_ref","containerWidthStyles","__unstableInputWidth","labelPosition","flex","width","Container","disabledStyles","color","textDisabled","fontSizeStyles","inputSize","size","sizes","default","small","compact","fontSize","fontSizeMobile","getSizeConfig","__next40pxDefaultSize","height","lineHeight","minHeight","paddingRight","sizeStyles","props","customPaddings","paddingInlineStart","paddingInlineEnd","dragStyles","isDragging","dragCursor","defaultArrowStyles","activeDragCursorStyles","Input","theme","foreground","BaseLabel","Label","createElement","as","LabelWrapper"],"sources":["@wordpress/components/src/input-control/styles/input-control-styles.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { Flex, FlexItem } from '../../flex';\nimport { Text } from '../../text';\nimport { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';\nimport type { LabelPosition, Size } from '../types';\nimport { space } from '../../utils/space';\n\ntype ContainerProps = {\n\tdisabled?: boolean;\n\thideLabel?: boolean;\n\t__unstableInputWidth?: CSSProperties[ 'width' ];\n\tlabelPosition?: LabelPosition;\n};\n\nexport const Prefix = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n`;\n\nexport const Suffix = styled.span`\n\talign-items: center;\n\talign-self: stretch;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n`;\n\ntype BackdropProps = {\n\tdisabled?: boolean;\n\tisBorderless?: boolean;\n};\n\nconst backdropBorderColor = ( {\n\tdisabled,\n\tisBorderless,\n}: BackdropProps ): CSSProperties[ 'borderColor' ] => {\n\tif ( isBorderless ) {\n\t\treturn 'transparent';\n\t}\n\n\tif ( disabled ) {\n\t\treturn COLORS.ui.borderDisabled;\n\t}\n\n\treturn COLORS.ui.border;\n};\n\nexport const BackdropUI = styled.div< BackdropProps >`\n\t&&& {\n\t\tbox-sizing: border-box;\n\t\tborder-color: ${ backdropBorderColor };\n\t\tborder-radius: inherit;\n\t\tborder-style: solid;\n\t\tborder-width: 1px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\n\t\t${ rtl( { paddingLeft: 2 } ) }\n\t}\n`;\n\nexport const Root = styled( Flex )`\n\tbox-sizing: border-box;\n\tposition: relative;\n\tborder-radius: 2px;\n\tpadding-top: 0;\n\n\t// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.\n\t&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {\n\t\tz-index: 1;\n\n\t\t${ BackdropUI } {\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\t\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\t\t\toutline: 2px solid transparent;\n\t\t\toutline-offset: -2px;\n\t\t}\n\t}\n`;\n\nconst containerDisabledStyles = ( { disabled }: ContainerProps ) => {\n\tconst backgroundColor = disabled\n\t\t? COLORS.ui.backgroundDisabled\n\t\t: COLORS.ui.background;\n\n\treturn css( { backgroundColor } );\n};\n\nconst containerWidthStyles = ( {\n\t__unstableInputWidth,\n\tlabelPosition,\n}: ContainerProps ) => {\n\tif ( ! __unstableInputWidth ) {\n\t\treturn css( { width: '100%' } );\n\t}\n\n\tif ( labelPosition === 'side' ) {\n\t\treturn '';\n\t}\n\n\tif ( labelPosition === 'edge' ) {\n\t\treturn css( {\n\t\t\tflex: `0 0 ${ __unstableInputWidth }`,\n\t\t} );\n\t}\n\n\treturn css( { width: __unstableInputWidth } );\n};\n\nexport const Container = styled.div< ContainerProps >`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tborder-radius: inherit;\n\tdisplay: flex;\n\tflex: 1;\n\tposition: relative;\n\n\t${ containerDisabledStyles }\n\t${ containerWidthStyles }\n`;\n\ntype InputProps = {\n\t__next40pxDefaultSize?: boolean;\n\tdisabled?: boolean;\n\tinputSize?: Size;\n\tisDragging?: boolean;\n\tdragCursor?: CSSProperties[ 'cursor' ];\n\tpaddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];\n\tpaddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];\n};\n\nconst disabledStyles = ( { disabled }: InputProps ) => {\n\tif ( ! disabled ) {\n\t\treturn '';\n\t}\n\n\treturn css( {\n\t\tcolor: COLORS.ui.textDisabled,\n\t} );\n};\n\nexport const fontSizeStyles = ( { inputSize: size }: InputProps ) => {\n\tconst sizes = {\n\t\tdefault: '13px',\n\t\tsmall: '11px',\n\t\tcompact: '13px',\n\t\t'__unstable-large': '13px',\n\t};\n\n\tconst fontSize = sizes[ size as Size ] || sizes.default;\n\tconst fontSizeMobile = '16px';\n\n\tif ( ! fontSize ) {\n\t\treturn '';\n\t}\n\n\treturn css`\n\t\tfont-size: ${ fontSizeMobile };\n\n\t\t@media ( min-width: 600px ) {\n\t\t\tfont-size: ${ fontSize };\n\t\t}\n\t`;\n};\n\nexport const getSizeConfig = ( {\n\tinputSize: size,\n\t__next40pxDefaultSize,\n}: InputProps ) => {\n\t// Paddings may be overridden by the custom paddings props.\n\tconst sizes = {\n\t\tdefault: {\n\t\t\theight: 40,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 40,\n\t\t\tpaddingLeft: space( 4 ),\n\t\t\tpaddingRight: space( 4 ),\n\t\t},\n\t\tsmall: {\n\t\t\theight: 24,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 24,\n\t\t\tpaddingLeft: space( 2 ),\n\t\t\tpaddingRight: space( 2 ),\n\t\t},\n\t\tcompact: {\n\t\t\theight: 32,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 32,\n\t\t\tpaddingLeft: space( 2 ),\n\t\t\tpaddingRight: space( 2 ),\n\t\t},\n\t\t'__unstable-large': {\n\t\t\theight: 40,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 40,\n\t\t\tpaddingLeft: space( 4 ),\n\t\t\tpaddingRight: space( 4 ),\n\t\t},\n\t};\n\n\tif ( ! __next40pxDefaultSize ) {\n\t\tsizes.default = sizes.compact;\n\t}\n\n\treturn sizes[ size as Size ] || sizes.default;\n};\n\nconst sizeStyles = ( props: InputProps ) => {\n\treturn css( getSizeConfig( props ) );\n};\n\nconst customPaddings = ( {\n\tpaddingInlineStart,\n\tpaddingInlineEnd,\n}: InputProps ) => {\n\treturn css( { paddingInlineStart, paddingInlineEnd } );\n};\n\nconst dragStyles = ( { isDragging, dragCursor }: InputProps ) => {\n\tlet defaultArrowStyles: SerializedStyles | undefined;\n\tlet activeDragCursorStyles: SerializedStyles | undefined;\n\n\tif ( isDragging ) {\n\t\tdefaultArrowStyles = css`\n\t\t\tcursor: ${ dragCursor };\n\t\t\tuser-select: none;\n\n\t\t\t&::-webkit-outer-spin-button,\n\t\t\t&::-webkit-inner-spin-button {\n\t\t\t\t-webkit-appearance: none !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t}\n\t\t`;\n\t}\n\n\tif ( isDragging && dragCursor ) {\n\t\tactiveDragCursorStyles = css`\n\t\t\t&:active {\n\t\t\t\tcursor: ${ dragCursor };\n\t\t\t}\n\t\t`;\n\t}\n\n\treturn css`\n\t\t${ defaultArrowStyles }\n\t\t${ activeDragCursorStyles }\n\t`;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const Input = styled.input< InputProps >`\n\t&&& {\n\t\tbackground-color: transparent;\n\t\tbox-sizing: border-box;\n\t\tborder: none;\n\t\tbox-shadow: none !important;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\tmargin: 0;\n\t\toutline: none;\n\t\twidth: 100%;\n\n\t\t${ dragStyles }\n\t\t${ disabledStyles }\n\t\t${ fontSizeStyles }\n\t\t${ sizeStyles }\n\t\t${ customPaddings }\n\n\t\t&::-webkit-input-placeholder {\n\t\t\tline-height: normal;\n\t\t}\n\t}\n`;\n\nconst BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`\n\t&&& {\n\t\t${ baseLabelTypography };\n\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t\tmax-width: 100%;\n\t\tz-index: 1;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n`;\n\nexport const Label = (\n\tprops: WordPressComponentProps<\n\t\t{ labelPosition?: LabelPosition; children: ReactNode },\n\t\t'label',\n\t\tfalse\n\t>\n) => <BaseLabel { ...props } as=\"label\" />;\n\nexport const LabelWrapper = styled( FlexItem )`\n\tmax-width: calc( 100% - 10px );\n`;\n"],"mappings":"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","ignoreList":[]}

package/build-module/input-control/utils.js

@@ -65,10 +65,14 @@ export function useDraft(props) {
       current: previousValue
     } = refPreviousValue;
     refPreviousValue.current = props.value;
-    if (draft.value !== undefined && !draft.isStale) setDraft({
-      ...draft,
-      isStale: true
-    });else if (draft.isStale && props.value !== previousValue) setDraft({});
+    if (draft.value !== undefined && !draft.isStale) {
+      setDraft({
+        ...draft,
+        isStale: true
+      });
+    } else if (draft.isStale && props.value !== previousValue) {
+      setDraft({});
+    }
   }, [props.value, draft]);
   const onChange = (nextValue, extra) => {
     // Mutates the draft value to avoid an extra effect run.

package/build-module/input-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useLayoutEffect","useRef","useState","getDragCursor","dragDirection","dragCursor","useDragCursor","isDragging","document","documentElement","style","cursor","useDraft","props","refPreviousValue","value","draft","setDraft","undefined","current","previousValue","isStale","onChange","nextValue","extra","Object","assign","onBlur","event"],"sources":["@wordpress/components/src/input-control/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { InputChangeCallback } from './types';\n\n/**\n * Gets a CSS cursor value based on a drag direction.\n *\n * @param dragDirection The drag direction.\n * @return  The CSS cursor value.\n */\nexport function getDragCursor( dragDirection: string ): string {\n\tlet dragCursor = 'ns-resize';\n\n\tswitch ( dragDirection ) {\n\t\tcase 'n':\n\t\tcase 's':\n\t\t\tdragCursor = 'ns-resize';\n\t\t\tbreak;\n\n\t\tcase 'e':\n\t\tcase 'w':\n\t\t\tdragCursor = 'ew-resize';\n\t\t\tbreak;\n\t}\n\n\treturn dragCursor;\n}\n\n/**\n * Custom hook that renders a drag cursor when dragging.\n *\n * @param {boolean} isDragging    The dragging state.\n * @param {string}  dragDirection The drag direction.\n *\n * @return {string} The CSS cursor value.\n */\nexport function useDragCursor(\n\tisDragging: boolean,\n\tdragDirection: string\n): string {\n\tconst dragCursor = getDragCursor( dragDirection );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tdocument.documentElement.style.cursor = dragCursor;\n\t\t} else {\n\t\t\t// @ts-expect-error\n\t\t\tdocument.documentElement.style.cursor = null;\n\t\t}\n\t}, [ isDragging, dragCursor ] );\n\n\treturn dragCursor;\n}\n\nexport function useDraft( props: {\n\tvalue: string | undefined;\n\tonBlur?: FocusEventHandler;\n\tonChange: InputChangeCallback;\n} ) {\n\tconst refPreviousValue = useRef( props.value );\n\tconst [ draft, setDraft ] = useState< {\n\t\tvalue?: string;\n\t\tisStale?: boolean;\n\t} >( {} );\n\tconst value = draft.value !== undefined ? draft.value : props.value;\n\n\t// Determines when to discard the draft value to restore controlled status.\n\t// To do so, it tracks the previous value and marks the draft value as stale\n\t// after each render.\n\tuseLayoutEffect( () => {\n\t\tconst { current: previousValue } = refPreviousValue;\n\t\trefPreviousValue.current = props.value;\n\t\tif ( draft.value !== undefined && ! draft.isStale )\n\t\t\tsetDraft( { ...draft, isStale: true } );\n\t\telse if ( draft.isStale && props.value !== previousValue )\n\t\t\tsetDraft( {} );\n\t}, [ props.value, draft ] );\n\n\tconst onChange: InputChangeCallback = ( nextValue, extra ) => {\n\t\t// Mutates the draft value to avoid an extra effect run.\n\t\tsetDraft( ( current ) =>\n\t\t\tObject.assign( current, { value: nextValue, isStale: false } )\n\t\t);\n\t\tprops.onChange( nextValue, extra );\n\t};\n\tconst onBlur: FocusEventHandler = ( event ) => {\n\t\tsetDraft( {} );\n\t\tprops.onBlur?.( event );\n\t};\n\n\treturn { value, onBlur, onChange };\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,SAAS,EACTC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACF,oBAAoB;;AAE3B;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAEC,aAAqB,EAAW;EAC9D,IAAIC,UAAU,GAAG,WAAW;EAE5B,QAASD,aAAa;IACrB,KAAK,GAAG;IACR,KAAK,GAAG;MACPC,UAAU,GAAG,WAAW;MACxB;IAED,KAAK,GAAG;IACR,KAAK,GAAG;MACPA,UAAU,GAAG,WAAW;MACxB;EACF;EAEA,OAAOA,UAAU;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAC5BC,UAAmB,EACnBH,aAAqB,EACZ;EACT,MAAMC,UAAU,GAAGF,aAAa,CAAEC,aAAc,CAAC;EAEjDL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjBC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,MAAM,GAAGN,UAAU;IACnD,CAAC,MAAM;MACN;MACAG,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,MAAM,GAAG,IAAI;IAC7C;EACD,CAAC,EAAE,CAAEJ,UAAU,EAAEF,UAAU,CAAG,CAAC;EAE/B,OAAOA,UAAU;AAClB;AAEA,OAAO,SAASO,QAAQA,CAAEC,KAIzB,EAAG;EACH,MAAMC,gBAAgB,GAAGb,MAAM,CAAEY,KAAK,CAACE,KAAM,CAAC;EAC9C,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAGf,QAAQ,CAG/B,CAAC,CAAE,CAAC;EACT,MAAMa,KAAK,GAAGC,KAAK,CAACD,KAAK,KAAKG,SAAS,GAAGF,KAAK,CAACD,KAAK,GAAGF,KAAK,CAACE,KAAK;;EAEnE;EACA;EACA;EACAf,eAAe,CAAE,MAAM;IACtB,MAAM;MAAEmB,OAAO,EAAEC;IAAc,CAAC,GAAGN,gBAAgB;IACnDA,gBAAgB,CAACK,OAAO,GAAGN,KAAK,CAACE,KAAK;IACtC,IAAKC,KAAK,CAACD,KAAK,KAAKG,SAAS,IAAI,CAAEF,KAAK,CAACK,OAAO,EAChDJ,QAAQ,CAAE;MAAE,GAAGD,KAAK;MAAEK,OAAO,EAAE;IAAK,CAAE,CAAC,CAAC,KACpC,IAAKL,KAAK,CAACK,OAAO,IAAIR,KAAK,CAACE,KAAK,KAAKK,aAAa,EACvDH,QAAQ,CAAE,CAAC,CAAE,CAAC;EAChB,CAAC,EAAE,CAAEJ,KAAK,CAACE,KAAK,EAAEC,KAAK,CAAG,CAAC;EAE3B,MAAMM,QAA6B,GAAGA,CAAEC,SAAS,EAAEC,KAAK,KAAM;IAC7D;IACAP,QAAQ,CAAIE,OAAO,IAClBM,MAAM,CAACC,MAAM,CAAEP,OAAO,EAAE;MAAEJ,KAAK,EAAEQ,SAAS;MAAEF,OAAO,EAAE;IAAM,CAAE,CAC9D,CAAC;IACDR,KAAK,CAACS,QAAQ,CAAEC,SAAS,EAAEC,KAAM,CAAC;EACnC,CAAC;EACD,MAAMG,MAAyB,GAAKC,KAAK,IAAM;IAC9CX,QAAQ,CAAE,CAAC,CAAE,CAAC;IACdJ,KAAK,CAACc,MAAM,GAAIC,KAAM,CAAC;EACxB,CAAC;EAED,OAAO;IAAEb,KAAK;IAAEY,MAAM;IAAEL;EAAS,CAAC;AACnC","ignoreList":[]}
+{"version":3,"names":["useEffect","useLayoutEffect","useRef","useState","getDragCursor","dragDirection","dragCursor","useDragCursor","isDragging","document","documentElement","style","cursor","useDraft","props","refPreviousValue","value","draft","setDraft","undefined","current","previousValue","isStale","onChange","nextValue","extra","Object","assign","onBlur","event"],"sources":["@wordpress/components/src/input-control/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { InputChangeCallback } from './types';\n\n/**\n * Gets a CSS cursor value based on a drag direction.\n *\n * @param dragDirection The drag direction.\n * @return  The CSS cursor value.\n */\nexport function getDragCursor( dragDirection: string ): string {\n\tlet dragCursor = 'ns-resize';\n\n\tswitch ( dragDirection ) {\n\t\tcase 'n':\n\t\tcase 's':\n\t\t\tdragCursor = 'ns-resize';\n\t\t\tbreak;\n\n\t\tcase 'e':\n\t\tcase 'w':\n\t\t\tdragCursor = 'ew-resize';\n\t\t\tbreak;\n\t}\n\n\treturn dragCursor;\n}\n\n/**\n * Custom hook that renders a drag cursor when dragging.\n *\n * @param {boolean} isDragging    The dragging state.\n * @param {string}  dragDirection The drag direction.\n *\n * @return {string} The CSS cursor value.\n */\nexport function useDragCursor(\n\tisDragging: boolean,\n\tdragDirection: string\n): string {\n\tconst dragCursor = getDragCursor( dragDirection );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tdocument.documentElement.style.cursor = dragCursor;\n\t\t} else {\n\t\t\t// @ts-expect-error\n\t\t\tdocument.documentElement.style.cursor = null;\n\t\t}\n\t}, [ isDragging, dragCursor ] );\n\n\treturn dragCursor;\n}\n\nexport function useDraft( props: {\n\tvalue: string | undefined;\n\tonBlur?: FocusEventHandler;\n\tonChange: InputChangeCallback;\n} ) {\n\tconst refPreviousValue = useRef( props.value );\n\tconst [ draft, setDraft ] = useState< {\n\t\tvalue?: string;\n\t\tisStale?: boolean;\n\t} >( {} );\n\tconst value = draft.value !== undefined ? draft.value : props.value;\n\n\t// Determines when to discard the draft value to restore controlled status.\n\t// To do so, it tracks the previous value and marks the draft value as stale\n\t// after each render.\n\tuseLayoutEffect( () => {\n\t\tconst { current: previousValue } = refPreviousValue;\n\t\trefPreviousValue.current = props.value;\n\t\tif ( draft.value !== undefined && ! draft.isStale ) {\n\t\t\tsetDraft( { ...draft, isStale: true } );\n\t\t} else if ( draft.isStale && props.value !== previousValue ) {\n\t\t\tsetDraft( {} );\n\t\t}\n\t}, [ props.value, draft ] );\n\n\tconst onChange: InputChangeCallback = ( nextValue, extra ) => {\n\t\t// Mutates the draft value to avoid an extra effect run.\n\t\tsetDraft( ( current ) =>\n\t\t\tObject.assign( current, { value: nextValue, isStale: false } )\n\t\t);\n\t\tprops.onChange( nextValue, extra );\n\t};\n\tconst onBlur: FocusEventHandler = ( event ) => {\n\t\tsetDraft( {} );\n\t\tprops.onBlur?.( event );\n\t};\n\n\treturn { value, onBlur, onChange };\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,SAAS,EACTC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACF,oBAAoB;;AAE3B;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAEC,aAAqB,EAAW;EAC9D,IAAIC,UAAU,GAAG,WAAW;EAE5B,QAASD,aAAa;IACrB,KAAK,GAAG;IACR,KAAK,GAAG;MACPC,UAAU,GAAG,WAAW;MACxB;IAED,KAAK,GAAG;IACR,KAAK,GAAG;MACPA,UAAU,GAAG,WAAW;MACxB;EACF;EAEA,OAAOA,UAAU;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAC5BC,UAAmB,EACnBH,aAAqB,EACZ;EACT,MAAMC,UAAU,GAAGF,aAAa,CAAEC,aAAc,CAAC;EAEjDL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjBC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,MAAM,GAAGN,UAAU;IACnD,CAAC,MAAM;MACN;MACAG,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,MAAM,GAAG,IAAI;IAC7C;EACD,CAAC,EAAE,CAAEJ,UAAU,EAAEF,UAAU,CAAG,CAAC;EAE/B,OAAOA,UAAU;AAClB;AAEA,OAAO,SAASO,QAAQA,CAAEC,KAIzB,EAAG;EACH,MAAMC,gBAAgB,GAAGb,MAAM,CAAEY,KAAK,CAACE,KAAM,CAAC;EAC9C,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAGf,QAAQ,CAG/B,CAAC,CAAE,CAAC;EACT,MAAMa,KAAK,GAAGC,KAAK,CAACD,KAAK,KAAKG,SAAS,GAAGF,KAAK,CAACD,KAAK,GAAGF,KAAK,CAACE,KAAK;;EAEnE;EACA;EACA;EACAf,eAAe,CAAE,MAAM;IACtB,MAAM;MAAEmB,OAAO,EAAEC;IAAc,CAAC,GAAGN,gBAAgB;IACnDA,gBAAgB,CAACK,OAAO,GAAGN,KAAK,CAACE,KAAK;IACtC,IAAKC,KAAK,CAACD,KAAK,KAAKG,SAAS,IAAI,CAAEF,KAAK,CAACK,OAAO,EAAG;MACnDJ,QAAQ,CAAE;QAAE,GAAGD,KAAK;QAAEK,OAAO,EAAE;MAAK,CAAE,CAAC;IACxC,CAAC,MAAM,IAAKL,KAAK,CAACK,OAAO,IAAIR,KAAK,CAACE,KAAK,KAAKK,aAAa,EAAG;MAC5DH,QAAQ,CAAE,CAAC,CAAE,CAAC;IACf;EACD,CAAC,EAAE,CAAEJ,KAAK,CAACE,KAAK,EAAEC,KAAK,CAAG,CAAC;EAE3B,MAAMM,QAA6B,GAAGA,CAAEC,SAAS,EAAEC,KAAK,KAAM;IAC7D;IACAP,QAAQ,CAAIE,OAAO,IAClBM,MAAM,CAACC,MAAM,CAAEP,OAAO,EAAE;MAAEJ,KAAK,EAAEQ,SAAS;MAAEF,OAAO,EAAE;IAAM,CAAE,CAC9D,CAAC;IACDR,KAAK,CAACS,QAAQ,CAAEC,SAAS,EAAEC,KAAM,CAAC;EACnC,CAAC;EACD,MAAMG,MAAyB,GAAKC,KAAK,IAAM;IAC9CX,QAAQ,CAAE,CAAC,CAAE,CAAC;IACdJ,KAAK,CAACc,MAAM,GAAIC,KAAM,CAAC;EACxB,CAAC;EAED,OAAO;IAAEb,KAAK;IAAEY,MAAM;IAAEL;EAAS,CAAC;AACnC","ignoreList":[]}

package/build-module/item-group/item/hook.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

package/build-module/item-group/item/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useContextSystem","styles","useItemGroupContext","useCx","useItem","props","as","asProp","className","onClick","role","size","sizeProp","otherProps","spacedAround","contextSize","cx","classes","unstyledButton","itemSizes","medium","item","wrapperClassName","itemWrapper"],"sources":["@wordpress/components/src/item-group/item/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ElementType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport * as styles from '../styles';\nimport { useItemGroupContext } from '../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ItemProps } from '../types';\n\nexport function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {\n\tconst {\n\t\tas: asProp,\n\t\tclassName,\n\t\tonClick,\n\t\trole = 'listitem',\n\t\tsize: sizeProp,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Item' );\n\n\tconst { spacedAround, size: contextSize } = useItemGroupContext();\n\n\tconst size = sizeProp || contextSize;\n\n\tconst as =\n\t\tasProp ||\n\t\t( ( typeof onClick !== 'undefined'\n\t\t\t? 'button'\n\t\t\t: 'div' ) as ElementType );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t( as === 'button' || as === 'a' ) &&\n\t\t\t\t\tstyles.unstyledButton( as ),\n\t\t\t\tstyles.itemSizes[ size ] || styles.itemSizes.medium,\n\t\t\t\tstyles.item,\n\t\t\t\tspacedAround && styles.spacedAround,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ as, className, cx, size, spacedAround ]\n\t);\n\n\tconst wrapperClassName = cx( styles.itemWrapper );\n\n\treturn {\n\t\tas,\n\t\tclassName: classes,\n\t\tonClick,\n\t\twrapperClassName,\n\t\trole,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,mBAAmB,QAAQ,YAAY;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAGhD,OAAO,SAASC,OAAOA,CAAEC,KAAkD,EAAG;EAC7E,MAAM;IACLC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,OAAO;IACPC,IAAI,GAAG,UAAU;IACjBC,IAAI,EAAEC,QAAQ;IACd,GAAGC;EACJ,CAAC,GAAGb,gBAAgB,CAAEK,KAAK,EAAE,MAAO,CAAC;EAErC,MAAM;IAAES,YAAY;IAAEH,IAAI,EAAEI;EAAY,CAAC,GAAGb,mBAAmB,CAAC,CAAC;EAEjE,MAAMS,IAAI,GAAGC,QAAQ,IAAIG,WAAW;EAEpC,MAAMT,EAAE,GACPC,MAAM,KACF,OAAOE,OAAO,KAAK,WAAW,GAC/B,QAAQ,GACR,KAAK,CAAmB;EAE5B,MAAMO,EAAE,GAAGb,KAAK,CAAC,CAAC;EAElB,MAAMc,OAAO,GAAGlB,OAAO,CACtB,MACCiB,EAAE,CACD,CAAEV,EAAE,KAAK,QAAQ,IAAIA,EAAE,KAAK,GAAG,KAC9BL,MAAM,CAACiB,cAAc,CAAEZ,EAAG,CAAC,EAC5BL,MAAM,CAACkB,SAAS,CAAER,IAAI,CAAE,IAAIV,MAAM,CAACkB,SAAS,CAACC,MAAM,EACnDnB,MAAM,CAACoB,IAAI,EACXP,YAAY,IAAIb,MAAM,CAACa,YAAY,EACnCN,SACD,CAAC,EACF,CAAEF,EAAE,EAAEE,SAAS,EAAEQ,EAAE,EAAEL,IAAI,EAAEG,YAAY,CACxC,CAAC;EAED,MAAMQ,gBAAgB,GAAGN,EAAE,CAAEf,MAAM,CAACsB,WAAY,CAAC;EAEjD,OAAO;IACNjB,EAAE;IACFE,SAAS,EAAES,OAAO;IAClBR,OAAO;IACPa,gBAAgB;IAChBZ,IAAI;IACJ,GAAGG;EACJ,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["useMemo","useContextSystem","styles","useItemGroupContext","useCx","useItem","props","as","asProp","className","onClick","role","size","sizeProp","otherProps","spacedAround","contextSize","cx","classes","unstyledButton","itemSizes","medium","item","wrapperClassName","itemWrapper"],"sources":["@wordpress/components/src/item-group/item/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport * as styles from '../styles';\nimport { useItemGroupContext } from '../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ItemProps } from '../types';\n\nexport function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {\n\tconst {\n\t\tas: asProp,\n\t\tclassName,\n\t\tonClick,\n\t\trole = 'listitem',\n\t\tsize: sizeProp,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Item' );\n\n\tconst { spacedAround, size: contextSize } = useItemGroupContext();\n\n\tconst size = sizeProp || contextSize;\n\n\tconst as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t( as === 'button' || as === 'a' ) &&\n\t\t\t\t\tstyles.unstyledButton( as ),\n\t\t\t\tstyles.itemSizes[ size ] || styles.itemSizes.medium,\n\t\t\t\tstyles.item,\n\t\t\t\tspacedAround && styles.spacedAround,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ as, className, cx, size, spacedAround ]\n\t);\n\n\tconst wrapperClassName = cx( styles.itemWrapper );\n\n\treturn {\n\t\tas,\n\t\tclassName: classes,\n\t\tonClick,\n\t\twrapperClassName,\n\t\trole,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,mBAAmB,QAAQ,YAAY;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAGhD,OAAO,SAASC,OAAOA,CAAEC,KAAkD,EAAG;EAC7E,MAAM;IACLC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,OAAO;IACPC,IAAI,GAAG,UAAU;IACjBC,IAAI,EAAEC,QAAQ;IACd,GAAGC;EACJ,CAAC,GAAGb,gBAAgB,CAAEK,KAAK,EAAE,MAAO,CAAC;EAErC,MAAM;IAAES,YAAY;IAAEH,IAAI,EAAEI;EAAY,CAAC,GAAGb,mBAAmB,CAAC,CAAC;EAEjE,MAAMS,IAAI,GAAGC,QAAQ,IAAIG,WAAW;EAEpC,MAAMT,EAAE,GAAGC,MAAM,KAAM,OAAOE,OAAO,KAAK,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAE;EAE1E,MAAMO,EAAE,GAAGb,KAAK,CAAC,CAAC;EAElB,MAAMc,OAAO,GAAGlB,OAAO,CACtB,MACCiB,EAAE,CACD,CAAEV,EAAE,KAAK,QAAQ,IAAIA,EAAE,KAAK,GAAG,KAC9BL,MAAM,CAACiB,cAAc,CAAEZ,EAAG,CAAC,EAC5BL,MAAM,CAACkB,SAAS,CAAER,IAAI,CAAE,IAAIV,MAAM,CAACkB,SAAS,CAACC,MAAM,EACnDnB,MAAM,CAACoB,IAAI,EACXP,YAAY,IAAIb,MAAM,CAACa,YAAY,EACnCN,SACD,CAAC,EACF,CAAEF,EAAE,EAAEE,SAAS,EAAEQ,EAAE,EAAEL,IAAI,EAAEG,YAAY,CACxC,CAAC;EAED,MAAMQ,gBAAgB,GAAGN,EAAE,CAAEf,MAAM,CAACsB,WAAY,CAAC;EAEjD,OAAO;IACNjB,EAAE;IACFE,SAAS,EAAES,OAAO;IAClBR,OAAO;IACPa,gBAAgB;IAChBZ,IAAI;IACJ,GAAGG;EACJ,CAAC;AACF","ignoreList":[]}

package/build-module/mobile/gradient/index.native.js

@@ -47,7 +47,9 @@ export function getGradientAngle(gradientValue) {
     }
   } else if (angleType === 'angle') {
     return parseFloat(angle);
-  } else return 4 * angleBase;
+  } else {
+    return 4 * angleBase;
+  }
 }
 export function getGradientColorGroup(gradientValue) {
   const colorNeedParenthesis = ['rgb', 'rgba'];

package/build-module/mobile/gradient/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Platform","RNLinearGradient","gradientParser","colorsUtils","RadialGradient","Stop","SVG","Defs","Rect","useResizeObserver","useMemo","styles","getGradientAngle","gradientValue","angleBase","matchAngle","angle","exec","angleType","includes","parseFloat","getGradientColorGroup","colorNeedParenthesis","excludeSideOrCorner","modifiedGradientValue","replace","concat","parse","map","gradient","colorStops","color","index","type","value","length","fallbackLength","colorLength","join","getGradientBaseColors","colorGroup","getColorLocations","location","Number","Gradient","style","angleCenter","x","y","children","otherProps","resizeObserver","sizes","width","height","isGradient","getGradientType","gradients","locations","colors","isLinearGradient","linear","createElement","useAngle","overflow","radialGradientContent","id","gradientUnits","rx","ry","cy","OS","group","offset","stopColor","stopOpacity","key","fill"],"sources":["@wordpress/components/src/mobile/gradient/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Platform } from 'react-native';\nimport RNLinearGradient from 'react-native-linear-gradient';\nimport gradientParser from 'gradient-parser';\n/**\n * WordPress dependencies\n */\nimport { colorsUtils } from '@wordpress/components';\nimport { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport function getGradientAngle( gradientValue ) {\n\tconst angleBase = 45;\n\tconst matchAngle = /\\(((\\d+deg)|(to\\s[^,]+))/;\n\tconst angle = matchAngle.exec( gradientValue )\n\t\t? matchAngle.exec( gradientValue )[ 1 ]\n\t\t: '180deg';\n\n\tconst angleType = angle.includes( 'deg' ) ? 'angle' : 'sideOrCorner';\n\n\tif ( angleType === 'sideOrCorner' ) {\n\t\tswitch ( angle ) {\n\t\t\tcase 'to top':\n\t\t\t\treturn 0;\n\t\t\tcase 'to top right':\n\t\t\tcase 'to right top':\n\t\t\t\treturn angleBase;\n\t\t\tcase 'to right':\n\t\t\t\treturn 2 * angleBase;\n\t\t\tcase 'to bottom right':\n\t\t\tcase 'to right bottom':\n\t\t\t\treturn 3 * angleBase;\n\t\t\tcase 'to bottom':\n\t\t\t\treturn 4 * angleBase;\n\t\t\tcase 'to bottom left':\n\t\t\tcase 'to left bottom':\n\t\t\t\treturn 5 * angleBase;\n\t\t\tcase 'to left':\n\t\t\t\treturn 6 * angleBase;\n\t\t\tcase 'to top left':\n\t\t\tcase 'to left top':\n\t\t\t\treturn 7 * angleBase;\n\t\t}\n\t} else if ( angleType === 'angle' ) {\n\t\treturn parseFloat( angle );\n\t} else return 4 * angleBase;\n}\n\nexport function getGradientColorGroup( gradientValue ) {\n\tconst colorNeedParenthesis = [ 'rgb', 'rgba' ];\n\n\tconst excludeSideOrCorner = /linear-gradient\\(to\\s+([a-z\\s]+,)/;\n\n\t// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)\n\t// so it's going to be excluded in order to matching color groups.\n\tconst modifiedGradientValue = gradientValue.replace(\n\t\texcludeSideOrCorner,\n\t\t'linear-gradient('\n\t);\n\n\treturn [].concat(\n\t\t...gradientParser.parse( modifiedGradientValue )?.map( ( gradient ) =>\n\t\t\tgradient.colorStops?.map( ( color, index ) => {\n\t\t\t\tconst { type, value, length } = color;\n\t\t\t\tconst fallbackLength = `${\n\t\t\t\t\t100 * ( index / ( gradient.colorStops.length - 1 ) )\n\t\t\t\t}%`;\n\t\t\t\tconst colorLength = length\n\t\t\t\t\t? `${ length.value }${ length.type }`\n\t\t\t\t\t: fallbackLength;\n\n\t\t\t\tif ( colorNeedParenthesis.includes( type ) ) {\n\t\t\t\t\treturn [ `${ type }(${ value.join( ',' ) })`, colorLength ];\n\t\t\t\t} else if ( type === 'literal' ) {\n\t\t\t\t\treturn [ value, colorLength ];\n\t\t\t\t}\n\t\t\t\treturn [ `#${ value }`, colorLength ];\n\t\t\t} )\n\t\t)\n\t);\n}\n\nexport function getGradientBaseColors( colorGroup ) {\n\treturn colorGroup.map( ( color ) => color[ 0 ] );\n}\n\nexport function getColorLocations( colorGroup ) {\n\treturn colorGroup.map(\n\t\t( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100\n\t);\n}\n\nfunction Gradient( {\n\tgradientValue,\n\tstyle,\n\tangleCenter = { x: 0.5, y: 0.5 },\n\tchildren,\n\t...otherProps\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst { width = 0, height = 0 } = sizes || {};\n\tconst { isGradient, getGradientType, gradients } = colorsUtils;\n\n\tconst colorGroup = useMemo(\n\t\t() => getGradientColorGroup( gradientValue ),\n\t\t[ gradientValue ]\n\t);\n\n\tconst locations = useMemo(\n\t\t() => getColorLocations( colorGroup ),\n\t\t[ colorGroup ]\n\t);\n\n\tconst colors = useMemo(\n\t\t() => getGradientBaseColors( colorGroup ),\n\t\t[ colorGroup ]\n\t);\n\n\tif ( ! gradientValue || ! isGradient( gradientValue ) ) {\n\t\treturn null;\n\t}\n\n\tconst isLinearGradient =\n\t\tgetGradientType( gradientValue ) === gradients.linear;\n\n\tif ( isLinearGradient ) {\n\t\treturn (\n\t\t\t<RNLinearGradient\n\t\t\t\tcolors={ colors }\n\t\t\t\tuseAngle\n\t\t\t\tangle={ getGradientAngle( gradientValue ) }\n\t\t\t\tlocations={ locations }\n\t\t\t\tangleCenter={ angleCenter }\n\t\t\t\tstyle={ style }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</RNLinearGradient>\n\t\t);\n\t}\n\n\treturn (\n\t\t<View style={ [ style, styles.overflow ] }>\n\t\t\t<View style={ styles.radialGradientContent }>{ children }</View>\n\t\t\t{ resizeObserver }\n\t\t\t<SVG>\n\t\t\t\t<Defs>\n\t\t\t\t\t<RadialGradient\n\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\tid=\"radialGradient\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\trx=\"70%\"\n\t\t\t\t\t\try=\"70%\"\n\t\t\t\t\t\tcy={ Platform.OS === 'android' ? width / 2 : '50%' }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ colorGroup.map( ( group ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Stop\n\t\t\t\t\t\t\t\t\toffset={ group[ 1 ] }\n\t\t\t\t\t\t\t\t\tstopColor={ group[ 0 ] }\n\t\t\t\t\t\t\t\t\tstopOpacity=\"1\"\n\t\t\t\t\t\t\t\t\tkey={ `${ group[ 1 ] }-${ group[ 0 ] }` }\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</RadialGradient>\n\t\t\t\t</Defs>\n\t\t\t\t<Rect\n\t\t\t\t\theight={ height }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\tfill=\"url(#radialGradient)\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t</View>\n\t);\n}\n\nexport default Gradient;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","Platform","RNLinearGradient","gradientParser","colorsUtils","RadialGradient","Stop","SVG","Defs","Rect","useResizeObserver","useMemo","styles","getGradientAngle","gradientValue","angleBase","matchAngle","angle","exec","angleType","includes","parseFloat","getGradientColorGroup","colorNeedParenthesis","excludeSideOrCorner","modifiedGradientValue","replace","concat","parse","map","gradient","colorStops","color","index","type","value","length","fallbackLength","colorLength","join","getGradientBaseColors","colorGroup","getColorLocations","location","Number","Gradient","style","angleCenter","x","y","children","otherProps","resizeObserver","sizes","width","height","isGradient","getGradientType","gradients","locations","colors","isLinearGradient","linear","createElement","useAngle","overflow","radialGradientContent","id","gradientUnits","rx","ry","cy","OS","group","offset","stopColor","stopOpacity","key","fill"],"sources":["@wordpress/components/src/mobile/gradient/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Platform } from 'react-native';\nimport RNLinearGradient from 'react-native-linear-gradient';\nimport gradientParser from 'gradient-parser';\n/**\n * WordPress dependencies\n */\nimport { colorsUtils } from '@wordpress/components';\nimport { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport function getGradientAngle( gradientValue ) {\n\tconst angleBase = 45;\n\tconst matchAngle = /\\(((\\d+deg)|(to\\s[^,]+))/;\n\tconst angle = matchAngle.exec( gradientValue )\n\t\t? matchAngle.exec( gradientValue )[ 1 ]\n\t\t: '180deg';\n\n\tconst angleType = angle.includes( 'deg' ) ? 'angle' : 'sideOrCorner';\n\n\tif ( angleType === 'sideOrCorner' ) {\n\t\tswitch ( angle ) {\n\t\t\tcase 'to top':\n\t\t\t\treturn 0;\n\t\t\tcase 'to top right':\n\t\t\tcase 'to right top':\n\t\t\t\treturn angleBase;\n\t\t\tcase 'to right':\n\t\t\t\treturn 2 * angleBase;\n\t\t\tcase 'to bottom right':\n\t\t\tcase 'to right bottom':\n\t\t\t\treturn 3 * angleBase;\n\t\t\tcase 'to bottom':\n\t\t\t\treturn 4 * angleBase;\n\t\t\tcase 'to bottom left':\n\t\t\tcase 'to left bottom':\n\t\t\t\treturn 5 * angleBase;\n\t\t\tcase 'to left':\n\t\t\t\treturn 6 * angleBase;\n\t\t\tcase 'to top left':\n\t\t\tcase 'to left top':\n\t\t\t\treturn 7 * angleBase;\n\t\t}\n\t} else if ( angleType === 'angle' ) {\n\t\treturn parseFloat( angle );\n\t} else {\n\t\treturn 4 * angleBase;\n\t}\n}\n\nexport function getGradientColorGroup( gradientValue ) {\n\tconst colorNeedParenthesis = [ 'rgb', 'rgba' ];\n\n\tconst excludeSideOrCorner = /linear-gradient\\(to\\s+([a-z\\s]+,)/;\n\n\t// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)\n\t// so it's going to be excluded in order to matching color groups.\n\tconst modifiedGradientValue = gradientValue.replace(\n\t\texcludeSideOrCorner,\n\t\t'linear-gradient('\n\t);\n\n\treturn [].concat(\n\t\t...gradientParser.parse( modifiedGradientValue )?.map( ( gradient ) =>\n\t\t\tgradient.colorStops?.map( ( color, index ) => {\n\t\t\t\tconst { type, value, length } = color;\n\t\t\t\tconst fallbackLength = `${\n\t\t\t\t\t100 * ( index / ( gradient.colorStops.length - 1 ) )\n\t\t\t\t}%`;\n\t\t\t\tconst colorLength = length\n\t\t\t\t\t? `${ length.value }${ length.type }`\n\t\t\t\t\t: fallbackLength;\n\n\t\t\t\tif ( colorNeedParenthesis.includes( type ) ) {\n\t\t\t\t\treturn [ `${ type }(${ value.join( ',' ) })`, colorLength ];\n\t\t\t\t} else if ( type === 'literal' ) {\n\t\t\t\t\treturn [ value, colorLength ];\n\t\t\t\t}\n\t\t\t\treturn [ `#${ value }`, colorLength ];\n\t\t\t} )\n\t\t)\n\t);\n}\n\nexport function getGradientBaseColors( colorGroup ) {\n\treturn colorGroup.map( ( color ) => color[ 0 ] );\n}\n\nexport function getColorLocations( colorGroup ) {\n\treturn colorGroup.map(\n\t\t( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100\n\t);\n}\n\nfunction Gradient( {\n\tgradientValue,\n\tstyle,\n\tangleCenter = { x: 0.5, y: 0.5 },\n\tchildren,\n\t...otherProps\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst { width = 0, height = 0 } = sizes || {};\n\tconst { isGradient, getGradientType, gradients } = colorsUtils;\n\n\tconst colorGroup = useMemo(\n\t\t() => getGradientColorGroup( gradientValue ),\n\t\t[ gradientValue ]\n\t);\n\n\tconst locations = useMemo(\n\t\t() => getColorLocations( colorGroup ),\n\t\t[ colorGroup ]\n\t);\n\n\tconst colors = useMemo(\n\t\t() => getGradientBaseColors( colorGroup ),\n\t\t[ colorGroup ]\n\t);\n\n\tif ( ! gradientValue || ! isGradient( gradientValue ) ) {\n\t\treturn null;\n\t}\n\n\tconst isLinearGradient =\n\t\tgetGradientType( gradientValue ) === gradients.linear;\n\n\tif ( isLinearGradient ) {\n\t\treturn (\n\t\t\t<RNLinearGradient\n\t\t\t\tcolors={ colors }\n\t\t\t\tuseAngle\n\t\t\t\tangle={ getGradientAngle( gradientValue ) }\n\t\t\t\tlocations={ locations }\n\t\t\t\tangleCenter={ angleCenter }\n\t\t\t\tstyle={ style }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</RNLinearGradient>\n\t\t);\n\t}\n\n\treturn (\n\t\t<View style={ [ style, styles.overflow ] }>\n\t\t\t<View style={ styles.radialGradientContent }>{ children }</View>\n\t\t\t{ resizeObserver }\n\t\t\t<SVG>\n\t\t\t\t<Defs>\n\t\t\t\t\t<RadialGradient\n\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\tid=\"radialGradient\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\trx=\"70%\"\n\t\t\t\t\t\try=\"70%\"\n\t\t\t\t\t\tcy={ Platform.OS === 'android' ? width / 2 : '50%' }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ colorGroup.map( ( group ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Stop\n\t\t\t\t\t\t\t\t\toffset={ group[ 1 ] }\n\t\t\t\t\t\t\t\t\tstopColor={ group[ 0 ] }\n\t\t\t\t\t\t\t\t\tstopOpacity=\"1\"\n\t\t\t\t\t\t\t\t\tkey={ `${ group[ 1 ] }-${ group[ 0 ] }` }\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</RadialGradient>\n\t\t\t\t</Defs>\n\t\t\t\t<Rect\n\t\t\t\t\theight={ height }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\tfill=\"url(#radialGradient)\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t</View>\n\t);\n}\n\nexport default Gradient;\n"],"mappings":"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","ignoreList":[]}

package/build-module/mobile/keyboard-aware-flat-list/index.android.js

@@ -15,7 +15,9 @@ import { forwardRef, useCallback, useImperativeHandle } from '@wordpress/element
  */
 import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const EMPTY_OBJECT = {};
 export const KeyboardAwareFlatList = ({
   onScroll,
   ...props
@@ -39,8 +41,6 @@ export const KeyboardAwareFlatList = ({
     onScroll
   });
   const getFlatListRef = useCallback(flatListRef => {
-    // On Android, we get the ref of the associated scroll
-    // view to the FlatList.
     scrollViewRef.current = flatListRef?.getNativeScrollRef();
   }, [scrollViewRef]);
   useImperativeHandle(ref, () => {
@@ -51,6 +51,7 @@ export const KeyboardAwareFlatList = ({
       lastScrollTo
     };
   });
+  const optimizationProps = props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD ? OPTIMIZATION_PROPS : EMPTY_OBJECT;
   return createElement(KeyboardAvoidingView, {
     style: {
       flex: 1
@@ -58,7 +59,12 @@ export const KeyboardAwareFlatList = ({
   }, createElement(AnimatedFlatList, {
     ref: getFlatListRef,
     onScroll: scrollHandler,
-    onContentSizeChange: onContentSizeChange,
+    onContentSizeChange: onContentSizeChange
+    // Disable clipping to fix focus losing.
+    // See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+    ,
+    removeClippedSubviews: false,
+    ...optimizationProps,
     ...props
   }));
 };

package/build-module/mobile/keyboard-aware-flat-list/index.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["FlatList","Animated","forwardRef","useCallback","useImperativeHandle","useScroll","KeyboardAvoidingView","AnimatedFlatList","createAnimatedComponent","KeyboardAwareFlatList","onScroll","props","ref","extraScrollHeight","scrollEnabled","shouldPreventAutomaticScroll","scrollViewRef","scrollHandler","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","getFlatListRef","flatListRef","current","getNativeScrollRef","createElement","style","flex"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseCallback,\n\tuseImperativeHandle,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\n\nexport const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {\n\tconst { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =\n\t\tprops;\n\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t} );\n\n\tconst getFlatListRef = useCallback(\n\t\t( flatListRef ) => {\n\t\t\t// On Android, we get the ref of the associated scroll\n\t\t\t// view to the FlatList.\n\t\t\tscrollViewRef.current = flatListRef?.getNativeScrollRef();\n\t\t},\n\t\t[ scrollViewRef ]\n\t);\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ getFlatListRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,MAAM,yBAAyB;;AAE9C;AACA;AACA;AACA,SACCC,UAAU,EACVC,WAAW,EACXC,mBAAmB,QACb,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,MAAMC,gBAAgB,GAAGN,QAAQ,CAACO,uBAAuB,CAAER,QAAS,CAAC;AAErE,OAAO,MAAMS,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACvE,MAAM;IAAEC,iBAAiB;IAAEC,aAAa;IAAEC;EAA6B,CAAC,GACvEJ,KAAK;EAEN,MAAM;IACLK,aAAa;IACbC,aAAa;IACbC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,GAAGhB,SAAS,CAAE;IACdS,aAAa;IACbC,4BAA4B;IAC5BF,iBAAiB;IACjBH;EACD,CAAE,CAAC;EAEH,MAAMY,cAAc,GAAGnB,WAAW,CAC/BoB,WAAW,IAAM;IAClB;IACA;IACAP,aAAa,CAACQ,OAAO,GAAGD,WAAW,EAAEE,kBAAkB,CAAC,CAAC;EAC1D,CAAC,EACD,CAAET,aAAa,CAChB,CAAC;EAEDZ,mBAAmB,CAAEQ,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNI,aAAa,EAAEA,aAAa,CAACQ,OAAO;MACpCN,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,OACCK,aAAA,CAACpB,oBAAoB;IAACqB,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACnB,gBAAgB;IAChBK,GAAG,EAAGU,cAAgB;IACtBZ,QAAQ,EAAGO,aAAe;IAC1BG,mBAAmB,EAAGA,mBAAqB;IAAA,GACtCT;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeT,UAAU,CAAEO,qBAAsB,CAAC","ignoreList":[]}
+{"version":3,"names":["FlatList","Animated","forwardRef","useCallback","useImperativeHandle","useScroll","KeyboardAvoidingView","OPTIMIZATION_ITEMS_THRESHOLD","OPTIMIZATION_PROPS","AnimatedFlatList","createAnimatedComponent","EMPTY_OBJECT","KeyboardAwareFlatList","onScroll","props","ref","extraScrollHeight","scrollEnabled","shouldPreventAutomaticScroll","scrollViewRef","scrollHandler","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","getFlatListRef","flatListRef","current","getNativeScrollRef","optimizationProps","data","length","createElement","style","flex","removeClippedSubviews"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseCallback,\n\tuseImperativeHandle,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\nimport { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\nconst EMPTY_OBJECT = {};\n\nexport const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {\n\tconst { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =\n\t\tprops;\n\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t} );\n\n\tconst getFlatListRef = useCallback(\n\t\t( flatListRef ) => {\n\t\t\tscrollViewRef.current = flatListRef?.getNativeScrollRef();\n\t\t},\n\t\t[ scrollViewRef ]\n\t);\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\tconst optimizationProps =\n\t\tprops.data?.length > OPTIMIZATION_ITEMS_THRESHOLD\n\t\t\t? OPTIMIZATION_PROPS\n\t\t\t: EMPTY_OBJECT;\n\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ getFlatListRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\t// Disable clipping to fix focus losing.\n\t\t\t\t// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541\n\t\t\t\tremoveClippedSubviews={ false }\n\t\t\t\t{ ...optimizationProps }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,MAAM,yBAAyB;;AAE9C;AACA;AACA;AACA,SACCC,UAAU,EACVC,WAAW,EACXC,mBAAmB,QACb,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,SAASC,4BAA4B,EAAEC,kBAAkB,QAAQ,UAAU;AAE3E,MAAMC,gBAAgB,GAAGR,QAAQ,CAACS,uBAAuB,CAAEV,QAAS,CAAC;AACrE,MAAMW,YAAY,GAAG,CAAC,CAAC;AAEvB,OAAO,MAAMC,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACvE,MAAM;IAAEC,iBAAiB;IAAEC,aAAa;IAAEC;EAA6B,CAAC,GACvEJ,KAAK;EAEN,MAAM;IACLK,aAAa;IACbC,aAAa;IACbC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,GAAGnB,SAAS,CAAE;IACdY,aAAa;IACbC,4BAA4B;IAC5BF,iBAAiB;IACjBH;EACD,CAAE,CAAC;EAEH,MAAMY,cAAc,GAAGtB,WAAW,CAC/BuB,WAAW,IAAM;IAClBP,aAAa,CAACQ,OAAO,GAAGD,WAAW,EAAEE,kBAAkB,CAAC,CAAC;EAC1D,CAAC,EACD,CAAET,aAAa,CAChB,CAAC;EAEDf,mBAAmB,CAAEW,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNI,aAAa,EAAEA,aAAa,CAACQ,OAAO;MACpCN,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,MAAMK,iBAAiB,GACtBf,KAAK,CAACgB,IAAI,EAAEC,MAAM,GAAGxB,4BAA4B,GAC9CC,kBAAkB,GAClBG,YAAY;EAEhB,OACCqB,aAAA,CAAC1B,oBAAoB;IAAC2B,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACvB,gBAAgB;IAChBM,GAAG,EAAGU,cAAgB;IACtBZ,QAAQ,EAAGO,aAAe;IAC1BG,mBAAmB,EAAGA;IACtB;IACA;IAAA;IACAY,qBAAqB,EAAG,KAAO;IAAA,GAC1BN,iBAAiB;IAAA,GACjBf;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeZ,UAAU,CAAEU,qBAAsB,CAAC","ignoreList":[]}

package/build-module/mobile/keyboard-aware-flat-list/index.ios.js

@@ -2,8 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-
-import { ScrollView, FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 /**
@@ -18,8 +17,11 @@ import { useThrottle } from '@wordpress/compose';
 import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
 const DEFAULT_FONT_SIZE = 16;
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const EMPTY_OBJECT = {};
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
@@ -30,7 +32,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
  * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
  * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
  * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}    props...                           Other props to pass to the FlatList component.
  * @param {RefObject} ref
@@ -40,7 +41,6 @@ export const KeyboardAwareFlatList = ({
   extraScrollHeight,
   onScroll,
   scrollEnabled,
-  scrollViewStyle,
   shouldPreventAutomaticScroll,
   ...props
 }, ref) => {
@@ -83,9 +83,9 @@ export const KeyboardAwareFlatList = ({
   const contentInset = {
     bottom: keyboardOffset
   };
-  const style = [{
-    flex: 1
-  }, scrollViewStyle];
+  const getFlatListRef = useCallback(flatListRef => {
+    scrollViewRef.current = flatListRef?.getNativeScrollRef();
+  }, [scrollViewRef]);
   useImperativeHandle(ref, () => {
     return {
       scrollViewRef: scrollViewRef.current,
@@ -94,19 +94,20 @@ export const KeyboardAwareFlatList = ({
       lastScrollTo
     };
   });
-  return createElement(AnimatedScrollView, {
+  const optimizationProps = props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD ? OPTIMIZATION_PROPS : EMPTY_OBJECT;
+  return createElement(View, {
+    style: styles.list__container
+  }, createElement(AnimatedFlatList, {
+    ref: getFlatListRef,
     automaticallyAdjustContentInsets: false,
     contentInset: contentInset,
     keyboardShouldPersistTaps: "handled",
     onContentSizeChange: onContentSizeChange,
     onScroll: scrollHandler,
-    ref: scrollViewRef,
-    scrollEnabled: scrollEnabled,
     scrollEventThrottle: 16,
-    style: style
-  }, createElement(FlatList, {
-    ...props,
-    scrollEnabled: false
+    style: styles.list__content,
+    ...optimizationProps,
+    ...props
   }));
 };
 export default forwardRef(KeyboardAwareFlatList);

package/build-module/mobile/keyboard-aware-flat-list/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","FlatList","Animated","useCallback","useEffect","forwardRef","useImperativeHandle","useThrottle","useScroll","useTextInputOffset","useTextInputCaretPosition","DEFAULT_FONT_SIZE","AnimatedScrollView","createAnimatedComponent","KeyboardAwareFlatList","extraScrollHeight","onScroll","scrollEnabled","scrollViewStyle","shouldPreventAutomaticScroll","props","ref","scrollViewRef","scrollHandler","keyboardOffset","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","onSizeChange","getTextInputOffset","onScrollToTextInput","caret","caretHeight","textInputOffset","hasTextInputOffset","leading","currentCaretData","contentInset","bottom","style","flex","current","createElement","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { ScrollView, FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n} from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport useTextInputOffset from './use-text-input-offset';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\n\nconst DEFAULT_FONT_SIZE = 16;\nconst AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}    props                              Component props.\n * @param {number}    props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.\n * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.\n * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}    props...                           Other props to pass to the FlatList component.\n * @param {RefObject} ref\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = (\n\t{\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tscrollEnabled,\n\t\tscrollViewStyle,\n\t\tshouldPreventAutomaticScroll,\n\t\t...props\n\t},\n\tref\n) => {\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tonSizeChange,\n\t} );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToSection( textInputOffset, caretHeight );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToSection ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst onSizeChange = useCallback(\n\t\t() => onScrollToTextInput( currentCaretData ),\n\t\t[ currentCaretData, onScrollToTextInput ]\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst style = [ { flex: 1 }, scrollViewStyle ];\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<AnimatedScrollView\n\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\tcontentInset={ contentInset }\n\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScroll={ scrollHandler }\n\t\t\tref={ scrollViewRef }\n\t\t\tscrollEnabled={ scrollEnabled }\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<FlatList { ...props } scrollEnabled={ false } />\n\t\t</AnimatedScrollView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["FlatList","View","Animated","useCallback","useEffect","forwardRef","useImperativeHandle","useThrottle","useScroll","useTextInputOffset","useTextInputCaretPosition","OPTIMIZATION_ITEMS_THRESHOLD","OPTIMIZATION_PROPS","styles","DEFAULT_FONT_SIZE","AnimatedFlatList","createAnimatedComponent","EMPTY_OBJECT","KeyboardAwareFlatList","extraScrollHeight","onScroll","scrollEnabled","shouldPreventAutomaticScroll","props","ref","scrollViewRef","scrollHandler","keyboardOffset","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","onSizeChange","getTextInputOffset","onScrollToTextInput","caret","caretHeight","textInputOffset","hasTextInputOffset","leading","currentCaretData","contentInset","bottom","getFlatListRef","flatListRef","current","getNativeScrollRef","optimizationProps","data","length","createElement","style","list__container","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle","list__content"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList, View } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n} from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport useTextInputOffset from './use-text-input-offset';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\nimport { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';\nimport styles from './styles.scss';\n\nconst DEFAULT_FONT_SIZE = 16;\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\nconst EMPTY_OBJECT = {};\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}    props                              Component props.\n * @param {number}    props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.\n * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}    props...                           Other props to pass to the FlatList component.\n * @param {RefObject} ref\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = (\n\t{\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\t...props\n\t},\n\tref\n) => {\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tonSizeChange,\n\t} );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToSection( textInputOffset, caretHeight );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToSection ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst onSizeChange = useCallback(\n\t\t() => onScrollToTextInput( currentCaretData ),\n\t\t[ currentCaretData, onScrollToTextInput ]\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst getFlatListRef = useCallback(\n\t\t( flatListRef ) => {\n\t\t\tscrollViewRef.current = flatListRef?.getNativeScrollRef();\n\t\t},\n\t\t[ scrollViewRef ]\n\t);\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\tconst optimizationProps =\n\t\tprops.data?.length > OPTIMIZATION_ITEMS_THRESHOLD\n\t\t\t? OPTIMIZATION_PROPS\n\t\t\t: EMPTY_OBJECT;\n\n\treturn (\n\t\t<View style={ styles.list__container }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ getFlatListRef }\n\t\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\t\tcontentInset={ contentInset }\n\t\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tstyle={ styles.list__content }\n\t\t\t\t{ ...optimizationProps }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":"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","ignoreList":[]}

package/build-module/mobile/keyboard-aware-flat-list/shared.native.js

@@ -0,0 +1,27 @@
+/**
+ * Optimization properties for FlatList.
+ * @typedef {Object} OptimizationProps
+ * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
+ *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
+ *                                        Default: 10
+ * @property {number} windowSize          - Measurement unit representing viewport height.
+ *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
+ *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
+ *                                        Smaller values save memory but increase chances of seeing blank areas.
+ */
+
+/**
+ * Threshold for applying optimization settings.
+ * @type {number}
+ */
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
+
+/**
+ * Optimization properties for FlatList.
+ * @type {OptimizationProps}
+ */
+export const OPTIMIZATION_PROPS = {
+  maxToRenderPerBatch: 15,
+  windowSize: 17
+};
+//# sourceMappingURL=shared.native.js.map

package/build-module/mobile/keyboard-aware-flat-list/shared.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["OPTIMIZATION_ITEMS_THRESHOLD","OPTIMIZATION_PROPS","maxToRenderPerBatch","windowSize"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/shared.native.js"],"sourcesContent":["/**\n * Optimization properties for FlatList.\n * @typedef {Object} OptimizationProps\n * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.\n *                                        Increasing this number reduces visual blank areas but may affect responsiveness.\n *                                        Default: 10\n * @property {number} windowSize          - Measurement unit representing viewport height.\n *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).\n *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.\n *                                        Smaller values save memory but increase chances of seeing blank areas.\n */\n\n/**\n * Threshold for applying optimization settings.\n * @type {number}\n */\nexport const OPTIMIZATION_ITEMS_THRESHOLD = 30;\n\n/**\n * Optimization properties for FlatList.\n * @type {OptimizationProps}\n */\nexport const OPTIMIZATION_PROPS = {\n\tmaxToRenderPerBatch: 15,\n\twindowSize: 17,\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMA,4BAA4B,GAAG,EAAE;;AAE9C;AACA;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAG;EACjCC,mBAAmB,EAAE,EAAE;EACvBC,UAAU,EAAE;AACb,CAAC","ignoreList":[]}

package/build-module/modal/aria-helper.js

@@ -18,7 +18,9 @@ export function modalize(modalElement) {
   const hiddenElements = [];
   hiddenElementsByDepth.push(hiddenElements);
   for (const element of elements) {
-    if (element === modalElement) continue;
+    if (element === modalElement) {
+      continue;
+    }
     if (elementShouldBeHidden(element)) {
       element.setAttribute('aria-hidden', 'true');
       hiddenElements.push(element);
@@ -43,7 +45,11 @@ export function elementShouldBeHidden(element) {
  */
 export function unmodalize() {
   const hiddenElements = hiddenElementsByDepth.pop();
-  if (!hiddenElements) return;
-  for (const element of hiddenElements) element.removeAttribute('aria-hidden');
+  if (!hiddenElements) {
+    return;
+  }
+  for (const element of hiddenElements) {
+    element.removeAttribute('aria-hidden');
+  }
 }
 //# sourceMappingURL=aria-helper.js.map

package/build-module/modal/aria-helper.js.map

@@ -1 +1 @@
-{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElementsByDepth","modalize","modalElement","elements","Array","from","document","body","children","hiddenElements","push","element","elementShouldBeHidden","setAttribute","role","getAttribute","tagName","hasAttribute","has","unmodalize","pop","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nconst hiddenElementsByDepth: Element[][] = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize( modalElement?: HTMLDivElement ) {\n\tconst elements = Array.from( document.body.children );\n\tconst hiddenElements: Element[] = [];\n\thiddenElementsByDepth.push( hiddenElements );\n\tfor ( const element of elements ) {\n\t\tif ( element === modalElement ) continue;\n\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t}\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n\tconst hiddenElements = hiddenElementsByDepth.pop();\n\tif ( ! hiddenElements ) return;\n\n\tfor ( const element of hiddenElements )\n\t\telement.removeAttribute( 'aria-hidden' );\n}\n"],"mappings":"AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,MAAMC,qBAAkC,GAAG,EAAE;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAEC,YAA6B,EAAG;EACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrD,MAAMC,cAAyB,GAAG,EAAE;EACpCT,qBAAqB,CAACU,IAAI,CAAED,cAAe,CAAC;EAC5C,KAAM,MAAME,OAAO,IAAIR,QAAQ,EAAG;IACjC,IAAKQ,OAAO,KAAKT,YAAY,EAAG;IAEhC,IAAKU,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7CJ,cAAc,CAACC,IAAI,CAAEC,OAAQ,CAAC;IAC/B;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMG,IAAI,GAAGH,OAAO,CAACI,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNJ,OAAO,CAACK,OAAO,KAAK,QAAQ,IAC5BL,OAAO,CAACM,YAAY,CAAE,aAAc,CAAC,IACrCN,OAAO,CAACM,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIhB,sBAAsB,CAACoB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACA,OAAO,SAASK,UAAUA,CAAA,EAAG;EAC5B,MAAMV,cAAc,GAAGT,qBAAqB,CAACoB,GAAG,CAAC,CAAC;EAClD,IAAK,CAAEX,cAAc,EAAG;EAExB,KAAM,MAAME,OAAO,IAAIF,cAAc,EACpCE,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;AAC1C","ignoreList":[]}
+{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElementsByDepth","modalize","modalElement","elements","Array","from","document","body","children","hiddenElements","push","element","elementShouldBeHidden","setAttribute","role","getAttribute","tagName","hasAttribute","has","unmodalize","pop","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nconst hiddenElementsByDepth: Element[][] = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize( modalElement?: HTMLDivElement ) {\n\tconst elements = Array.from( document.body.children );\n\tconst hiddenElements: Element[] = [];\n\thiddenElementsByDepth.push( hiddenElements );\n\tfor ( const element of elements ) {\n\t\tif ( element === modalElement ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t}\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n\tconst hiddenElements = hiddenElementsByDepth.pop();\n\tif ( ! hiddenElements ) {\n\t\treturn;\n\t}\n\n\tfor ( const element of hiddenElements ) {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t}\n}\n"],"mappings":"AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,MAAMC,qBAAkC,GAAG,EAAE;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAEC,YAA6B,EAAG;EACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrD,MAAMC,cAAyB,GAAG,EAAE;EACpCT,qBAAqB,CAACU,IAAI,CAAED,cAAe,CAAC;EAC5C,KAAM,MAAME,OAAO,IAAIR,QAAQ,EAAG;IACjC,IAAKQ,OAAO,KAAKT,YAAY,EAAG;MAC/B;IACD;IAEA,IAAKU,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7CJ,cAAc,CAACC,IAAI,CAAEC,OAAQ,CAAC;IAC/B;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMG,IAAI,GAAGH,OAAO,CAACI,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNJ,OAAO,CAACK,OAAO,KAAK,QAAQ,IAC5BL,OAAO,CAACM,YAAY,CAAE,aAAc,CAAC,IACrCN,OAAO,CAACM,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIhB,sBAAsB,CAACoB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACA,OAAO,SAASK,UAAUA,CAAA,EAAG;EAC5B,MAAMV,cAAc,GAAGT,qBAAqB,CAACoB,GAAG,CAAC,CAAC;EAClD,IAAK,CAAEX,cAAc,EAAG;IACvB;EACD;EAEA,KAAM,MAAME,OAAO,IAAIF,cAAc,EAAG;IACvCE,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;EACzC;AACD","ignoreList":[]}

package/build-module/modal/index.js

@@ -115,7 +115,9 @@ function UnforwardedModal(props, forwardedRef) {
   useEffect(() => {
     dismissers.push(refOnRequestClose);
     const [first, second] = dismissers;
-    if (second) first?.current?.();
+    if (second) {
+      first?.current?.();
+    }
     const nested = nestedDismissers.current;
     return () => {
       nested[0]?.current?.();
@@ -191,7 +193,9 @@ function UnforwardedModal(props, forwardedRef) {
     }) => {
       const isSameTarget = target === pressTarget;
       pressTarget = null;
-      if (button === 0 && isSameTarget) onRequestClose();
+      if (button === 0 && isSameTarget) {
+        onRequestClose();
+      }
     }
   };
   const modal =