@salt-ds/lab 1.0.0-alpha.12 → 1.0.0-alpha.13
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/index.js +4 -14
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/query-input/internal/QueryInputBody.js +3 -6
- package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-cjs/toast/Toast.css.js +6 -0
- package/dist-cjs/toast/Toast.css.js.map +1 -0
- package/dist-cjs/toast/Toast.js +38 -0
- package/dist-cjs/toast/Toast.js.map +1 -0
- package/dist-cjs/toast/ToastContent.css.js +6 -0
- package/dist-cjs/toast/ToastContent.css.js.map +1 -0
- package/dist-cjs/toast/ToastContent.js +30 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -0
- package/dist-es/index.js +2 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/query-input/internal/QueryInputBody.js +1 -4
- package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-es/toast/Toast.css.js +4 -0
- package/dist-es/toast/Toast.css.js.map +1 -0
- package/dist-es/toast/Toast.js +34 -0
- package/dist-es/toast/Toast.js.map +1 -0
- package/dist-es/toast/ToastContent.css.js +4 -0
- package/dist-es/toast/ToastContent.css.js.map +1 -0
- package/dist-es/toast/ToastContent.js +26 -0
- package/dist-es/toast/ToastContent.js.map +1 -0
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +2 -2
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +7 -7
- package/dist-types/index.d.ts +1 -3
- package/dist-types/stepper-input/useStepperInput.d.ts +2 -2
- package/dist-types/toast/Toast.d.ts +9 -0
- package/dist-types/toast/ToastContent.d.ts +2 -0
- package/dist-types/toast/index.d.ts +2 -0
- package/package.json +3 -3
- package/dist-cjs/accordion/Accordion.css.js +0 -6
- package/dist-cjs/accordion/Accordion.css.js.map +0 -1
- package/dist-cjs/accordion/Accordion.js +0 -62
- package/dist-cjs/accordion/Accordion.js.map +0 -1
- package/dist-cjs/accordion/AccordionContext.js +0 -25
- package/dist-cjs/accordion/AccordionContext.js.map +0 -1
- package/dist-cjs/accordion/AccordionGroup.js +0 -23
- package/dist-cjs/accordion/AccordionGroup.js.map +0 -1
- package/dist-cjs/accordion/AccordionHeader.css.js +0 -6
- package/dist-cjs/accordion/AccordionHeader.css.js.map +0 -1
- package/dist-cjs/accordion/AccordionHeader.js +0 -50
- package/dist-cjs/accordion/AccordionHeader.js.map +0 -1
- package/dist-cjs/accordion/AccordionPanel.css.js +0 -6
- package/dist-cjs/accordion/AccordionPanel.css.js.map +0 -1
- package/dist-cjs/accordion/AccordionPanel.js +0 -45
- package/dist-cjs/accordion/AccordionPanel.js.map +0 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +0 -6
- package/dist-cjs/toggle-button/ToggleButton.css.js.map +0 -1
- package/dist-cjs/toggle-button/ToggleButton.js +0 -75
- package/dist-cjs/toggle-button/ToggleButton.js.map +0 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +0 -6
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js.map +0 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +0 -111
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +0 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +0 -15
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +0 -1
- package/dist-es/accordion/Accordion.css.js +0 -4
- package/dist-es/accordion/Accordion.css.js.map +0 -1
- package/dist-es/accordion/Accordion.js +0 -58
- package/dist-es/accordion/Accordion.js.map +0 -1
- package/dist-es/accordion/AccordionContext.js +0 -20
- package/dist-es/accordion/AccordionContext.js.map +0 -1
- package/dist-es/accordion/AccordionGroup.js +0 -19
- package/dist-es/accordion/AccordionGroup.js.map +0 -1
- package/dist-es/accordion/AccordionHeader.css.js +0 -4
- package/dist-es/accordion/AccordionHeader.css.js.map +0 -1
- package/dist-es/accordion/AccordionHeader.js +0 -46
- package/dist-es/accordion/AccordionHeader.js.map +0 -1
- package/dist-es/accordion/AccordionPanel.css.js +0 -4
- package/dist-es/accordion/AccordionPanel.css.js.map +0 -1
- package/dist-es/accordion/AccordionPanel.js +0 -41
- package/dist-es/accordion/AccordionPanel.js.map +0 -1
- package/dist-es/toggle-button/ToggleButton.css.js +0 -4
- package/dist-es/toggle-button/ToggleButton.css.js.map +0 -1
- package/dist-es/toggle-button/ToggleButton.js +0 -71
- package/dist-es/toggle-button/ToggleButton.js.map +0 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +0 -4
- package/dist-es/toggle-button-group/ToggleButtonGroup.css.js.map +0 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +0 -107
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +0 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +0 -10
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +0 -1
- package/dist-types/accordion/Accordion.d.ts +0 -25
- package/dist-types/accordion/AccordionContext.d.ts +0 -10
- package/dist-types/accordion/AccordionGroup.d.ts +0 -4
- package/dist-types/accordion/AccordionHeader.d.ts +0 -4
- package/dist-types/accordion/AccordionPanel.d.ts +0 -4
- package/dist-types/accordion/index.d.ts +0 -4
- package/dist-types/toggle-button/ToggleButton.d.ts +0 -7
- package/dist-types/toggle-button/index.d.ts +0 -1
- package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +0 -25
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +0 -10
- package/dist-types/toggle-button-group/index.d.ts +0 -2
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var AccordionContext = require('./AccordionContext.js');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var Accordion$1 = require('./Accordion.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltAccordion");
|
|
15
|
-
const Accordion = React.forwardRef(
|
|
16
|
-
function Accordion2(props, ref) {
|
|
17
|
-
const {
|
|
18
|
-
className,
|
|
19
|
-
defaultExpanded,
|
|
20
|
-
expanded: expandedProp,
|
|
21
|
-
disabled,
|
|
22
|
-
id: idProp,
|
|
23
|
-
onToggle,
|
|
24
|
-
value,
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const id = core.useId(idProp);
|
|
28
|
-
const targetWindow = window.useWindow();
|
|
29
|
-
styles.useComponentCssInjection({
|
|
30
|
-
testId: "salt-accordion",
|
|
31
|
-
css: Accordion$1,
|
|
32
|
-
window: targetWindow
|
|
33
|
-
});
|
|
34
|
-
const [expanded, setExpanded] = core.useControlled({
|
|
35
|
-
controlled: expandedProp,
|
|
36
|
-
default: Boolean(defaultExpanded),
|
|
37
|
-
name: "Accordion",
|
|
38
|
-
state: "expanded"
|
|
39
|
-
});
|
|
40
|
-
const toggle = (event) => {
|
|
41
|
-
setExpanded((prev) => !prev);
|
|
42
|
-
onToggle == null ? void 0 : onToggle(event);
|
|
43
|
-
};
|
|
44
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.AccordionContext.Provider, {
|
|
45
|
-
value: {
|
|
46
|
-
value,
|
|
47
|
-
toggle,
|
|
48
|
-
expanded,
|
|
49
|
-
disabled: Boolean(disabled),
|
|
50
|
-
id: id != null ? id : ""
|
|
51
|
-
},
|
|
52
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
53
|
-
ref,
|
|
54
|
-
className: clsx.clsx(withBaseName(), className),
|
|
55
|
-
...rest
|
|
56
|
-
})
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
exports.Accordion = Accordion;
|
|
62
|
-
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the accordion is toggled.\n * @param event\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n id: idProp,\n onToggle,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n disabled: Boolean(disabled),\n id: id ?? \"\",\n }}\n >\n <div ref={ref} className={clsx(withBaseName(), className)} {...rest} />\n </AccordionContext.Provider>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,kBAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,OACZ;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAA;AAAA,QAAU,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KACvE,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
|
|
8
|
-
const AccordionContext = core.createContext(
|
|
9
|
-
"AccordionContext",
|
|
10
|
-
{
|
|
11
|
-
value: "",
|
|
12
|
-
expanded: false,
|
|
13
|
-
toggle: () => {
|
|
14
|
-
},
|
|
15
|
-
disabled: false,
|
|
16
|
-
id: ""
|
|
17
|
-
}
|
|
18
|
-
);
|
|
19
|
-
function useAccordion() {
|
|
20
|
-
return React.useContext(AccordionContext);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.AccordionContext = AccordionContext;
|
|
24
|
-
exports.useAccordion = useAccordion;
|
|
25
|
-
//# sourceMappingURL=AccordionContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n id: string;\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => {},\n disabled: false,\n id: \"\",\n }\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAWO,MAAM,gBAAmB,GAAAA,kBAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM;AAAA,KAAC;AAAA,IACf,QAAU,EAAA,KAAA;AAAA,IACV,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
|
|
10
|
-
const withBaseName = core.makePrefixer("saltAccordionGroup");
|
|
11
|
-
const AccordionGroup = React.forwardRef(
|
|
12
|
-
function AccordionGroup2(props, ref) {
|
|
13
|
-
const { className, ...rest } = props;
|
|
14
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
15
|
-
className: clsx.clsx(withBaseName(), className),
|
|
16
|
-
ref,
|
|
17
|
-
...rest
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
exports.AccordionGroup = AccordionGroup;
|
|
23
|
-
//# sourceMappingURL=AccordionGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","jsx","clsx"],"mappings":";;;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding-block: var(--salt-spacing-50);\n padding-inline: var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: var(--salt-size-base);\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-text-primary-foreground);\n --saltIcon-color: var(--salt-text-primary-foreground);\n text-align: left;\n}\n\n.saltAccordionHeader:focus-visible {\n background: var(--salt-actionable-primary-background-hover);\n outline: var(--salt-focused-outline);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .saltAccordionHeader:hover {\n background: var(--salt-actionable-primary-background-hover);\n }\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-text-primary-foreground-disabled);\n --saltIcon-fill: var(--salt-text-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=AccordionHeader.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var icons = require('@salt-ds/icons');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var AccordionContext = require('./AccordionContext.js');
|
|
13
|
-
var AccordionHeader$1 = require('./AccordionHeader.css.js');
|
|
14
|
-
|
|
15
|
-
const withBaseName = core.makePrefixer("saltAccordionHeader");
|
|
16
|
-
const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
|
|
17
|
-
const { children, className, onClick, ...rest } = props;
|
|
18
|
-
const { value, expanded, toggle, disabled, id } = AccordionContext.useAccordion();
|
|
19
|
-
const targetWindow = window.useWindow();
|
|
20
|
-
styles.useComponentCssInjection({
|
|
21
|
-
testId: "salt-accordion-header",
|
|
22
|
-
css: AccordionHeader$1,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
const handleClick = (event) => {
|
|
26
|
-
toggle(event);
|
|
27
|
-
onClick == null ? void 0 : onClick(event);
|
|
28
|
-
};
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
30
|
-
ref,
|
|
31
|
-
className: clsx.clsx(withBaseName(), className),
|
|
32
|
-
disabled,
|
|
33
|
-
onClick: handleClick,
|
|
34
|
-
"aria-expanded": expanded,
|
|
35
|
-
id: `${id}-header`,
|
|
36
|
-
"aria-controls": `${id}-panel`,
|
|
37
|
-
value,
|
|
38
|
-
...rest,
|
|
39
|
-
children: [
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
|
|
41
|
-
"aria-hidden": "true",
|
|
42
|
-
className: withBaseName("icon")
|
|
43
|
-
}),
|
|
44
|
-
children
|
|
45
|
-
]
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
exports.AccordionHeader = AccordionHeader;
|
|
50
|
-
//# sourceMappingURL=AccordionHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, ...rest } = props;\n const { value, expanded, toggle, disabled, id } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={`${id}-header`}\n aria-controls={`${id}-panel`}\n value={value}\n {...rest}\n >\n <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n {children}\n </button>\n );\n});\n"],"names":["makePrefixer","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","jsxs","clsx","jsx","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,QAAQ,QAAU,EAAA,EAAA,KAAOC,6BAAa,EAAA,CAAA;AAE/D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,sBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACrE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltAccordionPanel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--salt-duration-perceptible) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] + .saltAccordionPanel {\n grid-template-rows: 1fr;\n}\n\n.saltAccordionPanel-inner {\n overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n padding: var(--salt-spacing-200);\n padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=AccordionPanel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var styles = require('@salt-ds/styles');
|
|
10
|
-
var clsx = require('clsx');
|
|
11
|
-
var AccordionContext = require('./AccordionContext.js');
|
|
12
|
-
var AccordionPanel$1 = require('./AccordionPanel.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltAccordionPanel");
|
|
15
|
-
const AccordionPanel = React.forwardRef(
|
|
16
|
-
function AccordionPanel2(props, ref) {
|
|
17
|
-
const { children, className, ...rest } = props;
|
|
18
|
-
const targetWindow = window.useWindow();
|
|
19
|
-
styles.useComponentCssInjection({
|
|
20
|
-
testId: "salt-accordion-panel",
|
|
21
|
-
css: AccordionPanel$1,
|
|
22
|
-
window: targetWindow
|
|
23
|
-
});
|
|
24
|
-
const { id, expanded } = AccordionContext.useAccordion();
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
26
|
-
ref,
|
|
27
|
-
className: clsx.clsx(withBaseName(), className),
|
|
28
|
-
role: "region",
|
|
29
|
-
id: `${id}-panel`,
|
|
30
|
-
"aria-labelledby": `${id}-header`,
|
|
31
|
-
"aria-hidden": !expanded ? "true" : void 0,
|
|
32
|
-
...rest,
|
|
33
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
34
|
-
className: withBaseName("inner"),
|
|
35
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
36
|
-
className: withBaseName("content"),
|
|
37
|
-
children
|
|
38
|
-
})
|
|
39
|
-
})
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
exports.AccordionPanel = AccordionPanel;
|
|
45
|
-
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { id, expanded } = useAccordion();\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={`${id}-panel`}\n aria-labelledby={`${id}-header`}\n aria-hidden={!expanded ? \"true\" : undefined}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAIC,6BAAa,EAAA,CAAA;AAEtC,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MACjC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-actionable-textTransform);\n font-weight: var(--salt-actionable-secondary-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-actionable-textAlign);\n letter-spacing: var(--salt-actionable-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-inline: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
10
|
-
var ToggleButtonGroupContext = require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
11
|
-
var window = require('@salt-ds/window');
|
|
12
|
-
var styles = require('@salt-ds/styles');
|
|
13
|
-
var ToggleButton$1 = require('./ToggleButton.css.js');
|
|
14
|
-
|
|
15
|
-
const withBaseName = core.makePrefixer("saltToggleButton");
|
|
16
|
-
const ToggleButton = React.forwardRef(
|
|
17
|
-
function ToggleButton2(props, ref) {
|
|
18
|
-
const {
|
|
19
|
-
children,
|
|
20
|
-
className,
|
|
21
|
-
disabled: disabledProp,
|
|
22
|
-
value,
|
|
23
|
-
onClick,
|
|
24
|
-
onFocus,
|
|
25
|
-
onChange,
|
|
26
|
-
selected: selectedProp,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
const targetWindow = window.useWindow();
|
|
30
|
-
styles.useComponentCssInjection({
|
|
31
|
-
testId: "salt-toggle-button",
|
|
32
|
-
css: ToggleButton$1,
|
|
33
|
-
window: targetWindow
|
|
34
|
-
});
|
|
35
|
-
const buttonRef = React.useRef(null);
|
|
36
|
-
const handleRef = core.useForkRef(ref, buttonRef);
|
|
37
|
-
const toggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup();
|
|
38
|
-
const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
|
|
39
|
-
const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
|
|
40
|
-
const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
|
|
41
|
-
const [selected, setSelected] = core.useControlled({
|
|
42
|
-
controlled: toggleButtonGroupSelected,
|
|
43
|
-
default: Boolean(selectedProp),
|
|
44
|
-
name: "ToggleButton",
|
|
45
|
-
state: "selected"
|
|
46
|
-
});
|
|
47
|
-
const handleClick = (event) => {
|
|
48
|
-
toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
|
|
49
|
-
setSelected(!selected);
|
|
50
|
-
onChange == null ? void 0 : onChange(event);
|
|
51
|
-
onClick == null ? void 0 : onClick(event);
|
|
52
|
-
};
|
|
53
|
-
const handleFocus = (event) => {
|
|
54
|
-
toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
|
|
55
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
56
|
-
};
|
|
57
|
-
const ariaChecked = selected && !disabled;
|
|
58
|
-
return /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
59
|
-
"aria-checked": ariaChecked,
|
|
60
|
-
className: clsx.clsx(withBaseName(), className),
|
|
61
|
-
disabled,
|
|
62
|
-
role: toggleButtonGroup ? "radio" : "checkbox",
|
|
63
|
-
ref: handleRef,
|
|
64
|
-
onClick: handleClick,
|
|
65
|
-
onFocus: handleFocus,
|
|
66
|
-
tabIndex: focusable && !disabled ? 0 : -1,
|
|
67
|
-
value,
|
|
68
|
-
...rest,
|
|
69
|
-
children
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
exports.ToggleButton = ToggleButton;
|
|
75
|
-
//# sourceMappingURL=ToggleButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n ComponentProps,\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentProps<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-checked={ariaChecked}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n role={toggleButtonGroup ? \"radio\" : \"checkbox\"}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","jsx","clsx"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltToggleButtonGroup {\n display: flex;\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n width: fit-content;\n gap: var(--salt-spacing-50);\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n flex-direction: row;\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n justify-content: start;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=ToggleButtonGroup.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var ToggleButtonGroupContext = require('./ToggleButtonGroupContext.js');
|
|
12
|
-
var ToggleButtonGroup$1 = require('./ToggleButtonGroup.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltToggleButtonGroup");
|
|
15
|
-
const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, ref) {
|
|
16
|
-
const {
|
|
17
|
-
children,
|
|
18
|
-
className,
|
|
19
|
-
value: valueProp,
|
|
20
|
-
defaultValue,
|
|
21
|
-
disabled,
|
|
22
|
-
onChange,
|
|
23
|
-
onKeyDown,
|
|
24
|
-
orientation = "horizontal",
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const targetWindow = window.useWindow();
|
|
28
|
-
styles.useComponentCssInjection({
|
|
29
|
-
testId: "salt-toggle-button-group",
|
|
30
|
-
css: ToggleButtonGroup$1,
|
|
31
|
-
window: targetWindow
|
|
32
|
-
});
|
|
33
|
-
const groupRef = React.useRef(null);
|
|
34
|
-
const handleRef = core.useForkRef(ref, groupRef);
|
|
35
|
-
const [value, setValue] = core.useControlled({
|
|
36
|
-
default: defaultValue,
|
|
37
|
-
controlled: valueProp,
|
|
38
|
-
name: "ToggleButtonGroup",
|
|
39
|
-
state: "value"
|
|
40
|
-
});
|
|
41
|
-
const [focused, setFocused] = React.useState(value);
|
|
42
|
-
const select = React.useCallback(
|
|
43
|
-
(event) => {
|
|
44
|
-
const newValue = event.currentTarget.value;
|
|
45
|
-
setValue(newValue);
|
|
46
|
-
if (value !== newValue) {
|
|
47
|
-
onChange == null ? void 0 : onChange(event);
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
[onChange, value, setValue]
|
|
51
|
-
);
|
|
52
|
-
const isSelected = React.useCallback(
|
|
53
|
-
(id) => {
|
|
54
|
-
return value === id;
|
|
55
|
-
},
|
|
56
|
-
[value]
|
|
57
|
-
);
|
|
58
|
-
const focus = (id) => {
|
|
59
|
-
setFocused(id);
|
|
60
|
-
};
|
|
61
|
-
const isFocused = React.useCallback(
|
|
62
|
-
(id) => {
|
|
63
|
-
return focused === id || !focused;
|
|
64
|
-
},
|
|
65
|
-
[focused]
|
|
66
|
-
);
|
|
67
|
-
const contextValue = React.useMemo(
|
|
68
|
-
() => ({
|
|
69
|
-
select,
|
|
70
|
-
isSelected,
|
|
71
|
-
focus,
|
|
72
|
-
isFocused,
|
|
73
|
-
disabled
|
|
74
|
-
}),
|
|
75
|
-
[select, isSelected, isFocused, disabled]
|
|
76
|
-
);
|
|
77
|
-
const handleKeyDown = (event) => {
|
|
78
|
-
var _a, _b, _c, _d;
|
|
79
|
-
const elements = Array.from(
|
|
80
|
-
(_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
|
|
81
|
-
);
|
|
82
|
-
const currentIndex = elements.findIndex(
|
|
83
|
-
(element) => element === document.activeElement
|
|
84
|
-
);
|
|
85
|
-
switch (event.key) {
|
|
86
|
-
case "ArrowDown":
|
|
87
|
-
case "ArrowRight":
|
|
88
|
-
(_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
|
|
89
|
-
break;
|
|
90
|
-
case "ArrowUp":
|
|
91
|
-
case "ArrowLeft":
|
|
92
|
-
(_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
|
|
93
|
-
break;
|
|
94
|
-
}
|
|
95
|
-
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
96
|
-
};
|
|
97
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
|
|
98
|
-
value: contextValue,
|
|
99
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
100
|
-
className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
|
|
101
|
-
role: "radiogroup",
|
|
102
|
-
ref: handleRef,
|
|
103
|
-
onKeyDown: handleKeyDown,
|
|
104
|
-
...rest,
|
|
105
|
-
children
|
|
106
|
-
})
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
exports.ToggleButtonGroup = ToggleButtonGroup;
|
|
111
|
-
//# sourceMappingURL=ToggleButtonGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string | ReadonlyArray<string> | number | undefined;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string | ReadonlyArray<string> | number | undefined;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<\n string | ReadonlyArray<string> | number | undefined\n >(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n }),\n [select, isSelected, isFocused, disabled]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
|
|
8
|
-
const ToggleButtonGroupContext = core.createContext("ToggleButtonGroupContext", void 0);
|
|
9
|
-
function useToggleButtonGroup() {
|
|
10
|
-
return React.useContext(ToggleButtonGroupContext);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
exports.ToggleButtonGroupContext = ToggleButtonGroupContext;
|
|
14
|
-
exports.useToggleButtonGroup = useToggleButtonGroup;
|
|
15
|
-
//# sourceMappingURL=ToggleButtonGroupContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n isFocused: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAea,MAAA,wBAAA,GAA2BA,kBAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { makePrefixer, useId, useControlled } from '@salt-ds/core';
|
|
4
|
-
import { clsx } from 'clsx';
|
|
5
|
-
import { AccordionContext } from './AccordionContext.js';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './Accordion.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltAccordion");
|
|
11
|
-
const Accordion = forwardRef(
|
|
12
|
-
function Accordion2(props, ref) {
|
|
13
|
-
const {
|
|
14
|
-
className,
|
|
15
|
-
defaultExpanded,
|
|
16
|
-
expanded: expandedProp,
|
|
17
|
-
disabled,
|
|
18
|
-
id: idProp,
|
|
19
|
-
onToggle,
|
|
20
|
-
value,
|
|
21
|
-
...rest
|
|
22
|
-
} = props;
|
|
23
|
-
const id = useId(idProp);
|
|
24
|
-
const targetWindow = useWindow();
|
|
25
|
-
useComponentCssInjection({
|
|
26
|
-
testId: "salt-accordion",
|
|
27
|
-
css: css_248z,
|
|
28
|
-
window: targetWindow
|
|
29
|
-
});
|
|
30
|
-
const [expanded, setExpanded] = useControlled({
|
|
31
|
-
controlled: expandedProp,
|
|
32
|
-
default: Boolean(defaultExpanded),
|
|
33
|
-
name: "Accordion",
|
|
34
|
-
state: "expanded"
|
|
35
|
-
});
|
|
36
|
-
const toggle = (event) => {
|
|
37
|
-
setExpanded((prev) => !prev);
|
|
38
|
-
onToggle == null ? void 0 : onToggle(event);
|
|
39
|
-
};
|
|
40
|
-
return /* @__PURE__ */ jsx(AccordionContext.Provider, {
|
|
41
|
-
value: {
|
|
42
|
-
value,
|
|
43
|
-
toggle,
|
|
44
|
-
expanded,
|
|
45
|
-
disabled: Boolean(disabled),
|
|
46
|
-
id: id != null ? id : ""
|
|
47
|
-
},
|
|
48
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
49
|
-
ref,
|
|
50
|
-
className: clsx(withBaseName(), className),
|
|
51
|
-
...rest
|
|
52
|
-
})
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
export { Accordion };
|
|
58
|
-
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the accordion is toggled.\n * @param event\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n id: idProp,\n onToggle,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n disabled: Boolean(disabled),\n id: id ?? \"\",\n }}\n >\n <div ref={ref} className={clsx(withBaseName(), className)} {...rest} />\n </AccordionContext.Provider>\n );\n }\n);\n"],"names":["Accordion","accordionCss"],"mappings":";;;;;;;;;AA+BA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,OACZ;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAA;AAAA,QAAU,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KACvE,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { createContext } from '@salt-ds/core';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
|
|
4
|
-
const AccordionContext = createContext(
|
|
5
|
-
"AccordionContext",
|
|
6
|
-
{
|
|
7
|
-
value: "",
|
|
8
|
-
expanded: false,
|
|
9
|
-
toggle: () => {
|
|
10
|
-
},
|
|
11
|
-
disabled: false,
|
|
12
|
-
id: ""
|
|
13
|
-
}
|
|
14
|
-
);
|
|
15
|
-
function useAccordion() {
|
|
16
|
-
return useContext(AccordionContext);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { AccordionContext, useAccordion };
|
|
20
|
-
//# sourceMappingURL=AccordionContext.js.map
|