@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.
Files changed (119) hide show
  1. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  2. package/dist-cjs/index.js +6 -17
  3. package/dist-cjs/index.js.map +1 -1
  4. package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
  5. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  6. package/dist-cjs/multiline-input/MultilineInput.css.js +6 -0
  7. package/dist-cjs/multiline-input/MultilineInput.css.js.map +1 -0
  8. package/dist-cjs/multiline-input/MultilineInput.js +150 -0
  9. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -0
  10. package/dist-cjs/pill/Pill.css.js +1 -1
  11. package/dist-cjs/query-input/internal/QueryInputBody.js +3 -6
  12. package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
  13. package/dist-cjs/toast/Toast.css.js +6 -0
  14. package/dist-cjs/toast/Toast.css.js.map +1 -0
  15. package/dist-cjs/toast/Toast.js +38 -0
  16. package/dist-cjs/toast/Toast.js.map +1 -0
  17. package/dist-cjs/toast/ToastContent.css.js +6 -0
  18. package/dist-cjs/toast/ToastContent.css.js.map +1 -0
  19. package/dist-cjs/toast/ToastContent.js +30 -0
  20. package/dist-cjs/toast/ToastContent.js.map +1 -0
  21. package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
  22. package/dist-cjs/toolbar/ToolbarButton.css.js +1 -1
  23. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  24. package/dist-es/index.js +3 -8
  25. package/dist-es/index.js.map +1 -1
  26. package/dist-es/list-deprecated/ListItem.css.js +1 -1
  27. package/dist-es/list-next/ListItemNext.css.js +1 -1
  28. package/dist-es/multiline-input/MultilineInput.css.js +4 -0
  29. package/dist-es/multiline-input/MultilineInput.css.js.map +1 -0
  30. package/dist-es/multiline-input/MultilineInput.js +146 -0
  31. package/dist-es/multiline-input/MultilineInput.js.map +1 -0
  32. package/dist-es/pill/Pill.css.js +1 -1
  33. package/dist-es/query-input/internal/QueryInputBody.js +1 -4
  34. package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
  35. package/dist-es/toast/Toast.css.js +4 -0
  36. package/dist-es/toast/Toast.css.js.map +1 -0
  37. package/dist-es/toast/Toast.js +34 -0
  38. package/dist-es/toast/Toast.js.map +1 -0
  39. package/dist-es/toast/ToastContent.css.js +4 -0
  40. package/dist-es/toast/ToastContent.css.js.map +1 -0
  41. package/dist-es/toast/ToastContent.js +26 -0
  42. package/dist-es/toast/ToastContent.js.map +1 -0
  43. package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
  44. package/dist-es/toolbar/ToolbarButton.css.js +1 -1
  45. package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +2 -2
  46. package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +7 -7
  47. package/dist-types/index.d.ts +2 -3
  48. package/dist-types/multiline-input/MultilineInput.d.ts +40 -0
  49. package/dist-types/multiline-input/index.d.ts +1 -0
  50. package/dist-types/stepper-input/useStepperInput.d.ts +2 -2
  51. package/dist-types/toast/Toast.d.ts +9 -0
  52. package/dist-types/toast/ToastContent.d.ts +2 -0
  53. package/dist-types/toast/index.d.ts +2 -0
  54. package/package.json +4 -4
  55. package/dist-cjs/accordion/Accordion.css.js +0 -6
  56. package/dist-cjs/accordion/Accordion.css.js.map +0 -1
  57. package/dist-cjs/accordion/Accordion.js +0 -137
  58. package/dist-cjs/accordion/Accordion.js.map +0 -1
  59. package/dist-cjs/accordion/AccordionContext.js +0 -21
  60. package/dist-cjs/accordion/AccordionContext.js.map +0 -1
  61. package/dist-cjs/accordion/AccordionDetails.js +0 -87
  62. package/dist-cjs/accordion/AccordionDetails.js.map +0 -1
  63. package/dist-cjs/accordion/AccordionSection.js +0 -111
  64. package/dist-cjs/accordion/AccordionSection.js.map +0 -1
  65. package/dist-cjs/accordion/AccordionSectionContext.js +0 -24
  66. package/dist-cjs/accordion/AccordionSectionContext.js.map +0 -1
  67. package/dist-cjs/accordion/AccordionSummary.js +0 -64
  68. package/dist-cjs/accordion/AccordionSummary.js.map +0 -1
  69. package/dist-cjs/accordion/utils.js +0 -8
  70. package/dist-cjs/accordion/utils.js.map +0 -1
  71. package/dist-cjs/toggle-button/ToggleButton.css.js +0 -6
  72. package/dist-cjs/toggle-button/ToggleButton.css.js.map +0 -1
  73. package/dist-cjs/toggle-button/ToggleButton.js +0 -75
  74. package/dist-cjs/toggle-button/ToggleButton.js.map +0 -1
  75. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +0 -6
  76. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js.map +0 -1
  77. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +0 -111
  78. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +0 -1
  79. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +0 -15
  80. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +0 -1
  81. package/dist-es/accordion/Accordion.css.js +0 -4
  82. package/dist-es/accordion/Accordion.css.js.map +0 -1
  83. package/dist-es/accordion/Accordion.js +0 -133
  84. package/dist-es/accordion/Accordion.js.map +0 -1
  85. package/dist-es/accordion/AccordionContext.js +0 -16
  86. package/dist-es/accordion/AccordionContext.js.map +0 -1
  87. package/dist-es/accordion/AccordionDetails.js +0 -83
  88. package/dist-es/accordion/AccordionDetails.js.map +0 -1
  89. package/dist-es/accordion/AccordionSection.js +0 -107
  90. package/dist-es/accordion/AccordionSection.js.map +0 -1
  91. package/dist-es/accordion/AccordionSectionContext.js +0 -19
  92. package/dist-es/accordion/AccordionSectionContext.js.map +0 -1
  93. package/dist-es/accordion/AccordionSummary.js +0 -60
  94. package/dist-es/accordion/AccordionSummary.js.map +0 -1
  95. package/dist-es/accordion/utils.js +0 -4
  96. package/dist-es/accordion/utils.js.map +0 -1
  97. package/dist-es/toggle-button/ToggleButton.css.js +0 -4
  98. package/dist-es/toggle-button/ToggleButton.css.js.map +0 -1
  99. package/dist-es/toggle-button/ToggleButton.js +0 -71
  100. package/dist-es/toggle-button/ToggleButton.js.map +0 -1
  101. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +0 -4
  102. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js.map +0 -1
  103. package/dist-es/toggle-button-group/ToggleButtonGroup.js +0 -107
  104. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +0 -1
  105. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +0 -10
  106. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +0 -1
  107. package/dist-types/accordion/Accordion.d.ts +0 -9
  108. package/dist-types/accordion/AccordionContext.d.ts +0 -10
  109. package/dist-types/accordion/AccordionDetails.d.ts +0 -8
  110. package/dist-types/accordion/AccordionSection.d.ts +0 -9
  111. package/dist-types/accordion/AccordionSectionContext.d.ts +0 -8
  112. package/dist-types/accordion/AccordionSummary.d.ts +0 -5
  113. package/dist-types/accordion/index.d.ts +0 -5
  114. package/dist-types/accordion/utils.d.ts +0 -1
  115. package/dist-types/toggle-button/ToggleButton.d.ts +0 -7
  116. package/dist-types/toggle-button/index.d.ts +0 -1
  117. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +0 -25
  118. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +0 -10
  119. 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" | "inline" | "both" | undefined;
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" | "execute" | "move" | "popup" | undefined;
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" | "inline" | "both" | undefined;
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" | "execute" | "move" | "popup" | undefined;
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" | "inline" | "both" | undefined;
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" | "execute" | "move" | "popup" | undefined;
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" | "inline" | "both" | undefined;
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" | "execute" | "move" | "popup" | undefined;
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;
@@ -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" | "inline" | "both" | undefined;
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" | "execute" | "move" | "popup" | undefined;
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>>;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const ToastContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,2 @@
1
+ export * from "./Toast";
2
+ export * from "./ToastContent";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/lab",
3
- "version": "1.0.0-alpha.11",
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.2",
25
- "clsx": "^1.2.1",
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.4.0",
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":";;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAcjD,SAAS,WAAA,CAAe,OAAa,IAAe,EAAA;AAClD,EAAA,IAAI,SAAS,KAAW,CAAA,EAAA;AACtB,IAAA,MAAM,WAAc,GAAA,KAAA,GAAQ,KAAM,CAAA,MAAA,GAAS,IAAO,GAAA,CAAA,CAAA;AAClD,IAAA,IAAI,cAAc,CAAG,EAAA;AACnB,MAAQ,KAAA,GAAA,KAAA,CAAO,MAAM,WAAW,CAAA,CAAA;AAAA,KAClC;AAAA,GACF;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAEO,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,kBAAoB,EAAA,sBAAA;AAAA,IACpB,4BAA4B,EAAC;AAAA,IAC7B,gBAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,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,UAAY,EAAA,aAAa,IAAIC,cAAsB,iBAAA,IAAI,KAAK,CAAA,CAAA;AAEnE,IAAM,MAAA,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAAC,kBAAA;AAAA,MAClD;AAAA,QACE,UAAY,EAAA,sBAAA;AAAA,QACZ,OAAS,EAAA,yBAAA;AAAA,QACT,IAAM,EAAA,WAAA;AAAA,QACN,KAAO,EAAA,oBAAA;AAAA,OACT;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,MACtB,CAAC,WAAmBC,WAAwB,KAAA;AAC1C,QAAA,aAAA,CAAc,CAACC,WAAe,KAAA;AAC5B,UAAM,MAAA,aAAA,GAAgB,IAAI,GAAA,CAAIA,WAAU,CAAA,CAAA;AACxC,UAAA,aAAA,CAAc,IAAI,SAAS,CAAA,CAAA;AAC3B,UAAO,OAAA,aAAA,CAAA;AAAA,SACR,CAAA,CAAA;AACD,QAAA,IAAID,WAAY,EAAA;AACd,UAAA,qBAAA,CAAsB,CAAC,qBAA0B,KAAA;AAC/C,YAAM,MAAA,qBAAA,GAAwB,CAAC,GAAG,qBAAqB,CAAA,CAAA;AACvD,YAAA,qBAAA,CAAsB,KAAK,SAAS,CAAA,CAAA;AACpC,YAAO,OAAA,qBAAA,CAAA;AAAA,WACR,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,iBAAA,GAAoBD,iBAAY,CAAA,CAAC,SAAsB,KAAA;AAC3D,MAAI,IAAA,kBAAA,CAAmB,QAAS,CAAA,SAAS,CAAG,EAAA;AAC1C,QAAA,qBAAA;AAAA,UAAsB,CAAC,QACrB,KAAA,QAAA,CAAS,OAAO,CAAC,EAAA,KAAO,OAAO,SAAS,CAAA;AAAA,SAC1C,CAAA;AAAA,OACF;AACA,MAAA,aAAA,CAAc,CAACE,WAAe,KAAA;AAC5B,QAAM,MAAA,aAAA,GAAgB,IAAI,GAAA,CAAIA,WAAU,CAAA,CAAA;AACxC,QAAA,aAAA,CAAc,OAAO,SAAS,CAAA,CAAA;AAC9B,QAAO,OAAA,aAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,EAAG,EAAE,CAAA,CAAA;AAEL,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IACE,kBACA,IAAA,gBAAA,KAAqB,KACrB,CAAA,IAAA,kBAAA,CAAmB,SAAS,gBAC5B,EAAA;AACA,QAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,UAC5B,kBAAA;AAAA,UACA,gBAAA;AAAA,SACF,CAAA;AACA,QAAsB,qBAAA,CAAA,qBAAA,IAAyB,EAAE,CAAA,CAAA;AACjD,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,YAAA,CAAa,yBAAyB,IAAI,CAAA,CAAA;AAAA,SAC5C;AAAA,OACF;AAAA,KACF,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,IAAA,MAAM,QAAW,GAAAH,iBAAA;AAAA,MACf,CAAC,WAAmBC,WAAwB,KAAA;AAC1C,QAAI,IAAA,qBAAA,GAAwB,CAAC,GAAG,kBAAkB,CAAA,CAAA;AAClD,QAAA,IAAIA,WAAY,EAAA;AACd,UAAA,qBAAA,CAAsB,KAAK,SAAS,CAAA,CAAA;AACpC,UAAA,IACE,gBAAoB,IAAA,IAAA,IACpB,qBAAsB,CAAA,MAAA,GAAS,gBAC/B,EAAA;AACA,YAAA,qBAAA,CAAsB,KAAM,EAAA,CAAA;AAAA,WAC9B;AAAA,SACK,MAAA;AACL,UAAA,qBAAA,GAAwB,qBAAsB,CAAA,MAAA;AAAA,YAC5C,CAAC,OAAO,EAAO,KAAA,SAAA;AAAA,WACjB,CAAA;AAAA,SACF;AACA,QAAA,qBAAA,CAAsB,qBAAqB,CAAA,CAAA;AAC3C,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,YAAA,CAAa,qBAAqB,CAAA,CAAA;AAAA,SACpC;AAAA,OACF;AAAA,MACA,CAAC,oBAAoB,YAAY,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,MAAM,UAAa,GAAAD,iBAAA;AAAA,MACjB,CAAC,SAAA,KAAsB,kBAAmB,CAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MAC5D,CAAC,kBAAkB,CAAA;AAAA,KACrB,CAAA;AAEA,IAAM,MAAA,YAAA,GAAiCI,cAAQ,MAAM;AACnD,MAAO,OAAA;AAAA,QACL,eAAA;AAAA,QACA,iBAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,OACF,CAAA;AAAA,OACC,CAAC,eAAA,EAAiB,mBAAmB,QAAU,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA,CAAA;AAEvE,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,kBAAAD,cAAA,CAACE,kCAAiB,QAAjB,EAAA;AAAA,QAA0B,KAAO,EAAA,YAAA;AAAA,QAC/B,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -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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"}