} = useContextSystem(dropdownMenuProps, 'DropdownMenu');

[45500] Fix | Delete

if (!controls?.length && !dropdown_menu_isFunction(children)) {

[45501] Fix | Delete

return null;

[45502] Fix | Delete

}

[45503] Fix | Delete

[45504] Fix | Delete

// Normalize controls to nested array of objects (sets of controls)

[45505] Fix | Delete

let controlSets;

[45506] Fix | Delete

if (controls?.length) {

[45507] Fix | Delete

// @ts-expect-error The check below is needed because `DropdownMenus`

[45508] Fix | Delete

// rendered by `ToolBarGroup` receive controls as a nested array.

[45509] Fix | Delete

controlSets = controls;

[45510] Fix | Delete

if (!Array.isArray(controlSets[0])) {

[45511] Fix | Delete

// This is not ideal, but at this point we know that `controls` is

[45512] Fix | Delete

// not a nested array, even if TypeScript doesn't.

[45513] Fix | Delete

controlSets = [controls];

[45514] Fix | Delete

}

[45515] Fix | Delete

}

[45516] Fix | Delete

const mergedPopoverProps = dropdown_menu_mergeProps({

[45517] Fix | Delete

className: 'components-dropdown-menu__popover',

[45518] Fix | Delete

variant

[45519] Fix | Delete

}, popoverProps);

[45520] Fix | Delete

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

[45521] Fix | Delete

className: className,

[45522] Fix | Delete

popoverProps: mergedPopoverProps,

[45523] Fix | Delete

renderToggle: ({

[45524] Fix | Delete

isOpen,

[45525] Fix | Delete

onToggle

[45526] Fix | Delete

}) => {

[45527] Fix | Delete

var _toggleProps$showTool;

[45528] Fix | Delete

const openOnArrowDown = event => {

[45529] Fix | Delete

if (disableOpenOnArrowDown) {

[45530] Fix | Delete

return;

[45531] Fix | Delete

}

[45532] Fix | Delete

if (!isOpen && event.code === 'ArrowDown') {

[45533] Fix | Delete

event.preventDefault();

[45534] Fix | Delete

onToggle();

[45535] Fix | Delete

}

[45536] Fix | Delete

};

[45537] Fix | Delete

const {

[45538] Fix | Delete

as: Toggle = build_module_button,

[45539] Fix | Delete

...restToggleProps

[45540] Fix | Delete

} = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};

[45541] Fix | Delete

const mergedToggleProps = dropdown_menu_mergeProps({

[45542] Fix | Delete

className: dist_clsx('components-dropdown-menu__toggle', {

[45543] Fix | Delete

'is-opened': isOpen

[45544] Fix | Delete

})

[45545] Fix | Delete

}, restToggleProps);

[45546] Fix | Delete

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

[45547] Fix | Delete

...mergedToggleProps,

[45548] Fix | Delete

icon: icon,

[45549] Fix | Delete

onClick: event => {

[45550] Fix | Delete

onToggle();

[45551] Fix | Delete

if (mergedToggleProps.onClick) {

[45552] Fix | Delete

mergedToggleProps.onClick(event);

[45553] Fix | Delete

}

[45554] Fix | Delete

},

[45555] Fix | Delete

onKeyDown: event => {

[45556] Fix | Delete

openOnArrowDown(event);

[45557] Fix | Delete

if (mergedToggleProps.onKeyDown) {

[45558] Fix | Delete

mergedToggleProps.onKeyDown(event);

[45559] Fix | Delete

}

[45560] Fix | Delete

},

[45561] Fix | Delete

"aria-haspopup": "true",

[45562] Fix | Delete

"aria-expanded": isOpen,

[45563] Fix | Delete

label: label,

[45564] Fix | Delete

text: text,

[45565] Fix | Delete

showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true,

[45566] Fix | Delete

children: mergedToggleProps.children

[45567] Fix | Delete

});

[45568] Fix | Delete

},

[45569] Fix | Delete

