@strapi/plugin-color-picker 0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042 → 0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29

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 (60) hide show
  1. package/LICENSE +34 -12
  2. package/dist/_chunks/ColorPickerInput-B07RliGP.js +153 -0
  3. package/dist/_chunks/ColorPickerInput-B07RliGP.js.map +1 -0
  4. package/dist/_chunks/ColorPickerInput-CMg-0_-G.mjs +134 -0
  5. package/dist/_chunks/ColorPickerInput-CMg-0_-G.mjs.map +1 -0
  6. package/dist/_chunks/{cs-4GdZY0p6.js → cs-CKl0OyEH.js} +1 -1
  7. package/dist/_chunks/cs-CKl0OyEH.js.map +1 -0
  8. package/dist/_chunks/{cs-A2xRj-2-.mjs → cs-DMmE6LK7.mjs} +1 -1
  9. package/dist/_chunks/cs-DMmE6LK7.mjs.map +1 -0
  10. package/dist/_chunks/{en-L6ZZWDJv.mjs → en-BlDau3us.mjs} +1 -1
  11. package/dist/_chunks/en-BlDau3us.mjs.map +1 -0
  12. package/dist/_chunks/{en-WeRHjVEB.js → en-Ct0C5cA2.js} +1 -1
  13. package/dist/_chunks/en-Ct0C5cA2.js.map +1 -0
  14. package/dist/_chunks/{index-uOrtnJpz.mjs → index-B9LkgZbo.mjs} +13 -8
  15. package/dist/_chunks/index-B9LkgZbo.mjs.map +1 -0
  16. package/dist/_chunks/{index-OJYEuoCq.js → index-BeQLcDEb.js} +13 -10
  17. package/dist/_chunks/index-BeQLcDEb.js.map +1 -0
  18. package/dist/_chunks/{ru-UXN_ByI9.js → ru-Wrg-npZz.js} +1 -1
  19. package/dist/_chunks/ru-Wrg-npZz.js.map +1 -0
  20. package/dist/_chunks/{ru-LLXYEOwl.mjs → ru-aOnA-eym.mjs} +1 -1
  21. package/dist/_chunks/ru-aOnA-eym.mjs.map +1 -0
  22. package/dist/_chunks/{sv-QqRPNQLw.mjs → sv-BaFDND79.mjs} +1 -1
  23. package/dist/_chunks/sv-BaFDND79.mjs.map +1 -0
  24. package/dist/_chunks/{sv-3-Yk9bKb.js → sv-CKY6es_6.js} +1 -1
  25. package/dist/_chunks/sv-CKY6es_6.js.map +1 -0
  26. package/dist/_chunks/{tr-qYGSw8gH.mjs → tr-CHHW_hYI.mjs} +1 -1
  27. package/dist/_chunks/tr-CHHW_hYI.mjs.map +1 -0
  28. package/dist/_chunks/{tr-AbD-f8F0.js → tr-DcLzQS-J.js} +1 -1
  29. package/dist/_chunks/tr-DcLzQS-J.js.map +1 -0
  30. package/dist/_chunks/{zh-fPTOIT6s.mjs → zh-DBH6uCXb.mjs} +1 -1
  31. package/dist/_chunks/zh-DBH6uCXb.mjs.map +1 -0
  32. package/dist/_chunks/{zh-c23gv_oM.js → zh-T5cJzhPD.js} +1 -1
  33. package/dist/_chunks/zh-T5cJzhPD.js.map +1 -0
  34. package/dist/admin/index.js +1 -6
  35. package/dist/admin/index.js.map +1 -1
  36. package/dist/admin/index.mjs +1 -6
  37. package/dist/admin/index.mjs.map +1 -1
  38. package/dist/admin/src/components/ColorPickerInput.d.ts +3 -28
  39. package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
  40. package/package.json +21 -23
  41. package/dist/_chunks/ColorPickerInput-0lOoTrf0.js +0 -206
  42. package/dist/_chunks/ColorPickerInput-0lOoTrf0.js.map +0 -1
  43. package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs +0 -185
  44. package/dist/_chunks/ColorPickerInput-fKB6YXW8.mjs.map +0 -1
  45. package/dist/_chunks/cs-4GdZY0p6.js.map +0 -1
  46. package/dist/_chunks/cs-A2xRj-2-.mjs.map +0 -1
  47. package/dist/_chunks/en-L6ZZWDJv.mjs.map +0 -1
  48. package/dist/_chunks/en-WeRHjVEB.js.map +0 -1
  49. package/dist/_chunks/index-OJYEuoCq.js.map +0 -1
  50. package/dist/_chunks/index-uOrtnJpz.mjs.map +0 -1
  51. package/dist/_chunks/ru-LLXYEOwl.mjs.map +0 -1
  52. package/dist/_chunks/ru-UXN_ByI9.js.map +0 -1
  53. package/dist/_chunks/sv-3-Yk9bKb.js.map +0 -1
  54. package/dist/_chunks/sv-QqRPNQLw.mjs.map +0 -1
  55. package/dist/_chunks/tr-AbD-f8F0.js.map +0 -1
  56. package/dist/_chunks/tr-qYGSw8gH.mjs.map +0 -1
  57. package/dist/_chunks/zh-c23gv_oM.js.map +0 -1
  58. package/dist/_chunks/zh-fPTOIT6s.mjs.map +0 -1
  59. package/dist/admin/src/hooks/useComposeRefs.d.ts +0 -29
  60. package/strapi-server.js +0 -3
