eidos-ui 3.8.0 → 4.0.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/README.md +2 -2
- package/dist/alert/index.cjs +5 -5
- package/dist/alert/index.js +4 -4
- package/dist/button/index.cjs +4 -4
- package/dist/button/index.js +3 -3
- package/dist/chip/index.cjs +4 -4
- package/dist/chip/index.js +3 -3
- package/dist/{chunk-V5CM5TH3.js → chunk-2OBOD3GO.js} +3 -3
- package/dist/{chunk-CFVUUMQA.cjs → chunk-2URFSWJT.cjs} +6 -8
- package/dist/chunk-2URFSWJT.cjs.map +1 -0
- package/dist/{chunk-4S57PE43.js → chunk-2WDL2ZVP.js} +6 -7
- package/dist/chunk-2WDL2ZVP.js.map +1 -0
- package/dist/{chunk-V64DICJK.js → chunk-363IKX3C.js} +3 -3
- package/dist/{chunk-LWCFT5SP.cjs → chunk-3QBMSZSE.cjs} +3 -3
- package/dist/{chunk-LWCFT5SP.cjs.map → chunk-3QBMSZSE.cjs.map} +1 -1
- package/dist/{chunk-6LTZV6HN.js → chunk-43DJ3GGR.js} +19 -19
- package/dist/chunk-43DJ3GGR.js.map +1 -0
- package/dist/{chunk-L6ERHCQ2.js → chunk-57BVERWD.js} +3 -3
- package/dist/{chunk-AUNDBUHM.cjs → chunk-5HRVHEHE.cjs} +3 -3
- package/dist/{chunk-AUNDBUHM.cjs.map → chunk-5HRVHEHE.cjs.map} +1 -1
- package/dist/{chunk-6IB27I5K.cjs → chunk-6JYXGRJ3.cjs} +8 -8
- package/dist/{chunk-6IB27I5K.cjs.map → chunk-6JYXGRJ3.cjs.map} +1 -1
- package/dist/{chunk-NERASTO2.cjs → chunk-6ZFXIYH7.cjs} +3 -3
- package/dist/{chunk-NERASTO2.cjs.map → chunk-6ZFXIYH7.cjs.map} +1 -1
- package/dist/{chunk-IKXXXVUO.js → chunk-7TQUJ6BJ.js} +3 -3
- package/dist/{chunk-544RAXWO.cjs → chunk-7VMF6LIC.cjs} +19 -19
- package/dist/{chunk-544RAXWO.cjs.map → chunk-7VMF6LIC.cjs.map} +1 -1
- package/dist/{chunk-WTFEMOV5.cjs → chunk-ADB7QRX5.cjs} +16 -16
- package/dist/{chunk-WTFEMOV5.cjs.map → chunk-ADB7QRX5.cjs.map} +1 -1
- package/dist/{chunk-6CW5QSYV.cjs → chunk-AFGC62AL.cjs} +7 -7
- package/dist/{chunk-6CW5QSYV.cjs.map → chunk-AFGC62AL.cjs.map} +1 -1
- package/dist/{chunk-U4SVBE2M.js → chunk-AWPJH3UB.js} +4 -4
- package/dist/{chunk-B2OHBIAL.cjs → chunk-BKUZF7CW.cjs} +10 -11
- package/dist/chunk-BKUZF7CW.cjs.map +1 -0
- package/dist/{chunk-WR77IZUU.cjs → chunk-BPVOQLCA.cjs} +7 -7
- package/dist/{chunk-WR77IZUU.cjs.map → chunk-BPVOQLCA.cjs.map} +1 -1
- package/dist/{chunk-MCPGI6EI.js → chunk-BUSMGQJ4.js} +2 -2
- package/dist/{chunk-H3C6YECZ.js → chunk-D2PXPX56.js} +6 -6
- package/dist/{chunk-L6YJ6QTZ.js → chunk-DCUIT7SI.js} +2 -2
- package/dist/{chunk-HYRLK462.js → chunk-EDPCI2JC.js} +2 -2
- package/dist/{chunk-DPTTDHZ5.js → chunk-FAGQGGT3.js} +3 -3
- package/dist/{chunk-CNTG7OOO.js → chunk-FAXDWZQH.js} +12 -12
- package/dist/{chunk-7NUVLVSL.cjs → chunk-FJSK2RT7.cjs} +5 -5
- package/dist/{chunk-7NUVLVSL.cjs.map → chunk-FJSK2RT7.cjs.map} +1 -1
- package/dist/{chunk-P6OJQ2RN.js → chunk-FSX7DDLO.js} +8 -9
- package/dist/chunk-FSX7DDLO.js.map +1 -0
- package/dist/{chunk-XIUZT4TO.js → chunk-GE3QCXT7.js} +6 -7
- package/dist/chunk-GE3QCXT7.js.map +1 -0
- package/dist/{chunk-JY77VJAZ.js → chunk-GHUEVNNU.js} +3 -3
- package/dist/{chunk-4V2XYUQL.js → chunk-GLEPKX2R.js} +2 -2
- package/dist/{chunk-QUSO4GFA.cjs → chunk-GRKC4PIX.cjs} +24 -24
- package/dist/chunk-GRKC4PIX.cjs.map +1 -0
- package/dist/{chunk-SLHIVEFW.cjs → chunk-HKLLKNRQ.cjs} +6 -9
- package/dist/chunk-HKLLKNRQ.cjs.map +1 -0
- package/dist/{chunk-2TIMJD4K.js → chunk-IBT535UH.js} +3 -3
- package/dist/{chunk-HR5MWA3B.cjs → chunk-IJW6YCJB.cjs} +5 -5
- package/dist/{chunk-HR5MWA3B.cjs.map → chunk-IJW6YCJB.cjs.map} +1 -1
- package/dist/{chunk-NNAEQR3Y.cjs → chunk-K6VEUJLY.cjs} +30 -30
- package/dist/{chunk-NNAEQR3Y.cjs.map → chunk-K6VEUJLY.cjs.map} +1 -1
- package/dist/{chunk-F5IRMMZ2.cjs → chunk-K73JO4FK.cjs} +7 -7
- package/dist/{chunk-F5IRMMZ2.cjs.map → chunk-K73JO4FK.cjs.map} +1 -1
- package/dist/{chunk-4HZIXRAJ.cjs → chunk-KF2OGUAD.cjs} +11 -12
- package/dist/chunk-KF2OGUAD.cjs.map +1 -0
- package/dist/{chunk-TJQNGJHP.js → chunk-KLHC5BHS.js} +4 -4
- package/dist/{chunk-XWMXEJVZ.js → chunk-KZKBZ2AV.js} +5 -7
- package/dist/chunk-KZKBZ2AV.js.map +1 -0
- package/dist/{chunk-DG3O5NV4.cjs → chunk-LLHR6QW3.cjs} +3 -3
- package/dist/{chunk-DG3O5NV4.cjs.map → chunk-LLHR6QW3.cjs.map} +1 -1
- package/dist/{chunk-GDRLVX2A.js → chunk-LXRNFQEI.js} +4 -4
- package/dist/{chunk-VXC7Z7XB.cjs → chunk-MKQVDEHI.cjs} +5 -6
- package/dist/chunk-MKQVDEHI.cjs.map +1 -0
- package/dist/{chunk-TNQ2ZZ7W.cjs → chunk-MUMTPMWD.cjs} +7 -7
- package/dist/{chunk-TNQ2ZZ7W.cjs.map → chunk-MUMTPMWD.cjs.map} +1 -1
- package/dist/{chunk-RHWZX7PB.js → chunk-NONYIHXD.js} +4 -4
- package/dist/{chunk-XPG56DLQ.cjs → chunk-NSA7ASZ7.cjs} +8 -8
- package/dist/{chunk-XPG56DLQ.cjs.map → chunk-NSA7ASZ7.cjs.map} +1 -1
- package/dist/{chunk-6NAOAKII.js → chunk-NWFGXLQP.js} +2 -2
- package/dist/{chunk-HLI4SOH3.cjs → chunk-NYGRVB2J.cjs} +45 -45
- package/dist/{chunk-HLI4SOH3.cjs.map → chunk-NYGRVB2J.cjs.map} +1 -1
- package/dist/{chunk-UUT2VEN5.cjs → chunk-OC2OBBGM.cjs} +7 -8
- package/dist/chunk-OC2OBBGM.cjs.map +1 -0
- package/dist/{chunk-3X6QVHTD.js → chunk-OERK3T7E.js} +3 -4
- package/dist/chunk-OERK3T7E.js.map +1 -0
- package/dist/{chunk-ZJWQPZ7E.js → chunk-OQWG7NLI.js} +3 -11
- package/dist/chunk-OQWG7NLI.js.map +1 -0
- package/dist/{chunk-U34INRFO.js → chunk-PP6HS4GR.js} +5 -16
- package/dist/chunk-PP6HS4GR.js.map +1 -0
- package/dist/{chunk-OGGZIFTI.cjs → chunk-PVNBH7XN.cjs} +36 -36
- package/dist/{chunk-OGGZIFTI.cjs.map → chunk-PVNBH7XN.cjs.map} +1 -1
- package/dist/{chunk-H46ZLPNJ.cjs → chunk-QDZVZY53.cjs} +7 -7
- package/dist/{chunk-H46ZLPNJ.cjs.map → chunk-QDZVZY53.cjs.map} +1 -1
- package/dist/{chunk-ENMDOQQO.cjs → chunk-R5WI5IGR.cjs} +6 -17
- package/dist/{chunk-ENMDOQQO.cjs.map → chunk-R5WI5IGR.cjs.map} +1 -1
- package/dist/{chunk-UTYY35QX.cjs → chunk-RZMQCVAS.cjs} +3 -3
- package/dist/{chunk-UTYY35QX.cjs.map → chunk-RZMQCVAS.cjs.map} +1 -1
- package/dist/{chunk-7FV2X62W.cjs → chunk-SJKD3WCV.cjs} +7 -7
- package/dist/{chunk-7FV2X62W.cjs.map → chunk-SJKD3WCV.cjs.map} +1 -1
- package/dist/{chunk-LUDK44NZ.cjs → chunk-SJPCBRKR.cjs} +3 -3
- package/dist/{chunk-LUDK44NZ.cjs.map → chunk-SJPCBRKR.cjs.map} +1 -1
- package/dist/{chunk-3TF2GZSG.js → chunk-SONL2RCW.js} +7 -7
- package/dist/{chunk-2IXCEKLI.js → chunk-SOS4K7VC.js} +2 -2
- package/dist/{chunk-WHQGJHMD.js → chunk-TOLNPD7S.js} +4 -4
- package/dist/{chunk-FE7S4RSK.js → chunk-U5KD4BWL.js} +7 -7
- package/dist/{chunk-FHOD3FUN.js → chunk-UTOTOWPS.js} +4 -4
- package/dist/{chunk-YIOHKQ6Y.cjs → chunk-VCG647BY.cjs} +5 -13
- package/dist/chunk-VCG647BY.cjs.map +1 -0
- package/dist/{chunk-N5NXKVFJ.cjs → chunk-VPN7AR7T.cjs} +10 -10
- package/dist/{chunk-N5NXKVFJ.cjs.map → chunk-VPN7AR7T.cjs.map} +1 -1
- package/dist/{chunk-6FXFKMJ5.js → chunk-XBIMNWE6.js} +3 -3
- package/dist/{chunk-Z3IJWYUD.js → chunk-XOUNVK45.js} +2 -2
- package/dist/{chunk-3VXUOAIJ.cjs → chunk-XR72A66Q.cjs} +3 -7
- package/dist/chunk-XR72A66Q.cjs.map +1 -0
- package/dist/{chunk-ULKWUKD2.cjs → chunk-YHSCUPP6.cjs} +22 -23
- package/dist/chunk-YHSCUPP6.cjs.map +1 -0
- package/dist/{chunk-S5CMZFX6.js → chunk-YPEJH57Z.js} +6 -7
- package/dist/chunk-YPEJH57Z.js.map +1 -0
- package/dist/{chunk-BO3KK3ZQ.js → chunk-YPPG7NLW.js} +2 -6
- package/dist/chunk-YPPG7NLW.js.map +1 -0
- package/dist/{chunk-PE2SLXUS.cjs → chunk-YWXS4IPH.cjs} +5 -5
- package/dist/{chunk-PE2SLXUS.cjs.map → chunk-YWXS4IPH.cjs.map} +1 -1
- package/dist/{chunk-UC4NYF6T.js → chunk-YYA5SWXD.js} +2 -2
- package/dist/{chunk-JFV56ISS.cjs → chunk-YZEALKC4.cjs} +6 -6
- package/dist/{chunk-JFV56ISS.cjs.map → chunk-YZEALKC4.cjs.map} +1 -1
- package/dist/{chunk-IHPSRTVW.js → chunk-Z3OEYDNI.js} +4 -7
- package/dist/chunk-Z3OEYDNI.js.map +1 -0
- package/dist/{chunk-MKC6V3SY.cjs → chunk-Z6FZ7GI5.cjs} +6 -6
- package/dist/{chunk-MKC6V3SY.cjs.map → chunk-Z6FZ7GI5.cjs.map} +1 -1
- package/dist/{chunk-NFD7MPX4.cjs → chunk-ZVA5KJAJ.cjs} +11 -11
- package/dist/{chunk-NFD7MPX4.cjs.map → chunk-ZVA5KJAJ.cjs.map} +1 -1
- package/dist/color-picker/index.cjs +4 -4
- package/dist/color-picker/index.js +3 -3
- package/dist/combobox/index.cjs +6 -6
- package/dist/combobox/index.js +5 -5
- package/dist/command-palette/index.cjs +3 -3
- package/dist/command-palette/index.js +2 -2
- package/dist/context-menu/index.cjs +6 -6
- package/dist/context-menu/index.js +5 -5
- package/dist/conversation/index.cjs +8 -8
- package/dist/conversation/index.js +7 -7
- package/dist/data-grid/index.cjs +15 -15
- package/dist/data-grid/index.js +14 -14
- package/dist/date-picker/index.cjs +8 -8
- package/dist/date-picker/index.js +7 -7
- package/dist/drawer/index.cjs +5 -5
- package/dist/drawer/index.js +4 -4
- package/dist/dropdown/index.cjs +3 -3
- package/dist/dropdown/index.js +2 -2
- package/dist/header/index.cjs +6 -6
- package/dist/header/index.js +5 -5
- package/dist/index.cjs +38 -38
- package/dist/index.js +37 -37
- package/dist/inline-edit/index.cjs +5 -5
- package/dist/inline-edit/index.js +4 -4
- package/dist/input/index.cjs +4 -4
- package/dist/input/index.js +3 -3
- package/dist/menu/index.cjs +5 -5
- package/dist/menu/index.js +4 -4
- package/dist/modal/index.cjs +5 -5
- package/dist/modal/index.js +4 -4
- package/dist/navigation/index.cjs +5 -5
- package/dist/navigation/index.js +4 -4
- package/dist/number-input/index.cjs +2 -4
- package/dist/number-input/index.cjs.map +1 -1
- package/dist/number-input/index.js +1 -3
- package/dist/page-layout/index.cjs +12 -12
- package/dist/page-layout/index.js +11 -11
- package/dist/pagination/index.cjs +8 -8
- package/dist/pagination/index.js +7 -7
- package/dist/popover/index.cjs +3 -3
- package/dist/popover/index.d.cts +1 -3
- package/dist/popover/index.d.ts +1 -3
- package/dist/popover/index.js +2 -2
- package/dist/segmented-control/index.cjs +4 -4
- package/dist/segmented-control/index.js +3 -3
- package/dist/select/index.cjs +6 -6
- package/dist/select/index.js +5 -5
- package/dist/snackbar/index.cjs +5 -5
- package/dist/snackbar/index.js +4 -4
- package/dist/split-button/index.cjs +6 -6
- package/dist/split-button/index.js +5 -5
- package/dist/split-chip/index.cjs +5 -5
- package/dist/split-chip/index.js +4 -4
- package/dist/table/index.cjs +13 -13
- package/dist/table/index.js +12 -12
- package/dist/tabs/index.cjs +3 -3
- package/dist/tabs/index.js +2 -2
- package/dist/tag-input/index.cjs +6 -6
- package/dist/tag-input/index.js +5 -5
- package/dist/textarea/index.cjs +4 -4
- package/dist/textarea/index.js +3 -3
- package/dist/theme-editor/index.cjs +11 -11
- package/dist/theme-editor/index.js +10 -10
- package/dist/theme-provider/index.cjs +3 -3
- package/dist/theme-provider/index.js +2 -2
- package/dist/toolbar/index.cjs +8 -8
- package/dist/toolbar/index.js +7 -7
- package/dist/tooltip/index.cjs +3 -3
- package/dist/tooltip/index.js +2 -2
- package/package.json +4 -2
- package/dist/chunk-3VXUOAIJ.cjs.map +0 -1
- package/dist/chunk-3X6QVHTD.js.map +0 -1
- package/dist/chunk-4HZIXRAJ.cjs.map +0 -1
- package/dist/chunk-4S57PE43.js.map +0 -1
- package/dist/chunk-6LTZV6HN.js.map +0 -1
- package/dist/chunk-B2OHBIAL.cjs.map +0 -1
- package/dist/chunk-BO3KK3ZQ.js.map +0 -1
- package/dist/chunk-CFVUUMQA.cjs.map +0 -1
- package/dist/chunk-IHPSRTVW.js.map +0 -1
- package/dist/chunk-P6OJQ2RN.js.map +0 -1
- package/dist/chunk-QUSO4GFA.cjs.map +0 -1
- package/dist/chunk-S5CMZFX6.js.map +0 -1
- package/dist/chunk-SLHIVEFW.cjs.map +0 -1
- package/dist/chunk-U34INRFO.js.map +0 -1
- package/dist/chunk-ULKWUKD2.cjs.map +0 -1
- package/dist/chunk-UUT2VEN5.cjs.map +0 -1
- package/dist/chunk-VXC7Z7XB.cjs.map +0 -1
- package/dist/chunk-XIUZT4TO.js.map +0 -1
- package/dist/chunk-XWMXEJVZ.js.map +0 -1
- package/dist/chunk-YIOHKQ6Y.cjs.map +0 -1
- package/dist/chunk-ZJWQPZ7E.js.map +0 -1
- /package/dist/{chunk-V5CM5TH3.js.map → chunk-2OBOD3GO.js.map} +0 -0
- /package/dist/{chunk-V64DICJK.js.map → chunk-363IKX3C.js.map} +0 -0
- /package/dist/{chunk-L6ERHCQ2.js.map → chunk-57BVERWD.js.map} +0 -0
- /package/dist/{chunk-IKXXXVUO.js.map → chunk-7TQUJ6BJ.js.map} +0 -0
- /package/dist/{chunk-U4SVBE2M.js.map → chunk-AWPJH3UB.js.map} +0 -0
- /package/dist/{chunk-MCPGI6EI.js.map → chunk-BUSMGQJ4.js.map} +0 -0
- /package/dist/{chunk-H3C6YECZ.js.map → chunk-D2PXPX56.js.map} +0 -0
- /package/dist/{chunk-L6YJ6QTZ.js.map → chunk-DCUIT7SI.js.map} +0 -0
- /package/dist/{chunk-HYRLK462.js.map → chunk-EDPCI2JC.js.map} +0 -0
- /package/dist/{chunk-DPTTDHZ5.js.map → chunk-FAGQGGT3.js.map} +0 -0
- /package/dist/{chunk-CNTG7OOO.js.map → chunk-FAXDWZQH.js.map} +0 -0
- /package/dist/{chunk-JY77VJAZ.js.map → chunk-GHUEVNNU.js.map} +0 -0
- /package/dist/{chunk-4V2XYUQL.js.map → chunk-GLEPKX2R.js.map} +0 -0
- /package/dist/{chunk-2TIMJD4K.js.map → chunk-IBT535UH.js.map} +0 -0
- /package/dist/{chunk-TJQNGJHP.js.map → chunk-KLHC5BHS.js.map} +0 -0
- /package/dist/{chunk-GDRLVX2A.js.map → chunk-LXRNFQEI.js.map} +0 -0
- /package/dist/{chunk-RHWZX7PB.js.map → chunk-NONYIHXD.js.map} +0 -0
- /package/dist/{chunk-6NAOAKII.js.map → chunk-NWFGXLQP.js.map} +0 -0
- /package/dist/{chunk-3TF2GZSG.js.map → chunk-SONL2RCW.js.map} +0 -0
- /package/dist/{chunk-2IXCEKLI.js.map → chunk-SOS4K7VC.js.map} +0 -0
- /package/dist/{chunk-WHQGJHMD.js.map → chunk-TOLNPD7S.js.map} +0 -0
- /package/dist/{chunk-FE7S4RSK.js.map → chunk-U5KD4BWL.js.map} +0 -0
- /package/dist/{chunk-FHOD3FUN.js.map → chunk-UTOTOWPS.js.map} +0 -0
- /package/dist/{chunk-6FXFKMJ5.js.map → chunk-XBIMNWE6.js.map} +0 -0
- /package/dist/{chunk-Z3IJWYUD.js.map → chunk-XOUNVK45.js.map} +0 -0
- /package/dist/{chunk-UC4NYF6T.js.map → chunk-YYA5SWXD.js.map} +0 -0
|
@@ -1,10 +1,9 @@
|
|
|
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 _chunkRZMQCVAScjs = require('./chunk-RZMQCVAS.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
|
|
6
|
+
var _chunkR5WI5IGRcjs = require('./chunk-R5WI5IGR.cjs');
|
|
8
7
|
|
|
9
8
|
// src/components/Textarea/Textarea.component.tsx
|
|
10
9
|
var _react = require('react');
|
|
@@ -49,7 +48,7 @@ var Textarea = _react.forwardRef.call(void 0,
|
|
|
49
48
|
};
|
|
50
49
|
const containerClasses = [
|
|
51
50
|
"eidos-textarea-container",
|
|
52
|
-
fullWidth &&
|
|
51
|
+
fullWidth && "eidos-textarea-container--full-width",
|
|
53
52
|
className
|
|
54
53
|
].filter(Boolean).join(" ");
|
|
55
54
|
const wrapperClasses = [
|
|
@@ -57,7 +56,7 @@ var Textarea = _react.forwardRef.call(void 0,
|
|
|
57
56
|
`eidos-textarea-wrapper--${variant}`,
|
|
58
57
|
`eidos-textarea-wrapper--${color}`,
|
|
59
58
|
`eidos-textarea-wrapper--${size}`,
|
|
60
|
-
fullWidth &&
|
|
59
|
+
fullWidth && "eidos-textarea-wrapper--full-width",
|
|
61
60
|
loading && "eidos-textarea-wrapper--loading",
|
|
62
61
|
isFocused && "eidos-textarea-wrapper--focused",
|
|
63
62
|
error && "eidos-textarea-wrapper--error"
|
|
@@ -68,7 +67,7 @@ var Textarea = _react.forwardRef.call(void 0,
|
|
|
68
67
|
`eidos-textarea--${color}`,
|
|
69
68
|
`eidos-textarea--${size}`,
|
|
70
69
|
`eidos-textarea--resize-${resize}`,
|
|
71
|
-
fullWidth &&
|
|
70
|
+
fullWidth && "eidos-textarea--full-width",
|
|
72
71
|
loading && "eidos-textarea--loading",
|
|
73
72
|
error && "eidos-textarea--error"
|
|
74
73
|
].filter(Boolean).join(" ");
|
|
@@ -82,7 +81,7 @@ var Textarea = _react.forwardRef.call(void 0,
|
|
|
82
81
|
label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: textareaId, className: labelClasses, children: [
|
|
83
82
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-label-text", children: label }),
|
|
84
83
|
isRequired && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-required-asterisk", children: "*" }),
|
|
85
|
-
disclaimerIcon && (disclaimerContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
84
|
+
disclaimerIcon && (disclaimerContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: disclaimerContent, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-disclaimer-icon", children: _chunkR5WI5IGRcjs.renderIcon.call(void 0, disclaimerIcon, "eidos-textarea-disclaimer-icon-svg") }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-disclaimer-icon", children: _chunkR5WI5IGRcjs.renderIcon.call(void 0, disclaimerIcon, "eidos-textarea-disclaimer-icon-svg") }))
|
|
86
85
|
] }),
|
|
87
86
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
|
|
88
87
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -127,4 +126,4 @@ Textarea.displayName = "Textarea";
|
|
|
127
126
|
|
|
128
127
|
|
|
129
128
|
exports.Textarea = Textarea;
|
|
130
|
-
//# sourceMappingURL=chunk-
|
|
129
|
+
//# sourceMappingURL=chunk-OC2OBBGM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OC2OBBGM.cjs","../src/components/Textarea/Textarea.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACPA,8BAAmD;AACnD,2CAA4B;AA8GlB,+CAAA;AAzGH,IAAM,SAAA,EAAW,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,QAAA,EAAU,QAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,IAAA;AAAA,IACP,SAAA,EAAW,KAAA;AAAA,IACX,QAAA,EAAU,KAAA;AAAA,IACV,UAAA,EAAY,EAAA;AAAA,IACZ,UAAA,EAAY,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,CAAA;AAAA,IACP,OAAA,EAAS,UAAA;AAAA,IACT,UAAA,EAAY,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,YAAA,EAAc,0BAAA,CAAM;AAC1B,IAAA,MAAM,WAAA,EAAa,GAAA,GAAM,CAAA,SAAA,EAAY,WAAW,CAAA,CAAA;AAKnB,IAAA;AAKkB,IAAA;AAGE,IAAA;AACJ,IAAA;AACG,IAAA;AAEZ,IAAA;AAGS,IAAA;AAGvB,IAAA;AAE8C,IAAA;AAC/C,MAAA;AACW,QAAA;AAC9B,MAAA;AAC8B,sBAAA;AAChC,IAAA;AAIyB,IAAA;AACvB,MAAA;AACa,MAAA;AACb,MAAA;AAGS,IAAA;AAEY,IAAA;AACrB,MAAA;AACkC,MAAA;AACF,MAAA;AACD,MAAA;AAClB,MAAA;AACF,MAAA;AACE,MAAA;AACJ,MAAA;AAGA,IAAA;AAEa,IAAA;AACtB,MAAA;AAC0B,MAAA;AACF,MAAA;AACD,MAAA;AACS,MAAA;AACnB,MAAA;AACF,MAAA;AACF,MAAA;AAGA,IAAA;AAEU,IAAA;AACnB,MAAA;AACoB,MAAA;AACF,MAAA;AACT,MAAA;AAGA,IAAA;AAGO,IAAA;AAEL,MAAA;AACW,wBAAA;AACK,QAAA;AAGjB,QAAA;AAUN,MAAA;AAGc,sBAAA;AACd,wBAAA;AAAC,UAAA;AAAA,UAAA;AACC,YAAA;AACI,YAAA;AACO,YAAA;AACkB,YAAA;AACO,YAAA;AACpC,YAAA;AACA,YAAA;AACsB,YAAA;AAClB,YAAA;AACG,YAAA;AACS,YAAA;AACG,cAAA;AACY,8BAAA;AAC/B,YAAA;AACe,YAAA;AACK,cAAA;AACU,8BAAA;AAC9B,YAAA;AACU,YAAA;AAAA,UAAA;AACZ,QAAA;AAGE,QAAA;AAC8B,UAAA;AAAO,UAAA;AAAE,UAAA;AACvC,QAAA;AAEJ,MAAA;AAGW,MAAA;AACM,wBAAA;AACN,wBAAA;AACT,MAAA;AAEJ,IAAA;AAEJ,EAAA;AACF;AAEuB;AD9C8B;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OC2OBBGM.cjs","sourcesContent":[null,"import React, { forwardRef, useState, useId } from 'react';\nimport { CircleAlert } from 'lucide-react';\nimport { renderIcon } from '../../utils';\nimport type { TextareaProps } from './Textarea.types';\nimport { Tooltip } from '../Tooltip/Tooltip.component';\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n (\n {\n variant = 'filled',\n color = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n className = '',\n fullWidth = false,\n label,\n error,\n disclaimerIcon,\n disclaimerContent,\n required,\n rows = 4,\n resize = 'vertical',\n showCount = false,\n maxLength,\n id,\n ...textareaProps\n },\n ref,\n ) => {\n const generatedId = useId();\n const textareaId = id || `textarea-${generatedId}`;\n // Associates the visible error with the control. Without it the message\n // is just a red line of text sitting near the field - obvious to look\n // at, absent from the accessibility tree (SC 3.3.1). See the fuller\n // note in `Input`.\n const errorId = `${textareaId}-error`;\n\n // Extract defaultValue so it never reaches the native <textarea> alongside `value`.\n // Same reasoning as Input: we always set value={currentValue}, so having defaultValue\n // in the spread as well triggers React's controlled/uncontrolled warning.\n const { defaultValue, ...restTextareaProps } = textareaProps;\n\n // Determine if using controlled or uncontrolled mode\n const isControlled = restTextareaProps.value !== undefined;\n const [localValue, setLocalValue] = useState(defaultValue != null ? String(defaultValue) : '');\n const [isFocused, setIsFocused] = useState(false);\n\n const currentValue = isControlled ? restTextareaProps.value : localValue;\n\n // Label floats when the field has content (same logic as Input)\n const shouldFloatLabel = Boolean(currentValue) || Boolean(defaultValue);\n\n const isRequired =\n required || Boolean('required' in restTextareaProps && restTextareaProps.required);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n setLocalValue(e.target.value);\n }\n restTextareaProps.onChange?.(e);\n };\n\n // ── Class lists ──────────────────────────────────────────────────────────\n\n const containerClasses = [\n 'eidos-textarea-container',\n fullWidth && 'eidos-textarea-container--full-width',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const wrapperClasses = [\n 'eidos-textarea-wrapper',\n `eidos-textarea-wrapper--${variant}`,\n `eidos-textarea-wrapper--${color}`,\n `eidos-textarea-wrapper--${size}`,\n fullWidth && 'eidos-textarea-wrapper--full-width',\n loading && 'eidos-textarea-wrapper--loading',\n isFocused && 'eidos-textarea-wrapper--focused',\n error && 'eidos-textarea-wrapper--error',\n ]\n .filter(Boolean)\n .join(' ');\n\n const textareaClasses = [\n 'eidos-textarea',\n `eidos-textarea--${variant}`,\n `eidos-textarea--${color}`,\n `eidos-textarea--${size}`,\n `eidos-textarea--resize-${resize}`,\n fullWidth && 'eidos-textarea--full-width',\n loading && 'eidos-textarea--loading',\n error && 'eidos-textarea--error',\n ]\n .filter(Boolean)\n .join(' ');\n\n const labelClasses = [\n 'eidos-textarea-label',\n shouldFloatLabel && 'eidos-textarea-label--floating',\n disclaimerIcon && 'eidos-textarea-label--with-icon',\n error && 'eidos-textarea-label--error',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={containerClasses}>\n {label && (\n <label htmlFor={textareaId} className={labelClasses}>\n <span className=\"eidos-textarea-label-text\">{label}</span>\n {isRequired && <span className=\"eidos-textarea-required-asterisk\">*</span>}\n {disclaimerIcon &&\n (disclaimerContent ? (\n <Tooltip message={disclaimerContent}>\n <span className=\"eidos-textarea-disclaimer-icon\">\n {renderIcon(disclaimerIcon, 'eidos-textarea-disclaimer-icon-svg')}\n </span>\n </Tooltip>\n ) : (\n <span className=\"eidos-textarea-disclaimer-icon\">\n {renderIcon(disclaimerIcon, 'eidos-textarea-disclaimer-icon-svg')}\n </span>\n ))}\n </label>\n )}\n\n <div className={wrapperClasses}>\n <textarea\n ref={ref}\n id={textareaId}\n className={textareaClasses}\n aria-invalid={error ? true : undefined}\n aria-describedby={error ? errorId : undefined}\n rows={rows}\n maxLength={maxLength}\n disabled={disabled || loading}\n {...restTextareaProps}\n value={currentValue}\n onFocus={(e) => {\n setIsFocused(true);\n restTextareaProps.onFocus?.(e);\n }}\n onBlur={(e) => {\n setIsFocused(false);\n restTextareaProps.onBlur?.(e);\n }}\n onChange={handleChange}\n />\n\n {showCount && maxLength && (\n <span className=\"eidos-textarea-count\">\n {String(currentValue ?? '').length}/{maxLength}\n </span>\n )}\n </div>\n\n {error && (\n <div id={errorId} className=\"eidos-textarea-error-message\">\n <CircleAlert className=\"eidos-textarea-error-icon\" />\n <span>{error}</span>\n </div>\n )}\n </div>\n );\n },\n);\n\nTextarea.displayName = 'Textarea';\n"]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
devWarn,
|
|
3
|
-
fullWidthModifier,
|
|
4
3
|
useIsClient
|
|
5
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-PP6HS4GR.js";
|
|
6
5
|
|
|
7
6
|
// src/components/Dropdown/Dropdown.context.types.ts
|
|
8
7
|
import { createContext } from "react";
|
|
@@ -366,7 +365,7 @@ var DropdownInternal = ({
|
|
|
366
365
|
{
|
|
367
366
|
ref: triggerRef,
|
|
368
367
|
onClick: handleTriggerClick,
|
|
369
|
-
className: `eidos-dropdown-trigger ${fullWidth ?
|
|
368
|
+
className: `eidos-dropdown-trigger ${fullWidth ? "eidos-dropdown-trigger--full-width" : ""} ${triggerClassName}`,
|
|
370
369
|
children: trigger
|
|
371
370
|
}
|
|
372
371
|
),
|
|
@@ -404,4 +403,4 @@ export {
|
|
|
404
403
|
useDropdownContext,
|
|
405
404
|
Dropdown
|
|
406
405
|
};
|
|
407
|
-
//# sourceMappingURL=chunk-
|
|
406
|
+
//# sourceMappingURL=chunk-OERK3T7E.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.types.ts","../src/components/Dropdown/Dropdown.context.tsx","../src/components/Dropdown/Dropdown.hooks.ts","../src/components/Dropdown/Dropdown.component.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport interface DropdownContextValue {\n level: number;\n}\n\nexport const DropdownContext = createContext<DropdownContextValue>({ level: 0 });\n","import React from 'react';\nimport { DropdownContext } from './Dropdown.context.types';\n\nexport const DropdownProvider: React.FC<{ children: React.ReactNode; level?: number }> = ({\n children,\n level = 0,\n}) => {\n return <DropdownContext.Provider value={{ level }}>{children}</DropdownContext.Provider>;\n};\n","import { useContext } from 'react';\nimport { DropdownContext } from './Dropdown.context.types';\n\nexport const useDropdownContext = () => {\n return useContext(DropdownContext);\n};\n","import React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { devWarn, useIsClient } from '../../utils';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { DropdownProvider } from './Dropdown.context';\nimport { useDropdownContext } from './Dropdown.hooks';\n\nconst DropdownInternal: React.FC<DropdownProps> = ({\n trigger,\n content,\n placement: preferredPlacement = 'bottom',\n align = 'start',\n delay = 0,\n disabled = false,\n defaultOpen = false,\n open,\n onOpenChange,\n triggerClassName = '',\n contentClassName = '',\n role,\n closeOnClickOutside = true,\n closeOnEscape = true,\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n autoWidth = true,\n fullWidth = false,\n triggerRef: externalTriggerRef,\n isNested = false,\n dropdownLevel,\n dropdownGroup,\n}) => {\n const context = useDropdownContext();\n const actualLevel = dropdownLevel !== undefined ? dropdownLevel : context.level;\n // `defaultOpen` makes the portal reachable on the first render, which cannot\n // happen on a server - see `useIsClient`.\n const isClient = useIsClient();\n const [dropdownState, setDropdownState] = useState<DropdownState>({\n isVisible: defaultOpen,\n isPositioned: false,\n position: { top: 0, left: 0, placement: preferredPlacement },\n });\n\n // ── Controlled / uncontrolled open state ──────────────────────────────────\n //\n // `dropdownState.isVisible` stays the *uncontrolled* value and is kept in\n // step even while controlled, so removing `open` later leaves coherent state.\n // Everything downstream reads `isVisible` below, never the field directly.\n //\n // `DropdownState` is exported from the package root, so it keeps its shape:\n // splitting `isVisible` out of it would be a breaking type change for a\n // consumer who imports it, in exchange for nothing a reader of this file\n // needs.\n const isControlled = open !== undefined;\n const isVisible = isControlled ? open : dropdownState.isVisible;\n\n const wasControlled = useRef(isControlled);\n if (wasControlled.current !== isControlled) {\n devWarn(\n 'dropdown-controlled-switch',\n 'Dropdown: `open` switched between controlled and uncontrolled. Pick one for the lifetime of the component - the dropdown keeps its own state as a fallback, so switching makes it jump to whatever that happens to be.',\n );\n wasControlled.current = isControlled;\n }\n\n /**\n * The single place the open state changes. Every route - trigger click,\n * click-outside, Escape, a group sibling, the `delay` timer - goes through\n * here, so a controlled consumer sees all of them and cannot desync.\n */\n const setOpen = useCallback(\n (next: boolean) => {\n setDropdownState((prev) => ({ ...prev, isVisible: next, isPositioned: false }));\n onOpenChange?.(next);\n },\n [onOpenChange],\n );\n\n // A controlled caller can flip `open` without going through `setOpen`, which\n // would leave `isPositioned` true from the previous open and paint the panel\n // at its old coordinates for a frame. Re-arm the positioning pass from the\n // transition itself.\n useEffect(() => {\n if (!isVisible) {\n setDropdownState((prev) => (prev.isPositioned ? { ...prev, isPositioned: false } : prev));\n }\n }, [isVisible]);\n\n // A pending `delay` timer outlives a controlled close otherwise, and reopens\n // the panel a moment after the consumer closed it.\n useEffect(() => {\n if (!isVisible && timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = undefined;\n }\n }, [isVisible]);\n const triggerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n const animationFrameRef = useRef<number | undefined>(undefined);\n const isScrollingRef = useRef(false);\n\n // The element to actually measure/anchor against. When a consumer passes\n // `triggerRef`, that's an explicit statement of \"this is what I want the\n // dropdown positioned relative to\" - it must win over the internal wrapper\n // div, not just inform sizing. Consumers occasionally need `trigger` to be\n // a small anchor node (e.g. a 0-height span) sitting inside a larger,\n // variable-content field (chips, wrapped text); anchoring position to the\n // wrapper instead of that field silently drifts as soon as the field's\n // internal layout changes, since the wrapper only ever contains `trigger`\n // itself, never the field around it.\n const getTriggerElement = useCallback(\n (): HTMLElement | null => externalTriggerRef?.current ?? triggerRef.current,\n [externalTriggerRef],\n );\n\n const calculateDynamicSizing = useCallback(\n // Only the width is read, so the parameter is the narrowest shape that\n // satisfies it rather than a `DOMRect`. The caller used to fall back to\n // `new DOMRect()`, which is a browser-only global evaluated *during\n // render* - it was the first thing to throw when an open dropdown was\n // server-rendered, before `document.body` ever got a chance to.\n (triggerRect: { width: number } | null) => {\n // Shrink the panel to its content by default. This prevents the\n // position:fixed element from expanding to viewport width when children\n // use `width:100%` or `flex:1`. `minWidth` (set below) still wins when\n // the trigger is wider than the content, as CSS min-width overrides width.\n const styles: Record<string, string | number> = { width: 'max-content' };\n\n if (autoWidth && triggerRect && (externalTriggerRef?.current || triggerRef.current)) {\n const triggerWidth = triggerRect.width;\n styles.minWidth = triggerWidth;\n }\n\n if (minWidth !== undefined) {\n styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n }\n if (maxWidth !== undefined) {\n if (maxWidth === 'auto') {\n styles.maxWidth = 'none';\n } else {\n styles.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n }\n }\n if (minHeight !== undefined) {\n styles.minHeight = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n }\n if (maxHeight !== undefined) {\n if (maxHeight === 'auto') {\n styles.maxHeight = 'none';\n } else {\n styles.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n }\n }\n\n const hasHeightConstraint = minHeight !== undefined || maxHeight !== undefined;\n if (hasHeightConstraint) {\n styles.overflowY = 'auto';\n } else {\n styles.overflowY = 'visible';\n }\n\n return styles;\n },\n [autoWidth, externalTriggerRef, minWidth, maxWidth, minHeight, maxHeight],\n );\n\n const calculateOptimalPosition = useCallback(\n (triggerRect: DOMRect, contentRect: DOMRect) => {\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 8;\n\n let placement: 'top' | 'bottom' | 'left' | 'right' = preferredPlacement;\n let top = 0;\n let left = 0;\n\n // Helpers for cross-axis alignment\n const alignedLeft = (() => {\n switch (align) {\n case 'end':\n return triggerRect.right - contentRect.width;\n case 'center':\n return triggerRect.left + (triggerRect.width - contentRect.width) / 2;\n default:\n return triggerRect.left; // \"start\"\n }\n })();\n const alignedTop = (() => {\n switch (align) {\n case 'end':\n return triggerRect.bottom - contentRect.height;\n case 'center':\n return triggerRect.top + (triggerRect.height - contentRect.height) / 2;\n default:\n return triggerRect.top; // \"start\"\n }\n })();\n\n switch (preferredPlacement) {\n case 'top':\n top = triggerRect.top - contentRect.height - gap;\n left = alignedLeft;\n break;\n case 'bottom':\n top = triggerRect.bottom + gap;\n left = alignedLeft;\n break;\n case 'left':\n top = alignedTop;\n left = triggerRect.left - contentRect.width - gap;\n break;\n case 'right':\n top = alignedTop;\n left = triggerRect.right + gap;\n break;\n }\n\n if (placement === 'top' && top < gap) {\n placement = 'bottom';\n top = triggerRect.bottom + gap;\n } else if (placement === 'bottom' && top + contentRect.height > viewportHeight - gap) {\n placement = 'top';\n top = triggerRect.top - contentRect.height - gap;\n } else if (placement === 'left' && left < gap) {\n placement = 'right';\n left = triggerRect.right + gap;\n } else if (placement === 'right' && left + contentRect.width > viewportWidth - gap) {\n placement = 'left';\n left = triggerRect.left - contentRect.width - gap;\n }\n\n // Always clamp to both viewport edges - not just the near one - regardless\n // of whether an explicit min/max size was passed. `autoWidth` consumers\n // (Combobox, Select, TagInput suggestions, Menu, ...) never set\n // minWidth/maxWidth, so gating this on those props left the far edge\n // (right/bottom) completely unclamped and let content overflow the\n // viewport whenever it rendered wider/taller than its trigger.\n top = Math.max(gap, Math.min(top, viewportHeight - contentRect.height - gap));\n\n left = Math.max(gap, Math.min(left, viewportWidth - contentRect.width - gap));\n\n return { top, left, placement };\n },\n [preferredPlacement, align],\n );\n\n const handleScroll = useCallback(() => {\n if (!isVisible || !dropdownState.isPositioned || isScrollingRef.current) return;\n\n isScrollingRef.current = true;\n\n animationFrameRef.current = requestAnimationFrame(() => {\n const triggerElement = getTriggerElement();\n if (triggerElement && contentRef.current) {\n const triggerRect = triggerElement.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setDropdownState((prev) => ({\n ...prev,\n position: { top, left, placement },\n }));\n }\n\n isScrollingRef.current = false;\n });\n }, [isVisible, dropdownState.isPositioned, calculateOptimalPosition, getTriggerElement]);\n\n const handleTriggerClick = useCallback(() => {\n if (disabled) return;\n\n if (isVisible) {\n setOpen(false);\n } else {\n if (dropdownGroup) {\n const siblingDropdowns = document.querySelectorAll(\n `[data-dropdown-group=\"${dropdownGroup}\"][data-dropdown-content]`,\n );\n siblingDropdowns.forEach((dropdown) => {\n const dropdownElement = dropdown as HTMLElement;\n\n dropdownElement.dispatchEvent(new CustomEvent('closeSibling'));\n });\n }\n\n if (delay > 0) {\n timeoutRef.current = setTimeout(() => setOpen(true), delay);\n } else {\n setOpen(true);\n }\n }\n }, [disabled, isVisible, delay, dropdownGroup, setOpen]);\n\n useEffect(() => {\n const handleCloseSibling = () => {\n if (isVisible) setOpen(false);\n };\n\n const currentContentRef = contentRef.current;\n if (currentContentRef) {\n currentContentRef.addEventListener('closeSibling', handleCloseSibling);\n }\n\n return () => {\n if (currentContentRef) {\n currentContentRef.removeEventListener('closeSibling', handleCloseSibling);\n }\n };\n }, [isVisible, setOpen]);\n\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (!closeOnClickOutside || !isVisible) return;\n\n const target = event.target as Node;\n\n if (contentRef.current?.contains(target)) {\n return;\n }\n\n if (getTriggerElement()?.contains(target)) {\n return;\n }\n\n const allDropdowns = document.querySelectorAll('[data-dropdown-content]');\n for (const dropdown of allDropdowns) {\n if (dropdown === contentRef.current) continue;\n\n if (dropdown.contains(target)) {\n const clickedDropdownLevel = parseInt(\n dropdown.getAttribute('data-dropdown-level') || '0',\n );\n\n if (clickedDropdownLevel > actualLevel) {\n return;\n }\n }\n }\n\n setOpen(false);\n },\n [closeOnClickOutside, isVisible, actualLevel, getTriggerElement, setOpen],\n );\n\n const handleEscapeKey = useCallback(\n (event: KeyboardEvent) => {\n if (closeOnEscape && event.key === 'Escape' && isVisible) {\n setOpen(false);\n }\n },\n [closeOnEscape, isVisible, setOpen],\n );\n\n useEffect(() => {\n const triggerElement = getTriggerElement();\n if (isVisible && !dropdownState.isPositioned && contentRef.current && triggerElement) {\n const triggerRect = triggerElement.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setDropdownState((prev) => ({\n ...prev,\n position: { top, left, placement },\n isPositioned: true,\n }));\n }\n }, [\n isVisible,\n dropdownState.isPositioned,\n calculateOptimalPosition,\n getTriggerElement,\n // Load-bearing, not incidental. With `defaultOpen` the panel is \"visible\"\n // from the first render, but the portal is deferred one render for SSR\n // safety - so this effect's first run finds `contentRef.current` still\n // null, measures nothing, and without `isClient` in the deps it would never\n // run again. The panel then stays `visibility: hidden` forever: mounted,\n // unpositioned, invisible. Caught by `OpensOnMountWithDefaultOpen`.\n isClient,\n ]);\n\n useEffect(() => {\n const handleResize = () => {\n const triggerElement = getTriggerElement();\n if (isVisible && dropdownState.isPositioned && contentRef.current && triggerElement) {\n const triggerRect = triggerElement.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setDropdownState((prev) => ({\n ...prev,\n position: { top, left, placement },\n }));\n }\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [isVisible, dropdownState.isPositioned, calculateOptimalPosition, getTriggerElement]);\n\n useEffect(() => {\n if (isVisible) {\n // Capture phase on `document`, which is the only way to see scrolling in\n // an arbitrary ancestor: `scroll` does not bubble from an element, so the\n // previous listeners on `window` and `document.body` only ever fired for\n // the page itself. Any other scroll container - `PageLayout`'s\n // `&__content` is the layout's scrollport, so this is every dropdown\n // inside it - moved the trigger while the portaled, `position: fixed`\n // content stayed at its original viewport coordinates.\n document.addEventListener('scroll', handleScroll, { capture: true, passive: true });\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll, { capture: true });\n };\n }, [isVisible, handleScroll]);\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleEscapeKey);\n };\n }, [isVisible, handleClickOutside, handleEscapeKey]);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, []);\n\n return (\n <>\n {/*\n A positioning and click-capturing wrapper, and nothing more - it\n deliberately carries no `role` and no `tabIndex`.\n\n It used to be `role=\"button\" tabIndex={-1}`, which was wrong in both\n directions at once. `tabIndex={-1}` with no key handler meant the\n wrapper was never keyboard-operable, so the button role it advertised\n could not be activated by anyone using a keyboard - it promised a\n control that did not exist. Meanwhile, because `trigger` is virtually\n always a real control (Select and Combobox pass an `<input>`, Menu and\n SplitButton a `<button>`, ...), the role wrapped an interactive element\n in another interactive element: invalid ARIA, flagged by axe as\n `nested-interactive`, and announced by screen readers as a button\n inside a button. One attribute did this across every component built\n on Dropdown - Select, Combobox, Menu, Popover, ContextMenu,\n ColorPicker and TagInput - 212 violations in a single axe run.\n\n Semantics belong to whatever is passed as `trigger`, which is the only\n element that can actually own them. A consumer passing a\n non-interactive node should pass a `<button>` instead; it was never\n keyboard-accessible under the old markup either.\n */}\n <div\n ref={triggerRef}\n onClick={handleTriggerClick}\n className={`eidos-dropdown-trigger ${fullWidth ? 'eidos-dropdown-trigger--full-width' : ''} ${triggerClassName}`}\n >\n {trigger}\n </div>\n {isClient &&\n isVisible &&\n createPortal(\n <div\n ref={contentRef}\n data-dropdown-content\n data-dropdown-level={actualLevel}\n data-dropdown-group={dropdownGroup || ''}\n className={`eidos-dropdown-content eidos-dropdown-content--${dropdownState.position.placement} ${isNested ? 'eidos-dropdown-content--nested' : ''} ${dropdownState.isPositioned ? 'eidos-dropdown-content--positioned' : ''} ${contentClassName || ''}`}\n style={{\n top: dropdownState.position.top,\n left: dropdownState.position.left,\n ...calculateDynamicSizing(getTriggerElement()?.getBoundingClientRect() ?? null),\n }}\n // No default role: see the `role` prop's note in `Dropdown.types`.\n // This was `role=\"menu\"` unconditionally, which made a menu out of\n // every `Select` listbox, date picker and toolbar panel in the\n // library.\n role={role}\n >\n {content}\n </div>,\n document.body,\n )}\n </>\n );\n};\n\nexport const Dropdown: React.FC<DropdownProps> = (props) => {\n const context = useDropdownContext();\n const nextLevel = props.dropdownLevel !== undefined ? props.dropdownLevel : context.level + 1;\n\n return (\n <DropdownProvider level={nextLevel}>\n <DropdownInternal {...props} />\n </DropdownProvider>\n );\n};\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"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","names":["jsx"]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
devWarn,
|
|
3
2
|
useDialogFocus,
|
|
4
3
|
useIsClient
|
|
5
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-PP6HS4GR.js";
|
|
6
5
|
|
|
7
6
|
// src/components/Popover/Popover.component.tsx
|
|
8
7
|
import React, { useState, useRef, useCallback, useEffect, useId } from "react";
|
|
@@ -18,7 +17,6 @@ var Popover = ({
|
|
|
18
17
|
closeOnClickOutside = true,
|
|
19
18
|
closeOnEscape = true,
|
|
20
19
|
disabled = false,
|
|
21
|
-
isOpen,
|
|
22
20
|
open: openProp,
|
|
23
21
|
defaultOpen,
|
|
24
22
|
onOpenChange,
|
|
@@ -27,13 +25,7 @@ var Popover = ({
|
|
|
27
25
|
contentClassName
|
|
28
26
|
}) => {
|
|
29
27
|
const isClient = useIsClient();
|
|
30
|
-
|
|
31
|
-
devWarn(
|
|
32
|
-
"popover-is-open",
|
|
33
|
-
"Popover: `isOpen` is deprecated - pass `open` instead, the name `Dropdown` and `CommandPalette` use."
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
const controlledOpen = openProp ?? isOpen;
|
|
28
|
+
const controlledOpen = openProp;
|
|
37
29
|
const isControlled = controlledOpen !== void 0;
|
|
38
30
|
const [localOpen, setLocalOpen] = useState(defaultOpen ?? false);
|
|
39
31
|
const isVisible = isControlled ? controlledOpen : localOpen;
|
|
@@ -275,4 +267,4 @@ Popover.displayName = "Popover";
|
|
|
275
267
|
export {
|
|
276
268
|
Popover
|
|
277
269
|
};
|
|
278
|
-
//# sourceMappingURL=chunk-
|
|
270
|
+
//# sourceMappingURL=chunk-OQWG7NLI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/Popover.component.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\nimport type { PopoverProps, PopoverState, PopoverPlacement } from './Popover.types';\nimport { useDialogFocus, useIsClient } from '../../utils';\n\nexport const Popover: React.FC<PopoverProps> = ({\n trigger,\n children,\n title,\n placement: preferredPlacement = 'bottom',\n showCloseButton = false,\n closeOnClickOutside = true,\n closeOnEscape = true,\n disabled = false,\n open: openProp,\n defaultOpen,\n onOpenChange,\n maxWidth = 320,\n className,\n contentClassName,\n}) => {\n // `open`/`defaultOpen` make the portal reachable on the first render,\n // which cannot happen on a server - see `useIsClient`.\n const isClient = useIsClient();\n\n // ── Controlled / uncontrolled bridge ──────────────────────────────────────\n //\n // `open` matches `Dropdown` and `CommandPalette`. The original spelling,\n // `isOpen`, was deprecated in 3.8 and removed in 4.0.\n const controlledOpen = openProp;\n const isControlled = controlledOpen !== undefined;\n const [localOpen, setLocalOpen] = useState(defaultOpen ?? false);\n const isVisible = isControlled ? controlledOpen! : localOpen;\n\n // ── Positioning state ─────────────────────────────────────────────────────\n const [popoverState, setPopoverState] = useState<PopoverState>({\n isVisible: false,\n isPositioned: false,\n position: { top: 0, left: 0, placement: preferredPlacement },\n });\n\n // Names the dialog by pointing at the rendered title, the same way `Modal`\n // and `Drawer` do. This was an `aria-label={title ?? 'Popover'}`, which\n // both duplicated the visible text into a second, invisible copy and hard\n // limited `title` to a string - `aria-label` takes only a string, so a\n // `ReactNode` title would have been stringified to \"[object Object]\" and\n // silently destroyed the accessible name.\n const titleId = useId();\n\n // ── Refs ──────────────────────────────────────────────────────────────────\n const triggerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n const animationFrameRef = useRef<number | undefined>(undefined);\n const isScrollingRef = useRef(false);\n\n // ── Open / close helpers ──────────────────────────────────────────────────\n const open = useCallback(() => {\n if (disabled) return;\n if (!isControlled) setLocalOpen(true);\n onOpenChange?.(true);\n }, [disabled, isControlled, onOpenChange]);\n\n const close = useCallback(() => {\n if (!isControlled) setLocalOpen(false);\n onOpenChange?.(false);\n }, [isControlled, onOpenChange]);\n\n const toggle = useCallback(() => {\n if (isVisible) {\n close();\n } else {\n open();\n }\n }, [isVisible, open, close]);\n\n // ── Positioning calculation ───────────────────────────────────────────────\n const calculateOptimalPosition = useCallback(\n (triggerRect: DOMRect, contentRect: DOMRect) => {\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 8;\n\n let placement: PopoverPlacement = preferredPlacement;\n let top = 0;\n let left = 0;\n\n switch (preferredPlacement) {\n case 'top':\n top = triggerRect.top - contentRect.height - gap;\n left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;\n break;\n case 'bottom':\n top = triggerRect.bottom + gap;\n left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;\n break;\n case 'left':\n top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;\n left = triggerRect.left - contentRect.width - gap;\n break;\n case 'right':\n top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;\n left = triggerRect.right + gap;\n break;\n }\n\n // Flip if it doesn't fit in the preferred direction\n if (placement === 'top' && top < gap) {\n placement = 'bottom';\n top = triggerRect.bottom + gap;\n left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;\n } else if (placement === 'bottom' && top + contentRect.height > viewportHeight - gap) {\n placement = 'top';\n top = triggerRect.top - contentRect.height - gap;\n left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;\n } else if (placement === 'left' && left < gap) {\n placement = 'right';\n top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;\n left = triggerRect.right + gap;\n } else if (placement === 'right' && left + contentRect.width > viewportWidth - gap) {\n placement = 'left';\n top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;\n left = triggerRect.left - contentRect.width - gap;\n }\n\n // Clamp to viewport\n top = Math.max(gap, Math.min(top, viewportHeight - contentRect.height - gap));\n left = Math.max(gap, Math.min(left, viewportWidth - contentRect.width - gap));\n\n return { top, left, placement };\n },\n [preferredPlacement],\n );\n\n // ── Sync isVisible → popoverState ─────────────────────────────────────────\n useEffect(() => {\n if (isVisible) {\n setPopoverState((prev) => ({ ...prev, isVisible: true, isPositioned: false }));\n } else {\n setPopoverState((prev) => ({ ...prev, isVisible: false, isPositioned: false }));\n }\n }, [isVisible]);\n\n // ── Two-pass positioning (Pass 2: measure then commit) ────────────────────\n useEffect(() => {\n if (\n popoverState.isVisible &&\n !popoverState.isPositioned &&\n contentRef.current &&\n triggerRef.current\n ) {\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setPopoverState((prev) => ({\n ...prev,\n position: { top, left, placement },\n isPositioned: true,\n }));\n }\n // `isClient` for the same reason as `Dropdown`: with `defaultOpen` the\n // portal arrives one render after this effect first runs, and without it in\n // the deps the panel is never measured and never becomes visible.\n }, [popoverState.isVisible, popoverState.isPositioned, calculateOptimalPosition, isClient]);\n\n // ── Scroll repositioning ─────────────────────────────────────────────────\n const handleScroll = useCallback(() => {\n if (!popoverState.isVisible || !popoverState.isPositioned || isScrollingRef.current) return;\n\n isScrollingRef.current = true;\n\n animationFrameRef.current = requestAnimationFrame(() => {\n if (triggerRef.current && contentRef.current) {\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setPopoverState((prev) => ({\n ...prev,\n position: { top, left, placement },\n }));\n }\n\n isScrollingRef.current = false;\n });\n }, [popoverState.isVisible, popoverState.isPositioned, calculateOptimalPosition]);\n\n // ── Resize repositioning ──────────────────────────────────────────────────\n useEffect(() => {\n const handleResize = () => {\n if (\n popoverState.isVisible &&\n popoverState.isPositioned &&\n contentRef.current &&\n triggerRef.current\n ) {\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\n\n setPopoverState((prev) => ({\n ...prev,\n position: { top, left, placement },\n }));\n }\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [popoverState.isVisible, popoverState.isPositioned, calculateOptimalPosition]);\n\n // ── Scroll listener registration ─────────────────────────────────────────\n useEffect(() => {\n if (popoverState.isVisible) {\n // Capture phase on `document` - see the note in `Dropdown`. `scroll` does\n // not bubble, so listeners on `window`/`document.body` miss every\n // ancestor scroll container and the portaled panel detaches from its\n // trigger.\n document.addEventListener('scroll', handleScroll, { capture: true, passive: true });\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll, { capture: true });\n };\n }, [popoverState.isVisible, handleScroll]);\n\n // ── Click-outside handler ─────────────────────────────────────────────────\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (!closeOnClickOutside || !popoverState.isVisible) return;\n\n const target = event.target as Node;\n\n if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) {\n return;\n }\n\n close();\n },\n [closeOnClickOutside, popoverState.isVisible, close],\n );\n\n // ── Escape key handler ────────────────────────────────────────────────────\n const handleEscapeKey = useCallback(\n (event: KeyboardEvent) => {\n if (closeOnEscape && event.key === 'Escape' && popoverState.isVisible) {\n close();\n }\n },\n [closeOnEscape, popoverState.isVisible, close],\n );\n\n // ── Register global event listeners ──────────────────────────────────────\n useEffect(() => {\n if (popoverState.isVisible) {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleEscapeKey);\n };\n }, [popoverState.isVisible, handleClickOutside, handleEscapeKey]);\n\n // ── Cleanup on unmount ────────────────────────────────────────────────────\n useEffect(() => {\n const timeoutId = timeoutRef.current;\n const animationFrameId = animationFrameRef.current;\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n };\n }, []);\n\n // Non-modal focus handling: move focus into the panel and return it to the\n // trigger on close, but leave Tab free.\n //\n // `trapTab: false` because this dialog is honestly `aria-modal=\"false\"` -\n // the rest of the page stays available, so confining Tab would strand the\n // user. Moving focus in is still required: the panel is portaled to\n // `document.body`, so Tab from the trigger continues into whatever follows\n // it in the page and the panel's own controls cannot be reached at all.\n //\n // Keyed to `isPositioned`, not `isVisible`: the panel renders off-screen\n // for one frame while its placement is measured, and focusing it in that\n // state scrolls the page to wherever it was parked.\n useDialogFocus(popoverState.isVisible && popoverState.isPositioned, contentRef, {\n trapTab: false,\n });\n\n // ── Render ────────────────────────────────────────────────────────────────\n return (\n <>\n {/* Trigger wrapper.\n\n The wrapper carries no ARIA. It had `aria-expanded` and\n `aria-haspopup` while having no role, which is invalid - both need\n a role that supports them, and adding `role=\"button\"` here would be\n worse still, since the trigger inside is usually a real button\n (that is the `nested-interactive` shape already fixed on\n `Dropdown`).\n\n Instead the state is cloned onto the trigger element, which is the\n thing a user actually activates. Guarded by `isValidElement`\n because `trigger` is typed as `ReactNode` and may be a bare string,\n in which case there is nothing to annotate and the wrapper stays\n exactly as it was. */}\n <div\n ref={triggerRef}\n className={['eidos-popover-trigger', className].filter(Boolean).join(' ')}\n onClick={toggle}\n >\n {React.isValidElement(trigger)\n ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {\n 'aria-expanded': popoverState.isVisible,\n 'aria-haspopup': 'dialog',\n })\n : trigger}\n </div>\n\n {/* Portal: floating panel */}\n {isClient &&\n popoverState.isVisible &&\n createPortal(\n <div\n ref={contentRef}\n role=\"dialog\"\n aria-modal=\"false\"\n aria-labelledby={title ? titleId : undefined}\n // Only the untitled case still needs a literal label - there is\n // no visible text to point at.\n aria-label={title ? undefined : 'Popover'}\n className={[\n 'eidos-popover-content',\n `eidos-popover-content--${popoverState.position.placement}`,\n popoverState.isPositioned ? 'eidos-popover-content--visible' : '',\n contentClassName,\n ]\n .filter(Boolean)\n .join(' ')}\n style={{\n top: popoverState.position.top,\n left: popoverState.position.left,\n maxWidth: maxWidth,\n }}\n >\n {(title || showCloseButton) && (\n <div className=\"eidos-popover-header\">\n {title && (\n <span id={titleId} className=\"eidos-popover-title\">\n {title}\n </span>\n )}\n {showCloseButton && (\n <button\n type=\"button\"\n className=\"eidos-popover-close\"\n onClick={close}\n aria-label=\"Close popover\"\n >\n <X aria-hidden=\"true\" />\n </button>\n )}\n </div>\n )}\n <div className=\"eidos-popover-body\">{children}</div>\n </div>,\n document.body,\n )}\n </>\n );\n};\n\nPopover.displayName = 'Popover';\n"],"mappings":"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","names":[]}
|
|
@@ -3,9 +3,6 @@ import {
|
|
|
3
3
|
toIconKey
|
|
4
4
|
} from "./chunk-V3T7RO4F.js";
|
|
5
5
|
|
|
6
|
-
// src/utils/renderIcon.tsx
|
|
7
|
-
import { icons } from "lucide-react";
|
|
8
|
-
|
|
9
6
|
// src/utils/devWarn.ts
|
|
10
7
|
var warned = /* @__PURE__ */ new Set();
|
|
11
8
|
function devWarn(key, message) {
|
|
@@ -25,14 +22,12 @@ var renderIcon = (icon, className) => {
|
|
|
25
22
|
if (Registered) {
|
|
26
23
|
return /* @__PURE__ */ jsx(Registered, { className, "aria-hidden": "true" });
|
|
27
24
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
if (LucideIcon) {
|
|
25
|
+
if (!/\s/.test(icon)) {
|
|
26
|
+
const iconName = toIconKey(icon);
|
|
31
27
|
devWarn(
|
|
32
|
-
`icon-
|
|
33
|
-
`Icon "${icon}"
|
|
28
|
+
`icon-unregistered-${iconName}`,
|
|
29
|
+
`Icon "${icon}" is not registered, so it is rendered as the CSS class "${icon}". If it is a Lucide icon, pass the component (\`import { ${iconName} } from 'lucide-react'\`), register it once with \`registerIcons({ ${iconName} })\`, or \`import 'eidos-ui/lucide-icons'\` to register them all. If it is an icon-font class, ignore this.`
|
|
34
30
|
);
|
|
35
|
-
return /* @__PURE__ */ jsx(LucideIcon, { className, "aria-hidden": "true" });
|
|
36
31
|
}
|
|
37
32
|
return /* @__PURE__ */ jsx("i", { className: `${icon} ${className || ""}`, "aria-hidden": "true" });
|
|
38
33
|
}
|
|
@@ -40,10 +35,6 @@ var renderIcon = (icon, className) => {
|
|
|
40
35
|
return /* @__PURE__ */ jsx(IconComponent, { className, "aria-hidden": "true" });
|
|
41
36
|
};
|
|
42
37
|
|
|
43
|
-
// src/utils/dualModifier.ts
|
|
44
|
-
var dualModifier = (block, canonical, legacy) => `${block}--${canonical} ${block}--${legacy}`;
|
|
45
|
-
var fullWidthModifier = (block) => dualModifier(block, "full-width", "fullWidth");
|
|
46
|
-
|
|
47
38
|
// src/utils/useDialogFocus.ts
|
|
48
39
|
import { useEffect } from "react";
|
|
49
40
|
var FOCUSABLE_SELECTOR = [
|
|
@@ -140,10 +131,8 @@ var useIsClient = () => {
|
|
|
140
131
|
export {
|
|
141
132
|
devWarn,
|
|
142
133
|
renderIcon,
|
|
143
|
-
dualModifier,
|
|
144
|
-
fullWidthModifier,
|
|
145
134
|
FOCUSABLE_SELECTOR,
|
|
146
135
|
useDialogFocus,
|
|
147
136
|
useIsClient
|
|
148
137
|
};
|
|
149
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-PP6HS4GR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/devWarn.ts","../src/utils/renderIcon.tsx","../src/utils/useDialogFocus.ts","../src/utils/useIsClient.ts"],"sourcesContent":["/**\n * Logs a misconfiguration warning, once per `key`, and never in production.\n *\n * Deliberately reads `process.env.NODE_ENV` off `globalThis` behind a cast\n * rather than referencing `process` directly: this is a browser library, and\n * a bare `process` reference fails the `tsup` dts build (its worker resolves\n * without node types, so `npm run typecheck` passing is not enough) as well\n * as throwing at runtime anywhere a bundler hasn't substituted it. The\n * optional chaining covers every case - no `process`, no `env`, no value.\n *\n * Because the check is dynamic rather than a statically replaceable\n * `process.env.NODE_ENV` expression, the message text stays in production\n * bundles; only the logging is skipped. That is the trade for not shipping a\n * `process` reference at all, and these strings are small.\n */\nconst warned = new Set<string>();\n\nexport function devWarn(key: string, message: string): void {\n const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env\n ?.NODE_ENV;\n if (nodeEnv === 'production') return;\n if (warned.has(key)) return;\n warned.add(key);\n console.warn(`[eidos-ui] ${message}`);\n}\n","import React from 'react';\nimport { devWarn } from './devWarn';\nimport { resolveRegisteredIcon, toIconKey, type IconComponent } from './iconRegistry';\n\nexport type IconType = IconComponent | string;\n\n/**\n * Renders an icon prop.\n *\n * @param icon - An icon component, or a string: a name registered with\n * `registerIcons`, or CSS classes for an icon font.\n * @param className - Optional CSS class name to apply to the icon.\n * @returns React node representing the icon, or null if no icon provided.\n *\n * @example\n * // Component - the recommended form; only the icons you import are bundled\n * import { Heart } from 'lucide-react';\n * renderIcon(Heart, 'my-icon-class');\n *\n * @example\n * // Registered name\n * registerIcons({ Heart });\n * renderIcon('heart', 'my-icon-class');\n *\n * @example\n * // CSS classes for an icon font (Font Awesome, Remixicon, ...)\n * renderIcon('fas fa-heart', 'my-icon-class');\n */\nexport const renderIcon = (icon: IconType | undefined, className?: string): React.ReactNode => {\n if (!icon) return null;\n\n if (typeof icon === 'string') {\n const Registered = resolveRegisteredIcon(icon);\n if (Registered) {\n return <Registered className={className} aria-hidden=\"true\" />;\n }\n\n // No lookup against Lucide's full `icons` map. There was one until 4.0,\n // and referencing that map put every Lucide icon (~1,800 modules) into\n // every consumer's bundle, however few they used - no bundler can\n // tree-shake a lookup by a runtime string. Do not reintroduce it: a\n // consumer who wants every name opts in with `eidos-ui/lucide-icons`.\n //\n // An unregistered string is treated as icon-font classes. A single token\n // with no space is far more often a forgotten registration than a font\n // class, so it warns - once per name. The cost is one dev-only warning\n // for single-class fonts (Remixicon's `ri-home-line`); the alternative is\n // an upgrade that silently renders empty `<i>` elements where icons were.\n if (!/\\s/.test(icon)) {\n const iconName = toIconKey(icon);\n devWarn(\n `icon-unregistered-${iconName}`,\n `Icon \"${icon}\" is not registered, so it is rendered as the CSS class \"${icon}\". If it is a Lucide icon, pass the component (\\`import { ${iconName} } from 'lucide-react'\\`), register it once with \\`registerIcons({ ${iconName} })\\`, or \\`import 'eidos-ui/lucide-icons'\\` to register them all. If it is an icon-font class, ignore this.`,\n );\n }\n\n return <i className={`${icon} ${className || ''}`} aria-hidden=\"true\" />;\n }\n\n // It's a React component\n const IconComponent = icon;\n return <IconComponent className={className} aria-hidden=\"true\" />;\n};\n","import { useEffect, type RefObject } from 'react';\n\n/**\n * Focus management for a dialog: move focus in on open, optionally trap Tab\n * inside it, and restore focus to the opener on close.\n *\n * Named for the job rather than the mechanism because the trap is optional.\n * `Popover` declares `aria-modal=\"false\"` - an honest non-modal dialog - so\n * trapping Tab in it would be wrong, but it still needs the other two: its\n * panel is portaled to `document.body`, so without moving focus in, Tab from\n * the trigger goes to whatever follows it in the page and the panel's own\n * controls are unreachable by keyboard entirely.\n *\n * ## Why this exists\n *\n * `Modal`, `Drawer` and `CommandPalette` all rendered\n * `role=\"dialog\" aria-modal=\"true\"` with no focus management whatsoever. That\n * attribute is a **promise to assistive technology that the rest of the page\n * is inert**, and it was false: measured in a browser, focus never entered the\n * dialog, and Tab moved to the page behind the scrim on the first press\n * (Drawer on the second). Drawer additionally dropped focus onto `<body>` when\n * it closed, so a keyboard user was returned to the top of the document.\n *\n * That is WCAG 2.4.3 Focus Order (Level A), and it is invisible to axe - a\n * static snapshot of the DOM looks perfectly correct.\n *\n * ## Nesting\n *\n * Traps register on a module-level stack and only the innermost one acts, so a\n * dialog opened from a dialog behaves correctly. Without this, both listeners\n * fire for the same Tab and fight over where focus lands.\n *\n * ## What this does *not* do\n *\n * It does not mark the background `inert`. A trap plus `aria-modal` is the\n * widely-supported approach and is what screen readers act on; `inert` on\n * every sibling of the portal root would be stronger, but it needs the\n * component to know about DOM it does not own. Worth revisiting if a\n * consumer reports a screen reader escaping the dialog in browse mode.\n */\n\n/**\n * Deliberately not `[tabindex]` in general - that would match `tabindex=\"-1\"`,\n * which is programmatically focusable but explicitly removed from the Tab\n * sequence, so including it would make Tab stop somewhere the user cannot\n * reach by tabbing in the first place.\n */\nexport const FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n 'details > summary:first-of-type',\n 'iframe',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]:not([contenteditable=\"false\"])',\n '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * `offsetParent === null` is the usual visibility check and is wrong here: it\n * is also null for `position: fixed` elements, which is exactly what a modal\n * is. `getClientRects()` is empty only when the element genuinely does not\n * render.\n */\nconst isVisible = (element: HTMLElement): boolean =>\n element.getClientRects().length > 0 && getComputedStyle(element).visibility !== 'hidden';\n\nconst getFocusable = (container: HTMLElement): HTMLElement[] =>\n Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n (element) => isVisible(element) && element.closest('[aria-hidden=\"true\"]') === null,\n );\n\n/** Innermost trap last. Only the last entry responds to Tab. */\nconst trapStack: HTMLElement[] = [];\n\nexport interface UseDialogFocusOptions {\n /** Focused when the trap activates. Defaults to the first focusable child. */\n initialFocus?: RefObject<HTMLElement | null>;\n /**\n * Whether to return focus to whatever had it when the trap activated.\n * Defaults to `true`; pass `false` when the caller restores focus itself.\n */\n restoreFocus?: boolean;\n /**\n * Whether Tab is confined to the container. Defaults to `true`.\n *\n * Set `false` for a non-modal dialog (`aria-modal=\"false\"`), where the rest\n * of the page stays available and trapping would strand the user.\n */\n trapTab?: boolean;\n}\n\nexport const useDialogFocus = (\n active: boolean,\n containerRef: RefObject<HTMLElement | null>,\n { initialFocus, restoreFocus = true, trapTab = true }: UseDialogFocusOptions = {},\n): void => {\n useEffect(() => {\n const container = containerRef.current;\n if (!active || !container) return;\n\n // Captured before focus moves. The caller must only flip `active` to true\n // once the container is in the DOM - for the animated overlays that means\n // `isOpen && isMounted`, since `isMounted` is set in an effect one render\n // later and the container does not exist before it.\n const previouslyFocused = document.activeElement as HTMLElement | null;\n\n trapStack.push(container);\n\n // Moving focus in is retried across a few frames rather than attempted\n // once.\n //\n // These overlays animate open, and `.focus()` on an element that is still\n // `visibility: hidden` is a silent no-op - it does not throw, it just\n // leaves focus where it was. `Modal` sets its `--is-open` class two\n // animation frames after mounting, and the computed style has not caught\n // up at the moment the effect runs, so a single attempt focused nothing\n // and the trap looked broken.\n //\n // Retrying is better than keying off any particular animation: the hook\n // stays ignorant of each component's transition duration, and simply\n // stops as soon as focus has actually landed inside.\n const MAX_FRAMES = 10;\n let frame = 0;\n let attempts = 0;\n\n const tryFocus = () => {\n const target = initialFocus?.current ?? getFocusable(container)[0];\n if (target) {\n target.focus();\n } else {\n // A dialog with nothing focusable in it still must not leave focus on\n // the page behind, so the container takes it. `tabindex=\"-1\"` keeps\n // it out of the Tab sequence while allowing `.focus()`.\n if (!container.hasAttribute('tabindex')) container.setAttribute('tabindex', '-1');\n container.focus();\n }\n\n if (!container.contains(document.activeElement) && attempts < MAX_FRAMES) {\n attempts += 1;\n frame = requestAnimationFrame(tryFocus);\n }\n };\n\n tryFocus();\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n // Only the innermost trap acts.\n if (trapStack[trapStack.length - 1] !== container) return;\n\n // Re-queried on every Tab rather than cached: dialog contents change\n // (a disabled Confirm button becoming enabled, a list filtering down),\n // and a stale list sends focus to an element that is no longer there.\n const focusable = getFocusable(container);\n if (focusable.length === 0) {\n event.preventDefault();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n const activeElement = document.activeElement as HTMLElement | null;\n\n // Focus outside the container - e.g. a click landed on the backdrop.\n // Pull it back in rather than letting Tab continue through the page.\n if (!activeElement || !container.contains(activeElement)) {\n event.preventDefault();\n (event.shiftKey ? last : first).focus();\n return;\n }\n\n if (event.shiftKey && activeElement === first) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && activeElement === last) {\n event.preventDefault();\n first.focus();\n }\n };\n\n if (trapTab) document.addEventListener('keydown', onKeyDown, true);\n\n return () => {\n cancelAnimationFrame(frame);\n document.removeEventListener('keydown', onKeyDown, true);\n\n const index = trapStack.lastIndexOf(container);\n if (index !== -1) trapStack.splice(index, 1);\n\n // Restore only if focus still belongs to the closing dialog.\n //\n // Two cases count as \"belongs\":\n //\n // 1. Focus is still inside the container.\n // 2. Focus has been lost to `<body>`. When the overlay hides, the\n // browser blurs whatever was focused inside it, so by the time this\n // cleanup runs `activeElement` is often already `<body>` - checking\n // only case 1 meant `CommandPalette` never restored at all.\n //\n // Anything else means something took focus deliberately - a confirm\n // action moving to a new region, say - and stealing it back would be\n // worse than doing nothing.\n const active = document.activeElement;\n const focusIsOurs = container.contains(active) || active === document.body || active === null;\n\n if (restoreFocus && focusIsOurs && previouslyFocused?.isConnected) {\n previouslyFocused.focus();\n }\n };\n }, [active, containerRef, initialFocus, restoreFocus, trapTab]);\n};\n","import { useEffect, useState } from 'react';\n\n/**\n * `false` on the server and on the very first client render, `true` from the\n * first effect onwards.\n *\n * ## Why this exists\n *\n * Every overlay in this library renders through `createPortal(…,\n * document.body)`. A portal is a client-only construct: there is no\n * `document` during `renderToString`, so any overlay that is *already open on\n * its first render* does not merely render oddly - it throws, and takes the\n * whole server render down with it. Measured against the built package:\n *\n * ```\n * renderToString(<Modal isOpen>) ReferenceError: document is not defined\n * renderToString(<Dropdown defaultOpen>) ReferenceError: DOMRect is not defined\n * renderToString(<Select autoOpen>) ReferenceError: DOMRect is not defined\n * ```\n *\n * `Modal`, `Drawer` and `CommandPalette` each keep an `isMounted` flag, which\n * looks like it would prevent this and does not: it is initialised to\n * `useState(isOpen)`, so it is already `true` on the first render. It exists\n * to sequence the open/close *animation*, not to defer the portal.\n *\n * With this hook the server renders nothing for the panel, and the portal\n * appears on the client after mount.\n *\n * ## Why a state flag rather than `typeof document !== 'undefined'`\n *\n * That check is `true` during hydration, so the client's first render would\n * produce the portal while the server's produced nothing - a hydration\n * mismatch, which React resolves by discarding and re-rendering the subtree.\n * A state flag set in an effect makes the first client render agree with the\n * server by construction, and the portal arrive one render later.\n *\n * ## Scope\n *\n * Only for components that can be open on their first render - `Dropdown`\n * (`defaultOpen`), `Popover`, `Modal`, `Drawer`, `CommandPalette`. `Tooltip`,\n * `ContextMenu` and `Snackbar` can only open in response to an event, which\n * cannot happen during a server render, so they need nothing. `check-ssr.js`\n * asserts all of them either way.\n */\nexport const useIsClient = (): boolean => {\n const [isClient, setIsClient] = useState(false);\n\n useEffect(() => {\n setIsClient(true);\n }, []);\n\n return isClient;\n};\n"],"mappings":"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","names":["active","useEffect"]}
|
|
@@ -13,35 +13,35 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _chunkQDZVZY53cjs = require('./chunk-QDZVZY53.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
var _chunkOZZHOEN5cjs = require('./chunk-OZZHOEN5.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _chunkBKUZF7CWcjs = require('./chunk-BKUZF7CW.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
var _chunkV5RS3JZNcjs = require('./chunk-V5RS3JZN.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _chunkSJPCBRKRcjs = require('./chunk-SJPCBRKR.cjs');
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var _chunkYWXS4IPHcjs = require('./chunk-YWXS4IPH.cjs');
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
var
|
|
35
|
+
var _chunkNSA7ASZ7cjs = require('./chunk-NSA7ASZ7.cjs');
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _chunkRZMQCVAScjs = require('./chunk-RZMQCVAS.cjs');
|
|
39
39
|
|
|
40
40
|
// src/components/ThemeEditor/ThemeEditor.component.tsx
|
|
41
41
|
var _react = require('react');
|
|
42
42
|
var _lucidereact = require('lucide-react');
|
|
43
43
|
var _jsxruntime = require('react/jsx-runtime');
|
|
44
|
-
var PAGE_SURFACE =
|
|
44
|
+
var PAGE_SURFACE = _chunkQDZVZY53cjs.CONTRAST_LIGHT;
|
|
45
45
|
var EDGE_MIN_RATIO = 1.5;
|
|
46
46
|
var COLOR_LABELS = {
|
|
47
47
|
primary: "Primary",
|
|
@@ -58,7 +58,7 @@ var FONT_STACKS = [
|
|
|
58
58
|
// matches an option exactly. A hand-copied shorter stack did not match, and
|
|
59
59
|
// the row fell back to showing a synthetic "custom" entry instead of the
|
|
60
60
|
// name of the font actually in use.
|
|
61
|
-
{ label: "Plus Jakarta Sans (theme default)", value:
|
|
61
|
+
{ label: "Plus Jakarta Sans (theme default)", value: _chunkQDZVZY53cjs.defaultTheme.typography.fontFamily },
|
|
62
62
|
{ label: "System UI", value: "system-ui, -apple-system, 'Segoe UI', sans-serif" },
|
|
63
63
|
{ label: "Helvetica / Arial", value: "Helvetica, Arial, sans-serif" },
|
|
64
64
|
{ label: "Georgia", value: "Georgia, 'Times New Roman', serif" },
|
|
@@ -66,7 +66,7 @@ var FONT_STACKS = [
|
|
|
66
66
|
{ label: "Serif (generic)", value: "serif" }
|
|
67
67
|
];
|
|
68
68
|
var MONO_STACKS = [
|
|
69
|
-
{ label: "JetBrains Mono (theme default)", value:
|
|
69
|
+
{ label: "JetBrains Mono (theme default)", value: _chunkQDZVZY53cjs.defaultTheme.typography.monoFamily },
|
|
70
70
|
{ label: "Menlo / Consolas", value: "Menlo, Consolas, monospace" },
|
|
71
71
|
{ label: "Courier New", value: "'Courier New', Courier, monospace" },
|
|
72
72
|
{ label: "Monospace (generic)", value: "monospace" }
|
|
@@ -88,7 +88,7 @@ var GRADE_BADGE = {
|
|
|
88
88
|
};
|
|
89
89
|
var diagnose = (key, base, explicitContrast) => {
|
|
90
90
|
if (!isFill(key)) {
|
|
91
|
-
const ratio2 =
|
|
91
|
+
const ratio2 = _chunkQDZVZY53cjs.contrastRatio.call(void 0, base, PAGE_SURFACE);
|
|
92
92
|
const grade2 = gradeFor(ratio2);
|
|
93
93
|
return {
|
|
94
94
|
grade: grade2,
|
|
@@ -96,10 +96,10 @@ var diagnose = (key, base, explicitContrast) => {
|
|
|
96
96
|
detail: `Link text on the page background: ${ratio2.toFixed(2)}:1 against white.${_nullishCoalesce(GRADE_CAVEAT[grade2], () => ( ""))}`
|
|
97
97
|
};
|
|
98
98
|
}
|
|
99
|
-
const foreground = _nullishCoalesce(explicitContrast, () => (
|
|
100
|
-
const ratio =
|
|
101
|
-
const name = foreground.toLowerCase() ===
|
|
102
|
-
const edge =
|
|
99
|
+
const foreground = _nullishCoalesce(explicitContrast, () => ( _chunkQDZVZY53cjs.pickContrast.call(void 0, base)));
|
|
100
|
+
const ratio = _chunkQDZVZY53cjs.contrastRatio.call(void 0, base, foreground);
|
|
101
|
+
const name = foreground.toLowerCase() === _chunkQDZVZY53cjs.CONTRAST_DARK ? "dark" : "white";
|
|
102
|
+
const edge = _chunkQDZVZY53cjs.contrastRatio.call(void 0, base, PAGE_SURFACE);
|
|
103
103
|
const grade = gradeFor(ratio);
|
|
104
104
|
return {
|
|
105
105
|
grade,
|
|
@@ -121,14 +121,14 @@ var FontRow = ({
|
|
|
121
121
|
const inputRef = _react.useRef.call(void 0, null);
|
|
122
122
|
const [error, setError] = _react.useState.call(void 0, null);
|
|
123
123
|
const [, onFontsLoaded] = _react.useReducer.call(void 0, (count) => count + 1, 0);
|
|
124
|
-
_react.useEffect.call(void 0, () =>
|
|
124
|
+
_react.useEffect.call(void 0, () => _chunkQDZVZY53cjs.subscribeToFontLoads.call(void 0, onFontsLoaded), [onFontsLoaded]);
|
|
125
125
|
const baseOptions = _react.useMemo.call(void 0, () => {
|
|
126
126
|
const known = options.some((o) => o.value === value);
|
|
127
127
|
return known ? options : [...options, { label: `${firstFamily(value)} (custom)`, value }];
|
|
128
128
|
}, [options, value]);
|
|
129
129
|
const selectOptions = baseOptions.map((option) => ({
|
|
130
130
|
id: option.value,
|
|
131
|
-
label:
|
|
131
|
+
label: _chunkQDZVZY53cjs.isFontStackAvailable.call(void 0, option.value) ? option.label : `${option.label} - not installed`,
|
|
132
132
|
value: option.value
|
|
133
133
|
}));
|
|
134
134
|
const handleFile = _react.useCallback.call(void 0,
|
|
@@ -136,8 +136,8 @@ var FontRow = ({
|
|
|
136
136
|
if (!file) return;
|
|
137
137
|
setError(null);
|
|
138
138
|
try {
|
|
139
|
-
const family = await
|
|
140
|
-
const stack =
|
|
139
|
+
const family = await _chunkQDZVZY53cjs.registerFontFile.call(void 0, file);
|
|
140
|
+
const stack = _chunkQDZVZY53cjs.toFontStack.call(void 0, family, mono);
|
|
141
141
|
onUploaded({ label: `${family} (this session)`, value: stack }, file, family);
|
|
142
142
|
onChange(stack);
|
|
143
143
|
} catch (cause) {
|
|
@@ -148,11 +148,11 @@ var FontRow = ({
|
|
|
148
148
|
},
|
|
149
149
|
[mono, onChange, onUploaded]
|
|
150
150
|
);
|
|
151
|
-
const unavailable = !
|
|
151
|
+
const unavailable = !_chunkQDZVZY53cjs.isFontStackAvailable.call(void 0, value);
|
|
152
152
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-row eidos-theme-editor-row--wide", children: [
|
|
153
153
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-theme-editor-row__label", children: label }),
|
|
154
154
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-theme-editor-row__control", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
155
|
-
|
|
155
|
+
_chunkBKUZF7CWcjs.Select,
|
|
156
156
|
{
|
|
157
157
|
options: selectOptions,
|
|
158
158
|
value,
|
|
@@ -163,7 +163,7 @@ var FontRow = ({
|
|
|
163
163
|
) }),
|
|
164
164
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-row__diagnostics", children: [
|
|
165
165
|
unavailable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
166
|
-
|
|
166
|
+
_chunkRZMQCVAScjs.Tooltip,
|
|
167
167
|
{
|
|
168
168
|
message: `${firstFamily(value)} isn't available here, so the browser is rendering the next family in the stack instead. Upload the file, or have your app serve it, to use it.`,
|
|
169
169
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-theme-editor-badge eidos-theme-editor-badge--aa-large", children: [
|
|
@@ -172,14 +172,14 @@ var FontRow = ({
|
|
|
172
172
|
] })
|
|
173
173
|
}
|
|
174
174
|
),
|
|
175
|
-
error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
175
|
+
error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: error, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-theme-editor-badge eidos-theme-editor-badge--fail", children: [
|
|
176
176
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleX, { className: "eidos-theme-editor-badge__icon" }),
|
|
177
177
|
"Upload failed"
|
|
178
178
|
] }) })
|
|
179
179
|
] }),
|
|
180
180
|
allowUpload && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-row__actions", children: [
|
|
181
181
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
182
|
-
|
|
182
|
+
_chunkNSA7ASZ7cjs.Button,
|
|
183
183
|
{
|
|
184
184
|
variant: "text",
|
|
185
185
|
color: "secondary",
|
|
@@ -195,7 +195,7 @@ var FontRow = ({
|
|
|
195
195
|
{
|
|
196
196
|
ref: inputRef,
|
|
197
197
|
type: "file",
|
|
198
|
-
accept:
|
|
198
|
+
accept: _chunkQDZVZY53cjs.FONT_ACCEPT,
|
|
199
199
|
className: "eidos-theme-editor-file",
|
|
200
200
|
tabIndex: -1,
|
|
201
201
|
"aria-hidden": "true",
|
|
@@ -209,7 +209,7 @@ var FontRow = ({
|
|
|
209
209
|
] });
|
|
210
210
|
};
|
|
211
211
|
var ThemeEditor = ({
|
|
212
|
-
colors =
|
|
212
|
+
colors = _chunkQDZVZY53cjs.THEME_COLOR_KEYS,
|
|
213
213
|
fontOptions = FONT_STACKS,
|
|
214
214
|
monoFontOptions = MONO_STACKS,
|
|
215
215
|
allowFontUpload = true,
|
|
@@ -219,7 +219,7 @@ var ThemeEditor = ({
|
|
|
219
219
|
hideCssExport = false,
|
|
220
220
|
className
|
|
221
221
|
}) => {
|
|
222
|
-
const { theme, resolvedTheme, setTheme, updateTheme, resetTheme, isDefault, toCss } =
|
|
222
|
+
const { theme, resolvedTheme, setTheme, updateTheme, resetTheme, isDefault, toCss } = _chunkQDZVZY53cjs.useTheme.call(void 0, );
|
|
223
223
|
const [copied, setCopied] = _react.useState.call(void 0, false);
|
|
224
224
|
const [uploaded, setUploaded] = _react.useState.call(void 0, []);
|
|
225
225
|
const [monoUploaded, setMonoUploaded] = _react.useState.call(void 0, []);
|
|
@@ -261,7 +261,7 @@ var ThemeEditor = ({
|
|
|
261
261
|
done();
|
|
262
262
|
}, [toCss]);
|
|
263
263
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ["eidos-theme-editor", className].filter(Boolean).join(" "), children: [
|
|
264
|
-
(failing.length > 0 || invisible.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
264
|
+
(failing.length > 0 || invisible.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkYWXS4IPHcjs.Alert, { variant: "warning", title: "Contrast issues", children: [
|
|
265
265
|
failing.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
|
|
266
266
|
"Cannot reach WCAG AA (4.5:1) with either foreground:",
|
|
267
267
|
" ",
|
|
@@ -286,7 +286,7 @@ var ThemeEditor = ({
|
|
|
286
286
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-row", children: [
|
|
287
287
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-theme-editor-row__label", children: COLOR_LABELS[key] }),
|
|
288
288
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
289
|
-
|
|
289
|
+
_chunkSJPCBRKRcjs.ColorPicker,
|
|
290
290
|
{
|
|
291
291
|
value: base,
|
|
292
292
|
onChange: (hex) => setColor(key, hex),
|
|
@@ -295,17 +295,17 @@ var ThemeEditor = ({
|
|
|
295
295
|
}
|
|
296
296
|
),
|
|
297
297
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-row__diagnostics", children: [
|
|
298
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
298
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: detail, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: `eidos-theme-editor-badge eidos-theme-editor-badge--${grade}`, children: [
|
|
299
299
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, badge.icon, { className: "eidos-theme-editor-badge__icon" }),
|
|
300
300
|
`${ratio.toFixed(2)}:1 ${badge.label}`
|
|
301
301
|
] }) }),
|
|
302
|
-
edgeWarning && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
302
|
+
edgeWarning && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: edgeWarning, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-theme-editor-badge eidos-theme-editor-badge--fail", children: [
|
|
303
303
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleX, { className: "eidos-theme-editor-badge__icon" }),
|
|
304
304
|
"Invisible on page"
|
|
305
305
|
] }) })
|
|
306
306
|
] }),
|
|
307
307
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-theme-editor-row__actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
308
|
-
|
|
308
|
+
_chunkNSA7ASZ7cjs.IconButton,
|
|
309
309
|
{
|
|
310
310
|
icon: _lucidereact.RotateCcw,
|
|
311
311
|
variant: "text",
|
|
@@ -366,8 +366,8 @@ var ThemeEditor = ({
|
|
|
366
366
|
_chunkOZZHOEN5cjs.Slider,
|
|
367
367
|
{
|
|
368
368
|
value: resolvedTheme.typography.fontScale,
|
|
369
|
-
min:
|
|
370
|
-
max:
|
|
369
|
+
min: _chunkQDZVZY53cjs.FONT_SCALE_MIN,
|
|
370
|
+
max: _chunkQDZVZY53cjs.FONT_SCALE_MAX,
|
|
371
371
|
step: 0.025,
|
|
372
372
|
showValue: true,
|
|
373
373
|
showMinMax: true,
|
|
@@ -379,9 +379,9 @@ var ThemeEditor = ({
|
|
|
379
379
|
] })
|
|
380
380
|
] }),
|
|
381
381
|
(!hideReset || !hideCssExport) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-theme-editor-actions", children: [
|
|
382
|
-
!hideReset && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
382
|
+
!hideReset && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNSA7ASZ7cjs.Button, { variant: "outlined", color: "secondary", disabled: isDefault, onClick: resetTheme, children: "Reset all" }),
|
|
383
383
|
!hideCssExport && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
384
|
-
|
|
384
|
+
_chunkNSA7ASZ7cjs.Button,
|
|
385
385
|
{
|
|
386
386
|
variant: "outlined",
|
|
387
387
|
preIcon: copied ? "Check" : "Clipboard",
|
|
@@ -398,4 +398,4 @@ ThemeEditor.displayName = "ThemeEditor";
|
|
|
398
398
|
|
|
399
399
|
|
|
400
400
|
exports.ThemeEditor = ThemeEditor;
|
|
401
|
-
//# sourceMappingURL=chunk-
|
|
401
|
+
//# sourceMappingURL=chunk-PVNBH7XN.cjs.map
|