@wordpress/components 27.6.0 → 28.0.0

package/build-module/palette-edit/index.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -30,13 +29,16 @@ import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { kebabCase } from '../utils/strings';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULT_COLOR = '#000';
 function NameInput({
   value,
   onChange,
   label
 }) {
-  return createElement(NameInputControl, {
+  return /*#__PURE__*/_jsx(NameInputControl, {
     label: label,
     hideLabelFromVision: true,
     value: value,
@@ -93,30 +95,32 @@ function ColorPickerPopover({
     ...receivedPopoverProps,
     className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)
   }), [receivedPopoverProps]);
-  return createElement(Popover, {
+  return /*#__PURE__*/_jsxs(Popover, {
     ...popoverProps,
-    onClose: onClose
-  }, !isGradient && createElement(ColorPicker, {
-    color: element.color,
-    enableAlpha: true,
-    onChange: newColor => {
-      onChange({
-        ...element,
-        color: newColor
-      });
-    }
-  }), isGradient && createElement("div", {
-    className: "components-palette-edit__popover-gradient-picker"
-  }, createElement(CustomGradientPicker, {
-    __experimentalIsRenderedInSidebar: true,
-    value: element.gradient,
-    onChange: newGradient => {
-      onChange({
-        ...element,
-        gradient: newGradient
-      });
-    }
-  })));
+    onClose: onClose,
+    children: [!isGradient && /*#__PURE__*/_jsx(ColorPicker, {
+      color: element.color,
+      enableAlpha: true,
+      onChange: newColor => {
+        onChange({
+          ...element,
+          color: newColor
+        });
+      }
+    }), isGradient && /*#__PURE__*/_jsx("div", {
+      className: "components-palette-edit__popover-gradient-picker",
+      children: /*#__PURE__*/_jsx(CustomGradientPicker, {
+        __experimentalIsRenderedInSidebar: true,
+        value: element.gradient,
+        onChange: newGradient => {
+          onChange({
+            ...element,
+            gradient: newGradient
+          });
+        }
+      })
+    })]
+  });
 }
 function Option({
   canOnlyChangeValues,
@@ -141,7 +145,7 @@ function Option({
     // Use the custom palette color item as the popover anchor.
     anchor: popoverAnchor
   }), [popoverAnchor, receivedPopoverProps]);
-  return createElement(PaletteItem, {
+  return /*#__PURE__*/_jsxs(PaletteItem, {
     className: isEditing ? 'is-selected' : undefined,
     as: isEditing ? 'div' : 'button',
     onClick: onStartEditing,
@@ -151,31 +155,39 @@ function Option({
     ref: setPopoverAnchor,
     ...(isEditing ? {
       ...focusOutsideProps
-    } : {})
-  }, createElement(HStack, {
-    justify: "flex-start"
-  }, createElement(IndicatorStyled, {
-    colorValue: value
-  }), createElement(FlexItem, null, isEditing && !canOnlyChangeValues ? createElement(NameInput, {
-    label: isGradient ? __('Gradient name') : __('Color name'),
-    value: element.name,
-    onChange: nextName => onChange({
-      ...element,
-      name: nextName,
-      slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')
-    })
-  }) : createElement(NameContainer, null, element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
-  '\u00A0')), isEditing && !canOnlyChangeValues && createElement(FlexItem, null, createElement(RemoveButton, {
-    size: "small",
-    icon: lineSolid,
-    label: __('Remove color'),
-    onClick: onRemove
-  }))), isEditing && createElement(ColorPickerPopover, {
-    isGradient: isGradient,
-    onChange: onChange,
-    element: element,
-    popoverProps: popoverProps
-  }));
+    } : {}),
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      justify: "flex-start",
+      children: [/*#__PURE__*/_jsx(IndicatorStyled, {
+        colorValue: value
+      }), /*#__PURE__*/_jsx(FlexItem, {
+        children: isEditing && !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {
+          label: isGradient ? __('Gradient name') : __('Color name'),
+          value: element.name,
+          onChange: nextName => onChange({
+            ...element,
+            name: nextName,
+            slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')
+          })
+        }) : /*#__PURE__*/_jsx(NameContainer, {
+          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
+          '\u00A0'
+        })
+      }), isEditing && !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {
+        children: /*#__PURE__*/_jsx(RemoveButton, {
+          size: "small",
+          icon: lineSolid,
+          label: __('Remove color'),
+          onClick: onRemove
+        })
+      })]
+    }), isEditing && /*#__PURE__*/_jsx(ColorPickerPopover, {
+      isGradient: isGradient,
+      onChange: onChange,
+      element: element,
+      popoverProps: popoverProps
+    })]
+  });
 }
 function PaletteEditListView({
   elements,
@@ -193,47 +205,48 @@ function PaletteEditListView({
     elementsReference.current = elements;
   }, [elements]);
   const debounceOnChange = useDebounce(onChange, 100);
-  return createElement(VStack, {
-    spacing: 3
-  }, createElement(ItemGroup, {
-    isRounded: true
-  }, elements.map((element, index) => createElement(Option, {
-    isGradient: isGradient,
-    canOnlyChangeValues: canOnlyChangeValues,
-    key: index,
-    element: element,
-    onStartEditing: () => {
-      if (editingElement !== index) {
-        setEditingElement(index);
-      }
-    },
-    onChange: newElement => {
-      debounceOnChange(elements.map((currentElement, currentIndex) => {
-        if (currentIndex === index) {
-          return newElement;
-        }
-        return currentElement;
-      }));
-    },
-    onRemove: () => {
-      setEditingElement(null);
-      const newElements = elements.filter((_currentElement, currentIndex) => {
-        if (currentIndex === index) {
-          return false;
-        }
-        return true;
-      });
-      onChange(newElements.length ? newElements : undefined);
-    },
-    isEditing: index === editingElement,
-    onStopEditing: () => {
-      if (index === editingElement) {
-        setEditingElement(null);
-      }
-    },
-    slugPrefix: slugPrefix,
-    popoverProps: popoverProps
-  }))));
+  return /*#__PURE__*/_jsx(VStack, {
+    spacing: 3,
+    children: /*#__PURE__*/_jsx(ItemGroup, {
+      isRounded: true,
+      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {
+        isGradient: isGradient,
+        canOnlyChangeValues: canOnlyChangeValues,
+        element: element,
+        onStartEditing: () => {
+          if (editingElement !== index) {
+            setEditingElement(index);
+          }
+        },
+        onChange: newElement => {
+          debounceOnChange(elements.map((currentElement, currentIndex) => {
+            if (currentIndex === index) {
+              return newElement;
+            }
+            return currentElement;
+          }));
+        },
+        onRemove: () => {
+          setEditingElement(null);
+          const newElements = elements.filter((_currentElement, currentIndex) => {
+            if (currentIndex === index) {
+              return false;
+            }
+            return true;
+          });
+          onChange(newElements.length ? newElements : undefined);
+        },
+        isEditing: index === editingElement,
+        onStopEditing: () => {
+          if (index === editingElement) {
+            setEditingElement(null);
+          }
+        },
+        slugPrefix: slugPrefix,
+        popoverProps: popoverProps
+      }, index))
+    })
+  });
 }
 const EMPTY_ARRAY = [];
 
