Edit File by line

* ```jsx

[46000] Fix | Delete

* import { PaletteEdit } from '@wordpress/components';

[46001] Fix | Delete

* const MyPaletteEdit = () => {

[46002] Fix | Delete

* const [ controlledColors, setControlledColors ] = useState( colors );

[46003] Fix | Delete

[46004] Fix | Delete

* return (

[46005] Fix | Delete

* <PaletteEdit

[46006] Fix | Delete

* colors={ controlledColors }

[46007] Fix | Delete

* onChange={ ( newColors?: Color[] ) => {

[46008] Fix | Delete

* setControlledColors( newColors );

[46009] Fix | Delete

* } }

[46010] Fix | Delete

* paletteLabel="Here is a label"

[46011] Fix | Delete

* />

[46012] Fix | Delete

* );

[46013] Fix | Delete

* };

[46014] Fix | Delete

* ```

[46015] Fix | Delete

[46016] Fix | Delete

function PaletteEdit({

[46017] Fix | Delete

gradients,

[46018] Fix | Delete

colors = EMPTY_ARRAY,

[46019] Fix | Delete

onChange,

[46020] Fix | Delete

paletteLabel,

[46021] Fix | Delete

paletteLabelHeadingLevel = 2,

[46022] Fix | Delete

emptyMessage,

[46023] Fix | Delete

canOnlyChangeValues,

[46024] Fix | Delete

canReset,

[46025] Fix | Delete

slugPrefix = '',

[46026] Fix | Delete

popoverProps

[46027] Fix | Delete

}) {

[46028] Fix | Delete

const isGradient = !!gradients;

[46029] Fix | Delete

const elements = isGradient ? gradients : colors;

[46030] Fix | Delete

const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false);

[46031] Fix | Delete

const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null);

[46032] Fix | Delete

const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;

[46033] Fix | Delete

const elementsLength = elements.length;

[46034] Fix | Delete

const hasElements = elementsLength > 0;

[46035] Fix | Delete

const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);

[46036] Fix | Delete

const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => {

[46037] Fix | Delete

const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];

[46038] Fix | Delete

const key = isGradient ? 'gradient' : 'color';

[46039] Fix | Delete

// Ensures that the index returned matches a known element value.

[46040] Fix | Delete

if (!!selectedElement && selectedElement[key] === value) {

[46041] Fix | Delete

setEditingElement(newEditingElementIndex);

[46042] Fix | Delete

} else {

[46043] Fix | Delete

setIsEditing(true);

[46044] Fix | Delete

}

[46045] Fix | Delete

}, [isGradient, elements]);

[46046] Fix | Delete

const addColorRef = (0,external_wp_element_namespaceObject.useRef)(null);

