@strapi/plugin-color-picker 5.7.0-beta.0 → 5.8.0

package/dist/_chunks/{ColorPickerInput-m6ZX3Kq-.mjs → ColorPickerInput-BiwD6BEw.mjs}

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button, Popover, useComposedRefs, Field, Flex, Typography, Box } from "@strapi/design-system";
 import { CaretDown } from "@strapi/icons";
+import { useField } from "@strapi/strapi/admin";
 import { HexColorPicker } from "react-colorful";
 import { useIntl } from "react-intl";
 import { styled } from "styled-components";
-import { g as getTrad } from "./index-CgXv8Era.mjs";
+import { g as getTrad } from "./index-dnY2u5Dg.mjs";
 const ColorPreview = styled.div`
   border-radius: 50%;
   width: 20px;
@@ -59,13 +60,14 @@ const ColorPickerPopover = styled(Popover.Content)`
   min-height: 270px;
 `;
 const ColorPickerInput = React.forwardRef(
-  ({ hint, disabled = false, labelAction, label, name, required = false, onChange, value, error }, forwardedRef) => {
+  ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
     const [showColorPicker, setShowColorPicker] = React.useState(false);
     const colorPickerButtonRef = React.useRef(null);
     const { formatMessage } = useIntl();
-    const color = value || "#000000";
+    const field = useField(name);
+    const color = field.value ?? "#000000";
     const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
-    return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error: field.error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
       /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setShowColorPicker, children: [
         /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(
@@ -90,7 +92,7 @@ const ColorPickerInput = React.forwardRef(
                   Typography,
                   {
                     style: { textTransform: "uppercase" },
-                    textColor: value ? void 0 : "neutral600",
+                    textColor: field.value ? void 0 : "neutral600",
                     variant: "omega",
                     children: color
                   }
@@ -101,7 +103,7 @@ const ColorPickerInput = React.forwardRef(
           }
         ) }),
         /* @__PURE__ */ jsxs(ColorPickerPopover, { sideOffset: 4, children: [
-          /* @__PURE__ */ jsx(ColorPicker, { color, onChange: (hexValue) => onChange(name, hexValue) }),
+          /* @__PURE__ */ jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
           /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
             /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", tag: "label", textColor: "neutral600", children: formatMessage({
               id: getTrad("color-picker.input.format"),
@@ -115,9 +117,11 @@ const ColorPickerInput = React.forwardRef(
                   defaultMessage: "Color picker input"
                 }),
                 style: { textTransform: "uppercase" },
-                value,
+                name,
+                defaultValue: color,
                 placeholder: "#000000",
-                onChange
+                onChange: field.onChange,
+                ...props
               }
             ) })
           ] })

package/dist/_chunks/{ColorPickerInput-D6xkBHIN.js → ColorPickerInput-gD_Mb6qe.js}

@@ -4,10 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
+const admin = require("@strapi/strapi/admin");
 const reactColorful = require("react-colorful");
 const reactIntl = require("react-intl");
 const styledComponents = require("styled-components");
-const index = require("./index-CCLaPAwT.js");
+const index = require("./index-CNTxZbMN.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -79,13 +80,14 @@ const ColorPickerPopover = styledComponents.styled(designSystem.Popover.Content)
   min-height: 270px;
 `;
 const ColorPickerInput = React__namespace.forwardRef(
-  ({ hint, disabled = false, labelAction, label, name, required = false, onChange, value, error }, forwardedRef) => {
+  ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
     const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
     const colorPickerButtonRef = React__namespace.useRef(null);
     const { formatMessage } = reactIntl.useIntl();
-    const color = value || "#000000";
+    const field = admin.useField(name);
+    const color = field.value ?? "#000000";
     const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, id: name, error, hint, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, id: name, error: field.error, hint, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { onOpenChange: setShowColorPicker, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -110,7 +112,7 @@ const ColorPickerInput = React__namespace.forwardRef(
                   designSystem.Typography,
                   {
                     style: { textTransform: "uppercase" },
-                    textColor: value ? void 0 : "neutral600",
+                    textColor: field.value ? void 0 : "neutral600",
                     variant: "omega",
                     children: color
                   }
@@ -121,7 +123,7 @@ const ColorPickerInput = React__namespace.forwardRef(
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ColorPickerPopover, { sideOffset: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color, onChange: (hexValue) => onChange(name, hexValue) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
           /* @__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", tag: "label", textColor: "neutral600", children: formatMessage({
               id: index.getTrad("color-picker.input.format"),
@@ -135,9 +137,11 @@ const ColorPickerInput = React__namespace.forwardRef(
                   defaultMessage: "Color picker input"
                 }),
                 style: { textTransform: "uppercase" },
-                value,
+                name,
+                defaultValue: color,
                 placeholder: "#000000",
-                onChange
+                onChange: field.onChange,
+                ...props
               }
             ) })
           ] })

package/dist/_chunks/{index-CCLaPAwT.js → index-CNTxZbMN.js}

@@ -60,7 +60,7 @@ const index = {
         defaultMessage: "Select any color"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-D6xkBHIN.js")).then((module2) => ({
+        Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-gD_Mb6qe.js")).then((module2) => ({
           default: module2.ColorPickerInput
         }))
       },

package/dist/_chunks/{index-CgXv8Era.mjs → index-dnY2u5Dg.mjs}

@@ -59,7 +59,7 @@ const index = {
         defaultMessage: "Select any color"
       },
       components: {
-        Input: async () => import("./ColorPickerInput-m6ZX3Kq-.mjs").then((module) => ({
+        Input: async () => import("./ColorPickerInput-BiwD6BEw.mjs").then((module) => ({
           default: module.ColorPickerInput
         }))
       },

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-CCLaPAwT.js");
+const index = require("../_chunks/index-CNTxZbMN.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-CgXv8Era.mjs";
+import { i } from "../_chunks/index-dnY2u5Dg.mjs";
 export {
   i as default
 };

package/dist/admin/src/components/ColorPickerInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type InputProps, type FieldValue } from '@strapi/strapi/admin';
-type ColorPickerInputProps = InputProps & FieldValue & {
+import { type InputProps } from '@strapi/strapi/admin';
+type ColorPickerInputProps = InputProps & {
     labelAction?: React.ReactNode;
 };
 export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "5.7.0-beta.0",
+  "version": "5.8.0",
   "description": "Strapi maintained Custom Fields",
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@strapi/sdk-plugin": "^5.2.0",
-    "@strapi/strapi": "5.7.0-beta.0",
+    "@strapi/strapi": "5.8.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "react": "18.3.1",
@@ -85,6 +85,5 @@
     "description": "Color picker custom field",
     "kind": "plugin",
     "displayName": "Color Picker"
-  },
-  "gitHead": "7377311e89eef67196ddc5ae39f4f7d8e5fc8853"
+  }
 }