npm - @strapi/plugin-color-picker - Versions diffs - 0.0.0-next.f5b09a8e61e059f02784478e27c310c6290be088 → 0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c - Mend

@strapi/plugin-color-picker 0.0.0-next.f5b09a8e61e059f02784478e27c310c6290be088 → 0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/_chunks/ColorPickerInput-0lOoTrf0.js ADDED Viewed

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-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-OJYEuoCq.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__ */ jsxRuntime.jsx(
+      designSystem.Field,
+      {
+        name,
+        id: name,
+        error,
+        hint: description && formatMessage(description),
+        required,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            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__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ColorPreview, { color }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Typography,
+                    {
+                      style: { textTransform: "uppercase" },
+                      textColor: value ? void 0 : "neutral600",
+                      variant: "omega",
+                      children: color
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true })
+              ]
+            }
+          ),
+          showColorPicker && /* @__PURE__ */ jsxRuntime.jsx(
+            ColorPickerPopover,
+            {
+              onBlur: handleBlur,
+              role: "dialog",
+              source: colorPickerButtonRef,
+              spacing: 4,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ColorPicker,
+                  {
+                    color,
+                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
+                    id: index.getTrad("color-picker.input.format"),
+                    defaultMessage: "HEX"
+                  }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    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
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
+        ] })
+      }
+    );
+  }
+);
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=ColorPickerInput-0lOoTrf0.js.map