[46047] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditStyles, {

[46048] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {

[46049] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteHeading, {

[46050] Fix | Delete

level: paletteLabelHeadingLevel,

[46051] Fix | Delete

children: paletteLabel

[46052] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteActionsContainer, {

[46053] Fix | Delete

children: [hasElements && isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DoneButton, {

[46054] Fix | Delete

size: "small",

[46055] Fix | Delete

onClick: () => {

[46056] Fix | Delete

setIsEditing(false);

[46057] Fix | Delete

setEditingElement(null);

[46058] Fix | Delete

[46059] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Done')

[46060] Fix | Delete

}), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[46061] Fix | Delete

ref: addColorRef,

[46062] Fix | Delete

size: "small",

[46063] Fix | Delete

isPressed: isAdding,

[46064] Fix | Delete

icon: library_plus,

[46065] Fix | Delete

label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'),

[46066] Fix | Delete

onClick: () => {

[46067] Fix | Delete

const {

[46068] Fix | Delete

name,

[46069] Fix | Delete

slug

[46070] Fix | Delete

} = getNameAndSlugForPosition(elements, slugPrefix);

[46071] Fix | Delete

if (!!gradients) {

[46072] Fix | Delete

onChange([...gradients, {

[46073] Fix | Delete

gradient: DEFAULT_GRADIENT,

[46074] Fix | Delete

name,

[46075] Fix | Delete

slug

[46076] Fix | Delete

}]);

[46077] Fix | Delete

} else {

[46078] Fix | Delete

onChange([...colors, {

[46079] Fix | Delete

color: DEFAULT_COLOR,

[46080] Fix | Delete

name,

[46081] Fix | Delete

slug

[46082] Fix | Delete

}]);

[46083] Fix | Delete

}

[46084] Fix | Delete

setIsEditing(true);

[46085] Fix | Delete

setEditingElement(elements.length);

[46086] Fix | Delete

}

[46087] Fix | Delete

}), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, {

[46088] Fix | Delete

icon: more_vertical,

[46089] Fix | Delete

label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'),

[46090] Fix | Delete

toggleProps: {

[46091] Fix | Delete

size: 'small'

[46092] Fix | Delete

[46093] Fix | Delete

children: ({

[46094] Fix | Delete

onClose

[46095] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[46096] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, {

[46097] Fix | Delete

role: "menu",

[46098] Fix | Delete

children: [!isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[46099] Fix | Delete

variant: "tertiary",

[46100] Fix | Delete

onClick: () => {

[46101] Fix | Delete

setIsEditing(true);

[46102] Fix | Delete

onClose();

[46103] Fix | Delete

[46104] Fix | Delete

className: "components-palette-edit__menu-button",

[46105] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Show details')

[46106] Fix | Delete

}), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[46107] Fix | Delete

variant: "tertiary",

[46108] Fix | Delete

onClick: () => {

[46109] Fix | Delete

setEditingElement(null);

[46110] Fix | Delete

setIsEditing(false);

[46111] Fix | Delete

onChange();

[46112] Fix | Delete

onClose();

[46113] Fix | Delete

[46114] Fix | Delete

className: "components-palette-edit__menu-button",

[46115] Fix | Delete

children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')

[46116] Fix | Delete

}), canReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[46117] Fix | Delete

variant: "tertiary",

[46118] Fix | Delete

onClick: () => {

[46119] Fix | Delete

setEditingElement(null);

[46120] Fix | Delete

onChange();

[46121] Fix | Delete

onClose();

[46122] Fix | Delete

[46123] Fix | Delete

children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors')

[46124] Fix | Delete

})]

[46125] Fix | Delete

})

[46126] Fix | Delete

})

[46127] Fix | Delete

})]

[46128] Fix | Delete

})]

[46129] Fix | Delete

}), hasElements && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditContents, {

[46130] Fix | Delete

children: [isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditListView, {

[46131] Fix | Delete

canOnlyChangeValues: canOnlyChangeValues,

[46132] Fix | Delete

elements: elements

[46133] Fix | Delete

// @ts-expect-error TODO: Don't know how to resolve

[46134] Fix | Delete

[46135] Fix | Delete

onChange: onChange,

[46136] Fix | Delete

slugPrefix: slugPrefix,

[46137] Fix | Delete

isGradient: isGradient,

[46138] Fix | Delete

popoverProps: popoverProps,

[46139] Fix | Delete

addColorRef: addColorRef

[46140] Fix | Delete

}), !isEditing && editingElement !== null && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, {

[46141] Fix | Delete

isGradient: isGradient,

[46142] Fix | Delete

onClose: () => setEditingElement(null),

[46143] Fix | Delete

onChange: newElement => {

[46144] Fix | Delete

debounceOnChange(

[46145] Fix | Delete

// @ts-expect-error TODO: Don't know how to resolve

[46146] Fix | Delete

elements.map((currentElement, currentIndex) => {

[46147] Fix | Delete

if (currentIndex === editingElement) {

[46148] Fix | Delete

return newElement;

[46149] Fix | Delete

}

[46150] Fix | Delete

return currentElement;

[46151] Fix | Delete

}));

[46152] Fix | Delete

[46153] Fix | Delete

element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],

[46154] Fix | Delete

popoverProps: popoverProps

[46155] Fix | Delete

}), !isEditing && (isGradient ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker, {

[46156] Fix | Delete

gradients: gradients,

[46157] Fix | Delete

onChange: onSelectPaletteItem,

[46158] Fix | Delete

clearable: false,

[46159] Fix | Delete

disableCustomGradients: true

[46160] Fix | Delete

}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {

[46161] Fix | Delete

colors: colors,

[46162] Fix | Delete

onChange: onSelectPaletteItem,

[46163] Fix | Delete

clearable: false,

[46164] Fix | Delete

disableCustomColors: true

[46165] Fix | Delete

}))]

