npm - @wordpress/components - Versions diffs - 27.4.0 → 27.6.0 - Mend

@wordpress/components 27.4.0 → 27.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1287) hide show

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

	@@ -1 +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":[]}
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 ) {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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\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 CHANGED Viewed

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

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

	@@ -1 +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":[]}
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 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/menu-group/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -41,7 +41,7 @@ export function MenuGroup(props) {
     return null;
   }
   const labelId = `components-menu-group-label-${instanceId}`;
-  const classNames = classnames(className, 'components-menu-group', {
+  const classNames = clsx(className, 'components-menu-group', {
     'has-hidden-separator': hideSeparator
   });
   return createElement("div", {

package/build-module/menu-group/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~classnames~~","Children","useInstanceId","MenuGroup","props","children","className","label","hideSeparator","instanceId","count","labelId","classNames","createElement","id","role","undefined"],"sources":["@wordpress/components/src/menu-group/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n WordPress dependencies\n /\nimport { Children } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { MenuGroupProps } from './types';\n\n/\n `MenuGroup` wraps a series of related `MenuItem` components into a common\n * section.\n \n ```jsx\n * import { MenuGroup, MenuItem } from '@wordpress/components';\n \n const MyMenuGroup = () => (\n * <MenuGroup label=\"Settings\">\n * <MenuItem>Setting 1</MenuItem>\n * <MenuItem>Setting 2</MenuItem>\n * </MenuGroup>\n * );\n * ```\n */\nexport function MenuGroup( props: MenuGroupProps ) {\n\tconst { children, className = '', label, hideSeparator } = props;\n\tconst instanceId = useInstanceId( MenuGroup );\n\n\tif ( ! Children.count( children ) ) {\n\t\treturn null;\n\t}\n\n\tconst labelId = `components-menu-group-label-${ instanceId }`;\n\tconst classNames = ~~classnames~~( className, 'components-menu-group', {\n\t\t'has-hidden-separator': hideSeparator,\n\t} );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t{ label && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-menu-group__label\"\n\t\t\t\t\tid={ labelId }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div role=\"group\" aria-labelledby={ label ? labelId : undefined }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default MenuGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,~~UAAU~~,MAAM,~~YAAY~~;;~~AAEnC~~;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAEC,KAAqB,EAAG;EAClD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,GAAG,EAAE;IAAEC,KAAK;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EAChE,MAAMK,UAAU,GAAGP,aAAa,CAAEC,SAAU,CAAC;EAE7C,IAAK,CAAEF,QAAQ,CAACS,KAAK,CAAEL,QAAS,CAAC,EAAG;IACnC,OAAO,IAAI;EACZ;EAEA,MAAMM,OAAO,GAAI,+BAA+BF,UAAY,EAAC;EAC7D,MAAMG,UAAU,GAAGZ,~~UAAU~~,CAAEM,SAAS,EAAE,uBAAuB,EAAE;~~IAClE~~,sBAAsB,EAAEE;EACzB,CAAE,CAAC;EAEH,OACCK,aAAA;IAAKP,SAAS,EAAGM;EAAY,GAC1BL,KAAK,IACNM,aAAA;IACCP,SAAS,EAAC,8BAA8B;IACxCQ,EAAE,EAAGH,OAAS;IACd,eAAY;EAAM,GAEhBJ,KACE,CACL,EACDM,aAAA;IAAKE,IAAI,EAAC,OAAO;IAAC,mBAAkBR,KAAK,GAAGI,OAAO,GAAGK;EAAW,GAC9DX,QACE,CACD,CAAC;AAER;AAEA,eAAeF,SAAS","ignoreList":[]}
1	+ {"version":3,"names":["clsx","Children","useInstanceId","MenuGroup","props","children","className","label","hideSeparator","instanceId","count","labelId","classNames","createElement","id","role","undefined"],"sources":["@wordpress/components/src/menu-group/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { Children } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { MenuGroupProps } from './types';\n\n/\n `MenuGroup` wraps a series of related `MenuItem` components into a common\n * section.\n \n ```jsx\n * import { MenuGroup, MenuItem } from '@wordpress/components';\n \n const MyMenuGroup = () => (\n * <MenuGroup label=\"Settings\">\n * <MenuItem>Setting 1</MenuItem>\n * <MenuItem>Setting 2</MenuItem>\n * </MenuGroup>\n * );\n * ```\n */\nexport function MenuGroup( props: MenuGroupProps ) {\n\tconst { children, className = '', label, hideSeparator } = props;\n\tconst instanceId = useInstanceId( MenuGroup );\n\n\tif ( ! Children.count( children ) ) {\n\t\treturn null;\n\t}\n\n\tconst labelId = `components-menu-group-label-${ instanceId }`;\n\tconst classNames = clsx( className, 'components-menu-group', {\n\t\t'has-hidden-separator': hideSeparator,\n\t} );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t{ label && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-menu-group__label\"\n\t\t\t\t\tid={ labelId }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div role=\"group\" aria-labelledby={ label ? labelId : undefined }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default MenuGroup;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAEC,KAAqB,EAAG;EAClD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,GAAG,EAAE;IAAEC,KAAK;IAAEC;EAAc,CAAC,GAAGJ,KAAK;EAChE,MAAMK,UAAU,GAAGP,aAAa,CAAEC,SAAU,CAAC;EAE7C,IAAK,CAAEF,QAAQ,CAACS,KAAK,CAAEL,QAAS,CAAC,EAAG;IACnC,OAAO,IAAI;EACZ;EAEA,MAAMM,OAAO,GAAI,+BAA+BF,UAAY,EAAC;EAC7D,MAAMG,UAAU,GAAGZ,IAAI,CAAEM,SAAS,EAAE,uBAAuB,EAAE;IAC5D,sBAAsB,EAAEE;EACzB,CAAE,CAAC;EAEH,OACCK,aAAA;IAAKP,SAAS,EAAGM;EAAY,GAC1BL,KAAK,IACNM,aAAA;IACCP,SAAS,EAAC,8BAA8B;IACxCQ,EAAE,EAAGH,OAAS;IACd,eAAY;EAAM,GAEhBJ,KACE,CACL,EACDM,aAAA;IAAKE,IAAI,EAAC,OAAO;IAAC,mBAAkBR,KAAK,GAAGI,OAAO,GAAGK;EAAW,GAC9DX,QACE,CACD,CAAC;AAER;AAEA,eAAeF,SAAS","ignoreList":[]}

package/build-module/menu-item/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { createElement } from "react";
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ function UnforwardedMenuItem(props, ref) {
     suffix,
     ...buttonProps
   } = props;
-  className = classnames('components-menu-item__button', className);
+  className = clsx('components-menu-item__button', className);
   if (info) {
     children = createElement("span", {
       className: "components-menu-item__info-wrapper"
@@ -41,7 +41,7 @@ function UnforwardedMenuItem(props, ref) {
   }
   if (icon && typeof icon !== 'string') {
     icon = cloneElement(icon, {
-      className: classnames('components-menu-items__item-icon', {
+      className: clsx('components-menu-items__item-icon', {
         'has-icon-right': iconPosition === 'right'
       })
     });

package/build-module/menu-item/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~classnames~~","cloneElement","forwardRef","Shortcut","Button","Icon","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","createElement","undefined","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = ~~classnames~~( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: ~~classnames~~( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' \|\| role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/\n MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n \n ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n \n \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,~~UAAU~~,MAAM,~~YAAY~~;;~~AAEnC~~;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAI1B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGX,~~UAAU~~,CAAE,8BAA8B,EAAEW,SAAU,CAAC;~~EAEnE~~,IAAKD,IAAI,EAAG;IACXD,QAAQ,GACPU,aAAA;MAAMR,SAAS,EAAC;IAAoC,GACnDQ,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGF,QAAgB,CAAC,EAChEU,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGD,IAAY,CACtD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGX,YAAY,CAAEW,IAAI,EAAE;MAC1BD,SAAS,EAAEX,~~UAAU~~,CAAE,kCAAkC,EAAE;~~QAC1D~~,gBAAgB,EAAEa,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,OACCM,aAAA,CAACf,MAAM;IACNI,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IAAA,GAClBO;EAAW,GAEhBC,aAAA;IAAMR,SAAS,EAAC;EAA4B,GAAGF,QAAgB,CAAC,EAC9D,CAAEQ,MAAM,IACTE,aAAA,CAAChB,QAAQ;IACRQ,SAAS,EAAC,gCAAgC;IAC1CG,QAAQ,EAAGA;EAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,IAC7CM,aAAA,CAACd,IAAI;IAACO,IAAI,EAAGA;EAAM,CAAE,CACrB,EACCK,MACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGnB,UAAU,CAAEI,mBAAoB,CAAC;AAEzD,eAAee,QAAQ","ignoreList":[]}
1	+ {"version":3,"names":["clsx","cloneElement","forwardRef","Shortcut","Button","Icon","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","createElement","undefined","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = clsx( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: clsx( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' \|\| role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/\n MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n \n ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n \n \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAI1B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGX,IAAI,CAAE,8BAA8B,EAAEW,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,GACPU,aAAA;MAAMR,SAAS,EAAC;IAAoC,GACnDQ,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGF,QAAgB,CAAC,EAChEU,aAAA;MAAMR,SAAS,EAAC;IAA4B,GAAGD,IAAY,CACtD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGX,YAAY,CAAEW,IAAI,EAAE;MAC1BD,SAAS,EAAEX,IAAI,CAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEa,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,OACCM,aAAA,CAACf,MAAM;IACNI,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IAAA,GAClBO;EAAW,GAEhBC,aAAA;IAAMR,SAAS,EAAC;EAA4B,GAAGF,QAAgB,CAAC,EAC9D,CAAEQ,MAAM,IACTE,aAAA,CAAChB,QAAQ;IACRQ,SAAS,EAAC,gCAAgC;IAC1CG,QAAQ,EAAGA;EAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,IAC7CM,aAAA,CAACd,IAAI;IAACO,IAAI,EAAGA;EAAM,CAAE,CACrB,EACCK,MACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGnB,UAAU,CAAEI,mBAAoB,CAAC;AAEzD,eAAee,QAAQ","ignoreList":[]}

package/build-module/mobile/color-settings/utils.native.js CHANGED Viewed

@@ -27,7 +27,7 @@ export const colorsUtils = {
     picker: 'Picker',
     palette: 'Palette'
   },
-  segments: [__('Solid'), __('Gradient')],
+  segments: [__('Color'), __('Gradient')],
   gradients,
   gradientOptions,
   getGradientType,

package/build-module/mobile/color-settings/utils.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","gradients","linear","radial","gradientOptions","label","value","getGradientType","color","includes","colorsUtils","screens","gradientPicker","picker","palette","segments","isGradient"],"sources":["@wordpress/components/src/mobile/color-settings/utils.native.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst gradients = {\n\tlinear: 'linear-gradient',\n\tradial: 'radial-gradient',\n};\n\nconst gradientOptions = [\n\t{ label: __( 'Linear' ), value: gradients.linear },\n\t{ label: __( 'Radial' ), value: gradients.radial },\n];\n\nconst getGradientType = ( color ) => {\n\tif ( color?.includes( gradients.radial ) ) {\n\t\treturn gradients.radial;\n\t} else if ( color?.includes( gradients.linear ) ) {\n\t\treturn gradients.linear;\n\t}\n\treturn false;\n};\n\nexport const colorsUtils = {\n\tscreens: {\n\t\tgradientPicker: 'GradientPicker',\n\t\tpicker: 'Picker',\n\t\tpalette: 'Palette',\n\t},\n\tsegments: [ __( '~~Solid~~' ), __( 'Gradient' ) ],\n\tgradients,\n\tgradientOptions,\n\tgetGradientType,\n\tisGradient: ( color ) => !! getGradientType( color ),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,MAAMC,SAAS,GAAG;EACjBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE;AACT,CAAC;AAED,MAAMC,eAAe,GAAG,CACvB;EAAEC,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACC;AAAO,CAAC,EAClD;EAAEG,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACE;AAAO,CAAC,CAClD;AAED,MAAMI,eAAe,GAAKC,KAAK,IAAM;EACpC,IAAKA,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACE,MAAO,CAAC,EAAG;IAC1C,OAAOF,SAAS,CAACE,MAAM;EACxB,CAAC,MAAM,IAAKK,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACC,MAAO,CAAC,EAAG;IACjD,OAAOD,SAAS,CAACC,MAAM;EACxB;EACA,OAAO,KAAK;AACb,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAG;EAC1BC,OAAO,EAAE;IACRC,cAAc,EAAE,gBAAgB;IAChCC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE,CAAEf,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,UAAW,CAAC,CAAE;EAC7CC,SAAS;EACTG,eAAe;EACfG,eAAe;EACfS,UAAU,EAAIR,KAAK,IAAM,CAAC,CAAED,eAAe,CAAEC,KAAM;AACpD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__","gradients","linear","radial","gradientOptions","label","value","getGradientType","color","includes","colorsUtils","screens","gradientPicker","picker","palette","segments","isGradient"],"sources":["@wordpress/components/src/mobile/color-settings/utils.native.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst gradients = {\n\tlinear: 'linear-gradient',\n\tradial: 'radial-gradient',\n};\n\nconst gradientOptions = [\n\t{ label: __( 'Linear' ), value: gradients.linear },\n\t{ label: __( 'Radial' ), value: gradients.radial },\n];\n\nconst getGradientType = ( color ) => {\n\tif ( color?.includes( gradients.radial ) ) {\n\t\treturn gradients.radial;\n\t} else if ( color?.includes( gradients.linear ) ) {\n\t\treturn gradients.linear;\n\t}\n\treturn false;\n};\n\nexport const colorsUtils = {\n\tscreens: {\n\t\tgradientPicker: 'GradientPicker',\n\t\tpicker: 'Picker',\n\t\tpalette: 'Palette',\n\t},\n\tsegments: [ __( 'Color' ), __( 'Gradient' ) ],\n\tgradients,\n\tgradientOptions,\n\tgetGradientType,\n\tisGradient: ( color ) => !! getGradientType( color ),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,MAAMC,SAAS,GAAG;EACjBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE;AACT,CAAC;AAED,MAAMC,eAAe,GAAG,CACvB;EAAEC,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACC;AAAO,CAAC,EAClD;EAAEG,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACE;AAAO,CAAC,CAClD;AAED,MAAMI,eAAe,GAAKC,KAAK,IAAM;EACpC,IAAKA,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACE,MAAO,CAAC,EAAG;IAC1C,OAAOF,SAAS,CAACE,MAAM;EACxB,CAAC,MAAM,IAAKK,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACC,MAAO,CAAC,EAAG;IACjD,OAAOD,SAAS,CAACC,MAAM;EACxB;EACA,OAAO,KAAK;AACb,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAG;EAC1BC,OAAO,EAAE;IACRC,cAAc,EAAE,gBAAgB;IAChCC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE,CAAEf,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,UAAW,CAAC,CAAE;EAC7CC,SAAS;EACTG,eAAe;EACfG,eAAe;EACfS,UAAU,EAAIR,KAAK,IAAM,CAAC,CAAED,eAAe,CAAEC,KAAM;AACpD,CAAC","ignoreList":[]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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 {\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":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C,OAAOC,gBAAgB,MAAM,8BAA8B;AAC3D,OAAOC,cAAc,MAAM,iBAAiB;AAC5C;AACA;AACA;AACA,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,cAAc,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAEC,IAAI,QAAQ,uBAAuB;AAC7E,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,OAAO,SAASC,gBAAgBA,CAAEC,aAAa,EAAG;EACjD,MAAMC,SAAS,GAAG,EAAE;EACpB,MAAMC,UAAU,GAAG,0BAA0B;EAC7C,MAAMC,KAAK,GAAGD,UAAU,CAACE,IAAI,CAAEJ,aAAc,CAAC,GAC3CE,UAAU,CAACE,IAAI,CAAEJ,aAAc,CAAC,CAAE,CAAC,CAAE,GACrC,QAAQ;EAEX,MAAMK,SAAS,GAAGF,KAAK,CAACG,QAAQ,CAAE,KAAM,CAAC,GAAG,OAAO,GAAG,cAAc;EAEpE,IAAKD,SAAS,KAAK,cAAc,EAAG;IACnC,QAASF,KAAK;MACb,KAAK,QAAQ;QACZ,OAAO,CAAC;MACT,KAAK,cAAc;MACnB,KAAK,cAAc;QAClB,OAAOF,SAAS;MACjB,KAAK,UAAU;QACd,OAAO,CAAC,GAAGA,SAAS;MACrB,KAAK,iBAAiB;MACtB,KAAK,iBAAiB;QACrB,OAAO,CAAC,GAAGA,SAAS;MACrB,KAAK,WAAW;QACf,OAAO,CAAC,GAAGA,SAAS;MACrB,KAAK,gBAAgB;MACrB,KAAK,gBAAgB;QACpB,OAAO,CAAC,GAAGA,SAAS;MACrB,KAAK,SAAS;QACb,OAAO,CAAC,GAAGA,SAAS;MACrB,KAAK,aAAa;MAClB,KAAK,aAAa;QACjB,OAAO,CAAC,GAAGA,SAAS;IACtB;EACD,CAAC,MAAM,IAAKI,SAAS,KAAK,OAAO,EAAG;IACnC,OAAOE,UAAU,CAAEJ,KAAM,CAAC;EAC3B,CAAC,MAAM;IACN,OAAO,CAAC,GAAGF,SAAS;EACrB;AACD;AAEA,OAAO,SAASO,qBAAqBA,CAAER,aAAa,EAAG;EACtD,MAAMS,oBAAoB,GAAG,CAAE,KAAK,EAAE,MAAM,CAAE;EAE9C,MAAMC,mBAAmB,GAAG,mCAAmC;;EAE/D;EACA;EACA,MAAMC,qBAAqB,GAAGX,aAAa,CAACY,OAAO,CAClDF,mBAAmB,EACnB,kBACD,CAAC;EAED,OAAO,EAAE,CAACG,MAAM,CACf,GAAGxB,cAAc,CAACyB,KAAK,CAAEH,qBAAsB,CAAC,EAAEI,GAAG,CAAIC,QAAQ,IAChEA,QAAQ,CAACC,UAAU,EAAEF,GAAG,CAAE,CAAEG,KAAK,EAAEC,KAAK,KAAM;IAC7C,MAAM;MAAEC,IAAI;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGJ,KAAK;IACrC,MAAMK,cAAc,GAAI,GACvB,GAAG,IAAKJ,KAAK,IAAKH,QAAQ,CAACC,UAAU,CAACK,MAAM,GAAG,CAAC,CAAE,CAClD,GAAE;IACH,MAAME,WAAW,GAAGF,MAAM,GACtB,GAAGA,MAAM,CAACD,KAAO,GAAGC,MAAM,CAACF,IAAM,EAAC,GACnCG,cAAc;IAEjB,IAAKd,oBAAoB,CAACH,QAAQ,CAAEc,IAAK,CAAC,EAAG;MAC5C,OAAO,CAAG,GAAGA,IAAM,IAAIC,KAAK,CAACI,IAAI,CAAE,GAAI,CAAG,GAAE,EAAED,WAAW,CAAE;IAC5D,CAAC,MAAM,IAAKJ,IAAI,KAAK,SAAS,EAAG;MAChC,OAAO,CAAEC,KAAK,EAAEG,WAAW,CAAE;IAC9B;IACA,OAAO,CAAG,IAAIH,KAAO,EAAC,EAAEG,WAAW,CAAE;EACtC,CAAE,CACH,CACD,CAAC;AACF;AAEA,OAAO,SAASE,qBAAqBA,CAAEC,UAAU,EAAG;EACnD,OAAOA,UAAU,CAACZ,GAAG,CAAIG,KAAK,IAAMA,KAAK,CAAE,CAAC,CAAG,CAAC;AACjD;AAEA,OAAO,SAASU,iBAAiBA,CAAED,UAAU,EAAG;EAC/C,OAAOA,UAAU,CAACZ,GAAG,CAClBc,QAAQ,IAAMC,MAAM,CAAED,QAAQ,CAAE,CAAC,CAAE,CAACjB,OAAO,CAAE,GAAG,EAAE,EAAG,CAAE,CAAC,GAAG,GAC9D,CAAC;AACF;AAEA,SAASmB,QAAQA,CAAE;EAClB/B,aAAa;EACbgC,KAAK;EACLC,WAAW,GAAG;IAAEC,CAAC,EAAE,GAAG;IAAEC,CAAC,EAAE;EAAI,CAAC;EAChCC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAG3C,iBAAiB,CAAC,CAAC;EACrD,MAAM;IAAE4C,KAAK,GAAG,CAAC;IAAEC,MAAM,GAAG;EAAE,CAAC,GAAGF,KAAK,IAAI,CAAC,CAAC;EAC7C,MAAM;IAAEG,UAAU;IAAEC,eAAe;IAAEC;EAAU,CAAC,GAAGtD,WAAW;EAE9D,MAAMqC,UAAU,GAAG9B,OAAO,CACzB,MAAMW,qBAAqB,CAAER,aAAc,CAAC,EAC5C,CAAEA,aAAa,CAChB,CAAC;EAED,MAAM6C,SAAS,GAAGhD,OAAO,CACxB,MAAM+B,iBAAiB,CAAED,UAAW,CAAC,EACrC,CAAEA,UAAU,CACb,CAAC;EAED,MAAMmB,MAAM,GAAGjD,OAAO,CACrB,MAAM6B,qBAAqB,CAAEC,UAAW,CAAC,EACzC,CAAEA,UAAU,CACb,CAAC;EAED,IAAK,CAAE3B,aAAa,IAAI,CAAE0C,UAAU,CAAE1C,aAAc,CAAC,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAM+C,gBAAgB,GACrBJ,eAAe,CAAE3C,aAAc,CAAC,KAAK4C,SAAS,CAACI,MAAM;EAEtD,IAAKD,gBAAgB,EAAG;IACvB,OACCE,aAAA,CAAC7D,gBAAgB;MAChB0D,MAAM,EAAGA,MAAQ;MACjBI,QAAQ;MACR/C,KAAK,EAAGJ,gBAAgB,CAAEC,aAAc,CAAG;MAC3C6C,SAAS,EAAGA,SAAW;MACvBZ,WAAW,EAAGA,WAAa;MAC3BD,KAAK,EAAGA,KAAO;MAAA,GACVK;IAAU,GAEbD,QACe,CAAC;EAErB;EAEA,OACCa,aAAA,CAAC/D,IAAI;IAAC8C,KAAK,EAAG,CAAEA,KAAK,EAAElC,MAAM,CAACqD,QAAQ;EAAI,GACzCF,aAAA,CAAC/D,IAAI;IAAC8C,KAAK,EAAGlC,MAAM,CAACsD;EAAuB,GAAGhB,QAAgB,CAAC,EAC9DE,cAAc,EAChBW,aAAA,CAACxD,GAAG,QACHwD,aAAA,CAACvD,IAAI,QACJuD,aAAA,CAAC1D;EACA;EAAA;IACA8D,EAAE,EAAC,gBAAgB;IACnBC,aAAa,EAAC,gBAAgB;IAC9BC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAGtE,QAAQ,CAACuE,EAAE,KAAK,SAAS,GAAGlB,KAAK,GAAG,CAAC,GAAG;EAAO,GAElDb,UAAU,CAACZ,GAAG,CAAI4C,KAAK,IAAM;IAC9B,OACCV,aAAA,CAACzD,IAAI;MACJoE,MAAM,EAAGD,KAAK,CAAE,CAAC,CAAI;MACrBE,SAAS,EAAGF,KAAK,CAAE,CAAC,CAAI;MACxBG,WAAW,EAAC,GAAG;MACfC,GAAG,EAAI,GAAGJ,KAAK,CAAE,CAAC,CAAI,IAAIA,KAAK,CAAE,CAAC,CAAI;IAAG,CACzC,CAAC;EAEJ,CAAE,CACa,CACX,CAAC,EACPV,aAAA,CAACtD,IAAI;IACJ8C,MAAM,EAAGA,MAAQ;IACjBD,KAAK,EAAGA,KAAO;IACfwB,IAAI,EAAC;EAAsB,CAC3B,CACG,CACA,CAAC;AAET;AAEA,eAAejC,QAAQ","ignoreList":[]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";AAAA;AACA;AACA~~;;AAEA~~,SAASA,~~UAAU~~,EAAEC,~~QAAQ~~,QAAQ,cAAc;~~AACnD~~,OAAOC,QAAQ,MAAM,yBAAyB;;AAE9C;AACA;AACA;AACA,SACCC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,mBAAmB,QACb,oBAAoB;AAC3B,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,kBAAkB,MAAM,yBAAyB;AACxD,OAAOC,yBAAyB,MAAM,iCAAiC;~~AAEvE~~,MAAMC,iBAAiB,GAAG,EAAE;AAC5B,MAAMC,~~kBAAkB~~,~~GAAGV~~,QAAQ,~~CAACW~~,uBAAuB,~~CAAEb~~,~~UAAW~~,CAAC;;~~AAEzE~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA~~,OAAO,~~MAAMc~~,qBAAqB,GAAGA,CACpC;EACCC,iBAAiB;EACjBC,QAAQ;EACRC,aAAa;EACbC,~~eAAe;EACfC,~~4BAA4B;EAC5B,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAM;IACLC,aAAa;IACbC,aAAa;IACbC,cAAc;IACdC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,~~GAAGpB~~,SAAS,CAAE;~~IACdS~~,aAAa;~~IACbE~~,4BAA4B;~~IAC5BJ~~,iBAAiB;IACjBC,QAAQ;~~IACRa~~;EACD,CAAE,CAAC;EAEH,MAAM,CAAEC,kBAAkB,CAAE,~~GAAGrB~~,kBAAkB,~~CAChDQ~~,aAAa,~~EACbK~~,aACD,CAAC;EAED,MAAMS,mBAAmB,~~GAAGxB~~,WAAW,CACtCJ,WAAW,CACV,~~MAAQ6B~~,KAAK,IAAM;IAClB,MAAM;MAAEC,WAAW,GAAGtB;IAAkB,CAAC,GAAGqB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC;IACvD,MAAME,eAAe,GAAG,MAAMJ,kBAAkB,CAAEE,KAAM,CAAC;IACzD,MAAMG,kBAAkB,GAAGD,eAAe,KAAK,IAAI;IAEnD,IAAKC,kBAAkB,EAAG;MACzBV,eAAe,CAAES,eAAe,EAAED,WAAY,CAAC;IAChD;EACD,CAAC,EACD,CAAEH,kBAAkB,EAAEL,eAAe,CACtC,CAAC,EACD,GAAG,EACH;IAAEW,OAAO,EAAE;EAAM,CAClB,CAAC;EAED,MAAM,CAAEC,gBAAgB,CAAE,~~GAAG3B~~,yBAAyB,~~CAAEO~~,aAAc,CAAC;EAEvE,~~MAAMY~~,YAAY,~~GAAG1B~~,WAAW,CAC/B,~~MAAM4B~~,mBAAmB,CAAEM,gBAAiB,CAAC,EAC7C,CAAEA,gBAAgB,EAAEN,mBAAmB,CACxC,CAAC;~~EAED3B~~,SAAS,CAAE,MAAM;~~IAChB2B~~,mBAAmB,CAAEM,gBAAiB,CAAC;EACxC,CAAC,EAAE,CAAEA,gBAAgB,EAAEN,mBAAmB,CAAG,CAAC;;EAE9C;EACA;EACA,MAAMO,YAAY,GAAG;IAAEC,MAAM,EAAEf;EAAe,CAAC;EAE/C,MAAMgB,~~KAAK~~,~~GAAG~~,~~CAAE~~;~~IAAEC~~,~~IAAI~~,~~EAAE~~;~~EAAE~~,CAAC,~~EAAEvB~~,~~eAAe~~,~~CAAE~~;~~EAE9CZ~~,mBAAmB,~~CAAEe~~,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNC,aAAa,EAAEA,aAAa,CAACoB,OAAO;MACpCjB,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,~~OACCe~~,~~aAAA~~,~~CAAC/B~~,kBAAkB;~~IAClBgC~~,gCAAgC,EAAG,KAAO;~~IAC1CN~~,YAAY,EAAGA,YAAc;~~IAC7BO~~,yBAAyB,EAAC,SAAS;~~IACnClB~~,mBAAmB,EAAGA,mBAAqB;~~IAC3CX~~,QAAQ,~~EAAGO~~,aAAe;~~IAC1BF~~,~~GAAG,EAAGC,aAAe;IACrBL,aAAa,EAAGA,aAAe;IAC/B6B,~~mBAAmB,EAAG,EAAI;~~IAC1BN~~,KAAK,~~EAAGA;EAAO~~,~~GAEfG~~,~~aAAA~~,~~CAAC1C,QAAQ~~;IAAA,~~GAAMmB~~,~~KAAK~~;~~IAAGH~~,~~aAAa,EAAG~~;~~EAAO~~,~~CAAE~~,~~CAC7B~~,CAAC;~~AAEvB~~,CAAC;AAED,~~eAAeZ~~,UAAU,~~CAAES~~,qBAAsB,CAAC","ignoreList":[]}
1	+ {"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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