renderContent: props => {

[45570] Fix | Delete

const mergedMenuProps = dropdown_menu_mergeProps({

[45571] Fix | Delete

'aria-label': label,

[45572] Fix | Delete

className: dist_clsx('components-dropdown-menu__menu', {

[45573] Fix | Delete

'no-icons': noIcons

[45574] Fix | Delete

})

[45575] Fix | Delete

}, menuProps);

[45576] Fix | Delete

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

[45577] Fix | Delete

...mergedMenuProps,

[45578] Fix | Delete

role: "menu",

[45579] Fix | Delete

children: [dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[45580] Fix | Delete

onClick: event => {

[45581] Fix | Delete

event.stopPropagation();

[45582] Fix | Delete

props.onClose();

[45583] Fix | Delete

if (control.onClick) {

[45584] Fix | Delete

control.onClick();

[45585] Fix | Delete

}

[45586] Fix | Delete

},

[45587] Fix | Delete

className: dist_clsx('components-dropdown-menu__menu-item', {

[45588] Fix | Delete

'has-separator': indexOfSet > 0 && indexOfControl === 0,

[45589] Fix | Delete

'is-active': control.isActive,

[45590] Fix | Delete

'is-icon-only': !control.title

[45591] Fix | Delete

}),

[45592] Fix | Delete

icon: control.icon,

[45593] Fix | Delete

label: control.label,

[45594] Fix | Delete

"aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,

[45595] Fix | Delete

role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',

[45596] Fix | Delete

disabled: control.isDisabled,

[45597] Fix | Delete

children: control.title

[45598] Fix | Delete

}, [indexOfSet, indexOfControl].join())))]

[45599] Fix | Delete

});

[45600] Fix | Delete

},

[45601] Fix | Delete

open: open,

[45602] Fix | Delete

defaultOpen: defaultOpen,

[45603] Fix | Delete

onToggle: onToggleProp

[45604] Fix | Delete

});

[45605] Fix | Delete

}

[45606] Fix | Delete

[45607] Fix | Delete

/**

[45608] Fix | Delete

*

[45609] Fix | Delete

* The DropdownMenu displays a list of actions (each contained in a MenuItem,

[45610] Fix | Delete

* MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover

[45611] Fix | Delete

* after the user has interacted with an element (a button or icon) or when

[45612] Fix | Delete

* they perform a specific action.

[45613] Fix | Delete

*

[45614] Fix | Delete

* Render a Dropdown Menu with a set of controls:

[45615] Fix | Delete

*

[45616] Fix | Delete

* ```jsx

[45617] Fix | Delete

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

[45618] Fix | Delete

* import {

[45619] Fix | Delete

* more,

[45620] Fix | Delete

* arrowLeft,

[45621] Fix | Delete

* arrowRight,

[45622] Fix | Delete

* arrowUp,

[45623] Fix | Delete

* arrowDown,

[45624] Fix | Delete

* } from '@wordpress/icons';

[45625] Fix | Delete

*

[45626] Fix | Delete

* const MyDropdownMenu = () => (

[45627] Fix | Delete

* <DropdownMenu

[45628] Fix | Delete

* icon={ more }

[45629] Fix | Delete

* label="Select a direction"

[45630] Fix | Delete

* controls={ [

[45631] Fix | Delete

* {

[45632] Fix | Delete

* title: 'Up',

[45633] Fix | Delete

* icon: arrowUp,

[45634] Fix | Delete

* onClick: () => console.log( 'up' ),

[45635] Fix | Delete

* },

[45636] Fix | Delete

* {

[45637] Fix | Delete

* title: 'Right',

[45638] Fix | Delete

* icon: arrowRight,

[45639] Fix | Delete

* onClick: () => console.log( 'right' ),

[45640] Fix | Delete

* },

[45641] Fix | Delete

* {

[45642] Fix | Delete

* title: 'Down',

[45643] Fix | Delete

* icon: arrowDown,

[45644] Fix | Delete

* onClick: () => console.log( 'down' ),

[45645] Fix | Delete

* },

[45646] Fix | Delete

* {

[45647] Fix | Delete

* title: 'Left',

[45648] Fix | Delete

* icon: arrowLeft,

[45649] Fix | Delete

* onClick: () => console.log( 'left' ),

[45650] Fix | Delete

* },

[45651] Fix | Delete

* ] }

[45652] Fix | Delete

* />

[45653] Fix | Delete

* );

[45654] Fix | Delete

* ```

[45655] Fix | Delete

*

[45656] Fix | Delete

* Alternatively, specify a `children` function which returns elements valid for

[45657] Fix | Delete

* use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.

[45658] Fix | Delete

*

[45659] Fix | Delete

* ```jsx

[45660] Fix | Delete

* import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';

[45661] Fix | Delete

* import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';

[45662] Fix | Delete

*

[45663] Fix | Delete

* const MyDropdownMenu = () => (

[45664] Fix | Delete

* <DropdownMenu icon={ more } label="Select a direction">

[45665] Fix | Delete

* { ( { onClose } ) => (

[45666] Fix | Delete

* <>

[45667] Fix | Delete

* <MenuGroup>

[45668] Fix | Delete

* <MenuItem icon={ arrowUp } onClick={ onClose }>

[45669] Fix | Delete

* Move Up

[45670] Fix | Delete

* </MenuItem>

[45671] Fix | Delete

* <MenuItem icon={ arrowDown } onClick={ onClose }>

[45672] Fix | Delete

* Move Down

[45673] Fix | Delete

* </MenuItem>

[45674] Fix | Delete

* </MenuGroup>

[45675] Fix | Delete

* <MenuGroup>

[45676] Fix | Delete

* <MenuItem icon={ trash } onClick={ onClose }>

[45677] Fix | Delete

* Remove

[45678] Fix | Delete

* </MenuItem>

[45679] Fix | Delete

* </MenuGroup>

[45680] Fix | Delete

* </>

[45681] Fix | Delete

* ) }

[45682] Fix | Delete

* </DropdownMenu>

[45683] Fix | Delete

* );

[45684] Fix | Delete

* ```

[45685] Fix | Delete

*

[45686] Fix | Delete

*/