[46166] Fix | Delete

}), !hasElements && emptyMessage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditContents, {

[46167] Fix | Delete

children: emptyMessage

[46168] Fix | Delete

})]

[46169] Fix | Delete

});

[46170] Fix | Delete

}

[46171] Fix | Delete

/* harmony default export */ const palette_edit = (PaletteEdit);

[46172] Fix | Delete

[46173] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/styles.js

[46174] Fix | Delete

[46175] Fix | Delete

/**

[46176] Fix | Delete

* External dependencies

[46177] Fix | Delete

[46178] Fix | Delete

[46179] Fix | Delete

[46180] Fix | Delete

[46181] Fix | Delete

/**

[46182] Fix | Delete

* Internal dependencies

[46183] Fix | Delete

[46184] Fix | Delete

[46185] Fix | Delete

[46186] Fix | Delete

const deprecatedDefaultSize = ({

[46187] Fix | Delete

__next40pxDefaultSize

[46188] Fix | Delete

}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0), true ? "" : 0);

[46189] Fix | Delete

const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? {

[46190] Fix | Delete

target: "evuatpg0"

[46191] Fix | Delete

} : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0));

[46192] Fix | Delete

[46193] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js

[46194] Fix | Delete

/**

[46195] Fix | Delete

* External dependencies

[46196] Fix | Delete

[46197] Fix | Delete

[46198] Fix | Delete

/**

[46199] Fix | Delete

* WordPress dependencies

[46200] Fix | Delete

[46201] Fix | Delete

[46202] Fix | Delete

[46203] Fix | Delete

/**

[46204] Fix | Delete

* Internal dependencies

[46205] Fix | Delete

[46206] Fix | Delete

[46207] Fix | Delete

function UnForwardedTokenInput(props, ref) {

[46208] Fix | Delete

const {

[46209] Fix | Delete

value,

[46210] Fix | Delete

isExpanded,

[46211] Fix | Delete

instanceId,

[46212] Fix | Delete

selectedSuggestionIndex,

[46213] Fix | Delete

className,

[46214] Fix | Delete

onChange,

[46215] Fix | Delete

onFocus,

[46216] Fix | Delete

onBlur,

[46217] Fix | Delete

...restProps

[46218] Fix | Delete

} = props;

[46219] Fix | Delete

const [hasFocus, setHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);

[46220] Fix | Delete

const size = value ? value.length + 1 : 0;

[46221] Fix | Delete

const onChangeHandler = event => {

[46222] Fix | Delete

if (onChange) {

[46223] Fix | Delete

onChange({

[46224] Fix | Delete

value: event.target.value

[46225] Fix | Delete

});

[46226] Fix | Delete

}

[46227] Fix | Delete

};

[46228] Fix | Delete

const onFocusHandler = e => {

[46229] Fix | Delete

setHasFocus(true);

[46230] Fix | Delete

onFocus?.(e);

[46231] Fix | Delete

};

[46232] Fix | Delete

const onBlurHandler = e => {

[46233] Fix | Delete

setHasFocus(false);

[46234] Fix | Delete

onBlur?.(e);

[46235] Fix | Delete

};

[46236] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", {

[46237] Fix | Delete

ref: ref,

[46238] Fix | Delete

id: `components-form-token-input-${instanceId}`,

[46239] Fix | Delete

type: "text",

[46240] Fix | Delete

...restProps,

[46241] Fix | Delete

value: value || '',

[46242] Fix | Delete

onChange: onChangeHandler,

[46243] Fix | Delete

onFocus: onFocusHandler,

[46244] Fix | Delete

onBlur: onBlurHandler,

[46245] Fix | Delete

size: size,

[46246] Fix | Delete

className: dist_clsx(className, 'components-form-token-field__input'),

[46247] Fix | Delete

autoComplete: "off",

[46248] Fix | Delete

role: "combobox",

[46249] Fix | Delete

"aria-expanded": isExpanded,

[46250] Fix | Delete

"aria-autocomplete": "list",

[46251] Fix | Delete

"aria-owns": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,

[46252] Fix | Delete

"aria-activedescendant":

[46253] Fix | Delete

// Only add the `aria-activedescendant` attribute when:

[46254] Fix | Delete

// - the user is actively interacting with the input (`hasFocus`)

[46255] Fix | Delete

// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)

[46256] Fix | Delete

// - the list of suggestions are rendered in the DOM (`isExpanded`)

[46257] Fix | Delete

hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,

[46258] Fix | Delete

"aria-describedby": `components-form-token-suggestions-howto-${instanceId}`

[46259] Fix | Delete

});

[46260] Fix | Delete

}

[46261] Fix | Delete

const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput);

[46262] Fix | Delete

/* harmony default export */ const token_input = (TokenInput);