package/dist/_chunks/{ColorPickerInput-8875b370.js.map → ColorPickerInput-0lOoTrf0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerInput-8875b370.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n /\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/\n A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n /\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/\n Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n \n Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n \n const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n \n React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n \n return <input ref={ref} />\n * }\n * ```\n /\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/*\n TODO: A lot of these props should extend `FieldProps`\n /\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /\n TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value \|\| '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["React","styled","HexColorPicker","BaseButton","Popover","useIntl","jsxDEV","Field","Flex","FieldLabel","this","getTrad","Typography","CarretDown","FocusTrap","Box","FieldInput","FieldHint","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;AAC5C,MAAA,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AAAA,EACA,WAAA,QAAQ,QAAQ,QAAQ,QAAW;AAC3C,QAAkC,UAAU;AAAA,EAC/C;AACF;AAMA,SAAS,eAAkB,MAAwB;AAC1C,SAAA,CAAC,SAAY,KAAK,QAAQ,CAAC,QAAQ,OAAO,KAAK,IAAI,CAAC;AAC7D;AAsBA,SAAS,mBAAsB,MAAwB;AAErD,SAAOA,iBAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD;ACxBA,MAAM,eAAeC,gBAAO,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKN,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAI5C,MAAM,cAAcA,gBAAAA,QAAOC,cAAAA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,qBAIvB,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMrC,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,kBAC1B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAIhD,MAAM,oBAAoBD,gBAAAA,QAAOE,aAAAA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAM9B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,YAIhC,CAAC,EAAE,MAAA,MAAY,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAKlD,MAAM,qBAAqBF,gBAAAA,QAAOG,aAAAA,OAAO;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAwBpC,MAAM,mBAAmBJ,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,KAEV,iBACG;AACH,UAAM,CAAC,iBAAiB,kBAAkB,IAAIA,iBAAM,SAAS,KAAK;AAC5D,UAAA,uBAAuBA,iBAAM,OAA0B,IAAK;AAC5D,UAAA,EAAE,kBAAkBK,UAAAA;AAC1B,UAAM,QAAQ,SAAS;AAEjB,UAAA,aAAsD,CAAC,MAAM;AACjE,QAAE,eAAe;AAEjB,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAa,GAAG;AAC9C,2BAAmB,KAAK;AAAA,MAC1B;AAAA,IAAA;AAGI,UAAA,eAAe,gBAAgB,cAAc,oBAAoB;AAGrE,WAAAC,8BAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QAEJ;AAAA,QACA,MAAM,eAAe,cAAc,WAAW;AAAA,QAC9C;AAAA,QAEA,+CAACC,mBAAK,EAAA,WAAU,UAAS,YAAW,WAAU,KAAK,GACjD,UAAA;AAAA,UAAAF,8BAAAA,OAACG,aAAW,YAAA,EAAA,QAAQ,aAAc,UAAA,cAAc,SAAS,EAAzD,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAA2D,GAAAC,UAAA;AAAA,UAC3DJ,8BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,cAAY,cAAc;AAAA,gBACxB,IAAIK,cAAQ,gCAAgC;AAAA,gBAC5C,gBAAgB;AAAA,cAAA,CACjB;AAAA,cACD,iBAAc;AAAA,cACd,iBAAc;AAAA,cACd,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf;AAAA,cACA,SAAS,MAAM,mBAAmB,CAAC,eAAe;AAAA,cAElD,UAAA;AAAA,gBAAAL,qCAACE,aAAAA,MACC,EAAA,UAAA;AAAA,kBAAAF,8BAAA,OAAC,gBAAa,MAAd,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAA4B,GAAAI,UAAA;AAAA,kBAC5BJ,8BAAA;AAAA,oBAACM,aAAA;AAAA,oBAAA;AAAA,sBACC,OAAO,EAAE,eAAe,YAAY;AAAA,sBACpC,WAAW,QAAQ,SAAY;AAAA,sBAC/B,SAAQ;AAAA,sBAEP,UAAA;AAAA,oBAAA;AAAA,oBALH;AAAA,oBAAA;AAAA,oBAAA;AAAA,sBAAA,UAAA;AAAA,sBAAA,YAAA;AAAA,sBAAA,cAAA;AAAA,oBAAA;AAAA,oBAAAF;AAAAA,kBAMA;AAAA,gBAAA,KARF,QAAA,MAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBASA,GAAAA,UAAA;AAAA,gBACAJ,8BAAA,OAACO,MAAW,YAAA,EAAA,eAAW,KAAvB,GAAA,QAAA,OAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAAwB,GAAAH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAvB1B;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAAA;AAAAA,UAwBA;AAAA,UACC,mBACCJ,8BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cAET,+CAACQ,aAAAA,WAAU,EAAA,UAAU,MAAM,mBAAmB,KAAK,GACjD,UAAA;AAAA,gBAAAR,8BAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,UAAU,CAAC,aACT,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,UAAU,MAAM,UAAU,QAAQ;AAAA,kBAAA;AAAA,kBAHxE;AAAA,kBAAA;AAAA,kBAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAAA;AAAA,kBAAAI;AAAAA,gBAKA;AAAA,qDACCF,aAAAA,MAAK,EAAA,YAAY,GAAG,aAAa,GAAG,gBAAe,YAClD,UAAA;AAAA,kBAACF,8BAAA,OAAAS,aAAA,KAAA,EAAI,cAAc,GACjB,UAACT,8BAAAA,OAAAM,aAAA,YAAA,EAAW,SAAQ,SAAQ,IAAG,SAAQ,WAAU,cAC9C,UAAc,cAAA;AAAA,oBACb,IAAID,cAAQ,2BAA2B;AAAA,oBACvC,gBAAgB;AAAA,kBAAA,CACjB,EAJH,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAAA,GAAAD,UAKA,EANF,GAAA,QAAA,OAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAOA,GAAAA,UAAA;AAAA,kBACAJ,8BAAA;AAAA,oBAACU,aAAA;AAAA,oBAAA;AAAA,sBACC,IAAG;AAAA,sBACH,cAAY,cAAc;AAAA,wBACxB,IAAIL,cAAQ,+BAA+B;AAAA,wBAC3C,gBAAgB;AAAA,sBAAA,CACjB;AAAA,sBACD,OAAO,EAAE,eAAe,YAAY;AAAA,sBACpC;AAAA,sBACA,aAAY;AAAA,sBACZ;AAAA,oBAAA;AAAA,oBATF;AAAA,oBAAA;AAAA,oBAAA;AAAA,sBAAA,UAAA;AAAA,sBAAA,YAAA;AAAA,sBAAA,cAAA;AAAA,oBAAA;AAAA,oBAAAD;AAAAA,kBAUA;AAAA,gBAAA,KAnBF,QAAA,MAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAoBA,GAAAA,UAAA;AAAA,cAAA,KA3BF,QAAA,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAA,YAAA;AAAA,gBAAA,cAAA;AAAA,cA4BA,GAAAA,UAAA;AAAA,YAAA;AAAA,YAlCF;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAAA;AAAAA,UAmCA;AAAA,+CAEDO,aAAAA,WAAD,CAAA,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAW,GAAAP,UAAA;AAAA,+CACVQ,aAAAA,YAAD,CAAA,GAAA,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAY,GAAAR,UAAA;AAAA,QAAA,KAlEd,QAAA,MAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAmEA,GAAAA,UAAA;AAAA,MAAA;AAAA,MA3EF;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAA;AAAAA,IAAA;AAAA,EA8EJ;AACF;;"}
1	+ {"version":3,"file":"ColorPickerInput-0lOoTrf0.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n /\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/\n A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n /\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/\n Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n \n Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n \n const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n \n React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n \n return <input ref={ref} />\n * }\n * ```\n /\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/*\n TODO: A lot of these props should extend `FieldProps`\n /\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /\n TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value \|\| '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["React","styled","HexColorPicker","BaseButton","Popover","useIntl","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}

package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs ADDED Viewed

@@ -0,0 +1,185 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseButton, Popover, Field, Flex, FieldLabel, Typography, FocusTrap, Box, FieldInput, FieldHint, FieldError } from "@strapi/design-system";
+import { CarretDown } from "@strapi/icons";
+import { HexColorPicker } from "react-colorful";
+import { useIntl } from "react-intl";
+import styled from "styled-components";
+import { g as getTrad } from "./index-uOrtnJpz.mjs";
+import "@strapi/helper-plugin";
+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.useCallback(composeRefs(...refs), refs);
+}
+const ColorPreview = styled.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(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(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(Popover)`
+  padding: ${({ theme }) => theme.spaces[2]};
+  min-height: 270px;
+`;
+const ColorPickerInput = React.forwardRef(
+  ({
+    attribute,
+    description,
+    disabled = false,
+    error,
+    intlLabel,
+    labelAction,
+    name,
+    onChange,
+    required = false,
+    value = ""
+  }, forwardedRef) => {
+    const [showColorPicker, setShowColorPicker] = React.useState(false);
+    const colorPickerButtonRef = React.useRef(null);
+    const { formatMessage } = 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__ */ jsx(
+      Field,
+      {
+        name,
+        id: name,
+        error,
+        hint: description && formatMessage(description),
+        required,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+          /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
+          /* @__PURE__ */ jsxs(
+            ColorPickerToggle,
+            {
+              ref: composedRefs,
+              "aria-label": formatMessage({
+                id: 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__ */ jsxs(Flex, { children: [
+                  /* @__PURE__ */ jsx(ColorPreview, { color }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      style: { textTransform: "uppercase" },
+                      textColor: value ? void 0 : "neutral600",
+                      variant: "omega",
+                      children: color
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true })
+              ]
+            }
+          ),
+          showColorPicker && /* @__PURE__ */ jsx(
+            ColorPickerPopover,
+            {
+              onBlur: handleBlur,
+              role: "dialog",
+              source: colorPickerButtonRef,
+              spacing: 4,
+              children: /* @__PURE__ */ jsxs(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
+                /* @__PURE__ */ jsx(
+                  ColorPicker,
+                  {
+                    color,
+                    onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
+                  /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
+                    id: getTrad("color-picker.input.format"),
+                    defaultMessage: "HEX"
+                  }) }) }),
+                  /* @__PURE__ */ jsx(
+                    FieldInput,
+                    {
+                      id: "color-picker-value",
+                      "aria-label": formatMessage({
+                        id: getTrad("color-picker.input.aria-label"),
+                        defaultMessage: "Color picker input"
+                      }),
+                      style: { textTransform: "uppercase" },
+                      value,
+                      placeholder: "#000000",
+                      onChange
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldHint, {}),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ] })
+      }
+    );
+  }
+);
+export {
+  ColorPickerInput
+};
+//# sourceMappingURL=ColorPickerInput-fKB6YXW8.mjs.map

