@compa11y/react 0.1.2 → 0.1.3
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/chunk-36S2JYVF.cjs +1 -0
- package/dist/chunk-AJ7JSWUT.cjs +1 -0
- package/dist/chunk-DDFEION3.cjs +1 -0
- package/dist/chunk-DWU3PTJO.cjs +1 -0
- package/dist/chunk-FD4F6ONU.cjs +1 -0
- package/dist/chunk-FOVHQAY5.cjs +1 -0
- package/dist/chunk-GITBIGD4.js +1 -0
- package/dist/chunk-HEA4NAOM.js +1 -0
- package/dist/chunk-IZ7LLPPV.js +1 -0
- package/dist/chunk-JS3UD7KS.cjs +1 -0
- package/dist/chunk-MAR6RBHF.cjs +1 -0
- package/dist/chunk-MD4AVTLT.js +1 -0
- package/dist/chunk-SB6ASQ36.js +1 -0
- package/dist/chunk-VMM4K2K4.js +1 -0
- package/dist/chunk-XEJXACWE.js +1 -0
- package/dist/chunk-ZB3SYGHE.js +1 -0
- package/dist/components/combobox/index.cjs +1 -31
- package/dist/components/combobox/index.js +1 -6
- package/dist/components/dialog/index.cjs +1 -46
- package/dist/components/dialog/index.js +1 -5
- package/dist/components/menu/index.cjs +1 -46
- package/dist/components/menu/index.js +1 -5
- package/dist/components/tabs/index.cjs +1 -35
- package/dist/components/tabs/index.js +1 -6
- package/dist/components/toast/index.cjs +1 -24
- package/dist/components/toast/index.js +1 -3
- package/dist/index.cjs +1 -3714
- package/dist/index.js +1 -3408
- package/package.json +2 -2
- package/dist/chunk-2S4C6FGA.js +0 -380
- package/dist/chunk-2S4C6FGA.js.map +0 -1
- package/dist/chunk-52J4Z3QD.cjs +0 -45
- package/dist/chunk-52J4Z3QD.cjs.map +0 -1
- package/dist/chunk-C7QK2I7H.js +0 -373
- package/dist/chunk-C7QK2I7H.js.map +0 -1
- package/dist/chunk-D2UMS62N.cjs +0 -245
- package/dist/chunk-D2UMS62N.cjs.map +0 -1
- package/dist/chunk-E265U2RK.js +0 -234
- package/dist/chunk-E265U2RK.js.map +0 -1
- package/dist/chunk-E4XJRXWM.js +0 -215
- package/dist/chunk-E4XJRXWM.js.map +0 -1
- package/dist/chunk-GDLOJH6K.cjs +0 -110
- package/dist/chunk-GDLOJH6K.cjs.map +0 -1
- package/dist/chunk-IR46CNNY.cjs +0 -329
- package/dist/chunk-IR46CNNY.cjs.map +0 -1
- package/dist/chunk-JXYOE7SH.js +0 -103
- package/dist/chunk-JXYOE7SH.js.map +0 -1
- package/dist/chunk-O3YYQZ5O.js +0 -317
- package/dist/chunk-O3YYQZ5O.js.map +0 -1
- package/dist/chunk-OIVTOU4Z.cjs +0 -386
- package/dist/chunk-OIVTOU4Z.cjs.map +0 -1
- package/dist/chunk-OND5B7UG.js +0 -85
- package/dist/chunk-OND5B7UG.js.map +0 -1
- package/dist/chunk-R4FR6M6I.cjs +0 -383
- package/dist/chunk-R4FR6M6I.cjs.map +0 -1
- package/dist/chunk-RBDQCIS7.cjs +0 -89
- package/dist/chunk-RBDQCIS7.cjs.map +0 -1
- package/dist/chunk-SOBS7MIH.cjs +0 -220
- package/dist/chunk-SOBS7MIH.cjs.map +0 -1
- package/dist/chunk-WURPAE3R.js +0 -41
- package/dist/chunk-WURPAE3R.js.map +0 -1
- package/dist/components/combobox/index.cjs.map +0 -1
- package/dist/components/combobox/index.js.map +0 -1
- package/dist/components/dialog/index.cjs.map +0 -1
- package/dist/components/dialog/index.js.map +0 -1
- package/dist/components/menu/index.cjs.map +0 -1
- package/dist/components/menu/index.js.map +0 -1
- package/dist/components/tabs/index.cjs.map +0 -1
- package/dist/components/tabs/index.js.map +0 -1
- package/dist/components/toast/index.cjs.map +0 -1
- package/dist/components/toast/index.js.map +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/chunk-SOBS7MIH.cjs
DELETED
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var reactDom = require('react-dom');
|
|
5
|
-
var core = require('@compa11y/core');
|
|
6
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
|
|
8
|
-
// src/components/toast/toast.tsx
|
|
9
|
-
var ToastContext = react.createContext(null);
|
|
10
|
-
function useToast() {
|
|
11
|
-
const context = react.useContext(ToastContext);
|
|
12
|
-
if (!context) {
|
|
13
|
-
throw new Error("useToast must be used within a ToastProvider");
|
|
14
|
-
}
|
|
15
|
-
return context;
|
|
16
|
-
}
|
|
17
|
-
function ToastProvider({
|
|
18
|
-
children,
|
|
19
|
-
duration = 5e3,
|
|
20
|
-
maxToasts = 5
|
|
21
|
-
}) {
|
|
22
|
-
const [toasts, setToasts] = react.useState([]);
|
|
23
|
-
const toastIdCounter = react.useRef(0);
|
|
24
|
-
const addToast = react.useCallback(
|
|
25
|
-
(toast) => {
|
|
26
|
-
const id = `toast-${++toastIdCounter.current}`;
|
|
27
|
-
const newToast = {
|
|
28
|
-
...toast,
|
|
29
|
-
id,
|
|
30
|
-
duration: toast.duration ?? duration
|
|
31
|
-
};
|
|
32
|
-
setToasts((prev) => {
|
|
33
|
-
const updated = [...prev, newToast];
|
|
34
|
-
return updated.slice(-maxToasts);
|
|
35
|
-
});
|
|
36
|
-
const message = toast.title ? `${toast.title}. ${toast.description || ""}` : toast.description || "";
|
|
37
|
-
if (toast.type === "error") {
|
|
38
|
-
core.announceAssertive(message);
|
|
39
|
-
} else {
|
|
40
|
-
core.announce(message, { politeness: "polite" });
|
|
41
|
-
}
|
|
42
|
-
return id;
|
|
43
|
-
},
|
|
44
|
-
[duration, maxToasts]
|
|
45
|
-
);
|
|
46
|
-
const removeToast = react.useCallback((id) => {
|
|
47
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
48
|
-
}, []);
|
|
49
|
-
const updateToast = react.useCallback(
|
|
50
|
-
(id, updates) => {
|
|
51
|
-
setToasts(
|
|
52
|
-
(prev) => prev.map((t) => t.id === id ? { ...t, ...updates } : t)
|
|
53
|
-
);
|
|
54
|
-
},
|
|
55
|
-
[]
|
|
56
|
-
);
|
|
57
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
58
|
-
ToastContext.Provider,
|
|
59
|
-
{
|
|
60
|
-
value: { toasts, addToast, removeToast, updateToast },
|
|
61
|
-
children
|
|
62
|
-
}
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
var positionStyles = {
|
|
66
|
-
"top-left": { top: 0, left: 0 },
|
|
67
|
-
"top-center": { top: 0, left: "50%", transform: "translateX(-50%)" },
|
|
68
|
-
"top-right": { top: 0, right: 0 },
|
|
69
|
-
"bottom-left": { bottom: 0, left: 0 },
|
|
70
|
-
"bottom-center": { bottom: 0, left: "50%", transform: "translateX(-50%)" },
|
|
71
|
-
"bottom-right": { bottom: 0, right: 0 }
|
|
72
|
-
};
|
|
73
|
-
var ToastViewport = react.forwardRef(
|
|
74
|
-
function ToastViewport2({
|
|
75
|
-
position = "bottom-right",
|
|
76
|
-
label = "Notifications",
|
|
77
|
-
style,
|
|
78
|
-
children,
|
|
79
|
-
...props
|
|
80
|
-
}, ref) {
|
|
81
|
-
const { toasts, removeToast } = useToast();
|
|
82
|
-
const viewport = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
83
|
-
"div",
|
|
84
|
-
{
|
|
85
|
-
ref,
|
|
86
|
-
role: "region",
|
|
87
|
-
"aria-label": label,
|
|
88
|
-
"aria-live": "polite",
|
|
89
|
-
"aria-relevant": "additions removals",
|
|
90
|
-
tabIndex: -1,
|
|
91
|
-
style: {
|
|
92
|
-
position: "fixed",
|
|
93
|
-
zIndex: 9999,
|
|
94
|
-
padding: "1rem",
|
|
95
|
-
display: "flex",
|
|
96
|
-
flexDirection: "column",
|
|
97
|
-
gap: "0.5rem",
|
|
98
|
-
...positionStyles[position],
|
|
99
|
-
...style
|
|
100
|
-
},
|
|
101
|
-
"data-compa11y-toast-viewport": true,
|
|
102
|
-
"data-position": position,
|
|
103
|
-
...props,
|
|
104
|
-
children: [
|
|
105
|
-
toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
-
ToastItem,
|
|
107
|
-
{
|
|
108
|
-
toast,
|
|
109
|
-
onClose: () => removeToast(toast.id)
|
|
110
|
-
},
|
|
111
|
-
toast.id
|
|
112
|
-
)),
|
|
113
|
-
children
|
|
114
|
-
]
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
return reactDom.createPortal(viewport, document.body);
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
function ToastItem({ toast, onClose }) {
|
|
121
|
-
const [isVisible, setIsVisible] = react.useState(true);
|
|
122
|
-
const [, setIsPaused] = react.useState(false);
|
|
123
|
-
const timerRef = react.useRef(null);
|
|
124
|
-
const remainingRef = react.useRef(toast.duration || 5e3);
|
|
125
|
-
const startTimeRef = react.useRef(Date.now());
|
|
126
|
-
const startTimer = react.useCallback(() => {
|
|
127
|
-
if (toast.duration === 0) return;
|
|
128
|
-
startTimeRef.current = Date.now();
|
|
129
|
-
timerRef.current = setTimeout(() => {
|
|
130
|
-
setIsVisible(false);
|
|
131
|
-
setTimeout(onClose, 200);
|
|
132
|
-
}, remainingRef.current);
|
|
133
|
-
}, [toast.duration, onClose]);
|
|
134
|
-
const pauseTimer = react.useCallback(() => {
|
|
135
|
-
if (timerRef.current) {
|
|
136
|
-
clearTimeout(timerRef.current);
|
|
137
|
-
remainingRef.current -= Date.now() - startTimeRef.current;
|
|
138
|
-
}
|
|
139
|
-
}, []);
|
|
140
|
-
react.useEffect(() => {
|
|
141
|
-
startTimer();
|
|
142
|
-
return () => {
|
|
143
|
-
if (timerRef.current) {
|
|
144
|
-
clearTimeout(timerRef.current);
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
}, [startTimer]);
|
|
148
|
-
const handleMouseEnter = () => {
|
|
149
|
-
setIsPaused(true);
|
|
150
|
-
pauseTimer();
|
|
151
|
-
};
|
|
152
|
-
const handleMouseLeave = () => {
|
|
153
|
-
setIsPaused(false);
|
|
154
|
-
startTimer();
|
|
155
|
-
};
|
|
156
|
-
const handleKeyDown = (event) => {
|
|
157
|
-
if (event.key === "Escape") {
|
|
158
|
-
onClose();
|
|
159
|
-
}
|
|
160
|
-
};
|
|
161
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
162
|
-
"div",
|
|
163
|
-
{
|
|
164
|
-
role: "alert",
|
|
165
|
-
"aria-atomic": "true",
|
|
166
|
-
tabIndex: 0,
|
|
167
|
-
onMouseEnter: handleMouseEnter,
|
|
168
|
-
onMouseLeave: handleMouseLeave,
|
|
169
|
-
onKeyDown: handleKeyDown,
|
|
170
|
-
"data-type": toast.type,
|
|
171
|
-
"data-visible": isVisible,
|
|
172
|
-
"data-compa11y-toast": true,
|
|
173
|
-
children: [
|
|
174
|
-
toast.title && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-compa11y-toast-title": true, children: toast.title }),
|
|
175
|
-
toast.description && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-compa11y-toast-description": true, children: toast.description }),
|
|
176
|
-
toast.action && /* @__PURE__ */ jsxRuntime.jsx(
|
|
177
|
-
"button",
|
|
178
|
-
{
|
|
179
|
-
type: "button",
|
|
180
|
-
tabIndex: 0,
|
|
181
|
-
onClick: () => {
|
|
182
|
-
toast.action?.onClick();
|
|
183
|
-
onClose();
|
|
184
|
-
},
|
|
185
|
-
"data-compa11y-toast-action": true,
|
|
186
|
-
children: toast.action.label
|
|
187
|
-
}
|
|
188
|
-
),
|
|
189
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
190
|
-
"button",
|
|
191
|
-
{
|
|
192
|
-
type: "button",
|
|
193
|
-
tabIndex: 0,
|
|
194
|
-
"aria-label": "Dismiss",
|
|
195
|
-
onClick: onClose,
|
|
196
|
-
"data-compa11y-toast-close": true,
|
|
197
|
-
children: "\xD7"
|
|
198
|
-
}
|
|
199
|
-
)
|
|
200
|
-
]
|
|
201
|
-
}
|
|
202
|
-
);
|
|
203
|
-
}
|
|
204
|
-
function useToastHelpers() {
|
|
205
|
-
const { addToast } = useToast();
|
|
206
|
-
return {
|
|
207
|
-
toast: addToast,
|
|
208
|
-
success: (title, description) => addToast({ type: "success", title, description }),
|
|
209
|
-
error: (title, description) => addToast({ type: "error", title, description }),
|
|
210
|
-
warning: (title, description) => addToast({ type: "warning", title, description }),
|
|
211
|
-
info: (title, description) => addToast({ type: "info", title, description })
|
|
212
|
-
};
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
exports.ToastProvider = ToastProvider;
|
|
216
|
-
exports.ToastViewport = ToastViewport;
|
|
217
|
-
exports.useToast = useToast;
|
|
218
|
-
exports.useToastHelpers = useToastHelpers;
|
|
219
|
-
//# sourceMappingURL=chunk-SOBS7MIH.cjs.map
|
|
220
|
-
//# sourceMappingURL=chunk-SOBS7MIH.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/toast/toast.tsx"],"names":["createContext","useContext","useState","useRef","useCallback","announceAssertive","announce","jsx","forwardRef","ToastViewport","jsxs","createPortal","useEffect"],"mappings":"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","file":"chunk-SOBS7MIH.cjs","sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { announce, announceAssertive } from '@compa11y/core';\nexport type ToastType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface Toast {\n id: string;\n title?: string;\n description?: string;\n type: ToastType;\n duration?: number;\n action?: {\n label: string;\n onClick: () => void;\n };\n}\n\ninterface ToastContextValue {\n toasts: Toast[];\n addToast: (toast: Omit<Toast, 'id'>) => string;\n removeToast: (id: string) => void;\n updateToast: (id: string, toast: Partial<Omit<Toast, 'id'>>) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport function useToast() {\n const context = useContext(ToastContext);\n if (!context) {\n throw new Error('useToast must be used within a ToastProvider');\n }\n return context;\n}\n\nexport interface ToastProviderProps {\n children: React.ReactNode;\n /** Default duration for toasts in ms */\n duration?: number;\n /** Maximum number of visible toasts */\n maxToasts?: number;\n}\n\nexport function ToastProvider({\n children,\n duration = 5000,\n maxToasts = 5,\n}: ToastProviderProps) {\n const [toasts, setToasts] = useState<Toast[]>([]);\n const toastIdCounter = useRef(0);\n\n const addToast = useCallback(\n (toast: Omit<Toast, 'id'>): string => {\n const id = `toast-${++toastIdCounter.current}`;\n const newToast: Toast = {\n ...toast,\n id,\n duration: toast.duration ?? duration,\n };\n\n setToasts((prev) => {\n const updated = [...prev, newToast];\n // Limit visible toasts\n return updated.slice(-maxToasts);\n });\n\n // Announce to screen readers\n const message = toast.title\n ? `${toast.title}. ${toast.description || ''}`\n : toast.description || '';\n\n if (toast.type === 'error') {\n announceAssertive(message);\n } else {\n announce(message, { politeness: 'polite' });\n }\n\n return id;\n },\n [duration, maxToasts]\n );\n\n const removeToast = useCallback((id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const updateToast = useCallback(\n (id: string, updates: Partial<Omit<Toast, 'id'>>) => {\n setToasts((prev) =>\n prev.map((t) => (t.id === id ? { ...t, ...updates } : t))\n );\n },\n []\n );\n\n return (\n <ToastContext.Provider\n value={{ toasts, addToast, removeToast, updateToast }}\n >\n {children}\n </ToastContext.Provider>\n );\n}\n\nexport interface ToastViewportProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Position of the toast container */\n position?:\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n /** Label for screen readers */\n label?: string;\n}\n\nconst positionStyles: Record<string, React.CSSProperties> = {\n 'top-left': { top: 0, left: 0 },\n 'top-center': { top: 0, left: '50%', transform: 'translateX(-50%)' },\n 'top-right': { top: 0, right: 0 },\n 'bottom-left': { bottom: 0, left: 0 },\n 'bottom-center': { bottom: 0, left: '50%', transform: 'translateX(-50%)' },\n 'bottom-right': { bottom: 0, right: 0 },\n};\n\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(\n function ToastViewport(\n {\n position = 'bottom-right',\n label = 'Notifications',\n style,\n children,\n ...props\n },\n ref\n ) {\n const { toasts, removeToast } = useToast();\n\n const viewport = (\n <div\n ref={ref}\n role=\"region\"\n aria-label={label}\n aria-live=\"polite\"\n aria-relevant=\"additions removals\"\n tabIndex={-1}\n style={{\n position: 'fixed',\n zIndex: 9999,\n padding: '1rem',\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5rem',\n ...positionStyles[position],\n ...style,\n }}\n data-compa11y-toast-viewport\n data-position={position}\n {...props}\n >\n {toasts.map((toast) => (\n <ToastItem\n key={toast.id}\n toast={toast}\n onClose={() => removeToast(toast.id)}\n />\n ))}\n {children}\n </div>\n );\n\n return createPortal(viewport, document.body);\n }\n);\n\ninterface ToastItemProps {\n toast: Toast;\n onClose: () => void;\n}\n\nfunction ToastItem({ toast, onClose }: ToastItemProps) {\n const [isVisible, setIsVisible] = useState(true);\n const [, setIsPaused] = useState(false);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const remainingRef = useRef(toast.duration || 5000);\n const startTimeRef = useRef(Date.now());\n\n const startTimer = useCallback(() => {\n if (toast.duration === 0) return; // Infinite duration\n\n startTimeRef.current = Date.now();\n timerRef.current = setTimeout(() => {\n setIsVisible(false);\n setTimeout(onClose, 200); // Allow exit animation\n }, remainingRef.current);\n }, [toast.duration, onClose]);\n\n const pauseTimer = useCallback(() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n remainingRef.current -= Date.now() - startTimeRef.current;\n }\n }, []);\n\n useEffect(() => {\n startTimer();\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, [startTimer]);\n\n const handleMouseEnter = () => {\n setIsPaused(true);\n pauseTimer();\n };\n\n const handleMouseLeave = () => {\n setIsPaused(false);\n startTimer();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n onClose();\n }\n };\n\n return (\n <div\n role=\"alert\"\n aria-atomic=\"true\"\n tabIndex={0}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onKeyDown={handleKeyDown}\n data-type={toast.type}\n data-visible={isVisible}\n data-compa11y-toast\n >\n {toast.title && <div data-compa11y-toast-title>{toast.title}</div>}\n {toast.description && (\n <div data-compa11y-toast-description>{toast.description}</div>\n )}\n {toast.action && (\n <button\n type=\"button\"\n // Safari fix: Ensure button is in tab order\n tabIndex={0}\n onClick={() => {\n toast.action?.onClick();\n onClose();\n }}\n data-compa11y-toast-action\n >\n {toast.action.label}\n </button>\n )}\n <button\n type=\"button\"\n // Safari fix: Ensure button is in tab order\n tabIndex={0}\n aria-label=\"Dismiss\"\n onClick={onClose}\n data-compa11y-toast-close\n >\n ×\n </button>\n </div>\n );\n}\n\n/**\n * Hook for common toast patterns\n */\nexport function useToastHelpers() {\n const { addToast } = useToast();\n\n return {\n toast: addToast,\n success: (title: string, description?: string) =>\n addToast({ type: 'success', title, description }),\n error: (title: string, description?: string) =>\n addToast({ type: 'error', title, description }),\n warning: (title: string, description?: string) =>\n addToast({ type: 'warning', title, description }),\n info: (title: string, description?: string) =>\n addToast({ type: 'info', title, description }),\n };\n}\n"]}
|
package/dist/chunk-WURPAE3R.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { useId as useId$1, useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
// src/hooks/use-id.ts
|
|
4
|
-
function useId(prefix) {
|
|
5
|
-
const reactId = useId$1();
|
|
6
|
-
return useMemo(() => {
|
|
7
|
-
const cleanId = reactId.replace(/:/g, "");
|
|
8
|
-
return prefix ? `compa11y-${prefix}-${cleanId}` : `compa11y-${cleanId}`;
|
|
9
|
-
}, [reactId, prefix]);
|
|
10
|
-
}
|
|
11
|
-
function useIds(parts, prefix) {
|
|
12
|
-
const baseId = useId(prefix);
|
|
13
|
-
return useMemo(() => {
|
|
14
|
-
const ids = {};
|
|
15
|
-
for (const part of parts) {
|
|
16
|
-
ids[part] = `${baseId}-${part}`;
|
|
17
|
-
}
|
|
18
|
-
return ids;
|
|
19
|
-
}, [baseId, parts]);
|
|
20
|
-
}
|
|
21
|
-
function useIdScope(componentName) {
|
|
22
|
-
const scopeId = useId(componentName);
|
|
23
|
-
return useMemo(
|
|
24
|
-
() => ({
|
|
25
|
-
id: scopeId,
|
|
26
|
-
generate: (suffix) => `${scopeId}-${suffix}`,
|
|
27
|
-
generateMultiple: (parts) => {
|
|
28
|
-
const ids = {};
|
|
29
|
-
for (const part of parts) {
|
|
30
|
-
ids[part] = `${scopeId}-${part}`;
|
|
31
|
-
}
|
|
32
|
-
return ids;
|
|
33
|
-
}
|
|
34
|
-
}),
|
|
35
|
-
[scopeId]
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { useId, useIdScope, useIds };
|
|
40
|
-
//# sourceMappingURL=chunk-WURPAE3R.js.map
|
|
41
|
-
//# sourceMappingURL=chunk-WURPAE3R.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-id.ts"],"names":["useReactId"],"mappings":";;;AAOO,SAAS,MAAM,MAAA,EAAyB;AAE7C,EAAA,MAAM,UAAUA,OAAA,EAAW;AAE3B,EAAA,OAAO,QAAQ,MAAM;AAEnB,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,IAAA,EAAM,EAAE,CAAA;AACxC,IAAA,OAAO,SAAS,CAAA,SAAA,EAAY,MAAM,IAAI,OAAO,CAAA,CAAA,GAAK,YAAY,OAAO,CAAA,CAAA;AAAA,EACvE,CAAA,EAAG,CAAC,OAAA,EAAS,MAAM,CAAC,CAAA;AACtB;AAKO,SAAS,MAAA,CACd,OACA,MAAA,EAC2B;AAC3B,EAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAE3B,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,MAAM,EAAC;AACb,IAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,MAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,EAAG,MAAM,IAAI,IAAI,CAAA,CAAA;AAAA,IAC/B;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAK,CAAC,CAAA;AACpB;AAKO,SAAS,WAAW,aAAA,EAAuB;AAChD,EAAA,MAAM,OAAA,GAAU,MAAM,aAAa,CAAA;AAEnC,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,EAAA,EAAI,OAAA;AAAA,MACJ,UAAU,CAAC,MAAA,KAAmB,CAAA,EAAG,OAAO,IAAI,MAAM,CAAA,CAAA;AAAA,MAClD,gBAAA,EAAkB,CAA8B,KAAA,KAAa;AAC3D,QAAA,MAAM,MAAM,EAAC;AACb,QAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,UAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,EAAG,OAAO,IAAI,IAAI,CAAA,CAAA;AAAA,QAChC;AACA,QAAA,OAAO,GAAA;AAAA,MACT;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AACF","file":"chunk-WURPAE3R.js","sourcesContent":["import { useId as useReactId, useMemo } from 'react';\n\n/**\n * Generate a unique ID for accessibility purposes\n *\n * Uses React's useId when available, with a fallback for SSR\n */\nexport function useId(prefix?: string): string {\n // Use React 18's useId as the base\n const reactId = useReactId();\n\n return useMemo(() => {\n // Clean up React's ID format (removes colons)\n const cleanId = reactId.replace(/:/g, '');\n return prefix ? `compa11y-${prefix}-${cleanId}` : `compa11y-${cleanId}`;\n }, [reactId, prefix]);\n}\n\n/**\n * Generate multiple related IDs for a component\n */\nexport function useIds<T extends readonly string[]>(\n parts: T,\n prefix?: string\n): Record<T[number], string> {\n const baseId = useId(prefix);\n\n return useMemo(() => {\n const ids = {} as Record<string, string>;\n for (const part of parts) {\n ids[part] = `${baseId}-${part}`;\n }\n return ids as Record<T[number], string>;\n }, [baseId, parts]);\n}\n\n/**\n * Create a scoped ID generator for complex components\n */\nexport function useIdScope(componentName: string) {\n const scopeId = useId(componentName);\n\n return useMemo(\n () => ({\n id: scopeId,\n generate: (suffix: string) => `${scopeId}-${suffix}`,\n generateMultiple: <T extends readonly string[]>(parts: T) => {\n const ids = {} as Record<string, string>;\n for (const part of parts) {\n ids[part] = `${scopeId}-${part}`;\n }\n return ids as Record<T[number], string>;\n },\n }),\n [scopeId]\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|