[46263] Fix | Delete

[46264] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js

[46265] Fix | Delete

/**

[46266] Fix | Delete

* External dependencies

[46267] Fix | Delete

[46268] Fix | Delete

[46269] Fix | Delete

/**

[46270] Fix | Delete

* WordPress dependencies

[46271] Fix | Delete

[46272] Fix | Delete

[46273] Fix | Delete

[46274] Fix | Delete

/**

[46275] Fix | Delete

* Internal dependencies

[46276] Fix | Delete

[46277] Fix | Delete

[46278] Fix | Delete

[46279] Fix | Delete

const handleMouseDown = e => {

[46280] Fix | Delete

// By preventing default here, we will not lose focus of <input> when clicking a suggestion.

[46281] Fix | Delete

e.preventDefault();

[46282] Fix | Delete

};

[46283] Fix | Delete

function SuggestionsList({

[46284] Fix | Delete

selectedIndex,

[46285] Fix | Delete

scrollIntoView,

[46286] Fix | Delete

match,

[46287] Fix | Delete

onHover,

[46288] Fix | Delete

onSelect,

[46289] Fix | Delete

suggestions = [],

[46290] Fix | Delete

displayTransform,

[46291] Fix | Delete

instanceId,

[46292] Fix | Delete

__experimentalRenderItem

[46293] Fix | Delete

}) {

[46294] Fix | Delete

const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => {

[46295] Fix | Delete

// only have to worry about scrolling selected suggestion into view

[46296] Fix | Delete

// when already expanded.

[46297] Fix | Delete

let rafId;

[46298] Fix | Delete

if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) {

[46299] Fix | Delete

listNode.children[selectedIndex].scrollIntoView({

[46300] Fix | Delete

behavior: 'instant',

[46301] Fix | Delete

block: 'nearest',

[46302] Fix | Delete

inline: 'nearest'

[46303] Fix | Delete

});

[46304] Fix | Delete

}

[46305] Fix | Delete

return () => {

[46306] Fix | Delete

if (rafId !== undefined) {

[46307] Fix | Delete

cancelAnimationFrame(rafId);

[46308] Fix | Delete

}

[46309] Fix | Delete

};

[46310] Fix | Delete

}, [selectedIndex, scrollIntoView]);

[46311] Fix | Delete

const handleHover = suggestion => {

[46312] Fix | Delete

return () => {

[46313] Fix | Delete

onHover?.(suggestion);

[46314] Fix | Delete

};

[46315] Fix | Delete

};

[46316] Fix | Delete

const handleClick = suggestion => {

[46317] Fix | Delete

return () => {

[46318] Fix | Delete

onSelect?.(suggestion);

[46319] Fix | Delete

};

[46320] Fix | Delete

};

[46321] Fix | Delete

const computeSuggestionMatch = suggestion => {

[46322] Fix | Delete

const matchText = displayTransform(match).toLocaleLowerCase();

[46323] Fix | Delete

if (matchText.length === 0) {

[46324] Fix | Delete

return null;

[46325] Fix | Delete

}

[46326] Fix | Delete

const transformedSuggestion = displayTransform(suggestion);

[46327] Fix | Delete

const indexOfMatch = transformedSuggestion.toLocaleLowerCase().indexOf(matchText);

[46328] Fix | Delete

return {

[46329] Fix | Delete

suggestionBeforeMatch: transformedSuggestion.substring(0, indexOfMatch),

[46330] Fix | Delete

suggestionMatch: transformedSuggestion.substring(indexOfMatch, indexOfMatch + matchText.length),

[46331] Fix | Delete

suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length)

[46332] Fix | Delete

};

[46333] Fix | Delete

};

[46334] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", {

[46335] Fix | Delete

ref: listRef,

[46336] Fix | Delete

className: "components-form-token-field__suggestions-list",

[46337] Fix | Delete

id: `components-form-token-suggestions-${instanceId}`,

[46338] Fix | Delete

role: "listbox",

[46339] Fix | Delete

children: suggestions.map((suggestion, index) => {

[46340] Fix | Delete

const matchText = computeSuggestionMatch(suggestion);

[46341] Fix | Delete

const isSelected = index === selectedIndex;

[46342] Fix | Delete

const isDisabled = typeof suggestion === 'object' && suggestion?.disabled;

[46343] Fix | Delete

const key = typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion);

[46344] Fix | Delete

const className = dist_clsx('components-form-token-field__suggestion', {

[46345] Fix | Delete

'is-selected': isSelected

[46346] Fix | Delete

});

[46347] Fix | Delete

let output;

[46348] Fix | Delete

if (typeof __experimentalRenderItem === 'function') {

[46349] Fix | Delete

output = __experimentalRenderItem({

[46350] Fix | Delete

item: suggestion

[46351] Fix | Delete

});

[46352] Fix | Delete

} else if (matchText) {

[46353] Fix | Delete

output = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", {

[46354] Fix | Delete

"aria-label": displayTransform(suggestion),

[46355] Fix | Delete

children: [matchText.suggestionBeforeMatch, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", {

[46356] Fix | Delete

className: "components-form-token-field__suggestion-match",

[46357] Fix | Delete

children: matchText.suggestionMatch

[46358] Fix | Delete

}), matchText.suggestionAfterMatch]

[46359] Fix | Delete

});

[46360] Fix | Delete

} else {

[46361] Fix | Delete

output = displayTransform(suggestion);

[46362] Fix | Delete

}

[46363] Fix | Delete

[46364] Fix | Delete

/* eslint-disable jsx-a11y/click-events-have-key-events */

