@sanity/color-input 6.0.6 → 6.0.8
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.
- package/LICENSE +1 -0
- package/README.md +1 -1
- package/dist/_chunks-es/ColorInput.js +511 -38
- package/dist/_chunks-es/ColorInput.js.map +1 -1
- package/dist/index.d.ts +35 -12
- package/dist/index.d.ts.map +1 -1
- package/package.json +12 -12
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -72,7 +72,7 @@ Which will render accordingly:
|
|
|
72
72
|
### Color list
|
|
73
73
|
|
|
74
74
|
To add list of predefined selectable color swatches for the user to choose from use `colorList`.
|
|
75
|
-
|
|
75
|
+
The color picker is a small fork of [`react-color`](https://github.com/casesandberg/react-color), so `colorList` accepts any of its supported [color formats](https://casesandberg.github.io/react-color/#api-color).
|
|
76
76
|
|
|
77
77
|
```js
|
|
78
78
|
// ...fields...
|
|
@@ -2,13 +2,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
2
2
|
import { c } from "react/compiler-runtime";
|
|
3
3
|
import { AddIcon, TrashIcon } from "@sanity/icons";
|
|
4
4
|
import { Flex, useTheme, Box, Button, Card, Stack, Text, Inline } from "@sanity/ui";
|
|
5
|
-
import { useOptimistic, useRef, startTransition } from "react";
|
|
6
|
-
import { CustomPicker } from "react-color";
|
|
7
|
-
import { EditableInput, Saturation, Hue, Alpha, Checkboard } from "react-color/lib/components/common";
|
|
5
|
+
import { Component, PureComponent, useOptimistic, useRef, startTransition } from "react";
|
|
8
6
|
import { unset, set, setIfMissing } from "sanity";
|
|
9
7
|
import { styled } from "styled-components";
|
|
10
8
|
import tinycolor from "tinycolor2";
|
|
11
|
-
import
|
|
9
|
+
import throttle from "lodash-es/throttle";
|
|
12
10
|
const ColorListWrap = styled(Flex).withConfig({
|
|
13
11
|
displayName: "ColorListWrap",
|
|
14
12
|
componentId: "sc-nrr1l2-0"
|
|
@@ -63,6 +61,485 @@ function ColorList(t0) {
|
|
|
63
61
|
let t2;
|
|
64
62
|
return $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: t1 }), $[5] = t1, $[6] = t2) : t2 = $[6], t2;
|
|
65
63
|
}
|
|
64
|
+
const checkboardCache = {};
|
|
65
|
+
function render(c1, c2, size, serverCanvas) {
|
|
66
|
+
if (typeof document > "u" && !serverCanvas)
|
|
67
|
+
return null;
|
|
68
|
+
const canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
|
|
69
|
+
canvas.width = size * 2, canvas.height = size * 2;
|
|
70
|
+
const ctx = canvas.getContext("2d");
|
|
71
|
+
return ctx ? (ctx.fillStyle = c1, ctx.fillRect(0, 0, canvas.width, canvas.height), ctx.fillStyle = c2, ctx.fillRect(0, 0, size, size), ctx.translate(size, size), ctx.fillRect(0, 0, size, size), canvas.toDataURL()) : null;
|
|
72
|
+
}
|
|
73
|
+
function get(c1, c2, size, serverCanvas) {
|
|
74
|
+
const key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
|
|
75
|
+
if (cached)
|
|
76
|
+
return cached;
|
|
77
|
+
const checkboard = render(c1, c2, size, serverCanvas);
|
|
78
|
+
return checkboardCache[key] = checkboard, checkboard;
|
|
79
|
+
}
|
|
80
|
+
const EMPTY_RENDERERS = {};
|
|
81
|
+
function Checkboard(t0) {
|
|
82
|
+
const $ = c(9), {
|
|
83
|
+
white: t1,
|
|
84
|
+
grey: t2,
|
|
85
|
+
size: t3,
|
|
86
|
+
renderers: t4,
|
|
87
|
+
borderRadius,
|
|
88
|
+
boxShadow
|
|
89
|
+
} = t0, white = t1 === void 0 ? "transparent" : t1, grey = t2 === void 0 ? "rgba(0,0,0,.08)" : t2, size = t3 === void 0 ? 8 : t3, renderers = t4 === void 0 ? EMPTY_RENDERERS : t4;
|
|
90
|
+
let t5;
|
|
91
|
+
$[0] !== grey || $[1] !== renderers.canvas || $[2] !== size || $[3] !== white ? (t5 = get(white, grey, size, renderers.canvas), $[0] = grey, $[1] = renderers.canvas, $[2] = size, $[3] = white, $[4] = t5) : t5 = $[4];
|
|
92
|
+
const background = t5, t6 = background ? `url(${background}) center left` : void 0;
|
|
93
|
+
let t7;
|
|
94
|
+
return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
|
|
95
|
+
borderRadius,
|
|
96
|
+
boxShadow,
|
|
97
|
+
position: "absolute",
|
|
98
|
+
inset: 0,
|
|
99
|
+
background: t6
|
|
100
|
+
} }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
|
|
101
|
+
}
|
|
102
|
+
function calculateChange$2(e, hsl, direction, initialA, container) {
|
|
103
|
+
const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
|
|
104
|
+
if (direction === "vertical") {
|
|
105
|
+
let a2;
|
|
106
|
+
return top < 0 ? a2 = 0 : top > containerHeight ? a2 = 1 : a2 = Math.round(top * 100 / containerHeight) / 100, hsl.a !== a2 ? {
|
|
107
|
+
h: hsl.h,
|
|
108
|
+
s: hsl.s,
|
|
109
|
+
l: hsl.l,
|
|
110
|
+
a: a2,
|
|
111
|
+
source: "rgb"
|
|
112
|
+
} : null;
|
|
113
|
+
}
|
|
114
|
+
let a;
|
|
115
|
+
return left < 0 ? a = 0 : left > containerWidth ? a = 1 : a = Math.round(left * 100 / containerWidth) / 100, initialA !== a ? {
|
|
116
|
+
h: hsl.h,
|
|
117
|
+
s: hsl.s,
|
|
118
|
+
l: hsl.l,
|
|
119
|
+
a,
|
|
120
|
+
source: "rgb"
|
|
121
|
+
} : null;
|
|
122
|
+
}
|
|
123
|
+
class Alpha extends Component {
|
|
124
|
+
container = null;
|
|
125
|
+
componentWillUnmount() {
|
|
126
|
+
this.unbindEventListeners();
|
|
127
|
+
}
|
|
128
|
+
setContainerRef = (node) => {
|
|
129
|
+
this.container = node;
|
|
130
|
+
};
|
|
131
|
+
handleChange = (event) => {
|
|
132
|
+
if (!this.container)
|
|
133
|
+
return;
|
|
134
|
+
const change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
|
|
135
|
+
change && typeof this.props.onChange == "function" && this.props.onChange(change);
|
|
136
|
+
};
|
|
137
|
+
handleMouseDown = (event) => {
|
|
138
|
+
this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
|
|
139
|
+
};
|
|
140
|
+
handleMouseUp = () => {
|
|
141
|
+
this.unbindEventListeners();
|
|
142
|
+
};
|
|
143
|
+
unbindEventListeners = () => {
|
|
144
|
+
window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
|
|
145
|
+
};
|
|
146
|
+
render() {
|
|
147
|
+
const {
|
|
148
|
+
rgb,
|
|
149
|
+
direction,
|
|
150
|
+
radius,
|
|
151
|
+
shadow,
|
|
152
|
+
renderers
|
|
153
|
+
} = this.props, alphaValue = rgb.a ?? 1, gradient = direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`, pointerStyle = direction === "vertical" ? {
|
|
154
|
+
position: "absolute",
|
|
155
|
+
left: 0,
|
|
156
|
+
top: `${alphaValue * 100}%`
|
|
157
|
+
} : {
|
|
158
|
+
position: "absolute",
|
|
159
|
+
left: `${alphaValue * 100}%`
|
|
160
|
+
};
|
|
161
|
+
return /* @__PURE__ */ jsxs("div", { style: {
|
|
162
|
+
position: "absolute",
|
|
163
|
+
inset: 0,
|
|
164
|
+
borderRadius: radius
|
|
165
|
+
}, children: [
|
|
166
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
167
|
+
position: "absolute",
|
|
168
|
+
inset: 0,
|
|
169
|
+
overflow: "hidden",
|
|
170
|
+
borderRadius: radius
|
|
171
|
+
}, children: /* @__PURE__ */ jsx(Checkboard, { renderers }) }),
|
|
172
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
173
|
+
position: "absolute",
|
|
174
|
+
inset: 0,
|
|
175
|
+
background: gradient,
|
|
176
|
+
boxShadow: shadow,
|
|
177
|
+
borderRadius: radius
|
|
178
|
+
} }),
|
|
179
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
180
|
+
position: "relative",
|
|
181
|
+
height: "100%",
|
|
182
|
+
margin: "0 3px"
|
|
183
|
+
}, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
|
|
184
|
+
width: "4px",
|
|
185
|
+
borderRadius: "1px",
|
|
186
|
+
height: "8px",
|
|
187
|
+
boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
|
|
188
|
+
background: "#fff",
|
|
189
|
+
marginTop: "1px",
|
|
190
|
+
transform: "translateX(-2px)"
|
|
191
|
+
} }) }) })
|
|
192
|
+
] });
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
const VALIDATION_KEYS = /* @__PURE__ */ new Set(["r", "g", "b", "a", "h", "s", "l", "v"]), PERCENT_PATTERN = /^\d+%$/;
|
|
196
|
+
function simpleCheckForValidColor(data) {
|
|
197
|
+
if (typeof data == "string")
|
|
198
|
+
return data;
|
|
199
|
+
let checked = 0, passed = 0;
|
|
200
|
+
for (const [key, value] of Object.entries(data))
|
|
201
|
+
!VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
|
|
202
|
+
return checked === passed ? data : !1;
|
|
203
|
+
}
|
|
204
|
+
function toState(data, oldHue) {
|
|
205
|
+
const instance = typeof data == "string" ? tinycolor(data) : "hex" in data ? tinycolor(data.hex) : tinycolor(data), hsl = instance.toHsl(), hsv = instance.toHsv(), rgb = instance.toRgb(), hex = instance.toHex();
|
|
206
|
+
hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
|
|
207
|
+
const transparent = hex === "000000" && rgb.a === 0, incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, source = typeof data == "string" ? void 0 : data.source;
|
|
208
|
+
return {
|
|
209
|
+
hsl,
|
|
210
|
+
hex: transparent ? "transparent" : `#${hex}`,
|
|
211
|
+
rgb,
|
|
212
|
+
hsv,
|
|
213
|
+
oldHue: incomingHue || oldHue || hsl.h,
|
|
214
|
+
source: source ?? ""
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
function isValidHex(hex) {
|
|
218
|
+
if (hex === "transparent")
|
|
219
|
+
return !0;
|
|
220
|
+
const lh = hex.charAt(0) === "#" ? 1 : 0;
|
|
221
|
+
return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
|
|
222
|
+
}
|
|
223
|
+
const DEFAULT_COLOR$1 = {
|
|
224
|
+
h: 250,
|
|
225
|
+
s: 0.5,
|
|
226
|
+
l: 0.2,
|
|
227
|
+
a: 1
|
|
228
|
+
};
|
|
229
|
+
function CustomPicker(Picker) {
|
|
230
|
+
class ColorPicker2 extends PureComponent {
|
|
231
|
+
static getDerivedStateFromProps(nextProps, state) {
|
|
232
|
+
return {
|
|
233
|
+
...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue)
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
constructor(props) {
|
|
237
|
+
super(props), this.state = {
|
|
238
|
+
...toState(props.color ?? DEFAULT_COLOR$1, 0)
|
|
239
|
+
};
|
|
240
|
+
}
|
|
241
|
+
handleChange = (data) => {
|
|
242
|
+
if (!simpleCheckForValidColor(data))
|
|
243
|
+
return;
|
|
244
|
+
const incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, colors = toState(data, incomingHue || this.state.oldHue);
|
|
245
|
+
this.setState(colors), this.props.onChange?.(colors);
|
|
246
|
+
};
|
|
247
|
+
render() {
|
|
248
|
+
const injected = {
|
|
249
|
+
hsl: this.state.hsl,
|
|
250
|
+
hsv: this.state.hsv,
|
|
251
|
+
rgb: this.state.rgb,
|
|
252
|
+
hex: this.state.hex,
|
|
253
|
+
oldHue: this.state.oldHue,
|
|
254
|
+
source: this.state.source,
|
|
255
|
+
onChange: this.handleChange
|
|
256
|
+
}, pickerProps = {
|
|
257
|
+
...this.props,
|
|
258
|
+
...injected
|
|
259
|
+
};
|
|
260
|
+
return /* @__PURE__ */ jsx(Picker, { ...pickerProps });
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
return ColorPicker2;
|
|
264
|
+
}
|
|
265
|
+
const DEFAULT_ARROW_OFFSET = 1, getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
|
|
266
|
+
let idCounter = 1;
|
|
267
|
+
class EditableInput extends Component {
|
|
268
|
+
input = null;
|
|
269
|
+
constructor(props) {
|
|
270
|
+
super(props);
|
|
271
|
+
const initialValue = String(props.value ?? "").toUpperCase();
|
|
272
|
+
this.state = {
|
|
273
|
+
value: initialValue,
|
|
274
|
+
blurValue: initialValue
|
|
275
|
+
}, this.inputId = `rc-editable-input-${idCounter++}`;
|
|
276
|
+
}
|
|
277
|
+
componentDidUpdate(prevProps, prevState) {
|
|
278
|
+
if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
|
|
279
|
+
const nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
|
|
280
|
+
this.setState(isFocused ? {
|
|
281
|
+
blurValue: nextValue
|
|
282
|
+
} : {
|
|
283
|
+
value: nextValue,
|
|
284
|
+
blurValue: this.state.blurValue ? "" : nextValue
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
componentWillUnmount() {
|
|
289
|
+
this.unbindEventListeners();
|
|
290
|
+
}
|
|
291
|
+
setInputRef = (input) => {
|
|
292
|
+
this.input = input;
|
|
293
|
+
};
|
|
294
|
+
getValueObjectWithLabel = (value) => ({
|
|
295
|
+
[this.props.label]: String(value)
|
|
296
|
+
});
|
|
297
|
+
getArrowOffset = () => this.props.arrowOffset ?? DEFAULT_ARROW_OFFSET;
|
|
298
|
+
setUpdatedValue = (value, event) => {
|
|
299
|
+
this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({
|
|
300
|
+
value: String(value)
|
|
301
|
+
});
|
|
302
|
+
};
|
|
303
|
+
handleBlur = () => {
|
|
304
|
+
this.state.blurValue && this.setState({
|
|
305
|
+
value: this.state.blurValue,
|
|
306
|
+
blurValue: ""
|
|
307
|
+
});
|
|
308
|
+
};
|
|
309
|
+
handleChange = (event) => {
|
|
310
|
+
this.setUpdatedValue(event.target.value, event);
|
|
311
|
+
};
|
|
312
|
+
handleKeyDown = (event) => {
|
|
313
|
+
const value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
|
|
314
|
+
if (!Number.isNaN(value) && (isUp || isDown)) {
|
|
315
|
+
const offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
|
|
316
|
+
this.setUpdatedValue(updatedValue, event);
|
|
317
|
+
}
|
|
318
|
+
};
|
|
319
|
+
handleDrag = (event) => {
|
|
320
|
+
if (!this.props.dragLabel)
|
|
321
|
+
return;
|
|
322
|
+
const {
|
|
323
|
+
dragMax,
|
|
324
|
+
value
|
|
325
|
+
} = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
|
|
326
|
+
dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
|
|
327
|
+
};
|
|
328
|
+
handleMouseDown = (event) => {
|
|
329
|
+
this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
|
|
330
|
+
};
|
|
331
|
+
handleMouseUp = () => {
|
|
332
|
+
this.unbindEventListeners();
|
|
333
|
+
};
|
|
334
|
+
unbindEventListeners = () => {
|
|
335
|
+
window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
|
|
336
|
+
};
|
|
337
|
+
render() {
|
|
338
|
+
const style = this.props.style ?? {}, wrapStyle = {
|
|
339
|
+
position: "relative",
|
|
340
|
+
...style.wrap
|
|
341
|
+
}, inputStyle = {
|
|
342
|
+
...style.input
|
|
343
|
+
}, labelStyle = {
|
|
344
|
+
...style.label,
|
|
345
|
+
...this.props.dragLabel ? {
|
|
346
|
+
cursor: "ew-resize"
|
|
347
|
+
} : null
|
|
348
|
+
};
|
|
349
|
+
return /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
|
|
350
|
+
/* @__PURE__ */ jsx("input", { id: this.inputId, style: inputStyle, ref: this.setInputRef, value: this.state.value, onKeyDown: this.handleKeyDown, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: this.props.placeholder, spellCheck: "false" }),
|
|
351
|
+
this.props.label && !this.props.hideLabel ? (
|
|
352
|
+
// oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the label is a drag affordance using pointer coordinates; the input also supports arrow-key stepping
|
|
353
|
+
/* @__PURE__ */ jsx("label", { htmlFor: this.inputId, style: labelStyle, onMouseDown: this.handleMouseDown, children: this.props.label })
|
|
354
|
+
) : null
|
|
355
|
+
] });
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
function calculateChange$1(e, direction, hsl, container) {
|
|
359
|
+
const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
|
|
360
|
+
if (direction === "vertical") {
|
|
361
|
+
let h2;
|
|
362
|
+
return top < 0 ? h2 = 359 : top > containerHeight ? h2 = 0 : h2 = 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h !== h2 ? {
|
|
363
|
+
h: h2,
|
|
364
|
+
s: hsl.s,
|
|
365
|
+
l: hsl.l,
|
|
366
|
+
a: hsl.a ?? 1,
|
|
367
|
+
source: "hsl"
|
|
368
|
+
} : null;
|
|
369
|
+
}
|
|
370
|
+
let h;
|
|
371
|
+
return left < 0 ? h = 0 : left > containerWidth ? h = 359 : h = 360 * (left * 100 / containerWidth) / 100, hsl.h !== h ? {
|
|
372
|
+
h,
|
|
373
|
+
s: hsl.s,
|
|
374
|
+
l: hsl.l,
|
|
375
|
+
a: hsl.a ?? 1,
|
|
376
|
+
source: "hsl"
|
|
377
|
+
} : null;
|
|
378
|
+
}
|
|
379
|
+
const HueGradient = styled.div.withConfig({
|
|
380
|
+
displayName: "HueGradient",
|
|
381
|
+
componentId: "sc-9dykdk-0"
|
|
382
|
+
})`background:${({
|
|
383
|
+
$direction
|
|
384
|
+
}) => $direction === "vertical" ? "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"};`;
|
|
385
|
+
class Hue extends Component {
|
|
386
|
+
container = null;
|
|
387
|
+
componentWillUnmount() {
|
|
388
|
+
this.unbindEventListeners();
|
|
389
|
+
}
|
|
390
|
+
setContainerRef = (node) => {
|
|
391
|
+
this.container = node;
|
|
392
|
+
};
|
|
393
|
+
handleChange = (event) => {
|
|
394
|
+
if (!this.container)
|
|
395
|
+
return;
|
|
396
|
+
const change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
|
|
397
|
+
change && typeof this.props.onChange == "function" && this.props.onChange(change);
|
|
398
|
+
};
|
|
399
|
+
handleMouseDown = (event) => {
|
|
400
|
+
this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
|
|
401
|
+
};
|
|
402
|
+
handleMouseUp = () => {
|
|
403
|
+
this.unbindEventListeners();
|
|
404
|
+
};
|
|
405
|
+
unbindEventListeners = () => {
|
|
406
|
+
window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
|
|
407
|
+
};
|
|
408
|
+
render() {
|
|
409
|
+
const {
|
|
410
|
+
hsl,
|
|
411
|
+
direction = "horizontal",
|
|
412
|
+
radius,
|
|
413
|
+
shadow
|
|
414
|
+
} = this.props, pointerStyle = direction === "vertical" ? {
|
|
415
|
+
position: "absolute",
|
|
416
|
+
left: "0px",
|
|
417
|
+
top: `${-(hsl.h * 100 / 360) + 100}%`
|
|
418
|
+
} : {
|
|
419
|
+
position: "absolute",
|
|
420
|
+
left: `${hsl.h * 100 / 360}%`
|
|
421
|
+
};
|
|
422
|
+
return /* @__PURE__ */ jsx("div", { style: {
|
|
423
|
+
position: "absolute",
|
|
424
|
+
inset: 0,
|
|
425
|
+
borderRadius: radius,
|
|
426
|
+
boxShadow: shadow
|
|
427
|
+
}, children: /* @__PURE__ */ jsx(HueGradient, { $direction: direction, style: {
|
|
428
|
+
padding: "0 2px",
|
|
429
|
+
position: "relative",
|
|
430
|
+
height: "100%",
|
|
431
|
+
borderRadius: radius
|
|
432
|
+
}, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
|
|
433
|
+
marginTop: "1px",
|
|
434
|
+
width: "4px",
|
|
435
|
+
borderRadius: "1px",
|
|
436
|
+
height: "8px",
|
|
437
|
+
boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
|
|
438
|
+
background: "#fff",
|
|
439
|
+
transform: "translateX(-2px)"
|
|
440
|
+
} }) }) }) });
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
function calculateChange(e, hsl, container) {
|
|
444
|
+
const {
|
|
445
|
+
width: containerWidth,
|
|
446
|
+
height: containerHeight
|
|
447
|
+
} = container.getBoundingClientRect(), x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY;
|
|
448
|
+
let left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
|
|
449
|
+
left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
|
|
450
|
+
const saturation = left / containerWidth, bright = 1 - top / containerHeight;
|
|
451
|
+
return {
|
|
452
|
+
h: hsl.h,
|
|
453
|
+
s: saturation,
|
|
454
|
+
v: bright,
|
|
455
|
+
a: hsl.a ?? 1,
|
|
456
|
+
source: "hsv"
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
const SaturationWhite = styled.div.withConfig({
|
|
460
|
+
displayName: "SaturationWhite",
|
|
461
|
+
componentId: "sc-21ffrq-0"
|
|
462
|
+
})`background:linear-gradient(to right,#fff,rgba(255,255,255,0));`, SaturationBlack = styled.div.withConfig({
|
|
463
|
+
displayName: "SaturationBlack",
|
|
464
|
+
componentId: "sc-21ffrq-1"
|
|
465
|
+
})`background:linear-gradient(to top,#000,rgba(0,0,0,0));`;
|
|
466
|
+
class Saturation extends Component {
|
|
467
|
+
container = null;
|
|
468
|
+
throttle = throttle((handler, data) => {
|
|
469
|
+
handler(data);
|
|
470
|
+
}, 50);
|
|
471
|
+
componentWillUnmount() {
|
|
472
|
+
this.throttle.cancel(), this.unbindEventListeners();
|
|
473
|
+
}
|
|
474
|
+
setContainerRef = (node) => {
|
|
475
|
+
this.container = node;
|
|
476
|
+
};
|
|
477
|
+
getContainerRenderWindow() {
|
|
478
|
+
const {
|
|
479
|
+
container
|
|
480
|
+
} = this;
|
|
481
|
+
let renderWindow = window;
|
|
482
|
+
for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow; )
|
|
483
|
+
renderWindow = renderWindow.parent;
|
|
484
|
+
return renderWindow;
|
|
485
|
+
}
|
|
486
|
+
handleChange = (event) => {
|
|
487
|
+
!this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
|
|
488
|
+
};
|
|
489
|
+
handleMouseDown = (event) => {
|
|
490
|
+
this.handleChange(event.nativeEvent);
|
|
491
|
+
const renderWindow = this.getContainerRenderWindow();
|
|
492
|
+
renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
|
|
493
|
+
};
|
|
494
|
+
handleMouseUp = () => {
|
|
495
|
+
this.unbindEventListeners();
|
|
496
|
+
};
|
|
497
|
+
unbindEventListeners = () => {
|
|
498
|
+
const renderWindow = this.getContainerRenderWindow();
|
|
499
|
+
renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
|
|
500
|
+
};
|
|
501
|
+
render() {
|
|
502
|
+
const {
|
|
503
|
+
hsl,
|
|
504
|
+
hsv,
|
|
505
|
+
radius,
|
|
506
|
+
shadow
|
|
507
|
+
} = this.props, pointerStyle = {
|
|
508
|
+
position: "absolute",
|
|
509
|
+
top: `${-(hsv.v * 100) + 100}%`,
|
|
510
|
+
left: `${hsv.s * 100}%`,
|
|
511
|
+
cursor: "default"
|
|
512
|
+
};
|
|
513
|
+
return (
|
|
514
|
+
// oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- the picker surface is dragged via pointer coordinates, which have no keyboard equivalent
|
|
515
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
516
|
+
position: "absolute",
|
|
517
|
+
inset: 0,
|
|
518
|
+
background: `hsl(${hsl.h},100%, 50%)`,
|
|
519
|
+
borderRadius: radius
|
|
520
|
+
}, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsxs(SaturationWhite, { style: {
|
|
521
|
+
position: "absolute",
|
|
522
|
+
inset: 0,
|
|
523
|
+
borderRadius: radius
|
|
524
|
+
}, children: [
|
|
525
|
+
/* @__PURE__ */ jsx(SaturationBlack, { style: {
|
|
526
|
+
position: "absolute",
|
|
527
|
+
inset: 0,
|
|
528
|
+
boxShadow: shadow,
|
|
529
|
+
borderRadius: radius
|
|
530
|
+
} }),
|
|
531
|
+
/* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
|
|
532
|
+
width: "4px",
|
|
533
|
+
height: "4px",
|
|
534
|
+
boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
|
|
535
|
+
borderRadius: "50%",
|
|
536
|
+
cursor: "pointer",
|
|
537
|
+
transform: "translate(-2px, -2px)"
|
|
538
|
+
} }) })
|
|
539
|
+
] }) })
|
|
540
|
+
);
|
|
541
|
+
}
|
|
542
|
+
}
|
|
66
543
|
const ColorPickerFields = (t0) => {
|
|
67
544
|
const $ = c(44), {
|
|
68
545
|
onChange,
|
|
@@ -158,7 +635,7 @@ const ColorPickerFields = (t0) => {
|
|
|
158
635
|
displayName: "ReadOnlyContainer",
|
|
159
636
|
componentId: "sc-13q7kbw-1"
|
|
160
637
|
})`margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;`, ColorPickerInner = (props) => {
|
|
161
|
-
const $ = c(
|
|
638
|
+
const $ = c(46), {
|
|
162
639
|
width,
|
|
163
640
|
color: t0,
|
|
164
641
|
onChange,
|
|
@@ -194,23 +671,19 @@ const ColorPickerFields = (t0) => {
|
|
|
194
671
|
background: "#fff"
|
|
195
672
|
}, children: /* @__PURE__ */ jsx(Alpha, { rgb, hsl, onChange }) })
|
|
196
673
|
] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
|
|
197
|
-
let t3;
|
|
674
|
+
let t3, t4;
|
|
198
675
|
$[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = {
|
|
199
676
|
position: "relative",
|
|
200
677
|
minWidth: "4em",
|
|
201
678
|
background: "#fff"
|
|
202
|
-
}, $[9] = t3) : t3 = $[9];
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
679
|
+
}, t4 = /* @__PURE__ */ jsx(Checkboard, { size: 8, white: "transparent", grey: "rgba(0,0,0,.08)" }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
|
|
680
|
+
const t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`;
|
|
681
|
+
let t6;
|
|
682
|
+
$[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(ColorBox, { style: {
|
|
683
|
+
backgroundColor: t5
|
|
684
|
+
} }), $[11] = t5, $[12] = t6) : t6 = $[12];
|
|
208
685
|
let t7;
|
|
209
|
-
$[
|
|
210
|
-
backgroundColor: t6
|
|
211
|
-
} }), $[12] = t6, $[13] = t7) : t7 = $[13];
|
|
212
|
-
let t8;
|
|
213
|
-
$[14] !== hex || $[15] !== hsl?.h || $[16] !== hsl?.l || $[17] !== hsl?.s || $[18] !== readOnly || $[19] !== rgb?.b || $[20] !== rgb?.g || $[21] !== rgb?.r ? (t8 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, { padding: 2, paddingBottom: 1, sizing: "border", justify: "space-between", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, marginTop: 1, children: [
|
|
686
|
+
$[13] !== hex || $[14] !== hsl?.h || $[15] !== hsl?.l || $[16] !== hsl?.s || $[17] !== readOnly || $[18] !== rgb?.b || $[19] !== rgb?.g || $[20] !== rgb?.r ? (t7 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, { padding: 2, paddingBottom: 1, sizing: "border", justify: "space-between", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, marginTop: 1, children: [
|
|
214
687
|
/* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
|
|
215
688
|
/* @__PURE__ */ jsxs(Inline, { gap: 3, children: [
|
|
216
689
|
/* @__PURE__ */ jsxs(Text, { size: 1, children: [
|
|
@@ -232,35 +705,35 @@ const ColorPickerFields = (t0) => {
|
|
|
232
705
|
"%"
|
|
233
706
|
] })
|
|
234
707
|
] })
|
|
235
|
-
] }) }), $[
|
|
708
|
+
] }) }), $[13] = hex, $[14] = hsl?.h, $[15] = hsl?.l, $[16] = hsl?.s, $[17] = readOnly, $[18] = rgb?.b, $[19] = rgb?.g, $[20] = rgb?.r, $[21] = t7) : t7 = $[21];
|
|
709
|
+
let t8;
|
|
710
|
+
$[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, { flex: 1, radius: 2, overflow: "hidden", style: t3, children: [
|
|
711
|
+
t4,
|
|
712
|
+
t6,
|
|
713
|
+
t7
|
|
714
|
+
] }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
|
|
236
715
|
let t9;
|
|
237
|
-
$[
|
|
238
|
-
t5,
|
|
239
|
-
t7,
|
|
240
|
-
t8
|
|
241
|
-
] }), $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
|
|
242
|
-
let t10;
|
|
243
|
-
$[26] !== disableAlpha || $[27] !== hex || $[28] !== hsl || $[29] !== onChange || $[30] !== onUnset || $[31] !== readOnly || $[32] !== rgb ? (t10 = !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
|
|
716
|
+
$[25] !== disableAlpha || $[26] !== hex || $[27] !== hsl || $[28] !== onChange || $[29] !== onUnset || $[30] !== readOnly || $[31] !== rgb ? (t9 = !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
|
|
244
717
|
/* @__PURE__ */ jsx(Box, { style: {
|
|
245
718
|
width: 200
|
|
246
719
|
}, children: /* @__PURE__ */ jsx(ColorPickerFields, { rgb, hsl, hex, onChange, disableAlpha }) }),
|
|
247
720
|
/* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Button, { onClick: onUnset, title: "Delete color", icon: TrashIcon, tone: "critical" }) })
|
|
248
|
-
] }), $[
|
|
721
|
+
] }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
|
|
722
|
+
let t10;
|
|
723
|
+
$[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [
|
|
724
|
+
t8,
|
|
725
|
+
t9
|
|
726
|
+
] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
|
|
249
727
|
let t11;
|
|
250
|
-
$[
|
|
251
|
-
t9,
|
|
252
|
-
t10
|
|
253
|
-
] }), $[34] = t10, $[35] = t9, $[36] = t11) : t11 = $[36];
|
|
728
|
+
$[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
|
|
254
729
|
let t12;
|
|
255
|
-
$[
|
|
256
|
-
let t13;
|
|
257
|
-
$[40] !== t11 || $[41] !== t12 || $[42] !== t2 ? (t13 = /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
|
|
730
|
+
$[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
|
|
258
731
|
t2,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
] }) }), $[
|
|
262
|
-
let
|
|
263
|
-
return $[
|
|
732
|
+
t10,
|
|
733
|
+
t11
|
|
734
|
+
] }) }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
|
|
735
|
+
let t13;
|
|
736
|
+
return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", { style: t1, children: t12 }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
|
|
264
737
|
}, ColorPicker = CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
|
|
265
738
|
hex: "#24a3e3",
|
|
266
739
|
hsl: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorInput.js","sources":["../../src/ColorList.tsx","../../src/ColorPickerFields.tsx","../../src/ColorInput.tsx"],"sourcesContent":["import {Flex} from '@sanity/ui'\nimport type {Color, ColorChangeHandler} from 'react-color'\nimport {styled} from 'styled-components'\nimport tinycolor from 'tinycolor2'\n\nconst ColorListWrap = styled(Flex)`\n gap: 0.25em;\n`\n\nconst ColorBoxContainer = styled.div`\n width: 2.1em;\n height: 2.1em;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')\n left center #fff;\n`\n\nconst ColorBox = styled.div`\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);\n content: '';\n position: absolute;\n inset: 0;\n z-index: 1;\n`\n\ninterface ValidatedColor {\n key: string\n color: Color\n backgroundColor: string\n}\n\ninterface ColorListProps {\n colors?: Array<Color>\n onChange: ColorChangeHandler<Color>\n}\n\nconst validateColors = (colors: Array<Color>) => {\n const seen = new Set<string>()\n return colors.reduce((cls: Array<ValidatedColor>, c) => {\n // @ts-expect-error fix types later\n const color = c.hex ? tinycolor(c.hex) : tinycolor(c)\n if (color.isValid()) {\n const backgroundColor = color.toRgbString()\n const key = JSON.stringify({color: c, backgroundColor})\n if (!seen.has(key)) {\n seen.add(key)\n cls.push({key, color: c, backgroundColor})\n }\n }\n return cls\n }, [])\n}\n\nexport function ColorList({colors, onChange}: ColorListProps): React.JSX.Element | null {\n if (!colors) return null\n return (\n <ColorListWrap wrap=\"wrap\">\n {validateColors(colors).map(({key, color, backgroundColor}) => (\n <ColorBoxContainer\n key={key}\n onClick={() => {\n onChange(color)\n }}\n >\n <ColorBox style={{background: backgroundColor}} />\n </ColorBoxContainer>\n ))}\n </ColorListWrap>\n )\n}\n","import {Box, Flex, useTheme} from '@sanity/ui'\nimport {useCallback, useMemo} from 'react'\nimport type {Color, ColorChangeHandler, HSLColor, RGBColor} from 'react-color'\nimport {EditableInput} from 'react-color/lib/components/common'\nimport type {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'\n// @ts-expect-error missing export\nimport {isValidHex} from 'react-color/lib/helpers/color'\n\ninterface ColorPickerFieldsProps {\n rgb?: RGBColor\n hsl?: HSLColor\n hex?: string\n disableAlpha: boolean\n onChange: ColorChangeHandler<Color>\n}\n\nexport const ColorPickerFields = ({\n onChange,\n rgb,\n hsl,\n hex,\n disableAlpha,\n}: ColorPickerFieldsProps): React.JSX.Element => {\n const {sanity} = useTheme()\n\n const inputStyles: EditableInputStyles = useMemo(\n () => ({\n input: {\n width: '80%',\n padding: '4px 10% 3px',\n border: 'none',\n // TODO: when upgrading to @sanity/ui@4 start using the new tokens\n // oxlint-disable-next-line typescript/no-deprecated\n boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,\n // oxlint-disable-next-line typescript/no-deprecated\n color: sanity.color.input.default.enabled.fg,\n // oxlint-disable-next-line typescript/no-deprecated\n backgroundColor: sanity.color.input.default.enabled.bg,\n // oxlint-disable-next-line typescript/no-deprecated\n fontSize: sanity.fonts.text.sizes[0]?.fontSize,\n textAlign: 'center',\n },\n label: {\n display: 'block',\n textAlign: 'center',\n // oxlint-disable-next-line typescript/no-deprecated\n fontSize: sanity.fonts.label.sizes[0]?.fontSize,\n // oxlint-disable-next-line typescript/no-deprecated\n color: sanity.color.base.fg,\n paddingTop: '3px',\n paddingBottom: '4px',\n textTransform: 'capitalize',\n },\n }),\n [sanity],\n )\n\n const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(\n (data) => {\n if ('hex' in data && data['hex'] && isValidHex(data['hex'])) {\n onChange({\n hex: data['hex'],\n source: 'hex',\n })\n } else if (\n rgb &&\n (('r' in data && data['r']) || ('g' in data && data['g']) || ('b' in data && data['b']))\n ) {\n onChange({\n r: Number(data['r']) || rgb.r,\n g: Number(data['g']) || rgb.g,\n b: Number(data['b']) || rgb.b,\n a: rgb.a,\n source: 'rgb',\n })\n } else if (hsl && 'a' in data && data['a']) {\n let alpha = Number(data['a'])\n if (alpha < 0) {\n alpha = 0\n } else if (alpha > 100) {\n alpha = 100\n }\n alpha /= 100\n\n onChange({\n h: hsl.h,\n s: hsl.s,\n l: hsl.l,\n a: alpha,\n source: 'hsl',\n })\n }\n },\n [onChange, hsl, rgb],\n )\n\n return (\n <Flex>\n <Box flex={2} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"hex\"\n value={hex?.replace('#', '')}\n onChange={handleChange}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"r\"\n value={rgb?.r}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"g\"\n value={rgb?.g}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"b\"\n value={rgb?.b}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n {!disableAlpha && (\n <Box flex={1}>\n <EditableInput\n style={inputStyles}\n label=\"a\"\n value={Math.round((rgb?.a ?? 1) * 100)}\n onChange={handleChange}\n dragLabel\n dragMax={100}\n />\n </Box>\n )}\n </Flex>\n )\n}\n","import {AddIcon, TrashIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'\nimport {startTransition, useOptimistic, useRef} from 'react'\nimport {type Color, CustomPicker} from 'react-color'\nimport {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'\nimport type {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'\nimport {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'\nimport {styled} from 'styled-components'\n\nimport {ColorList} from './ColorList'\nimport {ColorPickerFields} from './ColorPickerFields'\nimport type {ColorSchemaType, ColorValue} from './types'\n\nconst ColorBox = styled(Box)`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n`\n\nconst ReadOnlyContainer = styled(Flex)`\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n`\n\ninterface ColorPickerProps extends CustomPickerInjectedProps<Color> {\n width?: string\n disableAlpha: boolean\n colorList?: Array<Color> | undefined\n readOnly?: boolean\n onUnset: () => void\n color: ColorValue\n}\n\nconst ColorPickerInner = (props: ColorPickerProps) => {\n const {\n width,\n color: {rgb, hex, hsv, hsl},\n onChange,\n onUnset,\n disableAlpha,\n colorList,\n readOnly,\n } = props\n\n if (!hsl || !hsv) {\n return null\n }\n\n return (\n <div style={{width}}>\n <Card padding={1} border radius={1}>\n <Stack gap={2}>\n {!readOnly && (\n <>\n <Card overflow=\"hidden\" style={{position: 'relative', height: '5em'}}>\n <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />\n </Card>\n\n <Card\n shadow={1}\n radius={3}\n overflow=\"hidden\"\n style={{position: 'relative', height: '10px'}}\n >\n <Hue hsl={hsl} onChange={!readOnly && onChange} />\n </Card>\n\n {!disableAlpha && (\n <Card\n shadow={1}\n radius={3}\n overflow=\"hidden\"\n style={{position: 'relative', height: '10px', background: '#fff'}}\n >\n <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />\n </Card>\n )}\n </>\n )}\n <Flex>\n <Card\n flex={1}\n radius={2}\n overflow=\"hidden\"\n style={{position: 'relative', minWidth: '4em', background: '#fff'}}\n >\n <Checkboard\n size={8}\n white=\"transparent\"\n grey=\"rgba(0,0,0,.08)\"\n // oxlint-disable-next-line no-unsafe-type-assertion\n renderers={{} as {canvas: unknown}}\n />\n <ColorBox\n style={{\n backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,\n }}\n />\n\n {readOnly && (\n <ReadOnlyContainer\n padding={2}\n paddingBottom={1}\n sizing=\"border\"\n justify=\"space-between\"\n >\n <Stack gap={3} marginTop={1}>\n <Text size={3} weight=\"bold\">\n {hex}\n </Text>\n\n <Inline gap={3}>\n <Text size={1}>\n <strong>RGB: </strong>\n {rgb?.r} {rgb?.g} {rgb?.b}\n </Text>\n <Text size={1}>\n <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}\n {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%\n </Text>\n </Inline>\n </Stack>\n </ReadOnlyContainer>\n )}\n </Card>\n\n {!readOnly && (\n <Flex align=\"flex-start\" marginLeft={2}>\n <Box style={{width: 200}}>\n <ColorPickerFields\n rgb={rgb}\n hsl={hsl}\n hex={hex}\n onChange={onChange}\n disableAlpha={disableAlpha}\n />\n </Box>\n <Box marginLeft={2}>\n <Button onClick={onUnset} title=\"Delete color\" icon={TrashIcon} tone=\"critical\" />\n </Box>\n </Flex>\n )}\n </Flex>\n {colorList && <ColorList colors={colorList} onChange={onChange} />}\n </Stack>\n </Card>\n </div>\n )\n}\n\nconst ColorPicker = CustomPicker(ColorPickerInner)\n\nconst DEFAULT_COLOR: ColorValue & {source: string} = {\n hex: '#24a3e3',\n hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},\n hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},\n rgb: {r: 46, g: 163, b: 227, a: 1},\n source: 'hex',\n}\n\nexport default function ColorInput(props: ObjectInputProps): React.JSX.Element {\n const {onChange, readOnly} = props\n // oxlint-disable-next-line no-unsafe-type-assertion\n const _value = props.value as ColorValue | undefined\n const [value, setColorOptimistic] = useOptimistic(_value)\n const type = props.schemaType as ColorSchemaType\n const focusRef = useRef<HTMLButtonElement>(null)\n\n function handleChange(nextColor: ColorValue) {\n const fieldPatches = type.fields\n .filter((field) => field.name in nextColor)\n .map((field) => {\n // oxlint-disable-next-line no-unsafe-type-assertion\n const nextFieldValue = nextColor[field.name as keyof ColorValue]\n const isObject = field.type.jsonType === 'object'\n return set(\n isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n [field.name],\n )\n })\n\n onChange([\n setIfMissing({_type: type.name}),\n set(type.name, ['_type']),\n set(nextColor.rgb?.a, ['alpha']),\n ...fieldPatches,\n ])\n }\n\n return (\n <>\n {value && value.hex ? (\n <ColorPicker\n color={value}\n onChange={(nextColor) =>\n startTransition(() => {\n setColorOptimistic(nextColor)\n handleChange(nextColor)\n })\n }\n readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n disableAlpha={!!type.options?.disableAlpha}\n colorList={type.options?.colorList}\n onUnset={() =>\n startTransition(() => {\n setColorOptimistic(undefined)\n onChange(unset())\n })\n }\n />\n ) : (\n <Button\n icon={AddIcon}\n mode=\"ghost\"\n text=\"Create color\"\n ref={focusRef}\n disabled={Boolean(readOnly)}\n onClick={() =>\n startTransition(() => {\n setColorOptimistic(DEFAULT_COLOR)\n handleChange(DEFAULT_COLOR)\n })\n }\n />\n )}\n </>\n )\n}\n"],"names":["ColorListWrap","styled","Flex","withConfig","displayName","componentId","ColorBoxContainer","div","ColorBox","validateColors","colors","seen","Set","reduce","cls","c","color","hex","tinycolor","isValid","backgroundColor","toRgbString","key","JSON","stringify","has","add","push","ColorList","t0","$","_c","onChange","t1","t2","t3","background","map","ColorPickerFields","rgb","hsl","disableAlpha","sanity","useTheme","input","default","enabled","border","fonts","text","sizes","fontSize","bg","fg","width","padding","boxShadow","textAlign","t4","label","t5","base","display","paddingTop","paddingBottom","textTransform","t6","inputStyles","t7","data","isValidHex","source","r","g","b","Number","a","alpha","h","s","l","handleChange","t8","replace","t9","t10","t11","t12","t13","t14","t15","t16","Math","round","t17","Box","ReadOnlyContainer","ColorPickerInner","props","onUnset","colorList","readOnly","hsv","position","height","for","minWidth","Symbol","TrashIcon","ColorPicker","CustomPicker","DEFAULT_COLOR","v","ColorInput","_value","value","setColorOptimistic","useOptimistic","type","schemaType","focusRef","useRef","nextColor","fieldPatches","fields","filter","field","name","field_0","nextFieldValue","isObject","jsonType","set","Object","assign","_type","setIfMissing","nextColor_0","startTransition","options","undefined","unset","AddIcon","Boolean"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColorInput.js","sources":["../../src/ColorList.tsx","../../src/react-color/helpers/checkboard.ts","../../src/react-color/Checkboard.tsx","../../src/react-color/helpers/alpha.ts","../../src/react-color/Alpha.tsx","../../src/react-color/helpers/color.ts","../../src/react-color/ColorWrap.tsx","../../src/react-color/EditableInput.tsx","../../src/react-color/helpers/hue.ts","../../src/react-color/Hue.tsx","../../src/react-color/helpers/saturation.ts","../../src/react-color/Saturation.tsx","../../src/ColorPickerFields.tsx","../../src/ColorInput.tsx"],"sourcesContent":["import {Flex} from '@sanity/ui'\nimport {styled} from 'styled-components'\nimport tinycolor from 'tinycolor2'\n\nimport type {Color, ColorChangeHandler} from './react-color'\n\nconst ColorListWrap = styled(Flex)`\n gap: 0.25em;\n`\n\nconst ColorBoxContainer = styled.div`\n width: 2.1em;\n height: 2.1em;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')\n left center #fff;\n`\n\nconst ColorBox = styled.div`\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);\n content: '';\n position: absolute;\n inset: 0;\n z-index: 1;\n`\n\ninterface ValidatedColor {\n key: string\n color: Color\n backgroundColor: string\n}\n\ninterface ColorListProps {\n colors?: Array<Color>\n onChange: ColorChangeHandler<Color>\n}\n\nconst validateColors = (colors: Array<Color>) => {\n const seen = new Set<string>()\n return colors.reduce((cls: Array<ValidatedColor>, c) => {\n // @ts-expect-error fix types later\n const color = c.hex ? tinycolor(c.hex) : tinycolor(c)\n if (color.isValid()) {\n const backgroundColor = color.toRgbString()\n const key = JSON.stringify({color: c, backgroundColor})\n if (!seen.has(key)) {\n seen.add(key)\n cls.push({key, color: c, backgroundColor})\n }\n }\n return cls\n }, [])\n}\n\nexport function ColorList({colors, onChange}: ColorListProps): React.JSX.Element | null {\n if (!colors) return null\n return (\n <ColorListWrap wrap=\"wrap\">\n {validateColors(colors).map(({key, color, backgroundColor}) => (\n <ColorBoxContainer\n key={key}\n onClick={() => {\n onChange(color)\n }}\n >\n <ColorBox style={{background: backgroundColor}} />\n </ColorBoxContainer>\n ))}\n </ColorListWrap>\n )\n}\n","/**\n * Renders a checkerboard pattern as a data URL, used as the transparency backdrop.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/checkboard.js | react-color's checkboard helper}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n */\n\nconst checkboardCache: Record<string, string | null> = {}\n\nfunction render(\n c1: string,\n c2: string,\n size: number,\n serverCanvas?: new () => HTMLCanvasElement,\n): string | null {\n if (typeof document === 'undefined' && !serverCanvas) {\n return null\n }\n const canvas = serverCanvas ? new serverCanvas() : document.createElement('canvas')\n canvas.width = size * 2\n canvas.height = size * 2\n const ctx = canvas.getContext('2d')\n if (!ctx) {\n // If no context can be found, return early.\n return null\n }\n ctx.fillStyle = c1\n ctx.fillRect(0, 0, canvas.width, canvas.height)\n ctx.fillStyle = c2\n ctx.fillRect(0, 0, size, size)\n ctx.translate(size, size)\n ctx.fillRect(0, 0, size, size)\n return canvas.toDataURL()\n}\n\nexport function get(\n c1: string,\n c2: string,\n size: number,\n serverCanvas?: new () => HTMLCanvasElement,\n): string | null {\n const key = `${c1}-${c2}-${size}${serverCanvas ? '-server' : ''}`\n const cached = checkboardCache[key]\n if (cached) {\n return cached\n }\n const checkboard = render(c1, c2, size, serverCanvas)\n checkboardCache[key] = checkboard\n return checkboard\n}\n","/**\n * Checkerboard transparency backdrop.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Checkboard.js | react-color's Checkboard}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE. The upstream\n * `children` cloning branch is dropped as it is unused here.\n */\nimport type {ReactElement} from 'react'\n\nimport * as checkboard from './helpers/checkboard'\nimport type {CheckboardRenderers, RenderersProps} from './types'\n\nconst EMPTY_RENDERERS: CheckboardRenderers = {}\n\nexport interface CheckboardProps extends RenderersProps {\n white?: string | undefined\n grey?: string | undefined\n size?: number | undefined\n borderRadius?: string | undefined\n boxShadow?: string | undefined\n}\n\nexport function Checkboard({\n white = 'transparent',\n grey = 'rgba(0,0,0,.08)',\n size = 8,\n renderers = EMPTY_RENDERERS,\n borderRadius,\n boxShadow,\n}: CheckboardProps): ReactElement {\n const background = checkboard.get(white, grey, size, renderers.canvas)\n return (\n <div\n style={{\n borderRadius,\n boxShadow,\n position: 'absolute',\n inset: 0,\n background: background ? `url(${background}) center left` : undefined,\n }}\n />\n )\n}\n","/**\n * Translates a pointer event over the alpha track into a new alpha value.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/alpha.js | react-color's alpha helper}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n */\nimport type {AlphaColorResult, HSLColor, PickerEvent} from '../types'\n\nexport function calculateChange(\n e: PickerEvent,\n hsl: HSLColor,\n direction: 'horizontal' | 'vertical' | undefined,\n initialA: number | undefined,\n container: HTMLElement,\n): AlphaColorResult | null {\n const containerWidth = container.clientWidth\n const containerHeight = container.clientHeight\n const x = 'touches' in e ? (e.touches[0]?.pageX ?? 0) : e.pageX\n const y = 'touches' in e ? (e.touches[0]?.pageY ?? 0) : e.pageY\n const left = x - (container.getBoundingClientRect().left + window.scrollX)\n const top = y - (container.getBoundingClientRect().top + window.scrollY)\n\n if (direction === 'vertical') {\n let a: number\n if (top < 0) {\n a = 0\n } else if (top > containerHeight) {\n a = 1\n } else {\n a = Math.round((top * 100) / containerHeight) / 100\n }\n\n if (hsl.a !== a) {\n return {h: hsl.h, s: hsl.s, l: hsl.l, a, source: 'rgb'}\n }\n return null\n }\n\n let a: number\n if (left < 0) {\n a = 0\n } else if (left > containerWidth) {\n a = 1\n } else {\n a = Math.round((left * 100) / containerWidth) / 100\n }\n\n if (initialA !== a) {\n return {h: hsl.h, s: hsl.s, l: hsl.l, a, source: 'rgb'}\n }\n return null\n}\n","/**\n * Alpha (transparency) slider.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Alpha.js | react-color's Alpha}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n *\n * @remarks\n * Kept as a class component for this round (function-component conversion is a\n * follow-up PR). `reactcss` has been removed in favor of plain inline styles,\n * and the unused custom `pointer` slot dropped.\n */\nimport {Component} from 'react'\nimport type {CSSProperties, ReactElement} from 'react'\n\nimport {Checkboard} from './Checkboard'\nimport * as alpha from './helpers/alpha'\nimport type {\n AlphaColorResult,\n CheckboardRenderers,\n ColorChangeHandler,\n HSLColor,\n PickerEvent,\n RGBColor,\n} from './types'\n\nexport interface AlphaProps {\n rgb: RGBColor\n hsl: HSLColor\n a?: number | undefined\n direction?: 'horizontal' | 'vertical' | undefined\n radius?: string | undefined\n shadow?: string | undefined\n renderers?: CheckboardRenderers | undefined\n onChange?: ColorChangeHandler<AlphaColorResult> | undefined\n}\n\nexport class Alpha extends Component<AlphaProps> {\n private container: HTMLDivElement | null = null\n\n override componentWillUnmount(): void {\n this.unbindEventListeners()\n }\n\n private readonly setContainerRef = (node: HTMLDivElement | null): void => {\n this.container = node\n }\n\n private readonly handleChange = (event: PickerEvent): void => {\n if (!this.container) {\n return\n }\n const change = alpha.calculateChange(\n event,\n this.props.hsl,\n this.props.direction,\n this.props.a,\n this.container,\n )\n if (change && typeof this.props.onChange === 'function') {\n this.props.onChange(change)\n }\n }\n\n private readonly handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n this.handleChange(event.nativeEvent)\n window.addEventListener('mousemove', this.handleChange)\n window.addEventListener('mouseup', this.handleMouseUp)\n }\n\n private readonly handleMouseUp = (): void => {\n this.unbindEventListeners()\n }\n\n private readonly unbindEventListeners = (): void => {\n window.removeEventListener('mousemove', this.handleChange)\n window.removeEventListener('mouseup', this.handleMouseUp)\n }\n\n override render(): ReactElement {\n const {rgb, direction, radius, shadow, renderers} = this.props\n const alphaValue = rgb.a ?? 1\n const gradient =\n direction === 'vertical'\n ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`\n : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`\n const pointerStyle: CSSProperties =\n direction === 'vertical'\n ? {position: 'absolute', left: 0, top: `${alphaValue * 100}%`}\n : {position: 'absolute', left: `${alphaValue * 100}%`}\n\n return (\n <div style={{position: 'absolute', inset: 0, borderRadius: radius}}>\n <div style={{position: 'absolute', inset: 0, overflow: 'hidden', borderRadius: radius}}>\n <Checkboard renderers={renderers} />\n </div>\n <div\n style={{\n position: 'absolute',\n inset: 0,\n background: gradient,\n boxShadow: shadow,\n borderRadius: radius,\n }}\n />\n {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- the slider surface is dragged via pointer coordinates, which have no keyboard equivalent */}\n <div\n style={{position: 'relative', height: '100%', margin: '0 3px'}}\n ref={this.setContainerRef}\n onMouseDown={this.handleMouseDown}\n onTouchMove={this.handleChange}\n onTouchStart={this.handleChange}\n >\n <div style={pointerStyle}>\n <div\n style={{\n width: '4px',\n borderRadius: '1px',\n height: '8px',\n boxShadow: '0 0 2px rgba(0, 0, 0, .6)',\n background: '#fff',\n marginTop: '1px',\n transform: 'translateX(-2px)',\n }}\n />\n </div>\n </div>\n </div>\n )\n }\n}\n","/**\n * Color conversion and validation helpers built on `tinycolor2`.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/color.js | react-color's color helpers}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n */\nimport tinycolor from 'tinycolor2'\n\nimport type {Color, ColorState} from '../types'\n\nconst VALIDATION_KEYS = new Set(['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'])\nconst PERCENT_PATTERN = /^\\d+%$/\n\nexport function simpleCheckForValidColor(data: Color): Color | false {\n if (typeof data === 'string') {\n return data\n }\n\n let checked = 0\n let passed = 0\n for (const [key, value] of Object.entries(data)) {\n if (!VALIDATION_KEYS.has(key) || !value) {\n continue\n }\n checked += 1\n if (!Number.isNaN(Number(value))) {\n passed += 1\n }\n if ((key === 's' || key === 'l') && PERCENT_PATTERN.test(String(value))) {\n passed += 1\n }\n }\n\n return checked === passed ? data : false\n}\n\nexport function toState(data: Color, oldHue?: number): ColorState {\n const instance =\n typeof data === 'string'\n ? tinycolor(data)\n : 'hex' in data\n ? tinycolor(data.hex)\n : tinycolor(data)\n const hsl = instance.toHsl()\n const hsv = instance.toHsv()\n const rgb = instance.toRgb()\n const hex = instance.toHex()\n\n if (hsl.s === 0) {\n hsl.h = oldHue ?? 0\n hsv.h = oldHue ?? 0\n }\n\n const transparent = hex === '000000' && rgb.a === 0\n const incomingHue = typeof data === 'string' ? undefined : 'h' in data ? data.h : undefined\n const source = typeof data === 'string' ? undefined : data.source\n\n return {\n hsl,\n hex: transparent ? 'transparent' : `#${hex}`,\n rgb,\n hsv,\n oldHue: incomingHue || oldHue || hsl.h,\n source: source ?? '',\n }\n}\n\nexport function isValidHex(hex: string): boolean {\n if (hex === 'transparent') {\n return true\n }\n // Disallow hex4 and hex8 (with alpha) to match the original behavior.\n const lh = hex.charAt(0) === '#' ? 1 : 0\n return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid()\n}\n","/**\n * `CustomPicker` higher-order component: manages color state and injects the\n * normalized color (`hsl`/`hsv`/`rgb`/`hex`) plus an `onChange` handler into the\n * wrapped picker.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/ColorWrap.js | react-color's ColorWrap}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n *\n * @remarks\n * Kept as a class component for this round (function-component conversion is a\n * follow-up PR). `prop-types` and the unused `lodash` `debounce` of\n * `onChangeComplete` have been removed.\n */\nimport {PureComponent} from 'react'\nimport type {ComponentType, ReactElement} from 'react'\n\nimport {simpleCheckForValidColor, toState} from './helpers/color'\nimport type {Color, ColorState, CustomPickerInjectedProps, CustomPickerProps} from './types'\n\ntype Diff<T, U> = Pick<T, Exclude<keyof T, keyof U>>\n\nconst DEFAULT_COLOR: Color = {h: 250, s: 0.5, l: 0.2, a: 1}\n\nexport function CustomPicker<A extends object>(\n Picker: ComponentType<A & CustomPickerInjectedProps>,\n): ComponentType<Diff<A, CustomPickerProps> & CustomPickerProps> {\n type OuterProps = Diff<A, CustomPickerProps> & CustomPickerProps\n\n class ColorPicker extends PureComponent<OuterProps, ColorState> {\n static getDerivedStateFromProps(nextProps: CustomPickerProps, state: ColorState): ColorState {\n return {...toState(nextProps.color ?? DEFAULT_COLOR, state.oldHue)}\n }\n\n constructor(props: OuterProps) {\n super(props)\n this.state = {...toState(props.color ?? DEFAULT_COLOR, 0)}\n }\n\n private readonly handleChange = (data: Color): void => {\n if (!simpleCheckForValidColor(data)) {\n return\n }\n const incomingHue = typeof data === 'string' ? undefined : 'h' in data ? data.h : undefined\n const colors = toState(data, incomingHue || this.state.oldHue)\n this.setState(colors)\n this.props.onChange?.(colors)\n }\n\n override render(): ReactElement {\n const injected: CustomPickerInjectedProps = {\n hsl: this.state.hsl,\n hsv: this.state.hsv,\n rgb: this.state.rgb,\n hex: this.state.hex,\n oldHue: this.state.oldHue,\n source: this.state.source,\n onChange: this.handleChange,\n }\n // The merged props satisfy the wrapped picker's contract at runtime, but the\n // generic `Diff` plumbing can't be expressed to the type-checker.\n // oxlint-disable-next-line no-unsafe-type-assertion\n const pickerProps = {...this.props, ...injected} as A & CustomPickerInjectedProps\n return <Picker {...pickerProps} />\n }\n }\n\n return ColorPicker\n}\n","/**\n * Labeled text input with arrow-key stepping and drag-to-change support.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/EditableInput.js | react-color's EditableInput}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n *\n * @remarks\n * Kept as a class component for this round; converting to a function component\n * (with `useId`, `useRef`, etc.) is deferred to a follow-up PR. `reactcss` and\n * `prop-types` have been removed, and deprecated `keyCode` checks replaced with\n * `event.key`.\n */\nimport {Component} from 'react'\nimport type {\n ChangeEvent,\n CSSProperties,\n KeyboardEvent as ReactKeyboardEvent,\n ReactElement,\n} from 'react'\n\nimport type {EditableInputStyles} from './types'\n\nconst DEFAULT_ARROW_OFFSET = 1\n\nconst getNumberValue = (value: string | number): number => Number(String(value).replace(/%/g, ''))\n\nlet idCounter = 1\n\ntype EditableInputEvent =\n | ChangeEvent<HTMLInputElement>\n | ReactKeyboardEvent<HTMLInputElement>\n | MouseEvent\n\nexport interface EditableInputProps {\n label: string\n value?: string | number | undefined\n style?: EditableInputStyles | undefined\n arrowOffset?: number | undefined\n placeholder?: string | undefined\n hideLabel?: boolean | undefined\n dragLabel?: boolean | undefined\n dragMax?: number | undefined\n onChange?: ((value: Record<string, string>, event: EditableInputEvent) => void) | undefined\n}\n\ninterface EditableInputState {\n value: string\n blurValue: string\n}\n\nexport class EditableInput extends Component<EditableInputProps, EditableInputState> {\n private readonly inputId: string\n private input: HTMLInputElement | null = null\n\n constructor(props: EditableInputProps) {\n super(props)\n const initialValue = String(props.value ?? '').toUpperCase()\n this.state = {value: initialValue, blurValue: initialValue}\n this.inputId = `rc-editable-input-${idCounter++}`\n }\n\n override componentDidUpdate(prevProps: EditableInputProps, prevState: EditableInputState): void {\n if (\n this.props.value !== this.state.value &&\n (prevProps.value !== this.props.value || prevState.value !== this.state.value)\n ) {\n const nextValue = String(this.props.value ?? '').toUpperCase()\n const isFocused = this.input === document.activeElement\n // Sync the controlled value into local state, but only when the input is\n // not focused so we don't clobber what the user is typing. This needs a\n // post-update `activeElement` check that `getDerivedStateFromProps` can't do.\n // oxlint-disable-next-line react/no-did-update-set-state\n this.setState(\n isFocused\n ? {blurValue: nextValue}\n : {value: nextValue, blurValue: this.state.blurValue ? '' : nextValue},\n )\n }\n }\n\n override componentWillUnmount(): void {\n this.unbindEventListeners()\n }\n\n private readonly setInputRef = (input: HTMLInputElement | null): void => {\n this.input = input\n }\n\n private readonly getValueObjectWithLabel = (value: string | number): Record<string, string> => {\n return {[this.props.label]: String(value)}\n }\n\n private readonly getArrowOffset = (): number => this.props.arrowOffset ?? DEFAULT_ARROW_OFFSET\n\n private readonly setUpdatedValue = (value: string | number, event: EditableInputEvent): void => {\n this.props.onChange?.(this.getValueObjectWithLabel(value), event)\n this.setState({value: String(value)})\n }\n\n private readonly handleBlur = (): void => {\n if (this.state.blurValue) {\n this.setState({value: this.state.blurValue, blurValue: ''})\n }\n }\n\n private readonly handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n this.setUpdatedValue(event.target.value, event)\n }\n\n private readonly handleKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>): void => {\n // If `event.target.value` is a percentage, drop the `%` before stepping.\n // https://github.com/casesandberg/react-color/issues/383\n const value = getNumberValue(event.currentTarget.value)\n const isUp = event.key === 'ArrowUp'\n const isDown = event.key === 'ArrowDown'\n if (!Number.isNaN(value) && (isUp || isDown)) {\n const offset = this.getArrowOffset()\n const updatedValue = isUp ? value + offset : value - offset\n this.setUpdatedValue(updatedValue, event)\n }\n }\n\n private readonly handleDrag = (event: MouseEvent): void => {\n if (!this.props.dragLabel) {\n return\n }\n const {dragMax, value} = this.props\n const numericValue = typeof value === 'number' ? value : Number(value)\n const newValue = Math.round(numericValue + event.movementX)\n if (dragMax !== undefined && newValue >= 0 && newValue <= dragMax) {\n this.props.onChange?.(this.getValueObjectWithLabel(newValue), event)\n }\n }\n\n private readonly handleMouseDown = (event: React.MouseEvent<HTMLLabelElement>): void => {\n if (!this.props.dragLabel) {\n return\n }\n event.preventDefault()\n this.handleDrag(event.nativeEvent)\n window.addEventListener('mousemove', this.handleDrag)\n window.addEventListener('mouseup', this.handleMouseUp)\n }\n\n private readonly handleMouseUp = (): void => {\n this.unbindEventListeners()\n }\n\n private readonly unbindEventListeners = (): void => {\n window.removeEventListener('mousemove', this.handleDrag)\n window.removeEventListener('mouseup', this.handleMouseUp)\n }\n\n override render(): ReactElement {\n const style = this.props.style ?? {}\n const wrapStyle: CSSProperties = {position: 'relative', ...style.wrap}\n const inputStyle: CSSProperties = {...style.input}\n const labelStyle: CSSProperties = {\n ...style.label,\n ...(this.props.dragLabel ? {cursor: 'ew-resize'} : null),\n }\n\n return (\n <div style={wrapStyle}>\n <input\n id={this.inputId}\n style={inputStyle}\n ref={this.setInputRef}\n value={this.state.value}\n onKeyDown={this.handleKeyDown}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n placeholder={this.props.placeholder}\n spellCheck=\"false\"\n />\n {this.props.label && !this.props.hideLabel ? (\n // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the label is a drag affordance using pointer coordinates; the input also supports arrow-key stepping\n <label htmlFor={this.inputId} style={labelStyle} onMouseDown={this.handleMouseDown}>\n {this.props.label}\n </label>\n ) : null}\n </div>\n )\n }\n}\n","/**\n * Translates a pointer event over the hue track into a new hue value.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/hue.js | react-color's hue helper}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n */\nimport type {HSLColor, HueColorResult, PickerEvent} from '../types'\n\nexport function calculateChange(\n e: PickerEvent,\n direction: 'horizontal' | 'vertical' | undefined,\n hsl: HSLColor,\n container: HTMLElement,\n): HueColorResult | null {\n const containerWidth = container.clientWidth\n const containerHeight = container.clientHeight\n const x = 'touches' in e ? (e.touches[0]?.pageX ?? 0) : e.pageX\n const y = 'touches' in e ? (e.touches[0]?.pageY ?? 0) : e.pageY\n const left = x - (container.getBoundingClientRect().left + window.scrollX)\n const top = y - (container.getBoundingClientRect().top + window.scrollY)\n\n if (direction === 'vertical') {\n let h: number\n if (top < 0) {\n h = 359\n } else if (top > containerHeight) {\n h = 0\n } else {\n const percent = -((top * 100) / containerHeight) + 100\n h = (360 * percent) / 100\n }\n\n if (hsl.h !== h) {\n return {h, s: hsl.s, l: hsl.l, a: hsl.a ?? 1, source: 'hsl'}\n }\n return null\n }\n\n let h: number\n if (left < 0) {\n h = 0\n } else if (left > containerWidth) {\n h = 359\n } else {\n const percent = (left * 100) / containerWidth\n h = (360 * percent) / 100\n }\n\n if (hsl.h !== h) {\n return {h, s: hsl.s, l: hsl.l, a: hsl.a ?? 1, source: 'hsl'}\n }\n return null\n}\n","/**\n * Hue slider.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Hue.js | react-color's Hue}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n *\n * @remarks\n * Kept as a class component for this round (function-component conversion is a\n * follow-up PR). The upstream raw `<style>` tag holding the static hue gradient\n * has been replaced with a `styled-components` element, and `reactcss` removed.\n */\nimport {Component} from 'react'\nimport type {CSSProperties, ReactElement} from 'react'\nimport {styled} from 'styled-components'\n\nimport * as hue from './helpers/hue'\nimport type {ColorChangeHandler, HSLColor, HueColorResult, PickerEvent} from './types'\n\nconst HueGradient = styled.div<{$direction: 'horizontal' | 'vertical'}>`\n background: ${({$direction}) =>\n $direction === 'vertical'\n ? 'linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'\n : 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'};\n`\n\nexport interface HueProps {\n hsl: HSLColor\n direction?: 'horizontal' | 'vertical' | undefined\n radius?: string | undefined\n shadow?: string | undefined\n onChange?: ColorChangeHandler<HueColorResult> | undefined\n}\n\nexport class Hue extends Component<HueProps> {\n private container: HTMLDivElement | null = null\n\n override componentWillUnmount(): void {\n this.unbindEventListeners()\n }\n\n private readonly setContainerRef = (node: HTMLDivElement | null): void => {\n this.container = node\n }\n\n private readonly handleChange = (event: PickerEvent): void => {\n if (!this.container) {\n return\n }\n const change = hue.calculateChange(event, this.props.direction, this.props.hsl, this.container)\n if (change && typeof this.props.onChange === 'function') {\n this.props.onChange(change)\n }\n }\n\n private readonly handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n this.handleChange(event.nativeEvent)\n window.addEventListener('mousemove', this.handleChange)\n window.addEventListener('mouseup', this.handleMouseUp)\n }\n\n private readonly handleMouseUp = (): void => {\n this.unbindEventListeners()\n }\n\n private readonly unbindEventListeners = (): void => {\n window.removeEventListener('mousemove', this.handleChange)\n window.removeEventListener('mouseup', this.handleMouseUp)\n }\n\n override render(): ReactElement {\n const {hsl, direction = 'horizontal', radius, shadow} = this.props\n const pointerStyle: CSSProperties =\n direction === 'vertical'\n ? {position: 'absolute', left: '0px', top: `${-((hsl.h * 100) / 360) + 100}%`}\n : {position: 'absolute', left: `${(hsl.h * 100) / 360}%`}\n\n return (\n <div style={{position: 'absolute', inset: 0, borderRadius: radius, boxShadow: shadow}}>\n <HueGradient\n $direction={direction}\n style={{padding: '0 2px', position: 'relative', height: '100%', borderRadius: radius}}\n ref={this.setContainerRef}\n onMouseDown={this.handleMouseDown}\n onTouchMove={this.handleChange}\n onTouchStart={this.handleChange}\n >\n <div style={pointerStyle}>\n <div\n style={{\n marginTop: '1px',\n width: '4px',\n borderRadius: '1px',\n height: '8px',\n boxShadow: '0 0 2px rgba(0, 0, 0, .6)',\n background: '#fff',\n transform: 'translateX(-2px)',\n }}\n />\n </div>\n </HueGradient>\n </div>\n )\n }\n}\n","/**\n * Translates a pointer event over the saturation/value box into a new color.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/saturation.js | react-color's saturation helper}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n */\nimport type {HSLColor, PickerEvent, SaturationColorResult} from '../types'\n\nexport function calculateChange(\n e: PickerEvent,\n hsl: HSLColor,\n container: HTMLElement,\n): SaturationColorResult {\n const {width: containerWidth, height: containerHeight} = container.getBoundingClientRect()\n const x = 'touches' in e ? (e.touches[0]?.pageX ?? 0) : e.pageX\n const y = 'touches' in e ? (e.touches[0]?.pageY ?? 0) : e.pageY\n let left = x - (container.getBoundingClientRect().left + window.scrollX)\n let top = y - (container.getBoundingClientRect().top + window.scrollY)\n\n if (left < 0) {\n left = 0\n } else if (left > containerWidth) {\n left = containerWidth\n }\n\n if (top < 0) {\n top = 0\n } else if (top > containerHeight) {\n top = containerHeight\n }\n\n const saturation = left / containerWidth\n const bright = 1 - top / containerHeight\n\n return {h: hsl.h, s: saturation, v: bright, a: hsl.a ?? 1, source: 'hsv'}\n}\n","/**\n * Saturation / value box.\n *\n * Forked from\n * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Saturation.js | react-color's Saturation}\n * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.\n *\n * @remarks\n * Kept as a class component for this round (function-component conversion is a\n * follow-up PR). The upstream raw `<style>` tag holding the static white/black\n * gradients has been replaced with `styled-components` elements, `reactcss`\n * removed, and `lodash` swapped for `lodash-es`.\n */\nimport throttle from 'lodash-es/throttle'\nimport {Component} from 'react'\nimport type {CSSProperties, ReactElement} from 'react'\nimport {styled} from 'styled-components'\n\nimport * as saturation from './helpers/saturation'\nimport type {\n ColorChangeHandler,\n HSLColor,\n HSVColor,\n PickerEvent,\n SaturationColorResult,\n} from './types'\n\ntype ThrottledChange = ReturnType<\n typeof throttle<\n (handler: ColorChangeHandler<SaturationColorResult>, data: SaturationColorResult) => void\n >\n>\n\nconst SaturationWhite = styled.div`\n background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\n`\n\nconst SaturationBlack = styled.div`\n background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));\n`\n\nexport interface SaturationProps {\n hsl: HSLColor\n hsv: HSVColor\n radius?: string | undefined\n shadow?: string | undefined\n onChange?: ColorChangeHandler<SaturationColorResult> | undefined\n}\n\nexport class Saturation extends Component<SaturationProps> {\n private container: HTMLDivElement | null = null\n\n private readonly throttle: ThrottledChange = throttle(\n (handler: ColorChangeHandler<SaturationColorResult>, data: SaturationColorResult): void => {\n handler(data)\n },\n 50,\n )\n\n override componentWillUnmount(): void {\n this.throttle.cancel()\n this.unbindEventListeners()\n }\n\n private readonly setContainerRef = (node: HTMLDivElement | null): void => {\n this.container = node\n }\n\n private getContainerRenderWindow(): Window {\n const {container} = this\n let renderWindow: Window = window\n while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {\n renderWindow = renderWindow.parent\n }\n return renderWindow\n }\n\n private readonly handleChange = (event: PickerEvent): void => {\n if (!this.container || typeof this.props.onChange !== 'function') {\n return\n }\n this.throttle(\n this.props.onChange,\n saturation.calculateChange(event, this.props.hsl, this.container),\n )\n }\n\n private readonly handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n this.handleChange(event.nativeEvent)\n const renderWindow = this.getContainerRenderWindow()\n renderWindow.addEventListener('mousemove', this.handleChange)\n renderWindow.addEventListener('mouseup', this.handleMouseUp)\n }\n\n private readonly handleMouseUp = (): void => {\n this.unbindEventListeners()\n }\n\n private readonly unbindEventListeners = (): void => {\n const renderWindow = this.getContainerRenderWindow()\n renderWindow.removeEventListener('mousemove', this.handleChange)\n renderWindow.removeEventListener('mouseup', this.handleMouseUp)\n }\n\n override render(): ReactElement {\n const {hsl, hsv, radius, shadow} = this.props\n const pointerStyle: CSSProperties = {\n position: 'absolute',\n top: `${-(hsv.v * 100) + 100}%`,\n left: `${hsv.s * 100}%`,\n cursor: 'default',\n }\n\n return (\n // oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- the picker surface is dragged via pointer coordinates, which have no keyboard equivalent\n <div\n style={{\n position: 'absolute',\n inset: 0,\n background: `hsl(${hsl.h},100%, 50%)`,\n borderRadius: radius,\n }}\n ref={this.setContainerRef}\n onMouseDown={this.handleMouseDown}\n onTouchMove={this.handleChange}\n onTouchStart={this.handleChange}\n >\n <SaturationWhite style={{position: 'absolute', inset: 0, borderRadius: radius}}>\n <SaturationBlack\n style={{position: 'absolute', inset: 0, boxShadow: shadow, borderRadius: radius}}\n />\n <div style={pointerStyle}>\n <div\n style={{\n width: '4px',\n height: '4px',\n boxShadow:\n '0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)',\n borderRadius: '50%',\n cursor: 'pointer',\n transform: 'translate(-2px, -2px)',\n }}\n />\n </div>\n </SaturationWhite>\n </div>\n )\n }\n}\n","import {Box, Flex, useTheme} from '@sanity/ui'\nimport {useCallback, useMemo} from 'react'\n\nimport {\n type Color,\n type ColorChangeHandler,\n EditableInput,\n type EditableInputStyles,\n type HSLColor,\n isValidHex,\n type RGBColor,\n} from './react-color'\n\ninterface ColorPickerFieldsProps {\n rgb?: RGBColor\n hsl?: HSLColor\n hex?: string\n disableAlpha: boolean\n onChange: ColorChangeHandler<Color>\n}\n\nexport const ColorPickerFields = ({\n onChange,\n rgb,\n hsl,\n hex,\n disableAlpha,\n}: ColorPickerFieldsProps): React.JSX.Element => {\n const {sanity} = useTheme()\n\n const inputStyles: EditableInputStyles = useMemo(\n () => ({\n input: {\n width: '80%',\n padding: '4px 10% 3px',\n border: 'none',\n // TODO: when upgrading to @sanity/ui@4 start using the new tokens\n // oxlint-disable-next-line typescript/no-deprecated\n boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,\n // oxlint-disable-next-line typescript/no-deprecated\n color: sanity.color.input.default.enabled.fg,\n // oxlint-disable-next-line typescript/no-deprecated\n backgroundColor: sanity.color.input.default.enabled.bg,\n // oxlint-disable-next-line typescript/no-deprecated\n fontSize: sanity.fonts.text.sizes[0]?.fontSize,\n textAlign: 'center',\n },\n label: {\n display: 'block',\n textAlign: 'center',\n // oxlint-disable-next-line typescript/no-deprecated\n fontSize: sanity.fonts.label.sizes[0]?.fontSize,\n // oxlint-disable-next-line typescript/no-deprecated\n color: sanity.color.base.fg,\n paddingTop: '3px',\n paddingBottom: '4px',\n textTransform: 'capitalize',\n },\n }),\n [sanity],\n )\n\n const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(\n (data) => {\n if ('hex' in data && data['hex'] && isValidHex(data['hex'])) {\n onChange({\n hex: data['hex'],\n source: 'hex',\n })\n } else if (\n rgb &&\n (('r' in data && data['r']) || ('g' in data && data['g']) || ('b' in data && data['b']))\n ) {\n onChange({\n r: Number(data['r']) || rgb.r,\n g: Number(data['g']) || rgb.g,\n b: Number(data['b']) || rgb.b,\n a: rgb.a,\n source: 'rgb',\n })\n } else if (hsl && 'a' in data && data['a']) {\n let alpha = Number(data['a'])\n if (alpha < 0) {\n alpha = 0\n } else if (alpha > 100) {\n alpha = 100\n }\n alpha /= 100\n\n onChange({\n h: hsl.h,\n s: hsl.s,\n l: hsl.l,\n a: alpha,\n source: 'hsl',\n })\n }\n },\n [onChange, hsl, rgb],\n )\n\n return (\n <Flex>\n <Box flex={2} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"hex\"\n value={hex?.replace('#', '')}\n onChange={handleChange}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"r\"\n value={rgb?.r}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"g\"\n value={rgb?.g}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n <Box flex={1} marginRight={1}>\n <EditableInput\n style={inputStyles}\n label=\"b\"\n value={rgb?.b}\n onChange={handleChange}\n dragLabel\n dragMax={255}\n />\n </Box>\n {!disableAlpha && (\n <Box flex={1}>\n <EditableInput\n style={inputStyles}\n label=\"a\"\n value={Math.round((rgb?.a ?? 1) * 100)}\n onChange={handleChange}\n dragLabel\n dragMax={100}\n />\n </Box>\n )}\n </Flex>\n )\n}\n","import {AddIcon, TrashIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'\nimport {startTransition, useOptimistic, useRef} from 'react'\nimport {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'\nimport {styled} from 'styled-components'\n\nimport {ColorList} from './ColorList'\nimport {ColorPickerFields} from './ColorPickerFields'\nimport {\n Alpha,\n Checkboard,\n type Color,\n CustomPicker,\n type CustomPickerInjectedProps,\n Hue,\n Saturation,\n} from './react-color'\nimport type {ColorSchemaType, ColorValue} from './types'\n\nconst ColorBox = styled(Box)`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n`\n\nconst ReadOnlyContainer = styled(Flex)`\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n`\n\ninterface ColorPickerProps extends CustomPickerInjectedProps<Color> {\n width?: string\n disableAlpha: boolean\n colorList?: Array<Color> | undefined\n readOnly?: boolean\n onUnset: () => void\n color: ColorValue\n}\n\nconst ColorPickerInner = (props: ColorPickerProps) => {\n const {\n width,\n color: {rgb, hex, hsv, hsl},\n onChange,\n onUnset,\n disableAlpha,\n colorList,\n readOnly,\n } = props\n\n if (!hsl || !hsv) {\n return null\n }\n\n return (\n <div style={{width}}>\n <Card padding={1} border radius={1}>\n <Stack gap={2}>\n {!readOnly && (\n <>\n <Card overflow=\"hidden\" style={{position: 'relative', height: '5em'}}>\n <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />\n </Card>\n\n <Card\n shadow={1}\n radius={3}\n overflow=\"hidden\"\n style={{position: 'relative', height: '10px'}}\n >\n <Hue hsl={hsl} onChange={!readOnly && onChange} />\n </Card>\n\n {!disableAlpha && (\n <Card\n shadow={1}\n radius={3}\n overflow=\"hidden\"\n style={{position: 'relative', height: '10px', background: '#fff'}}\n >\n <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />\n </Card>\n )}\n </>\n )}\n <Flex>\n <Card\n flex={1}\n radius={2}\n overflow=\"hidden\"\n style={{position: 'relative', minWidth: '4em', background: '#fff'}}\n >\n <Checkboard size={8} white=\"transparent\" grey=\"rgba(0,0,0,.08)\" />\n <ColorBox\n style={{\n backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,\n }}\n />\n\n {readOnly && (\n <ReadOnlyContainer\n padding={2}\n paddingBottom={1}\n sizing=\"border\"\n justify=\"space-between\"\n >\n <Stack gap={3} marginTop={1}>\n <Text size={3} weight=\"bold\">\n {hex}\n </Text>\n\n <Inline gap={3}>\n <Text size={1}>\n <strong>RGB: </strong>\n {rgb?.r} {rgb?.g} {rgb?.b}\n </Text>\n <Text size={1}>\n <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}\n {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%\n </Text>\n </Inline>\n </Stack>\n </ReadOnlyContainer>\n )}\n </Card>\n\n {!readOnly && (\n <Flex align=\"flex-start\" marginLeft={2}>\n <Box style={{width: 200}}>\n <ColorPickerFields\n rgb={rgb}\n hsl={hsl}\n hex={hex}\n onChange={onChange}\n disableAlpha={disableAlpha}\n />\n </Box>\n <Box marginLeft={2}>\n <Button onClick={onUnset} title=\"Delete color\" icon={TrashIcon} tone=\"critical\" />\n </Box>\n </Flex>\n )}\n </Flex>\n {colorList && <ColorList colors={colorList} onChange={onChange} />}\n </Stack>\n </Card>\n </div>\n )\n}\n\nconst ColorPicker = CustomPicker(ColorPickerInner)\n\nconst DEFAULT_COLOR: ColorValue & {source: string} = {\n hex: '#24a3e3',\n hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},\n hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},\n rgb: {r: 46, g: 163, b: 227, a: 1},\n source: 'hex',\n}\n\nexport default function ColorInput(props: ObjectInputProps): React.JSX.Element {\n const {onChange, readOnly} = props\n // oxlint-disable-next-line no-unsafe-type-assertion\n const _value = props.value as ColorValue | undefined\n const [value, setColorOptimistic] = useOptimistic(_value)\n const type = props.schemaType as ColorSchemaType\n const focusRef = useRef<HTMLButtonElement>(null)\n\n function handleChange(nextColor: ColorValue) {\n const fieldPatches = type.fields\n .filter((field) => field.name in nextColor)\n .map((field) => {\n // oxlint-disable-next-line no-unsafe-type-assertion\n const nextFieldValue = nextColor[field.name as keyof ColorValue]\n const isObject = field.type.jsonType === 'object'\n return set(\n isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n [field.name],\n )\n })\n\n onChange([\n setIfMissing({_type: type.name}),\n set(type.name, ['_type']),\n set(nextColor.rgb?.a, ['alpha']),\n ...fieldPatches,\n ])\n }\n\n return (\n <>\n {value && value.hex ? (\n <ColorPicker\n color={value}\n onChange={(nextColor) =>\n startTransition(() => {\n setColorOptimistic(nextColor)\n handleChange(nextColor)\n })\n }\n readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n disableAlpha={!!type.options?.disableAlpha}\n colorList={type.options?.colorList}\n onUnset={() =>\n startTransition(() => {\n setColorOptimistic(undefined)\n onChange(unset())\n })\n }\n />\n ) : (\n <Button\n icon={AddIcon}\n mode=\"ghost\"\n text=\"Create color\"\n ref={focusRef}\n disabled={Boolean(readOnly)}\n onClick={() =>\n startTransition(() => {\n setColorOptimistic(DEFAULT_COLOR)\n handleChange(DEFAULT_COLOR)\n })\n }\n />\n )}\n </>\n )\n}\n"],"names":["ColorListWrap","styled","Flex","withConfig","displayName","componentId","ColorBoxContainer","div","ColorBox","validateColors","colors","seen","Set","reduce","cls","c","color","hex","tinycolor","isValid","backgroundColor","toRgbString","key","JSON","stringify","has","add","push","ColorList","t0","$","_c","onChange","t1","t2","t3","background","map","checkboardCache","render","c1","c2","size","serverCanvas","document","canvas","createElement","width","height","ctx","getContext","fillStyle","fillRect","translate","toDataURL","get","cached","checkboard","EMPTY_RENDERERS","Checkboard","white","grey","renderers","t4","borderRadius","boxShadow","undefined","t5","t6","t7","position","inset","calculateChange","e","hsl","direction","initialA","container","containerWidth","clientWidth","containerHeight","clientHeight","x","touches","pageX","y","pageY","left","getBoundingClientRect","window","scrollX","top","scrollY","a","Math","round","h","s","l","source","Alpha","Component","componentWillUnmount","unbindEventListeners","setContainerRef","node","handleChange","event","change","alpha","props","handleMouseDown","nativeEvent","addEventListener","handleMouseUp","removeEventListener","rgb","radius","shadow","alphaValue","gradient","r","g","b","pointerStyle","overflow","margin","marginTop","transform","VALIDATION_KEYS","PERCENT_PATTERN","simpleCheckForValidColor","data","checked","passed","value","Object","entries","Number","isNaN","test","String","toState","oldHue","instance","toHsl","hsv","toHsv","toRgb","toHex","transparent","incomingHue","isValidHex","lh","charAt","length","DEFAULT_COLOR","CustomPicker","Picker","ColorPicker","PureComponent","getDerivedStateFromProps","nextProps","state","constructor","setState","injected","pickerProps","DEFAULT_ARROW_OFFSET","getNumberValue","replace","idCounter","EditableInput","input","initialValue","toUpperCase","blurValue","inputId","componentDidUpdate","prevProps","prevState","nextValue","isFocused","activeElement","setInputRef","getValueObjectWithLabel","label","getArrowOffset","arrowOffset","setUpdatedValue","handleBlur","target","handleKeyDown","currentTarget","isUp","isDown","offset","updatedValue","handleDrag","dragLabel","dragMax","numericValue","newValue","movementX","preventDefault","style","wrapStyle","wrap","inputStyle","labelStyle","cursor","placeholder","hideLabel","HueGradient","$direction","Hue","hue","padding","saturation","bright","v","SaturationWhite","SaturationBlack","Saturation","throttle","handler","cancel","getContainerRenderWindow","renderWindow","contains","parent","ColorPickerFields","disableAlpha","sanity","useTheme","default","enabled","border","fonts","text","sizes","fontSize","bg","fg","textAlign","base","display","paddingTop","paddingBottom","textTransform","inputStyles","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","Box","ReadOnlyContainer","ColorPickerInner","onUnset","colorList","readOnly","for","minWidth","TrashIcon","ColorInput","_value","setColorOptimistic","useOptimistic","type","schemaType","focusRef","useRef","nextColor","fieldPatches","fields","filter","field","name","field_0","nextFieldValue","isObject","jsonType","set","assign","_type","setIfMissing","nextColor_0","startTransition","options","unset","AddIcon","Boolean"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,30 @@
|
|
|
1
|
-
import * as _$sanity from "sanity";
|
|
2
1
|
import { ObjectDefinition, ObjectInputProps, ObjectOptions, ObjectSchemaType } from "sanity";
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
interface HEXColor {
|
|
3
|
+
hex: string;
|
|
4
|
+
source?: string | undefined;
|
|
5
|
+
}
|
|
6
|
+
interface HSLColor {
|
|
7
|
+
a?: number | undefined;
|
|
8
|
+
h: number;
|
|
9
|
+
l: number;
|
|
10
|
+
s: number;
|
|
11
|
+
source?: string | undefined;
|
|
12
|
+
}
|
|
13
|
+
interface RGBColor {
|
|
14
|
+
a?: number | undefined;
|
|
15
|
+
b: number;
|
|
16
|
+
g: number;
|
|
17
|
+
r: number;
|
|
18
|
+
source?: string | undefined;
|
|
19
|
+
}
|
|
20
|
+
interface HSVColor {
|
|
21
|
+
a?: number | undefined;
|
|
22
|
+
h: number;
|
|
23
|
+
s: number;
|
|
24
|
+
v: number;
|
|
25
|
+
source?: string | undefined;
|
|
26
|
+
}
|
|
27
|
+
type Color = string | HEXColor | HSLColor | RGBColor | HSVColor;
|
|
5
28
|
interface ColorValue {
|
|
6
29
|
hex: string;
|
|
7
30
|
hsl: HSLColor;
|
|
@@ -33,7 +56,7 @@ declare const color: {
|
|
|
33
56
|
type: "object";
|
|
34
57
|
name: "color";
|
|
35
58
|
} & Omit<ObjectDefinition, "preview"> & {
|
|
36
|
-
preview?:
|
|
59
|
+
preview?: import("sanity").PreviewConfig<{
|
|
37
60
|
title: string;
|
|
38
61
|
alpha: string;
|
|
39
62
|
hex: string;
|
|
@@ -43,23 +66,23 @@ declare const color: {
|
|
|
43
66
|
declare const hslaColor: {
|
|
44
67
|
type: "object";
|
|
45
68
|
name: "hslaColor";
|
|
46
|
-
} & Omit<
|
|
47
|
-
preview?:
|
|
69
|
+
} & Omit<import("sanity").ObjectDefinition, "preview"> & {
|
|
70
|
+
preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
|
|
48
71
|
};
|
|
49
72
|
declare const hsvaColor: {
|
|
50
73
|
type: "object";
|
|
51
74
|
name: "hsvaColor";
|
|
52
|
-
} & Omit<
|
|
53
|
-
preview?:
|
|
75
|
+
} & Omit<import("sanity").ObjectDefinition, "preview"> & {
|
|
76
|
+
preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
|
|
54
77
|
};
|
|
55
78
|
declare const rgbaColor: {
|
|
56
79
|
type: "object";
|
|
57
80
|
name: "rgbaColor";
|
|
58
|
-
} & Omit<
|
|
59
|
-
preview?:
|
|
81
|
+
} & Omit<import("sanity").ObjectDefinition, "preview"> & {
|
|
82
|
+
preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
|
|
60
83
|
};
|
|
61
84
|
declare function ColorInput$1(props: ObjectInputProps): React.JSX.Element;
|
|
62
|
-
declare const ColorInput:
|
|
63
|
-
declare const colorInput:
|
|
85
|
+
declare const ColorInput: import("react").LazyExoticComponent<typeof ColorInput$1>;
|
|
86
|
+
declare const colorInput: import("sanity").Plugin<void>;
|
|
64
87
|
export { type ColorDefinition, ColorInput, type ColorInputProps, type ColorOptions, type ColorSchemaType, type ColorValue, color, colorInput, hslaColor, hsvaColor, rgbaColor };
|
|
65
88
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/ColorInput.tsx","../src/LazyColorInput.tsx","../src/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/react-color/types.ts","../src/types.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/ColorInput.tsx","../src/LazyColorInput.tsx","../src/index.ts"],"mappings":";UAeiB,QAAA;EACf,GAAA;EACA,MAAM;AAAA;AAAA,UAGS,QAAA;EACf,CAAA;EACA,CAAA;EACA,CAAA;EACA,CAAA;EACA,MAAA;AAAA;AAAA,UAGe,QAAA;EACf,CAAA;EACA,CAAA;EACA,CAAA;EACA,CAAA;EACA,MAAA;AAAA;AAAA,UAGe,QAAA;EACf,CAAA;EACA,CAAA;EACA,CAAA;EACA,CAAA;EACA,MAAA;AAAA;AAAA,KAGU,KAAA,YAAiB,QAAA,GAAW,QAAA,GAAW,QAAA,GAAW,QAAA;AAAA,UCxC7C,UAAA;EACf,GAAA;EACA,GAAA,EAAK,QAAA;EACL,GAAA,EAAK,QAAA;EACL,GAAA,EAAK,QAAA;AAAA;AAAA,UAGU,YAAA,SAAqB,IAAA,CAAK,aAAA;EACzC,YAAA;EACA,SAAA,GAAY,KAAA,CAAM,KAAA;AAAA;AAAA,KAGR,eAAA,GAAkB,IAAA,CAAK,gBAAA;EACjC,OAAA,GAAU,YAAA;AAAA;AAAA,KAEA,eAAA,GAAkB,gBAAA,CAAiB,UAAA,EAAY,eAAA;AAAA,cCZrD,aAAA;;;;UAKW,eAAA,SAAwB,IAAA,CAAK,gBAAA;EAC5C,IAAA,SAAa,aAAA;EACb,OAAA,GAAU,YAAA;AAAA;AAAA;EAAA,UAKO,oBAAA;IACf,KAAA,EAAO,eAAe;EAAA;AAAA;AAAA,cAIb,KAAA;;;;;;;;;;;cCtBA,SAAA;;;;;;cCAA,SAAA;;;;;;cCAA,SAAA;;;;;;iBCkKW,YAAA,CAAW,KAAA,EAAO,gBAAA,GAAmB,KAAA,CAAM,GAAA,CAAI,OAAO;AAAA,cClKjE,UAAA,kBAAU,mBAAA,QAAqC,YAArC;AAAA,cCKV,UAAA,mBAAU,MAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sanity/color-input",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.8",
|
|
4
4
|
"description": "Color input",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cms",
|
|
@@ -34,22 +34,22 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@sanity/icons": "^3.7.4",
|
|
36
36
|
"@sanity/ui": "^3.2.0",
|
|
37
|
-
"
|
|
37
|
+
"lodash-es": "^4.18.1",
|
|
38
38
|
"tinycolor2": "^1.6.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@sanity/pkg-utils": "^10.5.
|
|
42
|
-
"@types/
|
|
43
|
-
"@types/
|
|
44
|
-
"@types/react
|
|
41
|
+
"@sanity/pkg-utils": "^10.5.8",
|
|
42
|
+
"@types/lodash-es": "^4.17.12",
|
|
43
|
+
"@types/node": "^24.13.2",
|
|
44
|
+
"@types/react": "^19.2.17",
|
|
45
45
|
"@types/tinycolor2": "^1.4.6",
|
|
46
46
|
"babel-plugin-react-compiler": "^1.0.0",
|
|
47
|
-
"babel-plugin-styled-components": "^2.
|
|
48
|
-
"react": "^19.2.
|
|
49
|
-
"sanity": "^
|
|
50
|
-
"styled-components": "^6.4.
|
|
51
|
-
"@repo/
|
|
52
|
-
"@repo/
|
|
47
|
+
"babel-plugin-styled-components": "^2.3.0",
|
|
48
|
+
"react": "^19.2.7",
|
|
49
|
+
"sanity": "^6.1.0",
|
|
50
|
+
"styled-components": "^6.4.2",
|
|
51
|
+
"@repo/tsconfig": "0.0.0",
|
|
52
|
+
"@repo/package.config": "0.0.0"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"react": "^19.2",
|