@@ -13,4 +13,4 @@ const tr = {
13
13
  export {
14
14
  tr as default
15
15
  };
16
- //# sourceMappingURL=tr-qYGSw8gH.mjs.map
16
+ //# sourceMappingURL=tr-CHHW_hYI.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tr-CHHW_hYI.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -13,4 +13,4 @@ const tr = {
13
13
  "color-picker.toggle.aria-label": "Renk seçici anahtarı"
14
14
  };
15
15
  exports.default = tr;
16
- //# sourceMappingURL=tr-AbD-f8F0.js.map
16
+ //# sourceMappingURL=tr-DcLzQS-J.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tr-DcLzQS-J.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -13,4 +13,4 @@ const zh = {
13
13
  export {
14
14
  zh as default
15
15
  };
16
- //# sourceMappingURL=zh-fPTOIT6s.mjs.map
16
+ //# sourceMappingURL=zh-DBH6uCXb.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"zh-DBH6uCXb.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -13,4 +13,4 @@ const zh = {
13
13
  "color-picker.toggle.aria-label": "選色器開關"
14
14
  };
15
15
  exports.default = zh;
16
- //# sourceMappingURL=zh-c23gv_oM.js.map
16
+ //# sourceMappingURL=zh-T5cJzhPD.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"zh-T5cJzhPD.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -1,9 +1,4 @@
1
1
  "use strict";
2
- const index = require("../_chunks/index-OJYEuoCq.js");
3
- require("@strapi/helper-plugin");
4
- require("react/jsx-runtime");
5
- require("@strapi/design-system");
6
- require("@strapi/icons");
7
- require("styled-components");
2
+ const index = require("../_chunks/index-BeQLcDEb.js");
8
3
  module.exports = index.index;