[45687] Fix | Delete

const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');

[45688] Fix | Delete

/* harmony default export */ const dropdown_menu = (DropdownMenu);

[45689] Fix | Delete

[45690] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/styles.js

[45691] Fix | Delete

[45692] Fix | Delete

function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

[45693] Fix | Delete

/**

[45694] Fix | Delete

* External dependencies

[45695] Fix | Delete

*/

[45696] Fix | Delete

[45697] Fix | Delete

[45698] Fix | Delete

[45699] Fix | Delete

/**

[45700] Fix | Delete

* Internal dependencies

[45701] Fix | Delete

*/

[45702] Fix | Delete

[45703] Fix | Delete

[45704] Fix | Delete

[45705] Fix | Delete

[45706] Fix | Delete

[45707] Fix | Delete

[45708] Fix | Delete

[45709] Fix | Delete

[45710] Fix | Delete

const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(color_indicator, true ? {

[45711] Fix | Delete

target: "e1lpqc909"

[45712] Fix | Delete

} : 0)("&&{flex-shrink:0;width:", space(6), ";height:", space(6), ";}" + ( true ? "" : 0));

[45713] Fix | Delete

const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? {

[45714] Fix | Delete

target: "e1lpqc908"

[45715] Fix | Delete

} : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.controlBorderRadius, ";", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}}" + ( true ? "" : 0));

[45716] Fix | Delete

const buttonStyleReset = ({

[45717] Fix | Delete

as

[45718] Fix | Delete

}) => {

[45719] Fix | Delete

if (as === 'button') {

[45720] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css("display:flex;align-items:center;width:100%;appearance:none;background:transparent;border:none;border-radius:0;padding:0;cursor:pointer;&:hover{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0), true ? "" : 0);

[45721] Fix | Delete

}

[45722] Fix | Delete

return null;

[45723] Fix | Delete

};

[45724] Fix | Delete

const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? {

[45725] Fix | Delete

target: "e1lpqc907"

[45726] Fix | Delete

} : 0)(buttonStyleReset, " padding-block:3px;padding-inline-start:", space(3), ";border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;font-size:", font('default.fontSize'), ";&:focus-visible{border-color:transparent;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";&+&{border-top-left-radius:0;border-top-right-radius:0;}&:last-child{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));

[45727] Fix | Delete

const NameContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {

[45728] Fix | Delete

target: "e1lpqc906"

[45729] Fix | Delete

} : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;" + ( true ? "" : 0));

[45730] Fix | Delete

const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? {

[45731] Fix | Delete

target: "e1lpqc905"

[45732] Fix | Delete

} : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0));

[45733] Fix | Delete

const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? {

[45734] Fix | Delete

target: "e1lpqc904"

[45735] Fix | Delete

} : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0));

[45736] Fix | Delete

