eidos-ui 4.1.1 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chip/index.cjs +2 -2
- package/dist/chip/index.js +1 -1
- package/dist/{chunk-SOS4K7VC.js → chunk-45XFUEYG.js} +2 -2
- package/dist/{chunk-AWPJH3UB.js → chunk-4MURW4H3.js} +2 -2
- package/dist/{chunk-2WDL2ZVP.js → chunk-5TRO6CYR.js} +10 -4
- package/dist/chunk-5TRO6CYR.js.map +1 -0
- package/dist/{chunk-SJPCBRKR.cjs → chunk-5YTPZN6X.cjs} +3 -3
- package/dist/{chunk-SJPCBRKR.cjs.map → chunk-5YTPZN6X.cjs.map} +1 -1
- package/dist/{chunk-7VMF6LIC.cjs → chunk-6Z42NMP4.cjs} +9 -9
- package/dist/{chunk-7VMF6LIC.cjs.map → chunk-6Z42NMP4.cjs.map} +1 -1
- package/dist/{chunk-VGMRIXW4.cjs → chunk-7OWJQHHM.cjs} +25 -25
- package/dist/{chunk-VGMRIXW4.cjs.map → chunk-7OWJQHHM.cjs.map} +1 -1
- package/dist/{chunk-FSX7DDLO.js → chunk-BMRZHFDP.js} +97 -52
- package/dist/chunk-BMRZHFDP.js.map +1 -0
- package/dist/{chunk-43DJ3GGR.js → chunk-CEVMMYJ5.js} +2 -2
- package/dist/{chunk-DCUIT7SI.js → chunk-CIDHX2EW.js} +2 -2
- package/dist/{chunk-MKQVDEHI.cjs → chunk-CPRNLW4M.cjs} +13 -16
- package/dist/chunk-CPRNLW4M.cjs.map +1 -0
- package/dist/{chunk-6JYXGRJ3.cjs → chunk-EAUTJAKV.cjs} +3 -3
- package/dist/{chunk-6JYXGRJ3.cjs.map → chunk-EAUTJAKV.cjs.map} +1 -1
- package/dist/{chunk-OERK3T7E.js → chunk-ECP5J27K.js} +13 -16
- package/dist/chunk-ECP5J27K.js.map +1 -0
- package/dist/{chunk-5HRVHEHE.cjs → chunk-EJS22Y4B.cjs} +3 -3
- package/dist/{chunk-5HRVHEHE.cjs.map → chunk-EJS22Y4B.cjs.map} +1 -1
- package/dist/{chunk-HKLLKNRQ.cjs → chunk-EM4WYYFN.cjs} +3 -3
- package/dist/{chunk-HKLLKNRQ.cjs.map → chunk-EM4WYYFN.cjs.map} +1 -1
- package/dist/{chunk-Z3OEYDNI.js → chunk-EUQQG5WH.js} +2 -2
- package/dist/{chunk-FAGQGGT3.js → chunk-GVLQQGI3.js} +2 -2
- package/dist/{chunk-K6VEUJLY.cjs → chunk-I36GOOCM.cjs} +18 -18
- package/dist/{chunk-K6VEUJLY.cjs.map → chunk-I36GOOCM.cjs.map} +1 -1
- package/dist/{chunk-LXRNFQEI.js → chunk-JJJXVJUW.js} +3 -3
- package/dist/{chunk-FFYPSLQV.js → chunk-KUP3CP24.js} +8 -8
- package/dist/{chunk-UTOTOWPS.js → chunk-LPSRS5GI.js} +3 -3
- package/dist/{chunk-3QBMSZSE.cjs → chunk-NLTNIQG7.cjs} +3 -3
- package/dist/{chunk-3QBMSZSE.cjs.map → chunk-NLTNIQG7.cjs.map} +1 -1
- package/dist/{chunk-MUMTPMWD.cjs → chunk-NNNMXVHI.cjs} +3 -3
- package/dist/{chunk-MUMTPMWD.cjs.map → chunk-NNNMXVHI.cjs.map} +1 -1
- package/dist/{chunk-57BVERWD.js → chunk-NODLZFCN.js} +3 -3
- package/dist/{chunk-DHOBGYRD.js → chunk-NQ2IY4A2.js} +3 -3
- package/dist/{chunk-YHSCUPP6.cjs → chunk-QKCYXFET.cjs} +102 -57
- package/dist/chunk-QKCYXFET.cjs.map +1 -0
- package/dist/{chunk-SONL2RCW.js → chunk-QVUMYDRE.js} +5 -5
- package/dist/{chunk-SJKD3WCV.cjs → chunk-S3IZPWYP.cjs} +5 -5
- package/dist/{chunk-SJKD3WCV.cjs.map → chunk-S3IZPWYP.cjs.map} +1 -1
- package/dist/{chunk-GRKC4PIX.cjs → chunk-SHGRJX7B.cjs} +3 -3
- package/dist/{chunk-GRKC4PIX.cjs.map → chunk-SHGRJX7B.cjs.map} +1 -1
- package/dist/{chunk-BPVOQLCA.cjs → chunk-TFCOF5FC.cjs} +2 -2
- package/dist/chunk-TFCOF5FC.cjs.map +1 -0
- package/dist/{chunk-IJW6YCJB.cjs → chunk-TTFZKWPH.cjs} +5 -5
- package/dist/{chunk-IJW6YCJB.cjs.map → chunk-TTFZKWPH.cjs.map} +1 -1
- package/dist/{chunk-JO4NDJRA.cjs → chunk-U4B6C7OP.cjs} +6 -6
- package/dist/{chunk-JO4NDJRA.cjs.map → chunk-U4B6C7OP.cjs.map} +1 -1
- package/dist/{chunk-ADB7QRX5.cjs → chunk-U4MV7P4A.cjs} +5 -5
- package/dist/{chunk-ADB7QRX5.cjs.map → chunk-U4MV7P4A.cjs.map} +1 -1
- package/dist/{chunk-IBT535UH.js → chunk-UAAQVIZQ.js} +2 -2
- package/dist/chunk-UAAQVIZQ.js.map +1 -0
- package/dist/{chunk-VPN7AR7T.cjs → chunk-USGEUG2O.cjs} +4 -4
- package/dist/{chunk-VPN7AR7T.cjs.map → chunk-USGEUG2O.cjs.map} +1 -1
- package/dist/{chunk-TOLNPD7S.js → chunk-VA23PQTA.js} +2 -2
- package/dist/{chunk-BKUZF7CW.cjs → chunk-VY7DTPO3.cjs} +21 -15
- package/dist/chunk-VY7DTPO3.cjs.map +1 -0
- package/dist/{chunk-D2PXPX56.js → chunk-YAZSZFLB.js} +4 -4
- package/dist/{chunk-YYA5SWXD.js → chunk-ZBK4KYKJ.js} +2 -2
- package/dist/color-picker/index.cjs +3 -3
- package/dist/color-picker/index.js +2 -2
- package/dist/combobox/index.cjs +3 -3
- package/dist/combobox/index.js +2 -2
- package/dist/context-menu/index.cjs +4 -4
- package/dist/context-menu/index.js +3 -3
- package/dist/conversation/index.cjs +5 -5
- package/dist/conversation/index.js +4 -4
- package/dist/data-grid/index.cjs +10 -10
- package/dist/data-grid/index.js +9 -9
- package/dist/date-picker/index.cjs +4 -4
- package/dist/date-picker/index.d.cts +15 -1
- package/dist/date-picker/index.d.ts +15 -1
- package/dist/date-picker/index.js +3 -3
- package/dist/dropdown/index.cjs +2 -2
- package/dist/dropdown/index.d.cts +10 -0
- package/dist/dropdown/index.d.ts +10 -0
- package/dist/dropdown/index.js +1 -1
- package/dist/index.cjs +20 -20
- package/dist/index.css +1 -1
- package/dist/index.js +19 -19
- package/dist/menu/index.cjs +3 -3
- package/dist/menu/index.js +2 -2
- package/dist/page-layout/index.cjs +5 -5
- package/dist/page-layout/index.js +4 -4
- package/dist/pagination/index.cjs +4 -4
- package/dist/pagination/index.js +3 -3
- package/dist/select/index.cjs +3 -3
- package/dist/select/index.js +2 -2
- package/dist/split-button/index.cjs +4 -4
- package/dist/split-button/index.js +3 -3
- package/dist/split-chip/index.cjs +3 -3
- package/dist/split-chip/index.js +2 -2
- package/dist/table/index.cjs +9 -9
- package/dist/table/index.js +8 -8
- package/dist/tag-input/index.cjs +4 -4
- package/dist/tag-input/index.js +3 -3
- package/dist/theme-editor/index.cjs +5 -5
- package/dist/theme-editor/index.js +4 -4
- package/dist/toolbar/index.cjs +4 -4
- package/dist/toolbar/index.js +3 -3
- package/package.json +1 -1
- package/dist/chunk-2WDL2ZVP.js.map +0 -1
- package/dist/chunk-BKUZF7CW.cjs.map +0 -1
- package/dist/chunk-BPVOQLCA.cjs.map +0 -1
- package/dist/chunk-FSX7DDLO.js.map +0 -1
- package/dist/chunk-IBT535UH.js.map +0 -1
- package/dist/chunk-MKQVDEHI.cjs.map +0 -1
- package/dist/chunk-OERK3T7E.js.map +0 -1
- package/dist/chunk-YHSCUPP6.cjs.map +0 -1
- /package/dist/{chunk-SOS4K7VC.js.map → chunk-45XFUEYG.js.map} +0 -0
- /package/dist/{chunk-AWPJH3UB.js.map → chunk-4MURW4H3.js.map} +0 -0
- /package/dist/{chunk-43DJ3GGR.js.map → chunk-CEVMMYJ5.js.map} +0 -0
- /package/dist/{chunk-DCUIT7SI.js.map → chunk-CIDHX2EW.js.map} +0 -0
- /package/dist/{chunk-Z3OEYDNI.js.map → chunk-EUQQG5WH.js.map} +0 -0
- /package/dist/{chunk-FAGQGGT3.js.map → chunk-GVLQQGI3.js.map} +0 -0
- /package/dist/{chunk-LXRNFQEI.js.map → chunk-JJJXVJUW.js.map} +0 -0
- /package/dist/{chunk-FFYPSLQV.js.map → chunk-KUP3CP24.js.map} +0 -0
- /package/dist/{chunk-UTOTOWPS.js.map → chunk-LPSRS5GI.js.map} +0 -0
- /package/dist/{chunk-57BVERWD.js.map → chunk-NODLZFCN.js.map} +0 -0
- /package/dist/{chunk-DHOBGYRD.js.map → chunk-NQ2IY4A2.js.map} +0 -0
- /package/dist/{chunk-SONL2RCW.js.map → chunk-QVUMYDRE.js.map} +0 -0
- /package/dist/{chunk-TOLNPD7S.js.map → chunk-VA23PQTA.js.map} +0 -0
- /package/dist/{chunk-D2PXPX56.js.map → chunk-YAZSZFLB.js.map} +0 -0
- /package/dist/{chunk-YYA5SWXD.js.map → chunk-ZBK4KYKJ.js.map} +0 -0
package/dist/chip/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-FQZ6F7FQ.cjs');
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkTFCOF5FCcjs = require('../chunk-TFCOF5FC.cjs');
|
|
5
5
|
require('../chunk-RZMQCVAS.cjs');
|
|
6
6
|
require('../chunk-R5WI5IGR.cjs');
|
|
7
7
|
require('../chunk-CJT7L764.cjs');
|
|
@@ -10,5 +10,5 @@ require('../chunk-75Q5OS7L.cjs');
|
|
|
10
10
|
require('../chunk-DZUJEN5N.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
exports.Chip =
|
|
13
|
+
exports.Chip = _chunkTFCOF5FCcjs.Chip;
|
|
14
14
|
//# sourceMappingURL=index.cjs.map
|
package/dist/chip/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Chip
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-UAAQVIZQ.js";
|
|
4
4
|
|
|
5
5
|
// src/components/SplitChip/SplitChip.utils.ts
|
|
6
6
|
var hasVisibleBorder = (segment) => segment.variant === "outlined" || segment.disabled;
|
|
@@ -79,4 +79,4 @@ var SplitChip = ({
|
|
|
79
79
|
export {
|
|
80
80
|
SplitChip
|
|
81
81
|
};
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-45XFUEYG.js.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-GLEPKX2R.js";
|
|
4
4
|
import {
|
|
5
5
|
Menu
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-VA23PQTA.js";
|
|
7
7
|
import {
|
|
8
8
|
Avatar
|
|
9
9
|
} from "./chunk-XJBWFDDE.js";
|
|
@@ -42,4 +42,4 @@ var Toolbar = ({
|
|
|
42
42
|
export {
|
|
43
43
|
Toolbar
|
|
44
44
|
};
|
|
45
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-4MURW4H3.js.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-GE3QCXT7.js";
|
|
4
4
|
import {
|
|
5
5
|
Dropdown
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-ECP5J27K.js";
|
|
7
7
|
import {
|
|
8
8
|
devWarn,
|
|
9
9
|
renderIcon
|
|
@@ -80,6 +80,11 @@ var Select = React.forwardRef(
|
|
|
80
80
|
}
|
|
81
81
|
} else {
|
|
82
82
|
if (newSelectedValues.has(option.value)) {
|
|
83
|
+
if (!clearable) {
|
|
84
|
+
setIsOpen(false);
|
|
85
|
+
inputRef.current?.focus();
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
83
88
|
newSelectedValues.clear();
|
|
84
89
|
} else {
|
|
85
90
|
newSelectedValues.clear();
|
|
@@ -98,10 +103,11 @@ var Select = React.forwardRef(
|
|
|
98
103
|
inputRef.current?.focus();
|
|
99
104
|
}
|
|
100
105
|
},
|
|
101
|
-
[multiple, onChange, selectedValues, isControlled]
|
|
106
|
+
[multiple, onChange, selectedValues, isControlled, clearable]
|
|
102
107
|
);
|
|
103
108
|
const handleClear = useCallback(
|
|
104
109
|
(e) => {
|
|
110
|
+
if (!clearable) return;
|
|
105
111
|
if (e) {
|
|
106
112
|
e.stopPropagation();
|
|
107
113
|
}
|
|
@@ -114,7 +120,7 @@ var Select = React.forwardRef(
|
|
|
114
120
|
onChange(multiple ? [] : "");
|
|
115
121
|
}
|
|
116
122
|
},
|
|
117
|
-
[multiple, onChange, isControlled]
|
|
123
|
+
[multiple, onChange, isControlled, clearable]
|
|
118
124
|
);
|
|
119
125
|
useEffect(() => {
|
|
120
126
|
const element = inputRef.current;
|
|
@@ -353,4 +359,4 @@ Select.displayName = "Select";
|
|
|
353
359
|
export {
|
|
354
360
|
Select
|
|
355
361
|
};
|
|
356
|
-
//# sourceMappingURL=chunk-
|
|
362
|
+
//# sourceMappingURL=chunk-5TRO6CYR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/Select.component.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport { X, Check } from 'lucide-react';\nimport { Input } from '../Input/Input.component';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type { SelectProps, SelectOption } from './Select.types';\nimport { renderIcon, devWarn } from '../../utils';\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n value,\n defaultValue,\n onChange,\n className = '',\n multiple = false,\n label,\n placeholder = 'Select an option...',\n disabled = false,\n inputProps = {},\n name,\n id,\n required = false,\n fullWidth = false,\n minWidth,\n maxWidth,\n minHeight,\n maxHeight = '300px',\n autoWidth = true,\n clearable = true,\n autoOpen = false,\n dropdownProps = {},\n },\n ref,\n ) => {\n const isControlled = value !== undefined;\n\n // Lazy initializer: seed from defaultValue in uncontrolled mode.\n const [selectedValues, setSelectedValues] = useState<Set<string>>(() => {\n if (defaultValue !== undefined) {\n const vals = Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n return new Set(vals.filter((v) => v !== ''));\n }\n return new Set();\n });\n\n const [focusedIndex, setFocusedIndex] = useState(-1);\n // `Select` owns the open state and hands it to `Dropdown` as a controlled\n // value. It used to keep this flag *and* force the dropdown closed by\n // remounting it through a changing `key`, because `Dropdown`'s own state was\n // private - which meant this flag drove the ARIA attributes while reaching\n // nothing that renders, so the keyboard could not open the listbox at all.\n const [isOpen, setIsOpen] = useState(autoOpen);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n // Kept in sync every render so the mount-only callback ref below can\n // read the latest values without needing them in its dependency array\n // (see `handleOptionsMount`).\n const optionsRef = useRef(options);\n optionsRef.current = options;\n const selectedValuesRef = useRef(selectedValues);\n selectedValuesRef.current = selectedValues;\n\n useEffect(() => {\n if (value !== undefined) {\n const values = Array.isArray(value) ? value : [value];\n\n const validValues = values.filter((v) => v !== '');\n setSelectedValues(new Set(validValues));\n }\n }, [value]);\n\n useEffect(() => {\n setFocusedIndex(-1);\n }, [options]);\n\n useEffect(() => {\n optionRefs.current = optionRefs.current.slice(0, options.length);\n }, [options.length]);\n\n const handleOptionSelect = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n\n const newSelectedValues = new Set(selectedValues);\n\n if (multiple) {\n if (newSelectedValues.has(option.value)) {\n newSelectedValues.delete(option.value);\n } else {\n newSelectedValues.add(option.value);\n }\n } else {\n if (newSelectedValues.has(option.value)) {\n if (!clearable) {\n // `clearable={false}` means the value is not allowed to\n // become empty - re-clicking the selected option changes\n // nothing and emits no `onChange`, but still closes the\n // dropdown like any selection so the control does not\n // feel broken.\n setIsOpen(false);\n inputRef.current?.focus();\n return;\n }\n newSelectedValues.clear();\n } else {\n newSelectedValues.clear();\n newSelectedValues.add(option.value);\n }\n }\n\n // In uncontrolled mode, own the state directly.\n // In controlled mode, let the parent drive via value prop + useEffect sync.\n if (!isControlled) {\n setSelectedValues(newSelectedValues);\n }\n\n if (onChange) {\n const newValue = multiple\n ? Array.from(newSelectedValues)\n : Array.from(newSelectedValues)[0] || '';\n onChange(newValue);\n }\n\n if (!multiple) {\n setIsOpen(false);\n // Focus is returned explicitly because a click lands on an option\n // `div`, which is not focusable - without this, choosing with the\n // mouse would leave focus on `<body>` and the field would be\n // unreachable by keyboard until tabbed to again.\n inputRef.current?.focus();\n }\n },\n [multiple, onChange, selectedValues, isControlled, clearable],\n );\n\n const handleClear = useCallback(\n (e?: React.MouseEvent) => {\n // `clearable` is the single meaning of \"the value may become\n // empty\" - the clear button is already hidden, this guards any\n // other path here (and any future one) reaching the same end.\n if (!clearable) return;\n if (e) {\n e.stopPropagation();\n }\n if (!isControlled) {\n setSelectedValues(new Set());\n }\n\n setIsOpen(false);\n inputRef.current?.focus();\n if (onChange) {\n onChange(multiple ? [] : '');\n }\n },\n [multiple, onChange, isControlled, clearable],\n );\n\n // A form control with no accessible name is announced as just \"combobox\".\n // `Select` was the only field in the library that could not be labelled\n // without knowing about `inputProps`, and three call sites duly shipped\n // without one - so the gap is closed from both ends: a first-class `label`\n // prop, and this warning.\n //\n // Measured from the DOM rather than from props, because a caller may name\n // the field with an external `<label for>` - `Pagination`'s page-size\n // picker does exactly that, and a props-only check would cry wolf at it.\n // `HTMLInputElement.labels` covers both wrapping and `for` labels.\n useEffect(() => {\n const element = inputRef.current;\n if (!element) return;\n const named =\n (element.labels?.length ?? 0) > 0 ||\n element.hasAttribute('aria-label') ||\n element.hasAttribute('aria-labelledby');\n if (!named) {\n devWarn(\n 'select-missing-label',\n 'Select: no accessible name. Pass `label` for a visible one, or `inputProps={{ \"aria-label\": \"...\" }}` where it must stay visually unlabelled - otherwise the field is announced as just \"combobox\". A placeholder is not a label, and disappears as soon as something is chosen.',\n );\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(0);\n } else {\n setFocusedIndex((prev) => {\n const nextIndex = prev < options.length - 1 ? prev + 1 : 0;\n\n setTimeout(() => {\n optionRefs.current[nextIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }, 0);\n return nextIndex;\n });\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(options.length - 1);\n } else {\n setFocusedIndex((prev) => {\n const nextIndex = prev > 0 ? prev - 1 : options.length - 1;\n\n setTimeout(() => {\n optionRefs.current[nextIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }, 0);\n return nextIndex;\n });\n }\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(0);\n } else if (focusedIndex >= 0 && focusedIndex < options.length) {\n const focusedOption = options[focusedIndex];\n handleOptionSelect(focusedOption);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n setFocusedIndex(-1);\n }\n break;\n\n case 'Home':\n e.preventDefault();\n if (isOpen) {\n setFocusedIndex(0);\n optionRefs.current[0]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n break;\n\n case 'End':\n e.preventDefault();\n if (isOpen) {\n const lastIndex = options.length - 1;\n setFocusedIndex(lastIndex);\n optionRefs.current[lastIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n break;\n\n default:\n if (isOpen && e.key.length === 1 && /[a-zA-Z0-9]/.test(e.key)) {\n const searchChar = e.key.toLowerCase();\n const foundIndex = options.findIndex(\n (option, index) =>\n index > focusedIndex && option.label.toLowerCase().startsWith(searchChar),\n );\n\n if (foundIndex !== -1) {\n setFocusedIndex(foundIndex);\n optionRefs.current[foundIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n } else {\n const foundFromStart = options.findIndex((option) =>\n option.label.toLowerCase().startsWith(searchChar),\n );\n if (foundFromStart !== -1) {\n setFocusedIndex(foundFromStart);\n optionRefs.current[foundFromStart]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n }\n }\n break;\n }\n },\n [disabled, isOpen, options, focusedIndex, handleOptionSelect],\n );\n\n // Scrolls the first selected option into view. Attached as the options\n // list's own ref below with an empty dependency array, so its identity\n // never changes and React only invokes it on genuine DOM mount/unmount -\n // i.e. exactly when the dropdown opens/closes (Dropdown unmounts its\n // `content` entirely while closed), not on every re-render while open.\n const handleOptionsMount = useCallback((el: HTMLDivElement | null) => {\n if (!el) return;\n const idx = optionsRef.current.findIndex((option) =>\n selectedValuesRef.current.has(option.value),\n );\n if (idx === -1) return;\n optionRefs.current[idx]?.scrollIntoView({ block: 'nearest' });\n }, []);\n\n // Past this many selections the full comma-joined label list becomes\n // unreadable in the trigger, so we switch to a compact \"N selected\" label.\n const COMPACT_LABEL_THRESHOLD = 2;\n\n const displayValue = useMemo(() => {\n if (selectedValues.size === 0) return '';\n\n if (multiple && selectedValues.size > COMPACT_LABEL_THRESHOLD) {\n return `${selectedValues.size} selected`;\n }\n\n const selectedOptions = options.filter((option) => selectedValues.has(option.value));\n const text = selectedOptions.map((option) => option.label).join(', ');\n return text;\n }, [options, selectedValues, multiple]);\n\n const selectContent = useMemo(\n () => (\n <div className={'eidos-select-options'} ref={handleOptionsMount}>\n {options.map((option, index) => {\n const isSelected = selectedValues.has(option.value);\n const isFocused = index === focusedIndex;\n return (\n <div\n key={option.id}\n // The trigger points `aria-activedescendant` at\n // `${id}-option-${focusedIndex}`, and nothing carried that id -\n // so the moment an option was hovered or arrowed to, the\n // attribute referenced an element that did not exist\n // (`aria-valid-attr-value`, critical). Invisible to axe until a\n // story left the listbox open, because the attribute is only\n // set once something is focused.\n id={`${id || 'select'}-option-${index}`}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n className={`\n\t\t\t\t\t\t\t\t\t\t${'eidos-select-option'}\n\t\t\t\t\t\t\t\t\t\t${isSelected ? 'eidos-select-option--selected' : ''}\n\t\t\t\t\t\t\t\t\t\t${option.disabled ? 'eidos-select-option--disabled' : ''}\n\t\t\t\t\t\t\t\t\t\t${isFocused ? 'eidos-select-option--focused' : ''}\n\t\t\t\t\t\t\t\t\t`.trim()}\n onClick={() => handleOptionSelect(option)}\n onMouseEnter={() => setFocusedIndex(index)}\n role=\"option\"\n aria-selected={isSelected}\n aria-disabled={option.disabled}\n >\n {option.icon && renderIcon(option.icon, 'eidos-select-option-icon')}\n <span className={'eidos-select-option-label'}>{option.label}</span>\n {isSelected && <Check className={'eidos-select-option-check-icon'} />}\n </div>\n );\n })}\n </div>\n ),\n [options, selectedValues, focusedIndex, handleOptionSelect, handleOptionsMount, id],\n );\n\n const triggerElement = (\n <div\n ref={triggerRef}\n className={`eidos-select-trigger ${fullWidth ? 'eidos-select-trigger--full-width' : ''}`}\n onKeyDown={handleKeyDown}\n tabIndex={disabled ? -1 : undefined}\n role=\"combobox\"\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n // Only while the listbox exists. An `aria-controls` pointing at an id\n // that is not in the document is invalid, and the listbox only renders\n // while open - `Combobox`, `TagInput` and `CommandPalette` already gate\n // theirs this way. It could not be gated here before, because `isOpen`\n // did not track whether the panel had actually rendered.\n aria-controls={isOpen ? `${id || 'select'}-options` : undefined}\n aria-activedescendant={\n focusedIndex >= 0 ? `${id || 'select'}-option-${focusedIndex}` : undefined\n }\n >\n <Input\n ref={inputRef}\n value={selectedValues.size > 0 ? displayValue : ''}\n placeholder={selectedValues.size === 0 ? placeholder : ''}\n posIcon={selectedValues.size > 0 && clearable ? X : undefined}\n posIconButton={selectedValues.size > 0 && clearable}\n onPosIconClick={selectedValues.size > 0 && clearable ? handleClear : undefined}\n posIconLabel=\"Clear selection\"\n disabled={disabled}\n readOnly={true}\n isSelect={true}\n label={label}\n name={name}\n id={id}\n required={required}\n fullWidth={fullWidth}\n {...inputProps}\n />\n </div>\n );\n\n return (\n <div\n ref={ref}\n className={`${'eidos-select-container'} ${\n fullWidth ? 'eidos-select-container--full-width' : ''\n } ${className}`}\n >\n <Dropdown\n open={isOpen}\n onOpenChange={setIsOpen}\n trigger={triggerElement}\n content={\n <div id={`${id || 'select'}-options`} role=\"listbox\" aria-multiselectable={multiple}>\n {selectContent}\n </div>\n }\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n autoWidth={autoWidth}\n fullWidth={fullWidth}\n triggerRef={triggerRef as React.RefObject<HTMLElement | null>}\n {...dropdownProps}\n />\n </div>\n );\n },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkCPRNLW4Mcjs = require('./chunk-CPRNLW4M.cjs');
|
|
4
4
|
|
|
5
5
|
// src/components/ColorPicker/ColorPicker.component.tsx
|
|
6
6
|
var _react = require('react');
|
|
@@ -497,7 +497,7 @@ var ColorPicker = ({
|
|
|
497
497
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: rootClasses, children: [
|
|
498
498
|
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-color-picker-label", children: label }),
|
|
499
499
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
500
|
-
|
|
500
|
+
_chunkCPRNLW4Mcjs.Dropdown,
|
|
501
501
|
{
|
|
502
502
|
trigger: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
503
503
|
"button",
|
|
@@ -532,4 +532,4 @@ ColorPicker.displayName = "ColorPicker";
|
|
|
532
532
|
|
|
533
533
|
|
|
534
534
|
exports.ColorPicker = ColorPicker;
|
|
535
|
-
//# sourceMappingURL=chunk-
|
|
535
|
+
//# sourceMappingURL=chunk-5YTPZN6X.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SJPCBRKR.cjs","../src/components/ColorPicker/ColorPicker.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SJPCBRKR.cjs","sourcesContent":[null,"import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type {\n ColorPickerProps,\n HSVColor,\n RGBColor,\n HSLColor,\n ColorFormat,\n} from './ColorPicker.types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_SWATCHES: string[] = [\n '#ef4444',\n '#f97316',\n '#f59e0b',\n '#10b981',\n '#06b6d4',\n '#6366f1',\n '#8b5cf6',\n '#ec4899',\n '#64748b',\n '#1e293b',\n];\n\n// ============================================================================\n// Pure colour-utility functions\n// ============================================================================\n\nfunction hsvToRgb(h: number, s: number, v: number): RGBColor {\n // h: 0–360, s: 0–100, v: 0–100 → r,g,b: 0–255\n const sn = s / 100;\n const vn = v / 100;\n const c = vn * sn;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vn - c;\n\n let r: number, g: number, b: number;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n}\n\nfunction rgbToHsv(r: number, g: number, b: number): HSVColor {\n // r,g,b: 0–255 → h: 0–360, s: 0–100, v: 0–100\n const rn = r / 255;\n const gn = g / 255;\n const bn = b / 255;\n\n const max = Math.max(rn, gn, bn);\n const min = Math.min(rn, gn, bn);\n const delta = max - min;\n\n const v = max * 100;\n const s = max === 0 ? 0 : (delta / max) * 100;\n\n let h = 0;\n if (delta !== 0) {\n if (max === rn) h = ((gn - bn) / delta) % 6;\n else if (max === gn) h = (bn - rn) / delta + 2;\n else h = (rn - gn) / delta + 4;\n h = h * 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately NOT rounded. HSV is this component's internal state, and\n // rounding s/v to whole percent makes the hex -> HSV -> hex round trip lossy:\n // `#5c5de8` came back as `#5d5de8`, so a controlled `value` displayed a\n // different colour than the one passed in, and any interaction committed the\n // drifted value. `hsvToRgb` already rounds to whole channels at the end, so\n // precision is only needed in between. Every consumer of these floats (the\n // hue gradient, the thumb offsets, the hue slider) accepts them.\n return { h, s, v };\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const ch = (n: number) =>\n Math.round(Math.max(0, Math.min(255, n)))\n .toString(16)\n .padStart(2, '0');\n return `#${ch(r)}${ch(g)}${ch(b)}`;\n}\n\nfunction hexToRgb(hex: string): RGBColor | null {\n const c = hex.trim().replace(/^#/, '');\n let r: number, g: number, b: number;\n\n if (c.length === 3) {\n r = parseInt(c[0] + c[0], 16);\n g = parseInt(c[1] + c[1], 16);\n b = parseInt(c[2] + c[2], 16);\n } else if (c.length === 6) {\n r = parseInt(c.slice(0, 2), 16);\n g = parseInt(c.slice(2, 4), 16);\n b = parseInt(c.slice(4, 6), 16);\n } else {\n return null;\n }\n\n if (isNaN(r) || isNaN(g) || isNaN(b)) return null;\n return { r, g, b };\n}\n\nfunction rgbToHsl(r: number, g: number, b: number): HSLColor {\n // r,g,b: 0–255 → h: 0–360, s: 0–100, l: 0–100\n const rn = r / 255;\n const gn = g / 255;\n const bn = b / 255;\n\n const max = Math.max(rn, gn, bn);\n const min = Math.min(rn, gn, bn);\n const delta = max - min;\n const l = (max + min) / 2;\n\n let h = 0;\n let s = 0;\n\n if (delta !== 0) {\n s = delta / (1 - Math.abs(2 * l - 1));\n if (max === rn) h = ((gn - bn) / delta) % 6;\n else if (max === gn) h = (bn - rn) / delta + 2;\n else h = (rn - gn) / delta + 4;\n h = h * 60;\n if (h < 0) h += 360;\n }\n\n return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\nfunction hslToRgb(h: number, s: number, l: number): RGBColor {\n // h: 0–360, s: 0–100, l: 0–100 → r,g,b: 0–255\n const sn = s / 100;\n const ln = l / 100;\n const c = (1 - Math.abs(2 * ln - 1)) * sn;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = ln - c / 2;\n\n let r: number, g: number, b: number;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n}\n\n// ============================================================================\n// Format helpers\n// ============================================================================\n\nfunction colorToText(hsv: HSVColor, alpha: number, fmt: ColorFormat): string {\n const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n\n switch (fmt) {\n case 'hex':\n return rgbToHex(rgb.r, rgb.g, rgb.b);\n case 'rgb':\n return alpha < 1\n ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`\n : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n case 'hsl': {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n return alpha < 1\n ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`\n : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n }\n }\n}\n\nfunction parseColorText(text: string): RGBColor | null {\n const t = text.trim();\n\n // Try hex (with or without leading #)\n const hexCandidate = t.startsWith('#') ? t : /^[0-9a-f]{3,6}$/i.test(t) ? `#${t}` : null;\n if (hexCandidate) return hexToRgb(hexCandidate);\n\n // Try rgb() / rgba()\n const rgbMatch = t.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/i);\n if (rgbMatch) {\n return {\n r: parseInt(rgbMatch[1], 10),\n g: parseInt(rgbMatch[2], 10),\n b: parseInt(rgbMatch[3], 10),\n };\n }\n\n // Try hsl() / hsla()\n const hslMatch = t.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?/i);\n if (hslMatch) {\n return hslToRgb(\n parseInt(hslMatch[1], 10),\n parseInt(hslMatch[2], 10),\n parseInt(hslMatch[3], 10),\n );\n }\n\n return null;\n}\n\n/** Parse a hex string to HSVColor, falling back to red on failure. */\nfunction hexToHsv(hex: string): HSVColor {\n const rgb = hexToRgb(hex);\n return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : { h: 0, s: 100, v: 100 };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n value,\n defaultValue,\n onChange,\n format = 'hex',\n showAlpha = false,\n showSwatches = true,\n swatches = DEFAULT_SWATCHES,\n disabled = false,\n size = 'md',\n inline = false,\n label,\n ariaLabel,\n className = '',\n}) => {\n // ── Initial hex (only used on first render by useState) ──────────────────\n const initialHex = value ?? defaultValue ?? '#6366f1';\n\n // ── State ─────────────────────────────────────────────────────────────────\n const [hsv, setHsv] = useState<HSVColor>(() => hexToHsv(initialHex));\n const [alpha, setAlpha] = useState<number>(1);\n const [activeFormat, setActiveFormat] = useState<ColorFormat>(format);\n const [inputText, setInputText] = useState<string>(() =>\n colorToText(hexToHsv(initialHex), 1, format),\n );\n const [copied, setCopied] = useState(false);\n\n // ── Refs - give event handlers always-fresh values without stale closures ──\n const hsvRef = useRef<HSVColor>(hsv);\n hsvRef.current = hsv;\n\n const alphaRef = useRef<number>(alpha);\n alphaRef.current = alpha;\n\n const activeFormatRef = useRef<ColorFormat>(activeFormat);\n activeFormatRef.current = activeFormat;\n\n // onChange is stored in a ref so applyColor never becomes stale\n const onChangeRef = useRef<ColorPickerProps['onChange']>(onChange);\n onChangeRef.current = onChange;\n\n const inputFocusedRef = useRef(false);\n const canvasRef = useRef<HTMLDivElement>(null);\n\n // Refs for in-flight drag listeners - cleaned up on mouseup and on unmount\n const dragHandlersRef = useRef<{\n move: (e: MouseEvent) => void;\n up: () => void;\n } | null>(null);\n\n const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // ── Derived ───────────────────────────────────────────────────────────────\n const currentRgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n const currentHex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);\n\n // ── Sync from controlled `value` prop ─────────────────────────────────────\n // Runs only when `value` changes. We normalize both sides to the same\n // hex format before comparing so that round-trip conversions don't trigger\n // spurious updates (which would overwrite the preserved hue when s/v = 0).\n useEffect(() => {\n if (value === undefined) return;\n const rgb = hexToRgb(value);\n if (!rgb) return;\n const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n const newNormalised = rgbToHex(\n ...(Object.values(hsvToRgb(newHsv.h, newHsv.s, newHsv.v)) as [number, number, number]),\n );\n // currentHex is captured from this render - guards against echo loops\n // when the parent echoes back our own onChange emission\n if (newNormalised === currentHex) return;\n setHsv(newHsv);\n if (!inputFocusedRef.current) {\n setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n }\n }, [value, currentHex]);\n\n // ── Cleanup drag listeners and timers on unmount ──────────────────────────\n useEffect(() => {\n return () => {\n if (dragHandlersRef.current) {\n document.removeEventListener('mousemove', dragHandlersRef.current.move);\n document.removeEventListener('mouseup', dragHandlersRef.current.up);\n }\n if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n };\n }, []);\n\n // ── Core: apply a new HSV + alpha, emit onChange ───────────────────────────\n // Stable (empty dep array) - reads live values exclusively via refs.\n const applyColor = useCallback((newHsv: HSVColor, newAlpha: number) => {\n setHsv(newHsv);\n setAlpha(newAlpha);\n\n if (!inputFocusedRef.current) {\n setInputText(colorToText(newHsv, newAlpha, activeFormatRef.current));\n }\n\n const rgb = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n onChangeRef.current?.(hex);\n }, []);\n\n // ── 2-D saturation / brightness canvas ────────────────────────────────────\n const handleCanvasMouseDown = useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n e.preventDefault();\n\n const pick = (clientX: number, clientY: number) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const s = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));\n const v = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100));\n applyColor({ h: hsvRef.current.h, s, v }, alphaRef.current);\n };\n\n pick(e.clientX, e.clientY);\n\n const handleMouseMove = (me: MouseEvent) => pick(me.clientX, me.clientY);\n const handleMouseUp = () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n dragHandlersRef.current = null;\n };\n\n dragHandlersRef.current = { move: handleMouseMove, up: handleMouseUp };\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n },\n [disabled, applyColor],\n );\n\n // ── Hue slider ────────────────────────────────────────────────────────────\n const handleHueChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n applyColor({ ...hsvRef.current, h: Number(e.target.value) }, alphaRef.current);\n },\n [applyColor],\n );\n\n // ── Alpha slider ──────────────────────────────────────────────────────────\n const handleAlphaChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n applyColor(hsvRef.current, Number(e.target.value) / 100);\n },\n [applyColor],\n );\n\n // ── Format toggle ─────────────────────────────────────────────────────────\n const handleFormatChange = useCallback((fmt: ColorFormat) => {\n setActiveFormat(fmt);\n setInputText(colorToText(hsvRef.current, alphaRef.current, fmt));\n }, []);\n\n // ── Text-input commit (Enter / blur) ──────────────────────────────────────\n const handleInputCommit = useCallback(() => {\n const rgb = parseColorText(inputText);\n if (!rgb) {\n // Invalid - reset to the current valid colour\n setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n return;\n }\n const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n applyColor(newHsv, alphaRef.current);\n // Always normalise the text after a commit (even if the input still has focus)\n setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n }, [inputText, applyColor]);\n\n // ── Swatch click ──────────────────────────────────────────────────────────\n const handleSwatchClick = useCallback(\n (hex: string) => {\n const rgb = hexToRgb(hex);\n if (!rgb) return;\n applyColor(rgbToHsv(rgb.r, rgb.g, rgb.b), alphaRef.current);\n },\n [applyColor],\n );\n\n // ── Copy to clipboard ─────────────────────────────────────────────────────\n const handleCopy = useCallback(() => {\n const text = colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current);\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n // Clipboard access denied - silently ignore\n });\n }, []);\n\n // ── Alpha-slider background gradient ─────────────────────────────────────\n // We use a transparent-to-current-colour gradient layered over a checkerboard\n // so the alpha slider always shows the correct colour transition.\n const transparentColor = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, 0)`;\n\n const alphaTrackBg = {\n backgroundImage: [\n `linear-gradient(to right, ${transparentColor}, ${currentHex})`,\n 'linear-gradient(45deg, #e2e8f0 25%, transparent 25%)',\n 'linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)',\n 'linear-gradient(45deg, transparent 75%, #e2e8f0 75%)',\n 'linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)',\n ].join(', '),\n backgroundSize: '100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px',\n backgroundPosition: '0 0, 0 0, 0 4px, 4px -4px, -4px 0',\n };\n\n // ── Picker panel (shared between inline and popover modes) ────────────────\n //\n // The size modifier has to live on the panel itself, not only on the root:\n // in popover mode the panel is portaled to document.body by Dropdown, so\n // anything inside it that sized itself off a `.eidos-color-picker--{size}`\n // ancestor matched nothing and collapsed. That is what removed the\n // saturation/brightness canvas entirely from every non-inline picker.\n const panel = (\n <div\n className={`eidos-color-picker-panel eidos-color-picker-panel--${size}${\n inline ? ' eidos-color-picker-panel--inline' : ''\n }`}\n >\n {/* 2-D sat / brightness canvas */}\n <div\n ref={canvasRef}\n className=\"eidos-color-picker-canvas\"\n style={{\n background: [\n 'linear-gradient(to top, #000, transparent)',\n `linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,\n ].join(', '),\n }}\n onMouseDown={handleCanvasMouseDown}\n role=\"presentation\"\n >\n <div\n className=\"eidos-color-picker-thumb\"\n style={{\n // Rounded for display only - hsv.s/v are unrounded floats so the\n // hex round trip stays lossless (see rgbToHsv).\n left: `${hsv.s.toFixed(2)}%`,\n top: `${(100 - hsv.v).toFixed(2)}%`,\n background: currentHex,\n }}\n />\n </div>\n\n {/* Sliders */}\n <div className=\"eidos-color-picker-sliders\">\n {/* Hue */}\n <input\n type=\"range\"\n className=\"eidos-color-picker-hue\"\n min={0}\n max={360}\n step={1}\n value={hsv.h}\n disabled={disabled}\n onChange={handleHueChange}\n aria-label=\"Hue\"\n />\n\n {/* Alpha */}\n {showAlpha && (\n <div className=\"eidos-color-picker-alpha-wrapper\">\n <div className=\"eidos-color-picker-alpha-bg\" style={alphaTrackBg} />\n <input\n type=\"range\"\n className=\"eidos-color-picker-alpha\"\n min={0}\n max={100}\n step={1}\n value={Math.round(alpha * 100)}\n disabled={disabled}\n onChange={handleAlphaChange}\n aria-label=\"Opacity\"\n />\n </div>\n )}\n </div>\n\n {/* Text input + format toggles + copy */}\n <div className=\"eidos-color-picker-inputs\">\n <div className=\"eidos-color-picker-format-btns\" role=\"group\" aria-label=\"Colour format\">\n {(['hex', 'rgb', 'hsl'] as ColorFormat[]).map((fmt) => (\n <button\n key={fmt}\n type=\"button\"\n className={[\n 'eidos-color-picker-format-btn',\n activeFormat === fmt && 'eidos-color-picker-format-btn--active',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={() => handleFormatChange(fmt)}\n disabled={disabled}\n aria-pressed={activeFormat === fmt}\n >\n {fmt.toUpperCase()}\n </button>\n ))}\n </div>\n\n <input\n type=\"text\"\n className=\"eidos-color-picker-input\"\n value={inputText}\n disabled={disabled}\n spellCheck={false}\n aria-label=\"Colour value\"\n onChange={(e) => setInputText(e.target.value)}\n onFocus={() => {\n inputFocusedRef.current = true;\n }}\n onBlur={() => {\n inputFocusedRef.current = false;\n handleInputCommit();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleInputCommit();\n if (e.key === 'Escape') {\n setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n }\n }}\n />\n\n <button\n type=\"button\"\n className={['eidos-color-picker-copy', copied && 'eidos-color-picker-copy--copied']\n .filter(Boolean)\n .join(' ')}\n onClick={handleCopy}\n disabled={disabled}\n aria-label=\"Copy colour value\"\n title=\"Copy colour value\"\n >\n {copied ? <Check size={14} /> : <Copy size={14} />}\n </button>\n </div>\n\n {/* Swatches */}\n {showSwatches && (\n <div className=\"eidos-color-picker-swatches\" role=\"group\" aria-label=\"Colour presets\">\n {swatches.map((swatchHex) => (\n <button\n key={swatchHex}\n type=\"button\"\n className={[\n 'eidos-color-picker-swatch',\n currentHex === swatchHex && 'eidos-color-picker-swatch--active',\n ]\n .filter(Boolean)\n .join(' ')}\n style={{ background: swatchHex }}\n onClick={() => handleSwatchClick(swatchHex)}\n disabled={disabled}\n aria-label={`Select ${swatchHex}`}\n title={swatchHex}\n />\n ))}\n </div>\n )}\n </div>\n );\n\n // ── Root element classes ───────────────────────────────────────────────────\n const rootClasses = [\n 'eidos-color-picker',\n `eidos-color-picker--${size}`,\n disabled && 'eidos-color-picker--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // ── Inline mode ───────────────────────────────────────────────────────────\n if (inline) {\n return (\n <div className={rootClasses}>\n {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n {panel}\n </div>\n );\n }\n\n // ── Popover (trigger + Dropdown) ──────────────────────────────────────────\n return (\n <div className={rootClasses}>\n {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n <Dropdown\n trigger={\n <button\n type=\"button\"\n className=\"eidos-color-picker-trigger\"\n disabled={disabled}\n aria-label={label ?? ariaLabel ?? 'Open colour picker'}\n >\n <span\n className=\"eidos-color-picker-trigger-swatch\"\n style={{ background: currentHex }}\n />\n <span className=\"eidos-color-picker-trigger-value\">{currentHex}</span>\n </button>\n }\n content={panel}\n placement=\"bottom\"\n autoWidth={false}\n minWidth={260}\n disabled={disabled}\n />\n </div>\n );\n};\n\nColorPicker.displayName = 'ColorPicker';\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-5YTPZN6X.cjs","../src/components/ColorPicker/ColorPicker.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-5YTPZN6X.cjs","sourcesContent":[null,"import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type {\n ColorPickerProps,\n HSVColor,\n RGBColor,\n HSLColor,\n ColorFormat,\n} from './ColorPicker.types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_SWATCHES: string[] = [\n '#ef4444',\n '#f97316',\n '#f59e0b',\n '#10b981',\n '#06b6d4',\n '#6366f1',\n '#8b5cf6',\n '#ec4899',\n '#64748b',\n '#1e293b',\n];\n\n// ============================================================================\n// Pure colour-utility functions\n// ============================================================================\n\nfunction hsvToRgb(h: number, s: number, v: number): RGBColor {\n // h: 0–360, s: 0–100, v: 0–100 → r,g,b: 0–255\n const sn = s / 100;\n const vn = v / 100;\n const c = vn * sn;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vn - c;\n\n let r: number, g: number, b: number;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n}\n\nfunction rgbToHsv(r: number, g: number, b: number): HSVColor {\n // r,g,b: 0–255 → h: 0–360, s: 0–100, v: 0–100\n const rn = r / 255;\n const gn = g / 255;\n const bn = b / 255;\n\n const max = Math.max(rn, gn, bn);\n const min = Math.min(rn, gn, bn);\n const delta = max - min;\n\n const v = max * 100;\n const s = max === 0 ? 0 : (delta / max) * 100;\n\n let h = 0;\n if (delta !== 0) {\n if (max === rn) h = ((gn - bn) / delta) % 6;\n else if (max === gn) h = (bn - rn) / delta + 2;\n else h = (rn - gn) / delta + 4;\n h = h * 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately NOT rounded. HSV is this component's internal state, and\n // rounding s/v to whole percent makes the hex -> HSV -> hex round trip lossy:\n // `#5c5de8` came back as `#5d5de8`, so a controlled `value` displayed a\n // different colour than the one passed in, and any interaction committed the\n // drifted value. `hsvToRgb` already rounds to whole channels at the end, so\n // precision is only needed in between. Every consumer of these floats (the\n // hue gradient, the thumb offsets, the hue slider) accepts them.\n return { h, s, v };\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const ch = (n: number) =>\n Math.round(Math.max(0, Math.min(255, n)))\n .toString(16)\n .padStart(2, '0');\n return `#${ch(r)}${ch(g)}${ch(b)}`;\n}\n\nfunction hexToRgb(hex: string): RGBColor | null {\n const c = hex.trim().replace(/^#/, '');\n let r: number, g: number, b: number;\n\n if (c.length === 3) {\n r = parseInt(c[0] + c[0], 16);\n g = parseInt(c[1] + c[1], 16);\n b = parseInt(c[2] + c[2], 16);\n } else if (c.length === 6) {\n r = parseInt(c.slice(0, 2), 16);\n g = parseInt(c.slice(2, 4), 16);\n b = parseInt(c.slice(4, 6), 16);\n } else {\n return null;\n }\n\n if (isNaN(r) || isNaN(g) || isNaN(b)) return null;\n return { r, g, b };\n}\n\nfunction rgbToHsl(r: number, g: number, b: number): HSLColor {\n // r,g,b: 0–255 → h: 0–360, s: 0–100, l: 0–100\n const rn = r / 255;\n const gn = g / 255;\n const bn = b / 255;\n\n const max = Math.max(rn, gn, bn);\n const min = Math.min(rn, gn, bn);\n const delta = max - min;\n const l = (max + min) / 2;\n\n let h = 0;\n let s = 0;\n\n if (delta !== 0) {\n s = delta / (1 - Math.abs(2 * l - 1));\n if (max === rn) h = ((gn - bn) / delta) % 6;\n else if (max === gn) h = (bn - rn) / delta + 2;\n else h = (rn - gn) / delta + 4;\n h = h * 60;\n if (h < 0) h += 360;\n }\n\n return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\nfunction hslToRgb(h: number, s: number, l: number): RGBColor {\n // h: 0–360, s: 0–100, l: 0–100 → r,g,b: 0–255\n const sn = s / 100;\n const ln = l / 100;\n const c = (1 - Math.abs(2 * ln - 1)) * sn;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = ln - c / 2;\n\n let r: number, g: number, b: number;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n}\n\n// ============================================================================\n// Format helpers\n// ============================================================================\n\nfunction colorToText(hsv: HSVColor, alpha: number, fmt: ColorFormat): string {\n const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n\n switch (fmt) {\n case 'hex':\n return rgbToHex(rgb.r, rgb.g, rgb.b);\n case 'rgb':\n return alpha < 1\n ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`\n : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n case 'hsl': {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n return alpha < 1\n ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`\n : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n }\n }\n}\n\nfunction parseColorText(text: string): RGBColor | null {\n const t = text.trim();\n\n // Try hex (with or without leading #)\n const hexCandidate = t.startsWith('#') ? t : /^[0-9a-f]{3,6}$/i.test(t) ? `#${t}` : null;\n if (hexCandidate) return hexToRgb(hexCandidate);\n\n // Try rgb() / rgba()\n const rgbMatch = t.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/i);\n if (rgbMatch) {\n return {\n r: parseInt(rgbMatch[1], 10),\n g: parseInt(rgbMatch[2], 10),\n b: parseInt(rgbMatch[3], 10),\n };\n }\n\n // Try hsl() / hsla()\n const hslMatch = t.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?/i);\n if (hslMatch) {\n return hslToRgb(\n parseInt(hslMatch[1], 10),\n parseInt(hslMatch[2], 10),\n parseInt(hslMatch[3], 10),\n );\n }\n\n return null;\n}\n\n/** Parse a hex string to HSVColor, falling back to red on failure. */\nfunction hexToHsv(hex: string): HSVColor {\n const rgb = hexToRgb(hex);\n return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : { h: 0, s: 100, v: 100 };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n value,\n defaultValue,\n onChange,\n format = 'hex',\n showAlpha = false,\n showSwatches = true,\n swatches = DEFAULT_SWATCHES,\n disabled = false,\n size = 'md',\n inline = false,\n label,\n ariaLabel,\n className = '',\n}) => {\n // ── Initial hex (only used on first render by useState) ──────────────────\n const initialHex = value ?? defaultValue ?? '#6366f1';\n\n // ── State ─────────────────────────────────────────────────────────────────\n const [hsv, setHsv] = useState<HSVColor>(() => hexToHsv(initialHex));\n const [alpha, setAlpha] = useState<number>(1);\n const [activeFormat, setActiveFormat] = useState<ColorFormat>(format);\n const [inputText, setInputText] = useState<string>(() =>\n colorToText(hexToHsv(initialHex), 1, format),\n );\n const [copied, setCopied] = useState(false);\n\n // ── Refs - give event handlers always-fresh values without stale closures ──\n const hsvRef = useRef<HSVColor>(hsv);\n hsvRef.current = hsv;\n\n const alphaRef = useRef<number>(alpha);\n alphaRef.current = alpha;\n\n const activeFormatRef = useRef<ColorFormat>(activeFormat);\n activeFormatRef.current = activeFormat;\n\n // onChange is stored in a ref so applyColor never becomes stale\n const onChangeRef = useRef<ColorPickerProps['onChange']>(onChange);\n onChangeRef.current = onChange;\n\n const inputFocusedRef = useRef(false);\n const canvasRef = useRef<HTMLDivElement>(null);\n\n // Refs for in-flight drag listeners - cleaned up on mouseup and on unmount\n const dragHandlersRef = useRef<{\n move: (e: MouseEvent) => void;\n up: () => void;\n } | null>(null);\n\n const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // ── Derived ───────────────────────────────────────────────────────────────\n const currentRgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n const currentHex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);\n\n // ── Sync from controlled `value` prop ─────────────────────────────────────\n // Runs only when `value` changes. We normalize both sides to the same\n // hex format before comparing so that round-trip conversions don't trigger\n // spurious updates (which would overwrite the preserved hue when s/v = 0).\n useEffect(() => {\n if (value === undefined) return;\n const rgb = hexToRgb(value);\n if (!rgb) return;\n const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n const newNormalised = rgbToHex(\n ...(Object.values(hsvToRgb(newHsv.h, newHsv.s, newHsv.v)) as [number, number, number]),\n );\n // currentHex is captured from this render - guards against echo loops\n // when the parent echoes back our own onChange emission\n if (newNormalised === currentHex) return;\n setHsv(newHsv);\n if (!inputFocusedRef.current) {\n setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n }\n }, [value, currentHex]);\n\n // ── Cleanup drag listeners and timers on unmount ──────────────────────────\n useEffect(() => {\n return () => {\n if (dragHandlersRef.current) {\n document.removeEventListener('mousemove', dragHandlersRef.current.move);\n document.removeEventListener('mouseup', dragHandlersRef.current.up);\n }\n if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n };\n }, []);\n\n // ── Core: apply a new HSV + alpha, emit onChange ───────────────────────────\n // Stable (empty dep array) - reads live values exclusively via refs.\n const applyColor = useCallback((newHsv: HSVColor, newAlpha: number) => {\n setHsv(newHsv);\n setAlpha(newAlpha);\n\n if (!inputFocusedRef.current) {\n setInputText(colorToText(newHsv, newAlpha, activeFormatRef.current));\n }\n\n const rgb = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n onChangeRef.current?.(hex);\n }, []);\n\n // ── 2-D saturation / brightness canvas ────────────────────────────────────\n const handleCanvasMouseDown = useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n e.preventDefault();\n\n const pick = (clientX: number, clientY: number) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const s = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));\n const v = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100));\n applyColor({ h: hsvRef.current.h, s, v }, alphaRef.current);\n };\n\n pick(e.clientX, e.clientY);\n\n const handleMouseMove = (me: MouseEvent) => pick(me.clientX, me.clientY);\n const handleMouseUp = () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n dragHandlersRef.current = null;\n };\n\n dragHandlersRef.current = { move: handleMouseMove, up: handleMouseUp };\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n },\n [disabled, applyColor],\n );\n\n // ── Hue slider ────────────────────────────────────────────────────────────\n const handleHueChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n applyColor({ ...hsvRef.current, h: Number(e.target.value) }, alphaRef.current);\n },\n [applyColor],\n );\n\n // ── Alpha slider ──────────────────────────────────────────────────────────\n const handleAlphaChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n applyColor(hsvRef.current, Number(e.target.value) / 100);\n },\n [applyColor],\n );\n\n // ── Format toggle ─────────────────────────────────────────────────────────\n const handleFormatChange = useCallback((fmt: ColorFormat) => {\n setActiveFormat(fmt);\n setInputText(colorToText(hsvRef.current, alphaRef.current, fmt));\n }, []);\n\n // ── Text-input commit (Enter / blur) ──────────────────────────────────────\n const handleInputCommit = useCallback(() => {\n const rgb = parseColorText(inputText);\n if (!rgb) {\n // Invalid - reset to the current valid colour\n setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n return;\n }\n const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n applyColor(newHsv, alphaRef.current);\n // Always normalise the text after a commit (even if the input still has focus)\n setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n }, [inputText, applyColor]);\n\n // ── Swatch click ──────────────────────────────────────────────────────────\n const handleSwatchClick = useCallback(\n (hex: string) => {\n const rgb = hexToRgb(hex);\n if (!rgb) return;\n applyColor(rgbToHsv(rgb.r, rgb.g, rgb.b), alphaRef.current);\n },\n [applyColor],\n );\n\n // ── Copy to clipboard ─────────────────────────────────────────────────────\n const handleCopy = useCallback(() => {\n const text = colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current);\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n // Clipboard access denied - silently ignore\n });\n }, []);\n\n // ── Alpha-slider background gradient ─────────────────────────────────────\n // We use a transparent-to-current-colour gradient layered over a checkerboard\n // so the alpha slider always shows the correct colour transition.\n const transparentColor = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, 0)`;\n\n const alphaTrackBg = {\n backgroundImage: [\n `linear-gradient(to right, ${transparentColor}, ${currentHex})`,\n 'linear-gradient(45deg, #e2e8f0 25%, transparent 25%)',\n 'linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)',\n 'linear-gradient(45deg, transparent 75%, #e2e8f0 75%)',\n 'linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)',\n ].join(', '),\n backgroundSize: '100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px',\n backgroundPosition: '0 0, 0 0, 0 4px, 4px -4px, -4px 0',\n };\n\n // ── Picker panel (shared between inline and popover modes) ────────────────\n //\n // The size modifier has to live on the panel itself, not only on the root:\n // in popover mode the panel is portaled to document.body by Dropdown, so\n // anything inside it that sized itself off a `.eidos-color-picker--{size}`\n // ancestor matched nothing and collapsed. That is what removed the\n // saturation/brightness canvas entirely from every non-inline picker.\n const panel = (\n <div\n className={`eidos-color-picker-panel eidos-color-picker-panel--${size}${\n inline ? ' eidos-color-picker-panel--inline' : ''\n }`}\n >\n {/* 2-D sat / brightness canvas */}\n <div\n ref={canvasRef}\n className=\"eidos-color-picker-canvas\"\n style={{\n background: [\n 'linear-gradient(to top, #000, transparent)',\n `linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,\n ].join(', '),\n }}\n onMouseDown={handleCanvasMouseDown}\n role=\"presentation\"\n >\n <div\n className=\"eidos-color-picker-thumb\"\n style={{\n // Rounded for display only - hsv.s/v are unrounded floats so the\n // hex round trip stays lossless (see rgbToHsv).\n left: `${hsv.s.toFixed(2)}%`,\n top: `${(100 - hsv.v).toFixed(2)}%`,\n background: currentHex,\n }}\n />\n </div>\n\n {/* Sliders */}\n <div className=\"eidos-color-picker-sliders\">\n {/* Hue */}\n <input\n type=\"range\"\n className=\"eidos-color-picker-hue\"\n min={0}\n max={360}\n step={1}\n value={hsv.h}\n disabled={disabled}\n onChange={handleHueChange}\n aria-label=\"Hue\"\n />\n\n {/* Alpha */}\n {showAlpha && (\n <div className=\"eidos-color-picker-alpha-wrapper\">\n <div className=\"eidos-color-picker-alpha-bg\" style={alphaTrackBg} />\n <input\n type=\"range\"\n className=\"eidos-color-picker-alpha\"\n min={0}\n max={100}\n step={1}\n value={Math.round(alpha * 100)}\n disabled={disabled}\n onChange={handleAlphaChange}\n aria-label=\"Opacity\"\n />\n </div>\n )}\n </div>\n\n {/* Text input + format toggles + copy */}\n <div className=\"eidos-color-picker-inputs\">\n <div className=\"eidos-color-picker-format-btns\" role=\"group\" aria-label=\"Colour format\">\n {(['hex', 'rgb', 'hsl'] as ColorFormat[]).map((fmt) => (\n <button\n key={fmt}\n type=\"button\"\n className={[\n 'eidos-color-picker-format-btn',\n activeFormat === fmt && 'eidos-color-picker-format-btn--active',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={() => handleFormatChange(fmt)}\n disabled={disabled}\n aria-pressed={activeFormat === fmt}\n >\n {fmt.toUpperCase()}\n </button>\n ))}\n </div>\n\n <input\n type=\"text\"\n className=\"eidos-color-picker-input\"\n value={inputText}\n disabled={disabled}\n spellCheck={false}\n aria-label=\"Colour value\"\n onChange={(e) => setInputText(e.target.value)}\n onFocus={() => {\n inputFocusedRef.current = true;\n }}\n onBlur={() => {\n inputFocusedRef.current = false;\n handleInputCommit();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleInputCommit();\n if (e.key === 'Escape') {\n setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n }\n }}\n />\n\n <button\n type=\"button\"\n className={['eidos-color-picker-copy', copied && 'eidos-color-picker-copy--copied']\n .filter(Boolean)\n .join(' ')}\n onClick={handleCopy}\n disabled={disabled}\n aria-label=\"Copy colour value\"\n title=\"Copy colour value\"\n >\n {copied ? <Check size={14} /> : <Copy size={14} />}\n </button>\n </div>\n\n {/* Swatches */}\n {showSwatches && (\n <div className=\"eidos-color-picker-swatches\" role=\"group\" aria-label=\"Colour presets\">\n {swatches.map((swatchHex) => (\n <button\n key={swatchHex}\n type=\"button\"\n className={[\n 'eidos-color-picker-swatch',\n currentHex === swatchHex && 'eidos-color-picker-swatch--active',\n ]\n .filter(Boolean)\n .join(' ')}\n style={{ background: swatchHex }}\n onClick={() => handleSwatchClick(swatchHex)}\n disabled={disabled}\n aria-label={`Select ${swatchHex}`}\n title={swatchHex}\n />\n ))}\n </div>\n )}\n </div>\n );\n\n // ── Root element classes ───────────────────────────────────────────────────\n const rootClasses = [\n 'eidos-color-picker',\n `eidos-color-picker--${size}`,\n disabled && 'eidos-color-picker--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // ── Inline mode ───────────────────────────────────────────────────────────\n if (inline) {\n return (\n <div className={rootClasses}>\n {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n {panel}\n </div>\n );\n }\n\n // ── Popover (trigger + Dropdown) ──────────────────────────────────────────\n return (\n <div className={rootClasses}>\n {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n <Dropdown\n trigger={\n <button\n type=\"button\"\n className=\"eidos-color-picker-trigger\"\n disabled={disabled}\n aria-label={label ?? ariaLabel ?? 'Open colour picker'}\n >\n <span\n className=\"eidos-color-picker-trigger-swatch\"\n style={{ background: currentHex }}\n />\n <span className=\"eidos-color-picker-trigger-value\">{currentHex}</span>\n </button>\n }\n content={panel}\n placement=\"bottom\"\n autoWidth={false}\n minWidth={260}\n disabled={disabled}\n />\n </div>\n );\n};\n\nColorPicker.displayName = 'ColorPicker';\n"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkQKCYXFETcjs = require('./chunk-QKCYXFET.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkVY7DTPO3cjs = require('./chunk-VY7DTPO3.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _chunkKF2OGUADcjs = require('./chunk-KF2OGUAD.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunkCPRNLW4Mcjs = require('./chunk-CPRNLW4M.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
var _chunk3ETWFS2Ncjs = require('./chunk-3ETWFS2N.cjs');
|
|
@@ -158,7 +158,7 @@ var TableFiltersDropdown = ({
|
|
|
158
158
|
switch (filterType) {
|
|
159
159
|
case "select":
|
|
160
160
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
161
|
-
|
|
161
|
+
_chunkVY7DTPO3cjs.Select,
|
|
162
162
|
{
|
|
163
163
|
value: row.value || "",
|
|
164
164
|
onChange: (value) => updateFilter(row.id, row.columnKey, value),
|
|
@@ -174,7 +174,7 @@ var TableFiltersDropdown = ({
|
|
|
174
174
|
);
|
|
175
175
|
case "boolean":
|
|
176
176
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
177
|
-
|
|
177
|
+
_chunkVY7DTPO3cjs.Select,
|
|
178
178
|
{
|
|
179
179
|
value: row.value === void 0 ? "" : String(row.value),
|
|
180
180
|
onChange: (value) => updateFilter(row.id, row.columnKey, value === "" ? void 0 : value === "true"),
|
|
@@ -238,7 +238,7 @@ var TableFiltersDropdown = ({
|
|
|
238
238
|
}
|
|
239
239
|
};
|
|
240
240
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
241
|
-
|
|
241
|
+
_chunkQKCYXFETcjs.DatePicker,
|
|
242
242
|
{
|
|
243
243
|
mode: dateMode,
|
|
244
244
|
value: prepareValue(),
|
|
@@ -288,7 +288,7 @@ var TableFiltersDropdown = ({
|
|
|
288
288
|
const isTemporaryFilter = row.columnKey.startsWith("__temp_");
|
|
289
289
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-filter-row", children: [
|
|
290
290
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-column-select", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
291
|
-
|
|
291
|
+
_chunkVY7DTPO3cjs.Select,
|
|
292
292
|
{
|
|
293
293
|
value: isTemporaryFilter ? "" : row.columnKey,
|
|
294
294
|
onChange: (value) => {
|
|
@@ -369,7 +369,7 @@ var TableFiltersDropdown = ({
|
|
|
369
369
|
] }) })
|
|
370
370
|
] });
|
|
371
371
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
372
|
-
|
|
372
|
+
_chunkCPRNLW4Mcjs.Dropdown,
|
|
373
373
|
{
|
|
374
374
|
open: isOpen,
|
|
375
375
|
onOpenChange: setIsOpen,
|
|
@@ -4443,4 +4443,4 @@ function isAfter(a, b) {
|
|
|
4443
4443
|
|
|
4444
4444
|
|
|
4445
4445
|
exports.CSS = CSS; exports.useSensor = useSensor; exports.useSensors = useSensors; exports.closestCenter = closestCenter; exports.KeyboardSensor = KeyboardSensor; exports.PointerSensor = PointerSensor; exports.DndContext = DndContext; exports.arrayMove = arrayMove; exports.horizontalListSortingStrategy = horizontalListSortingStrategy; exports.verticalListSortingStrategy = verticalListSortingStrategy; exports.SortableContext = SortableContext; exports.useSortable = useSortable; exports.sortableKeyboardCoordinates = sortableKeyboardCoordinates; exports.TableFiltersDropdown = TableFiltersDropdown;
|
|
4446
|
-
//# sourceMappingURL=chunk-
|
|
4446
|
+
//# sourceMappingURL=chunk-6Z42NMP4.cjs.map
|