@strapi/plugin-color-picker 5.7.0 → 5.8.0

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 (8) hide show
  1. package/dist/_chunks/{ColorPickerInput-m6ZX3Kq-.mjs → ColorPickerInput-BiwD6BEw.mjs} +12 -8
  2. package/dist/_chunks/{ColorPickerInput-D6xkBHIN.js → ColorPickerInput-gD_Mb6qe.js} +12 -8
  3. package/dist/_chunks/{index-CCLaPAwT.js → index-CNTxZbMN.js} +1 -1
  4. package/dist/_chunks/{index-CgXv8Era.mjs → index-dnY2u5Dg.mjs} +1 -1
  5. package/dist/admin/index.js +1 -1
  6. package/dist/admin/index.mjs +1 -1
  7. package/dist/admin/src/components/ColorPickerInput.d.ts +2 -2
  8. package/package.json +2 -2
package/dist/_chunks/{ColorPickerInput-m6ZX3Kq-.mjs → ColorPickerInput-BiwD6BEw.mjs} RENAMED
@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { Button, Popover, useComposedRefs, Field, Flex, Typography, Box } from "@strapi/design-system";
4
4
  import { CaretDown } from "@strapi/icons";
5
+ import { useField } from "@strapi/strapi/admin";
5
6
  import { HexColorPicker } from "react-colorful";
6
7
  import { useIntl } from "react-intl";
7
8
  import { styled } from "styled-components";
8
- import { g as getTrad } from "./index-CgXv8Era.mjs";
9
+ import { g as getTrad } from "./index-dnY2u5Dg.mjs";
9
10
  const ColorPreview = styled.div`
10
11
  border-radius: 50%;
11
12
  width: 20px;
@@ -59,13 +60,14 @@ const ColorPickerPopover = styled(Popover.Content)`
59
60
  min-height: 270px;
60
61
  `;
61
62
  const ColorPickerInput = React.forwardRef(
62
- ({ hint, disabled = false, labelAction, label, name, required = false, onChange, value, error }, forwardedRef) => {
63
+ ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
63
64
  const [showColorPicker, setShowColorPicker] = React.useState(false);
64
65
  const colorPickerButtonRef = React.useRef(null);
65
66
  const { formatMessage } = useIntl();
66
- const color = value || "#000000";
67
+ const field = useField(name);
68
+ const color = field.value ?? "#000000";
67
69
  const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
68
- return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
70
+ return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error: field.error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
69
71
  /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
70
72
  /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setShowColorPicker, children: [
71
73
  /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(
@@ -90,7 +92,7 @@ const ColorPickerInput = React.forwardRef(
90
92
  Typography,
91
93
  {
92
94
  style: { textTransform: "uppercase" },
93
- textColor: value ? void 0 : "neutral600",
95
+ textColor: field.value ? void 0 : "neutral600",
94
96
  variant: "omega",
95
97
  children: color
96
98
  }
@@ -101,7 +103,7 @@ const ColorPickerInput = React.forwardRef(
101
103
  }
102
104
  ) }),
103
105
  /* @__PURE__ */ jsxs(ColorPickerPopover, { sideOffset: 4, children: [
104
- /* @__PURE__ */ jsx(ColorPicker, { color, onChange: (hexValue) => onChange(name, hexValue) }),
106
+ /* @__PURE__ */ jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
105
107
  /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
106
108
  /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", tag: "label", textColor: "neutral600", children: formatMessage({
107
109
  id: getTrad("color-picker.input.format"),
@@ -115,9 +117,11 @@ const ColorPickerInput = React.forwardRef(
115
117
  defaultMessage: "Color picker input"
116
118
  }),
117
119
  style: { textTransform: "uppercase" },
118
- value,
120
+ name,
121
+ defaultValue: color,
119
122
  placeholder: "#000000",
120
- onChange
123
+ onChange: field.onChange,
124
+ ...props
121
125
  }
122
126
  ) })
123
127
  ] })
package/dist/_chunks/{ColorPickerInput-D6xkBHIN.js → ColorPickerInput-gD_Mb6qe.js} RENAMED
@@ -4,10 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const designSystem = require("@strapi/design-system");
6
6
  const icons = require("@strapi/icons");
7
+ const admin = require("@strapi/strapi/admin");
7
8
  const reactColorful = require("react-colorful");
8
9
  const reactIntl = require("react-intl");
9
10
  const styledComponents = require("styled-components");
10
- const index = require("./index-CCLaPAwT.js");
11
+ const index = require("./index-CNTxZbMN.js");
11
12
  function _interopNamespace(e) {
12
13
  if (e && e.__esModule) return e;
13
14
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -79,13 +80,14 @@ const ColorPickerPopover = styledComponents.styled(designSystem.Popover.Content)
79
80
  min-height: 270px;
80
81
  `;