@@ -287,110 +300,129 @@ export function PaletteEdit({
       setIsEditing(true);
     }
   }, [isGradient, elements]);
-  return createElement(PaletteEditStyles, null, createElement(HStack, null, createElement(PaletteHeading, {
-    level: paletteLabelHeadingLevel
-  }, paletteLabel), createElement(PaletteActionsContainer, null, hasElements && isEditing && createElement(DoneButton, {
-    size: "small",
-    onClick: () => {
-      setIsEditing(false);
-      setEditingElement(null);
-    }
-  }, __('Done')), !canOnlyChangeValues && createElement(Button, {
-    size: "small",
-    isPressed: isAdding,
-    icon: plus,
-    label: isGradient ? __('Add gradient') : __('Add color'),
-    onClick: () => {
-      const {
-        name,
-        slug
-      } = getNameAndSlugForPosition(elements, slugPrefix);
-      if (!!gradients) {
-        onChange([...gradients, {
-          gradient: DEFAULT_GRADIENT,
-          name,
-          slug
-        }]);
-      } else {
-        onChange([...colors, {
-          color: DEFAULT_COLOR,
-          name,
-          slug
-        }]);
-      }
-      setIsEditing(true);
-      setEditingElement(elements.length);
-    }
-  }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && createElement(DropdownMenu, {
-    icon: moreVertical,
-    label: isGradient ? __('Gradient options') : __('Color options'),
-    toggleProps: {
-      size: 'small'
-    }
-  }, ({
-    onClose
-  }) => createElement(Fragment, null, createElement(NavigableMenu, {
-    role: "menu"
-  }, !isEditing && createElement(Button, {
-    variant: "tertiary",
-    onClick: () => {
-      setIsEditing(true);
-      onClose();
-    },
-    className: "components-palette-edit__menu-button"
-  }, __('Show details')), !canOnlyChangeValues && createElement(Button, {
-    variant: "tertiary",
-    onClick: () => {
-      setEditingElement(null);
-      setIsEditing(false);
-      onChange();
-      onClose();
-    },
-    className: "components-palette-edit__menu-button"
-  }, isGradient ? __('Remove all gradients') : __('Remove all colors')), canReset && createElement(Button, {
-    variant: "tertiary",
-    onClick: () => {
-      setEditingElement(null);
-      onChange();
-      onClose();
-    }
-  }, isGradient ? __('Reset gradient') : __('Reset colors'))))))), hasElements && createElement(PaletteEditContents, null, isEditing && createElement(PaletteEditListView, {
-    canOnlyChangeValues: canOnlyChangeValues,
-    elements: elements
-    // @ts-expect-error TODO: Don't know how to resolve
-    ,
-    onChange: onChange,
-    editingElement: editingElement,
-    setEditingElement: setEditingElement,
-    slugPrefix: slugPrefix,
-    isGradient: isGradient,
-    popoverProps: popoverProps
-  }), !isEditing && editingElement !== null && createElement(ColorPickerPopover, {
-    isGradient: isGradient,
-    onClose: () => setEditingElement(null),
-    onChange: newElement => {
-      debounceOnChange(
-      // @ts-expect-error TODO: Don't know how to resolve
-      elements.map((currentElement, currentIndex) => {
-        if (currentIndex === editingElement) {
-          return newElement;
-        }
-        return currentElement;
-      }));
-    },
-    element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
-    popoverProps: popoverProps
-  }), !isEditing && (isGradient ? createElement(GradientPicker, {
-    gradients: gradients,
-    onChange: onSelectPaletteItem,
-    clearable: false,
-    disableCustomGradients: true
-  }) : createElement(ColorPalette, {
-    colors: colors,
-    onChange: onSelectPaletteItem,
-    clearable: false,
-    disableCustomColors: true
-  }))), !hasElements && emptyMessage && createElement(PaletteEditContents, null, emptyMessage));
+  return /*#__PURE__*/_jsxs(PaletteEditStyles, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      children: [/*#__PURE__*/_jsx(PaletteHeading, {
+        level: paletteLabelHeadingLevel,
+        children: paletteLabel
+      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {
+        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {
+          size: "small",
+          onClick: () => {
+            setIsEditing(false);
+            setEditingElement(null);
+          },
+          children: __('Done')
+        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {
+          size: "small",
+          isPressed: isAdding,
+          icon: plus,
+          label: isGradient ? __('Add gradient') : __('Add color'),
+          onClick: () => {
+            const {
+              name,
+              slug
+            } = getNameAndSlugForPosition(elements, slugPrefix);
+            if (!!gradients) {
+              onChange([...gradients, {
+                gradient: DEFAULT_GRADIENT,
+                name,
+                slug
+              }]);
+            } else {
+              onChange([...colors, {
+                color: DEFAULT_COLOR,
+                name,
+                slug
+              }]);
+            }
+            setIsEditing(true);
+            setEditingElement(elements.length);
+          }
+        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {
+          icon: moreVertical,
+          label: isGradient ? __('Gradient options') : __('Color options'),
+          toggleProps: {
+            size: 'small'
+          },
+          children: ({
+            onClose
+          }) => /*#__PURE__*/_jsx(_Fragment, {
+            children: /*#__PURE__*/_jsxs(NavigableMenu, {
+              role: "menu",
+              children: [!isEditing && /*#__PURE__*/_jsx(Button, {
+                variant: "tertiary",
+                onClick: () => {
+                  setIsEditing(true);
+                  onClose();
+                },
+                className: "components-palette-edit__menu-button",
+                children: __('Show details')
+              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {
+                variant: "tertiary",
+                onClick: () => {
+                  setEditingElement(null);
+                  setIsEditing(false);
+                  onChange();
+                  onClose();
+                },
+                className: "components-palette-edit__menu-button",
+                children: isGradient ? __('Remove all gradients') : __('Remove all colors')
+              }), canReset && /*#__PURE__*/_jsx(Button, {
+                variant: "tertiary",
+                onClick: () => {
+                  setEditingElement(null);
+                  onChange();
+                  onClose();
+                },
+                children: isGradient ? __('Reset gradient') : __('Reset colors')
+              })]
+            })
+          })
+        })]
+      })]
+    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {
+      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {
+        canOnlyChangeValues: canOnlyChangeValues,
+        elements: elements
+        // @ts-expect-error TODO: Don't know how to resolve
+        ,
+        onChange: onChange,
+        editingElement: editingElement,
+        setEditingElement: setEditingElement,
+        slugPrefix: slugPrefix,
+        isGradient: isGradient,
+        popoverProps: popoverProps
+      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {
+        isGradient: isGradient,
+        onClose: () => setEditingElement(null),
+        onChange: newElement => {
+          debounceOnChange(
+          // @ts-expect-error TODO: Don't know how to resolve
+          elements.map((currentElement, currentIndex) => {
+            if (currentIndex === editingElement) {
+              return newElement;
+            }
+            return currentElement;
+          }));
+        },
+        element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
+        popoverProps: popoverProps
+      }), !isEditing && (isGradient ? /*#__PURE__*/_jsx(GradientPicker, {
+        gradients: gradients,
+        onChange: onSelectPaletteItem,
+        clearable: false,
+        disableCustomGradients: true
+      }) : /*#__PURE__*/_jsx(ColorPalette, {
+        colors: colors,
+        onChange: onSelectPaletteItem,
+        clearable: false,
+        disableCustomColors: true
+      }))]
+    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {
+      children: emptyMessage
+    })]
+  });
 }
 export default PaletteEdit;
 //# sourceMappingURL=index.js.map