package/dist/_chunks/{ColorPickerInput-0d985ad5.mjs.map → ColorPickerInput-fKB6YXW8.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerInput-0d985ad5.mjs","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n /\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/\n A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n /\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/\n Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n \n Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n \n const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n \n React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n \n return <input ref={ref} />\n * }\n * ```\n /\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/*\n TODO: A lot of these props should extend `FieldProps`\n /\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /\n TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value \|\| '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["this"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPickerInput-fKB6YXW8.mjs","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n /\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/\n A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n /\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/\n Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n \n Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n \n const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n \n React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n \n return <input ref={ref} />\n * }\n * ```\n /\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/*\n TODO: A lot of these props should extend `FieldProps`\n /\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /\n TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value \|\| '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":[],"mappings":"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"}

package/dist/_chunks/{cs-c22467c6.js → cs-4GdZY0p6.js} RENAMED Viewed

@@ -13,4 +13,4 @@ const cs = {
   "color-picker.toggle.aria-label": "Přepínač výběru barvy"
 };
 exports.default = cs;
-//# sourceMappingURL=cs-c22467c6.js.map
+//# sourceMappingURL=cs-4GdZY0p6.js.map

package/dist/_chunks/cs-4GdZY0p6.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"cs-4GdZY0p6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/_chunks/{cs-32e5b75a.mjs → cs-A2xRj-2-.mjs} RENAMED Viewed

@@ -13,4 +13,4 @@ const cs = {
 export {
   cs as default
 };
-//# sourceMappingURL=cs-32e5b75a.mjs.map
+//# sourceMappingURL=cs-A2xRj-2-.mjs.map

package/dist/_chunks/cs-A2xRj-2-.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"cs-A2xRj-2-.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/_chunks/{en-2230584b.mjs → en-L6ZZWDJv.mjs} RENAMED Viewed

@@ -16,4 +16,4 @@ const en = {
 export {
   en as default
 };
-//# sourceMappingURL=en-2230584b.mjs.map
+//# sourceMappingURL=en-L6ZZWDJv.mjs.map

package/dist/_chunks/en-L6ZZWDJv.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"en-L6ZZWDJv.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/_chunks/{en-eb6717ab.js → en-WeRHjVEB.js} RENAMED Viewed

@@ -16,4 +16,4 @@ const en = {
   "plugin.name": "Color picker"
 };
 exports.default = en;
-//# sourceMappingURL=en-eb6717ab.js.map
+//# sourceMappingURL=en-WeRHjVEB.js.map

package/dist/_chunks/en-WeRHjVEB.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"en-WeRHjVEB.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{index-9695efa4.js → index-OJYEuoCq.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 const helperPlugin = require("@strapi/helper-plugin");
-const jsxDevRuntime = require("react/jsx-dev-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const styled = require("styled-components");
@@ -26,15 +26,7 @@ const IconBox = styled__default.default(designSystem.Flex)`
   }
 `;
 const ColorPickerIcon = () => {
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(designSystem.Icon, { as: icons.Paint }, void 0, false, {
-    fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 19,
-    columnNumber: 7
-  }, globalThis) }, void 0, false, {
-    fileName: "/home/runner/work/strapi/strapi/packages/plugins/color-picker/admin/src/components/ColorPickerIcon.tsx",
-    lineNumber: 18,
-    columnNumber: 5
-  }, globalThis);
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.Paint }) });
 };
 const pluginId = "color-picker";
 const getTrad = (id) => `${pluginId}.${id}`;
@@ -58,7 +50,7 @@ const index = {
         defaultMessage: "Select any color"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-8875b370.js")).then((module2) => ({
+        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-0lOoTrf0.js")).then((module2) => ({
           default: module2.ColorPickerInput
         }))
       },
@@ -104,7 +96,7 @@ const index = {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-c22467c6.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-eb6717ab.js")), "./translations/ru.json": () => Promise.resolve().then(() => require("./ru-1d1cf8a8.js")), "./translations/sv.json": () => Promise.resolve().then(() => require("./sv-6e7fa200.js")), "./translations/tr.json": () => Promise.resolve().then(() => require("./tr-67b6e192.js")), "./translations/zh.json": () => Promise.resolve().then(() => require("./zh-e5010f8b.js")) }), `./translations/${locale}.json`).then(({ default: data }) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-4GdZY0p6.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-WeRHjVEB.js")), "./translations/ru.json": () => Promise.resolve().then(() => require("./ru-UXN_ByI9.js")), "./translations/sv.json": () => Promise.resolve().then(() => require("./sv-3-Yk9bKb.js")), "./translations/tr.json": () => Promise.resolve().then(() => require("./tr-AbD-f8F0.js")), "./translations/zh.json": () => Promise.resolve().then(() => require("./zh-c23gv_oM.js")) }), `./translations/${locale}.json`).then(({ default: data }) => {
           return {
             data: helperPlugin.prefixPluginTranslations(data, pluginId),
             locale
@@ -122,4 +114,4 @@ const index = {
 };
 exports.getTrad = getTrad;
 exports.index = index;
-//# sourceMappingURL=index-9695efa4.js.map
+//# sourceMappingURL=index-OJYEuoCq.js.map

package/dist/_chunks/{index-9695efa4.js.map → index-OJYEuoCq.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index-~~9695efa4~~.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","~~jsxDEV","~~Icon","Paint","~~this","~~module","prefixPluginTranslations"],"mappings":";;;;;;;;;;;;;;;;;AAIA,MAAM,UAAUA,gBAAAA,QAAOC,aAAAA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,~~8CACG~~,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,~~UAACC~~,~~qCAAAC~~,~~aAAAA~~,~~MAAA,EAAK,~~IAAIC,~~MAAV~~,~~MAAA~~,~~GAAA~~,~~QAAA,OAAA~~;~~AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,UAAiB,EADnB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,UAAA;~~AAEJ;ACrBO,MAAM,WAAW;ACEjB,MAAM,UAAU,CAAC,OAAe,GAAG,QAAQ,IAAI,EAAE;ACKxD,MAAe,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,SAAS,KAAU;AACjB,QAAI,aAAa,SAAS;AAAA,MACxB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,QACT,IAAI,QAAQ,oBAAoB;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA,iBAAiB;AAAA,QACf,IAAI,QAAQ,0BAA0B;AAAA,QACtC,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,QACV,OAAO,YACL,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,gCAA+B,CAAE,EAAA,KAAK,CAACC,aAAY;AAAA,UACxD,SAASA,QAAO;AAAA,QAAA,EAChB;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR;AAAA,YACE,WAAW;AAAA,cACT,IAAI,QAAQ,qCAAqC;AAAA,cACjD,gBAAgB;AAAA,YAClB;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,aAAa;AAAA,cACX,IAAI,QAAQ,iDAAiD;AAAA,cAC7D,gBAAgB;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,YACE,cAAc;AAAA,cACZ,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAClB;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT,IAAI,QAAQ,6CAA6C;AAAA,kBACzD,gBAAgB;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACX,IAAI,QAAQ,yDAAyD;AAAA,kBACrE,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EACA,MAAM,cAAc,EAAE,WAAkC;AAChD,UAAA,gBAAgB,MAAM,QAAQ;AAAA,MAClC,QAAQ,IAAI,CAAC,WAAW;AACf,eAAA,qCAA+B,uBAAA,OAAA,EAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,IAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,GAAA,0BAAA,MAAA,QAAA,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAA,CAAA,EAAA,CAAA,GAAA,kBAAA,MAAA,OAAA,EACnC,KAAK,CAAC,EAAE,SAAS,WAAW;AACpB,iBAAA;AAAA,YACL,MAAMC,aAAAA,yBAAyB,MAAM,QAAQ;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF,CACD,EACA,MAAM,MAAM;AACJ,iBAAA;AAAA,YACL,MAAM,CAAC;AAAA,YACP;AAAA,UAAA;AAAA,QACF,CACD;AAAA,MAAA,CACJ;AAAA,IAAA;AAGI,WAAA,QAAQ,QAAQ,aAAa;AAAA,EACtC;AACF;;;"}
1	+ {"version":3,"file":"index-OJYEuoCq.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex, Icon } from '@strapi/design-system';\nimport { Paint } from '@strapi/icons';\nimport styled from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values /\n / to stay consistent between themes /\n background-color: #f0f0ff; / primary100 /\n border: 1px solid #d9d8ff; / primary200 /\n\n svg > path {\n fill: #4945ff; / primary600 /\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <Icon as={Paint} />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","import { prefixPluginTranslations } from '@strapi/helper-plugin';\n\nimport { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /\n TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","Icon","Paint","module","prefixPluginTranslations"],"mappings":"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"}