@strapi/plugin-color-picker 4.15.1 → 4.15.3-alpha.0

package/dist/_chunks/ColorPickerInput-cddbeb1a.js

@@ -1,298 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxDevRuntime = require("react/jsx-dev-runtime");
-const React = require("react");
-const designSystem = require("@strapi/design-system");
-const icons = require("@strapi/icons");
-const reactColorful = require("react-colorful");
-const reactIntl = require("react-intl");
-const styled = require("styled-components");
-const index = require("./index-0b5f614d.js");
-require("@strapi/helper-plugin");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => refs.forEach((ref) => setRef(ref, node));
-}
-function useComposedRefs(...refs) {
-  return React__namespace.useCallback(composeRefs(...refs), refs);
-}
-const ColorPreview = styled__default.default.div`
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  background-color: ${(props) => props.color};
-  border: 1px solid rgba(0, 0, 0, 0.1);
-`;
-const ColorPicker = styled__default.default(reactColorful.HexColorPicker)`
-  && {
-    width: 100%;
-    aspect-ratio: 1.5;
-  }
-
-  .react-colorful__pointer {
-    width: ${({ theme }) => theme.spaces[3]};
-    height: ${({ theme }) => theme.spaces[3]};
-  }
-
-  .react-colorful__saturation {
-    border-radius: ${({ theme }) => theme.spaces[1]};
-    border-bottom: none;
-  }
-
-  .react-colorful__hue {
-    border-radius: 10px;
-    height: ${({ theme }) => theme.spaces[3]};
-    margin-top: ${({ theme }) => theme.spaces[2]};
-  }
-`;
-const ColorPickerToggle = styled__default.default(designSystem.BaseButton)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  svg {
-    width: ${({ theme }) => theme.spaces[2]};
-    height: ${({ theme }) => theme.spaces[2]};
-  }
-
-  svg > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-    justify-self: flex-end;
-  }
-`;
-const ColorPickerPopover = styled__default.default(designSystem.Popover)`
-  padding: ${({ theme }) => theme.spaces[2]};
-  min-height: 270px;
-`;
-const ColorPickerInput = React__namespace.forwardRef(
-  ({
-    attribute,
-    description,
-    disabled = false,
-    error,
-    intlLabel,
-    labelAction,
-    name,
-    onChange,
-    required = false,
-    value = ""
-  }, forwardedRef) => {
-    const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
-    const colorPickerButtonRef = React__namespace.useRef(null);
-    const { formatMessage } = reactIntl.useIntl();
-    const color = value || "#000000";
-    const handleBlur = (e) => {
-      e.preventDefault();
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        setShowColorPicker(false);
-      }
-    };
-    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
-    return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-      designSystem.Field,
-      {
-        name,
-        id: name,
-        error,
-        hint: description && formatMessage(description),
-        required,
-        children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 138,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-            ColorPickerToggle,
-            {
-              ref: composedRefs,
-              "aria-label": formatMessage({
-                id: index.getTrad("color-picker.toggle.aria-label"),
-                defaultMessage: "Color picker toggle"
-              }),
-              "aria-controls": "color-picker-value",
-              "aria-haspopup": "dialog",
-              "aria-expanded": showColorPicker,
-              "aria-disabled": disabled,
-              disabled,
-              onClick: () => setShowColorPicker(!showColorPicker),
-              children: [
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { children: [
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(ColorPreview, { color }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 153,
-                    columnNumber: 15
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                    designSystem.Typography,
-                    {
-                      style: { textTransform: "uppercase" },
-                      textColor: value ? void 0 : "neutral600",
-                      variant: "omega",
-                      children: color
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 154,
-                      columnNumber: 15
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 152,
-                  columnNumber: 13
-                }, globalThis),
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(icons.CarretDown, { "aria-hidden": true }, void 0, false, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 162,
-                  columnNumber: 13
-                }, globalThis)
-              ]
-            },
-            void 0,
-            true,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 139,
-              columnNumber: 11
-            },
-            globalThis
-          ),
-          showColorPicker && /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-            ColorPickerPopover,
-            {
-              onBlur: handleBlur,
-              role: "dialog",
-              source: colorPickerButtonRef,
-              spacing: 4,
-              children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                  ColorPicker,
-                  {
-                    color,
-                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
-                  },
-                  void 0,
-                  false,
-                  {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 172,
-                    columnNumber: 17
-                  },
-                  globalThis
-                ),
-                /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
-                    id: index.getTrad("color-picker.input.format"),
-                    defaultMessage: "HEX"
-                  }) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 180,
-                    columnNumber: 21
-                  }, globalThis) }, void 0, false, {
-                    fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                    lineNumber: 179,
-                    columnNumber: 19
-                  }, globalThis),
-                  /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-                    designSystem.FieldInput,
-                    {
-                      id: "color-picker-value",
-                      "aria-label": formatMessage({
-                        id: index.getTrad("color-picker.input.aria-label"),
-                        defaultMessage: "Color picker input"
-                      }),
-                      style: { textTransform: "uppercase" },
-                      value,
-                      placeholder: "#000000",
-                      onChange
-                    },
-                    void 0,
-                    false,
-                    {
-                      fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                      lineNumber: 187,
-                      columnNumber: 19
-                    },
-                    globalThis
-                  )
-                ] }, void 0, true, {
-                  fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                  lineNumber: 178,
-                  columnNumber: 17
-                }, globalThis)
-              ] }, void 0, true, {
-                fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-                lineNumber: 171,
-                columnNumber: 15
-              }, globalThis)
-            },
-            void 0,
-            false,
-            {
-              fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-              lineNumber: 165,
-              columnNumber: 13
-            },
-            globalThis
-          ),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldHint, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 202,
-            columnNumber: 11
-          }, globalThis),
-          /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.FieldError, {}, void 0, false, {
-            fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-            lineNumber: 203,
-            columnNumber: 11
-          }, globalThis)
-        ] }, void 0, true, {
-          fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-          lineNumber: 137,
-          columnNumber: 9
-        }, globalThis)
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/alex/dev/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx",
-        lineNumber: 129,
-        columnNumber: 7
-      },
-      globalThis
-    );
-  }
-);
-exports.ColorPickerInput = ColorPickerInput;
-//# sourceMappingURL=ColorPickerInput-cddbeb1a.js.map