@sanity/color-input
6.0.126.0.13
dist/ColorInput.js−
dist/ColorInput.jsDeleted−967
Index: package/dist/ColorInput.js
===================================================================
--- package/dist/ColorInput.js
+++ package/dist/ColorInput.js
@@ -1,967 +0,0 @@
-import { set, setIfMissing, unset } from "sanity";
-import { Component, PureComponent, startTransition, useOptimistic, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
-import { AddIcon } from "@sanity/icons/Add";
-import { TrashIcon } from "@sanity/icons/Trash";
-import { Box, Button, Card, Flex, Inline, Stack, Text, useTheme } from "@sanity/ui";
-import { styled } from "styled-components";
-import tinycolor from "tinycolor2";
-import throttle from "lodash-es/throttle.js";
-const ColorListWrap = styled(Flex).withConfig({
- displayName: "ColorListWrap",
- componentId: "sc-fcjsbz-0"
-})`gap:0.25em;`, ColorBoxContainer = styled.div.withConfig({
- displayName: "ColorBoxContainer",
- componentId: "sc-fcjsbz-1"
-})`width:2.1em;height:2.1em;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;`, ColorBox$1 = styled.div.withConfig({
- displayName: "ColorBox",
- componentId: "sc-fcjsbz-2"
-})`border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);content:'';position:absolute;inset:0;z-index:1;`, validateColors = (colors) => {
- let seen = /* @__PURE__ */ new Set();
- return colors.reduce((cls, c) => {
- let color = c.hex ? tinycolor(c.hex) : tinycolor(c);
- if (color.isValid()) {
- let backgroundColor = color.toRgbString(), key = JSON.stringify({
- color: c,
- backgroundColor
- });
- seen.has(key) || (seen.add(key), cls.push({
- key,
- color: c,
- backgroundColor
- }));
- }
- return cls;
- }, []);
-};
-function ColorList(t0) {
- let $ = c(7), { colors, onChange } = t0;
- if (!colors) return null;
- let t1;
- if ($[0] !== colors || $[1] !== onChange) {
- let t2;
- $[3] === onChange ? t2 = $[4] : (t2 = (t3) => {
- let { key, color, backgroundColor } = t3;
- return /* @__PURE__ */ jsx(ColorBoxContainer, {
- onClick: () => {
- onChange(color);
- },
- children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
- }, key);
- }, $[3] = onChange, $[4] = t2), t1 = validateColors(colors).map(t2), $[0] = colors, $[1] = onChange, $[2] = t1;
- } else t1 = $[2];
- let t2;
- return $[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ColorListWrap, {
- wrap: "wrap",
- children: t1
- }), $[5] = t1, $[6] = t2), t2;
-}
-/**
-* Renders a checkerboard pattern as a data URL, used as the transparency backdrop.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/checkboard.js | react-color's checkboard helper}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*/
-const checkboardCache = {};
-function render(c1, c2, size, serverCanvas) {
- if (typeof document > "u" && !serverCanvas) return null;
- let canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
- canvas.width = size * 2, canvas.height = size * 2;
- let ctx = canvas.getContext("2d");
- 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;
-}
-function get(c1, c2, size, serverCanvas) {
- let key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
- if (cached) return cached;
- let checkboard = render(c1, c2, size, serverCanvas);
- return checkboardCache[key] = checkboard, checkboard;
-}
-const EMPTY_RENDERERS = {};
-function Checkboard(t0) {
- let $ = c(9), { white: t1, grey: t2, size: t3, renderers: t4, borderRadius, boxShadow } = 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, t5;
- $[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];
- let background = t5, t6 = background ? `url(${background}) center left` : void 0, t7;
- return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
- borderRadius,
- boxShadow,
- position: "absolute",
- inset: 0,
- background: t6
- } }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
-}
-function calculateChange$2(e, hsl, direction, initialA, container) {
- let 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);
- if (direction === "vertical") {
- let a;
- return a = top < 0 ? 0 : top > containerHeight ? 1 : Math.round(top * 100 / containerHeight) / 100, hsl.a === a ? null : {
- h: hsl.h,
- s: hsl.s,
- l: hsl.l,
- a,
- source: "rgb"
- };
- }
- let a;
- return a = left < 0 ? 0 : left > containerWidth ? 1 : Math.round(left * 100 / containerWidth) / 100, initialA === a ? null : {
- h: hsl.h,
- s: hsl.s,
- l: hsl.l,
- a,
- source: "rgb"
- };
-}
-/**
-* Alpha (transparency) slider.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Alpha.js | react-color's Alpha}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*
-* @remarks
-* Kept as a class component for this round (function-component conversion is a
-* follow-up PR). `reactcss` has been removed in favor of plain inline styles,
-* and the unused custom `pointer` slot dropped.
-*/
-var Alpha = class extends Component {
- container = null;
- componentWillUnmount() {
- this.unbindEventListeners();
- }
- setContainerRef = (node) => {
- this.container = node;
- };
- handleChange = (event) => {
- if (!this.container) return;
- let change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
- change && typeof this.props.onChange == "function" && this.props.onChange(change);
- };
- handleMouseDown = (event) => {
- this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
- };
- handleMouseUp = () => {
- this.unbindEventListeners();
- };
- unbindEventListeners = () => {
- window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
- };
- render() {
- let { rgb, direction, radius, shadow, renderers } = 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" ? {
- position: "absolute",
- left: 0,
- top: `${alphaValue * 100}%`
- } : {
- position: "absolute",
- left: `${alphaValue * 100}%`
- };
- return /* @__PURE__ */ jsxs("div", {
- style: {
- position: "absolute",
- inset: 0,
- borderRadius: radius
- },
- children: [
- /* @__PURE__ */ jsx("div", {
- style: {
- position: "absolute",
- inset: 0,
- overflow: "hidden",
- borderRadius: radius
- },
- children: /* @__PURE__ */ jsx(Checkboard, { renderers })
- }),
- /* @__PURE__ */ jsx("div", { style: {
- position: "absolute",
- inset: 0,
- background: gradient,
- boxShadow: shadow,
- borderRadius: radius
- } }),
- /* @__PURE__ */ jsx("div", {
- style: {
- position: "relative",
- height: "100%",
- margin: "0 3px"
- },
- ref: this.setContainerRef,
- onMouseDown: this.handleMouseDown,
- onTouchMove: this.handleChange,
- onTouchStart: this.handleChange,
- children: /* @__PURE__ */ jsx("div", {
- style: pointerStyle,
- children: /* @__PURE__ */ jsx("div", { style: {
- width: "4px",
- borderRadius: "1px",
- height: "8px",
- boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
- background: "#fff",
- marginTop: "1px",
- transform: "translateX(-2px)"
- } })
- })
- })
- ]
- });
- }
-};
-/**
-* Color conversion and validation helpers built on `tinycolor2`.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/color.js | react-color's color helpers}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*/
-const VALIDATION_KEYS = /* @__PURE__ */ new Set([
- "r",
- "g",
- "b",
- "a",
- "h",
- "s",
- "l",
- "v"
-]), PERCENT_PATTERN = /^\d+%$/;
-function simpleCheckForValidColor(data) {
- if (typeof data == "string") return data;
- let checked = 0, passed = 0;
- for (let [key, value] of Object.entries(data)) !VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
- return checked === passed ? data : !1;
-}
-function toState(data, oldHue) {
- let 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();
- hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
- let 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;
- return {
- hsl,
- hex: transparent ? "transparent" : `#${hex}`,
- rgb,
- hsv,
- oldHue: incomingHue || oldHue || hsl.h,
- source: source ?? ""
- };
-}
-function isValidHex(hex) {
- if (hex === "transparent") return !0;
- let lh = +(hex.charAt(0) === "#");
- return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
-}
-/**
-* `CustomPicker` higher-order component: manages color state and injects the
-* normalized color (`hsl`/`hsv`/`rgb`/`hex`) plus an `onChange` handler into the
-* wrapped picker.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/ColorWrap.js | react-color's ColorWrap}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*
-* @remarks
-* Kept as a class component for this round (function-component conversion is a
-* follow-up PR). `prop-types` and the unused `lodash` `debounce` of
-* `onChangeComplete` have been removed.
-*/
-const DEFAULT_COLOR$1 = {
- h: 250,
- s: .5,
- l: .2,
- a: 1
-};
-function CustomPicker(Picker) {
- class ColorPicker extends PureComponent {
- static getDerivedStateFromProps(nextProps, state) {
- return { ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue) };
- }
- constructor(props) {
- super(props), this.state = { ...toState(props.color ?? DEFAULT_COLOR$1, 0) };
- }
- handleChange = (data) => {
- if (!simpleCheckForValidColor(data)) return;
- let colors = toState(data, (typeof data == "string" ? void 0 : "h" in data ? data.h : void 0) || this.state.oldHue);
- this.setState(colors), this.props.onChange?.(colors);
- };
- render() {
- let injected = {
- hsl: this.state.hsl,
- hsv: this.state.hsv,
- rgb: this.state.rgb,
- hex: this.state.hex,
- oldHue: this.state.oldHue,
- source: this.state.source,
- onChange: this.handleChange
- };
- return /* @__PURE__ */ jsx(Picker, {
- ...this.props,
- ...injected
- });
- }
- }
- return ColorPicker;
-}
-/**
-* Labeled text input with arrow-key stepping and drag-to-change support.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/EditableInput.js | react-color's EditableInput}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*
-* @remarks
-* Kept as a class component for this round; converting to a function component
-* (with `useId`, `useRef`, etc.) is deferred to a follow-up PR. `reactcss` and
-* `prop-types` have been removed, and deprecated `keyCode` checks replaced with
-* `event.key`.
-*/
-const getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
-let idCounter = 1;
-var EditableInput = class extends Component {
- inputId;
- input = null;
- constructor(props) {
- super(props);
- let initialValue = String(props.value ?? "").toUpperCase();
- this.state = {
- value: initialValue,
- blurValue: initialValue
- }, this.inputId = `rc-editable-input-${idCounter++}`;
- }
- componentDidUpdate(prevProps, prevState) {
- if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
- let nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
- this.setState(isFocused ? { blurValue: nextValue } : {
- value: nextValue,
- blurValue: this.state.blurValue ? "" : nextValue
- });
- }
- }
- componentWillUnmount() {
- this.unbindEventListeners();
- }
- setInputRef = (input) => {
- this.input = input;
- };
- getValueObjectWithLabel = (value) => ({ [this.props.label]: String(value) });
- getArrowOffset = () => this.props.arrowOffset ?? 1;
- setUpdatedValue = (value, event) => {
- this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({ value: String(value) });
- };
- handleBlur = () => {
- this.state.blurValue && this.setState({
- value: this.state.blurValue,
- blurValue: ""
- });
- };
- handleChange = (event) => {
- this.setUpdatedValue(event.target.value, event);
- };
- handleKeyDown = (event) => {
- let value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
- if (!Number.isNaN(value) && (isUp || isDown)) {
- let offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
- this.setUpdatedValue(updatedValue, event);
- }
- };
- handleDrag = (event) => {
- if (!this.props.dragLabel) return;
- let { dragMax, value } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
- dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
- };
- handleMouseDown = (event) => {
- this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
- };
- handleMouseUp = () => {
- this.unbindEventListeners();
- };
- unbindEventListeners = () => {
- window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
- };
- render() {
- let style = this.props.style ?? {}, wrapStyle = {
- position: "relative",
- ...style.wrap
- }, inputStyle = { ...style.input }, labelStyle = {
- ...style.label,
- ...this.props.dragLabel ? { cursor: "ew-resize" } : null
- };
- return /* @__PURE__ */ jsxs("div", {
- style: wrapStyle,
- children: [/* @__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"
- }), this.props.label && !this.props.hideLabel ? /* @__PURE__ */ jsx("label", {
- htmlFor: this.inputId,
- style: labelStyle,
- onMouseDown: this.handleMouseDown,
- children: this.props.label
- }) : null]
- });
- }
-};
-function calculateChange$1(e, direction, hsl, container) {
- let 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);
- if (direction === "vertical") {
- let h;
- return h = top < 0 ? 359 : top > containerHeight ? 0 : 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h === h ? null : {
- h,
- s: hsl.s,
- l: hsl.l,
- a: hsl.a ?? 1,
- source: "hsl"
- };
- }
- let h;
- return h = left < 0 ? 0 : left > containerWidth ? 359 : 360 * (left * 100 / containerWidth) / 100, hsl.h === h ? null : {
- h,
- s: hsl.s,
- l: hsl.l,
- a: hsl.a ?? 1,
- source: "hsl"
- };
-}
-/**
-* Hue slider.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Hue.js | react-color's Hue}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*
-* @remarks
-* Kept as a class component for this round (function-component conversion is a
-* follow-up PR). The upstream raw `<style>` tag holding the static hue gradient
-* has been replaced with a `styled-components` element, and `reactcss` removed.
-*/
-const HueGradient = styled.div.withConfig({
- displayName: "HueGradient",
- componentId: "sc-kldwsm-0"
-})`background:${({ $direction }) => $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%)"};`;
-var Hue = class extends Component {
- container = null;
- componentWillUnmount() {
- this.unbindEventListeners();
- }
- setContainerRef = (node) => {
- this.container = node;
- };
- handleChange = (event) => {
- if (!this.container) return;
- let change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
- change && typeof this.props.onChange == "function" && this.props.onChange(change);
- };
- handleMouseDown = (event) => {
- this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
- };
- handleMouseUp = () => {
- this.unbindEventListeners();
- };
- unbindEventListeners = () => {
- window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
- };
- render() {
- let { hsl, direction = "horizontal", radius, shadow } = this.props, pointerStyle = direction === "vertical" ? {
- position: "absolute",
- left: "0px",
- top: `${-(hsl.h * 100 / 360) + 100}%`
- } : {
- position: "absolute",
- left: `${hsl.h * 100 / 360}%`
- };
- return /* @__PURE__ */ jsx("div", {
- style: {
- position: "absolute",
- inset: 0,
- borderRadius: radius,
- boxShadow: shadow
- },
- children: /* @__PURE__ */ jsx(HueGradient, {
- $direction: direction,
- style: {
- padding: "0 2px",
- position: "relative",
- height: "100%",
- borderRadius: radius
- },
- ref: this.setContainerRef,
- onMouseDown: this.handleMouseDown,
- onTouchMove: this.handleChange,
- onTouchStart: this.handleChange,
- children: /* @__PURE__ */ jsx("div", {
- style: pointerStyle,
- children: /* @__PURE__ */ jsx("div", { style: {
- marginTop: "1px",
- width: "4px",
- borderRadius: "1px",
- height: "8px",
- boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
- background: "#fff",
- transform: "translateX(-2px)"
- } })
- })
- })
- });
- }
-};
-function calculateChange(e, hsl, container) {
- let { width: containerWidth, height: containerHeight } = container.getBoundingClientRect(), 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);
- left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
- let saturation = left / containerWidth, bright = 1 - top / containerHeight;
- return {
- h: hsl.h,
- s: saturation,
- v: bright,
- a: hsl.a ?? 1,
- source: "hsv"
- };
-}
-/**
-* Saturation / value box.
-*
-* Forked from
-* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Saturation.js | react-color's Saturation}
-* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
-*
-* @remarks
-* Kept as a class component for this round (function-component conversion is a
-* follow-up PR). The upstream raw `<style>` tag holding the static white/black
-* gradients has been replaced with `styled-components` elements, `reactcss`
-* removed, and `lodash` swapped for `lodash-es`.
-*/
-const SaturationWhite = styled.div.withConfig({
- displayName: "SaturationWhite",
- componentId: "sc-0wl7vo-0"
-})`background:linear-gradient(to right,#fff,rgba(255,255,255,0));`, SaturationBlack = styled.div.withConfig({
- displayName: "SaturationBlack",
- componentId: "sc-0wl7vo-1"
-})`background:linear-gradient(to top,#000,rgba(0,0,0,0));`;
-var Saturation = class extends Component {
- container = null;
- throttle = throttle((handler, data) => {
- handler(data);
- }, 50);
- componentWillUnmount() {
- this.throttle.cancel(), this.unbindEventListeners();
- }
- setContainerRef = (node) => {
- this.container = node;
- };
- getContainerRenderWindow() {
- let { container } = this, renderWindow = window;
- for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow;) renderWindow = renderWindow.parent;
- return renderWindow;
- }
- handleChange = (event) => {
- !this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
- };
- handleMouseDown = (event) => {
- this.handleChange(event.nativeEvent);
- let renderWindow = this.getContainerRenderWindow();
- renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
- };
- handleMouseUp = () => {
- this.unbindEventListeners();
- };
- unbindEventListeners = () => {
- let renderWindow = this.getContainerRenderWindow();
- renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
- };
- render() {
- let { hsl, hsv, radius, shadow } = this.props, pointerStyle = {
- position: "absolute",
- top: `${-(hsv.v * 100) + 100}%`,
- left: `${hsv.s * 100}%`,
- cursor: "default"
- };
- return /* @__PURE__ */ jsx("div", {
- style: {
- position: "absolute",
- inset: 0,
- background: `hsl(${hsl.h},100%, 50%)`,
- borderRadius: radius
- },
- ref: this.setContainerRef,
- onMouseDown: this.handleMouseDown,
- onTouchMove: this.handleChange,
- onTouchStart: this.handleChange,
- children: /* @__PURE__ */ jsxs(SaturationWhite, {
- style: {
- position: "absolute",
- inset: 0,
- borderRadius: radius
- },
- children: [/* @__PURE__ */ jsx(SaturationBlack, { style: {
- position: "absolute",
- inset: 0,
- boxShadow: shadow,
- borderRadius: radius
- } }), /* @__PURE__ */ jsx("div", {
- style: pointerStyle,
- children: /* @__PURE__ */ jsx("div", { style: {
- width: "4px",
- height: "4px",
- 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)",
- borderRadius: "50%",
- cursor: "pointer",
- transform: "translate(-2px, -2px)"
- } })
- })]
- })
- });
- }
-};
-const ColorPickerFields = (t0) => {
- let $ = c(44), { onChange, rgb, hsl, hex, disableAlpha } = t0, { sanity } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize, t3;
- $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
- width: "80%",
- padding: "4px 10% 3px",
- border: "none",
- boxShadow: t1,
- color: sanity.color.input.default.enabled.fg,
- backgroundColor: sanity.color.input.default.enabled.bg,
- fontSize: t2,
- textAlign: "center"
- }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
- let t4 = sanity.fonts.label.sizes[0]?.fontSize, t5;
- $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
- display: "block",
- textAlign: "center",
- fontSize: t4,
- color: sanity.color.base.fg,
- paddingTop: "3px",
- paddingBottom: "4px",
- textTransform: "capitalize"
- }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
- let t6;
- $[8] !== t3 || $[9] !== t5 ? (t6 = {
- input: t3,
- label: t5
- }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
- let inputStyles = t6, t7;
- $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
- if ("hex" in data && data.hex && isValidHex(data.hex)) onChange({
- hex: data.hex,
- source: "hex"
- });
- else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b)) onChange({
- r: Number(data.r) || rgb.r,
- g: Number(data.g) || rgb.g,
- b: Number(data.b) || rgb.b,
- a: rgb.a,
- source: "rgb"
- });
- else if (hsl && "a" in data && data.a) {
- let alpha = Number(data.a);
- alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
- h: hsl.h,
- s: hsl.s,
- l: hsl.l,
- a: alpha,
- source: "hsl"
- });
- }
- }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
- let handleChange = t7, t8;
- $[15] === hex ? t8 = $[16] : (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8);
- let t9;
- $[17] !== handleChange || $[18] !== inputStyles || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, {
- flex: 2,
- marginRight: 1,
- children: /* @__PURE__ */ jsx(EditableInput, {
- style: inputStyles,
- label: "hex",
- value: t8,
- onChange: handleChange
- })
- }), $[17] = handleChange, $[18] = inputStyles, $[19] = t8, $[20] = t9) : t9 = $[20];
- let t10 = rgb?.r, t11;
- $[21] !== handleChange || $[22] !== inputStyles || $[23] !== t10 ? (t11 = /* @__PURE__ */ jsx(Box, {
- flex: 1,
- marginRight: 1,
- children: /* @__PURE__ */ jsx(EditableInput, {
- style: inputStyles,
- label: "r",
- value: t10,
- onChange: handleChange,
- dragLabel: !0,
- dragMax: 255
- })
- }), $[21] = handleChange, $[22] = inputStyles, $[23] = t10, $[24] = t11) : t11 = $[24];
- let t12 = rgb?.g, t13;
- $[25] !== handleChange || $[26] !== inputStyles || $[27] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
- flex: 1,
- marginRight: 1,
- children: /* @__PURE__ */ jsx(EditableInput, {
- style: inputStyles,
- label: "g",
- value: t12,
- onChange: handleChange,
- dragLabel: !0,
- dragMax: 255
- })
- }), $[25] = handleChange, $[26] = inputStyles, $[27] = t12, $[28] = t13) : t13 = $[28];
- let t14 = rgb?.b, t15;
- $[29] !== handleChange || $[30] !== inputStyles || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, {
- flex: 1,
- marginRight: 1,
- children: /* @__PURE__ */ jsx(EditableInput, {
- style: inputStyles,
- label: "b",
- value: t14,
- onChange: handleChange,
- dragLabel: !0,
- dragMax: 255
- })
- }), $[29] = handleChange, $[30] = inputStyles, $[31] = t14, $[32] = t15) : t15 = $[32];
- let t16;
- $[33] !== disableAlpha || $[34] !== handleChange || $[35] !== inputStyles || $[36] !== rgb?.a ? (t16 = !disableAlpha && /* @__PURE__ */ jsx(Box, {
- flex: 1,
- children: /* @__PURE__ */ jsx(EditableInput, {
- style: inputStyles,
- label: "a",
- value: Math.round((rgb?.a ?? 1) * 100),
- onChange: handleChange,
- dragLabel: !0,
- dragMax: 100
- })
- }), $[33] = disableAlpha, $[34] = handleChange, $[35] = inputStyles, $[36] = rgb?.a, $[37] = t16) : t16 = $[37];
- let t17;
- return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
- t9,
- t11,
- t13,
- t15,
- t16
- ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
-}, ColorBox = styled(Box).withConfig({
- displayName: "ColorBox",
- componentId: "sc-pfhngk-0"
-})`position:absolute;top:0;left:0;width:100%;height:100%;`, ReadOnlyContainer = styled(Flex).withConfig({
- displayName: "ReadOnlyContainer",
- componentId: "sc-pfhngk-1"
-})`margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;`, ColorPicker = CustomPicker((props) => {
- let $ = c(46), { width, color: t0, onChange, onUnset, disableAlpha, colorList, readOnly } = props, { rgb, hex, hsv, hsl } = t0;
- if (!hsl || !hsv) return null;
- let t1;
- $[0] === width ? t1 = $[1] : (t1 = { width }, $[0] = width, $[1] = t1);
- let t2;
- $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
- /* @__PURE__ */ jsx(Card, {
- overflow: "hidden",
- style: {
- position: "relative",
- height: "5em"
- },
- children: /* @__PURE__ */ jsx(Saturation, {
- onChange,
- hsl,
- hsv
- })
- }),
- /* @__PURE__ */ jsx(Card, {
- shadow: 1,
- radius: 3,
- overflow: "hidden",
- style: {
- position: "relative",
- height: "10px"
- },
- children: /* @__PURE__ */ jsx(Hue, {
- hsl,
- onChange: !readOnly && onChange
- })
- }),
- !disableAlpha && /* @__PURE__ */ jsx(Card, {
- shadow: 1,
- radius: 3,
- overflow: "hidden",
- style: {
- position: "relative",
- height: "10px",
- background: "#fff"
- },
- children: /* @__PURE__ */ jsx(Alpha, {
- rgb,
- hsl,
- onChange
- })
- })
- ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
- let t3, t4;
- $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
- position: "relative",
- minWidth: "4em",
- background: "#fff"
- }, t4 = /* @__PURE__ */ jsx(Checkboard, {
- size: 8,
- white: "transparent",
- grey: "rgba(0,0,0,.08)"
- }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
- let t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`, t6;
- $[11] === t5 ? t6 = $[12] : (t6 = /* @__PURE__ */ jsx(ColorBox, { style: { backgroundColor: t5 } }), $[11] = t5, $[12] = t6);
- let t7;
- $[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: [/* @__PURE__ */ jsx(Text, {
- size: 3,
- weight: "bold",
- children: hex
- }), /* @__PURE__ */ jsxs(Inline, {
- gap: 3,
- children: [/* @__PURE__ */ jsxs(Text, {
- size: 1,
- children: [
- /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
- rgb?.r,
- " ",
- rgb?.g,
- " ",
- rgb?.b
- ]
- }), /* @__PURE__ */ jsxs(Text, {
- size: 1,
- children: [
- /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
- " ",
- Math.round(hsl?.h ?? 0),
- " ",
- Math.round((hsl?.s ?? 0) * 100),
- "% ",
- Math.round((hsl?.l ?? 0) * 100),
- "%"
- ]
- })]
- })]
- })
- }), $[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];
- let t8;
- $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, {
- flex: 1,
- radius: 2,
- overflow: "hidden",
- style: t3,
- children: [
- t4,
- t6,
- t7
- ]
- }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
- let t9;
- $[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: [/* @__PURE__ */ jsx(Box, {
- style: { width: 200 },
- children: /* @__PURE__ */ jsx(ColorPickerFields, {
- rgb,
- hsl,
- hex,
- onChange,
- disableAlpha
- })
- }), /* @__PURE__ */ jsx(Box, {
- marginLeft: 2,
- children: /* @__PURE__ */ jsx(Button, {
- onClick: onUnset,
- title: "Delete color",
- icon: TrashIcon,
- tone: "critical"
- })
- })]
- }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
- let t10;
- $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [t8, t9] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
- let t11;
- $[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, {
- colors: colorList,
- onChange
- }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
- let t12;
- $[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, {
- padding: 1,
- border: !0,
- radius: 1,
- children: /* @__PURE__ */ jsxs(Stack, {
- gap: 2,
- children: [
- t2,
- t10,
- t11
- ]
- })
- }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
- let t13;
- return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", {
- style: t1,
- children: t12
- }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
-}), DEFAULT_COLOR = {
- hex: "#24a3e3",
- hsl: {
- h: 200,
- s: .7732,
- l: .5156,
- a: 1
- },
- hsv: {
- h: 200,
- s: .8414,
- v: .8901,
- a: 1
- },
- rgb: {
- r: 46,
- g: 163,
- b: 227,
- a: 1
- },
- source: "hex"
-};
-function ColorInput(props) {
- let $ = c(10), { onChange, readOnly } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null), t0;
- $[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
- let fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
- let nextFieldValue = nextColor[field_0.name];
- return set(field_0.type.jsonType === "object" ? Object.assign({ _type: field_0.type.name }, nextFieldValue) : nextFieldValue, [field_0.name]);
- });
- onChange([
- setIfMissing({ _type: type.name }),
- set(type.name, ["_type"]),
- set(nextColor.rgb?.a, ["alpha"]),
- ...fieldPatches
- ]);
- }, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
- let handleChange = t0, t1;
- return $[3] !== handleChange || $[4] !== onChange || $[5] !== readOnly || $[6] !== setColorOptimistic || $[7] !== type || $[8] !== value ? (t1 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, {
- color: value,
- onChange: (nextColor_0) => startTransition(() => {
- setColorOptimistic(nextColor_0), handleChange(nextColor_0);
- }),
- readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
- disableAlpha: !!type.options?.disableAlpha,
- colorList: type.options?.colorList,
- onUnset: () => startTransition(() => {
- setColorOptimistic(void 0), onChange(unset());
- })
- }) : /* @__PURE__ */ jsx(Button, {
- icon: AddIcon,
- mode: "ghost",
- text: "Create color",
- ref: focusRef,
- disabled: !!readOnly,
- onClick: () => startTransition(() => {
- setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
- })
- }) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
-}
-export { ColorInput as default };
-
-//# sourceMappingURL=ColorInput.js.map
\ No newline at end of file