const PaletteEditContents = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? {

[45737] Fix | Delete

target: "e1lpqc903"

[45738] Fix | Delete

} : 0)("margin-top:", space(2), ";" + ( true ? "" : 0));

[45739] Fix | Delete

const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? {

[45740] Fix | Delete

target: "e1lpqc902"

[45741] Fix | Delete

} : 0)( true ? {

[45742] Fix | Delete

name: "u6wnko",

[45743] Fix | Delete

styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}"

[45744] Fix | Delete

} : 0);

[45745] Fix | Delete

const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {

[45746] Fix | Delete

target: "e1lpqc901"

[45747] Fix | Delete

} : 0)("&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));

[45748] Fix | Delete

const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {

[45749] Fix | Delete

target: "e1lpqc900"

[45750] Fix | Delete

} : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0));

[45751] Fix | Delete

[45752] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js

[45753] Fix | Delete

/**

[45754] Fix | Delete

* External dependencies

[45755] Fix | Delete

*/

[45756] Fix | Delete

[45757] Fix | Delete

[45758] Fix | Delete

/**

[45759] Fix | Delete

* WordPress dependencies

[45760] Fix | Delete

*/

[45761] Fix | Delete

[45762] Fix | Delete

[45763] Fix | Delete

[45764] Fix | Delete

[45765] Fix | Delete

[45766] Fix | Delete

/**

[45767] Fix | Delete

* Internal dependencies

[45768] Fix | Delete

*/

[45769] Fix | Delete

[45770] Fix | Delete

[45771] Fix | Delete

[45772] Fix | Delete

[45773] Fix | Delete

[45774] Fix | Delete

[45775] Fix | Delete

[45776] Fix | Delete

[45777] Fix | Delete

[45778] Fix | Delete

[45779] Fix | Delete

[45780] Fix | Delete

[45781] Fix | Delete

[45782] Fix | Delete

[45783] Fix | Delete

[45784] Fix | Delete

[45785] Fix | Delete

[45786] Fix | Delete

[45787] Fix | Delete

const DEFAULT_COLOR = '#000';

[45788] Fix | Delete

function NameInput({

[45789] Fix | Delete

value,

[45790] Fix | Delete

onChange,

[45791] Fix | Delete

label

[45792] Fix | Delete

}) {

[45793] Fix | Delete

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

[45794] Fix | Delete

label: label,

[45795] Fix | Delete

hideLabelFromVision: true,

[45796] Fix | Delete

value: value,

[45797] Fix | Delete

onChange: onChange

[45798] Fix | Delete

});

[45799] Fix | Delete

}

[45800] Fix | Delete

[45801] Fix | Delete

/**

[45802] Fix | Delete

* Returns a name and slug for a palette item. The name takes the format "Color + id".

[45803] Fix | Delete

* To ensure there are no duplicate ids, this function checks all slugs.

[45804] Fix | Delete

* It expects slugs to be in the format: slugPrefix + color- + number.

[45805] Fix | Delete

* It then sets the id component of the new name based on the incremented id of the highest existing slug id.

[45806] Fix | Delete

*

[45807] Fix | Delete

* @param elements An array of color palette items.

[45808] Fix | Delete

* @param slugPrefix The slug prefix used to match the element slug.

[45809] Fix | Delete

*

[45810] Fix | Delete

* @return A name and slug for the new palette item.

[45811] Fix | Delete

*/

[45812] Fix | Delete

function getNameAndSlugForPosition(elements, slugPrefix) {

[45813] Fix | Delete

const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);

[45814] Fix | Delete

const position = elements.reduce((previousValue, currentValue) => {

[45815] Fix | Delete

if (typeof currentValue?.slug === 'string') {

[45816] Fix | Delete

const matches = currentValue?.slug.match(nameRegex);

[45817] Fix | Delete

if (matches) {

[45818] Fix | Delete

const id = parseInt(matches[1], 10);

[45819] Fix | Delete

if (id >= previousValue) {

[45820] Fix | Delete

return id + 1;

[45821] Fix | Delete

}

[45822] Fix | Delete

}

[45823] Fix | Delete

}

[45824] Fix | Delete

return previousValue;

[45825] Fix | Delete

}, 1);

[45826] Fix | Delete

