npm - @wordpress/components - Versions diffs - 27.2.0 → 27.3.0 - Mend

@wordpress/components 27.2.0 → 27.3.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 (117) hide show

package/build-module/custom-select-control-v2/legacy-component/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","useMemo","_CustomSelect","CustomSelectItem","Styled","ContextSystemProvider","~~CustomSelect~~","props","__experimentalShowSelectedHint","__next40pxDefaultSize","options","onChange","size","value","restProps","store","useSelectStore","setValue","nextValue","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","item","inputValue","isOpen","open","selectedItem","name","key","type","children","map","__experimentalHint","rest","withHint","createElement","WithHintWrapper","ExperimentalHintItem","className","renderSelectedValueHint","currentValue","currentHint","find","Fragment","SelectedExperimentalHintItem","contextSystemValue","selectedSize","CustomSelectControlButton","_overrides","translatedProps","describedBy","renderSelectedValue","undefined"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-component/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n/\n Internal dependencies\n /\nimport _CustomSelect from '../custom-select';\nimport ~~type~~ ~~{ LegacyCustomSelectProps }~~ from '../~~types~~';\nimport { ~~CustomSelectItem~~ } from '..';\nimport as Styled from '../styles';\nimport { ContextSystemProvider } from '../../context';\n\nfunction ~~CustomSelect~~( props: LegacyCustomSelectProps ) {\n\tconst {\n\t\t__experimentalShowSelectedHint,\n\t\t__next40pxDefaultSize = false,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tif ( ! onChange ) return;\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches that in Downshift.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: {\n\t\t\t\t\tname: nextValue as string,\n\t\t\t\t\tkey: nextValue as string,\n\t\t\t\t},\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t} );\n\n\tconst children = options.map(\n\t\t( { name, key, __experimentalHint, ...rest } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.ExperimentalHintItem className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t{ __experimentalHint }\n\t\t\t\t\t</Styled.ExperimentalHintItem>\n\t\t\t\t</Styled.WithHintWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={~~\n\t\t\t\t\t\t__experimentalShowSelectedHint~~ ? withHint : name~~\n\t\t\t\t\t~~}\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst currentHint = options?.find(\n\t\t\t( { name } ) => currentValue === name\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ currentValue }\n\t\t\t\t<Styled.SelectedExperimentalHintItem className=\"components-custom-select-control__hint\">\n\t\t\t\t\t{ currentHint?.__experimentalHint }\n\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t</>\n\t\t);\n\t};\n\n\t// translate legacy button sizing\n\tconst contextSystemValue = useMemo( () => {\n\t\tlet selectedSize;\n\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) \|\|\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\tselectedSize = 'default';\n\t\t} else if ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\tselectedSize = 'compact';\n\t\t} else {\n\t\t\tselectedSize = size;\n\t\t}\n\n\t\treturn {\n\t\t\tCustomSelectControlButton: { _overrides: { size: selectedSize } },\n\t\t};\n\t}, [ __next40pxDefaultSize, size ] );\n\n\tconst translatedProps = {\n\t\t'aria-describedby': props.describedBy,\n\t\tchildren,\n\t\trenderSelectedValue: __experimentalShowSelectedHint\n\t\t\t? renderSelectedValueHint\n\t\t\t: undefined,\n\t\t...restProps,\n\t};\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<_CustomSelect { ...translatedProps } store={ store } />\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default ~~CustomSelect~~;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAC5C;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;~~AAE5C~~,~~SAASC~~,gBAAgB,~~QAAQ~~,~~IAAI~~;~~AACrC~~,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,qBAAqB,QAAQ,eAAe;AAErD,SAASC,~~YAAYA~~,CAAEC,KAA8B,EAAG;~~EACvD~~,MAAM;IACLC,8BAA8B;IAC9BC,qBAAqB,GAAG,KAAK;IAC7BC,OAAO;IACPC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACL,GAAGC;EACJ,CAAC,GAAGP,KAAK;;EAET;EACA,MAAMQ,KAAK,GAAGf,OAAO,CAACgB,cAAc,CAAE;IACrC,MAAMC,QAAQA,CAAEC,SAAS,EAAG;MAC3B,IAAK,CAAEP,QAAQ,EAAG;;MAElB;MACA;MACA,MAAMQ,OAAO,CAACC,OAAO,CAAC,CAAC;MACvB,MAAMC,KAAK,GAAGN,KAAK,CAACO,QAAQ,CAAC,CAAC;MAE9B,MAAMC,YAAY,GAAG;QACpBC,gBAAgB,EAAEH,KAAK,CAACI,aAAa,CAACC,SAAS,CAC5CC,IAAI,IAAMA,IAAI,CAACd,KAAK,KAAKK,SAC5B,CAAC;QACDU,UAAU,EAAE,EAAE;QACdC,MAAM,EAAER,KAAK,CAACS,IAAI;QAClBC,YAAY,EAAE;UACbC,IAAI,EAAEd,SAAmB;UACzBe,GAAG,EAAEf;QACN,CAAC;QACDgB,IAAI,EAAE;MACP,CAAC;MACDvB,QAAQ,CAAEY,YAAa,CAAC;IACzB;EACD,CAAE,CAAC;EAEH,MAAMY,QAAQ,GAAGzB,OAAO,CAAC0B,GAAG,CAC3B,CAAE;IAAEJ,IAAI;IAAEC,GAAG;IAAEI,kBAAkB;IAAE,GAAGC;EAAK,CAAC,KAAM;IACjD,MAAMC,QAAQ,GACbC,aAAA,CAACpC,MAAM,CAACqC,eAAe,QACtBD,aAAA,eAAQR,IAAY,CAAC,EACrBQ,aAAA,CAACpC,MAAM,CAACsC,oBAAoB;MAACC,SAAS,EAAC;IAA6C,GACjFN,kBAC0B,CACN,CACxB;IAED,OACCG,aAAA,CAACrC,gBAAgB;MAChB8B,GAAG,EAAGA,GAAK;MACXpB,KAAK,EAAGmB,IAAM;MACdG,QAAQ,~~EACP3B~~,~~8BAA8B~~,~~GAAG+B~~,QAAQ,GAAGP,~~IAC5C~~;MAAA,~~GACIM~~;IAAI,CACT,CAAC;EAEJ,CACD,CAAC;EAED,MAAMM,uBAAuB,GAAGA,CAAA,KAAM;IACrC,MAAM;MAAE/B,KAAK,EAAEgC;IAAa,CAAC,GAAG9B,KAAK,CAACO,QAAQ,CAAC,CAAC;IAEhD,MAAMwB,WAAW,GAAGpC,OAAO,EAAEqC,IAAI,CAChC,CAAE;MAAEf;IAAK,CAAC,KAAMa,YAAY,KAAKb,IAClC,CAAC;IAED,OACCQ,aAAA,CAAAQ,QAAA,QACGH,YAAY,EACdL,aAAA,CAACpC,MAAM,CAAC6C,4BAA4B;MAACN,SAAS,EAAC;IAAwC,GACpFG,WAAW,EAAET,kBACqB,CACpC,CAAC;EAEL,CAAC;;EAED;EACA,MAAMa,kBAAkB,GAAGjD,OAAO,CAAE,MAAM;IACzC,IAAIkD,YAAY;IAEhB,IACG1C,qBAAqB,IAAIG,IAAI,KAAK,SAAS,IAC7CA,IAAI,KAAK,kBAAkB,EAC1B;MACDuC,YAAY,GAAG,SAAS;IACzB,CAAC,MAAM,IAAK,CAAE1C,qBAAqB,IAAIG,IAAI,KAAK,SAAS,EAAG;MAC3DuC,YAAY,GAAG,SAAS;IACzB,CAAC,MAAM;MACNA,YAAY,GAAGvC,IAAI;IACpB;IAEA,OAAO;MACNwC,yBAAyB,EAAE;QAAEC,UAAU,EAAE;UAAEzC,IAAI,EAAEuC;QAAa;MAAE;IACjE,CAAC;EACF,CAAC,EAAE,CAAE1C,qBAAqB,EAAEG,IAAI,CAAG,CAAC;EAEpC,MAAM0C,eAAe,GAAG;IACvB,kBAAkB,EAAE/C,KAAK,CAACgD,WAAW;IACrCpB,QAAQ;IACRqB,mBAAmB,EAAEhD,8BAA8B,GAChDoC,uBAAuB,GACvBa,SAAS;IACZ,GAAG3C;EACJ,CAAC;EAED,OACC0B,aAAA,CAACnC,qBAAqB;IAACQ,KAAK,EAAGqC;EAAoB,GAClDV,aAAA,CAACtC,aAAa;IAAA,GAAMoD,eAAe;IAAGvC,KAAK,EAAGA;EAAO,CAAE,CACjC,CAAC;AAE1B;AAEA,eAAeT,~~YAAY~~"}
1	+ {"version":3,"names":["Ariakit","useMemo","_CustomSelect","CustomSelectItem","Styled","ContextSystemProvider","CustomSelectControl","props","__experimentalShowSelectedHint","__next40pxDefaultSize","options","onChange","size","value","restProps","store","useSelectStore","setValue","nextValue","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","item","inputValue","isOpen","open","selectedItem","name","key","type","children","map","__experimentalHint","rest","withHint","createElement","WithHintWrapper","ExperimentalHintItem","className","renderSelectedValueHint","currentValue","currentHint","find","Fragment","SelectedExperimentalHintItem","contextSystemValue","selectedSize","CustomSelectControlButton","_overrides","translatedProps","describedBy","renderSelectedValue","undefined"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-component/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n/\n Internal dependencies\n /\nimport _CustomSelect from '../custom-select';\nimport CustomSelectItem from '../item';\nimport type { LegacyCustomSelectProps } from '../types';\nimport as Styled from '../styles';\nimport { ContextSystemProvider } from '../../context';\n\nfunction CustomSelectControl( props: LegacyCustomSelectProps ) {\n\tconst {\n\t\t__experimentalShowSelectedHint,\n\t\t__next40pxDefaultSize = false,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tif ( ! onChange ) return;\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches that in Downshift.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: {\n\t\t\t\t\tname: nextValue as string,\n\t\t\t\t\tkey: nextValue as string,\n\t\t\t\t},\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t} );\n\n\tconst children = options.map(\n\t\t( { name, key, __experimentalHint, ...rest } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.ExperimentalHintItem className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t{ __experimentalHint }\n\t\t\t\t\t</Styled.ExperimentalHintItem>\n\t\t\t\t</Styled.WithHintWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ __experimentalHint ? withHint : name }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst currentHint = options?.find(\n\t\t\t( { name } ) => currentValue === name\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ currentValue }\n\t\t\t\t<Styled.SelectedExperimentalHintItem className=\"components-custom-select-control__hint\">\n\t\t\t\t\t{ currentHint?.__experimentalHint }\n\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t</>\n\t\t);\n\t};\n\n\t// translate legacy button sizing\n\tconst contextSystemValue = useMemo( () => {\n\t\tlet selectedSize;\n\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) \|\|\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\tselectedSize = 'default';\n\t\t} else if ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\tselectedSize = 'compact';\n\t\t} else {\n\t\t\tselectedSize = size;\n\t\t}\n\n\t\treturn {\n\t\t\tCustomSelectControlButton: { _overrides: { size: selectedSize } },\n\t\t};\n\t}, [ __next40pxDefaultSize, size ] );\n\n\tconst translatedProps = {\n\t\t'aria-describedby': props.describedBy,\n\t\tchildren,\n\t\trenderSelectedValue: __experimentalShowSelectedHint\n\t\t\t? renderSelectedValueHint\n\t\t\t: undefined,\n\t\t...restProps,\n\t};\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<_CustomSelect { ...translatedProps } store={ store } />\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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"}

package/build-module/input-control/input-field.js CHANGED Viewed

@@ -14,6 +14,7 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 const noop = () => {};
 function InputField({
   disabled = false,
@@ -190,7 +191,7 @@ function InputField({
     onBlur: handleOnBlur,
     onChange: handleOnChange,
     onFocus: handleOnFocus,
-    onKeyDown: handleOnKeyDown,
+    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),
     onMouseDown: handleOnMouseDown,
     ref: ref,
     inputSize: size

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useDrag","forwardRef","useRef","useDragCursor","Input","useInputControlStateReducer","noop","InputField","disabled","dragDirection","dragThreshold","id","isDragEnabled","isFocused","isPressEnterToChange","onBlur","onChange","onDrag","onDragEnd","onDragStart","onFocus","onKeyDown","onValidate","size","setIsFocused","stateReducer","state","value","valueProp","type","props","ref","change","commit","drag","dragEnd","dragStart","invalidate","pressDown","pressEnter","pressUp","reset","isDragging","isDirty","wasDirtyOnBlur","dragCursor","handleOnBlur","event","target","validity","valid","current","handleOnCommit","handleOnFocus","handleOnChange","nextValue","currentTarget","err","handleOnKeyDown","key","preventDefault","dragGestureProps","dragProps","distance","dragging","stopPropagation","axis","threshold","enabled","pointer","capture","handleOnMouseDown","onMouseDown","ownerDocument","activeElement","focus","createElement","className","inputSize","ForwardedComponent"],"sources":["@wordpress/components/src/input-control/input-field.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport { useDrag } from '@use-gesture/react';\nimport type {\n\tSyntheticEvent,\n\tChangeEvent,\n\tKeyboardEvent,\n\tPointerEvent,\n\tFocusEvent,\n\tForwardedRef,\n\tMouseEvent,\n} from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../context';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport type { InputFieldProps } from './types';\n\nconst noop = () => {};\n\nfunction InputField(\n\t{\n\t\tdisabled = false,\n\t\tdragDirection = 'n',\n\t\tdragThreshold = 10,\n\t\tid,\n\t\tisDragEnabled = false,\n\t\tisFocused,\n\t\tisPressEnterToChange = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonDrag = noop,\n\t\tonDragEnd = noop,\n\t\tonDragStart = noop,\n\t\tonFocus = noop,\n\t\tonKeyDown = noop,\n\t\tonValidate = noop,\n\t\tsize = 'default',\n\t\tsetIsFocused,\n\t\tstateReducer = ( state: any ) => state,\n\t\tvalue: valueProp,\n\t\ttype,\n\t\t...props\n\t}: WordPressComponentProps< InputFieldProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t// State.\n\t\tstate,\n\t\t// Actions.\n\t\tchange,\n\t\tcommit,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t} = useInputControlStateReducer(\n\t\tstateReducer,\n\t\t{\n\t\t\tisDragEnabled,\n\t\t\tvalue: valueProp,\n\t\t\tisPressEnterToChange,\n\t\t},\n\t\tonChange\n\t);\n\n\tconst { value, isDragging, isDirty } = state;\n\tconst wasDirtyOnBlur = useRef( false );\n\n\tconst dragCursor = useDragCursor( isDragging, dragDirection );\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused?.( false );\n\n\t\t/\n\t\t If isPressEnterToChange is set, this commits the value to\n\t\t * the onChange callback.\n\t\t /\n\t\tif ( isDirty \|\| ! event.target.validity.valid ) {\n\t\t\twasDirtyOnBlur.current = true;\n\t\t\thandleOnCommit( event );\n\t\t}\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused?.( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.target.value;\n\t\tchange( nextValue, event );\n\t};\n\n\tconst handleOnCommit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.currentTarget.value;\n\n\t\ttry {\n\t\t\tonValidate( nextValue );\n\t\t\tcommit( nextValue, event );\n\t\t} catch ( err ) {\n\t\t\tinvalidate( err, event );\n\t\t}\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tonKeyDown( event );\n\n\t\tswitch ( key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpressUp( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpressDown( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tpressEnter( event );\n\n\t\t\t\tif ( isPressEnterToChange ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleOnCommit( event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tif ( isPressEnterToChange && isDirty ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treset( valueProp, event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(\n\t\t( dragProps ) => {\n\t\t\tconst { distance, dragging, event, target } = dragProps;\n\n\t\t\t// The `target` prop always references the `input` element while, by\n\t\t\t// default, the `dragProps.event.target` property would reference the real\n\t\t\t// event target (i.e. any DOM element that the pointer is hovering while\n\t\t\t// dragging). Ensuring that the `target` is always the `input` element\n\t\t\t// allows consumers of `InputControl` (or any higher-level control) to\n\t\t\t// check the input's validity by accessing `event.target.validity.valid`.\n\t\t\tdragProps.event = {\n\t\t\t\t...dragProps.event,\n\t\t\t\ttarget,\n\t\t\t};\n\n\t\t\tif ( ! distance ) return;\n\t\t\tevent.stopPropagation();\n\n\t\t\t/\n\t\t\t Quick return if no longer dragging.\n\t\t\t * This prevents unnecessary value calculations.\n\t\t\t /\n\t\t\tif ( ! dragging ) {\n\t\t\t\tonDragEnd( dragProps );\n\t\t\t\tdragEnd( dragProps );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDrag( dragProps );\n\t\t\tdrag( dragProps );\n\n\t\t\tif ( ! isDragging ) {\n\t\t\t\tonDragStart( dragProps );\n\t\t\t\tdragStart( dragProps );\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\taxis: dragDirection === 'e' \|\| dragDirection === 'w' ? 'x' : 'y',\n\t\t\tthreshold: dragThreshold,\n\t\t\tenabled: isDragEnabled,\n\t\t\tpointer: { capture: false },\n\t\t}\n\t);\n\n\tconst dragProps = isDragEnabled ? dragGestureProps() : {};\n\t/\n\t * Works around the odd UA (e.g. Firefox) that does not focus inputs of\n\t * type=number when their spinner arrows are pressed.\n\t */\n\tlet handleOnMouseDown;\n\tif ( type === 'number' ) {\n\t\thandleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {\n\t\t\tprops.onMouseDown?.( event );\n\t\t\tif (\n\t\t\t\tevent.currentTarget !==\n\t\t\t\tevent.currentTarget.ownerDocument.activeElement\n\t\t\t) {\n\t\t\t\tevent.currentTarget.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\treturn (\n\t\t<Input\n\t\t\t{ ...props }\n\t\t\t{ ...dragProps }\n\t\t\tclassName=\"components-input-control__input\"\n\t\t\tdisabled={ disabled }\n\t\t\tdragCursor={ dragCursor }\n\t\t\tisDragging={ isDragging }\n\t\t\tid={ id }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonMouseDown={ handleOnMouseDown }\n\t\t\tref={ ref }\n\t\t\tinputSize={ size }\n\t\t\t// Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/47250 for details.\n\t\t\tvalue={ value ?? '' }\n\t\t\ttype={ type }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputField );\n\nexport default ForwardedComponent;\n"],"mappings":"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"}
1	+ {"version":3,"names":["useDrag","forwardRef","useRef","useDragCursor","Input","useInputControlStateReducer","withIgnoreIMEEvents","noop","InputField","disabled","dragDirection","dragThreshold","id","isDragEnabled","isFocused","isPressEnterToChange","onBlur","onChange","onDrag","onDragEnd","onDragStart","onFocus","onKeyDown","onValidate","size","setIsFocused","stateReducer","state","value","valueProp","type","props","ref","change","commit","drag","dragEnd","dragStart","invalidate","pressDown","pressEnter","pressUp","reset","isDragging","isDirty","wasDirtyOnBlur","dragCursor","handleOnBlur","event","target","validity","valid","current","handleOnCommit","handleOnFocus","handleOnChange","nextValue","currentTarget","err","handleOnKeyDown","key","preventDefault","dragGestureProps","dragProps","distance","dragging","stopPropagation","axis","threshold","enabled","pointer","capture","handleOnMouseDown","onMouseDown","ownerDocument","activeElement","focus","createElement","className","inputSize","ForwardedComponent"],"sources":["@wordpress/components/src/input-control/input-field.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport { useDrag } from '@use-gesture/react';\nimport type {\n\tSyntheticEvent,\n\tChangeEvent,\n\tKeyboardEvent,\n\tPointerEvent,\n\tFocusEvent,\n\tForwardedRef,\n\tMouseEvent,\n} from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../context';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport type { InputFieldProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nconst noop = () => {};\n\nfunction InputField(\n\t{\n\t\tdisabled = false,\n\t\tdragDirection = 'n',\n\t\tdragThreshold = 10,\n\t\tid,\n\t\tisDragEnabled = false,\n\t\tisFocused,\n\t\tisPressEnterToChange = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonDrag = noop,\n\t\tonDragEnd = noop,\n\t\tonDragStart = noop,\n\t\tonFocus = noop,\n\t\tonKeyDown = noop,\n\t\tonValidate = noop,\n\t\tsize = 'default',\n\t\tsetIsFocused,\n\t\tstateReducer = ( state: any ) => state,\n\t\tvalue: valueProp,\n\t\ttype,\n\t\t...props\n\t}: WordPressComponentProps< InputFieldProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t// State.\n\t\tstate,\n\t\t// Actions.\n\t\tchange,\n\t\tcommit,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t} = useInputControlStateReducer(\n\t\tstateReducer,\n\t\t{\n\t\t\tisDragEnabled,\n\t\t\tvalue: valueProp,\n\t\t\tisPressEnterToChange,\n\t\t},\n\t\tonChange\n\t);\n\n\tconst { value, isDragging, isDirty } = state;\n\tconst wasDirtyOnBlur = useRef( false );\n\n\tconst dragCursor = useDragCursor( isDragging, dragDirection );\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused?.( false );\n\n\t\t/\n\t\t If isPressEnterToChange is set, this commits the value to\n\t\t * the onChange callback.\n\t\t /\n\t\tif ( isDirty \|\| ! event.target.validity.valid ) {\n\t\t\twasDirtyOnBlur.current = true;\n\t\t\thandleOnCommit( event );\n\t\t}\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused?.( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.target.value;\n\t\tchange( nextValue, event );\n\t};\n\n\tconst handleOnCommit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.currentTarget.value;\n\n\t\ttry {\n\t\t\tonValidate( nextValue );\n\t\t\tcommit( nextValue, event );\n\t\t} catch ( err ) {\n\t\t\tinvalidate( err, event );\n\t\t}\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tonKeyDown( event );\n\n\t\tswitch ( key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpressUp( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpressDown( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tpressEnter( event );\n\n\t\t\t\tif ( isPressEnterToChange ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleOnCommit( event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tif ( isPressEnterToChange && isDirty ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treset( valueProp, event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(\n\t\t( dragProps ) => {\n\t\t\tconst { distance, dragging, event, target } = dragProps;\n\n\t\t\t// The `target` prop always references the `input` element while, by\n\t\t\t// default, the `dragProps.event.target` property would reference the real\n\t\t\t// event target (i.e. any DOM element that the pointer is hovering while\n\t\t\t// dragging). Ensuring that the `target` is always the `input` element\n\t\t\t// allows consumers of `InputControl` (or any higher-level control) to\n\t\t\t// check the input's validity by accessing `event.target.validity.valid`.\n\t\t\tdragProps.event = {\n\t\t\t\t...dragProps.event,\n\t\t\t\ttarget,\n\t\t\t};\n\n\t\t\tif ( ! distance ) return;\n\t\t\tevent.stopPropagation();\n\n\t\t\t/\n\t\t\t Quick return if no longer dragging.\n\t\t\t * This prevents unnecessary value calculations.\n\t\t\t /\n\t\t\tif ( ! dragging ) {\n\t\t\t\tonDragEnd( dragProps );\n\t\t\t\tdragEnd( dragProps );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDrag( dragProps );\n\t\t\tdrag( dragProps );\n\n\t\t\tif ( ! isDragging ) {\n\t\t\t\tonDragStart( dragProps );\n\t\t\t\tdragStart( dragProps );\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\taxis: dragDirection === 'e' \|\| dragDirection === 'w' ? 'x' : 'y',\n\t\t\tthreshold: dragThreshold,\n\t\t\tenabled: isDragEnabled,\n\t\t\tpointer: { capture: false },\n\t\t}\n\t);\n\n\tconst dragProps = isDragEnabled ? dragGestureProps() : {};\n\t/\n\t * Works around the odd UA (e.g. Firefox) that does not focus inputs of\n\t * type=number when their spinner arrows are pressed.\n\t */\n\tlet handleOnMouseDown;\n\tif ( type === 'number' ) {\n\t\thandleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {\n\t\t\tprops.onMouseDown?.( event );\n\t\t\tif (\n\t\t\t\tevent.currentTarget !==\n\t\t\t\tevent.currentTarget.ownerDocument.activeElement\n\t\t\t) {\n\t\t\t\tevent.currentTarget.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\treturn (\n\t\t<Input\n\t\t\t{ ...props }\n\t\t\t{ ...dragProps }\n\t\t\tclassName=\"components-input-control__input\"\n\t\t\tdisabled={ disabled }\n\t\t\tdragCursor={ dragCursor }\n\t\t\tisDragging={ isDragging }\n\t\t\tid={ id }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }\n\t\t\tonMouseDown={ handleOnMouseDown }\n\t\t\tref={ ref }\n\t\t\tinputSize={ size }\n\t\t\t// Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/47250 for details.\n\t\t\tvalue={ value ?? '' }\n\t\t\ttype={ type }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputField );\n\nexport default ForwardedComponent;\n"],"mappings":"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"}

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

@@ -94,6 +94,7 @@ const PaletteScreen = () => {
   }
   function getClearButton() {
     return createElement(TouchableWithoutFeedback, {
+      accessibilityLabel: __('Clear selected color'),
       onPress: onClear,
       hitSlop: HIT_SLOP
     }, createElement(View, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["View","Text","TouchableWithoutFeedback","__","useState","useContext","usePreferredColorSchemeStyle","ColorControl","PanelBody","BottomSheetContext","useMobileGlobalStylesColors","useRoute","useNavigation","ColorPalette","ColorIndicator","NavBar","SegmentedControls","colorsUtils","styles","HIT_SLOP","top","bottom","left","right","PaletteScreen","route","navigation","shouldEnableBottomSheetScroll","label","onColorChange","onGradientChange","onColorCleared","colorValue","defaultSettings","hideNavigation","params","segments","isGradient","currentValue","setCurrentValue","isGradientColor","selectedSegmentIndex","currentSegment","setCurrentSegment","isGradientSegment","currentSegmentColors","colors","gradients","allAvailableColors","allAvailableGradients","flatMap","filter","Boolean","horizontalSeparatorStyle","horizontalSeparator","horizontalSeparatorDark","clearButtonStyle","clearButton","clearButtonDark","selectedColorTextStyle","colorText","colorTextDark","isSolidSegment","isCustomGadientShown","setColor","color","onClear","undefined","onCustomPress","navigate","screens","picker","gradientPicker","getClearButton","createElement","onPress","hitSlop","style","clearButtonContainer","getFooter","segmentHandler","selectedIndex","indexOf","addonLeft","colorIndicator","addonRight","footer","flex","maxFontSizeMultiplier","selectable","toUpperCase","selectColorText","BackButton","goBack","Heading","colorPalettes","map","palette","paletteKey","paletteSettings","allColors","allGradients","enableCustomColor","name","key","activeColor","Fragment","withColorIndicator"],"sources":["@wordpress/components/src/mobile/color-settings/palette.screen.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState, useContext } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tColorControl,\n\tPanelBody,\n\tBottomSheetContext,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/\n Internal dependencies\n */\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport NavBar from '../bottom-sheet/nav-bar';\nimport SegmentedControls from '../segmented-control';\nimport { colorsUtils } from './utils';\n\nimport styles from './style.scss';\n\nconst HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };\n\nconst PaletteScreen = () => {\n\tconst route = useRoute();\n\tconst navigation = useNavigation();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\tconst {\n\t\tlabel,\n\t\tonColorChange,\n\t\tonGradientChange,\n\t\tonColorCleared,\n\t\tcolorValue,\n\t\tdefaultSettings,\n\t\thideNavigation = false,\n\t} = route.params \|\| {};\n\tconst { segments, isGradient } = colorsUtils;\n\tconst [ currentValue, setCurrentValue ] = useState( colorValue );\n\tconst isGradientColor = isGradient( currentValue );\n\tconst selectedSegmentIndex = isGradientColor ? 1 : 0;\n\n\tconst [ currentSegment, setCurrentSegment ] = useState(\n\t\tsegments[ selectedSegmentIndex ]\n\t);\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\tconst currentSegmentColors = ! isGradientSegment\n\t\t? defaultSettings.colors\n\t\t: defaultSettings.gradients;\n\tconst allAvailableColors = useMobileGlobalStylesColors();\n\tconst allAvailableGradients = currentSegmentColors\n\t\t.flatMap( ( { gradients } ) => gradients )\n\t\t.filter( Boolean );\n\n\tconst horizontalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalSeparator,\n\t\tstyles.horizontalSeparatorDark\n\t);\n\tconst clearButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.clearButton,\n\t\tstyles.clearButtonDark\n\t);\n\tconst selectedColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\n\tconst isSolidSegment = currentSegment === segments[ 0 ];\n\tconst isCustomGadientShown = ! isSolidSegment && isGradientColor;\n\n\tconst setColor = ( color ) => {\n\t\tsetCurrentValue( color );\n\t\tif ( isSolidSegment && onColorChange && onGradientChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( isSolidSegment && onColorChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( ! isSolidSegment && onGradientChange ) {\n\t\t\tonGradientChange( color );\n\t\t}\n\t};\n\n\tfunction onClear() {\n\t\tsetCurrentValue( undefined );\n\n\t\tif ( onColorCleared ) {\n\t\t\tonColorCleared();\n\t\t}\n\t}\n\n\tfunction onCustomPress() {\n\t\tif ( isSolidSegment ) {\n\t\t\tnavigation.navigate( colorsUtils.screens.picker, {\n\t\t\t\tcurrentValue,\n\t\t\t\tsetColor,\n\t\t\t} );\n\t\t} else {\n\t\t\tnavigation.navigate( colorsUtils.screens.gradientPicker, {\n\t\t\t\tsetColor,\n\t\t\t\tisGradientColor,\n\t\t\t\tcurrentValue,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction getClearButton() {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>\n\t\t\t\t<View style={ styles.clearButtonContainer }>\n\t\t\t\t\t<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n\n\tfunction getFooter() {\n\t\tif ( onGradientChange ) {\n\t\t\treturn (\n\t\t\t\t<SegmentedControls\n\t\t\t\t\tsegments={ segments }\n\t\t\t\t\tsegmentHandler={ setCurrentSegment }\n\t\t\t\t\tselectedIndex={ segments.indexOf( currentSegment ) }\n\t\t\t\t\taddonLeft={\n\t\t\t\t\t\tcurrentValue && (\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\taddonRight={ currentValue && getClearButton() }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.footer }>\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t\t{ currentValue ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ selectedColorTextStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t\tselectable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ currentValue.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ styles.selectColorText }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select a color above' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && getClearButton() }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View>\n\t\t\t{ ! hideNavigation && (\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t\t<NavBar.Heading>{ label } </NavBar.Heading>\n\t\t\t\t</NavBar>\n\t\t\t) }\n\n\t\t\t<View style={ styles.colorPalettes }>\n\t\t\t\t{ currentSegmentColors.map( ( palette, paletteKey ) => {\n\t\t\t\t\tconst paletteSettings = {\n\t\t\t\t\t\tcolors: palette.colors,\n\t\t\t\t\t\tgradients: palette.gradients,\n\t\t\t\t\t\tallColors: allAvailableColors,\n\t\t\t\t\t\tallGradients: allAvailableGradients,\n\t\t\t\t\t};\n\t\t\t\t\t// Limit to show the custom indicator to the first available palette\n\t\t\t\t\tconst enableCustomColor = paletteKey === 0;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tenableCustomColor={ enableCustomColor }\n\t\t\t\t\t\t\tlabel={ palette.name }\n\t\t\t\t\t\t\tkey={ paletteKey }\n\t\t\t\t\t\t\tsetColor={ setColor }\n\t\t\t\t\t\t\tactiveColor={ currentValue }\n\t\t\t\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t\t\t\t\tcurrentSegment={ currentSegment }\n\t\t\t\t\t\t\tonCustomPress={ onCustomPress }\n\t\t\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdefaultSettings={ paletteSettings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</View>\n\n\t\t\t{ isCustomGadientShown && (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<ColorControl\n\t\t\t\t\t\t\tlabel={ __( 'Customize Gradient' ) }\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\twithColorIndicator={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t{ getFooter() }\n\t\t</View>\n\t);\n};\n\nexport default PaletteScreen;\n"],"mappings":"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"}
1	+ {"version":3,"names":["View","Text","TouchableWithoutFeedback","__","useState","useContext","usePreferredColorSchemeStyle","ColorControl","PanelBody","BottomSheetContext","useMobileGlobalStylesColors","useRoute","useNavigation","ColorPalette","ColorIndicator","NavBar","SegmentedControls","colorsUtils","styles","HIT_SLOP","top","bottom","left","right","PaletteScreen","route","navigation","shouldEnableBottomSheetScroll","label","onColorChange","onGradientChange","onColorCleared","colorValue","defaultSettings","hideNavigation","params","segments","isGradient","currentValue","setCurrentValue","isGradientColor","selectedSegmentIndex","currentSegment","setCurrentSegment","isGradientSegment","currentSegmentColors","colors","gradients","allAvailableColors","allAvailableGradients","flatMap","filter","Boolean","horizontalSeparatorStyle","horizontalSeparator","horizontalSeparatorDark","clearButtonStyle","clearButton","clearButtonDark","selectedColorTextStyle","colorText","colorTextDark","isSolidSegment","isCustomGadientShown","setColor","color","onClear","undefined","onCustomPress","navigate","screens","picker","gradientPicker","getClearButton","createElement","accessibilityLabel","onPress","hitSlop","style","clearButtonContainer","getFooter","segmentHandler","selectedIndex","indexOf","addonLeft","colorIndicator","addonRight","footer","flex","maxFontSizeMultiplier","selectable","toUpperCase","selectColorText","BackButton","goBack","Heading","colorPalettes","map","palette","paletteKey","paletteSettings","allColors","allGradients","enableCustomColor","name","key","activeColor","Fragment","withColorIndicator"],"sources":["@wordpress/components/src/mobile/color-settings/palette.screen.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState, useContext } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tColorControl,\n\tPanelBody,\n\tBottomSheetContext,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/\n Internal dependencies\n */\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport NavBar from '../bottom-sheet/nav-bar';\nimport SegmentedControls from '../segmented-control';\nimport { colorsUtils } from './utils';\n\nimport styles from './style.scss';\n\nconst HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };\n\nconst PaletteScreen = () => {\n\tconst route = useRoute();\n\tconst navigation = useNavigation();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\tconst {\n\t\tlabel,\n\t\tonColorChange,\n\t\tonGradientChange,\n\t\tonColorCleared,\n\t\tcolorValue,\n\t\tdefaultSettings,\n\t\thideNavigation = false,\n\t} = route.params \|\| {};\n\tconst { segments, isGradient } = colorsUtils;\n\tconst [ currentValue, setCurrentValue ] = useState( colorValue );\n\tconst isGradientColor = isGradient( currentValue );\n\tconst selectedSegmentIndex = isGradientColor ? 1 : 0;\n\n\tconst [ currentSegment, setCurrentSegment ] = useState(\n\t\tsegments[ selectedSegmentIndex ]\n\t);\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\tconst currentSegmentColors = ! isGradientSegment\n\t\t? defaultSettings.colors\n\t\t: defaultSettings.gradients;\n\tconst allAvailableColors = useMobileGlobalStylesColors();\n\tconst allAvailableGradients = currentSegmentColors\n\t\t.flatMap( ( { gradients } ) => gradients )\n\t\t.filter( Boolean );\n\n\tconst horizontalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalSeparator,\n\t\tstyles.horizontalSeparatorDark\n\t);\n\tconst clearButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.clearButton,\n\t\tstyles.clearButtonDark\n\t);\n\tconst selectedColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\n\tconst isSolidSegment = currentSegment === segments[ 0 ];\n\tconst isCustomGadientShown = ! isSolidSegment && isGradientColor;\n\n\tconst setColor = ( color ) => {\n\t\tsetCurrentValue( color );\n\t\tif ( isSolidSegment && onColorChange && onGradientChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( isSolidSegment && onColorChange ) {\n\t\t\tonColorChange( color );\n\t\t} else if ( ! isSolidSegment && onGradientChange ) {\n\t\t\tonGradientChange( color );\n\t\t}\n\t};\n\n\tfunction onClear() {\n\t\tsetCurrentValue( undefined );\n\n\t\tif ( onColorCleared ) {\n\t\t\tonColorCleared();\n\t\t}\n\t}\n\n\tfunction onCustomPress() {\n\t\tif ( isSolidSegment ) {\n\t\t\tnavigation.navigate( colorsUtils.screens.picker, {\n\t\t\t\tcurrentValue,\n\t\t\t\tsetColor,\n\t\t\t} );\n\t\t} else {\n\t\t\tnavigation.navigate( colorsUtils.screens.gradientPicker, {\n\t\t\t\tsetColor,\n\t\t\t\tisGradientColor,\n\t\t\t\tcurrentValue,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction getClearButton() {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\taccessibilityLabel={ __( 'Clear selected color' ) }\n\t\t\t\tonPress={ onClear }\n\t\t\t\thitSlop={ HIT_SLOP }\n\t\t\t>\n\t\t\t\t<View style={ styles.clearButtonContainer }>\n\t\t\t\t\t<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n\n\tfunction getFooter() {\n\t\tif ( onGradientChange ) {\n\t\t\treturn (\n\t\t\t\t<SegmentedControls\n\t\t\t\t\tsegments={ segments }\n\t\t\t\t\tsegmentHandler={ setCurrentSegment }\n\t\t\t\t\tselectedIndex={ segments.indexOf( currentSegment ) }\n\t\t\t\t\taddonLeft={\n\t\t\t\t\t\tcurrentValue && (\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\taddonRight={ currentValue && getClearButton() }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.footer }>\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolor={ currentValue }\n\t\t\t\t\t\t\tstyle={ styles.colorIndicator }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t\t{ currentValue ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ selectedColorTextStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t\tselectable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ currentValue.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ styles.selectColorText }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select a color above' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<View style={ styles.flex }>\n\t\t\t\t\t{ currentValue && getClearButton() }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View>\n\t\t\t{ ! hideNavigation && (\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t\t<NavBar.Heading>{ label } </NavBar.Heading>\n\t\t\t\t</NavBar>\n\t\t\t) }\n\n\t\t\t<View style={ styles.colorPalettes }>\n\t\t\t\t{ currentSegmentColors.map( ( palette, paletteKey ) => {\n\t\t\t\t\tconst paletteSettings = {\n\t\t\t\t\t\tcolors: palette.colors,\n\t\t\t\t\t\tgradients: palette.gradients,\n\t\t\t\t\t\tallColors: allAvailableColors,\n\t\t\t\t\t\tallGradients: allAvailableGradients,\n\t\t\t\t\t};\n\t\t\t\t\t// Limit to show the custom indicator to the first available palette\n\t\t\t\t\tconst enableCustomColor = paletteKey === 0;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tenableCustomColor={ enableCustomColor }\n\t\t\t\t\t\t\tlabel={ palette.name }\n\t\t\t\t\t\t\tkey={ paletteKey }\n\t\t\t\t\t\t\tsetColor={ setColor }\n\t\t\t\t\t\t\tactiveColor={ currentValue }\n\t\t\t\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t\t\t\t\tcurrentSegment={ currentSegment }\n\t\t\t\t\t\t\tonCustomPress={ onCustomPress }\n\t\t\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdefaultSettings={ paletteSettings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</View>\n\n\t\t\t{ isCustomGadientShown && (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<ColorControl\n\t\t\t\t\t\t\tlabel={ __( 'Customize Gradient' ) }\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\twithColorIndicator={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<View style={ horizontalSeparatorStyle } />\n\t\t\t{ getFooter() }\n\t\t</View>\n\t);\n};\n\nexport default PaletteScreen;\n"],"mappings":"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"}

package/build-module/navigable-container/container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Component","forwardRef","focus","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","constructor","args","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","tabbable","focusable","focusables","find","index","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","preventDefault","activeElement","ownerDocument","context","nextIndex","length","code","render","children","restProps","createElement","forwardedNavigableContainer","displayName"],"sources":["@wordpress/components/src/navigable-container/container.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/\n Internal dependencies\n */\nimport type { NavigableContainerProps } from './types';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value: number, total: number, offset: number ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component< NavigableContainerProps > {\n\tcontainer?: HTMLDivElement;\n\n\tconstructor( args: NavigableContainerProps ) {\n\t\tsuper( args );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tbindContainer( ref: HTMLDivElement ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target: Element ) {\n\t\tif ( ! this.container ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container ) as HTMLElement[];\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables: Element[], target: Element ) {\n\t\treturn focusables.indexOf( target );\n\t}\n\n\tonKeyDown( event: KeyboardEvent ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = (\n\t\t\t\tevent.target as HTMLDivElement \| null\n\t\t\t )?.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\t!! targetRole && MENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\tif ( targetHasMenuItemRole ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = ( event.target as HTMLElement \| null )\n\t\t\t?.ownerDocument?.activeElement;\n\t\tif ( ! activeElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext( activeElement );\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tif ( event.code === 'Tab' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = (\n\tprops: NavigableContainerProps,\n\tref: ForwardedRef< HTMLDivElement >\n) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"],"mappings":"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"}
1	+ {"version":3,"names":["Component","forwardRef","focus","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","constructor","args","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","tabbable","focusable","focusables","find","index","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","preventDefault","activeElement","ownerDocument","context","nextIndex","length","code","render","children","restProps","createElement","forwardedNavigableContainer","displayName"],"sources":["@wordpress/components/src/navigable-container/container.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/\n Internal dependencies\n */\nimport type { NavigableContainerProps } from './types';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value: number, total: number, offset: number ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component< NavigableContainerProps > {\n\tcontainer?: HTMLDivElement;\n\n\tconstructor( args: NavigableContainerProps ) {\n\t\tsuper( args );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tbindContainer( ref: HTMLDivElement ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target: Element ) {\n\t\tif ( ! this.container ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container );\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables: Element[], target: Element ) {\n\t\treturn focusables.indexOf( target );\n\t}\n\n\tonKeyDown( event: KeyboardEvent ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = (\n\t\t\t\tevent.target as HTMLDivElement \| null\n\t\t\t )?.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\t!! targetRole && MENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\tif ( targetHasMenuItemRole ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = ( event.target as HTMLElement \| null )\n\t\t\t?.ownerDocument?.activeElement;\n\t\tif ( ! activeElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext( activeElement );\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tif ( event.code === 'Tab' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = (\n\tprops: NavigableContainerProps,\n\tref: ForwardedRef< HTMLDivElement >\n) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"],"mappings":"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"}

package/build-module/navigator/navigator-provider/component.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { useMemo, useState, useCallback, useReducer, useRef, useEffect } from '@wordpress/element';
+import { useMemo, useReducer } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
@@ -20,14 +20,127 @@ import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import * as styles from '../styles';
 const MAX_HISTORY_LENGTH = 50;
-function screensReducer(state = [], action) {
+function addScreen({
+  screens
+}, screen) {
+  return [...screens, screen];
+}
+function removeScreen({
+  screens
+}, screen) {
+  return screens.filter(s => s.id !== screen.id);
+}
+function goBack({
+  locationHistory
+}) {
+  if (locationHistory.length <= 1) {
+    return locationHistory;
+  }
+  return [...locationHistory.slice(0, -2), {
+    ...locationHistory[locationHistory.length - 2],
+    isBack: true,
+    hasRestoredFocus: false
+  }];
+}
+function goTo(state, path, options = {}) {
+  const {
+    locationHistory
+  } = state;
+  const {
+    focusTargetSelector,
+    isBack = false,
+    skipFocus = false,
+    replace = false,
+    ...restOptions
+  } = options;
+  const isNavigatingToPreviousPath = isBack && locationHistory.length > 1 && locationHistory[locationHistory.length - 2].path === path;
+  if (isNavigatingToPreviousPath) {
+    return goBack(state);
+  }
+  const newLocation = {
+    ...restOptions,
+    path,
+    isBack,
+    hasRestoredFocus: false,
+    skipFocus
+  };
+  if (locationHistory.length === 0) {
+    return replace ? [] : [newLocation];
+  }
+  const newLocationHistory = locationHistory.slice(locationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
+  if (!replace) {
+    newLocationHistory.push(
+    // Assign `focusTargetSelector` to the previous location in history
+    // (the one we just navigated from).
+    {
+      ...locationHistory[locationHistory.length - 1],
+      focusTargetSelector
+    });
+  }
+  newLocationHistory.push(newLocation);
+  return newLocationHistory;
+}
+function goToParent(state, options = {}) {
+  const {
+    locationHistory,
+    screens
+  } = state;
+  const currentPath = locationHistory[locationHistory.length - 1].path;
+  if (currentPath === undefined) {
+    return locationHistory;
+  }
+  const parentPath = findParent(currentPath, screens);
+  if (parentPath === undefined) {
+    return locationHistory;
+  }
+  return goTo(state, parentPath, {
+    ...options,
+    isBack: true
+  });
+}
+function routerReducer(state, action) {
+  let {
+    screens,
+    locationHistory,
+    matchedPath
+  } = state;
   switch (action.type) {
     case 'add':
-      return [...state, action.screen];
+      screens = addScreen(state, action.screen);
+      break;
     case 'remove':
-      return state.filter(s => s.id !== action.screen.id);
+      screens = removeScreen(state, action.screen);
+      break;
+    case 'goback':
+      locationHistory = goBack(state);
+      break;
+    case 'goto':
+      locationHistory = goTo(state, action.path, action.options);
+      break;
+    case 'gotoparent':
+      locationHistory = goToParent(state, action.options);
+      break;
+  }
+  // Return early in case there is no change
+  if (screens === state.screens && locationHistory === state.locationHistory) {
+    return state;
   }
-  return state;
+  // Compute the matchedPath
+  const currentPath = locationHistory.length > 0 ? locationHistory[locationHistory.length - 1].path : undefined;
+  matchedPath = currentPath !== undefined ? patternMatch(currentPath, screens) : undefined;
+  // If the new match is the same as the previous match,
+  // return the previous one to keep immutability.
+  if (matchedPath && state.matchedPath && matchedPath.id === state.matchedPath.id && isShallowEqual(matchedPath.params, state.matchedPath.params)) {
+    matchedPath = state.matchedPath;
+  }
+  return {
+    screens,
+    locationHistory,
+    matchedPath
+  };
 }
 function UnconnectedNavigatorProvider(props, forwardedRef) {
   const {
@@ -36,124 +149,53 @@ function UnconnectedNavigatorProvider(props, forwardedRef) {
     className,
     ...otherProps
   } = useContextSystem(props, 'NavigatorProvider');
-  const [locationHistory, setLocationHistory] = useState([{
-    path: initialPath
-  }]);
-  const currentLocationHistory = useRef([]);
-  const [screens, dispatch] = useReducer(screensReducer, []);
-  const currentScreens = useRef([]);
-  useEffect(() => {
-    currentScreens.current = screens;
-  }, [screens]);
-  useEffect(() => {
-    currentLocationHistory.current = locationHistory;
-  }, [locationHistory]);
-  const currentMatch = useRef();
-  const matchedPath = useMemo(() => {
-    let currentPath;
-    if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) {
-      currentMatch.current = undefined;
-      return undefined;
-    }
-    const resolvePath = path => {
-      const newMatch = patternMatch(path, screens);
+  const [routerState, dispatch] = useReducer(routerReducer, initialPath, path => ({
+    screens: [],
+    locationHistory: [{
+      path
+    }],
+    matchedPath: undefined
+  }));
-      // If the new match is the same as the current match,
-      // return the previous one for performance reasons.
-      if (currentMatch.current && newMatch && isShallowEqual(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) {
-        return currentMatch.current;
-      }
-      return newMatch;
-    };
-    const newMatch = resolvePath(currentPath);
-    currentMatch.current = newMatch;
-    return newMatch;
-  }, [screens, locationHistory]);
-  const addScreen = useCallback(screen => dispatch({
-    type: 'add',
-    screen
+  // The methods are constant forever, create stable references to them.
+  const methods = useMemo(() => ({
+    goBack: () => dispatch({
+      type: 'goback'
+    }),
+    goTo: (path, options) => dispatch({
+      type: 'goto',
+      path,
+      options
+    }),
+    goToParent: options => dispatch({
+      type: 'gotoparent',
+      options
+    }),
+    addScreen: screen => dispatch({
+      type: 'add',
+      screen
+    }),
+    removeScreen: screen => dispatch({
+      type: 'remove',
+      screen
+    })
   }), []);
-  const removeScreen = useCallback(screen => dispatch({
-    type: 'remove',
-    screen
-  }), []);
-  const goBack = useCallback(() => {
-    setLocationHistory(prevLocationHistory => {
-      if (prevLocationHistory.length <= 1) {
-        return prevLocationHistory;
-      }
-      return [...prevLocationHistory.slice(0, -2), {
-        ...prevLocationHistory[prevLocationHistory.length - 2],
-        isBack: true,
-        hasRestoredFocus: false
-      }];
-    });
-  }, []);
-  const goTo = useCallback((path, options = {}) => {
-    const {
-      focusTargetSelector,
-      isBack = false,
-      skipFocus = false,
-      replace = false,
-      ...restOptions
-    } = options;
-    const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path;
-    if (isNavigatingToPreviousPath) {
-      goBack();
-      return;
-    }
-    setLocationHistory(prevLocationHistory => {
-      const newLocation = {
-        ...restOptions,
-        path,
-        isBack,
-        hasRestoredFocus: false,
-        skipFocus
-      };
-      if (prevLocationHistory.length === 0) {
-        return replace ? [] : [newLocation];
-      }
-      const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
-      if (!replace) {
-        newLocationHistory.push(
-        // Assign `focusTargetSelector` to the previous location in history
-        // (the one we just navigated from).
-        {
-          ...prevLocationHistory[prevLocationHistory.length - 1],
-          focusTargetSelector
-        });
-      }
-      newLocationHistory.push(newLocation);
-      return newLocationHistory;
-    });
-  }, [goBack]);
-  const goToParent = useCallback((options = {}) => {
-    const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path;
-    if (currentPath === undefined) {
-      return;
-    }
-    const parentPath = findParent(currentPath, currentScreens.current);
-    if (parentPath === undefined) {
-      return;
-    }
-    goTo(parentPath, {
-      ...options,
-      isBack: true
-    });
-  }, [goTo]);
-  const navigatorContextValue = useMemo(() => ({
-    location: {
-      ...locationHistory[locationHistory.length - 1],
-      isInitial: locationHistory.length === 1
-    },
-    params: matchedPath ? matchedPath.params : {},
-    match: matchedPath ? matchedPath.id : undefined,
-    goTo,
-    goBack,
-    goToParent,
-    addScreen,
-    removeScreen
-  }), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]);
+  const {
+    locationHistory,
+    matchedPath
+  } = routerState;
+  const navigatorContextValue = useMemo(() => {
+    var _matchedPath$params;
+    return {
+      location: {
+        ...locationHistory[locationHistory.length - 1],
+        isInitial: locationHistory.length === 1
+      },
+      params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {},
+      match: matchedPath?.id,
+      ...methods
+    };
+  }, [locationHistory, matchedPath, methods]);
   const cx = useCx();
   const classes = useMemo(() => cx(styles.navigatorProviderWrapper, className), [className, cx]);
   return createElement(View, {