@wordpress/components 21.0.6 → 21.0.7
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.
- package/CHANGELOG.md +18 -0
- package/build/autocomplete/index.js +11 -9
- package/build/autocomplete/index.js.map +1 -1
- package/build/circular-option-picker/index.js +14 -14
- package/build/circular-option-picker/index.js.map +1 -1
- package/build/color-palette/index.js +83 -30
- package/build/color-palette/index.js.map +1 -1
- package/build/color-palette/styles.js +3 -3
- package/build/color-palette/styles.js.map +1 -1
- package/build/color-palette/types.js +6 -0
- package/build/color-palette/types.js.map +1 -0
- package/build/form-token-field/index.js +12 -10
- package/build/form-token-field/index.js.map +1 -1
- package/build/popover/index.js +1 -26
- package/build/popover/index.js.map +1 -1
- package/build-module/autocomplete/index.js +10 -9
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/circular-option-picker/index.js +14 -14
- package/build-module/circular-option-picker/index.js.map +1 -1
- package/build-module/color-palette/index.js +81 -28
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-palette/styles.js +3 -3
- package/build-module/color-palette/styles.js.map +1 -1
- package/build-module/color-palette/types.js +2 -0
- package/build-module/color-palette/types.js.map +1 -0
- package/build-module/form-token-field/index.js +11 -10
- package/build-module/form-token-field/index.js.map +1 -1
- package/build-module/popover/index.js +1 -26
- package/build-module/popover/index.js.map +1 -1
- package/build-types/border-control/types.d.ts +1 -1
- package/build-types/border-control/types.d.ts.map +1 -1
- package/build-types/circular-option-picker/index.d.ts +4 -24
- package/build-types/circular-option-picker/index.d.ts.map +1 -1
- package/build-types/color-palette/index.d.ts +33 -18
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/color-palette/stories/index.d.ts +21 -0
- package/build-types/color-palette/stories/index.d.ts.map +1 -0
- package/build-types/color-palette/styles.d.ts +2 -1
- package/build-types/color-palette/styles.d.ts.map +1 -1
- package/build-types/color-palette/test/index.d.ts +2 -0
- package/build-types/color-palette/test/index.d.ts.map +1 -0
- package/build-types/color-palette/types.d.ts +86 -0
- package/build-types/color-palette/types.d.ts.map +1 -0
- package/build-types/confirm-dialog/component.d.ts +4 -4
- package/build-types/form-token-field/index.d.ts.map +1 -1
- package/build-types/popover/index.d.ts.map +1 -1
- package/build-types/popover/types.d.ts +0 -14
- package/build-types/popover/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/autocomplete/index.js +18 -9
- package/src/border-control/types.ts +1 -1
- package/src/circular-option-picker/index.js +14 -20
- package/src/color-palette/README.md +51 -49
- package/src/color-palette/{index.js → index.tsx} +132 -51
- package/src/color-palette/stories/{index.js → index.tsx} +38 -27
- package/src/color-palette/{styles.js → styles.ts} +0 -0
- package/src/color-palette/test/__snapshots__/index.tsx.snap +270 -0
- package/src/color-palette/test/index.tsx +164 -0
- package/src/color-palette/types.ts +93 -0
- package/src/form-token-field/index.tsx +21 -10
- package/src/form-token-field/test/index.tsx +167 -73
- package/src/popover/README.md +3 -9
- package/src/popover/index.tsx +1 -25
- package/src/popover/types.ts +0 -14
- package/tsconfig.tsbuildinfo +1 -1
- package/src/color-palette/test/__snapshots__/index.js.snap +0 -1207
- package/src/color-palette/test/index.js +0 -118
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["find","removeAccents","renderToString","useEffect","useState","useRef","useMemo","__","_n","sprintf","useInstanceId","useDebounce","useMergeRefs","useRefEffect","create","slice","insert","isCollapsed","getTextContent","speak","getAutoCompleterUI","escapeRegExp","useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","code","defaultPrevented","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue} value the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string} query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string} name a way to identify a completer, useful for selective overriding.\n * @property {?string} className A class to apply to the popup menu.\n * @property {string} triggerPrefix the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them.\n * @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option.\n * @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled.\n * @property {FnGetOptionLabel} getOptionLabel get the label for a given option.\n * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.code === 'Backspace';\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.code ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled key should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = removeAccents( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["find","removeAccents","renderToString","useEffect","useState","useRef","useMemo","ENTER","ESCAPE","UP","DOWN","LEFT","RIGHT","BACKSPACE","__","_n","sprintf","useInstanceId","useDebounce","useMergeRefs","useRefEffect","create","slice","insert","isCollapsed","getTextContent","speak","getAutoCompleterUI","escapeRegExp","useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","keyCode","defaultPrevented","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport {\n\tENTER,\n\tESCAPE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tBACKSPACE,\n} from '@wordpress/keycodes';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue} value the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string} query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string} name a way to identify a completer, useful for selective overriding.\n * @property {?string} className A class to apply to the popup menu.\n * @property {string} triggerPrefix the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them.\n * @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option.\n * @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled.\n * @property {FnGetOptionLabel} getOptionLabel get the label for a given option.\n * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.keyCode === BACKSPACE;\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase DOWN:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase ESCAPE:\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase ENTER:\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase LEFT:\n\t\t\tcase RIGHT:\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled keycode should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = removeAccents( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
|
|
@@ -19,14 +19,14 @@ import Button from '../button';
|
|
|
19
19
|
import Dropdown from '../dropdown';
|
|
20
20
|
import Tooltip from '../tooltip';
|
|
21
21
|
|
|
22
|
-
function Option(
|
|
23
|
-
|
|
22
|
+
function Option(props) {
|
|
23
|
+
const {
|
|
24
24
|
className,
|
|
25
25
|
isSelected,
|
|
26
26
|
selectedIconProps,
|
|
27
27
|
tooltipText,
|
|
28
28
|
...additionalProps
|
|
29
|
-
} =
|
|
29
|
+
} = props;
|
|
30
30
|
const optionButton = createElement(Button, _extends({
|
|
31
31
|
isPressed: isSelected,
|
|
32
32
|
className: "components-circular-option-picker__option"
|
|
@@ -40,20 +40,20 @@ function Option(_ref) {
|
|
|
40
40
|
}, selectedIconProps ? selectedIconProps : {})));
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
function DropdownLinkAction(
|
|
44
|
-
|
|
43
|
+
function DropdownLinkAction(props) {
|
|
44
|
+
const {
|
|
45
45
|
buttonProps,
|
|
46
46
|
className,
|
|
47
47
|
dropdownProps,
|
|
48
48
|
linkText
|
|
49
|
-
} =
|
|
49
|
+
} = props;
|
|
50
50
|
return createElement(Dropdown, _extends({
|
|
51
51
|
className: classnames('components-circular-option-picker__dropdown-link-action', className),
|
|
52
|
-
renderToggle:
|
|
52
|
+
renderToggle: _ref => {
|
|
53
53
|
let {
|
|
54
54
|
isOpen,
|
|
55
55
|
onToggle
|
|
56
|
-
} =
|
|
56
|
+
} = _ref;
|
|
57
57
|
return createElement(Button, _extends({
|
|
58
58
|
"aria-expanded": isOpen,
|
|
59
59
|
"aria-haspopup": "true",
|
|
@@ -64,25 +64,25 @@ function DropdownLinkAction(_ref2) {
|
|
|
64
64
|
}, dropdownProps));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
function ButtonAction(
|
|
68
|
-
|
|
67
|
+
function ButtonAction(props) {
|
|
68
|
+
const {
|
|
69
69
|
className,
|
|
70
70
|
children,
|
|
71
71
|
...additionalProps
|
|
72
|
-
} =
|
|
72
|
+
} = props;
|
|
73
73
|
return createElement(Button, _extends({
|
|
74
74
|
className: classnames('components-circular-option-picker__clear', className),
|
|
75
75
|
variant: "tertiary"
|
|
76
76
|
}, additionalProps), children);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
export default function CircularOptionPicker(
|
|
80
|
-
|
|
79
|
+
export default function CircularOptionPicker(props) {
|
|
80
|
+
const {
|
|
81
81
|
actions,
|
|
82
82
|
className,
|
|
83
83
|
options,
|
|
84
84
|
children
|
|
85
|
-
} =
|
|
85
|
+
} = props;
|
|
86
86
|
return createElement("div", {
|
|
87
87
|
className: classnames('components-circular-option-picker', className)
|
|
88
88
|
}, createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,MAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","props","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA,WAJK;AAKL,OAAGC;AALE,MAMFL,KANJ;AAOA,QAAMM,YAAY,GACjB,cAAC,MAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAGZ,UAAU,CACrBQ,SADqB,EAErB,mDAFqB;AADvB,KAMGG,WAAW,GACZ,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,cAAC,IAAD;AACC,IAAA,IAAI,EAAGP;AADR,KAEQQ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASI,kBAAT,CAA6BP,KAA7B,EAAqC;AACpC,QAAM;AAAEQ,IAAAA,WAAF;AAAeP,IAAAA,SAAf;AAA0BQ,IAAAA,aAA1B;AAAyCC,IAAAA;AAAzC,MAAsDV,KAA5D;AACA,SACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CACrB,yDADqB,EAErBQ,SAFqB,CADvB;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEU,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,cAAC,MAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,CAAuBb,KAAvB,EAA+B;AAC9B,QAAM;AAAEC,IAAAA,SAAF;AAAaa,IAAAA,QAAb;AAAuB,OAAGT;AAA1B,MAA8CL,KAApD;AACA,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CACrB,0CADqB,EAErBQ,SAFqB,CADvB;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGS,QARH,CADD;AAYA;;AAED,eAAe,SAASC,oBAAT,CAA+Bf,KAA/B,EAAuC;AACrD,QAAM;AAAEgB,IAAAA,OAAF;AAAWf,IAAAA,SAAX;AAAsBgB,IAAAA,OAAtB;AAA+BH,IAAAA;AAA/B,MAA4Cd,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAGP,UAAU,CACrB,mCADqB,EAErBQ,SAFqB;AADvB,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGgB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;AAEDD,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( props ) {\n\tconst {\n\t\tclassName,\n\t\tisSelected,\n\t\tselectedIconProps,\n\t\ttooltipText,\n\t\t...additionalProps\n\t} = props;\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( props ) {\n\tconst { buttonProps, className, dropdownProps, linkText } = props;\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nfunction ButtonAction( props ) {\n\tconst { className, children, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( props ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { createElement } from "@wordpress/element";
|
|
3
|
-
// @ts-nocheck
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* External dependencies
|
|
@@ -13,7 +12,7 @@ import a11yPlugin from 'colord/plugins/a11y';
|
|
|
13
12
|
*/
|
|
14
13
|
|
|
15
14
|
import { __, sprintf } from '@wordpress/i18n';
|
|
16
|
-
import { useCallback, useMemo } from '@wordpress/element';
|
|
15
|
+
import { useCallback, useMemo, forwardRef } from '@wordpress/element';
|
|
17
16
|
/**
|
|
18
17
|
* Internal dependencies
|
|
19
18
|
*/
|
|
@@ -64,6 +63,11 @@ function SinglePalette(_ref) {
|
|
|
64
63
|
});
|
|
65
64
|
});
|
|
66
65
|
}, [colors, value, onChange, clearColor]);
|
|
66
|
+
|
|
67
|
+
if (colors.length === 0) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
return createElement(CircularOptionPicker, {
|
|
68
72
|
className: className,
|
|
69
73
|
options: colorOptions,
|
|
@@ -80,6 +84,11 @@ function MultiplePalettes(_ref3) {
|
|
|
80
84
|
value,
|
|
81
85
|
actions
|
|
82
86
|
} = _ref3;
|
|
87
|
+
|
|
88
|
+
if (colors.length === 0) {
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
|
|
83
92
|
return createElement(VStack, {
|
|
84
93
|
spacing: 3,
|
|
85
94
|
className: className
|
|
@@ -138,7 +147,7 @@ export const extractColorNameFromCurrentValue = function (currentValue) {
|
|
|
138
147
|
const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop
|
|
139
148
|
|
|
140
149
|
const colorPalettes = showMultiplePalettes ? colors : [{
|
|
141
|
-
colors
|
|
150
|
+
colors: colors
|
|
142
151
|
}];
|
|
143
152
|
|
|
144
153
|
for (const {
|
|
@@ -166,21 +175,34 @@ export const showTransparentBackground = currentValue => {
|
|
|
166
175
|
|
|
167
176
|
return colord(currentValue).alpha() === 0;
|
|
168
177
|
};
|
|
169
|
-
|
|
170
|
-
|
|
178
|
+
|
|
179
|
+
const areColorsMultiplePalette = colors => {
|
|
180
|
+
return colors.every(colorObj => Array.isArray(colorObj.colors));
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
function UnforwardedColorPalette(props, forwardedRef) {
|
|
184
|
+
const {
|
|
171
185
|
clearable = true,
|
|
172
|
-
|
|
173
|
-
colors,
|
|
186
|
+
colors = [],
|
|
174
187
|
disableCustomColors = false,
|
|
175
188
|
enableAlpha,
|
|
176
189
|
onChange,
|
|
177
190
|
value,
|
|
178
191
|
__experimentalHasMultipleOrigins = false,
|
|
179
|
-
__experimentalIsRenderedInSidebar = false
|
|
180
|
-
|
|
192
|
+
__experimentalIsRenderedInSidebar = false,
|
|
193
|
+
...otherProps
|
|
194
|
+
} = props;
|
|
181
195
|
const clearColor = useCallback(() => onChange(undefined), [onChange]);
|
|
182
|
-
const
|
|
183
|
-
|
|
196
|
+
const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, __experimentalHasMultipleOrigins), [value, colors, __experimentalHasMultipleOrigins]); // Make sure that the `colors` array has a format (single/multiple) that is
|
|
197
|
+
// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
|
|
198
|
+
// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
|
|
199
|
+
// either both `true` or both `false`.
|
|
200
|
+
|
|
201
|
+
if (colors.length > 0 && __experimentalHasMultipleOrigins !== areColorsMultiplePalette(colors)) {
|
|
202
|
+
// eslint-disable-next-line no-console
|
|
203
|
+
console.warn('wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.');
|
|
204
|
+
return null;
|
|
205
|
+
}
|
|
184
206
|
|
|
185
207
|
const renderCustomColorPicker = () => createElement(DropdownContentWrapper, {
|
|
186
208
|
paddingSize: "none"
|
|
@@ -190,22 +212,30 @@ export default function ColorPalette(_ref6) {
|
|
|
190
212
|
enableAlpha: enableAlpha
|
|
191
213
|
}));
|
|
192
214
|
|
|
193
|
-
const colordColor = colord(value);
|
|
215
|
+
const colordColor = colord(value !== null && value !== void 0 ? value : '');
|
|
194
216
|
const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : '';
|
|
195
|
-
const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, showMultiplePalettes), [value, colors, showMultiplePalettes]);
|
|
196
217
|
const customColorAccessibleLabel = !!valueWithoutLeadingHash ? sprintf( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
|
|
197
218
|
__('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, valueWithoutLeadingHash) : __('Custom color picker.');
|
|
198
|
-
|
|
219
|
+
const paletteCommonProps = {
|
|
220
|
+
clearable,
|
|
221
|
+
clearColor,
|
|
222
|
+
onChange,
|
|
223
|
+
value,
|
|
224
|
+
actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
|
|
225
|
+
onClick: clearColor
|
|
226
|
+
}, __('Clear'))
|
|
227
|
+
};
|
|
228
|
+
return createElement(VStack, _extends({
|
|
199
229
|
spacing: 3,
|
|
200
|
-
|
|
201
|
-
}, !disableCustomColors && createElement(CustomColorPickerDropdown, {
|
|
230
|
+
ref: forwardedRef
|
|
231
|
+
}, otherProps), !disableCustomColors && createElement(CustomColorPickerDropdown, {
|
|
202
232
|
isRenderedInSidebar: __experimentalIsRenderedInSidebar,
|
|
203
233
|
renderContent: renderCustomColorPicker,
|
|
204
|
-
renderToggle:
|
|
234
|
+
renderToggle: _ref6 => {
|
|
205
235
|
let {
|
|
206
236
|
isOpen,
|
|
207
237
|
onToggle
|
|
208
|
-
} =
|
|
238
|
+
} = _ref6;
|
|
209
239
|
return createElement(Flex, {
|
|
210
240
|
as: 'button',
|
|
211
241
|
justify: "space-between",
|
|
@@ -230,15 +260,38 @@ export default function ColorPalette(_ref6) {
|
|
|
230
260
|
className: "components-color-palette__custom-color-value"
|
|
231
261
|
}, valueWithoutLeadingHash));
|
|
232
262
|
}
|
|
233
|
-
}), createElement(
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
colors: colors
|
|
237
|
-
|
|
238
|
-
value: value,
|
|
239
|
-
actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
|
|
240
|
-
onClick: clearColor
|
|
241
|
-
}, __('Clear'))
|
|
242
|
-
}));
|
|
263
|
+
}), __experimentalHasMultipleOrigins ? createElement(MultiplePalettes, _extends({}, paletteCommonProps, {
|
|
264
|
+
colors: colors
|
|
265
|
+
})) : createElement(SinglePalette, _extends({}, paletteCommonProps, {
|
|
266
|
+
colors: colors
|
|
267
|
+
})));
|
|
243
268
|
}
|
|
269
|
+
/**
|
|
270
|
+
* Allows the user to pick a color from a list of pre-defined color entries.
|
|
271
|
+
*
|
|
272
|
+
* ```jsx
|
|
273
|
+
* import { ColorPalette } from '@wordpress/components';
|
|
274
|
+
* import { useState } from '@wordpress/element';
|
|
275
|
+
*
|
|
276
|
+
* const MyColorPalette = () => {
|
|
277
|
+
* const [ color, setColor ] = useState ( '#f00' )
|
|
278
|
+
* const colors = [
|
|
279
|
+
* { name: 'red', color: '#f00' },
|
|
280
|
+
* { name: 'white', color: '#fff' },
|
|
281
|
+
* { name: 'blue', color: '#00f' },
|
|
282
|
+
* ];
|
|
283
|
+
* return (
|
|
284
|
+
* <ColorPalette
|
|
285
|
+
* colors={ colors }
|
|
286
|
+
* value={ color }
|
|
287
|
+
* onChange={ ( color ) => setColor( color ) }
|
|
288
|
+
* />
|
|
289
|
+
* );
|
|
290
|
+
* } );
|
|
291
|
+
* ```
|
|
292
|
+
*/
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
export const ColorPalette = forwardRef(UnforwardedColorPalette);
|
|
296
|
+
export default ColorPalette;
|
|
244
297
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","DropdownContentWrapper","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n} ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ value }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\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\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","DropdownContentWrapper","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","length","MultiplePalettes","colorPalette","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","areColorsMultiplePalette","every","colorObj","Array","isArray","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","undefined","buttonLabelName","console","warn","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","customColorAccessibleLabel","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue?: string ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nconst areColorsMultiplePalette = (\n\tcolors: NonNullable< ColorPaletteProps[ 'colors' ] >\n): colors is PaletteObject[] => {\n\treturn colors.every( ( colorObj ) =>\n\t\tArray.isArray( ( colorObj as PaletteObject ).colors )\n\t);\n};\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins = false,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = props;\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t),\n\t\t[ value, colors, __experimentalHasMultipleOrigins ]\n\t);\n\n\t// Make sure that the `colors` array has a format (single/multiple) that is\n\t// compatible with the `__experimentalHasMultipleOrigins` flag. This is true\n\t// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are\n\t// either both `true` or both `false`.\n\tif (\n\t\tcolors.length > 0 &&\n\t\t__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ value }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\n\tconst colordColor = colord( value ?? '' );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\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\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ __experimentalHasMultipleOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}
|
|
@@ -11,9 +11,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
|
|
|
11
11
|
*/
|
|
12
12
|
import { Heading } from '../heading';
|
|
13
13
|
export const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV === "production" ? {
|
|
14
|
-
target: "
|
|
14
|
+
target: "ev9wop70"
|
|
15
15
|
} : {
|
|
16
|
-
target: "
|
|
16
|
+
target: "ev9wop70",
|
|
17
17
|
label: "ColorHeading"
|
|
18
18
|
})(process.env.NODE_ENV === "production" ? {
|
|
19
19
|
name: "13lxv2o",
|
|
@@ -21,7 +21,7 @@ export const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV =
|
|
|
21
21
|
} : {
|
|
22
22
|
name: "13lxv2o",
|
|
23
23
|
styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}",
|
|
24
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
24
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
|
|
25
25
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
26
26
|
});
|
|
27
27
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/color-palette/styles.
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/color-palette/styles.ts"],"names":["Heading","ColorHeading"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,YAAxB;AAEA,OAAO,MAAMC,YAAY,GAAG,qBAAQD,OAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -13,6 +13,7 @@ import { useEffect, useRef, useState } from '@wordpress/element';
|
|
|
13
13
|
import { __, _n, sprintf } from '@wordpress/i18n';
|
|
14
14
|
import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
|
|
15
15
|
import { speak } from '@wordpress/a11y';
|
|
16
|
+
import { BACKSPACE, ENTER, UP, DOWN, LEFT, RIGHT, SPACE, DELETE, ESCAPE } from '@wordpress/keycodes';
|
|
16
17
|
import isShallowEqual from '@wordpress/is-shallow-equal';
|
|
17
18
|
/**
|
|
18
19
|
* Internal dependencies
|
|
@@ -162,43 +163,43 @@ export function FormTokenField(props) {
|
|
|
162
163
|
return;
|
|
163
164
|
}
|
|
164
165
|
|
|
165
|
-
switch (event.
|
|
166
|
-
case
|
|
166
|
+
switch (event.keyCode) {
|
|
167
|
+
case BACKSPACE:
|
|
167
168
|
preventDefault = handleDeleteKey(deleteTokenBeforeInput);
|
|
168
169
|
break;
|
|
169
170
|
|
|
170
|
-
case
|
|
171
|
+
case ENTER:
|
|
171
172
|
preventDefault = addCurrentToken();
|
|
172
173
|
break;
|
|
173
174
|
|
|
174
|
-
case
|
|
175
|
+
case LEFT:
|
|
175
176
|
preventDefault = handleLeftArrowKey();
|
|
176
177
|
break;
|
|
177
178
|
|
|
178
|
-
case
|
|
179
|
+
case UP:
|
|
179
180
|
preventDefault = handleUpArrowKey();
|
|
180
181
|
break;
|
|
181
182
|
|
|
182
|
-
case
|
|
183
|
+
case RIGHT:
|
|
183
184
|
preventDefault = handleRightArrowKey();
|
|
184
185
|
break;
|
|
185
186
|
|
|
186
|
-
case
|
|
187
|
+
case DOWN:
|
|
187
188
|
preventDefault = handleDownArrowKey();
|
|
188
189
|
break;
|
|
189
190
|
|
|
190
|
-
case
|
|
191
|
+
case DELETE:
|
|
191
192
|
preventDefault = handleDeleteKey(deleteTokenAfterInput);
|
|
192
193
|
break;
|
|
193
194
|
|
|
194
|
-
case
|
|
195
|
+
case SPACE:
|
|
195
196
|
if (tokenizeOnSpace) {
|
|
196
197
|
preventDefault = addCurrentToken();
|
|
197
198
|
}
|
|
198
199
|
|
|
199
200
|
break;
|
|
200
201
|
|
|
201
|
-
case
|
|
202
|
+
case ESCAPE:
|
|
202
203
|
preventDefault = handleEscapeKey(event);
|
|
203
204
|
break;
|
|
204
205
|
|