@wordpress/components 27.6.0 → 28.0.1

package/build/palette-edit/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.PaletteEdit = PaletteEdit;
 exports.default = void 0;
 exports.getNameAndSlugForPosition = getNameAndSlugForPosition;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -28,6 +27,7 @@ var _navigableContainer = require("../navigable-container");
 var _constants = require("../custom-gradient-picker/constants");
 var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));
 var _strings = require("../utils/strings");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -46,7 +46,7 @@ function NameInput({
   onChange,
   label
 }) {
-  return (0, _react.createElement)(_styles.NameInputControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NameInputControl, {
     label: label,
     hideLabelFromVision: true,
     value: value,
@@ -103,30 +103,32 @@ function ColorPickerPopover({
     ...receivedPopoverProps,
     className: (0, _clsx.default)('components-palette-edit__popover', receivedPopoverProps?.className)
   }), [receivedPopoverProps]);
-  return (0, _react.createElement)(_popover.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_popover.default, {
     ...popoverProps,
-    onClose: onClose
-  }, !isGradient && (0, _react.createElement)(_colorPicker.ColorPicker, {
-    color: element.color,
-    enableAlpha: true,
-    onChange: newColor => {
-      onChange({
-        ...element,
-        color: newColor
-      });
-    }
-  }), isGradient && (0, _react.createElement)("div", {
-    className: "components-palette-edit__popover-gradient-picker"
-  }, (0, _react.createElement)(_customGradientPicker.default, {
-    __experimentalIsRenderedInSidebar: true,
-    value: element.gradient,
-    onChange: newGradient => {
-      onChange({
-        ...element,
-        gradient: newGradient
-      });
-    }
-  })));
+    onClose: onClose,
+    children: [!isGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+      color: element.color,
+      enableAlpha: true,
+      onChange: newColor => {
+        onChange({
+          ...element,
+          color: newColor
+        });
+      }
+    }), isGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "components-palette-edit__popover-gradient-picker",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_customGradientPicker.default, {
+        __experimentalIsRenderedInSidebar: true,
+        value: element.gradient,
+        onChange: newGradient => {
+          onChange({
+            ...element,
+            gradient: newGradient
+          });
+        }
+      })
+    })]
+  });
 }
 function Option({
   canOnlyChangeValues,
@@ -151,7 +153,7 @@ function Option({
     // Use the custom palette color item as the popover anchor.
     anchor: popoverAnchor
   }), [popoverAnchor, receivedPopoverProps]);
-  return (0, _react.createElement)(_styles.PaletteItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteItem, {
     className: isEditing ? 'is-selected' : undefined,
     as: isEditing ? 'div' : 'button',
     onClick: onStartEditing,
@@ -161,31 +163,39 @@ function Option({
     ref: setPopoverAnchor,
     ...(isEditing ? {
       ...focusOutsideProps
-    } : {})
-  }, (0, _react.createElement)(_hStack.HStack, {
-    justify: "flex-start"
-  }, (0, _react.createElement)(_styles.IndicatorStyled, {
-    colorValue: value
-  }), (0, _react.createElement)(_flex.FlexItem, null, isEditing && !canOnlyChangeValues ? (0, _react.createElement)(NameInput, {
-    label: isGradient ? (0, _i18n.__)('Gradient name') : (0, _i18n.__)('Color name'),
-    value: element.name,
-    onChange: nextName => onChange({
-      ...element,
-      name: nextName,
-      slug: slugPrefix + (0, _strings.kebabCase)(nextName !== null && nextName !== void 0 ? nextName : '')
-    })
-  }) : (0, _react.createElement)(_styles.NameContainer, null, element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
-  '\u00A0')), isEditing && !canOnlyChangeValues && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_styles.RemoveButton, {
-    size: "small",
-    icon: _icons.lineSolid,
-    label: (0, _i18n.__)('Remove color'),
-    onClick: onRemove
-  }))), isEditing && (0, _react.createElement)(ColorPickerPopover, {
-    isGradient: isGradient,
-    onChange: onChange,
-    element: element,
-    popoverProps: popoverProps
-  }));
+    } : {}),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+      justify: "flex-start",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IndicatorStyled, {
+        colorValue: value
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
+        children: isEditing && !canOnlyChangeValues ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NameInput, {
+          label: isGradient ? (0, _i18n.__)('Gradient name') : (0, _i18n.__)('Color name'),
+          value: element.name,
+          onChange: nextName => onChange({
+            ...element,
+            name: nextName,
+            slug: slugPrefix + (0, _strings.kebabCase)(nextName !== null && nextName !== void 0 ? nextName : '')
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NameContainer, {
+          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
+          '\u00A0'
+        })
+      }), isEditing && !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RemoveButton, {
+          size: "small",
+          icon: _icons.lineSolid,
+          label: (0, _i18n.__)('Remove color'),
+          onClick: onRemove
+        })
+      })]
+    }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPickerPopover, {
+      isGradient: isGradient,
+      onChange: onChange,
+      element: element,
+      popoverProps: popoverProps
+    })]
+  });
 }
 function PaletteEditListView({
   elements,
@@ -203,47 +213,48 @@ function PaletteEditListView({
     elementsReference.current = elements;
   }, [elements]);
   const debounceOnChange = (0, _compose.useDebounce)(onChange, 100);
-  return (0, _react.createElement)(_vStack.VStack, {
-    spacing: 3
-  }, (0, _react.createElement)(_itemGroup.ItemGroup, {
-    isRounded: true
-  }, elements.map((element, index) => (0, _react.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__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
+    spacing: 3,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemGroup.ItemGroup, {
+      isRounded: true,
+      children: elements.map((element, index) => /*#__PURE__*/(0, _jsxRuntime.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 = [];
 
@@ -297,110 +308,129 @@ function PaletteEdit({
       setIsEditing(true);
     }
   }, [isGradient, elements]);
-  return (0, _react.createElement)(_styles.PaletteEditStyles, null, (0, _react.createElement)(_hStack.HStack, null, (0, _react.createElement)(_styles.PaletteHeading, {
-    level: paletteLabelHeadingLevel
-  }, paletteLabel), (0, _react.createElement)(_styles.PaletteActionsContainer, null, hasElements && isEditing && (0, _react.createElement)(_styles.DoneButton, {
-    size: "small",
-    onClick: () => {
-      setIsEditing(false);
-      setEditingElement(null);
-    }
-  }, (0, _i18n.__)('Done')), !canOnlyChangeValues && (0, _react.createElement)(_button.default, {
-    size: "small",
-    isPressed: isAdding,
-    icon: _icons.plus,
-    label: isGradient ? (0, _i18n.__)('Add gradient') : (0, _i18n.__)('Add color'),
-    onClick: () => {
-      const {
-        name,
-        slug
-      } = getNameAndSlugForPosition(elements, slugPrefix);
-      if (!!gradients) {
-        onChange([...gradients, {
-          gradient: _constants.DEFAULT_GRADIENT,
-          name,
-          slug
-        }]);
-      } else {
-        onChange([...colors, {
-          color: DEFAULT_COLOR,
-          name,
-          slug
-        }]);
-      }
-      setIsEditing(true);
-      setEditingElement(elements.length);
-    }
-  }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0, _react.createElement)(_dropdownMenu.default, {
-    icon: _icons.moreVertical,
-    label: isGradient ? (0, _i18n.__)('Gradient options') : (0, _i18n.__)('Color options'),
-    toggleProps: {
-      size: 'small'
-    }
-  }, ({
-    onClose
-  }) => (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_navigableContainer.NavigableMenu, {
-    role: "menu"
-  }, !isEditing && (0, _react.createElement)(_button.default, {
-    variant: "tertiary",
-    onClick: () => {
-      setIsEditing(true);
-      onClose();
-    },
-    className: "components-palette-edit__menu-button"
-  }, (0, _i18n.__)('Show details')), !canOnlyChangeValues && (0, _react.createElement)(_button.default, {
-    variant: "tertiary",
-    onClick: () => {
-      setEditingElement(null);
-      setIsEditing(false);
-      onChange();
-      onClose();
-    },
-    className: "components-palette-edit__menu-button"
-  }, isGradient ? (0, _i18n.__)('Remove all gradients') : (0, _i18n.__)('Remove all colors')), canReset && (0, _react.createElement)(_button.default, {
-    variant: "tertiary",
-    onClick: () => {
-      setEditingElement(null);
-      onChange();
-      onClose();
-    }
-  }, isGradient ? (0, _i18n.__)('Reset gradient') : (0, _i18n.__)('Reset colors'))))))), hasElements && (0, _react.createElement)(_styles.PaletteEditContents, null, isEditing && (0, _react.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 && (0, _react.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 ? (0, _react.createElement)(_gradientPicker.default, {
-    gradients: gradients,
-    onChange: onSelectPaletteItem,
-    clearable: false,
-    disableCustomGradients: true
-  }) : (0, _react.createElement)(_colorPalette.default, {
-    colors: colors,
-    onChange: onSelectPaletteItem,
-    clearable: false,
-    disableCustomColors: true
-  }))), !hasElements && emptyMessage && (0, _react.createElement)(_styles.PaletteEditContents, null, emptyMessage));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteEditStyles, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaletteHeading, {
+        level: paletteLabelHeadingLevel,
+        children: paletteLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteActionsContainer, {
+        children: [hasElements && isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DoneButton, {
+          size: "small",
+          onClick: () => {
+            setIsEditing(false);
+            setEditingElement(null);
+          },
+          children: (0, _i18n.__)('Done')
+        }), !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          size: "small",
+          isPressed: isAdding,
+          icon: _icons.plus,
+          label: isGradient ? (0, _i18n.__)('Add gradient') : (0, _i18n.__)('Add color'),
+          onClick: () => {
+            const {
+              name,
+              slug
+            } = getNameAndSlugForPosition(elements, slugPrefix);
+            if (!!gradients) {
+              onChange([...gradients, {
+                gradient: _constants.DEFAULT_GRADIENT,
+                name,
+                slug
+              }]);
+            } else {
+              onChange([...colors, {
+                color: DEFAULT_COLOR,
+                name,
+                slug
+              }]);
+            }
+            setIsEditing(true);
+            setEditingElement(elements.length);
+          }
+        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.default, {
+          icon: _icons.moreVertical,
+          label: isGradient ? (0, _i18n.__)('Gradient options') : (0, _i18n.__)('Color options'),
+          toggleProps: {
+            size: 'small'
+          },
+          children: ({
+            onClose
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigableContainer.NavigableMenu, {
+              role: "menu",
+              children: [!isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                variant: "tertiary",
+                onClick: () => {
+                  setIsEditing(true);
+                  onClose();
+                },
+                className: "components-palette-edit__menu-button",
+                children: (0, _i18n.__)('Show details')
+              }), !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                variant: "tertiary",
+                onClick: () => {
+                  setEditingElement(null);
+                  setIsEditing(false);
+                  onChange();
+                  onClose();
+                },
+                className: "components-palette-edit__menu-button",
+                children: isGradient ? (0, _i18n.__)('Remove all gradients') : (0, _i18n.__)('Remove all colors')
+              }), canReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                variant: "tertiary",
+                onClick: () => {
+                  setEditingElement(null);
+                  onChange();
+                  onClose();
+                },
+                children: isGradient ? (0, _i18n.__)('Reset gradient') : (0, _i18n.__)('Reset colors')
+              })]
+            })
+          })
+        })]
+      })]
+    }), hasElements && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteEditContents, {
+      children: [isEditing && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_gradientPicker.default, {
+        gradients: gradients,
+        onChange: onSelectPaletteItem,
+        clearable: false,
+        disableCustomGradients: true
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
+        colors: colors,
+        onChange: onSelectPaletteItem,
+        clearable: false,
+        disableCustomColors: true
+      }))]
+    }), !hasElements && emptyMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaletteEditContents, {
+      children: emptyMessage
+    })]
+  });
 }
 var _default = exports.default = PaletteEdit;
 //# sourceMappingURL=index.js.map