eidos-ui 3.5.0 → 3.5.1
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/accordion/index.cjs +2 -2
- package/dist/accordion/index.js +1 -1
- package/dist/{chunk-SDEKANNL.cjs → chunk-EAJGSXEW.cjs} +14 -6
- package/dist/chunk-EAJGSXEW.cjs.map +1 -0
- package/dist/{chunk-CMOBXLNA.js → chunk-LNDFVC2Q.js} +14 -6
- package/dist/chunk-LNDFVC2Q.js.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-CMOBXLNA.js.map +0 -1
- package/dist/chunk-SDEKANNL.cjs.map +0 -1
package/dist/accordion/index.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkEAJGSXEWcjs = require('../chunk-EAJGSXEW.cjs');
|
|
5
5
|
require('../chunk-DZUJEN5N.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Accordion =
|
|
9
|
+
exports.Accordion = _chunkEAJGSXEWcjs.Accordion; exports.AccordionItem = _chunkEAJGSXEWcjs.AccordionItem;
|
|
10
10
|
//# sourceMappingURL=index.cjs.map
|
package/dist/accordion/index.js
CHANGED
|
@@ -51,13 +51,22 @@ var AccordionItem = ({
|
|
|
51
51
|
}) => {
|
|
52
52
|
const { openValues, toggle, size, color } = useAccordion();
|
|
53
53
|
const isOpen = openValues.includes(value);
|
|
54
|
-
const
|
|
54
|
+
const innerRef = _react.useRef.call(void 0, null);
|
|
55
55
|
const triggerId = _react.useId.call(void 0, );
|
|
56
56
|
const panelId = _react.useId.call(void 0, );
|
|
57
57
|
const [maxHeight, setMaxHeight] = _react.useState.call(void 0, 0);
|
|
58
58
|
_react.useEffect.call(void 0, () => {
|
|
59
|
-
if (!
|
|
60
|
-
|
|
59
|
+
if (!isOpen) {
|
|
60
|
+
setMaxHeight(0);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const node = innerRef.current;
|
|
64
|
+
if (!node) return;
|
|
65
|
+
const update = () => setMaxHeight(node.scrollHeight);
|
|
66
|
+
update();
|
|
67
|
+
const observer = new ResizeObserver(update);
|
|
68
|
+
observer.observe(node);
|
|
69
|
+
return () => observer.disconnect();
|
|
61
70
|
}, [isOpen]);
|
|
62
71
|
const itemClasses = [
|
|
63
72
|
"eidos-accordion-item",
|
|
@@ -95,10 +104,9 @@ var AccordionItem = ({
|
|
|
95
104
|
id: panelId,
|
|
96
105
|
role: "region",
|
|
97
106
|
"aria-labelledby": triggerId,
|
|
98
|
-
ref: contentRef,
|
|
99
107
|
className: "eidos-accordion-content-wrapper",
|
|
100
108
|
style: { maxHeight: `${maxHeight}px` },
|
|
101
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-accordion-content", children })
|
|
109
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: innerRef, className: "eidos-accordion-content", children })
|
|
102
110
|
}
|
|
103
111
|
)
|
|
104
112
|
] });
|
|
@@ -109,4 +117,4 @@ AccordionItem.displayName = "AccordionItem";
|
|
|
109
117
|
|
|
110
118
|
|
|
111
119
|
exports.Accordion = Accordion; exports.AccordionItem = AccordionItem;
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
120
|
+
//# sourceMappingURL=chunk-EAJGSXEW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-EAJGSXEW.cjs","../src/components/Accordion/Accordion.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-EAJGSXEW.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useId, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/** Normalise a controlled/default value (string | string[] | undefined) to string[]. */\nconst toArray = (v: string | string[] | undefined): string[] =>\n v === undefined ? [] : Array.isArray(v) ? v : [v];\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nconst useAccordion = (): AccordionContextValue => {\n const ctx = useContext(AccordionContext);\n if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n return ctx;\n};\n\n// ============================================================================\n// ACCORDION - root container; owns open state; provides context\n// ============================================================================\n\nexport const Accordion: React.FC<AccordionProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n variant = 'default',\n size = 'md',\n color = 'primary',\n className = '',\n children,\n}) => {\n const isControlled = value !== undefined;\n\n const [localOpen, setLocalOpen] = useState<string[]>(() => toArray(defaultValue));\n const openValues = isControlled ? toArray(value) : localOpen;\n\n const toggle = useCallback(\n (itemValue: string) => {\n const isOpen = openValues.includes(itemValue);\n let next: string[];\n\n if (multiple) {\n next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];\n } else {\n next = isOpen ? [] : [itemValue];\n }\n\n if (!isControlled) setLocalOpen(next);\n onChange?.(multiple ? next : (next[0] ?? ''));\n },\n [openValues, multiple, isControlled, onChange],\n );\n\n const rootClasses = ['eidos-accordion', `eidos-accordion--${variant}`, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <AccordionContext.Provider value={{ openValues, toggle, variant, size, color }}>\n <div className={rootClasses}>{children}</div>\n </AccordionContext.Provider>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n// ============================================================================\n// ACCORDION ITEM - individual item; reads context; renders trigger + animated panel\n// ============================================================================\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n value,\n label,\n icon,\n disabled = false,\n className = '',\n children,\n}) => {\n const { openValues, toggle, size, color } = useAccordion();\n const isOpen = openValues.includes(value);\n // The unclipped content itself, not the wrapper around it. The wrapper's own\n // height is what `maxHeight` below sets, so observing it would feed the\n // observer its own output; the inner node is always laid out at its natural\n // height regardless of the wrapper's clipping, so its size genuinely changes\n // when its content does.\n const innerRef = useRef<HTMLDivElement>(null);\n const triggerId = useId();\n const panelId = useId();\n\n // Drives the max-height CSS transition.\n // On open: set to the content's height so the wrapper animates to it.\n // On close: set to 0 so the wrapper animates shut.\n // The CSS transition on .eidos-accordion-content-wrapper handles the animation.\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n // `max-height` is a fixed px value, so it goes stale the moment the panel's\n // content reflows after opening - a narrower viewport rewrapping prose, a\n // font finishing loading, an image arriving, a nested collapsible opening.\n // The wrapper is `overflow: hidden` with no scrollbar, so a stale value\n // silently clips the tail of the panel with nothing on screen to suggest\n // content is missing. Tracking the content for as long as the panel stays\n // open is therefore part of the technique, not a refinement of it - which is\n // what `DataGrid`'s row expansion (`useExpandAnimation`) already does.\n useEffect(() => {\n if (!isOpen) {\n setMaxHeight(0);\n return;\n }\n\n const node = innerRef.current;\n if (!node) return;\n\n const update = () => setMaxHeight(node.scrollHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(node);\n return () => observer.disconnect();\n }, [isOpen]);\n\n const itemClasses = [\n 'eidos-accordion-item',\n isOpen && 'eidos-accordion-item--open',\n disabled && 'eidos-accordion-item--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const triggerClasses = [\n 'eidos-accordion-trigger',\n `eidos-accordion-trigger--${size}`,\n isOpen && 'eidos-accordion-trigger--open',\n isOpen && `eidos-accordion-trigger--${color}`,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={itemClasses}>\n <button\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={disabled}\n onClick={() => !disabled && toggle(value)}\n className={triggerClasses}\n >\n {icon && <span className=\"eidos-accordion-trigger-icon\">{icon}</span>}\n <span className=\"eidos-accordion-trigger-label\">{label}</span>\n <ChevronDown className=\"eidos-accordion-chevron\" aria-hidden=\"true\" />\n </button>\n\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n className=\"eidos-accordion-content-wrapper\"\n style={{ maxHeight: `${maxHeight}px` }}\n >\n <div ref={innerRef} className=\"eidos-accordion-content\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n"]}
|
|
@@ -51,13 +51,22 @@ var AccordionItem = ({
|
|
|
51
51
|
}) => {
|
|
52
52
|
const { openValues, toggle, size, color } = useAccordion();
|
|
53
53
|
const isOpen = openValues.includes(value);
|
|
54
|
-
const
|
|
54
|
+
const innerRef = useRef(null);
|
|
55
55
|
const triggerId = useId();
|
|
56
56
|
const panelId = useId();
|
|
57
57
|
const [maxHeight, setMaxHeight] = useState(0);
|
|
58
58
|
useEffect(() => {
|
|
59
|
-
if (!
|
|
60
|
-
|
|
59
|
+
if (!isOpen) {
|
|
60
|
+
setMaxHeight(0);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const node = innerRef.current;
|
|
64
|
+
if (!node) return;
|
|
65
|
+
const update = () => setMaxHeight(node.scrollHeight);
|
|
66
|
+
update();
|
|
67
|
+
const observer = new ResizeObserver(update);
|
|
68
|
+
observer.observe(node);
|
|
69
|
+
return () => observer.disconnect();
|
|
61
70
|
}, [isOpen]);
|
|
62
71
|
const itemClasses = [
|
|
63
72
|
"eidos-accordion-item",
|
|
@@ -95,10 +104,9 @@ var AccordionItem = ({
|
|
|
95
104
|
id: panelId,
|
|
96
105
|
role: "region",
|
|
97
106
|
"aria-labelledby": triggerId,
|
|
98
|
-
ref: contentRef,
|
|
99
107
|
className: "eidos-accordion-content-wrapper",
|
|
100
108
|
style: { maxHeight: `${maxHeight}px` },
|
|
101
|
-
children: /* @__PURE__ */ jsx("div", { className: "eidos-accordion-content", children })
|
|
109
|
+
children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "eidos-accordion-content", children })
|
|
102
110
|
}
|
|
103
111
|
)
|
|
104
112
|
] });
|
|
@@ -109,4 +117,4 @@ export {
|
|
|
109
117
|
Accordion,
|
|
110
118
|
AccordionItem
|
|
111
119
|
};
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
120
|
+
//# sourceMappingURL=chunk-LNDFVC2Q.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/Accordion.component.tsx"],"sourcesContent":["import React, { useState, useRef, useContext, useId, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/** Normalise a controlled/default value (string | string[] | undefined) to string[]. */\nconst toArray = (v: string | string[] | undefined): string[] =>\n v === undefined ? [] : Array.isArray(v) ? v : [v];\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nconst useAccordion = (): AccordionContextValue => {\n const ctx = useContext(AccordionContext);\n if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n return ctx;\n};\n\n// ============================================================================\n// ACCORDION - root container; owns open state; provides context\n// ============================================================================\n\nexport const Accordion: React.FC<AccordionProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n variant = 'default',\n size = 'md',\n color = 'primary',\n className = '',\n children,\n}) => {\n const isControlled = value !== undefined;\n\n const [localOpen, setLocalOpen] = useState<string[]>(() => toArray(defaultValue));\n const openValues = isControlled ? toArray(value) : localOpen;\n\n const toggle = useCallback(\n (itemValue: string) => {\n const isOpen = openValues.includes(itemValue);\n let next: string[];\n\n if (multiple) {\n next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];\n } else {\n next = isOpen ? [] : [itemValue];\n }\n\n if (!isControlled) setLocalOpen(next);\n onChange?.(multiple ? next : (next[0] ?? ''));\n },\n [openValues, multiple, isControlled, onChange],\n );\n\n const rootClasses = ['eidos-accordion', `eidos-accordion--${variant}`, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <AccordionContext.Provider value={{ openValues, toggle, variant, size, color }}>\n <div className={rootClasses}>{children}</div>\n </AccordionContext.Provider>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n// ============================================================================\n// ACCORDION ITEM - individual item; reads context; renders trigger + animated panel\n// ============================================================================\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n value,\n label,\n icon,\n disabled = false,\n className = '',\n children,\n}) => {\n const { openValues, toggle, size, color } = useAccordion();\n const isOpen = openValues.includes(value);\n // The unclipped content itself, not the wrapper around it. The wrapper's own\n // height is what `maxHeight` below sets, so observing it would feed the\n // observer its own output; the inner node is always laid out at its natural\n // height regardless of the wrapper's clipping, so its size genuinely changes\n // when its content does.\n const innerRef = useRef<HTMLDivElement>(null);\n const triggerId = useId();\n const panelId = useId();\n\n // Drives the max-height CSS transition.\n // On open: set to the content's height so the wrapper animates to it.\n // On close: set to 0 so the wrapper animates shut.\n // The CSS transition on .eidos-accordion-content-wrapper handles the animation.\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n // `max-height` is a fixed px value, so it goes stale the moment the panel's\n // content reflows after opening - a narrower viewport rewrapping prose, a\n // font finishing loading, an image arriving, a nested collapsible opening.\n // The wrapper is `overflow: hidden` with no scrollbar, so a stale value\n // silently clips the tail of the panel with nothing on screen to suggest\n // content is missing. Tracking the content for as long as the panel stays\n // open is therefore part of the technique, not a refinement of it - which is\n // what `DataGrid`'s row expansion (`useExpandAnimation`) already does.\n useEffect(() => {\n if (!isOpen) {\n setMaxHeight(0);\n return;\n }\n\n const node = innerRef.current;\n if (!node) return;\n\n const update = () => setMaxHeight(node.scrollHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(node);\n return () => observer.disconnect();\n }, [isOpen]);\n\n const itemClasses = [\n 'eidos-accordion-item',\n isOpen && 'eidos-accordion-item--open',\n disabled && 'eidos-accordion-item--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const triggerClasses = [\n 'eidos-accordion-trigger',\n `eidos-accordion-trigger--${size}`,\n isOpen && 'eidos-accordion-trigger--open',\n isOpen && `eidos-accordion-trigger--${color}`,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={itemClasses}>\n <button\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={disabled}\n onClick={() => !disabled && toggle(value)}\n className={triggerClasses}\n >\n {icon && <span className=\"eidos-accordion-trigger-icon\">{icon}</span>}\n <span className=\"eidos-accordion-trigger-label\">{label}</span>\n <ChevronDown className=\"eidos-accordion-chevron\" aria-hidden=\"true\" />\n </button>\n\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n className=\"eidos-accordion-content-wrapper\"\n style={{ maxHeight: `${maxHeight}px` }}\n >\n <div ref={innerRef} className=\"eidos-accordion-content\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n"],"mappings":"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","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -184,7 +184,7 @@ var _chunkKVIL4EP4cjs = require('./chunk-KVIL4EP4.cjs');
|
|
|
184
184
|
|
|
185
185
|
|
|
186
186
|
|
|
187
|
-
var
|
|
187
|
+
var _chunkEAJGSXEWcjs = require('./chunk-EAJGSXEW.cjs');
|
|
188
188
|
|
|
189
189
|
|
|
190
190
|
var _chunk3RWZC6OWcjs = require('./chunk-3RWZC6OW.cjs');
|
|
@@ -301,5 +301,5 @@ require('./chunk-DZUJEN5N.cjs');
|
|
|
301
301
|
|
|
302
302
|
|
|
303
303
|
|
|
304
|
-
exports.Accordion =
|
|
304
|
+
exports.Accordion = _chunkEAJGSXEWcjs.Accordion; exports.AccordionItem = _chunkEAJGSXEWcjs.AccordionItem; exports.Alert = _chunk3RWZC6OWcjs.Alert; exports.Avatar = _chunkQ3GNKF74cjs.Avatar; exports.AvatarGroup = _chunkQ3GNKF74cjs.AvatarGroup; exports.Badge = _chunk3ETWFS2Ncjs.Badge; exports.Breadcrumb = _chunk5O73AALPcjs.Breadcrumb; exports.Button = _chunkDA375AI6cjs.Button; exports.ButtonGroup = _chunk2ROKOO22cjs.ButtonGroup; exports.Calendar = _chunk6JHVXWDVcjs.Calendar; exports.Card = _chunkV5RS3JZNcjs.Card; exports.Chat = _chunkX3BVQBXDcjs.Chat; exports.Checkbox = _chunkYJNQLH2Lcjs.Checkbox; exports.Chip = _chunkTTLFY76Jcjs.Chip; exports.ColorPicker = _chunkKBQD4JLKcjs.ColorPicker; exports.Combobox = _chunk4AO5RKV5cjs.Combobox; exports.CommandPalette = _chunk2T7ZMMH5cjs.CommandPalette; exports.CommentThread = _chunkX3BVQBXDcjs.CommentThread; exports.ContextMenu = _chunkHNGFRRVZcjs.ContextMenu; exports.DataGrid = _chunk66UQTF57cjs.DataGrid; exports.DatePicker = _chunk6JHVXWDVcjs.DatePicker; exports.Divider = _chunk366R4GKRcjs.Divider; exports.Drawer = _chunkDU5JKTHKcjs.Drawer; exports.Dropdown = _chunkKIZVY57Hcjs.Dropdown; exports.DropdownProvider = _chunkKIZVY57Hcjs.DropdownProvider; exports.EmptyState = _chunkKV3V2CPHcjs.EmptyState; exports.FONT_ACCEPT = _chunkRJVHR45Icjs.FONT_ACCEPT; exports.FileUpload = _chunkXRVRGRC3cjs.FileUpload; exports.Footer = _chunkPTBBY4ZXcjs.Footer; exports.Header = _chunk3KBBJZHKcjs.Header; exports.IconButton = _chunkDA375AI6cjs.IconButton; exports.IdentityHeader = _chunk3KBBJZHKcjs.IdentityHeader; exports.InlineEdit = _chunkI6M6CVI2cjs.InlineEdit; exports.Input = _chunk7VJCGKVPcjs.Input; exports.Kbd = _chunkKVIL4EP4cjs.Kbd; exports.Menu = _chunkJ76JHN7Jcjs.Menu; exports.MenuPanel = _chunkJ76JHN7Jcjs.MenuPanel; exports.MessageComposer = _chunkX3BVQBXDcjs.MessageComposer; exports.Modal = _chunk4JSTBA4Fcjs.Modal; exports.Navigation = _chunkV4BZWBZTcjs.Navigation; exports.NumberInput = _chunkTC5IC6OPcjs.NumberInput; exports.OTPInput = _chunkVHO6JPRRcjs.OTPInput; exports.PageLayout = _chunkHMEREPDBcjs.PageLayout; exports.Pagination = _chunkKREHT4AQcjs.Pagination; exports.Pill = _chunkEQ6BNPTLcjs.Pill; exports.Popover = _chunkVQGLVBPLcjs.Popover; exports.Progress = _chunkV2S6XWIQcjs.Progress; exports.Radio = _chunkKPMIIGHHcjs.Radio; exports.RadioGroup = _chunkKPMIIGHHcjs.RadioGroup; exports.SegmentedControl = _chunkJPYJQ4TFcjs.SegmentedControl; exports.Select = _chunkXZLSHEHEcjs.Select; exports.Skeleton = _chunkIGFR5TEScjs.Skeleton; exports.Slider = _chunkOZZHOEN5cjs.Slider; exports.SnackbarContainer = _chunkXERBOFYZcjs.SnackbarContainer; exports.SnackbarProvider = _chunkXERBOFYZcjs.SnackbarProvider; exports.Spinner = _chunkTROYIUDHcjs.Spinner; exports.SplitButton = _chunkLQXFXXMJcjs.SplitButton; exports.Stepper = _chunkHFZ5FKRGcjs.Stepper; exports.Switch = _chunkIXZMKIV5cjs.Switch; exports.Tab = _chunkNOQF7UQ5cjs.Tab; exports.TabPanel = _chunkNOQF7UQ5cjs.TabPanel; exports.Table = _chunk3ZRFOKDMcjs.Table; exports.TableFiltersDropdown = _chunkPMSENLOAcjs.TableFiltersDropdown; exports.Tabs = _chunkNOQF7UQ5cjs.Tabs; exports.TagInput = _chunkZMRINZIOcjs.TagInput; exports.Textarea = _chunk7BFODYNLcjs.Textarea; exports.ThemeEditor = _chunk36JFXFM2cjs.ThemeEditor; exports.ThemeProvider = _chunkRJVHR45Icjs.ThemeProvider; exports.TimeInput = _chunk6JHVXWDVcjs.TimeInput; exports.Timeline = _chunkZMDZGL5Acjs.Timeline; exports.Toolbar = _chunkJCKGAAPZcjs.Toolbar; exports.Tooltip = _chunkBEOECPVJcjs.Tooltip; exports.TreeView = _chunkXKQMEVODcjs.TreeView; exports.VirtualList = _chunkRUDXHT76cjs.VirtualList; exports.defaultTheme = _chunkRJVHR45Icjs.defaultTheme; exports.familyNameFromFile = _chunkRJVHR45Icjs.familyNameFromFile; exports.isFontAvailable = _chunkRJVHR45Icjs.isFontAvailable; exports.isFontStackAvailable = _chunkRJVHR45Icjs.isFontStackAvailable; exports.registerFontFace = _chunkRJVHR45Icjs.registerFontFace; exports.registerFontFile = _chunkRJVHR45Icjs.registerFontFile; exports.renderIcon = _chunk35LGEPLPcjs.renderIcon; exports.toFontStack = _chunkRJVHR45Icjs.toFontStack; exports.useDropdownContext = _chunkKIZVY57Hcjs.useDropdownContext; exports.useSnackbar = _chunkXERBOFYZcjs.useSnackbar; exports.useSnackbarContext = _chunkXERBOFYZcjs.useSnackbarContext; exports.useTheme = _chunkRJVHR45Icjs.useTheme;
|
|
305
305
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/Accordion.component.tsx"],"sourcesContent":["import React, { useState, useRef, useContext, useId, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/** Normalise a controlled/default value (string | string[] | undefined) to string[]. */\nconst toArray = (v: string | string[] | undefined): string[] =>\n v === undefined ? [] : Array.isArray(v) ? v : [v];\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nconst useAccordion = (): AccordionContextValue => {\n const ctx = useContext(AccordionContext);\n if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n return ctx;\n};\n\n// ============================================================================\n// ACCORDION - root container; owns open state; provides context\n// ============================================================================\n\nexport const Accordion: React.FC<AccordionProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n variant = 'default',\n size = 'md',\n color = 'primary',\n className = '',\n children,\n}) => {\n const isControlled = value !== undefined;\n\n const [localOpen, setLocalOpen] = useState<string[]>(() => toArray(defaultValue));\n const openValues = isControlled ? toArray(value) : localOpen;\n\n const toggle = useCallback(\n (itemValue: string) => {\n const isOpen = openValues.includes(itemValue);\n let next: string[];\n\n if (multiple) {\n next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];\n } else {\n next = isOpen ? [] : [itemValue];\n }\n\n if (!isControlled) setLocalOpen(next);\n onChange?.(multiple ? next : (next[0] ?? ''));\n },\n [openValues, multiple, isControlled, onChange],\n );\n\n const rootClasses = ['eidos-accordion', `eidos-accordion--${variant}`, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <AccordionContext.Provider value={{ openValues, toggle, variant, size, color }}>\n <div className={rootClasses}>{children}</div>\n </AccordionContext.Provider>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n// ============================================================================\n// ACCORDION ITEM - individual item; reads context; renders trigger + animated panel\n// ============================================================================\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n value,\n label,\n icon,\n disabled = false,\n className = '',\n children,\n}) => {\n const { openValues, toggle, size, color } = useAccordion();\n const isOpen = openValues.includes(value);\n const contentRef = useRef<HTMLDivElement>(null);\n const triggerId = useId();\n const panelId = useId();\n\n // Drives the max-height CSS transition.\n // On open: set to scrollHeight so the wrapper animates to its natural height.\n // On close: set to 0 so the wrapper animates shut.\n // The CSS transition on .eidos-accordion-content-wrapper handles the animation.\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useEffect(() => {\n if (!contentRef.current) return;\n setMaxHeight(isOpen ? contentRef.current.scrollHeight : 0);\n }, [isOpen]);\n\n const itemClasses = [\n 'eidos-accordion-item',\n isOpen && 'eidos-accordion-item--open',\n disabled && 'eidos-accordion-item--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const triggerClasses = [\n 'eidos-accordion-trigger',\n `eidos-accordion-trigger--${size}`,\n isOpen && 'eidos-accordion-trigger--open',\n isOpen && `eidos-accordion-trigger--${color}`,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={itemClasses}>\n <button\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={disabled}\n onClick={() => !disabled && toggle(value)}\n className={triggerClasses}\n >\n {icon && <span className=\"eidos-accordion-trigger-icon\">{icon}</span>}\n <span className=\"eidos-accordion-trigger-label\">{label}</span>\n <ChevronDown className=\"eidos-accordion-chevron\" aria-hidden=\"true\" />\n </button>\n\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n ref={contentRef}\n className=\"eidos-accordion-content-wrapper\"\n style={{ maxHeight: `${maxHeight}px` }}\n >\n <div className=\"eidos-accordion-content\">{children}</div>\n </div>\n </div>\n );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SDEKANNL.cjs","../src/components/Accordion/Accordion.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SDEKANNL.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useId, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/** Normalise a controlled/default value (string | string[] | undefined) to string[]. */\nconst toArray = (v: string | string[] | undefined): string[] =>\n v === undefined ? [] : Array.isArray(v) ? v : [v];\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nconst useAccordion = (): AccordionContextValue => {\n const ctx = useContext(AccordionContext);\n if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n return ctx;\n};\n\n// ============================================================================\n// ACCORDION - root container; owns open state; provides context\n// ============================================================================\n\nexport const Accordion: React.FC<AccordionProps> = ({\n multiple = false,\n value,\n defaultValue,\n onChange,\n variant = 'default',\n size = 'md',\n color = 'primary',\n className = '',\n children,\n}) => {\n const isControlled = value !== undefined;\n\n const [localOpen, setLocalOpen] = useState<string[]>(() => toArray(defaultValue));\n const openValues = isControlled ? toArray(value) : localOpen;\n\n const toggle = useCallback(\n (itemValue: string) => {\n const isOpen = openValues.includes(itemValue);\n let next: string[];\n\n if (multiple) {\n next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];\n } else {\n next = isOpen ? [] : [itemValue];\n }\n\n if (!isControlled) setLocalOpen(next);\n onChange?.(multiple ? next : (next[0] ?? ''));\n },\n [openValues, multiple, isControlled, onChange],\n );\n\n const rootClasses = ['eidos-accordion', `eidos-accordion--${variant}`, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <AccordionContext.Provider value={{ openValues, toggle, variant, size, color }}>\n <div className={rootClasses}>{children}</div>\n </AccordionContext.Provider>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\n// ============================================================================\n// ACCORDION ITEM - individual item; reads context; renders trigger + animated panel\n// ============================================================================\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n value,\n label,\n icon,\n disabled = false,\n className = '',\n children,\n}) => {\n const { openValues, toggle, size, color } = useAccordion();\n const isOpen = openValues.includes(value);\n const contentRef = useRef<HTMLDivElement>(null);\n const triggerId = useId();\n const panelId = useId();\n\n // Drives the max-height CSS transition.\n // On open: set to scrollHeight so the wrapper animates to its natural height.\n // On close: set to 0 so the wrapper animates shut.\n // The CSS transition on .eidos-accordion-content-wrapper handles the animation.\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useEffect(() => {\n if (!contentRef.current) return;\n setMaxHeight(isOpen ? contentRef.current.scrollHeight : 0);\n }, [isOpen]);\n\n const itemClasses = [\n 'eidos-accordion-item',\n isOpen && 'eidos-accordion-item--open',\n disabled && 'eidos-accordion-item--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const triggerClasses = [\n 'eidos-accordion-trigger',\n `eidos-accordion-trigger--${size}`,\n isOpen && 'eidos-accordion-trigger--open',\n isOpen && `eidos-accordion-trigger--${color}`,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={itemClasses}>\n <button\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={disabled}\n onClick={() => !disabled && toggle(value)}\n className={triggerClasses}\n >\n {icon && <span className=\"eidos-accordion-trigger-icon\">{icon}</span>}\n <span className=\"eidos-accordion-trigger-label\">{label}</span>\n <ChevronDown className=\"eidos-accordion-chevron\" aria-hidden=\"true\" />\n </button>\n\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n ref={contentRef}\n className=\"eidos-accordion-content-wrapper\"\n style={{ maxHeight: `${maxHeight}px` }}\n >\n <div className=\"eidos-accordion-content\">{children}</div>\n </div>\n </div>\n );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n"]}
|