[46365] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", {

[46366] Fix | Delete

id: `components-form-token-suggestions-${instanceId}-${index}`,

[46367] Fix | Delete

role: "option",

[46368] Fix | Delete

className: className,

[46369] Fix | Delete

onMouseDown: handleMouseDown,

[46370] Fix | Delete

onClick: handleClick(suggestion),

[46371] Fix | Delete

onMouseEnter: handleHover(suggestion),

[46372] Fix | Delete

"aria-selected": index === selectedIndex,

[46373] Fix | Delete

"aria-disabled": isDisabled,

[46374] Fix | Delete

children: output

[46375] Fix | Delete

}, key);

[46376] Fix | Delete

/* eslint-enable jsx-a11y/click-events-have-key-events */

[46377] Fix | Delete

})

[46378] Fix | Delete

});

[46379] Fix | Delete

}

[46380] Fix | Delete

/* harmony default export */ const suggestions_list = (SuggestionsList);

[46381] Fix | Delete

[46382] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js

[46383] Fix | Delete

/**

[46384] Fix | Delete

* WordPress dependencies

[46385] Fix | Delete

[46386] Fix | Delete

[46387] Fix | Delete

[46388] Fix | Delete

[46389] Fix | Delete

/* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {

[46390] Fix | Delete

const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined);

[46391] Fix | Delete

const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);

[46392] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {

[46393] Fix | Delete

...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside),

[46394] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {

[46395] Fix | Delete

ref: bindFocusOutsideHandler,

[46396] Fix | Delete

...props

[46397] Fix | Delete

})

[46398] Fix | Delete

});

[46399] Fix | Delete

}, 'withFocusOutside'));

[46400] Fix | Delete

[46401] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js

[46402] Fix | Delete

/**

[46403] Fix | Delete

* External dependencies

[46404] Fix | Delete

[46405] Fix | Delete

[46406] Fix | Delete

[46407] Fix | Delete

/**

[46408] Fix | Delete

* WordPress dependencies

[46409] Fix | Delete

[46410] Fix | Delete

[46411] Fix | Delete

[46412] Fix | Delete

[46413] Fix | Delete

[46414] Fix | Delete

[46415] Fix | Delete

[46416] Fix | Delete

/**

[46417] Fix | Delete

* Internal dependencies

[46418] Fix | Delete

[46419] Fix | Delete

[46420] Fix | Delete

[46421] Fix | Delete

[46422] Fix | Delete

[46423] Fix | Delete

[46424] Fix | Delete

[46425] Fix | Delete

[46426] Fix | Delete

[46427] Fix | Delete

[46428] Fix | Delete

[46429] Fix | Delete

[46430] Fix | Delete

[46431] Fix | Delete

[46432] Fix | Delete

const combobox_control_noop = () => {};

[46433] Fix | Delete

const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component {

[46434] Fix | Delete

handleFocusOutside(event) {

[46435] Fix | Delete

this.props.onFocusOutside(event);

[46436] Fix | Delete

}

[46437] Fix | Delete

render() {

[46438] Fix | Delete

return this.props.children;

[46439] Fix | Delete

}

[46440] Fix | Delete

});

[46441] Fix | Delete

const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);

[46442] Fix | Delete

[46443] Fix | Delete

/**

[46444] Fix | Delete

* `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of

[46445] Fix | Delete

* being able to search for options using a search input.

[46446] Fix | Delete

[46447] Fix | Delete

* ```jsx

[46448] Fix | Delete

* import { ComboboxControl } from '@wordpress/components';

[46449] Fix | Delete

* import { useState } from '@wordpress/element';

[46450] Fix | Delete

[46451] Fix | Delete

* const options = [

[46452] Fix | Delete

* {

[46453] Fix | Delete

* value: 'small',

[46454] Fix | Delete

* label: 'Small',

[46455] Fix | Delete

* },

[46456] Fix | Delete

* {

[46457] Fix | Delete

* value: 'normal',

[46458] Fix | Delete

* label: 'Normal',

[46459] Fix | Delete

* disabled: true,

[46460] Fix | Delete

* },

[46461] Fix | Delete

* {

[46462] Fix | Delete

* value: 'large',

[46463] Fix | Delete

* label: 'Large',

[46464] Fix | Delete

* disabled: false,

[46465] Fix | Delete

* },

[46466] Fix | Delete

* ];

[46467] Fix | Delete

[46468] Fix | Delete

* function MyComboboxControl() {

[46469] Fix | Delete

* const [ fontSize, setFontSize ] = useState();

[46470] Fix | Delete

* const [ filteredOptions, setFilteredOptions ] = useState( options );

[46471] Fix | Delete

* return (

[46472] Fix | Delete

* <ComboboxControl

[46473] Fix | Delete

* label="Font Size"

[46474] Fix | Delete

* value={ fontSize }

[46475] Fix | Delete

* onChange={ setFontSize }

[46476] Fix | Delete

* options={ filteredOptions }

[46477] Fix | Delete

* onFilterValueChange={ ( inputValue ) =>

[46478] Fix | Delete

* setFilteredOptions(

[46479] Fix | Delete

* options.filter( ( option ) =>

[46480] Fix | Delete

* option.label

[46481] Fix | Delete

* .toLowerCase()

[46482] Fix | Delete

* .startsWith( inputValue.toLowerCase() )

[46483] Fix | Delete

* )

[46484] Fix | Delete

* )

[46485] Fix | Delete

* }

[46486] Fix | Delete

* />

[46487] Fix | Delete

* );

[46488] Fix | Delete

* }

[46489] Fix | Delete

* ```

[46490] Fix | Delete

[46491] Fix | Delete

function ComboboxControl(props) {

[46492] Fix | Delete

var _currentOption$label;

[46493] Fix | Delete

const {

[46494] Fix | Delete

__nextHasNoMarginBottom = false,

[46495] Fix | Delete

__next40pxDefaultSize = false,

[46496] Fix | Delete

value: valueProp,

[46497] Fix | Delete

label,

[46498] Fix | Delete

options,

[46499] Fix | Delete

1 ...91 929394 95 ...149