return {

[45827] Fix | Delete

name: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */

[45828] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Color %s'), position),

[45829] Fix | Delete

slug: `${slugPrefix}color-${position}`

[45830] Fix | Delete

};

[45831] Fix | Delete

}

[45832] Fix | Delete

function ColorPickerPopover({

[45833] Fix | Delete

isGradient,

[45834] Fix | Delete

element,

[45835] Fix | Delete

onChange,

[45836] Fix | Delete

popoverProps: receivedPopoverProps,

[45837] Fix | Delete

onClose = () => {}

[45838] Fix | Delete

}) {

[45839] Fix | Delete

const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({

[45840] Fix | Delete

shift: true,

[45841] Fix | Delete

offset: 20,

[45842] Fix | Delete

// Disabling resize as it would otherwise cause the popover to show

[45843] Fix | Delete

// scrollbars while dragging the color picker's handle close to the

[45844] Fix | Delete

// popover edge.

[45845] Fix | Delete

resize: false,

[45846] Fix | Delete

placement: 'left-start',

[45847] Fix | Delete

...receivedPopoverProps,

[45848] Fix | Delete

className: dist_clsx('components-palette-edit__popover', receivedPopoverProps?.className)

[45849] Fix | Delete

}), [receivedPopoverProps]);

[45850] Fix | Delete

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

[45851] Fix | Delete

...popoverProps,

[45852] Fix | Delete

onClose: onClose,

[45853] Fix | Delete

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

[45854] Fix | Delete

color: element.color,

[45855] Fix | Delete

enableAlpha: true,

[45856] Fix | Delete

onChange: newColor => {

[45857] Fix | Delete

onChange({

[45858] Fix | Delete

...element,

[45859] Fix | Delete

color: newColor

[45860] Fix | Delete

});

[45861] Fix | Delete

}

[45862] Fix | Delete

}), isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {

[45863] Fix | Delete

className: "components-palette-edit__popover-gradient-picker",

[45864] Fix | Delete

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

[45865] Fix | Delete

__experimentalIsRenderedInSidebar: true,

[45866] Fix | Delete

value: element.gradient,

[45867] Fix | Delete

onChange: newGradient => {

[45868] Fix | Delete

onChange({

[45869] Fix | Delete

...element,

[45870] Fix | Delete

gradient: newGradient

[45871] Fix | Delete

});

[45872] Fix | Delete

}

[45873] Fix | Delete

})

[45874] Fix | Delete

})]

[45875] Fix | Delete

});

[45876] Fix | Delete

}

[45877] Fix | Delete

function palette_edit_Option({

[45878] Fix | Delete

canOnlyChangeValues,

[45879] Fix | Delete

element,

[45880] Fix | Delete

onChange,

[45881] Fix | Delete

onRemove,

[45882] Fix | Delete

popoverProps: receivedPopoverProps,

[45883] Fix | Delete

slugPrefix,

[45884] Fix | Delete

isGradient

[45885] Fix | Delete

}) {

[45886] Fix | Delete

const value = isGradient ? element.gradient : element.color;

[45887] Fix | Delete

const [isEditingColor, setIsEditingColor] = (0,external_wp_element_namespaceObject.useState)(false);

[45888] Fix | Delete

[45889] Fix | Delete

// Use internal state instead of a ref to make sure that the component

[45890] Fix | Delete

// re-renders when the popover's anchor updates.

[45891] Fix | Delete

const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);

[45892] Fix | Delete

const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({

[45893] Fix | Delete

...receivedPopoverProps,

[45894] Fix | Delete

// Use the custom palette color item as the popover anchor.

[45895] Fix | Delete

anchor: popoverAnchor

[45896] Fix | Delete

}), [popoverAnchor, receivedPopoverProps]);

[45897] Fix | Delete

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

[45898] Fix | Delete

ref: setPopoverAnchor,

[45899] Fix | Delete

as: "div",

[45900] Fix | Delete

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

[45901] Fix | Delete

justify: "flex-start",

[45902] Fix | Delete

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

[45903] Fix | Delete

onClick: () => {

[45904] Fix | Delete

setIsEditingColor(true);

[45905] Fix | Delete

},

[45906] Fix | Delete

"aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(

[45907] Fix | Delete

// translators: %s is a color or gradient name, e.g. "Red".

[45908] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value),

[45909] Fix | Delete

style: {

[45910] Fix | Delete

padding: 0

[45911] Fix | Delete

},

