@salt-ds/lab 1.0.0-alpha.11 → 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/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-cjs/index.js +6 -17
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +6 -0
- package/dist-cjs/multiline-input/MultilineInput.css.js.map +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js +150 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -0
- package/dist-cjs/pill/Pill.css.js +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-cjs/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-cjs/toolbar/ToolbarButton.css.js +1 -1
- package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-es/index.js +3 -8
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-deprecated/ListItem.css.js +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +4 -0
- package/dist-es/multiline-input/MultilineInput.css.js.map +1 -0
- package/dist-es/multiline-input/MultilineInput.js +146 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -0
- package/dist-es/pill/Pill.css.js +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-es/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-es/toolbar/ToolbarButton.css.js +1 -1
- 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 +2 -3
- package/dist-types/multiline-input/MultilineInput.d.ts +40 -0
- package/dist-types/multiline-input/index.d.ts +1 -0
- 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 +4 -4
- 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 -137
- package/dist-cjs/accordion/Accordion.js.map +0 -1
- package/dist-cjs/accordion/AccordionContext.js +0 -21
- package/dist-cjs/accordion/AccordionContext.js.map +0 -1
- package/dist-cjs/accordion/AccordionDetails.js +0 -87
- package/dist-cjs/accordion/AccordionDetails.js.map +0 -1
- package/dist-cjs/accordion/AccordionSection.js +0 -111
- package/dist-cjs/accordion/AccordionSection.js.map +0 -1
- package/dist-cjs/accordion/AccordionSectionContext.js +0 -24
- package/dist-cjs/accordion/AccordionSectionContext.js.map +0 -1
- package/dist-cjs/accordion/AccordionSummary.js +0 -64
- package/dist-cjs/accordion/AccordionSummary.js.map +0 -1
- package/dist-cjs/accordion/utils.js +0 -8
- package/dist-cjs/accordion/utils.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 -133
- package/dist-es/accordion/Accordion.js.map +0 -1
- package/dist-es/accordion/AccordionContext.js +0 -16
- package/dist-es/accordion/AccordionContext.js.map +0 -1
- package/dist-es/accordion/AccordionDetails.js +0 -83
- package/dist-es/accordion/AccordionDetails.js.map +0 -1
- package/dist-es/accordion/AccordionSection.js +0 -107
- package/dist-es/accordion/AccordionSection.js.map +0 -1
- package/dist-es/accordion/AccordionSectionContext.js +0 -19
- package/dist-es/accordion/AccordionSectionContext.js.map +0 -1
- package/dist-es/accordion/AccordionSummary.js +0 -60
- package/dist-es/accordion/AccordionSummary.js.map +0 -1
- package/dist-es/accordion/utils.js +0 -4
- package/dist-es/accordion/utils.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 -9
- package/dist-types/accordion/AccordionContext.d.ts +0 -10
- package/dist-types/accordion/AccordionDetails.d.ts +0 -8
- package/dist-types/accordion/AccordionSection.d.ts +0 -9
- package/dist-types/accordion/AccordionSectionContext.d.ts +0 -8
- package/dist-types/accordion/AccordionSummary.d.ts +0 -5
- package/dist-types/accordion/index.d.ts +0 -5
- package/dist-types/accordion/utils.d.ts +0 -1
- 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,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* .saltToolbarButton {\n outline: none !important;\n} */\n\n.saltToolbarButton:not([data-is-inside-panel]) {\n --saltButton-fontSize: 0;\n --saltButton-letterSpacing: 0;\n}\n";
|
|
1
|
+
var css_248z = "/* .saltToolbarButton {\n outline: none !important;\n} */\n\n.saltToolbarButton:not([data-is-inside-panel]) {\n --saltButton-fontSize: 0;\n --saltButton-letterSpacing: 0;\n gap: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ToolbarButton.css.js.map
|
|
@@ -59,7 +59,7 @@ export declare const useComboBox: <Item>(props: UseComboBoxProps<Item>) => {
|
|
|
59
59
|
role: (import("react").AriaRole | undefined) & string;
|
|
60
60
|
tabIndex?: number | undefined;
|
|
61
61
|
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
62
|
-
'aria-autocomplete'?: "list" | "none" | "
|
|
62
|
+
'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
|
|
63
63
|
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
64
64
|
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
65
65
|
'aria-colcount'?: number | undefined;
|
|
@@ -70,7 +70,7 @@ export declare const useComboBox: <Item>(props: UseComboBoxProps<Item>) => {
|
|
|
70
70
|
'aria-describedby'?: string | undefined;
|
|
71
71
|
'aria-details'?: string | undefined;
|
|
72
72
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
73
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
73
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
74
74
|
'aria-errormessage'?: string | undefined;
|
|
75
75
|
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
76
76
|
'aria-flowto'?: string | undefined;
|
|
@@ -100,7 +100,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
100
100
|
is?: string | undefined;
|
|
101
101
|
'aria-activedescendant'?: string | undefined;
|
|
102
102
|
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
103
|
-
'aria-autocomplete'?: "list" | "none" | "
|
|
103
|
+
'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
|
|
104
104
|
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
105
105
|
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
106
106
|
'aria-colcount'?: number | undefined;
|
|
@@ -111,7 +111,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
111
111
|
'aria-describedby'?: string | undefined;
|
|
112
112
|
'aria-details'?: string | undefined;
|
|
113
113
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
114
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
114
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
115
115
|
'aria-errormessage'?: string | undefined;
|
|
116
116
|
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
117
117
|
'aria-flowto'?: string | undefined;
|
|
@@ -324,7 +324,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
324
324
|
tabIndex?: number | undefined;
|
|
325
325
|
'aria-activedescendant'?: string | undefined;
|
|
326
326
|
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
327
|
-
'aria-autocomplete'?: "list" | "none" | "
|
|
327
|
+
'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
|
|
328
328
|
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
329
329
|
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
330
330
|
'aria-colcount'?: number | undefined;
|
|
@@ -335,7 +335,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
335
335
|
'aria-describedby'?: string | undefined;
|
|
336
336
|
'aria-details'?: string | undefined;
|
|
337
337
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
338
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
338
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
339
339
|
'aria-errormessage'?: string | undefined;
|
|
340
340
|
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
341
341
|
'aria-flowto'?: string | undefined;
|
|
@@ -571,8 +571,8 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
571
571
|
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
572
572
|
is?: string | undefined;
|
|
573
573
|
disabled?: boolean | undefined;
|
|
574
|
-
focused?: boolean | undefined;
|
|
575
574
|
expanded?: boolean | undefined;
|
|
575
|
+
focused?: boolean | undefined;
|
|
576
576
|
inputRef?: import("react").Ref<HTMLInputElement> | undefined;
|
|
577
577
|
itemToString?: import("../../tokenized-input").ItemToString<Item> | undefined;
|
|
578
578
|
highlightedIndex?: number | undefined;
|
|
@@ -633,7 +633,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
633
633
|
role: (import("react").AriaRole | undefined) & string;
|
|
634
634
|
tabIndex?: number | undefined;
|
|
635
635
|
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
636
|
-
'aria-autocomplete'?: "list" | "none" | "
|
|
636
|
+
'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
|
|
637
637
|
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
638
638
|
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
639
639
|
'aria-colcount'?: number | undefined;
|
|
@@ -644,7 +644,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
644
644
|
'aria-describedby'?: string | undefined;
|
|
645
645
|
'aria-details'?: string | undefined;
|
|
646
646
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
647
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
647
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
648
648
|
'aria-errormessage'?: string | undefined;
|
|
649
649
|
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
650
650
|
'aria-flowto'?: string | undefined;
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export type { SelectHandler, SelectionChangeHandler, SelectionStrategy, useCollectionItems, } from "./common-hooks";
|
|
2
2
|
export type { ListChangeHandler as ListChangeHandlerDeprecated, ListSelectHandler as ListSelectHandlerDeprecated, } from "./list-deprecated";
|
|
3
3
|
export { ListItemBase as ListItemBaseDeprecated, useListItem as useListItemDeprecated, } from "./list-deprecated";
|
|
4
|
-
export * from "./accordion";
|
|
5
4
|
export * from "./app-header";
|
|
6
5
|
export * from "./badge";
|
|
7
6
|
export * from "./breadcrumbs";
|
|
@@ -32,6 +31,7 @@ export * from "./list-next";
|
|
|
32
31
|
export * from "./logo";
|
|
33
32
|
export * from "./menu-button";
|
|
34
33
|
export * from "./metric";
|
|
34
|
+
export * from "./multiline-input";
|
|
35
35
|
export * from "./nav-item";
|
|
36
36
|
export * from "./overlay";
|
|
37
37
|
export * from "./pagination";
|
|
@@ -49,9 +49,8 @@ export * from "./slider";
|
|
|
49
49
|
export * from "./stepper-input";
|
|
50
50
|
export * from "./switch";
|
|
51
51
|
export * from "./tabs";
|
|
52
|
+
export * from "./toast";
|
|
52
53
|
export * from "./tabs-next";
|
|
53
|
-
export * from "./toggle-button";
|
|
54
|
-
export * from "./toggle-button-group";
|
|
55
54
|
export * from "./tokenized-input";
|
|
56
55
|
export * from "./toolbar";
|
|
57
56
|
export * from "./tree";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode, Ref, TextareaHTMLAttributes } from "react";
|
|
2
|
+
export interface MultilineInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
|
|
3
|
+
/**
|
|
4
|
+
* End adornment component
|
|
5
|
+
*/
|
|
6
|
+
endAdornment?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Styling variant with full border. Defaults to false
|
|
9
|
+
*/
|
|
10
|
+
fullBorder?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.
|
|
13
|
+
*/
|
|
14
|
+
textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
15
|
+
/**
|
|
16
|
+
* Optional ref for the textarea component
|
|
17
|
+
*/
|
|
18
|
+
textAreaRef?: Ref<HTMLTextAreaElement>;
|
|
19
|
+
/**
|
|
20
|
+
* If `true`, the component is read only.
|
|
21
|
+
*/
|
|
22
|
+
readOnly?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Start adornment component
|
|
25
|
+
*/
|
|
26
|
+
startAdornment?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Validation status.
|
|
29
|
+
*/
|
|
30
|
+
validationStatus?: "error" | "warning" | "success";
|
|
31
|
+
/**
|
|
32
|
+
* Styling variant. Defaults to "primary".
|
|
33
|
+
*/
|
|
34
|
+
variant?: "primary" | "secondary";
|
|
35
|
+
/**
|
|
36
|
+
* Number of rows. Defaults to 3
|
|
37
|
+
*/
|
|
38
|
+
rows?: number;
|
|
39
|
+
}
|
|
40
|
+
export declare const MultilineInput: import("react").ForwardRefExoticComponent<MultilineInputProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./MultilineInput";
|
|
@@ -26,7 +26,7 @@ export declare const useStepperInput: (props: StepperInputProps, inputRef: Mutab
|
|
|
26
26
|
tabIndex: number;
|
|
27
27
|
'aria-activedescendant'?: string | undefined;
|
|
28
28
|
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
29
|
-
'aria-autocomplete'?: "list" | "none" | "
|
|
29
|
+
'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
|
|
30
30
|
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
31
31
|
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
32
32
|
'aria-colcount'?: number | undefined;
|
|
@@ -37,7 +37,7 @@ export declare const useStepperInput: (props: StepperInputProps, inputRef: Mutab
|
|
|
37
37
|
'aria-describedby'?: string | undefined;
|
|
38
38
|
'aria-details'?: string | undefined;
|
|
39
39
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
40
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
40
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
41
41
|
'aria-errormessage'?: string | undefined;
|
|
42
42
|
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
43
43
|
'aria-flowto'?: string | undefined;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import { ValidationStatus } from "@salt-ds/core";
|
|
3
|
+
export interface ToastProps extends ComponentPropsWithoutRef<"div"> {
|
|
4
|
+
/**
|
|
5
|
+
* A string to determine the current state of the Toast.
|
|
6
|
+
*/
|
|
7
|
+
status?: ValidationStatus;
|
|
8
|
+
}
|
|
9
|
+
export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.13",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "dist-cjs/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"module": "dist-es/index.js",
|
|
22
22
|
"typings": "dist-types/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@salt-ds/core": "^1.8.0-rc.
|
|
25
|
-
"clsx": "^
|
|
24
|
+
"@salt-ds/core": "^1.8.0-rc.4",
|
|
25
|
+
"clsx": "^2.0.0",
|
|
26
26
|
"react-window": "^1.8.6",
|
|
27
27
|
"compute-scroll-into-view": "^3.0.0",
|
|
28
28
|
"@floating-ui/react": "^0.23.0",
|
|
29
29
|
"@salt-ds/window": "^0.1.0",
|
|
30
30
|
"@salt-ds/styles": "^0.1.0",
|
|
31
|
-
"@salt-ds/icons": "^1.
|
|
31
|
+
"@salt-ds/icons": "^1.5.0",
|
|
32
32
|
"@internationalized/date": "^3.0.0",
|
|
33
33
|
"tinycolor2": "^1.4.2",
|
|
34
34
|
"react-color": "^2.19.3",
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltAccordion {\n --accordion-borderStyle: var(--saltAccordion-borderStyle, none);\n --accordion-borderColor: var(--saltAccordion-borderColor, transparent);\n --accordion-borderWidth: var(--saltAccordion-borderWidth, 0);\n --accordion-borderRadius: var(--saltAccordion-borderRadius, 0);\n --accordion-padding: var(--saltAccordion-padding, 0);\n --accordion-margin: var(--saltAccordion-margin, 0);\n}\n\n.saltAccordion {\n border-style: var(--accordion-borderStyle);\n border-color: var(--accordion-borderColor);\n border-width: var(--accordion-borderWidth);\n padding: var(--accordion-padding);\n margin: var(--accordion-margin);\n border-radius: var(--accordion-borderRadius);\n}\n\n.salt-density-high {\n --accordion-summary-paddingLeft: 20px;\n --accordion-details-padding: 3px 4px 5px 20px;\n}\n\n.salt-density-medium {\n --accordion-summary-paddingLeft: 28px;\n --accordion-details-padding: 8px 8px 9px 28px;\n}\n\n.salt-density-low {\n --accordion-summary-paddingLeft: 36px;\n --accordion-details-padding: 12px 12px 13px 38px;\n}\n\n.salt-density-touch {\n --accordion-summary-paddingLeft: 44px;\n --accordion-details-padding: 18px 16px 17px 44px;\n}\n\n.saltAccordionSection {\n --accordion-summary-height: var(--saltAccordion-summary-height, var(--salt-size-stackable));\n --accordion-summary-fontWeight: var(--saltAccordion-summary-fontWeight, initial);\n\n --accordion-summary-background: var(--saltAccordion-summary-background, var(--salt-container-primary-background));\n --accordion-summary-background-active: var(--saltAccordion-summary-background-active, var(--salt-container-primary-background));\n --accordion-summary-background-disabled: var(--saltAccordion-summary-background-disabled, var(--salt-container-primary-background));\n --accordion-summary-background-hover: var(--saltAccordion-summary-background-hover, var(--salt-actionable-primary-background-hover));\n\n --accordion-summary-text-color: var(--saltAccordion-summary-text-color, var(--salt-text-primary-foreground));\n --accordion-summary-text-color-active: var(--saltAccordion-summary-text-color-active, var(--salt-text-primary-foreground));\n --accordion-summary-text-color-disabled: var(--saltAccordion-summary-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n --accordion-summary-text-color-hover: var(--saltAccordion-summary-text-color-hover, var(--salt-text-primary-foreground));\n\n --accordion-summary-icon-transition-default: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n --accordion-summary-icon-transform: var(--saltAccordion-summary-icon-expand-transform, rotate(90deg));\n --accordion-summary-icon-transition: var(--saltAccordion-summary-icon-transition, var(--accordion-summary-icon-transition-default));\n}\n\n.saltAccordionSection {\n border-color: var(--saltAccordion-section-borderColor, var(--salt-separable-secondary-borderColor));\n border-style: var(--saltAccordion-section-borderStyle, var(--salt-container-borderStyle));\n border-width: var(--saltAccordion-section-borderWidth, 0 0 1px 0);\n margin: var(--saltAccordion-section-margin, 0);\n position: relative;\n}\n\n.saltAccordionSection:focus-within {\n z-index: var(--salt-zIndex-default);\n}\n\n.saltAccordionSection-expanded {\n}\n\n.saltAccordionSection-disabled {\n}\n\n.saltAccordionSummary {\n height: var(--accordion-summary-height);\n line-height: var(--accordion-summary-height);\n font-weight: var(--accordion-summary-fontWeight);\n background: var(--accordion-summary-background);\n color: var(--accordion-summary-text-color);\n font-size: var(--saltAccordion-summary-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltAccordion-summary-fontFamily, var(--salt-text-fontFamily));\n display: flex;\n align-items: center;\n}\n\n.saltAccordionSummary:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltAccordionSummary:hover {\n background: var(--accordion-summary-background-hover);\n color: var(--accordion-summary-text-color-hover);\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltAccordionSummary-expanded {\n background: var(--accordion-summary-background-active);\n color: var(--accordion-summary-text-color-active);\n}\n\n.saltAccordionSummary-disabled,\n.saltAccordionSummary.saltAccordionSummary-disabled:hover {\n background: var(--accordion-summary-background-disabled);\n color: var(--accordion-summary-text-color-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltAccordionSummary-icon {\n width: var(--accordion-summary-paddingLeft);\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n transition: var(--accordion-summary-icon-transition);\n}\n\n.saltAccordionSummary-expanded .saltAccordionSummary-icon {\n transform: var(--accordion-summary-icon-transform);\n}\n\n.saltAccordionDetails {\n transition: height 150ms cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.saltAccordionDetails-content {\n padding: var(--saltAccordion-details-padding, var(--accordion-details-padding));\n}\n\n.saltAccordionDetails-disabled {\n}\n\n.saltAccordionDetails-dummy {\n position: fixed;\n top: -10000px;\n left: 0;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=Accordion.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,137 +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
|
-
function sliceToSize(items, size) {
|
|
16
|
-
if (size !== void 0) {
|
|
17
|
-
const cutOffCount = items ? items.length - size : 0;
|
|
18
|
-
if (cutOffCount > 0) {
|
|
19
|
-
items = items.slice(cutOffCount);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
return items;
|
|
23
|
-
}
|
|
24
|
-
const Accordion = React.forwardRef(
|
|
25
|
-
function Accordion2({
|
|
26
|
-
disabled = false,
|
|
27
|
-
expandedSectionIds: expandedSectionIdsProp,
|
|
28
|
-
defaultExpandedSectionIds = [],
|
|
29
|
-
maxExpandedItems,
|
|
30
|
-
onChange: onChangeProp,
|
|
31
|
-
className,
|
|
32
|
-
children,
|
|
33
|
-
...restProps
|
|
34
|
-
}, ref) {
|
|
35
|
-
const targetWindow = window.useWindow();
|
|
36
|
-
styles.useComponentCssInjection({
|
|
37
|
-
testId: "salt-accordion",
|
|
38
|
-
css: Accordion$1,
|
|
39
|
-
window: targetWindow
|
|
40
|
-
});
|
|
41
|
-
const [sectionIds, setSectionIds] = React.useState(/* @__PURE__ */ new Set());
|
|
42
|
-
const [expandedSectionIds, setExpandedSectionIds] = core.useControlled(
|
|
43
|
-
{
|
|
44
|
-
controlled: expandedSectionIdsProp,
|
|
45
|
-
default: defaultExpandedSectionIds,
|
|
46
|
-
name: "Accordion",
|
|
47
|
-
state: "ExpandedSectionIds"
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
const registerSection = React.useCallback(
|
|
51
|
-
(sectionId, isExpanded2) => {
|
|
52
|
-
setSectionIds((sectionIds2) => {
|
|
53
|
-
const newSectionIds = new Set(sectionIds2);
|
|
54
|
-
newSectionIds.add(sectionId);
|
|
55
|
-
return newSectionIds;
|
|
56
|
-
});
|
|
57
|
-
if (isExpanded2) {
|
|
58
|
-
setExpandedSectionIds((oldExpandedSectionIds) => {
|
|
59
|
-
const newExpandedSectionIds = [...oldExpandedSectionIds];
|
|
60
|
-
newExpandedSectionIds.push(sectionId);
|
|
61
|
-
return newExpandedSectionIds;
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
[]
|
|
66
|
-
);
|
|
67
|
-
const unregisterSection = React.useCallback((sectionId) => {
|
|
68
|
-
if (expandedSectionIds.includes(sectionId)) {
|
|
69
|
-
setExpandedSectionIds(
|
|
70
|
-
(oldValue) => oldValue.filter((id) => id !== sectionId)
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
setSectionIds((sectionIds2) => {
|
|
74
|
-
const newSectionIds = new Set(sectionIds2);
|
|
75
|
-
newSectionIds.delete(sectionId);
|
|
76
|
-
return newSectionIds;
|
|
77
|
-
});
|
|
78
|
-
}, []);
|
|
79
|
-
React.useEffect(() => {
|
|
80
|
-
if (expandedSectionIds && maxExpandedItems !== void 0 && expandedSectionIds.length > maxExpandedItems) {
|
|
81
|
-
const newExpandedSectionIds = sliceToSize(
|
|
82
|
-
expandedSectionIds,
|
|
83
|
-
maxExpandedItems
|
|
84
|
-
);
|
|
85
|
-
setExpandedSectionIds(newExpandedSectionIds || []);
|
|
86
|
-
if (onChangeProp) {
|
|
87
|
-
onChangeProp(newExpandedSectionIds || null);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}, [maxExpandedItems]);
|
|
91
|
-
const onChange = React.useCallback(
|
|
92
|
-
(sectionId, isExpanded2) => {
|
|
93
|
-
let newExpandedSectionIds = [...expandedSectionIds];
|
|
94
|
-
if (isExpanded2) {
|
|
95
|
-
newExpandedSectionIds.push(sectionId);
|
|
96
|
-
if (maxExpandedItems != null && newExpandedSectionIds.length > maxExpandedItems) {
|
|
97
|
-
newExpandedSectionIds.shift();
|
|
98
|
-
}
|
|
99
|
-
} else {
|
|
100
|
-
newExpandedSectionIds = newExpandedSectionIds.filter(
|
|
101
|
-
(id) => id !== sectionId
|
|
102
|
-
);
|
|
103
|
-
}
|
|
104
|
-
setExpandedSectionIds(newExpandedSectionIds);
|
|
105
|
-
if (onChangeProp) {
|
|
106
|
-
onChangeProp(newExpandedSectionIds);
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
[expandedSectionIds, onChangeProp]
|
|
110
|
-
);
|
|
111
|
-
const isExpanded = React.useCallback(
|
|
112
|
-
(sectionId) => expandedSectionIds.includes(sectionId),
|
|
113
|
-
[expandedSectionIds]
|
|
114
|
-
);
|
|
115
|
-
const contextValue = React.useMemo(() => {
|
|
116
|
-
return {
|
|
117
|
-
registerSection,
|
|
118
|
-
unregisterSection,
|
|
119
|
-
onChange,
|
|
120
|
-
isExpanded,
|
|
121
|
-
disabled
|
|
122
|
-
};
|
|
123
|
-
}, [registerSection, unregisterSection, onChange, isExpanded, disabled]);
|
|
124
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
125
|
-
className: clsx.clsx(withBaseName(), className),
|
|
126
|
-
...restProps,
|
|
127
|
-
ref,
|
|
128
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.AccordionContext.Provider, {
|
|
129
|
-
value: contextValue,
|
|
130
|
-
children
|
|
131
|
-
})
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
exports.Accordion = Accordion;
|
|
137
|
-
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport accordionCss from \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport interface AccordionProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n disabled?: boolean;\n maxExpandedItems?: number;\n expandedSectionIds?: string[];\n defaultExpandedSectionIds?: string[];\n // expandedSectionIds in the order they were expanded.\n // The oldest expanded item is the first in this list.\n // When maxExpandedItems is reached, the first item in this list is the first to be collapsed\n onChange?: (expandedSectionIds: string[] | null) => void;\n}\n\nfunction sliceToSize<T>(items?: T[], size?: number) {\n if (size !== undefined) {\n const cutOffCount = items ? items.length - size : 0;\n if (cutOffCount > 0) {\n items = items!.slice(cutOffCount);\n }\n }\n return items;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(\n {\n disabled = false,\n expandedSectionIds: expandedSectionIdsProp,\n defaultExpandedSectionIds = [],\n maxExpandedItems,\n onChange: onChangeProp,\n className,\n children,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [sectionIds, setSectionIds] = useState<Set<string>>(new Set());\n\n const [expandedSectionIds, setExpandedSectionIds] = useControlled<string[]>(\n {\n controlled: expandedSectionIdsProp,\n default: defaultExpandedSectionIds,\n name: \"Accordion\",\n state: \"ExpandedSectionIds\",\n }\n );\n\n const registerSection = useCallback(\n (sectionId: string, isExpanded: boolean) => {\n setSectionIds((sectionIds) => {\n const newSectionIds = new Set(sectionIds);\n newSectionIds.add(sectionId);\n return newSectionIds;\n });\n if (isExpanded) {\n setExpandedSectionIds((oldExpandedSectionIds) => {\n const newExpandedSectionIds = [...oldExpandedSectionIds];\n newExpandedSectionIds.push(sectionId);\n return newExpandedSectionIds;\n });\n }\n },\n []\n );\n\n const unregisterSection = useCallback((sectionId: string) => {\n if (expandedSectionIds.includes(sectionId)) {\n setExpandedSectionIds((oldValue) =>\n oldValue.filter((id) => id !== sectionId)\n );\n }\n setSectionIds((sectionIds) => {\n const newSectionIds = new Set(sectionIds);\n newSectionIds.delete(sectionId);\n return newSectionIds;\n });\n }, []);\n\n useEffect(() => {\n if (\n expandedSectionIds &&\n maxExpandedItems !== undefined &&\n expandedSectionIds.length > maxExpandedItems\n ) {\n const newExpandedSectionIds = sliceToSize(\n expandedSectionIds,\n maxExpandedItems\n );\n setExpandedSectionIds(newExpandedSectionIds || []);\n if (onChangeProp) {\n onChangeProp(newExpandedSectionIds || null);\n }\n }\n }, [maxExpandedItems]);\n\n const onChange = useCallback(\n (sectionId: string, isExpanded: boolean) => {\n let newExpandedSectionIds = [...expandedSectionIds];\n if (isExpanded) {\n newExpandedSectionIds.push(sectionId);\n if (\n maxExpandedItems != null &&\n newExpandedSectionIds.length > maxExpandedItems\n ) {\n newExpandedSectionIds.shift();\n }\n } else {\n newExpandedSectionIds = newExpandedSectionIds.filter(\n (id) => id !== sectionId\n );\n }\n setExpandedSectionIds(newExpandedSectionIds);\n if (onChangeProp) {\n onChangeProp(newExpandedSectionIds);\n }\n },\n [expandedSectionIds, onChangeProp]\n );\n\n const isExpanded = useCallback(\n (sectionId: string) => expandedSectionIds.includes(sectionId),\n [expandedSectionIds]\n );\n\n const contextValue: AccordionContext = useMemo(() => {\n return {\n registerSection,\n unregisterSection,\n onChange,\n isExpanded,\n disabled,\n };\n }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useWindow","useComponentCssInjection","accordionCss","useState","useControlled","useCallback","isExpanded","sectionIds","useEffect","useMemo","jsx","clsx","AccordionContext"],"mappings":"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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var utils = require('./utils.js');
|
|
7
|
-
|
|
8
|
-
const AccordionContext = React.createContext(
|
|
9
|
-
void 0
|
|
10
|
-
);
|
|
11
|
-
const useAccordionContext = () => {
|
|
12
|
-
const context = React.useContext(AccordionContext);
|
|
13
|
-
if (utils.isNotProduction() && !context) {
|
|
14
|
-
console.error("useAccordionContext should be used inside of Accordion");
|
|
15
|
-
}
|
|
16
|
-
return context;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
exports.AccordionContext = AccordionContext;
|
|
20
|
-
exports.useAccordionContext = useAccordionContext;
|
|
21
|
-
//# sourceMappingURL=AccordionContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { isNotProduction } from \"./utils\";\n\nexport interface AccordionContext {\n isExpanded: (id: string) => boolean;\n disabled: boolean;\n registerSection: (id: string, isExpanded: boolean) => void;\n unregisterSection: (id: string) => void;\n onChange: (id: string, isExpanded: boolean) => void;\n}\n\nexport const AccordionContext = createContext<AccordionContext | undefined>(\n undefined\n);\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext);\n if (isNotProduction() && !context) {\n console.error(\"useAccordionContext should be used inside of Accordion\");\n }\n return context!;\n};\n"],"names":["createContext","useContext","isNotProduction"],"mappings":";;;;;;;AAWO,MAAM,gBAAmB,GAAAA,mBAAA;AAAA,EAC9B,KAAA,CAAA;AACF,EAAA;AAEO,MAAM,sBAAsB,MAAM;AACvC,EAAM,MAAA,OAAA,GAAUC,iBAAW,gBAAgB,CAAA,CAAA;AAC3C,EAAI,IAAAC,qBAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAA,OAAA,CAAQ,MAAM,wDAAwD,CAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
|
|
@@ -1,87 +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 AccordionSectionContext = require('./AccordionSectionContext.js');
|
|
10
|
-
var Accordion = require('./Accordion.css.js');
|
|
11
|
-
var window = require('@salt-ds/window');
|
|
12
|
-
var styles = require('@salt-ds/styles');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltAccordionDetails");
|
|
15
|
-
const msCollapseAnimationDuration = 150;
|
|
16
|
-
const AccordionDetails = React.forwardRef(function AccordionDetails2({ children, className, preventUnmountOnCollapse, ...restProps }, ref) {
|
|
17
|
-
const targetWindow = window.useWindow();
|
|
18
|
-
styles.useComponentCssInjection({
|
|
19
|
-
testId: "salt-accordion",
|
|
20
|
-
css: Accordion,
|
|
21
|
-
window: targetWindow
|
|
22
|
-
});
|
|
23
|
-
const { isDisabled, isExpanded } = AccordionSectionContext.useAccordionSectionContext();
|
|
24
|
-
const rootRef = React.useRef(null);
|
|
25
|
-
const contentRef = React.useRef(null);
|
|
26
|
-
const forkedRef = core.useForkRef(ref, rootRef);
|
|
27
|
-
const [state, setState] = React.useState(
|
|
28
|
-
isExpanded ? "expanded" : "collapsed"
|
|
29
|
-
);
|
|
30
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
31
|
-
if (!rootRef.current) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
if (isExpanded) {
|
|
35
|
-
if (state === "collapsed") {
|
|
36
|
-
setState("measuring");
|
|
37
|
-
} else if (state === "measuring") {
|
|
38
|
-
rootRef.current.style.height = `${contentRef.current.getBoundingClientRect().height}px`;
|
|
39
|
-
setState("expanding");
|
|
40
|
-
} else if (state === "expanding") {
|
|
41
|
-
setTimeout(() => {
|
|
42
|
-
setState("expanded");
|
|
43
|
-
}, msCollapseAnimationDuration);
|
|
44
|
-
} else if (state === "expanded") {
|
|
45
|
-
rootRef.current.style.height = "auto";
|
|
46
|
-
}
|
|
47
|
-
} else {
|
|
48
|
-
if (state === "expanded") {
|
|
49
|
-
rootRef.current.style.height = `${rootRef.current.getBoundingClientRect().height}px`;
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
setState("collapsing");
|
|
52
|
-
}, 0);
|
|
53
|
-
} else if (state === "collapsing") {
|
|
54
|
-
rootRef.current.style.height = "0";
|
|
55
|
-
setTimeout(() => {
|
|
56
|
-
setState("collapsed");
|
|
57
|
-
}, msCollapseAnimationDuration);
|
|
58
|
-
} else if (state === "collapsed") {
|
|
59
|
-
rootRef.current.style.height = "0";
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}, [isExpanded, state]);
|
|
63
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
64
|
-
...restProps,
|
|
65
|
-
ref: forkedRef,
|
|
66
|
-
className: clsx.clsx(
|
|
67
|
-
withBaseName(),
|
|
68
|
-
{
|
|
69
|
-
[withBaseName("disabled")]: isDisabled
|
|
70
|
-
},
|
|
71
|
-
className
|
|
72
|
-
),
|
|
73
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
74
|
-
ref: contentRef,
|
|
75
|
-
className: clsx.clsx({
|
|
76
|
-
[withBaseName("dummy")]: state === "measuring"
|
|
77
|
-
}),
|
|
78
|
-
children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
79
|
-
className: withBaseName("content"),
|
|
80
|
-
children
|
|
81
|
-
}) : null
|
|
82
|
-
})
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
exports.AccordionDetails = AccordionDetails;
|
|
87
|
-
//# sourceMappingURL=AccordionDetails.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport accordionCss from \"./Accordion.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Render children even if the component is collapsed. Prevents unmounting of children components.\n * */\n preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n// the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n// the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n// (auto has to be replaced by a number, then the component has to be rendered, then the value can\n// be set to 0)\ntype State =\n | \"collapsed\"\n | \"measuring\"\n | \"expanding\"\n | \"expanded\"\n | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n HTMLDivElement,\n AccordionDetailsProps\n>(function AccordionDetails(\n { children, className, preventUnmountOnCollapse, ...restProps },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const { isDisabled, isExpanded } = useAccordionSectionContext();\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef(ref, rootRef);\n\n const [state, setState] = useState<State>(\n isExpanded ? \"expanded\" : \"collapsed\"\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n if (isExpanded) {\n if (state === \"collapsed\") {\n setState(\"measuring\");\n } else if (state === \"measuring\") {\n rootRef.current.style.height = `${\n contentRef.current!.getBoundingClientRect().height\n }px`;\n setState(\"expanding\");\n } else if (state === \"expanding\") {\n setTimeout(() => {\n setState(\"expanded\");\n }, msCollapseAnimationDuration);\n } else if (state === \"expanded\") {\n rootRef.current.style.height = \"auto\";\n }\n } else {\n if (state === \"expanded\") {\n rootRef.current.style.height = `${\n rootRef.current.getBoundingClientRect().height\n }px`;\n setTimeout(() => {\n setState(\"collapsing\");\n }, 0);\n } else if (state === \"collapsing\") {\n rootRef.current.style.height = \"0\";\n setTimeout(() => {\n setState(\"collapsed\");\n }, msCollapseAnimationDuration);\n } else if (state === \"collapsed\") {\n rootRef.current.style.height = \"0\";\n }\n }\n }, [isExpanded, state]);\n\n return (\n <div\n {...restProps}\n ref={forkedRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n },\n className\n )}\n >\n <div\n ref={contentRef}\n className={clsx({\n [withBaseName(\"dummy\")]: state === \"measuring\",\n })}\n >\n {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n <div className={withBaseName(\"content\")}>{children}</div>\n ) : null}\n </div>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","AccordionDetails","useWindow","useComponentCssInjection","accordionCss","useAccordionSectionContext","useRef","useForkRef","useState","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":"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"}
|