@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
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/tabs/tabs-context.ts","../src/components/tabs/tabs.tsx"],"names":["createContext","useContext","forwardRef","Tabs","useState","useRef","useId","useCallback","jsx","TabList","useKeyboard","Tab","useAnnouncer","React","TabPanel"],"mappings":"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","file":"chunk-D2UMS62N.cjs","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface TabsContextValue {\n /** Currently selected tab value */\n selectedValue: string;\n /** Change selected tab */\n setSelectedValue: (value: string) => void;\n /** Base ID for ARIA relationships */\n baseId: string;\n /** Orientation of tabs */\n orientation: 'horizontal' | 'vertical';\n /** Whether tabs are activated on focus or on click */\n activationMode: 'automatic' | 'manual';\n /** Register a tab */\n registerTab: (value: string) => void;\n /** Unregister a tab */\n unregisterTab: (value: string) => void;\n /** Get all tab values */\n getTabValues: () => string[];\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n if (!context) {\n throw new Error(\n 'Tabs compound components must be used within a Tabs component'\n );\n }\n return context;\n}\n\nexport const TabsProvider = TabsContext.Provider;\n","import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport {\n TabsProvider,\n useTabsContext,\n type TabsContextValue,\n} from './tabs-context';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Default selected tab value */\n defaultValue?: string;\n /** Controlled selected value */\n value?: string;\n /** Called when selection changes */\n onValueChange?: (value: string) => void;\n /** Orientation of tabs */\n orientation?: 'horizontal' | 'vertical';\n /** Activation mode */\n activationMode?: 'automatic' | 'manual';\n children: React.ReactNode;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n {\n defaultValue = '',\n value: controlledValue,\n onValueChange,\n orientation = 'horizontal',\n activationMode = 'automatic',\n children,\n ...props\n },\n ref\n) {\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const selectedValue = controlledValue ?? uncontrolledValue;\n const tabsRef = useRef<string[]>([]);\n const baseId = useId('tabs');\n\n const setSelectedValue = useCallback(\n (value: string) => {\n if (controlledValue === undefined) {\n setUncontrolledValue(value);\n }\n onValueChange?.(value);\n },\n [controlledValue, onValueChange]\n );\n\n const registerTab = useCallback((value: string) => {\n if (!tabsRef.current.includes(value)) {\n tabsRef.current.push(value);\n }\n }, []);\n\n const unregisterTab = useCallback((value: string) => {\n const index = tabsRef.current.indexOf(value);\n if (index > -1) {\n tabsRef.current.splice(index, 1);\n }\n }, []);\n\n const getTabValues = useCallback(() => [...tabsRef.current], []);\n\n const contextValue: TabsContextValue = {\n selectedValue,\n setSelectedValue,\n baseId,\n orientation,\n activationMode,\n registerTab,\n unregisterTab,\n getTabValues,\n };\n\n return (\n <TabsProvider value={contextValue}>\n <div\n ref={ref}\n data-orientation={orientation}\n data-compa11y-tabs\n {...props}\n >\n {children}\n </div>\n </TabsProvider>\n );\n});\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Accessible label for the tab list */\n 'aria-label'?: string;\n children: React.ReactNode;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n function TabList(\n { children, 'aria-label': ariaLabel, onKeyDown, ...props },\n ref\n ) {\n const {\n orientation,\n selectedValue,\n setSelectedValue,\n getTabValues,\n activationMode,\n } = useTabsContext();\n\n const navigateToTab = useCallback(\n (direction: 'next' | 'previous' | 'first' | 'last') => {\n const values = getTabValues();\n if (values.length === 0) return;\n\n const currentIndex = values.indexOf(selectedValue);\n let newIndex: number;\n\n switch (direction) {\n case 'next':\n newIndex = (currentIndex + 1) % values.length;\n break;\n case 'previous':\n newIndex = (currentIndex - 1 + values.length) % values.length;\n break;\n case 'first':\n newIndex = 0;\n break;\n case 'last':\n newIndex = values.length - 1;\n break;\n }\n\n const newValue = values[newIndex];\n if (newValue) {\n const tabElement = document.querySelector(\n `[data-compa11y-tab][data-value=\"${newValue}\"]`\n ) as HTMLElement;\n tabElement?.focus();\n\n if (activationMode === 'automatic') {\n setSelectedValue(newValue);\n }\n }\n },\n [getTabValues, selectedValue, setSelectedValue, activationMode]\n );\n\n const keyboardProps = useKeyboard(\n {\n ArrowRight: () => {\n if (orientation === 'horizontal') navigateToTab('next');\n },\n ArrowLeft: () => {\n if (orientation === 'horizontal') navigateToTab('previous');\n },\n ArrowDown: () => {\n if (orientation === 'vertical') navigateToTab('next');\n },\n ArrowUp: () => {\n if (orientation === 'vertical') navigateToTab('previous');\n },\n Home: () => navigateToTab('first'),\n End: () => navigateToTab('last'),\n },\n { preventDefault: true }\n );\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) {\n keyboardProps.onKeyDown(event);\n }\n };\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-label={ariaLabel}\n aria-orientation={orientation}\n onKeyDown={handleKeyDown}\n data-compa11y-tablist\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nexport interface TabProps extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'value'\n> {\n /** Value identifying this tab */\n value: string;\n /** Whether the tab is disabled */\n disabled?: boolean;\n children: React.ReactNode;\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n { value, disabled = false, children, onClick, ...props },\n ref\n) {\n const {\n selectedValue,\n setSelectedValue,\n baseId,\n registerTab,\n unregisterTab,\n } = useTabsContext();\n const { announce } = useAnnouncer();\n\n React.useEffect(() => {\n registerTab(value);\n return () => unregisterTab(value);\n }, [value, registerTab, unregisterTab]);\n\n const isSelected = selectedValue === value;\n const tabId = `${baseId}-tab-${value}`;\n const panelId = `${baseId}-panel-${value}`;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (!event.defaultPrevented && !disabled) {\n setSelectedValue(value);\n announce(`${value} tab selected`);\n }\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"tab\"\n id={tabId}\n aria-selected={isSelected}\n aria-controls={panelId}\n aria-disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n onClick={handleClick}\n disabled={disabled}\n data-selected={isSelected}\n data-disabled={disabled}\n data-value={value}\n data-compa11y-tab\n {...props}\n >\n {children}\n </button>\n );\n});\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Value identifying this panel (must match a Tab value) */\n value: string;\n /** Whether to keep panel mounted when not selected */\n forceMount?: boolean;\n children: React.ReactNode;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n function TabPanel({ value, forceMount = false, children, ...props }, ref) {\n const { selectedValue, baseId } = useTabsContext();\n\n const isSelected = selectedValue === value;\n const tabId = `${baseId}-tab-${value}`;\n const panelId = `${baseId}-panel-${value}`;\n\n if (!isSelected && !forceMount) {\n return null;\n }\n\n return (\n <div\n ref={ref}\n role=\"tabpanel\"\n id={panelId}\n aria-labelledby={tabId}\n tabIndex={0}\n hidden={!isSelected}\n data-selected={isSelected}\n data-compa11y-tabpanel\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nexport const TabsCompound = Object.assign(Tabs, {\n List: TabList,\n Tab: Tab,\n Panel: TabPanel,\n});\n"]}
|
package/dist/chunk-E265U2RK.js
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
import { useAnnouncer } from './chunk-OND5B7UG.js';
|
|
2
|
-
import { useKeyboard } from './chunk-JXYOE7SH.js';
|
|
3
|
-
import { useId } from './chunk-WURPAE3R.js';
|
|
4
|
-
import React, { createContext, forwardRef, useState, useRef, useCallback, useContext } from 'react';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
var TabsContext = createContext(null);
|
|
8
|
-
function useTabsContext() {
|
|
9
|
-
const context = useContext(TabsContext);
|
|
10
|
-
if (!context) {
|
|
11
|
-
throw new Error(
|
|
12
|
-
"Tabs compound components must be used within a Tabs component"
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
return context;
|
|
16
|
-
}
|
|
17
|
-
var TabsProvider = TabsContext.Provider;
|
|
18
|
-
var Tabs = forwardRef(function Tabs2({
|
|
19
|
-
defaultValue = "",
|
|
20
|
-
value: controlledValue,
|
|
21
|
-
onValueChange,
|
|
22
|
-
orientation = "horizontal",
|
|
23
|
-
activationMode = "automatic",
|
|
24
|
-
children,
|
|
25
|
-
...props
|
|
26
|
-
}, ref) {
|
|
27
|
-
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
28
|
-
const selectedValue = controlledValue ?? uncontrolledValue;
|
|
29
|
-
const tabsRef = useRef([]);
|
|
30
|
-
const baseId = useId("tabs");
|
|
31
|
-
const setSelectedValue = useCallback(
|
|
32
|
-
(value) => {
|
|
33
|
-
if (controlledValue === void 0) {
|
|
34
|
-
setUncontrolledValue(value);
|
|
35
|
-
}
|
|
36
|
-
onValueChange?.(value);
|
|
37
|
-
},
|
|
38
|
-
[controlledValue, onValueChange]
|
|
39
|
-
);
|
|
40
|
-
const registerTab = useCallback((value) => {
|
|
41
|
-
if (!tabsRef.current.includes(value)) {
|
|
42
|
-
tabsRef.current.push(value);
|
|
43
|
-
}
|
|
44
|
-
}, []);
|
|
45
|
-
const unregisterTab = useCallback((value) => {
|
|
46
|
-
const index = tabsRef.current.indexOf(value);
|
|
47
|
-
if (index > -1) {
|
|
48
|
-
tabsRef.current.splice(index, 1);
|
|
49
|
-
}
|
|
50
|
-
}, []);
|
|
51
|
-
const getTabValues = useCallback(() => [...tabsRef.current], []);
|
|
52
|
-
const contextValue = {
|
|
53
|
-
selectedValue,
|
|
54
|
-
setSelectedValue,
|
|
55
|
-
baseId,
|
|
56
|
-
orientation,
|
|
57
|
-
activationMode,
|
|
58
|
-
registerTab,
|
|
59
|
-
unregisterTab,
|
|
60
|
-
getTabValues
|
|
61
|
-
};
|
|
62
|
-
return /* @__PURE__ */ jsx(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
63
|
-
"div",
|
|
64
|
-
{
|
|
65
|
-
ref,
|
|
66
|
-
"data-orientation": orientation,
|
|
67
|
-
"data-compa11y-tabs": true,
|
|
68
|
-
...props,
|
|
69
|
-
children
|
|
70
|
-
}
|
|
71
|
-
) });
|
|
72
|
-
});
|
|
73
|
-
var TabList = forwardRef(
|
|
74
|
-
function TabList2({ children, "aria-label": ariaLabel, onKeyDown, ...props }, ref) {
|
|
75
|
-
const {
|
|
76
|
-
orientation,
|
|
77
|
-
selectedValue,
|
|
78
|
-
setSelectedValue,
|
|
79
|
-
getTabValues,
|
|
80
|
-
activationMode
|
|
81
|
-
} = useTabsContext();
|
|
82
|
-
const navigateToTab = useCallback(
|
|
83
|
-
(direction) => {
|
|
84
|
-
const values = getTabValues();
|
|
85
|
-
if (values.length === 0) return;
|
|
86
|
-
const currentIndex = values.indexOf(selectedValue);
|
|
87
|
-
let newIndex;
|
|
88
|
-
switch (direction) {
|
|
89
|
-
case "next":
|
|
90
|
-
newIndex = (currentIndex + 1) % values.length;
|
|
91
|
-
break;
|
|
92
|
-
case "previous":
|
|
93
|
-
newIndex = (currentIndex - 1 + values.length) % values.length;
|
|
94
|
-
break;
|
|
95
|
-
case "first":
|
|
96
|
-
newIndex = 0;
|
|
97
|
-
break;
|
|
98
|
-
case "last":
|
|
99
|
-
newIndex = values.length - 1;
|
|
100
|
-
break;
|
|
101
|
-
}
|
|
102
|
-
const newValue = values[newIndex];
|
|
103
|
-
if (newValue) {
|
|
104
|
-
const tabElement = document.querySelector(
|
|
105
|
-
`[data-compa11y-tab][data-value="${newValue}"]`
|
|
106
|
-
);
|
|
107
|
-
tabElement?.focus();
|
|
108
|
-
if (activationMode === "automatic") {
|
|
109
|
-
setSelectedValue(newValue);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
[getTabValues, selectedValue, setSelectedValue, activationMode]
|
|
114
|
-
);
|
|
115
|
-
const keyboardProps = useKeyboard(
|
|
116
|
-
{
|
|
117
|
-
ArrowRight: () => {
|
|
118
|
-
if (orientation === "horizontal") navigateToTab("next");
|
|
119
|
-
},
|
|
120
|
-
ArrowLeft: () => {
|
|
121
|
-
if (orientation === "horizontal") navigateToTab("previous");
|
|
122
|
-
},
|
|
123
|
-
ArrowDown: () => {
|
|
124
|
-
if (orientation === "vertical") navigateToTab("next");
|
|
125
|
-
},
|
|
126
|
-
ArrowUp: () => {
|
|
127
|
-
if (orientation === "vertical") navigateToTab("previous");
|
|
128
|
-
},
|
|
129
|
-
Home: () => navigateToTab("first"),
|
|
130
|
-
End: () => navigateToTab("last")
|
|
131
|
-
},
|
|
132
|
-
{ preventDefault: true }
|
|
133
|
-
);
|
|
134
|
-
const handleKeyDown = (event) => {
|
|
135
|
-
onKeyDown?.(event);
|
|
136
|
-
if (!event.defaultPrevented) {
|
|
137
|
-
keyboardProps.onKeyDown(event);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
return /* @__PURE__ */ jsx(
|
|
141
|
-
"div",
|
|
142
|
-
{
|
|
143
|
-
ref,
|
|
144
|
-
role: "tablist",
|
|
145
|
-
"aria-label": ariaLabel,
|
|
146
|
-
"aria-orientation": orientation,
|
|
147
|
-
onKeyDown: handleKeyDown,
|
|
148
|
-
"data-compa11y-tablist": true,
|
|
149
|
-
...props,
|
|
150
|
-
children
|
|
151
|
-
}
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
var Tab = forwardRef(function Tab2({ value, disabled = false, children, onClick, ...props }, ref) {
|
|
156
|
-
const {
|
|
157
|
-
selectedValue,
|
|
158
|
-
setSelectedValue,
|
|
159
|
-
baseId,
|
|
160
|
-
registerTab,
|
|
161
|
-
unregisterTab
|
|
162
|
-
} = useTabsContext();
|
|
163
|
-
const { announce } = useAnnouncer();
|
|
164
|
-
React.useEffect(() => {
|
|
165
|
-
registerTab(value);
|
|
166
|
-
return () => unregisterTab(value);
|
|
167
|
-
}, [value, registerTab, unregisterTab]);
|
|
168
|
-
const isSelected = selectedValue === value;
|
|
169
|
-
const tabId = `${baseId}-tab-${value}`;
|
|
170
|
-
const panelId = `${baseId}-panel-${value}`;
|
|
171
|
-
const handleClick = (event) => {
|
|
172
|
-
onClick?.(event);
|
|
173
|
-
if (!event.defaultPrevented && !disabled) {
|
|
174
|
-
setSelectedValue(value);
|
|
175
|
-
announce(`${value} tab selected`);
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
return /* @__PURE__ */ jsx(
|
|
179
|
-
"button",
|
|
180
|
-
{
|
|
181
|
-
ref,
|
|
182
|
-
type: "button",
|
|
183
|
-
role: "tab",
|
|
184
|
-
id: tabId,
|
|
185
|
-
"aria-selected": isSelected,
|
|
186
|
-
"aria-controls": panelId,
|
|
187
|
-
"aria-disabled": disabled,
|
|
188
|
-
tabIndex: isSelected ? 0 : -1,
|
|
189
|
-
onClick: handleClick,
|
|
190
|
-
disabled,
|
|
191
|
-
"data-selected": isSelected,
|
|
192
|
-
"data-disabled": disabled,
|
|
193
|
-
"data-value": value,
|
|
194
|
-
"data-compa11y-tab": true,
|
|
195
|
-
...props,
|
|
196
|
-
children
|
|
197
|
-
}
|
|
198
|
-
);
|
|
199
|
-
});
|
|
200
|
-
var TabPanel = forwardRef(
|
|
201
|
-
function TabPanel2({ value, forceMount = false, children, ...props }, ref) {
|
|
202
|
-
const { selectedValue, baseId } = useTabsContext();
|
|
203
|
-
const isSelected = selectedValue === value;
|
|
204
|
-
const tabId = `${baseId}-tab-${value}`;
|
|
205
|
-
const panelId = `${baseId}-panel-${value}`;
|
|
206
|
-
if (!isSelected && !forceMount) {
|
|
207
|
-
return null;
|
|
208
|
-
}
|
|
209
|
-
return /* @__PURE__ */ jsx(
|
|
210
|
-
"div",
|
|
211
|
-
{
|
|
212
|
-
ref,
|
|
213
|
-
role: "tabpanel",
|
|
214
|
-
id: panelId,
|
|
215
|
-
"aria-labelledby": tabId,
|
|
216
|
-
tabIndex: 0,
|
|
217
|
-
hidden: !isSelected,
|
|
218
|
-
"data-selected": isSelected,
|
|
219
|
-
"data-compa11y-tabpanel": true,
|
|
220
|
-
...props,
|
|
221
|
-
children
|
|
222
|
-
}
|
|
223
|
-
);
|
|
224
|
-
}
|
|
225
|
-
);
|
|
226
|
-
var TabsCompound = Object.assign(Tabs, {
|
|
227
|
-
List: TabList,
|
|
228
|
-
Tab,
|
|
229
|
-
Panel: TabPanel
|
|
230
|
-
});
|
|
231
|
-
|
|
232
|
-
export { Tab, TabList, TabPanel, Tabs, TabsCompound, useTabsContext };
|
|
233
|
-
//# sourceMappingURL=chunk-E265U2RK.js.map
|
|
234
|
-
//# sourceMappingURL=chunk-E265U2RK.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/tabs/tabs-context.ts","../src/components/tabs/tabs.tsx"],"names":["Tabs","TabList","Tab","TabPanel"],"mappings":"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","file":"chunk-E265U2RK.js","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface TabsContextValue {\n /** Currently selected tab value */\n selectedValue: string;\n /** Change selected tab */\n setSelectedValue: (value: string) => void;\n /** Base ID for ARIA relationships */\n baseId: string;\n /** Orientation of tabs */\n orientation: 'horizontal' | 'vertical';\n /** Whether tabs are activated on focus or on click */\n activationMode: 'automatic' | 'manual';\n /** Register a tab */\n registerTab: (value: string) => void;\n /** Unregister a tab */\n unregisterTab: (value: string) => void;\n /** Get all tab values */\n getTabValues: () => string[];\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n if (!context) {\n throw new Error(\n 'Tabs compound components must be used within a Tabs component'\n );\n }\n return context;\n}\n\nexport const TabsProvider = TabsContext.Provider;\n","import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport {\n TabsProvider,\n useTabsContext,\n type TabsContextValue,\n} from './tabs-context';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Default selected tab value */\n defaultValue?: string;\n /** Controlled selected value */\n value?: string;\n /** Called when selection changes */\n onValueChange?: (value: string) => void;\n /** Orientation of tabs */\n orientation?: 'horizontal' | 'vertical';\n /** Activation mode */\n activationMode?: 'automatic' | 'manual';\n children: React.ReactNode;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n {\n defaultValue = '',\n value: controlledValue,\n onValueChange,\n orientation = 'horizontal',\n activationMode = 'automatic',\n children,\n ...props\n },\n ref\n) {\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const selectedValue = controlledValue ?? uncontrolledValue;\n const tabsRef = useRef<string[]>([]);\n const baseId = useId('tabs');\n\n const setSelectedValue = useCallback(\n (value: string) => {\n if (controlledValue === undefined) {\n setUncontrolledValue(value);\n }\n onValueChange?.(value);\n },\n [controlledValue, onValueChange]\n );\n\n const registerTab = useCallback((value: string) => {\n if (!tabsRef.current.includes(value)) {\n tabsRef.current.push(value);\n }\n }, []);\n\n const unregisterTab = useCallback((value: string) => {\n const index = tabsRef.current.indexOf(value);\n if (index > -1) {\n tabsRef.current.splice(index, 1);\n }\n }, []);\n\n const getTabValues = useCallback(() => [...tabsRef.current], []);\n\n const contextValue: TabsContextValue = {\n selectedValue,\n setSelectedValue,\n baseId,\n orientation,\n activationMode,\n registerTab,\n unregisterTab,\n getTabValues,\n };\n\n return (\n <TabsProvider value={contextValue}>\n <div\n ref={ref}\n data-orientation={orientation}\n data-compa11y-tabs\n {...props}\n >\n {children}\n </div>\n </TabsProvider>\n );\n});\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Accessible label for the tab list */\n 'aria-label'?: string;\n children: React.ReactNode;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n function TabList(\n { children, 'aria-label': ariaLabel, onKeyDown, ...props },\n ref\n ) {\n const {\n orientation,\n selectedValue,\n setSelectedValue,\n getTabValues,\n activationMode,\n } = useTabsContext();\n\n const navigateToTab = useCallback(\n (direction: 'next' | 'previous' | 'first' | 'last') => {\n const values = getTabValues();\n if (values.length === 0) return;\n\n const currentIndex = values.indexOf(selectedValue);\n let newIndex: number;\n\n switch (direction) {\n case 'next':\n newIndex = (currentIndex + 1) % values.length;\n break;\n case 'previous':\n newIndex = (currentIndex - 1 + values.length) % values.length;\n break;\n case 'first':\n newIndex = 0;\n break;\n case 'last':\n newIndex = values.length - 1;\n break;\n }\n\n const newValue = values[newIndex];\n if (newValue) {\n const tabElement = document.querySelector(\n `[data-compa11y-tab][data-value=\"${newValue}\"]`\n ) as HTMLElement;\n tabElement?.focus();\n\n if (activationMode === 'automatic') {\n setSelectedValue(newValue);\n }\n }\n },\n [getTabValues, selectedValue, setSelectedValue, activationMode]\n );\n\n const keyboardProps = useKeyboard(\n {\n ArrowRight: () => {\n if (orientation === 'horizontal') navigateToTab('next');\n },\n ArrowLeft: () => {\n if (orientation === 'horizontal') navigateToTab('previous');\n },\n ArrowDown: () => {\n if (orientation === 'vertical') navigateToTab('next');\n },\n ArrowUp: () => {\n if (orientation === 'vertical') navigateToTab('previous');\n },\n Home: () => navigateToTab('first'),\n End: () => navigateToTab('last'),\n },\n { preventDefault: true }\n );\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) {\n keyboardProps.onKeyDown(event);\n }\n };\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-label={ariaLabel}\n aria-orientation={orientation}\n onKeyDown={handleKeyDown}\n data-compa11y-tablist\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nexport interface TabProps extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'value'\n> {\n /** Value identifying this tab */\n value: string;\n /** Whether the tab is disabled */\n disabled?: boolean;\n children: React.ReactNode;\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n { value, disabled = false, children, onClick, ...props },\n ref\n) {\n const {\n selectedValue,\n setSelectedValue,\n baseId,\n registerTab,\n unregisterTab,\n } = useTabsContext();\n const { announce } = useAnnouncer();\n\n React.useEffect(() => {\n registerTab(value);\n return () => unregisterTab(value);\n }, [value, registerTab, unregisterTab]);\n\n const isSelected = selectedValue === value;\n const tabId = `${baseId}-tab-${value}`;\n const panelId = `${baseId}-panel-${value}`;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (!event.defaultPrevented && !disabled) {\n setSelectedValue(value);\n announce(`${value} tab selected`);\n }\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"tab\"\n id={tabId}\n aria-selected={isSelected}\n aria-controls={panelId}\n aria-disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n onClick={handleClick}\n disabled={disabled}\n data-selected={isSelected}\n data-disabled={disabled}\n data-value={value}\n data-compa11y-tab\n {...props}\n >\n {children}\n </button>\n );\n});\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Value identifying this panel (must match a Tab value) */\n value: string;\n /** Whether to keep panel mounted when not selected */\n forceMount?: boolean;\n children: React.ReactNode;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n function TabPanel({ value, forceMount = false, children, ...props }, ref) {\n const { selectedValue, baseId } = useTabsContext();\n\n const isSelected = selectedValue === value;\n const tabId = `${baseId}-tab-${value}`;\n const panelId = `${baseId}-panel-${value}`;\n\n if (!isSelected && !forceMount) {\n return null;\n }\n\n return (\n <div\n ref={ref}\n role=\"tabpanel\"\n id={panelId}\n aria-labelledby={tabId}\n tabIndex={0}\n hidden={!isSelected}\n data-selected={isSelected}\n data-compa11y-tabpanel\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nexport const TabsCompound = Object.assign(Tabs, {\n List: TabList,\n Tab: Tab,\n Panel: TabPanel,\n});\n"]}
|
package/dist/chunk-E4XJRXWM.js
DELETED
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
import { createContext, forwardRef, useState, useRef, useCallback, useEffect, useContext } from 'react';
|
|
2
|
-
import { createPortal } from 'react-dom';
|
|
3
|
-
import { announceAssertive, announce } from '@compa11y/core';
|
|
4
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
// src/components/toast/toast.tsx
|
|
7
|
-
var ToastContext = createContext(null);
|
|
8
|
-
function useToast() {
|
|
9
|
-
const context = useContext(ToastContext);
|
|
10
|
-
if (!context) {
|
|
11
|
-
throw new Error("useToast must be used within a ToastProvider");
|
|
12
|
-
}
|
|
13
|
-
return context;
|
|
14
|
-
}
|
|
15
|
-
function ToastProvider({
|
|
16
|
-
children,
|
|
17
|
-
duration = 5e3,
|
|
18
|
-
maxToasts = 5
|
|
19
|
-
}) {
|
|
20
|
-
const [toasts, setToasts] = useState([]);
|
|
21
|
-
const toastIdCounter = useRef(0);
|
|
22
|
-
const addToast = useCallback(
|
|
23
|
-
(toast) => {
|
|
24
|
-
const id = `toast-${++toastIdCounter.current}`;
|
|
25
|
-
const newToast = {
|
|
26
|
-
...toast,
|
|
27
|
-
id,
|
|
28
|
-
duration: toast.duration ?? duration
|
|
29
|
-
};
|
|
30
|
-
setToasts((prev) => {
|
|
31
|
-
const updated = [...prev, newToast];
|
|
32
|
-
return updated.slice(-maxToasts);
|
|
33
|
-
});
|
|
34
|
-
const message = toast.title ? `${toast.title}. ${toast.description || ""}` : toast.description || "";
|
|
35
|
-
if (toast.type === "error") {
|
|
36
|
-
announceAssertive(message);
|
|
37
|
-
} else {
|
|
38
|
-
announce(message, { politeness: "polite" });
|
|
39
|
-
}
|
|
40
|
-
return id;
|
|
41
|
-
},
|
|
42
|
-
[duration, maxToasts]
|
|
43
|
-
);
|
|
44
|
-
const removeToast = useCallback((id) => {
|
|
45
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
46
|
-
}, []);
|
|
47
|
-
const updateToast = useCallback(
|
|
48
|
-
(id, updates) => {
|
|
49
|
-
setToasts(
|
|
50
|
-
(prev) => prev.map((t) => t.id === id ? { ...t, ...updates } : t)
|
|
51
|
-
);
|
|
52
|
-
},
|
|
53
|
-
[]
|
|
54
|
-
);
|
|
55
|
-
return /* @__PURE__ */ jsx(
|
|
56
|
-
ToastContext.Provider,
|
|
57
|
-
{
|
|
58
|
-
value: { toasts, addToast, removeToast, updateToast },
|
|
59
|
-
children
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
var positionStyles = {
|
|
64
|
-
"top-left": { top: 0, left: 0 },
|
|
65
|
-
"top-center": { top: 0, left: "50%", transform: "translateX(-50%)" },
|
|
66
|
-
"top-right": { top: 0, right: 0 },
|
|
67
|
-
"bottom-left": { bottom: 0, left: 0 },
|
|
68
|
-
"bottom-center": { bottom: 0, left: "50%", transform: "translateX(-50%)" },
|
|
69
|
-
"bottom-right": { bottom: 0, right: 0 }
|
|
70
|
-
};
|
|
71
|
-
var ToastViewport = forwardRef(
|
|
72
|
-
function ToastViewport2({
|
|
73
|
-
position = "bottom-right",
|
|
74
|
-
label = "Notifications",
|
|
75
|
-
style,
|
|
76
|
-
children,
|
|
77
|
-
...props
|
|
78
|
-
}, ref) {
|
|
79
|
-
const { toasts, removeToast } = useToast();
|
|
80
|
-
const viewport = /* @__PURE__ */ jsxs(
|
|
81
|
-
"div",
|
|
82
|
-
{
|
|
83
|
-
ref,
|
|
84
|
-
role: "region",
|
|
85
|
-
"aria-label": label,
|
|
86
|
-
"aria-live": "polite",
|
|
87
|
-
"aria-relevant": "additions removals",
|
|
88
|
-
tabIndex: -1,
|
|
89
|
-
style: {
|
|
90
|
-
position: "fixed",
|
|
91
|
-
zIndex: 9999,
|
|
92
|
-
padding: "1rem",
|
|
93
|
-
display: "flex",
|
|
94
|
-
flexDirection: "column",
|
|
95
|
-
gap: "0.5rem",
|
|
96
|
-
...positionStyles[position],
|
|
97
|
-
...style
|
|
98
|
-
},
|
|
99
|
-
"data-compa11y-toast-viewport": true,
|
|
100
|
-
"data-position": position,
|
|
101
|
-
...props,
|
|
102
|
-
children: [
|
|
103
|
-
toasts.map((toast) => /* @__PURE__ */ jsx(
|
|
104
|
-
ToastItem,
|
|
105
|
-
{
|
|
106
|
-
toast,
|
|
107
|
-
onClose: () => removeToast(toast.id)
|
|
108
|
-
},
|
|
109
|
-
toast.id
|
|
110
|
-
)),
|
|
111
|
-
children
|
|
112
|
-
]
|
|
113
|
-
}
|
|
114
|
-
);
|
|
115
|
-
return createPortal(viewport, document.body);
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
function ToastItem({ toast, onClose }) {
|
|
119
|
-
const [isVisible, setIsVisible] = useState(true);
|
|
120
|
-
const [, setIsPaused] = useState(false);
|
|
121
|
-
const timerRef = useRef(null);
|
|
122
|
-
const remainingRef = useRef(toast.duration || 5e3);
|
|
123
|
-
const startTimeRef = useRef(Date.now());
|
|
124
|
-
const startTimer = useCallback(() => {
|
|
125
|
-
if (toast.duration === 0) return;
|
|
126
|
-
startTimeRef.current = Date.now();
|
|
127
|
-
timerRef.current = setTimeout(() => {
|
|
128
|
-
setIsVisible(false);
|
|
129
|
-
setTimeout(onClose, 200);
|
|
130
|
-
}, remainingRef.current);
|
|
131
|
-
}, [toast.duration, onClose]);
|
|
132
|
-
const pauseTimer = useCallback(() => {
|
|
133
|
-
if (timerRef.current) {
|
|
134
|
-
clearTimeout(timerRef.current);
|
|
135
|
-
remainingRef.current -= Date.now() - startTimeRef.current;
|
|
136
|
-
}
|
|
137
|
-
}, []);
|
|
138
|
-
useEffect(() => {
|
|
139
|
-
startTimer();
|
|
140
|
-
return () => {
|
|
141
|
-
if (timerRef.current) {
|
|
142
|
-
clearTimeout(timerRef.current);
|
|
143
|
-
}
|
|
144
|
-
};
|
|
145
|
-
}, [startTimer]);
|
|
146
|
-
const handleMouseEnter = () => {
|
|
147
|
-
setIsPaused(true);
|
|
148
|
-
pauseTimer();
|
|
149
|
-
};
|
|
150
|
-
const handleMouseLeave = () => {
|
|
151
|
-
setIsPaused(false);
|
|
152
|
-
startTimer();
|
|
153
|
-
};
|
|
154
|
-
const handleKeyDown = (event) => {
|
|
155
|
-
if (event.key === "Escape") {
|
|
156
|
-
onClose();
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
return /* @__PURE__ */ jsxs(
|
|
160
|
-
"div",
|
|
161
|
-
{
|
|
162
|
-
role: "alert",
|
|
163
|
-
"aria-atomic": "true",
|
|
164
|
-
tabIndex: 0,
|
|
165
|
-
onMouseEnter: handleMouseEnter,
|
|
166
|
-
onMouseLeave: handleMouseLeave,
|
|
167
|
-
onKeyDown: handleKeyDown,
|
|
168
|
-
"data-type": toast.type,
|
|
169
|
-
"data-visible": isVisible,
|
|
170
|
-
"data-compa11y-toast": true,
|
|
171
|
-
children: [
|
|
172
|
-
toast.title && /* @__PURE__ */ jsx("div", { "data-compa11y-toast-title": true, children: toast.title }),
|
|
173
|
-
toast.description && /* @__PURE__ */ jsx("div", { "data-compa11y-toast-description": true, children: toast.description }),
|
|
174
|
-
toast.action && /* @__PURE__ */ jsx(
|
|
175
|
-
"button",
|
|
176
|
-
{
|
|
177
|
-
type: "button",
|
|
178
|
-
tabIndex: 0,
|
|
179
|
-
onClick: () => {
|
|
180
|
-
toast.action?.onClick();
|
|
181
|
-
onClose();
|
|
182
|
-
},
|
|
183
|
-
"data-compa11y-toast-action": true,
|
|
184
|
-
children: toast.action.label
|
|
185
|
-
}
|
|
186
|
-
),
|
|
187
|
-
/* @__PURE__ */ jsx(
|
|
188
|
-
"button",
|
|
189
|
-
{
|
|
190
|
-
type: "button",
|
|
191
|
-
tabIndex: 0,
|
|
192
|
-
"aria-label": "Dismiss",
|
|
193
|
-
onClick: onClose,
|
|
194
|
-
"data-compa11y-toast-close": true,
|
|
195
|
-
children: "\xD7"
|
|
196
|
-
}
|
|
197
|
-
)
|
|
198
|
-
]
|
|
199
|
-
}
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
function useToastHelpers() {
|
|
203
|
-
const { addToast } = useToast();
|
|
204
|
-
return {
|
|
205
|
-
toast: addToast,
|
|
206
|
-
success: (title, description) => addToast({ type: "success", title, description }),
|
|
207
|
-
error: (title, description) => addToast({ type: "error", title, description }),
|
|
208
|
-
warning: (title, description) => addToast({ type: "warning", title, description }),
|
|
209
|
-
info: (title, description) => addToast({ type: "info", title, description })
|
|
210
|
-
};
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
export { ToastProvider, ToastViewport, useToast, useToastHelpers };
|
|
214
|
-
//# sourceMappingURL=chunk-E4XJRXWM.js.map
|
|
215
|
-
//# sourceMappingURL=chunk-E4XJRXWM.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/toast/toast.tsx"],"names":["ToastViewport"],"mappings":"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","file":"chunk-E4XJRXWM.js","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-GDLOJH6K.cjs
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var core = require('@compa11y/core');
|
|
5
|
-
|
|
6
|
-
// src/hooks/use-keyboard.ts
|
|
7
|
-
function useKeyboard(handlers, options = {}) {
|
|
8
|
-
const {
|
|
9
|
-
preventDefault = true,
|
|
10
|
-
stopPropagation = true,
|
|
11
|
-
disabled = false
|
|
12
|
-
} = options;
|
|
13
|
-
const handlersRef = react.useRef(handlers);
|
|
14
|
-
handlersRef.current = handlers;
|
|
15
|
-
const handleKeyDown = react.useCallback(
|
|
16
|
-
(event) => {
|
|
17
|
-
if (disabled) return;
|
|
18
|
-
const combo = core.getKeyCombo(event.nativeEvent);
|
|
19
|
-
let handler = handlersRef.current[combo];
|
|
20
|
-
if (!handler) {
|
|
21
|
-
const key = core.normalizeKey(event.nativeEvent);
|
|
22
|
-
handler = handlersRef.current[key];
|
|
23
|
-
}
|
|
24
|
-
if (handler) {
|
|
25
|
-
const result = handler(event.nativeEvent);
|
|
26
|
-
if (result !== false) {
|
|
27
|
-
if (preventDefault) {
|
|
28
|
-
event.preventDefault();
|
|
29
|
-
}
|
|
30
|
-
if (stopPropagation) {
|
|
31
|
-
event.stopPropagation();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
[disabled, preventDefault, stopPropagation]
|
|
37
|
-
);
|
|
38
|
-
return {
|
|
39
|
-
onKeyDown: handleKeyDown
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
function useMenuKeyboard(options) {
|
|
43
|
-
const { disabled, ...handlers } = options;
|
|
44
|
-
return useKeyboard(core.KeyboardPatterns.menu(handlers), { disabled });
|
|
45
|
-
}
|
|
46
|
-
function useTabsKeyboard(options) {
|
|
47
|
-
const { disabled, ...handlers } = options;
|
|
48
|
-
return useKeyboard(core.KeyboardPatterns.tabs(handlers), { disabled });
|
|
49
|
-
}
|
|
50
|
-
function useGridKeyboard(options) {
|
|
51
|
-
const { disabled, ...handlers } = options;
|
|
52
|
-
return useKeyboard(core.KeyboardPatterns.grid(handlers), { disabled });
|
|
53
|
-
}
|
|
54
|
-
function useTypeAhead(items, onMatch, options = {}) {
|
|
55
|
-
const { timeout = 500, disabled = false } = options;
|
|
56
|
-
const typeAhead = react.useMemo(
|
|
57
|
-
() => core.createTypeAhead(items, { timeout }),
|
|
58
|
-
[items, timeout]
|
|
59
|
-
);
|
|
60
|
-
const onMatchRef = react.useRef(onMatch);
|
|
61
|
-
onMatchRef.current = onMatch;
|
|
62
|
-
const handleKeyDown = react.useCallback(
|
|
63
|
-
(event) => {
|
|
64
|
-
if (disabled) return;
|
|
65
|
-
if (event.key.length !== 1) return;
|
|
66
|
-
if (event.ctrlKey || event.altKey || event.metaKey) return;
|
|
67
|
-
const match = typeAhead.type(event.key);
|
|
68
|
-
if (match) {
|
|
69
|
-
onMatchRef.current(match);
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
[disabled, typeAhead]
|
|
73
|
-
);
|
|
74
|
-
return {
|
|
75
|
-
onKeyDown: handleKeyDown,
|
|
76
|
-
reset: typeAhead.reset,
|
|
77
|
-
getSearch: typeAhead.getSearch
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
function useKeyPressed(targetKey) {
|
|
81
|
-
const [pressed, setPressed] = react.useState(false);
|
|
82
|
-
react.useEffect(() => {
|
|
83
|
-
const handleKeyDown = (event) => {
|
|
84
|
-
if (core.normalizeKey(event) === targetKey) {
|
|
85
|
-
setPressed(true);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
const handleKeyUp = (event) => {
|
|
89
|
-
if (core.normalizeKey(event) === targetKey) {
|
|
90
|
-
setPressed(false);
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
94
|
-
document.addEventListener("keyup", handleKeyUp);
|
|
95
|
-
return () => {
|
|
96
|
-
document.removeEventListener("keydown", handleKeyDown);
|
|
97
|
-
document.removeEventListener("keyup", handleKeyUp);
|
|
98
|
-
};
|
|
99
|
-
}, [targetKey]);
|
|
100
|
-
return pressed;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
exports.useGridKeyboard = useGridKeyboard;
|
|
104
|
-
exports.useKeyPressed = useKeyPressed;
|
|
105
|
-
exports.useKeyboard = useKeyboard;
|
|
106
|
-
exports.useMenuKeyboard = useMenuKeyboard;
|
|
107
|
-
exports.useTabsKeyboard = useTabsKeyboard;
|
|
108
|
-
exports.useTypeAhead = useTypeAhead;
|
|
109
|
-
//# sourceMappingURL=chunk-GDLOJH6K.cjs.map
|
|
110
|
-
//# sourceMappingURL=chunk-GDLOJH6K.cjs.map
|