9
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -1,9 +1,4 @@
1
- import { i } from "../_chunks/index-uOrtnJpz.mjs";
2
- import "@strapi/helper-plugin";
3
- import "react/jsx-runtime";
4
- import "@strapi/design-system";
5
- import "@strapi/icons";
6
- import "styled-components";
1
+ import { i } from "../_chunks/index-B9LkgZbo.mjs";
7
2
  export {
8
3
  i as default
9
4
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,32 +1,7 @@
1
1
  import * as React from 'react';
2
- import { MessageDescriptor } from 'react-intl';
3
- /**
4
- * TODO: A lot of these props should extend `FieldProps`
5
- */
6
- interface ColorPickerInputProps {
7
- intlLabel: MessageDescriptor;
8
- /**
9
- * TODO: this should be extended from `FieldInputProps['onChange']
10
- * but that conflicts with it's secondary usage in `HexColorPicker`
11
- */
12
- onChange: (event: {
13
- target: {
14
- name: string;
15
- value: string;
16
- type: string;
17
- };
18
- }) => void;
19
- attribute: {
20
- type: string;
21
- [key: string]: unknown;
22
- };
23
- name: string;
24
- description?: MessageDescriptor;
25
- disabled?: boolean;
26
- error?: string;
2
+ import { type InputProps, type FieldValue } from '@strapi/strapi/admin';
3
+ type ColorPickerInputProps = InputProps & FieldValue & {
27
4
  labelAction?: React.ReactNode;
28
- required?: boolean;
29
- value?: string;
30
- }
5
+ };
31
6
  export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;
32
7
  export {};
@@ -0,0 +1,3 @@
1
+ type TradOptions = Record<string, string>;
2
+ declare const prefixPluginTranslations: (trad: TradOptions, pluginId: string) => TradOptions;
3
+ export { prefixPluginTranslations };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042",
3
+ "version": "0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29",
4
4
  "description": "Strapi maintained Custom Fields",
5
5
  "repository": {
6
6
  "type": "git",
@@ -38,11 +38,11 @@
38
38
  "./package.json": "./package.json"
39
39
  },
40
40
  "files": [
41
- "./dist",
41
+ "dist/",
42
42
  "strapi-server.js"
43
43
  ],
44
44
  "scripts": {
45
- "build": "strapi plugin:build --force",
45
+ "build": "strapi-plugin build",
46
46
  "clean": "run -T rimraf ./dist",
47
47
  "lint": "run -T eslint .",
48
48
  "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
@@ -50,36 +50,34 @@
50
50
  "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
51
51
  "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
52
52
  "test:ts:front": "run -T tsc -p admin/tsconfig.json",
53
- "watch": "strapi plugin:watch"
53
+ "watch": "strapi-plugin watch"
54
54
  },
55
55
  "dependencies": {
56
- "@strapi/design-system": "1.19.0",
57
- "@strapi/helper-plugin": "0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042",
58
- "@strapi/icons": "1.19.0",
59
- "prop-types": "^15.8.1",
56
+ "@strapi/design-system": "2.0.0-rc.11",
57
+ "@strapi/icons": "2.0.0-rc.11",
60
58
  "react-colorful": "5.6.1",
61
- "react-intl": "6.4.1"
59
+ "react-intl": "6.6.2"
62
60
  },
63
61
  "devDependencies": {
64
- "@strapi/strapi": "0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042",
65
- "@testing-library/react": "14.0.0",
66
- "@testing-library/user-event": "14.4.3",
67
- "@types/styled-components": "5.1.32",
68
- "react": "^18.2.0",
69
- "react-dom": "^18.2.0",
70
- "react-router-dom": "5.3.4",
71
- "styled-components": "5.3.3",
72
- "typescript": "5.2.2"
62
+ "@strapi/sdk-plugin": "^5.0.0",
63
+ "@strapi/strapi": "0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29",
64
+ "@testing-library/react": "15.0.7",
65
+ "@testing-library/user-event": "14.5.2",
66
+ "react": "18.3.1",
67
+ "react-dom": "18.3.1",
68
+ "react-router-dom": "6.22.3",
69
+ "styled-components": "6.1.8",
70
+ "typescript": "5.3.2"
73
71
  },
74
72
  "peerDependencies": {
75
- "@strapi/strapi": "^4.4.0",
73
+ "@strapi/strapi": "^5.0.0 || ^5.0.0-beta || ^5.0.0-alpha || ^5.0.0-rc",
76
74
  "react": "^17.0.0 || ^18.0.0",
77
75
  "react-dom": "^17.0.0 || ^18.0.0",
78
- "react-router-dom": "^5.2.0",
79
- "styled-components": "^5.2.1"
76
+ "react-router-dom": "^6.0.0",
77
+ "styled-components": "^6.0.0"
80
78
  },
81
79
  "engines": {
82
- "node": ">=18.0.0 <=20.x.x",
80
+ "node": ">=18.0.0 <=22.x.x",
83
81
  "npm": ">=6.0.0"
84
82
  },
85
83
  "strapi": {
@@ -88,5 +86,5 @@
88
86
  "kind": "plugin",
89
87
  "displayName": "Color Picker"
90
88
  },
91
- "gitHead": "f4ff842a3cb7b83db540bee67554b704e042b042"
89
+ "gitHead": "f5312617ca16b870c2bf1adcea2c69b676979e29"
92
90
  }
