@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,133 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useState, useCallback, useEffect, useMemo } from 'react';
3
- import { makePrefixer, 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
- function sliceToSize(items, size) {
12
- if (size !== void 0) {
13
- const cutOffCount = items ? items.length - size : 0;
14
- if (cutOffCount > 0) {
15
- items = items.slice(cutOffCount);
16
- }
17
- }
18
- return items;
19
- }
20
- const Accordion = forwardRef(
21
- function Accordion2({
22
- disabled = false,
23
- expandedSectionIds: expandedSectionIdsProp,
24
- defaultExpandedSectionIds = [],
25
- maxExpandedItems,
26
- onChange: onChangeProp,
27
- className,
28
- children,
29
- ...restProps
30
- }, ref) {
31
- const targetWindow = useWindow();
32
- useComponentCssInjection({
33
- testId: "salt-accordion",
34
- css: css_248z,
35
- window: targetWindow
36
- });
37
- const [sectionIds, setSectionIds] = useState(/* @__PURE__ */ new Set());
38
- const [expandedSectionIds, setExpandedSectionIds] = useControlled(
39
- {
40
- controlled: expandedSectionIdsProp,
41
- default: defaultExpandedSectionIds,
42
- name: "Accordion",
43
- state: "ExpandedSectionIds"
44
- }
45
- );
46
- const registerSection = useCallback(
47
- (sectionId, isExpanded2) => {
48
- setSectionIds((sectionIds2) => {
49
- const newSectionIds = new Set(sectionIds2);
50
- newSectionIds.add(sectionId);
51
- return newSectionIds;
52
- });
53
- if (isExpanded2) {
54
- setExpandedSectionIds((oldExpandedSectionIds) => {
55
- const newExpandedSectionIds = [...oldExpandedSectionIds];
56
- newExpandedSectionIds.push(sectionId);
57
- return newExpandedSectionIds;
58
- });
59
- }
60
- },
61
- []
62
- );
63
- const unregisterSection = useCallback((sectionId) => {
64
- if (expandedSectionIds.includes(sectionId)) {
65
- setExpandedSectionIds(
66
- (oldValue) => oldValue.filter((id) => id !== sectionId)
67
- );
68
- }
69
- setSectionIds((sectionIds2) => {
70
- const newSectionIds = new Set(sectionIds2);
71
- newSectionIds.delete(sectionId);
72
- return newSectionIds;
73
- });
74
- }, []);
75
- useEffect(() => {
76
- if (expandedSectionIds && maxExpandedItems !== void 0 && expandedSectionIds.length > maxExpandedItems) {
77
- const newExpandedSectionIds = sliceToSize(
78
- expandedSectionIds,
79
- maxExpandedItems
80
- );
81
- setExpandedSectionIds(newExpandedSectionIds || []);
82
- if (onChangeProp) {
83
- onChangeProp(newExpandedSectionIds || null);
84
- }
85
- }
86
- }, [maxExpandedItems]);
87
- const onChange = useCallback(
88
- (sectionId, isExpanded2) => {
89
- let newExpandedSectionIds = [...expandedSectionIds];
90
- if (isExpanded2) {
91
- newExpandedSectionIds.push(sectionId);
92
- if (maxExpandedItems != null && newExpandedSectionIds.length > maxExpandedItems) {
93
- newExpandedSectionIds.shift();
94
- }
95
- } else {
96
- newExpandedSectionIds = newExpandedSectionIds.filter(
97
- (id) => id !== sectionId
98
- );
99
- }
100
- setExpandedSectionIds(newExpandedSectionIds);
101
- if (onChangeProp) {
102
- onChangeProp(newExpandedSectionIds);
103
- }
104
- },
105
- [expandedSectionIds, onChangeProp]
106
- );
107
- const isExpanded = useCallback(
108
- (sectionId) => expandedSectionIds.includes(sectionId),
109
- [expandedSectionIds]
110
- );
111
- const contextValue = useMemo(() => {
112
- return {
113
- registerSection,
114
- unregisterSection,
115
- onChange,
116
- isExpanded,
117
- disabled
118
- };
119
- }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);
120
- return /* @__PURE__ */ jsx("div", {
121
- className: clsx(withBaseName(), className),
122
- ...restProps,
123
- ref,
124
- children: /* @__PURE__ */ jsx(AccordionContext.Provider, {
125
- value: contextValue,
126
- children
127
- })
128
- });
129
- }
130
- );
131
-
132
- export { Accordion };
133
- //# 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":["Accordion","accordionCss","isExpanded","sectionIds"],"mappings":"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"}
@@ -1,16 +0,0 @@
1
- import { createContext, useContext } from 'react';
2
- import { isNotProduction } from './utils.js';
3
-
4
- const AccordionContext = createContext(
5
- void 0
6
- );
7
- const useAccordionContext = () => {
8
- const context = useContext(AccordionContext);
9
- if (isNotProduction() && !context) {
10
- console.error("useAccordionContext should be used inside of Accordion");
11
- }
12
- return context;
13
- };
14
-
15
- export { AccordionContext, useAccordionContext };
16
- //# 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":[],"mappings":";;;AAWO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,KAAA,CAAA;AACF,EAAA;AAEO,MAAM,sBAAsB,MAAM;AACvC,EAAM,MAAA,OAAA,GAAU,WAAW,gBAAgB,CAAA,CAAA;AAC3C,EAAI,IAAA,eAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAA,OAAA,CAAQ,MAAM,wDAAwD,CAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
@@ -1,83 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
3
- import { clsx } from 'clsx';
4
- import { forwardRef, useRef, useState } from 'react';
5
- import { useAccordionSectionContext } from './AccordionSectionContext.js';
6
- import css_248z from './Accordion.css.js';
7
- import { useWindow } from '@salt-ds/window';
8
- import { useComponentCssInjection } from '@salt-ds/styles';
9
-
10
- const withBaseName = makePrefixer("saltAccordionDetails");
11
- const msCollapseAnimationDuration = 150;
12
- const AccordionDetails = forwardRef(function AccordionDetails2({ children, className, preventUnmountOnCollapse, ...restProps }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-accordion",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { isDisabled, isExpanded } = useAccordionSectionContext();
20
- const rootRef = useRef(null);
21
- const contentRef = useRef(null);
22
- const forkedRef = useForkRef(ref, rootRef);
23
- const [state, setState] = useState(
24
- isExpanded ? "expanded" : "collapsed"
25
- );
26
- useIsomorphicLayoutEffect(() => {
27
- if (!rootRef.current) {
28
- return;
29
- }
30
- if (isExpanded) {
31
- if (state === "collapsed") {
32
- setState("measuring");
33
- } else if (state === "measuring") {
34
- rootRef.current.style.height = `${contentRef.current.getBoundingClientRect().height}px`;
35
- setState("expanding");
36
- } else if (state === "expanding") {
37
- setTimeout(() => {
38
- setState("expanded");
39
- }, msCollapseAnimationDuration);
40
- } else if (state === "expanded") {
41
- rootRef.current.style.height = "auto";
42
- }
43
- } else {
44
- if (state === "expanded") {
45
- rootRef.current.style.height = `${rootRef.current.getBoundingClientRect().height}px`;
46
- setTimeout(() => {
47
- setState("collapsing");
48
- }, 0);
49
- } else if (state === "collapsing") {
50
- rootRef.current.style.height = "0";
51
- setTimeout(() => {
52
- setState("collapsed");
53
- }, msCollapseAnimationDuration);
54
- } else if (state === "collapsed") {
55
- rootRef.current.style.height = "0";
56
- }
57
- }
58
- }, [isExpanded, state]);
59
- return /* @__PURE__ */ jsx("div", {
60
- ...restProps,
61
- ref: forkedRef,
62
- className: clsx(
63
- withBaseName(),
64
- {
65
- [withBaseName("disabled")]: isDisabled
66
- },
67
- className
68
- ),
69
- children: /* @__PURE__ */ jsx("div", {
70
- ref: contentRef,
71
- className: clsx({
72
- [withBaseName("dummy")]: state === "measuring"
73
- }),
74
- children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsx("div", {
75
- className: withBaseName("content"),
76
- children
77
- }) : null
78
- })
79
- });
80
- });
81
-
82
- export { AccordionDetails };
83
- //# 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":["AccordionDetails","accordionCss"],"mappings":"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"}
@@ -1,107 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
3
- import { makePrefixer } from '@salt-ds/core';
4
- import '../utils/useFloatingUI.js';
5
- import { useLayoutEffectSkipFirst } from '../utils/useLayoutEffectSkipFirst.js';
6
- import { AccordionSectionContext } from './AccordionSectionContext.js';
7
- import { clsx } from 'clsx';
8
- import { useAccordionContext } from './AccordionContext.js';
9
- import { isNotProduction } from './utils.js';
10
- import { useWindow } from '@salt-ds/window';
11
- import { useComponentCssInjection } from '@salt-ds/styles';
12
- import css_248z from './Accordion.css.js';
13
-
14
- const withBaseName = makePrefixer("saltAccordionSection");
15
- const AccordionSection = forwardRef(function Accordion({
16
- id: idProp,
17
- disabled: disabledProp,
18
- onChange: onChangeProp,
19
- defaultExpanded: defaultExpandedProp,
20
- expanded: expandedProp,
21
- children,
22
- className,
23
- ...restProps
24
- }, ref) {
25
- const targetWindow = useWindow();
26
- useComponentCssInjection({
27
- testId: "salt-accordion",
28
- css: css_248z,
29
- window: targetWindow
30
- });
31
- const [id, setId] = useState(
32
- () => idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`
33
- );
34
- if (idProp != null && idProp != id) {
35
- setId(idProp);
36
- }
37
- const {
38
- registerSection,
39
- unregisterSection,
40
- onChange,
41
- isExpanded,
42
- disabled: accordionDisabled
43
- } = useAccordionContext();
44
- const isControlled = expandedProp != null;
45
- const expanded = isControlled ? expandedProp : isExpanded(id);
46
- const disabled = disabledProp != null ? disabledProp : accordionDisabled;
47
- useEffect(() => {
48
- registerSection(
49
- id,
50
- expandedProp != null ? expandedProp : !!defaultExpandedProp
51
- );
52
- return () => {
53
- unregisterSection(id);
54
- };
55
- }, [id, registerSection, unregisterSection]);
56
- const onToggle = useCallback(() => {
57
- const newExpanded = !expanded;
58
- if (onChangeProp) {
59
- onChangeProp(newExpanded);
60
- }
61
- if (!isControlled) {
62
- onChange(id, newExpanded);
63
- }
64
- }, [id, expanded, onChangeProp, onChange, isControlled]);
65
- useEffect(() => {
66
- const isControlled2 = expandedProp != null;
67
- if (isControlled2) {
68
- onChange(id, expandedProp);
69
- }
70
- }, [expandedProp, isControlled]);
71
- useLayoutEffectSkipFirst(() => {
72
- if (isNotProduction()) {
73
- const mode = (isControlled2) => isControlled2 ? "controlled" : "uncontrolled";
74
- console.error(
75
- `A component is changing from ${mode(!isControlled)} to ${mode(
76
- isControlled
77
- )} mode.`
78
- );
79
- }
80
- }, [isControlled]);
81
- const contextValue = useMemo(() => {
82
- return {
83
- isExpanded: expanded,
84
- isDisabled: disabled,
85
- onToggle
86
- };
87
- }, [expanded, disabled, onToggle]);
88
- return /* @__PURE__ */ jsx("div", {
89
- ...restProps,
90
- className: clsx(
91
- withBaseName(),
92
- {
93
- [withBaseName("expanded")]: expanded,
94
- [withBaseName("disabled")]: disabled
95
- },
96
- className
97
- ),
98
- ref,
99
- children: /* @__PURE__ */ jsx(AccordionSectionContext.Provider, {
100
- value: contextValue,
101
- children
102
- })
103
- });
104
- });
105
-
106
- export { AccordionSection };
107
- //# sourceMappingURL=AccordionSection.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSection.js","sources":["../src/accordion/AccordionSection.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useLayoutEffectSkipFirst } from \"../utils\";\nimport { AccordionSectionContext } from \"./AccordionSectionContext\";\nimport { clsx } from \"clsx\";\nimport { useAccordionContext } from \"./AccordionContext\";\nimport { isNotProduction } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport accordionCss from \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSection\");\n\nexport interface AccordionSectionProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultExpanded?: boolean;\n disabled?: boolean;\n expanded?: boolean;\n onChange?: (isExpanded: boolean) => void;\n className?: string;\n}\n\nexport const AccordionSection = forwardRef<\n HTMLDivElement,\n AccordionSectionProps\n>(function Accordion(\n {\n id: idProp,\n disabled: disabledProp,\n onChange: onChangeProp,\n defaultExpanded: defaultExpandedProp,\n expanded: expandedProp,\n children,\n className,\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 [id, setId] = useState(() =>\n idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`\n );\n\n if (idProp != null && idProp != id) {\n setId(idProp);\n }\n\n const {\n registerSection,\n unregisterSection,\n onChange,\n isExpanded,\n disabled: accordionDisabled,\n } = useAccordionContext();\n\n const isControlled = expandedProp != null;\n const expanded = isControlled ? expandedProp : isExpanded(id);\n const disabled = disabledProp != null ? disabledProp : accordionDisabled;\n\n useEffect(() => {\n registerSection(\n id,\n expandedProp != null ? expandedProp : !!defaultExpandedProp\n );\n return () => {\n unregisterSection(id);\n };\n }, [id, registerSection, unregisterSection]);\n\n const onToggle = useCallback(() => {\n const newExpanded = !expanded;\n if (onChangeProp) {\n onChangeProp(newExpanded);\n }\n if (!isControlled) {\n onChange(id, newExpanded);\n }\n }, [id, expanded, onChangeProp, onChange, isControlled]);\n\n useEffect(() => {\n const isControlled = expandedProp != null;\n if (isControlled) {\n onChange(id, expandedProp);\n }\n }, [expandedProp, isControlled]);\n\n useLayoutEffectSkipFirst(() => {\n if (isNotProduction()) {\n const mode = (isControlled: boolean) =>\n isControlled ? \"controlled\" : \"uncontrolled\";\n console.error(\n `A component is changing from ${mode(!isControlled)} to ${mode(\n isControlled\n )} mode.`\n );\n }\n }, [isControlled]);\n\n const contextValue: AccordionSectionContext = useMemo(() => {\n return {\n isExpanded: expanded,\n isDisabled: disabled,\n onToggle,\n };\n }, [expanded, disabled, onToggle]);\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n >\n <AccordionSectionContext.Provider value={contextValue}>\n {children}\n </AccordionSectionContext.Provider>\n </div>\n );\n});\n"],"names":["accordionCss","isControlled"],"mappings":"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"}
@@ -1,19 +0,0 @@
1
- import { createContext, useContext } from 'react';
2
- import { isNotProduction } from './utils.js';
3
-
4
- const AccordionSectionContext = createContext(void 0);
5
- if (isNotProduction()) {
6
- AccordionSectionContext.displayName = "AccordionSectionContext";
7
- }
8
- const useAccordionSectionContext = () => {
9
- const context = useContext(AccordionSectionContext);
10
- if (isNotProduction() && !context) {
11
- console.error(
12
- "useAccordionSectionContext should be used inside of AccordionSection"
13
- );
14
- }
15
- return context;
16
- };
17
-
18
- export { AccordionSectionContext, useAccordionSectionContext };
19
- //# sourceMappingURL=AccordionSectionContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSectionContext.js","sources":["../src/accordion/AccordionSectionContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { isNotProduction } from \"./utils\";\n\nexport interface AccordionSectionContext {\n isDisabled?: boolean;\n isExpanded: boolean;\n onToggle: () => void;\n}\n\nexport const AccordionSectionContext = createContext<\n AccordionSectionContext | undefined\n>(undefined);\n\nif (isNotProduction()) {\n AccordionSectionContext.displayName = \"AccordionSectionContext\";\n}\n\nexport const useAccordionSectionContext = () => {\n const context = useContext(AccordionSectionContext);\n if (isNotProduction() && !context) {\n console.error(\n \"useAccordionSectionContext should be used inside of AccordionSection\"\n );\n }\n return context!;\n};\n"],"names":[],"mappings":";;;AASa,MAAA,uBAAA,GAA0B,cAErC,KAAS,CAAA,EAAA;AAEX,IAAI,iBAAmB,EAAA;AACrB,EAAA,uBAAA,CAAwB,WAAc,GAAA,yBAAA,CAAA;AACxC,CAAA;AAEO,MAAM,6BAA6B,MAAM;AAC9C,EAAM,MAAA,OAAA,GAAU,WAAW,uBAAuB,CAAA,CAAA;AAClD,EAAI,IAAA,eAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAQ,OAAA,CAAA,KAAA;AAAA,MACN,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
@@ -1,60 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useCallback } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer } from '@salt-ds/core';
5
- import { ChevronRightIcon } from '@salt-ds/icons';
6
- import { useAccordionSectionContext } from './AccordionSectionContext.js';
7
- import { useWindow } from '@salt-ds/window';
8
- import { useComponentCssInjection } from '@salt-ds/styles';
9
- import css_248z from './Accordion.css.js';
10
-
11
- const withBaseName = makePrefixer("saltAccordionSummary");
12
- const AccordionSummary = forwardRef(function AccordionSummary2({ className, children, icon, ...restProps }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-accordion",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();
20
- const onKeyDown = useCallback(
21
- ({ key }) => {
22
- if (key === "Enter" || key === " ") {
23
- onToggle();
24
- }
25
- },
26
- [onToggle]
27
- );
28
- if (!icon) {
29
- icon = /* @__PURE__ */ jsx(ChevronRightIcon, {
30
- "aria-hidden": true
31
- });
32
- }
33
- return /* @__PURE__ */ jsxs("div", {
34
- ...restProps,
35
- className: clsx(
36
- withBaseName(),
37
- {
38
- [withBaseName("disabled")]: isDisabled,
39
- [withBaseName("expanded")]: isExpanded
40
- },
41
- className
42
- ),
43
- ref,
44
- role: "button",
45
- "aria-expanded": isExpanded,
46
- onClick: isDisabled ? void 0 : onToggle,
47
- onKeyDown: isDisabled ? void 0 : onKeyDown,
48
- tabIndex: isDisabled ? -1 : 0,
49
- children: [
50
- /* @__PURE__ */ jsx("div", {
51
- className: withBaseName("icon"),
52
- children: icon
53
- }),
54
- children
55
- ]
56
- });
57
- });
58
-
59
- export { AccordionSummary };
60
- //# sourceMappingURL=AccordionSummary.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSummary.js","sources":["../src/accordion/AccordionSummary.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport accordionCss from \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSummary\");\n\nexport interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ReactNode;\n}\n\nexport const AccordionSummary = forwardRef<\n HTMLDivElement,\n AccordionSummaryProps\n>(function AccordionSummary({ className, children, icon, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();\n\n const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n ({ key }) => {\n if (key === \"Enter\" || key === \" \") {\n onToggle();\n }\n },\n [onToggle]\n );\n\n if (!icon) {\n icon = <ChevronRightIcon aria-hidden />;\n }\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"expanded\")]: isExpanded,\n },\n className\n )}\n ref={ref}\n role=\"button\"\n aria-expanded={isExpanded}\n onClick={isDisabled ? undefined : onToggle}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n tabIndex={isDisabled ? -1 : 0}\n >\n <div className={withBaseName(\"icon\")}>{icon}</div>\n {children}\n </div>\n );\n});\n"],"names":["AccordionSummary","accordionCss"],"mappings":";;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAM3C,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,WAAW,QAAU,EAAA,IAAA,EAAA,GAAS,SAAU,EAAA,EAAG,GAAK,EAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,QAAA,KAAa,0BAA2B,EAAA,CAAA;AAExE,EAAA,MAAM,SAAkD,GAAA,WAAA;AAAA,IACtD,CAAC,EAAE,GAAA,EAAU,KAAA;AACX,MAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA;AAAA,MAAiB,aAAW,EAAA,IAAA;AAAA,KAAC,CAAA,CAAA;AAAA,GACvC;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,eAAe,EAAA,UAAA;AAAA,IACf,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,QAAA;AAAA,IAClC,SAAA,EAAW,aAAa,KAAY,CAAA,GAAA,SAAA;AAAA,IACpC,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,IAE5B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAI,QAAA,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +0,0 @@
1
- const isNotProduction = () => process.env.NODE_ENV !== "production";
2
-
3
- export { isNotProduction };
4
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../src/accordion/utils.ts"],"sourcesContent":["export const isNotProduction = () => process.env.NODE_ENV !== \"production\";\n"],"names":[],"mappings":"AAAO,MAAM,eAAkB,GAAA,MAAM,OAAQ,CAAA,GAAA,CAAI,QAAa,KAAA;;;;"}
@@ -1,4 +0,0 @@
1
- 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 white-space: pre;\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";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=ToggleButton.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,71 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useRef } from 'react';
3
- import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
4
- import { clsx } from 'clsx';
5
- import '../toggle-button-group/ToggleButtonGroup.js';
6
- import { useToggleButtonGroup } from '../toggle-button-group/ToggleButtonGroupContext.js';
7
- import { useWindow } from '@salt-ds/window';
8
- import { useComponentCssInjection } from '@salt-ds/styles';
9
- import css_248z from './ToggleButton.css.js';
10
-
11
- const withBaseName = makePrefixer("saltToggleButton");
12
- const ToggleButton = forwardRef(
13
- function ToggleButton2(props, ref) {
14
- const {
15
- children,
16
- className,
17
- disabled: disabledProp,
18
- value,
19
- onClick,
20
- onFocus,
21
- onChange,
22
- selected: selectedProp,
23
- ...rest
24
- } = props;
25
- const targetWindow = useWindow();
26
- useComponentCssInjection({
27
- testId: "salt-toggle-button",
28
- css: css_248z,
29
- window: targetWindow
30
- });
31
- const buttonRef = useRef(null);
32
- const handleRef = useForkRef(ref, buttonRef);
33
- const toggleButtonGroup = useToggleButtonGroup();
34
- const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
35
- const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
36
- const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
37
- const [selected, setSelected] = useControlled({
38
- controlled: toggleButtonGroupSelected,
39
- default: Boolean(selectedProp),
40
- name: "ToggleButton",
41
- state: "selected"
42
- });
43
- const handleClick = (event) => {
44
- toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
45
- setSelected(!selected);
46
- onChange == null ? void 0 : onChange(event);
47
- onClick == null ? void 0 : onClick(event);
48
- };
49
- const handleFocus = (event) => {
50
- toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
51
- onFocus == null ? void 0 : onFocus(event);
52
- };
53
- const ariaChecked = selected && !disabled;
54
- return /* @__PURE__ */ jsx("button", {
55
- "aria-checked": ariaChecked,
56
- className: clsx(withBaseName(), className),
57
- disabled,
58
- role: toggleButtonGroup ? "radio" : "checkbox",
59
- ref: handleRef,
60
- onClick: handleClick,
61
- onFocus: handleFocus,
62
- tabIndex: focusable && !disabled ? 0 : -1,
63
- value,
64
- ...rest,
65
- children
66
- });
67
- }
68
- );
69
-
70
- export { ToggleButton };
71
- //# 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":["ToggleButton","toggleButtonCss"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- 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";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=ToggleButtonGroup.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}