@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.11
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-cjs/common-hooks/useKeyboardNavigation.js +0 -3
- package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/dialog/DialogTitle.css.js +1 -1
- package/dist-cjs/dialog/DialogTitle.js +2 -3
- package/dist-cjs/dialog/DialogTitle.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +5 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/dropdown/useDropdown.js +12 -0
- package/dist-cjs/dropdown/useDropdown.js.map +1 -1
- package/dist-cjs/index.js +15 -1
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/useList.js +0 -1
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +6 -0
- package/dist-cjs/list-next/ListItemNext.css.js.map +1 -0
- package/dist-cjs/list-next/ListItemNext.js +74 -0
- package/dist-cjs/list-next/ListItemNext.js.map +1 -0
- package/dist-cjs/list-next/ListNext.css.js +6 -0
- package/dist-cjs/list-next/ListNext.css.js.map +1 -0
- package/dist-cjs/list-next/ListNext.js +92 -0
- package/dist-cjs/list-next/ListNext.js.map +1 -0
- package/dist-cjs/list-next/ListNextContext.js +18 -0
- package/dist-cjs/list-next/ListNextContext.js.map +1 -0
- package/dist-cjs/list-next/useList.js +188 -0
- package/dist-cjs/list-next/useList.js.map +1 -0
- package/dist-cjs/logo/Logo.css.js +1 -1
- package/dist-cjs/logo/Logo.js +4 -36
- package/dist-cjs/logo/Logo.js.map +1 -1
- package/dist-cjs/logo/LogoImage.js +24 -0
- package/dist-cjs/logo/LogoImage.js.map +1 -0
- package/dist-cjs/logo/LogoSeparator.css.js +6 -0
- package/dist-cjs/logo/LogoSeparator.css.js.map +1 -0
- package/dist-cjs/logo/LogoSeparator.js +32 -0
- package/dist-cjs/logo/LogoSeparator.js.map +1 -0
- package/dist-cjs/query-input/internal/QueryInputBody.js +5 -5
- package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-cjs/tabs-next/OverflowMenu.js +49 -0
- package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -0
- package/dist-cjs/tabs-next/TabNext.css.js +6 -0
- package/dist-cjs/tabs-next/TabNext.css.js.map +1 -0
- package/dist-cjs/tabs-next/TabNext.js +87 -0
- package/dist-cjs/tabs-next/TabNext.js.map +1 -0
- package/dist-cjs/tabs-next/TabNextContext.js +23 -0
- package/dist-cjs/tabs-next/TabNextContext.js.map +1 -0
- package/dist-cjs/tabs-next/TabstripNext.css.js +6 -0
- package/dist-cjs/tabs-next/TabstripNext.css.js.map +1 -0
- package/dist-cjs/tabs-next/TabstripNext.js +180 -0
- package/dist-cjs/tabs-next/TabstripNext.js.map +1 -0
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +44 -74
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +6 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +111 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +15 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
- package/dist-es/common-hooks/useKeyboardNavigation.js +0 -3
- package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-es/dialog/DialogTitle.css.js +1 -1
- package/dist-es/dialog/DialogTitle.js +3 -4
- package/dist-es/dialog/DialogTitle.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +5 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/dropdown/useDropdown.js +12 -0
- package/dist-es/dropdown/useDropdown.js.map +1 -1
- package/dist-es/index.js +8 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/useList.js +0 -1
- package/dist-es/list/useList.js.map +1 -1
- package/dist-es/list-next/ListItemNext.css.js +4 -0
- package/dist-es/list-next/ListItemNext.css.js.map +1 -0
- package/dist-es/list-next/ListItemNext.js +70 -0
- package/dist-es/list-next/ListItemNext.js.map +1 -0
- package/dist-es/list-next/ListNext.css.js +4 -0
- package/dist-es/list-next/ListNext.css.js.map +1 -0
- package/dist-es/list-next/ListNext.js +88 -0
- package/dist-es/list-next/ListNext.js.map +1 -0
- package/dist-es/list-next/ListNextContext.js +13 -0
- package/dist-es/list-next/ListNextContext.js.map +1 -0
- package/dist-es/list-next/useList.js +184 -0
- package/dist-es/list-next/useList.js.map +1 -0
- package/dist-es/logo/Logo.css.js +1 -1
- package/dist-es/logo/Logo.js +5 -37
- package/dist-es/logo/Logo.js.map +1 -1
- package/dist-es/logo/LogoImage.js +20 -0
- package/dist-es/logo/LogoImage.js.map +1 -0
- package/dist-es/logo/LogoSeparator.css.js +4 -0
- package/dist-es/logo/LogoSeparator.css.js.map +1 -0
- package/dist-es/logo/LogoSeparator.js +28 -0
- package/dist-es/logo/LogoSeparator.js.map +1 -0
- package/dist-es/query-input/internal/QueryInputBody.js +5 -5
- package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-es/tabs-next/OverflowMenu.js +45 -0
- package/dist-es/tabs-next/OverflowMenu.js.map +1 -0
- package/dist-es/tabs-next/TabNext.css.js +4 -0
- package/dist-es/tabs-next/TabNext.css.js.map +1 -0
- package/dist-es/tabs-next/TabNext.js +79 -0
- package/dist-es/tabs-next/TabNext.js.map +1 -0
- package/dist-es/tabs-next/TabNextContext.js +18 -0
- package/dist-es/tabs-next/TabNextContext.js.map +1 -0
- package/dist-es/tabs-next/TabstripNext.css.js +4 -0
- package/dist-es/tabs-next/TabstripNext.css.js.map +1 -0
- package/dist-es/tabs-next/TabstripNext.js +172 -0
- package/dist-es/tabs-next/TabstripNext.js.map +1 -0
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +45 -75
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +4 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +107 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +10 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
- package/dist-types/dropdown/useDropdown.d.ts +1 -1
- package/dist-types/index.d.ts +3 -0
- package/dist-types/list-next/ListItemNext.d.ts +11 -0
- package/dist-types/list-next/ListNext.d.ts +10 -0
- package/dist-types/list-next/ListNextContext.d.ts +10 -0
- package/dist-types/list-next/index.d.ts +2 -0
- package/dist-types/list-next/useList.d.ts +29 -0
- package/dist-types/logo/Logo.d.ts +3 -31
- package/dist-types/logo/LogoImage.d.ts +5 -0
- package/dist-types/logo/LogoSeparator.d.ts +3 -0
- package/dist-types/logo/index.d.ts +2 -0
- package/dist-types/tabs-next/OverflowMenu.d.ts +11 -0
- package/dist-types/tabs-next/TabNext.d.ts +5 -0
- package/dist-types/tabs-next/TabNextContext.d.ts +17 -0
- package/dist-types/tabs-next/TabstripNext.d.ts +10 -0
- package/dist-types/tabs-next/index.d.ts +2 -0
- package/dist-types/toggle-button/ToggleButton.d.ts +6 -11
- package/dist-types/toggle-button/index.d.ts +0 -1
- package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +25 -0
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +10 -0
- package/dist-types/toggle-button-group/index.d.ts +2 -0
- package/package.json +6 -4
- package/dist-cjs/logo/internal/LogoTitle.js +0 -28
- package/dist-cjs/logo/internal/LogoTitle.js.map +0 -1
- package/dist-cjs/toggle-button/ToggleButtonGroup.css.js +0 -6
- package/dist-cjs/toggle-button/ToggleButtonGroup.js +0 -147
- package/dist-cjs/toggle-button/ToggleButtonGroup.js.map +0 -1
- package/dist-cjs/toggle-button/internal/ToggleButtonGroupContext.js +0 -10
- package/dist-cjs/toggle-button/internal/ToggleButtonGroupContext.js.map +0 -1
- package/dist-es/logo/internal/LogoTitle.js +0 -24
- package/dist-es/logo/internal/LogoTitle.js.map +0 -1
- package/dist-es/toggle-button/ToggleButtonGroup.css.js +0 -4
- package/dist-es/toggle-button/ToggleButtonGroup.js +0 -143
- package/dist-es/toggle-button/ToggleButtonGroup.js.map +0 -1
- package/dist-es/toggle-button/internal/ToggleButtonGroupContext.js +0 -6
- package/dist-es/toggle-button/internal/ToggleButtonGroupContext.js.map +0 -1
- package/dist-types/logo/internal/LogoTitle.d.ts +0 -6
- package/dist-types/toggle-button/ToggleButtonGroup.d.ts +0 -18
- package/dist-types/toggle-button/internal/ToggleButtonGroupContext.d.ts +0 -14
- /package/dist-cjs/{toggle-button → toggle-button-group}/ToggleButtonGroup.css.js.map +0 -0
- /package/dist-es/{toggle-button → toggle-button-group}/ToggleButtonGroup.css.js.map +0 -0
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var React = require('react');
|
|
9
|
-
var ToggleButtonGroupContext = require('./internal/ToggleButtonGroupContext.js');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var ToggleButtonGroup$1 = require('./ToggleButtonGroup.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltToggleButtonGroup");
|
|
15
|
-
const getNextIndex = (nodes, index, increment) => (index + nodes.length + increment) % nodes.length;
|
|
16
|
-
const getNextActive = (nodes, index, increment) => {
|
|
17
|
-
let nextIndex = getNextIndex(nodes, index, increment);
|
|
18
|
-
while (nextIndex !== index && !nodes[nextIndex]) {
|
|
19
|
-
nextIndex = getNextIndex(nodes, nextIndex, increment);
|
|
20
|
-
}
|
|
21
|
-
return nodes[nextIndex];
|
|
22
|
-
};
|
|
23
|
-
const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2({
|
|
24
|
-
"aria-label": ariaLabel = "Toggle options",
|
|
25
|
-
children,
|
|
26
|
-
className,
|
|
27
|
-
disabled,
|
|
28
|
-
disableTooltip,
|
|
29
|
-
defaultSelectedIndex = 0,
|
|
30
|
-
focusableWhenDisabled,
|
|
31
|
-
selectedIndex: selectedIndexProp,
|
|
32
|
-
orientation = "horizontal",
|
|
33
|
-
variant = "primary",
|
|
34
|
-
width,
|
|
35
|
-
onChange,
|
|
36
|
-
onFocus,
|
|
37
|
-
onBlur,
|
|
38
|
-
...restProps
|
|
39
|
-
}, ref) {
|
|
40
|
-
const targetWindow = window.useWindow();
|
|
41
|
-
styles.useComponentCssInjection({
|
|
42
|
-
testId: "salt-toggle-button-group",
|
|
43
|
-
css: ToggleButtonGroup$1,
|
|
44
|
-
window: targetWindow
|
|
45
|
-
});
|
|
46
|
-
const buttonRefs = React.useRef([]);
|
|
47
|
-
const [disableFocus, setDisableFocus] = React.useState(false);
|
|
48
|
-
const [selectedIndex, setSelectedIndex] = core.useControlled({
|
|
49
|
-
controlled: selectedIndexProp,
|
|
50
|
-
default: defaultSelectedIndex,
|
|
51
|
-
name: "ToggleButtonGroup",
|
|
52
|
-
state: "selectedIndex"
|
|
53
|
-
});
|
|
54
|
-
const register = React.useCallback(
|
|
55
|
-
(node, index) => {
|
|
56
|
-
buttonRefs.current[index] = node || void 0;
|
|
57
|
-
},
|
|
58
|
-
[]
|
|
59
|
-
);
|
|
60
|
-
const unregister = React.useCallback((index) => {
|
|
61
|
-
buttonRefs.current[index] = void 0;
|
|
62
|
-
}, []);
|
|
63
|
-
const handleFocus = (event) => {
|
|
64
|
-
setDisableFocus(true);
|
|
65
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
66
|
-
};
|
|
67
|
-
const handleBlur = (event) => {
|
|
68
|
-
setDisableFocus(false);
|
|
69
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
70
|
-
};
|
|
71
|
-
const handleToggle = (event, index, newValue) => {
|
|
72
|
-
if (!newValue) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
setSelectedIndex(index);
|
|
76
|
-
onChange == null ? void 0 : onChange(event, index, newValue);
|
|
77
|
-
};
|
|
78
|
-
const handleKeyDown = (event, index) => {
|
|
79
|
-
var _a, _b;
|
|
80
|
-
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
|
|
81
|
-
(_a = getNextActive(buttonRefs.current, index, 1)) == null ? void 0 : _a.focus();
|
|
82
|
-
}
|
|
83
|
-
if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
|
|
84
|
-
(_b = getNextActive(buttonRefs.current, index, -1)) == null ? void 0 : _b.focus();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const groupContext = React.useMemo(
|
|
88
|
-
() => ({
|
|
89
|
-
disabled,
|
|
90
|
-
disableFocus,
|
|
91
|
-
disableTooltip,
|
|
92
|
-
focusableWhenDisabled,
|
|
93
|
-
orientation,
|
|
94
|
-
register,
|
|
95
|
-
unregister,
|
|
96
|
-
variant
|
|
97
|
-
}),
|
|
98
|
-
[
|
|
99
|
-
disabled,
|
|
100
|
-
disableFocus,
|
|
101
|
-
disableTooltip,
|
|
102
|
-
focusableWhenDisabled,
|
|
103
|
-
orientation,
|
|
104
|
-
register,
|
|
105
|
-
unregister,
|
|
106
|
-
variant
|
|
107
|
-
]
|
|
108
|
-
);
|
|
109
|
-
const childrenCount = React.Children.count(children);
|
|
110
|
-
const getToggleButtonItem = (child, index) => {
|
|
111
|
-
return React.cloneElement(child, {
|
|
112
|
-
...child.props,
|
|
113
|
-
"data-button-index": index,
|
|
114
|
-
"aria-setsize": childrenCount + 1,
|
|
115
|
-
key: `button-${index}`,
|
|
116
|
-
toggled: selectedIndex === index,
|
|
117
|
-
onKeyDown: (event) => handleKeyDown(event, index),
|
|
118
|
-
onToggle: (event, newValue) => handleToggle(event, index, newValue)
|
|
119
|
-
});
|
|
120
|
-
};
|
|
121
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
122
|
-
...restProps,
|
|
123
|
-
"aria-label": ariaLabel,
|
|
124
|
-
className: clsx.clsx(
|
|
125
|
-
withBaseName(),
|
|
126
|
-
withBaseName(orientation),
|
|
127
|
-
{
|
|
128
|
-
[withBaseName("cta")]: variant === "cta",
|
|
129
|
-
[withBaseName("secondary")]: variant === "secondary",
|
|
130
|
-
[withBaseName("primary")]: variant === "primary"
|
|
131
|
-
},
|
|
132
|
-
className
|
|
133
|
-
),
|
|
134
|
-
ref,
|
|
135
|
-
role: "radiogroup",
|
|
136
|
-
onFocus: handleFocus,
|
|
137
|
-
onBlur: handleBlur,
|
|
138
|
-
style: { width },
|
|
139
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
|
|
140
|
-
value: groupContext,
|
|
141
|
-
children: children && children.map(getToggleButtonItem)
|
|
142
|
-
})
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
exports.ToggleButtonGroup = ToggleButtonGroup;
|
|
147
|
-
//# sourceMappingURL=ToggleButtonGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n cloneElement,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n Orientation,\n ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n event: SyntheticEvent<HTMLButtonElement>,\n index: number,\n toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n \"aria-label\"?: string;\n disabled?: boolean;\n disableTooltip?: boolean;\n defaultSelectedIndex?: number;\n focusableWhenDisabled?: boolean;\n selectedIndex?: number;\n orientation?: Orientation;\n variant?: ButtonVariant;\n width?: number;\n children: Array<ReactElement>;\n onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => {\n let nextIndex = getNextIndex(nodes, index, increment);\n\n while (nextIndex !== index && !nodes[nextIndex]) {\n nextIndex = getNextIndex(nodes, nextIndex, increment);\n }\n\n return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n {\n \"aria-label\": ariaLabel = \"Toggle options\",\n children,\n className,\n disabled,\n disableTooltip,\n defaultSelectedIndex = 0,\n focusableWhenDisabled,\n selectedIndex: selectedIndexProp,\n orientation = \"horizontal\",\n variant = \"primary\",\n width,\n onChange,\n onFocus,\n onBlur,\n ...restProps\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n const [disableFocus, setDisableFocus] = useState(false);\n const [selectedIndex, setSelectedIndex] = useControlled({\n controlled: selectedIndexProp,\n default: defaultSelectedIndex,\n name: \"ToggleButtonGroup\",\n state: \"selectedIndex\",\n });\n\n const register = useCallback(\n (node: HTMLButtonElement | null, index: number) => {\n buttonRefs.current[index] = node || undefined;\n },\n []\n );\n\n const unregister = useCallback((index: number) => {\n buttonRefs.current[index] = undefined;\n }, []);\n\n // When focus is not on the active button and when you tab out\n // It should leave the toggle button group\n // It should not go to active button\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(true);\n onFocus?.(event);\n };\n\n // When you tab out from toggle button group, it should restore tab index of active button\n // When you tab back in, focus should go to active button\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(false);\n onBlur?.(event);\n };\n\n const handleToggle: ToggleButtonGroupChangeEventHandler = (\n event,\n index,\n newValue\n ) => {\n if (!newValue) {\n return;\n }\n setSelectedIndex(index);\n onChange?.(event, index, newValue);\n };\n\n const handleKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n index: number\n ) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n getNextActive(buttonRefs.current, index, 1)?.focus();\n }\n\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n getNextActive(buttonRefs.current, index, -1)?.focus();\n }\n };\n\n const groupContext = useMemo(\n () => ({\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n }),\n [\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n ]\n );\n\n const childrenCount = Children.count(children);\n\n const getToggleButtonItem = (child: ReactElement, index: number) => {\n return cloneElement(child, {\n ...child.props,\n \"data-button-index\": index,\n \"aria-setsize\": childrenCount + 1,\n key: `button-${index}`,\n toggled: selectedIndex === index,\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n handleKeyDown(event, index),\n onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n handleToggle(event, index, newValue),\n });\n };\n\n return (\n <div\n {...restProps}\n aria-label={ariaLabel}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n {\n [withBaseName(\"cta\")]: variant === \"cta\",\n [withBaseName(\"secondary\")]: variant === \"secondary\",\n [withBaseName(\"primary\")]: variant === \"primary\",\n },\n className\n )}\n ref={ref}\n role=\"radiogroup\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n // TODO: Make this responsive?\n style={{ width }}\n >\n <ToggleButtonGroupContext.Provider value={groupContext}>\n {children && children.map(getToggleButtonItem)}\n </ToggleButtonGroupContext.Provider>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useState","useControlled","useCallback","useMemo","Children","cloneElement","jsx","clsx","ToggleButtonGroupContext"],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
const ToggleButtonGroupContext = React.createContext(void 0);
|
|
8
|
-
|
|
9
|
-
exports.ToggleButtonGroupContext = ToggleButtonGroupContext;
|
|
10
|
-
//# sourceMappingURL=ToggleButtonGroupContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button/internal/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ButtonVariant } from \"@salt-ds/core\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleButtonGroupContextProps {\n disabled?: boolean;\n disableFocus?: boolean;\n disableTooltip?: boolean;\n focusableWhenDisabled?: boolean;\n register: (node: HTMLButtonElement | null, index: number) => void;\n unregister: (index: number) => void;\n orientation?: Orientation;\n variant?: ButtonVariant;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextProps | undefined\n>(undefined);\n"],"names":["createContext"],"mappings":";;;;;;AAgBa,MAAA,wBAAA,GAA2BA,oBAEtC,KAAS,CAAA;;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
|
|
4
|
-
const LogoTitle = forwardRef(
|
|
5
|
-
function LogoTitle2({ label, separatorClassname, ...rest }, ref) {
|
|
6
|
-
return label ? /* @__PURE__ */ jsxs(Fragment, {
|
|
7
|
-
children: [
|
|
8
|
-
/* @__PURE__ */ jsx("span", {
|
|
9
|
-
className: separatorClassname
|
|
10
|
-
}),
|
|
11
|
-
/* @__PURE__ */ jsx("span", {
|
|
12
|
-
ref,
|
|
13
|
-
...rest,
|
|
14
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
15
|
-
children: label
|
|
16
|
-
})
|
|
17
|
-
})
|
|
18
|
-
]
|
|
19
|
-
}) : null;
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
export { LogoTitle };
|
|
24
|
-
//# sourceMappingURL=LogoTitle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LogoTitle.js","sources":["../src/logo/internal/LogoTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport interface LogoTitleProps extends ComponentPropsWithoutRef<\"span\"> {\n label?: string;\n separatorClassname?: string;\n}\n\nexport const LogoTitle = forwardRef<HTMLSpanElement, LogoTitleProps>(\n function LogoTitle({ label, separatorClassname, ...rest }, ref) {\n return label ? (\n <>\n <span className={separatorClassname} />\n <span ref={ref} {...rest}>\n <span>{label}</span>\n </span>\n </>\n ) : null;\n }\n);\n"],"names":["LogoTitle"],"mappings":";;;AAOO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,OAAO,kBAAuB,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9D,IAAA,OAAO,KACL,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,kBAAA;AAAA,SAAoB,CAAA;AAAA,wBACpC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,GAAA;AAAA,UAAW,GAAG,IAAA;AAAA,UAClB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CACE,GAAA,IAAA,CAAA;AAAA,GACN;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".salt-density-high {\n --toggleButton-group-height: calc(var(--salt-size-base) - var(--salt-size-unit) + 2px);\n}\n.salt-density-medium {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n.salt-density-low {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 2 / 3) + 2px);\n}\n.salt-density-touch {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-cta {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-cta-borderColor, var(--salt-container-secondary-borderColor));\n}\n.saltToggleButtonGroup.saltToggleButtonGroup-primary {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-primary-borderColor, var(--salt-container-primary-borderColor));\n}\n\n.saltToggleButtonGroup {\n --toggleButton-group-borderWidth: var(--saltToggleButton-group-borderWidth, var(--salt-size-border));\n --toggleButton-group-borderStyle: var(--saltToggleButton-group-borderWidth, var(--salt-container-borderStyle));\n\n display: inline-flex;\n overflow: hidden;\n padding: 2px;\n border: var(--toggleButton-group-borderWidth) var(--toggleButton-group-borderStyle) var(--toggleButton-group-borderColor);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-secondary {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-secondary-borderColor, var(--salt-container-tertiary-borderColor));\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: var(--toggleButton-group-height);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton:not(:first-child) {\n margin-left: 2px;\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton:not(:first-child) {\n margin-top: 2px;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=ToggleButtonGroup.css.js.map
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useControlled } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef, useRef, useState, useCallback, useMemo, Children, cloneElement } from 'react';
|
|
5
|
-
import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './ToggleButtonGroup.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltToggleButtonGroup");
|
|
11
|
-
const getNextIndex = (nodes, index, increment) => (index + nodes.length + increment) % nodes.length;
|
|
12
|
-
const getNextActive = (nodes, index, increment) => {
|
|
13
|
-
let nextIndex = getNextIndex(nodes, index, increment);
|
|
14
|
-
while (nextIndex !== index && !nodes[nextIndex]) {
|
|
15
|
-
nextIndex = getNextIndex(nodes, nextIndex, increment);
|
|
16
|
-
}
|
|
17
|
-
return nodes[nextIndex];
|
|
18
|
-
};
|
|
19
|
-
const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2({
|
|
20
|
-
"aria-label": ariaLabel = "Toggle options",
|
|
21
|
-
children,
|
|
22
|
-
className,
|
|
23
|
-
disabled,
|
|
24
|
-
disableTooltip,
|
|
25
|
-
defaultSelectedIndex = 0,
|
|
26
|
-
focusableWhenDisabled,
|
|
27
|
-
selectedIndex: selectedIndexProp,
|
|
28
|
-
orientation = "horizontal",
|
|
29
|
-
variant = "primary",
|
|
30
|
-
width,
|
|
31
|
-
onChange,
|
|
32
|
-
onFocus,
|
|
33
|
-
onBlur,
|
|
34
|
-
...restProps
|
|
35
|
-
}, ref) {
|
|
36
|
-
const targetWindow = useWindow();
|
|
37
|
-
useComponentCssInjection({
|
|
38
|
-
testId: "salt-toggle-button-group",
|
|
39
|
-
css: css_248z,
|
|
40
|
-
window: targetWindow
|
|
41
|
-
});
|
|
42
|
-
const buttonRefs = useRef([]);
|
|
43
|
-
const [disableFocus, setDisableFocus] = useState(false);
|
|
44
|
-
const [selectedIndex, setSelectedIndex] = useControlled({
|
|
45
|
-
controlled: selectedIndexProp,
|
|
46
|
-
default: defaultSelectedIndex,
|
|
47
|
-
name: "ToggleButtonGroup",
|
|
48
|
-
state: "selectedIndex"
|
|
49
|
-
});
|
|
50
|
-
const register = useCallback(
|
|
51
|
-
(node, index) => {
|
|
52
|
-
buttonRefs.current[index] = node || void 0;
|
|
53
|
-
},
|
|
54
|
-
[]
|
|
55
|
-
);
|
|
56
|
-
const unregister = useCallback((index) => {
|
|
57
|
-
buttonRefs.current[index] = void 0;
|
|
58
|
-
}, []);
|
|
59
|
-
const handleFocus = (event) => {
|
|
60
|
-
setDisableFocus(true);
|
|
61
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
62
|
-
};
|
|
63
|
-
const handleBlur = (event) => {
|
|
64
|
-
setDisableFocus(false);
|
|
65
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
66
|
-
};
|
|
67
|
-
const handleToggle = (event, index, newValue) => {
|
|
68
|
-
if (!newValue) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
setSelectedIndex(index);
|
|
72
|
-
onChange == null ? void 0 : onChange(event, index, newValue);
|
|
73
|
-
};
|
|
74
|
-
const handleKeyDown = (event, index) => {
|
|
75
|
-
var _a, _b;
|
|
76
|
-
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
|
|
77
|
-
(_a = getNextActive(buttonRefs.current, index, 1)) == null ? void 0 : _a.focus();
|
|
78
|
-
}
|
|
79
|
-
if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
|
|
80
|
-
(_b = getNextActive(buttonRefs.current, index, -1)) == null ? void 0 : _b.focus();
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
const groupContext = useMemo(
|
|
84
|
-
() => ({
|
|
85
|
-
disabled,
|
|
86
|
-
disableFocus,
|
|
87
|
-
disableTooltip,
|
|
88
|
-
focusableWhenDisabled,
|
|
89
|
-
orientation,
|
|
90
|
-
register,
|
|
91
|
-
unregister,
|
|
92
|
-
variant
|
|
93
|
-
}),
|
|
94
|
-
[
|
|
95
|
-
disabled,
|
|
96
|
-
disableFocus,
|
|
97
|
-
disableTooltip,
|
|
98
|
-
focusableWhenDisabled,
|
|
99
|
-
orientation,
|
|
100
|
-
register,
|
|
101
|
-
unregister,
|
|
102
|
-
variant
|
|
103
|
-
]
|
|
104
|
-
);
|
|
105
|
-
const childrenCount = Children.count(children);
|
|
106
|
-
const getToggleButtonItem = (child, index) => {
|
|
107
|
-
return cloneElement(child, {
|
|
108
|
-
...child.props,
|
|
109
|
-
"data-button-index": index,
|
|
110
|
-
"aria-setsize": childrenCount + 1,
|
|
111
|
-
key: `button-${index}`,
|
|
112
|
-
toggled: selectedIndex === index,
|
|
113
|
-
onKeyDown: (event) => handleKeyDown(event, index),
|
|
114
|
-
onToggle: (event, newValue) => handleToggle(event, index, newValue)
|
|
115
|
-
});
|
|
116
|
-
};
|
|
117
|
-
return /* @__PURE__ */ jsx("div", {
|
|
118
|
-
...restProps,
|
|
119
|
-
"aria-label": ariaLabel,
|
|
120
|
-
className: clsx(
|
|
121
|
-
withBaseName(),
|
|
122
|
-
withBaseName(orientation),
|
|
123
|
-
{
|
|
124
|
-
[withBaseName("cta")]: variant === "cta",
|
|
125
|
-
[withBaseName("secondary")]: variant === "secondary",
|
|
126
|
-
[withBaseName("primary")]: variant === "primary"
|
|
127
|
-
},
|
|
128
|
-
className
|
|
129
|
-
),
|
|
130
|
-
ref,
|
|
131
|
-
role: "radiogroup",
|
|
132
|
-
onFocus: handleFocus,
|
|
133
|
-
onBlur: handleBlur,
|
|
134
|
-
style: { width },
|
|
135
|
-
children: /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
|
|
136
|
-
value: groupContext,
|
|
137
|
-
children: children && children.map(getToggleButtonItem)
|
|
138
|
-
})
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
export { ToggleButtonGroup };
|
|
143
|
-
//# sourceMappingURL=ToggleButtonGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n cloneElement,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n Orientation,\n ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n event: SyntheticEvent<HTMLButtonElement>,\n index: number,\n toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n \"aria-label\"?: string;\n disabled?: boolean;\n disableTooltip?: boolean;\n defaultSelectedIndex?: number;\n focusableWhenDisabled?: boolean;\n selectedIndex?: number;\n orientation?: Orientation;\n variant?: ButtonVariant;\n width?: number;\n children: Array<ReactElement>;\n onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => {\n let nextIndex = getNextIndex(nodes, index, increment);\n\n while (nextIndex !== index && !nodes[nextIndex]) {\n nextIndex = getNextIndex(nodes, nextIndex, increment);\n }\n\n return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n {\n \"aria-label\": ariaLabel = \"Toggle options\",\n children,\n className,\n disabled,\n disableTooltip,\n defaultSelectedIndex = 0,\n focusableWhenDisabled,\n selectedIndex: selectedIndexProp,\n orientation = \"horizontal\",\n variant = \"primary\",\n width,\n onChange,\n onFocus,\n onBlur,\n ...restProps\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n const [disableFocus, setDisableFocus] = useState(false);\n const [selectedIndex, setSelectedIndex] = useControlled({\n controlled: selectedIndexProp,\n default: defaultSelectedIndex,\n name: \"ToggleButtonGroup\",\n state: \"selectedIndex\",\n });\n\n const register = useCallback(\n (node: HTMLButtonElement | null, index: number) => {\n buttonRefs.current[index] = node || undefined;\n },\n []\n );\n\n const unregister = useCallback((index: number) => {\n buttonRefs.current[index] = undefined;\n }, []);\n\n // When focus is not on the active button and when you tab out\n // It should leave the toggle button group\n // It should not go to active button\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(true);\n onFocus?.(event);\n };\n\n // When you tab out from toggle button group, it should restore tab index of active button\n // When you tab back in, focus should go to active button\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(false);\n onBlur?.(event);\n };\n\n const handleToggle: ToggleButtonGroupChangeEventHandler = (\n event,\n index,\n newValue\n ) => {\n if (!newValue) {\n return;\n }\n setSelectedIndex(index);\n onChange?.(event, index, newValue);\n };\n\n const handleKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n index: number\n ) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n getNextActive(buttonRefs.current, index, 1)?.focus();\n }\n\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n getNextActive(buttonRefs.current, index, -1)?.focus();\n }\n };\n\n const groupContext = useMemo(\n () => ({\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n }),\n [\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n ]\n );\n\n const childrenCount = Children.count(children);\n\n const getToggleButtonItem = (child: ReactElement, index: number) => {\n return cloneElement(child, {\n ...child.props,\n \"data-button-index\": index,\n \"aria-setsize\": childrenCount + 1,\n key: `button-${index}`,\n toggled: selectedIndex === index,\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n handleKeyDown(event, index),\n onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n handleToggle(event, index, newValue),\n });\n };\n\n return (\n <div\n {...restProps}\n aria-label={ariaLabel}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n {\n [withBaseName(\"cta\")]: variant === \"cta\",\n [withBaseName(\"secondary\")]: variant === \"secondary\",\n [withBaseName(\"primary\")]: variant === \"primary\",\n },\n className\n )}\n ref={ref}\n role=\"radiogroup\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n // TODO: Make this responsive?\n style={{ width }}\n >\n <ToggleButtonGroupContext.Provider value={groupContext}>\n {children && children.map(getToggleButtonItem)}\n </ToggleButtonGroupContext.Provider>\n </div>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button/internal/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ButtonVariant } from \"@salt-ds/core\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleButtonGroupContextProps {\n disabled?: boolean;\n disableFocus?: boolean;\n disableTooltip?: boolean;\n focusableWhenDisabled?: boolean;\n register: (node: HTMLButtonElement | null, index: number) => void;\n unregister: (index: number) => void;\n orientation?: Orientation;\n variant?: ButtonVariant;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextProps | undefined\n>(undefined);\n"],"names":[],"mappings":";;AAgBa,MAAA,wBAAA,GAA2B,cAEtC,KAAS,CAAA;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from "react";
|
|
2
|
-
export interface LogoTitleProps extends ComponentPropsWithoutRef<"span"> {
|
|
3
|
-
label?: string;
|
|
4
|
-
separatorClassname?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const LogoTitle: import("react").ForwardRefExoticComponent<LogoTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ButtonVariant } from "@salt-ds/core";
|
|
2
|
-
import { HTMLAttributes, ReactElement, SyntheticEvent } from "react";
|
|
3
|
-
import { Orientation } from "./internal/ToggleButtonGroupContext";
|
|
4
|
-
export declare type ToggleButtonGroupChangeEventHandler = (event: SyntheticEvent<HTMLButtonElement>, index: number, toggled: boolean) => void;
|
|
5
|
-
export interface ToggleButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
6
|
-
"aria-label"?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
disableTooltip?: boolean;
|
|
9
|
-
defaultSelectedIndex?: number;
|
|
10
|
-
focusableWhenDisabled?: boolean;
|
|
11
|
-
selectedIndex?: number;
|
|
12
|
-
orientation?: Orientation;
|
|
13
|
-
variant?: ButtonVariant;
|
|
14
|
-
width?: number;
|
|
15
|
-
children: Array<ReactElement>;
|
|
16
|
-
onChange?: ToggleButtonGroupChangeEventHandler;
|
|
17
|
-
}
|
|
18
|
-
export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ButtonVariant } from "@salt-ds/core";
|
|
3
|
-
export declare type Orientation = "horizontal" | "vertical";
|
|
4
|
-
export interface ToggleButtonGroupContextProps {
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
disableFocus?: boolean;
|
|
7
|
-
disableTooltip?: boolean;
|
|
8
|
-
focusableWhenDisabled?: boolean;
|
|
9
|
-
register: (node: HTMLButtonElement | null, index: number) => void;
|
|
10
|
-
unregister: (index: number) => void;
|
|
11
|
-
orientation?: Orientation;
|
|
12
|
-
variant?: ButtonVariant;
|
|
13
|
-
}
|
|
14
|
-
export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextProps | undefined>;
|
|
File without changes
|
|
File without changes
|