@@ -1,206 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const designSystem = require("@strapi/design-system");
6
- const icons = require("@strapi/icons");
7
- const reactColorful = require("react-colorful");
8
- const reactIntl = require("react-intl");
9
- const styled = require("styled-components");
10
- const index = require("./index-OJYEuoCq.js");
11
- require("@strapi/helper-plugin");
12
- const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
13
- function _interopNamespace(e) {
14
- if (e && e.__esModule)
15
- return e;
16
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
17
- if (e) {
18
- for (const k in e) {
19
- if (k !== "default") {
20
- const d = Object.getOwnPropertyDescriptor(e, k);
21
- Object.defineProperty(n, k, d.get ? d : {
22
- enumerable: true,
23
- get: () => e[k]
24
- });
25
- }
26
- }
27
- }
28
- n.default = e;
29
- return Object.freeze(n);
30
- }
31
- const React__namespace = /* @__PURE__ */ _interopNamespace(React);
32
- const styled__default = /* @__PURE__ */ _interopDefault(styled);
33
- function setRef(ref, value) {
34
- if (typeof ref === "function") {
35
- ref(value);
36
- } else if (ref !== null && ref !== void 0) {
37
- ref.current = value;
38
- }
39
- }
40
- function composeRefs(...refs) {
41
- return (node) => refs.forEach((ref) => setRef(ref, node));
42
- }
43
- function useComposedRefs(...refs) {
44
- return React__namespace.useCallback(composeRefs(...refs), refs);
45
- }
46
- const ColorPreview = styled__default.default.div`
47
- border-radius: 50%;
48
- width: 20px;
49
- height: 20px;
50
- margin-right: 10px;
51
- background-color: ${(props) => props.color};
52
- border: 1px solid rgba(0, 0, 0, 0.1);
53
- `;
54
- const ColorPicker = styled__default.default(reactColorful.HexColorPicker)`
55
- && {
56
- width: 100%;
57
- aspect-ratio: 1.5;
58
- }
59
-
60
- .react-colorful__pointer {
61
- width: ${({ theme }) => theme.spaces[3]};
62
- height: ${({ theme }) => theme.spaces[3]};
63
- }
64
-
65
- .react-colorful__saturation {
66
- border-radius: ${({ theme }) => theme.spaces[1]};
67
- border-bottom: none;
68
- }
69
-
70
- .react-colorful__hue {
71
- border-radius: 10px;
72
- height: ${({ theme }) => theme.spaces[3]};
73
- margin-top: ${({ theme }) => theme.spaces[2]};
74
- }
75
- `;
76
- const ColorPickerToggle = styled__default.default(designSystem.BaseButton)`
77
- display: flex;
78
- justify-content: space-between;
79
- align-items: center;
80
-
81
- svg {
82
- width: ${({ theme }) => theme.spaces[2]};
83
- height: ${({ theme }) => theme.spaces[2]};
84
- }
85
-
86
- svg > path {
87
- fill: ${({ theme }) => theme.colors.neutral500};
88
- justify-self: flex-end;
89
- }
90
- `;
91
- const ColorPickerPopover = styled__default.default(designSystem.Popover)`
92
- padding: ${({ theme }) => theme.spaces[2]};
93
- min-height: 270px;
94
- `;
95
- const ColorPickerInput = React__namespace.forwardRef(
96
- ({
97
- attribute,
98
- description,
99
- disabled = false,
100
- error,
101
- intlLabel,
102
- labelAction,
103
- name,
104
- onChange,
105
- required = false,
106
- value = ""
107
- }, forwardedRef) => {
108
- const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
109
- const colorPickerButtonRef = React__namespace.useRef(null);
110
- const { formatMessage } = reactIntl.useIntl();
111
- const color = value || "#000000";
112
- const handleBlur = (e) => {
113
- e.preventDefault();
114
- if (!e.currentTarget.contains(e.relatedTarget)) {
115
- setShowColorPicker(false);
116
- }
117
- };
118
- const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
119
- return /* @__PURE__ */ jsxRuntime.jsx(
120
- designSystem.Field,
121
- {
122
- name,
123
- id: name,
124
- error,
125
- hint: description && formatMessage(description),
126
- required,
127
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
128
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
129
- /* @__PURE__ */ jsxRuntime.jsxs(
130
- ColorPickerToggle,
131
- {
132
- ref: composedRefs,
133
- "aria-label": formatMessage({
134
- id: index.getTrad("color-picker.toggle.aria-label"),
135
- defaultMessage: "Color picker toggle"
136
- }),
137
- "aria-controls": "color-picker-value",
138
- "aria-haspopup": "dialog",
139
- "aria-expanded": showColorPicker,
140
- "aria-disabled": disabled,
141
- disabled,
142
- onClick: () => setShowColorPicker(!showColorPicker),
143
- children: [
144
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
145
- /* @__PURE__ */ jsxRuntime.jsx(ColorPreview, { color }),
146
- /* @__PURE__ */ jsxRuntime.jsx(
147
- designSystem.Typography,
148
- {
149
- style: { textTransform: "uppercase" },
150
- textColor: value ? void 0 : "neutral600",
151
- variant: "omega",
152
- children: color
153
- }
154
- )
155
- ] }),
156
- /* @__PURE__ */ jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true })
157
- ]
158
- }
159
- ),
160
- showColorPicker && /* @__PURE__ */ jsxRuntime.jsx(
161
- ColorPickerPopover,
162
- {
163
- onBlur: handleBlur,
164
- role: "dialog",
165
- source: colorPickerButtonRef,
166
- spacing: 4,
167
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
168
- /* @__PURE__ */ jsxRuntime.jsx(
169
- ColorPicker,
170
- {
171
- color,
172
- onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
173
- }
174
- ),
175
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
176
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
177
- id: index.getTrad("color-picker.input.format"),
178
- defaultMessage: "HEX"
179
- }) }) }),
180
- /* @__PURE__ */ jsxRuntime.jsx(
181
- designSystem.FieldInput,
182
- {
183
- id: "color-picker-value",
184
- "aria-label": formatMessage({
185
- id: index.getTrad("color-picker.input.aria-label"),
186
- defaultMessage: "Color picker input"
187
- }),
188
- style: { textTransform: "uppercase" },
189
- value,
190
- placeholder: "#000000",
191
- onChange
192
- }
193
- )
194
- ] })
195
- ] })
196
- }
197
- ),
198
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
199
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
200
- ] })
201
- }
202
- );
203
- }
204
- );
205
- exports.ColorPickerInput = ColorPickerInput;
206
- //# sourceMappingURL=ColorPickerInput-0lOoTrf0.js.map
@@ -1 +0,0 @@
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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"}
@@ -1,185 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { BaseButton, Popover, Field, Flex, FieldLabel, Typography, FocusTrap, Box, FieldInput, FieldHint, FieldError } from "@strapi/design-system";
4
- import { CarretDown } from "@strapi/icons";
5
- import { HexColorPicker } from "react-colorful";
6
- import { useIntl } from "react-intl";
7
- import styled from "styled-components";
8
- import { g as getTrad } from "./index-uOrtnJpz.mjs";
9
- import "@strapi/helper-plugin";
10
- function setRef(ref, value) {
11
- if (typeof ref === "function") {
12
- ref(value);
13
- } else if (ref !== null && ref !== void 0) {
14
- ref.current = value;
15
- }
16
- }
17
- function composeRefs(...refs) {
18
- return (node) => refs.forEach((ref) => setRef(ref, node));
19
- }
20
- function useComposedRefs(...refs) {
21
- return React.useCallback(composeRefs(...refs), refs);
22
- }
23
- const ColorPreview = styled.div`
24
- border-radius: 50%;
25
- width: 20px;
26
- height: 20px;
27
- margin-right: 10px;
28
- background-color: ${(props) => props.color};
29
- border: 1px solid rgba(0, 0, 0, 0.1);
30
- `;
31
- const ColorPicker = styled(HexColorPicker)`
32
- && {
33
- width: 100%;
34
- aspect-ratio: 1.5;
35
- }
36
-
37
- .react-colorful__pointer {
38
- width: ${({ theme }) => theme.spaces[3]};
39
- height: ${({ theme }) => theme.spaces[3]};
40
- }
41
-
42
- .react-colorful__saturation {
43
- border-radius: ${({ theme }) => theme.spaces[1]};
44
- border-bottom: none;
45
- }
46
-
47
- .react-colorful__hue {
48
- border-radius: 10px;
49
- height: ${({ theme }) => theme.spaces[3]};
50
- margin-top: ${({ theme }) => theme.spaces[2]};
51
- }
52
- `;
53
- const ColorPickerToggle = styled(BaseButton)`
54
- display: flex;
55
- justify-content: space-between;
56
- align-items: center;
57
-
58
- svg {
59
- width: ${({ theme }) => theme.spaces[2]};
60
- height: ${({ theme }) => theme.spaces[2]};
61
- }
62
-
63
- svg > path {
64
- fill: ${({ theme }) => theme.colors.neutral500};
65
- justify-self: flex-end;
66
- }
67
- `;
68
- const ColorPickerPopover = styled(Popover)`
69
- padding: ${({ theme }) => theme.spaces[2]};
70
- min-height: 270px;
71
- `;
72
- const ColorPickerInput = React.forwardRef(
73
- ({
74
- attribute,
75
- description,
76
- disabled = false,
77
- error,
78
- intlLabel,
79
- labelAction,
80
- name,
81
- onChange,
82
- required = false,
83
- value = ""
84
- }, forwardedRef) => {
85
- const [showColorPicker, setShowColorPicker] = React.useState(false);
86
- const colorPickerButtonRef = React.useRef(null);
87
- const { formatMessage } = useIntl();
88
- const color = value || "#000000";
89
- const handleBlur = (e) => {
90
- e.preventDefault();
91
- if (!e.currentTarget.contains(e.relatedTarget)) {
92
- setShowColorPicker(false);
93
- }
94
- };
95
- const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
96
- return /* @__PURE__ */ jsx(
97
- Field,
98
- {
99
- name,
100
- id: name,
101
- error,
102
- hint: description && formatMessage(description),
103
- required,
104
- children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
105
- /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: formatMessage(intlLabel) }),
106
- /* @__PURE__ */ jsxs(
107
- ColorPickerToggle,
108
- {
109
- ref: composedRefs,
110
- "aria-label": formatMessage({
111
- id: getTrad("color-picker.toggle.aria-label"),
112
- defaultMessage: "Color picker toggle"
113
- }),
114
- "aria-controls": "color-picker-value",
115
- "aria-haspopup": "dialog",
116
- "aria-expanded": showColorPicker,
117
- "aria-disabled": disabled,
118
- disabled,
119
- onClick: () => setShowColorPicker(!showColorPicker),
120
- children: [
121
- /* @__PURE__ */ jsxs(Flex, { children: [
122
- /* @__PURE__ */ jsx(ColorPreview, { color }),
123
- /* @__PURE__ */ jsx(
124
- Typography,
125
- {
126
- style: { textTransform: "uppercase" },
127
- textColor: value ? void 0 : "neutral600",
128
- variant: "omega",
129
- children: color
130
- }
131
- )
132
- ] }),
133
- /* @__PURE__ */ jsx(CarretDown, { "aria-hidden": true })
134
- ]
135
- }
136
- ),
137
- showColorPicker && /* @__PURE__ */ jsx(
138
- ColorPickerPopover,
139
- {
140
- onBlur: handleBlur,
141
- role: "dialog",
142
- source: colorPickerButtonRef,
143
- spacing: 4,
144
- children: /* @__PURE__ */ jsxs(FocusTrap, { onEscape: () => setShowColorPicker(false), children: [
145
- /* @__PURE__ */ jsx(
146
- ColorPicker,
147
- {
148
- color,
149
- onChange: (hexValue) => onChange({ target: { name, value: hexValue, type: attribute.type } })
150
- }
151
- ),
152
- /* @__PURE__ */ jsxs(Flex, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
153
- /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", as: "label", textColor: "neutral600", children: formatMessage({
154
- id: getTrad("color-picker.input.format"),
155
- defaultMessage: "HEX"
156
- }) }) }),
157
- /* @__PURE__ */ jsx(
158
- FieldInput,
159
- {
160
- id: "color-picker-value",
161
- "aria-label": formatMessage({
162
- id: getTrad("color-picker.input.aria-label"),
163
- defaultMessage: "Color picker input"
164
- }),
165
- style: { textTransform: "uppercase" },
166
- value,
167
- placeholder: "#000000",
168
- onChange
169
- }
170
- )
171
- ] })
172
- ] })
173
- }
174
- ),
175
- /* @__PURE__ */ jsx(FieldHint, {}),
176
- /* @__PURE__ */ jsx(FieldError, {})
177
- ] })
178
- }
179
- );
180
- }
181
- );
182
- export {
183
- ColorPickerInput
184
- };
185
- //# sourceMappingURL=ColorPickerInput-fKB6YXW8.mjs.map
@@ -1 +0,0 @@
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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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"cs-4GdZY0p6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"cs-A2xRj-2-.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"en-L6ZZWDJv.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}