81
82
  const ColorPickerInput = React__namespace.forwardRef(
82
- ({ hint, disabled = false, labelAction, label, name, required = false, onChange, value, error }, forwardedRef) => {
83
+ ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {
83
84
  const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
84
85
  const colorPickerButtonRef = React__namespace.useRef(null);
85
86
  const { formatMessage } = reactIntl.useIntl();
86
- const color = value || "#000000";
87
+ const field = admin.useField(name);
88
+ const color = field.value ?? "#000000";
87
89
  const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
88
- 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: [
90
+ 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: [
89
91
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
90
92
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { onOpenChange: setShowColorPicker, children: [
91
93
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -110,7 +112,7 @@ const ColorPickerInput = React__namespace.forwardRef(
110
112
  designSystem.Typography,
111
113
  {
112
114
  style: { textTransform: "uppercase" },
113
- textColor: value ? void 0 : "neutral600",
115
+ textColor: field.value ? void 0 : "neutral600",
114
116
  variant: "omega",
115
117
  children: color
116
118
  }
@@ -121,7 +123,7 @@ const ColorPickerInput = React__namespace.forwardRef(
121
123
  }
122
124
  ) }),
123
125
  /* @__PURE__ */ jsxRuntime.jsxs(ColorPickerPopover, { sideOffset: 4, children: [
124
- /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color, onChange: (hexValue) => onChange(name, hexValue) }),
126
+ /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color, onChange: (hexValue) => field.onChange(name, hexValue) }),
125
127
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
126
128
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", tag: "label", textColor: "neutral600", children: formatMessage({
127
129
  id: index.getTrad("color-picker.input.format"),
@@ -135,9 +137,11 @@ const ColorPickerInput = React__namespace.forwardRef(
135
137
  defaultMessage: "Color picker input"
136
138
  }),
137
139
  style: { textTransform: "uppercase" },
138
- value,
140
+ name,
141
+ defaultValue: color,
139
142
  placeholder: "#000000",
140
- onChange
143
+ onChange: field.onChange,
144
+ ...props
141
145
  }
142
146
  ) })
143
147
  ] })
package/dist/_chunks/{index-CCLaPAwT.js → index-CNTxZbMN.js} RENAMED
@@ -60,7 +60,7 @@ const index = {
60
60
  defaultMessage: "Select any color"
61
61
  },
62
62
  components: {
63
- Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-D6xkBHIN.js")).then((module2) => ({
63
+ Input: async () => Promise.resolve().then(() => require("./ColorPickerInput-gD_Mb6qe.js")).then((module2) => ({
64
64
  default: module2.ColorPickerInput
65
65
  }))
66
66
  },
package/dist/_chunks/{index-CgXv8Era.mjs → index-dnY2u5Dg.mjs} RENAMED
@@ -59,7 +59,7 @@ const index = {
59
59
  defaultMessage: "Select any color"
60
60
  },
61
61
  components: {
62
- Input: async () => import("./ColorPickerInput-m6ZX3Kq-.mjs").then((module) => ({
62
+ Input: async () => import("./ColorPickerInput-BiwD6BEw.mjs").then((module) => ({
63
63
  default: module.ColorPickerInput
64
64
  }))
65
65
  },
package/dist/admin/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const index = require("../_chunks/index-CCLaPAwT.js");
2
+ const index = require("../_chunks/index-CNTxZbMN.js");
3
3
  module.exports = index.index;
package/dist/admin/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { i } from "../_chunks/index-CgXv8Era.mjs";
1
+ import { i } from "../_chunks/index-dnY2u5Dg.mjs";
2
2
  export {
3
3
  i as default
4
4
  };
package/dist/admin/src/components/ColorPickerInput.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
- import { type InputProps, type FieldValue } from '@strapi/strapi/admin';
3
- type ColorPickerInputProps = InputProps & FieldValue & {
2
+ import { type InputProps } from '@strapi/strapi/admin';
3
+ type ColorPickerInputProps = InputProps & {
4
4
  labelAction?: React.ReactNode;
5
5
  };
6
6
  export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "5.7.0",
3
+ "version": "5.8.0",
4
4
  "description": "Strapi maintained Custom Fields",
5
5
  "repository": {
6
6
  "type": "git",
@@ -60,7 +60,7 @@
60
60
  },
61
61
  "devDependencies": {
62
62
  "@strapi/sdk-plugin": "^5.2.0",
63
- "@strapi/strapi": "5.7.0",
63
+ "@strapi/strapi": "5.8.0",
64
64
  "@testing-library/react": "15.0.7",
65
65
  "@testing-library/user-event": "14.5.2",
66
66
  "react": "18.3.1",