[45912] Fix | Delete

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

[45913] Fix | Delete

colorValue: value

[45914] Fix | Delete

})

[45915] Fix | Delete

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

[45916] Fix | Delete

children: !canOnlyChangeValues ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInput, {

[45917] Fix | Delete

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

[45918] Fix | Delete

value: element.name,

[45919] Fix | Delete

onChange: nextName => onChange({

[45920] Fix | Delete

...element,

[45921] Fix | Delete

name: nextName,

[45922] Fix | Delete

slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')

[45923] Fix | Delete

})

[45924] Fix | Delete

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

[45925] Fix | Delete

children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */

[45926] Fix | Delete

'\u00A0'

[45927] Fix | Delete

})

[45928] Fix | Delete

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

[45929] Fix | Delete

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

[45930] Fix | Delete

size: "small",

[45931] Fix | Delete

icon: line_solid,

[45932] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.sprintf)(

[45933] Fix | Delete

// translators: %s is a color or gradient name, e.g. "Red".

[45934] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Remove color: %s'), element.name.trim().length ? element.name : value),

[45935] Fix | Delete

onClick: onRemove

[45936] Fix | Delete

})

[45937] Fix | Delete

})]

[45938] Fix | Delete

}), isEditingColor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, {

[45939] Fix | Delete

isGradient: isGradient,

[45940] Fix | Delete

onChange: onChange,

[45941] Fix | Delete

element: element,

[45942] Fix | Delete

popoverProps: popoverProps,

[45943] Fix | Delete

onClose: () => setIsEditingColor(false)

[45944] Fix | Delete

})]

[45945] Fix | Delete

});

[45946] Fix | Delete

}

[45947] Fix | Delete

function PaletteEditListView({

[45948] Fix | Delete

elements,

[45949] Fix | Delete

onChange,

[45950] Fix | Delete

canOnlyChangeValues,

[45951] Fix | Delete

slugPrefix,

[45952] Fix | Delete

isGradient,

[45953] Fix | Delete

popoverProps,

[45954] Fix | Delete

addColorRef

[45955] Fix | Delete

}) {

[45956] Fix | Delete

// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.

[45957] Fix | Delete

const elementsReference = (0,external_wp_element_namespaceObject.useRef)();

[45958] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[45959] Fix | Delete

elementsReference.current = elements;

[45960] Fix | Delete

}, [elements]);

[45961] Fix | Delete

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

[45962] Fix | Delete

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

[45963] Fix | Delete

spacing: 3,

[45964] Fix | Delete

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

[45965] Fix | Delete

isRounded: true,

[45966] Fix | Delete

children: elements.map((element, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(palette_edit_Option, {

[45967] Fix | Delete

isGradient: isGradient,

[45968] Fix | Delete

canOnlyChangeValues: canOnlyChangeValues,

[45969] Fix | Delete

element: element,

[45970] Fix | Delete

onChange: newElement => {

[45971] Fix | Delete

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

[45972] Fix | Delete

if (currentIndex === index) {

[45973] Fix | Delete

return newElement;

[45974] Fix | Delete

}

[45975] Fix | Delete

return currentElement;

[45976] Fix | Delete

}));

[45977] Fix | Delete

},

[45978] Fix | Delete

onRemove: () => {

[45979] Fix | Delete

const newElements = elements.filter((_currentElement, currentIndex) => {

[45980] Fix | Delete

if (currentIndex === index) {

[45981] Fix | Delete

return false;

[45982] Fix | Delete

}

[45983] Fix | Delete

return true;

[45984] Fix | Delete

});

[45985] Fix | Delete

onChange(newElements.length ? newElements : undefined);

[45986] Fix | Delete

addColorRef.current?.focus();

[45987] Fix | Delete

},

[45988] Fix | Delete

slugPrefix: slugPrefix,

[45989] Fix | Delete

popoverProps: popoverProps

[45990] Fix | Delete

}, index))

[45991] Fix | Delete

})

[45992] Fix | Delete

});

[45993] Fix | Delete

}

[45994] Fix | Delete

const EMPTY_ARRAY = [];

[45995] Fix | Delete

[45996] Fix | Delete

/**

[45997] Fix | Delete

* Allows editing a palette of colors or gradients.

[45998] Fix | Delete

*

[45999] Fix | Delete