@redsift/design-system 11.5.0-muiv5 → 11.6.0-alpha.0

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 (285) hide show
  1. package/_internal/Alert2.js +197 -0
  2. package/_internal/Alert2.js.map +1 -0
  3. package/_internal/AppBar.js +248 -0
  4. package/_internal/AppBar.js.map +1 -0
  5. package/_internal/AppContainer.js +142 -0
  6. package/_internal/AppContainer.js.map +1 -0
  7. package/_internal/AppContent.js +92 -0
  8. package/_internal/AppContent.js.map +1 -0
  9. package/_internal/Badge2.js +142 -0
  10. package/_internal/Badge2.js.map +1 -0
  11. package/_internal/BreadcrumbItem.js +91 -0
  12. package/_internal/BreadcrumbItem.js.map +1 -0
  13. package/_internal/Breadcrumbs2.js +94 -0
  14. package/_internal/Breadcrumbs2.js.map +1 -0
  15. package/_internal/Button2.js +91 -0
  16. package/_internal/Button2.js.map +1 -0
  17. package/_internal/ButtonGroup.js +181 -0
  18. package/_internal/ButtonGroup.js.map +1 -0
  19. package/_internal/ButtonLink.js +84 -0
  20. package/_internal/ButtonLink.js.map +1 -0
  21. package/_internal/Card2.js +157 -0
  22. package/_internal/Card2.js.map +1 -0
  23. package/_internal/CardActions.js +44 -0
  24. package/_internal/CardActions.js.map +1 -0
  25. package/_internal/CardBody.js +42 -0
  26. package/_internal/CardBody.js.map +1 -0
  27. package/_internal/CardHeader.js +83 -0
  28. package/_internal/CardHeader.js.map +1 -0
  29. package/_internal/Checkbox2.js +244 -0
  30. package/_internal/Checkbox2.js.map +1 -0
  31. package/_internal/CheckboxGroup.js +188 -0
  32. package/_internal/CheckboxGroup.js.map +1 -0
  33. package/_internal/ConditionalWrapper.js +13 -0
  34. package/_internal/ConditionalWrapper.js.map +1 -0
  35. package/_internal/DetailedCard.js +6916 -0
  36. package/_internal/DetailedCard.js.map +1 -0
  37. package/_internal/DetailedCardCollapsibleSectionItems.js +64 -0
  38. package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -0
  39. package/_internal/DetailedCardHeader.js +67 -0
  40. package/_internal/DetailedCardHeader.js.map +1 -0
  41. package/_internal/DetailedCardSection.js +172 -0
  42. package/_internal/DetailedCardSection.js.map +1 -0
  43. package/_internal/DetailedCardSectionItem.js +94 -0
  44. package/_internal/DetailedCardSectionItem.js.map +1 -0
  45. package/_internal/Flexbox2.js +93 -0
  46. package/_internal/Flexbox2.js.map +1 -0
  47. package/_internal/Grid2.js +95 -0
  48. package/_internal/Grid2.js.map +1 -0
  49. package/_internal/GridItem.js +40 -0
  50. package/_internal/GridItem.js.map +1 -0
  51. package/_internal/Heading2.js +113 -0
  52. package/_internal/Heading2.js.map +1 -0
  53. package/_internal/Icon2.js +211 -0
  54. package/_internal/Icon2.js.map +1 -0
  55. package/_internal/IconButton.js +80 -0
  56. package/_internal/IconButton.js.map +1 -0
  57. package/_internal/IconButtonLink.js +75 -0
  58. package/_internal/IconButtonLink.js.map +1 -0
  59. package/_internal/Item2.js +399 -0
  60. package/_internal/Item2.js.map +1 -0
  61. package/_internal/Link2.js +67 -0
  62. package/_internal/Link2.js.map +1 -0
  63. package/_internal/LinkButton.js +66 -0
  64. package/_internal/LinkButton.js.map +1 -0
  65. package/_internal/Listbox2.js +274 -0
  66. package/_internal/Listbox2.js.map +1 -0
  67. package/_internal/Number2.js +111 -0
  68. package/_internal/Number2.js.map +1 -0
  69. package/_internal/NumberField.js +3974 -0
  70. package/_internal/NumberField.js.map +1 -0
  71. package/_internal/Pill2.js +405 -0
  72. package/_internal/Pill2.js.map +1 -0
  73. package/_internal/ProgressBar.js +69 -0
  74. package/_internal/ProgressBar.js.map +1 -0
  75. package/_internal/Radio2.js +237 -0
  76. package/_internal/Radio2.js.map +1 -0
  77. package/_internal/RadioGroup.js +176 -0
  78. package/_internal/RadioGroup.js.map +1 -0
  79. package/_internal/Shield2.js +225 -0
  80. package/_internal/Shield2.js.map +1 -0
  81. package/_internal/SideNavigationMenu.js +591 -0
  82. package/_internal/SideNavigationMenu.js.map +1 -0
  83. package/_internal/SideNavigationMenuItem.js +304 -0
  84. package/_internal/SideNavigationMenuItem.js.map +1 -0
  85. package/_internal/Skeleton2.js +42 -0
  86. package/_internal/Skeleton2.js.map +1 -0
  87. package/_internal/SkeletonCircle.js +58 -0
  88. package/_internal/SkeletonCircle.js.map +1 -0
  89. package/_internal/SkeletonText.js +77 -0
  90. package/_internal/SkeletonText.js.map +1 -0
  91. package/_internal/Spinner2.js +333 -0
  92. package/_internal/Spinner2.js.map +1 -0
  93. package/_internal/Switch2.js +320 -0
  94. package/_internal/Switch2.js.map +1 -0
  95. package/_internal/SwitchGroup.js +188 -0
  96. package/_internal/SwitchGroup.js.map +1 -0
  97. package/_internal/Text2.js +51 -0
  98. package/_internal/Text2.js.map +1 -0
  99. package/_internal/TextArea.js +444 -0
  100. package/_internal/TextArea.js.map +1 -0
  101. package/_internal/TextField.js +473 -0
  102. package/_internal/TextField.js.map +1 -0
  103. package/_internal/_rollupPluginBabelHelpers.js +133 -0
  104. package/_internal/_rollupPluginBabelHelpers.js.map +1 -0
  105. package/_internal/alert.js +2 -0
  106. package/_internal/alert.js.map +1 -0
  107. package/_internal/app-bar.js +2 -0
  108. package/_internal/app-bar.js.map +1 -0
  109. package/_internal/app-container.js +3 -0
  110. package/_internal/app-container.js.map +1 -0
  111. package/_internal/app-content.js +2 -0
  112. package/_internal/app-content.js.map +1 -0
  113. package/_internal/app-side-panel.js +3 -0
  114. package/_internal/app-side-panel.js.map +1 -0
  115. package/_internal/badge.js +2 -0
  116. package/_internal/badge.js.map +1 -0
  117. package/_internal/breadcrumb-item.js +2 -0
  118. package/_internal/breadcrumb-item.js.map +1 -0
  119. package/_internal/breadcrumbs.js +2 -0
  120. package/_internal/breadcrumbs.js.map +1 -0
  121. package/_internal/button-group.js +2 -0
  122. package/_internal/button-group.js.map +1 -0
  123. package/_internal/button-link.js +2 -0
  124. package/_internal/button-link.js.map +1 -0
  125. package/_internal/button.js +3 -0
  126. package/_internal/button.js.map +1 -0
  127. package/_internal/card-actions.js +2 -0
  128. package/_internal/card-actions.js.map +1 -0
  129. package/_internal/card-body.js +2 -0
  130. package/_internal/card-body.js.map +1 -0
  131. package/_internal/card-header.js +2 -0
  132. package/_internal/card-header.js.map +1 -0
  133. package/_internal/card.js +2 -0
  134. package/_internal/card.js.map +1 -0
  135. package/_internal/checkbox-group.js +2 -0
  136. package/_internal/checkbox-group.js.map +1 -0
  137. package/_internal/checkbox.js +2 -0
  138. package/_internal/checkbox.js.map +1 -0
  139. package/_internal/colors.js +98 -0
  140. package/_internal/colors.js.map +1 -0
  141. package/_internal/conditional-wrapper.js +2 -0
  142. package/_internal/conditional-wrapper.js.map +1 -0
  143. package/_internal/context.js +6 -0
  144. package/_internal/context.js.map +1 -0
  145. package/_internal/context2.js +300 -0
  146. package/_internal/context2.js.map +1 -0
  147. package/_internal/context3.js +6 -0
  148. package/_internal/context3.js.map +1 -0
  149. package/_internal/context4.js +6 -0
  150. package/_internal/context4.js.map +1 -0
  151. package/_internal/context5.js +6 -0
  152. package/_internal/context5.js.map +1 -0
  153. package/_internal/detailed-card-collapsible-section-items.js +2 -0
  154. package/_internal/detailed-card-collapsible-section-items.js.map +1 -0
  155. package/_internal/detailed-card-header.js +2 -0
  156. package/_internal/detailed-card-header.js.map +1 -0
  157. package/_internal/detailed-card-section-item.js +2 -0
  158. package/_internal/detailed-card-section-item.js.map +1 -0
  159. package/_internal/detailed-card-section.js +2 -0
  160. package/_internal/detailed-card-section.js.map +1 -0
  161. package/_internal/detailed-card.js +2 -0
  162. package/_internal/detailed-card.js.map +1 -0
  163. package/_internal/filterComponents.js +24 -0
  164. package/_internal/filterComponents.js.map +1 -0
  165. package/_internal/flexbox.js +2 -0
  166. package/_internal/flexbox.js.map +1 -0
  167. package/_internal/focus-within-group.js +3 -0
  168. package/_internal/focus-within-group.js.map +1 -0
  169. package/_internal/fonts.js +10 -0
  170. package/_internal/fonts.js.map +1 -0
  171. package/_internal/gradient-border.js +38 -0
  172. package/_internal/gradient-border.js.map +1 -0
  173. package/_internal/grid-item.js +2 -0
  174. package/_internal/grid-item.js.map +1 -0
  175. package/_internal/grid.js +2 -0
  176. package/_internal/grid.js.map +1 -0
  177. package/_internal/heading.js +3 -0
  178. package/_internal/heading.js.map +1 -0
  179. package/_internal/icon-button-link.js +2 -0
  180. package/_internal/icon-button-link.js.map +1 -0
  181. package/_internal/icon-button.js +3 -0
  182. package/_internal/icon-button.js.map +1 -0
  183. package/_internal/icon.js +2 -0
  184. package/_internal/icon.js.map +1 -0
  185. package/_internal/isComponent.js +15 -0
  186. package/_internal/isComponent.js.map +1 -0
  187. package/_internal/item.js +2 -0
  188. package/_internal/item.js.map +1 -0
  189. package/_internal/link-button.js +2 -0
  190. package/_internal/link-button.js.map +1 -0
  191. package/_internal/link.js +3 -0
  192. package/_internal/link.js.map +1 -0
  193. package/_internal/listbox.js +3 -0
  194. package/_internal/listbox.js.map +1 -0
  195. package/_internal/number-field.js +2 -0
  196. package/_internal/number-field.js.map +1 -0
  197. package/_internal/number.js +2 -0
  198. package/_internal/number.js.map +1 -0
  199. package/_internal/partitionComponents.js +26 -0
  200. package/_internal/partitionComponents.js.map +1 -0
  201. package/_internal/pill.js +2 -0
  202. package/_internal/pill.js.map +1 -0
  203. package/_internal/progress-bar.js +2 -0
  204. package/_internal/progress-bar.js.map +1 -0
  205. package/_internal/radio-group.js +2 -0
  206. package/_internal/radio-group.js.map +1 -0
  207. package/_internal/radio.js +2 -0
  208. package/_internal/radio.js.map +1 -0
  209. package/_internal/redsift-design-tokens.js +1391 -0
  210. package/_internal/redsift-design-tokens.js.map +1 -0
  211. package/_internal/shared.js +2 -0
  212. package/_internal/shared.js.map +1 -0
  213. package/_internal/shield.js +2 -0
  214. package/_internal/shield.js.map +1 -0
  215. package/_internal/side-navigation-menu-bar.js +3 -0
  216. package/_internal/side-navigation-menu-bar.js.map +1 -0
  217. package/_internal/side-navigation-menu-item.js +2 -0
  218. package/_internal/side-navigation-menu-item.js.map +1 -0
  219. package/_internal/side-navigation-menu.js +2 -0
  220. package/_internal/side-navigation-menu.js.map +1 -0
  221. package/_internal/skeleton-circle.js +2 -0
  222. package/_internal/skeleton-circle.js.map +1 -0
  223. package/_internal/skeleton-text.js +3 -0
  224. package/_internal/skeleton-text.js.map +1 -0
  225. package/_internal/skeleton.js +2 -0
  226. package/_internal/skeleton.js.map +1 -0
  227. package/_internal/spinner.js +2 -0
  228. package/_internal/spinner.js.map +1 -0
  229. package/_internal/styles.js +235 -0
  230. package/_internal/styles.js.map +1 -0
  231. package/_internal/styles2.js +47 -0
  232. package/_internal/styles2.js.map +1 -0
  233. package/_internal/styles3.js +145 -0
  234. package/_internal/styles3.js.map +1 -0
  235. package/_internal/styles4.js +250 -0
  236. package/_internal/styles4.js.map +1 -0
  237. package/_internal/styles5.js +143 -0
  238. package/_internal/styles5.js.map +1 -0
  239. package/_internal/styles6.js +84 -0
  240. package/_internal/styles6.js.map +1 -0
  241. package/_internal/switch-group.js +2 -0
  242. package/_internal/switch-group.js.map +1 -0
  243. package/_internal/switch.js +2 -0
  244. package/_internal/switch.js.map +1 -0
  245. package/_internal/text-area.js +2 -0
  246. package/_internal/text-area.js.map +1 -0
  247. package/_internal/text-field.js +2 -0
  248. package/_internal/text-field.js.map +1 -0
  249. package/_internal/text.js +3 -0
  250. package/_internal/text.js.map +1 -0
  251. package/_internal/theme.js +2 -0
  252. package/_internal/theme.js.map +1 -0
  253. package/_internal/types.js +15 -0
  254. package/_internal/types.js.map +1 -0
  255. package/_internal/types2.js +26 -0
  256. package/_internal/types2.js.map +1 -0
  257. package/_internal/types3.js +20 -0
  258. package/_internal/types3.js.map +1 -0
  259. package/_internal/useAppSidePanel.js +337 -0
  260. package/_internal/useAppSidePanel.js.map +1 -0
  261. package/_internal/useFocusOnList.js +541 -0
  262. package/_internal/useFocusOnList.js.map +1 -0
  263. package/_internal/useFocusOnListItem.js +203 -0
  264. package/_internal/useFocusOnListItem.js.map +1 -0
  265. package/_internal/useFocusRing.js +669 -0
  266. package/_internal/useFocusRing.js.map +1 -0
  267. package/_internal/useId.js +42 -0
  268. package/_internal/useId.js.map +1 -0
  269. package/_internal/useIsLoaded.js +14 -0
  270. package/_internal/useIsLoaded.js.map +1 -0
  271. package/_internal/useListboxItem.js +129 -0
  272. package/_internal/useListboxItem.js.map +1 -0
  273. package/_internal/useMessageFormatter.js +143 -0
  274. package/_internal/useMessageFormatter.js.map +1 -0
  275. package/_internal/useNumberFormatter.js +239 -0
  276. package/_internal/useNumberFormatter.js.map +1 -0
  277. package/_internal/useSideNavigationMenuBar.js +373 -0
  278. package/_internal/useSideNavigationMenuBar.js.map +1 -0
  279. package/_internal/useTheme.js +15 -0
  280. package/_internal/useTheme.js.map +1 -0
  281. package/_internal/warnIfNoAccessibleLabelFound.js +20 -0
  282. package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -0
  283. package/index.js +315 -24243
  284. package/index.js.map +1 -1
  285. package/package.json +3 -3
@@ -0,0 +1,274 @@
1
+ import { b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
2
+ import React__default, { forwardRef, useCallback, useRef, useReducer, useEffect, useMemo } from 'react';
3
+ import classNames from 'classnames';
4
+ import { a as ListboxActionType, d as ListboxContext, b as ListboxVariant, c as LISTBOX_INITIAL_STATE } from './useListboxItem.js';
5
+ import styled, { css } from 'styled-components';
6
+ import { j as baseContainer } from './styles4.js';
7
+ import { F as Flexbox } from './Flexbox2.js';
8
+ import { u as useFocusOnList, F as FocusWithinGroup } from './useFocusOnList.js';
9
+ import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
10
+ import { u as useId } from './useId.js';
11
+ import { C as ConditionalWrapper } from './ConditionalWrapper.js';
12
+
13
+ const _excluded$2 = ["children", "id", "isDisabled", "context"];
14
+ const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
15
+ var _context$state$active;
16
+ const {
17
+ children,
18
+ id,
19
+ isDisabled,
20
+ context
21
+ } = props,
22
+ forwardedProps = _objectWithoutProperties(props, _excluded$2);
23
+ const {
24
+ activedescendant,
25
+ handleKeyDown: handleFocusKeyDown,
26
+ handleFocus,
27
+ handleBlur
28
+ } = useFocusOnList();
29
+ const handleKeyDown = useCallback(event => {
30
+ handleFocusKeyDown(event);
31
+ const code = event.code;
32
+ if (code === 'Enter' || code === 'Space') {
33
+ if (context.state.selectionMode === 'multiple') {
34
+ var _activedescendant$;
35
+ context.dispatch({
36
+ type: ListboxActionType.TOGGLE,
37
+ payload: {
38
+ value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
39
+ activedescendant
40
+ }
41
+ });
42
+ } else {
43
+ var _activedescendant$2;
44
+ context.dispatch({
45
+ type: ListboxActionType.SET,
46
+ payload: {
47
+ values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
48
+ activedescendant
49
+ }
50
+ });
51
+ }
52
+ }
53
+ }, [activedescendant]);
54
+ return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
55
+ flexDirection: "column",
56
+ gap: "8px"
57
+ }, forwardedProps, {
58
+ "aria-disabled": isDisabled,
59
+ ref: ref,
60
+ id: id,
61
+ role: "listbox",
62
+ "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
63
+ "aria-multiselectable": context.state.selectionMode === 'multiple',
64
+ tabIndex: 0,
65
+ style: {
66
+ outline: 'none'
67
+ },
68
+ onFocus: handleFocus,
69
+ onBlur: handleBlur,
70
+ onMouseDown: event => event.preventDefault(),
71
+ onMouseLeave: handleBlur,
72
+ onKeyDown: handleKeyDown
73
+ }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
74
+ value: context
75
+ }, children));
76
+ });
77
+
78
+ const _excluded$1 = ["children", "id", "isDisabled", "context"];
79
+ const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
80
+ const {
81
+ children,
82
+ id,
83
+ isDisabled,
84
+ context
85
+ } = props,
86
+ forwardedProps = _objectWithoutProperties(props, _excluded$1);
87
+ return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
88
+ flexDirection: "column",
89
+ gap: "8px"
90
+ }, forwardedProps, {
91
+ "aria-disabled": isDisabled,
92
+ ref: ref,
93
+ id: id,
94
+ role: "listbox",
95
+ "aria-multiselectable": context.state.selectionMode === 'multiple'
96
+ }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
97
+ value: context
98
+ }, children));
99
+ });
100
+
101
+ /**
102
+ * Component style.
103
+ */
104
+ const StyledListbox = styled.div`
105
+ ${baseContainer}
106
+ outline: none;
107
+
108
+ ${_ref => {
109
+ let {
110
+ $variant,
111
+ $isDisabled,
112
+ $isInvalid
113
+ } = _ref;
114
+ return $variant === ListboxVariant.standalone ? css`
115
+ span.redsift-listbox-label {
116
+ font-family: var(--redsift-typography-body-font-family);
117
+ font-weight: var(--redsift-typography-body-font-weight);
118
+ font-size: var(--redsift-typography-body-font-size);
119
+ line-height: var(--redsift-typography-body-line-height);
120
+
121
+ color: var(--redsift-color-neutral-black);
122
+ ${$isDisabled ? `
123
+ color: var(--redsift-color-neutral-mid-grey);
124
+ ` : ''}
125
+ ${$isInvalid ? `
126
+ color: var(--redsift-color-red-n);
127
+ ` : ''}
128
+ }
129
+
130
+ .redsift-listbox-list {
131
+ border: 1px solid var(--redsift-color-neutral-mid-grey);
132
+ padding: 4px;
133
+ min-width: 200px;
134
+ }
135
+ ` : '';
136
+ }}
137
+ `;
138
+
139
+ const ListboxReducer = (state, action) => {
140
+ switch (action.type) {
141
+ case ListboxActionType.TOGGLE:
142
+ {
143
+ if (state.isReadOnly || state.isDisabled) {
144
+ return state;
145
+ }
146
+ if (!state.selectedValues.includes(action.payload.value)) {
147
+ return _objectSpread2(_objectSpread2({}, state), {}, {
148
+ selectedValues: state.selectedValues.concat(action.payload.value)
149
+ }, action.payload.activedescendant && {
150
+ activedescendant: action.payload.activedescendant
151
+ });
152
+ }
153
+ return _objectSpread2(_objectSpread2({}, state), {}, {
154
+ selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
155
+ }, action.payload.activedescendant && {
156
+ activedescendant: action.payload.activedescendant
157
+ });
158
+ }
159
+ case ListboxActionType.SET:
160
+ {
161
+ if (state.isReadOnly || state.isDisabled) {
162
+ return state;
163
+ }
164
+ return _objectSpread2(_objectSpread2({}, state), {}, {
165
+ selectedValues: action.payload.values
166
+ }, action.payload.activedescendant && {
167
+ activedescendant: action.payload.activedescendant
168
+ });
169
+ }
170
+ case ListboxActionType.UPDATE_OPTIONS:
171
+ {
172
+ return _objectSpread2(_objectSpread2({}, state), action.payload);
173
+ }
174
+ default:
175
+ return state;
176
+ }
177
+ };
178
+
179
+ const _excluded = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
180
+ const COMPONENT_NAME = 'Listbox';
181
+ const CLASSNAME = 'redsift-listbox';
182
+
183
+ /**
184
+ * The Listbox component.
185
+ * Can be used as controlled or uncontrolled.
186
+ */
187
+ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
188
+ const {
189
+ children,
190
+ className,
191
+ defaultValues,
192
+ direction,
193
+ focusOnClick = false,
194
+ focusType = 'roving-tabindex',
195
+ id: propsId,
196
+ isDisabled,
197
+ isInvalid,
198
+ isReadOnly,
199
+ isRequired,
200
+ label,
201
+ loopAround,
202
+ onChange,
203
+ selectionMode = 'single',
204
+ values,
205
+ variant = ListboxVariant.standalone
206
+ } = props,
207
+ forwardedProps = _objectWithoutProperties(props, _excluded);
208
+ const [_id] = useId();
209
+ const id = propsId !== null && propsId !== void 0 ? propsId : _id;
210
+ const _ref = useRef();
211
+ const divRef = ref !== null && ref !== void 0 ? ref : _ref;
212
+ const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
213
+ isDisabled,
214
+ isReadOnly,
215
+ selectedValues: values || defaultValues || [],
216
+ selectionMode
217
+ }));
218
+ useEffect(() => {
219
+ if (values && values.length >= 0) {
220
+ dispatch({
221
+ type: ListboxActionType.SET,
222
+ payload: {
223
+ values
224
+ }
225
+ });
226
+ }
227
+ }, [values]);
228
+ const context = useMemo(() => ({
229
+ state,
230
+ dispatch
231
+ }), [state]);
232
+ useEffect(() => {
233
+ onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
234
+ }, [state.selectedValues]);
235
+ warnIfNoAccessibleLabelFound(props, [label]);
236
+ return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
237
+ wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends({
238
+ flexDirection: "column",
239
+ gap: "8px"
240
+ }, forwardedProps, {
241
+ $isDisabled: isDisabled,
242
+ $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
243
+ $isReadOnly: isReadOnly,
244
+ className: classNames(Listbox.className, className),
245
+ ref: divRef,
246
+ id: id,
247
+ $variant: variant
248
+ }), children),
249
+ condition: variant === ListboxVariant.standalone
250
+ }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
251
+ direction: direction,
252
+ focusOnClick: focusOnClick,
253
+ loopAround: loopAround,
254
+ focusType: focusType
255
+ }, label ? /*#__PURE__*/React__default.createElement("span", {
256
+ id: `${id}-label`,
257
+ className: `${Listbox.className}-label`
258
+ }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
259
+ "aria-hidden": "true"
260
+ }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends({}, forwardedProps, {
261
+ className: `${Listbox.className}-list`,
262
+ context: context,
263
+ ref: divRef
264
+ }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends({}, forwardedProps, {
265
+ className: `${Listbox.className}-list`,
266
+ context: context,
267
+ ref: divRef
268
+ }), children)));
269
+ });
270
+ Listbox.className = CLASSNAME;
271
+ Listbox.displayName = COMPONENT_NAME;
272
+
273
+ export { ActiveDescendantListbox as A, Listbox as L, RovingTabindexListbox as R, ListboxReducer as a };
274
+ //# sourceMappingURL=Listbox2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Listbox2.js","sources":["../../src/components/listbox/ActiveDescendantListbox.tsx","../../src/components/listbox/RovingTabindexListbox.tsx","../../src/components/listbox/styles.ts","../../src/components/listbox/reducer.ts","../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n handleFocusKeyDown(event);\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (context.state.selectionMode === 'multiple') {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value: activedescendant?.[1] ?? '', activedescendant },\n });\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [activedescendant?.[1] ?? ''],\n activedescendant,\n },\n });\n }\n }\n },\n [activedescendant]\n );\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-activedescendant={context.state.activedescendant?.[0]}\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n tabIndex={0}\n style={{ outline: 'none' }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n onMouseLeave={handleBlur}\n onKeyDown={handleKeyDown}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n ${baseContainer}\n outline: none;\n\n ${({ $variant, $isDisabled, $isInvalid }) =>\n $variant === ListboxVariant.standalone\n ? css`\n span.redsift-listbox-label {\n font-family: var(--redsift-typography-body-font-family);\n font-weight: var(--redsift-typography-body-font-weight);\n font-size: var(--redsift-typography-body-font-size);\n line-height: var(--redsift-typography-body-line-height);\n\n color: var(--redsift-color-neutral-black);\n ${$isDisabled\n ? `\n color: var(--redsift-color-neutral-mid-grey);\n `\n : ''}\n ${$isInvalid\n ? `\n color: var(--redsift-color-red-n);\n `\n : ''}\n }\n\n .redsift-listbox-list {\n border: 1px solid var(--redsift-color-neutral-mid-grey);\n padding: 4px;\n min-width: 200px;\n }\n `\n : ''}\n`;\n","import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n switch (action.type) {\n case ListboxActionType.TOGGLE: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n if (!state.selectedValues.includes(action.payload.value)) {\n return {\n ...state,\n selectedValues: state.selectedValues.concat(action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n return {\n ...state,\n selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.SET: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n return {\n ...state,\n selectedValues: action.payload.values,\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.UPDATE_OPTIONS: {\n return {\n ...state,\n ...action.payload,\n };\n }\n default:\n return state;\n }\n};\n","import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * The Listbox component.\n * Can be used as controlled or uncontrolled.\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n defaultValues,\n direction,\n focusOnClick = false,\n focusType = 'roving-tabindex',\n id: propsId,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n loopAround,\n onChange,\n selectionMode = 'single',\n values,\n variant = ListboxVariant.standalone,\n ...forwardedProps\n } = props;\n const [_id] = useId();\n const id = propsId ?? _id;\n const _ref = useRef<HTMLDivElement>();\n const divRef = ref ?? _ref;\n\n const [state, dispatch] = useReducer(ListboxReducer, {\n ...LISTBOX_INITIAL_STATE,\n isDisabled,\n isReadOnly,\n selectedValues: values || defaultValues || [],\n selectionMode,\n } as ListboxState);\n\n useEffect(() => {\n if (values && values.length >= 0) {\n dispatch({\n type: ListboxActionType.SET,\n payload: {\n values,\n },\n });\n }\n }, [values]);\n\n const context = useMemo<ListboxContextProps>(\n () => ({\n state,\n dispatch,\n }),\n [state]\n );\n\n useEffect(() => {\n onChange?.(state.selectedValues);\n }, [state.selectedValues]);\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [label]);\n\n return (\n <ConditionalWrapper\n wrapper={(children) => (\n <StyledListbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n $isDisabled={isDisabled}\n $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n $isReadOnly={isReadOnly}\n className={classNames(Listbox.className, className)}\n ref={divRef as RefObject<HTMLDivElement>}\n id={id}\n $variant={variant}\n >\n {children}\n </StyledListbox>\n )}\n condition={variant === ListboxVariant.standalone}\n >\n <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n {label ? (\n <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n {label}\n {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n </span>\n ) : null}\n {focusType === 'roving-tabindex' ? (\n <RovingTabindexListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </RovingTabindexListbox>\n ) : (\n <ActiveDescendantListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </ActiveDescendantListbox>\n )}\n </FocusWithinGroup>\n </ConditionalWrapper>\n );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","style","outline","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider","RovingTabindexListbox","StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css","ListboxReducer","action","isReadOnly","selectedValues","includes","_objectSpread","concat","filter","existingValue","UPDATE_OPTIONS","COMPONENT_NAME","CLASSNAME","Listbox","className","defaultValues","direction","focusOnClick","focusType","propsId","isInvalid","isRequired","label","loopAround","onChange","variant","_id","useId","useRef","divRef","useReducer","LISTBOX_INITIAL_STATE","useEffect","length","useMemo","warnIfNoAccessibleLabelFound","ConditionalWrapper","wrapper","$isReadOnly","classNames","condition","FocusWithinGroup","displayName"],"mappings":"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"}
@@ -0,0 +1,111 @@
1
+ import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
2
+ import React__default, { forwardRef } from 'react';
3
+ import classNames from 'classnames';
4
+ import styled from 'styled-components';
5
+ import { S as StyledText } from './styles5.js';
6
+ import { u as useNumberFormatter } from './useNumberFormatter.js';
7
+ import { u as useTheme } from './useTheme.js';
8
+
9
+ /**
10
+ * Component style.
11
+ */
12
+ const StyledNumber = styled(StyledText)``;
13
+
14
+ const _excluded = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontFamily", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "theme", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
15
+ const COMPONENT_NAME = 'Number';
16
+ const CLASSNAME = 'redsift-number';
17
+
18
+ /**
19
+ * The Number component.
20
+ */
21
+ const Number = /*#__PURE__*/forwardRef((props, ref) => {
22
+ const {
23
+ as,
24
+ className,
25
+ color,
26
+ compactDisplay = 'short',
27
+ currency,
28
+ currencyDisplay = 'symbol',
29
+ currencySign = 'standard',
30
+ fontSize,
31
+ fontFamily,
32
+ fontWeight,
33
+ lineHeight,
34
+ localeMatcher = 'best fit',
35
+ maximumFractionDigits,
36
+ maximumSignificantDigits,
37
+ minimumFractionDigits,
38
+ minimumIntegerDigits,
39
+ minimumSignificantDigits,
40
+ notation = 'standard',
41
+ noWrap,
42
+ numberingSystem,
43
+ roundingIncrement,
44
+ roundingMode = 'halfExpand',
45
+ roundingPriority = 'auto',
46
+ signDisplay = 'auto',
47
+ theme: propsTheme,
48
+ trailingZeroDisplay = 'auto',
49
+ type = 'decimal',
50
+ unit,
51
+ unitDisplay = 'short',
52
+ useGrouping,
53
+ value,
54
+ variant
55
+ } = props,
56
+ forwardedProps = _objectWithoutProperties(props, _excluded);
57
+ const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
58
+ compactDisplay,
59
+ currency,
60
+ currencyDisplay,
61
+ currencySign,
62
+ localeMatcher
63
+ }, maximumFractionDigits !== undefined && {
64
+ maximumFractionDigits
65
+ }), maximumSignificantDigits !== undefined && {
66
+ maximumSignificantDigits
67
+ }), minimumFractionDigits !== undefined && {
68
+ minimumFractionDigits
69
+ }), minimumIntegerDigits !== undefined && {
70
+ minimumIntegerDigits
71
+ }), minimumSignificantDigits !== undefined && {
72
+ minimumSignificantDigits
73
+ }), {}, {
74
+ notation,
75
+ numberingSystem,
76
+ // @ts-ignore
77
+ roundingIncrement,
78
+ // @ts-ignore
79
+ roundingMode,
80
+ // @ts-ignore
81
+ roundingPriority,
82
+ signDisplay,
83
+ style: type,
84
+ // @ts-ignore
85
+ trailingZeroDisplay,
86
+ unit,
87
+ unitDisplay,
88
+ useGrouping
89
+ }));
90
+ const theme = useTheme(propsTheme);
91
+ return /*#__PURE__*/React__default.createElement(StyledNumber, _extends({
92
+ as: as
93
+ }, forwardedProps, {
94
+ $as: as,
95
+ className: classNames(Number.className, className),
96
+ ref: ref,
97
+ $color: color,
98
+ $lineHeight: lineHeight,
99
+ $fontSize: fontSize,
100
+ $fontFamily: fontFamily,
101
+ $fontWeight: fontWeight,
102
+ $noWrap: noWrap,
103
+ $theme: theme,
104
+ $variant: variant
105
+ }), formatter.format(value));
106
+ });
107
+ Number.className = CLASSNAME;
108
+ Number.displayName = COMPONENT_NAME;
109
+
110
+ export { Number as N };
111
+ //# sourceMappingURL=Number2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Number2.js","sources":["../../src/components/number/styles.ts","../../src/components/number/Number.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledText } from '../text/styles';\nimport { StyledNumberProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledNumber = styled(StyledText)<StyledNumberProps>``;\n","import React, { forwardRef, RefObject } from 'react';\nimport { useNumberFormatter } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledNumber } from './styles';\nimport { NumberProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Number';\nconst CLASSNAME = 'redsift-number';\n\n/**\n * The Number component.\n */\nexport const Number: Comp<NumberProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n as,\n className,\n color,\n compactDisplay = 'short',\n currency,\n currencyDisplay = 'symbol',\n currencySign = 'standard',\n fontSize,\n fontFamily,\n fontWeight,\n lineHeight,\n localeMatcher = 'best fit',\n maximumFractionDigits,\n maximumSignificantDigits,\n minimumFractionDigits,\n minimumIntegerDigits,\n minimumSignificantDigits,\n notation = 'standard',\n noWrap,\n numberingSystem,\n roundingIncrement,\n roundingMode = 'halfExpand',\n roundingPriority = 'auto',\n signDisplay = 'auto',\n theme: propsTheme,\n trailingZeroDisplay = 'auto',\n type = 'decimal',\n unit,\n unitDisplay = 'short',\n useGrouping,\n value,\n variant,\n ...forwardedProps\n } = props;\n const formatter = useNumberFormatter({\n compactDisplay,\n currency,\n currencyDisplay,\n currencySign,\n localeMatcher,\n ...(maximumFractionDigits !== undefined && { maximumFractionDigits }),\n ...(maximumSignificantDigits !== undefined && {\n maximumSignificantDigits,\n }),\n ...(minimumFractionDigits !== undefined && { minimumFractionDigits }),\n ...(minimumIntegerDigits !== undefined && { minimumIntegerDigits }),\n ...(minimumSignificantDigits !== undefined && {\n minimumSignificantDigits,\n }),\n notation,\n numberingSystem,\n // @ts-ignore\n roundingIncrement,\n // @ts-ignore\n roundingMode,\n // @ts-ignore\n roundingPriority,\n signDisplay,\n style: type,\n // @ts-ignore\n trailingZeroDisplay,\n unit,\n unitDisplay,\n useGrouping,\n });\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledNumber\n as={as}\n {...forwardedProps}\n $as={as}\n className={classNames(Number.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $lineHeight={lineHeight}\n $fontSize={fontSize}\n $fontFamily={fontFamily}\n $fontWeight={fontWeight}\n $noWrap={noWrap}\n $theme={theme}\n $variant={variant}\n >\n {formatter.format(value)}\n </StyledNumber>\n );\n});\nNumber.className = CLASSNAME;\nNumber.displayName = COMPONENT_NAME;\n"],"names":["StyledNumber","styled","StyledText","COMPONENT_NAME","CLASSNAME","Number","forwardRef","props","ref","as","className","color","compactDisplay","currency","currencyDisplay","currencySign","fontSize","fontFamily","fontWeight","lineHeight","localeMatcher","maximumFractionDigits","maximumSignificantDigits","minimumFractionDigits","minimumIntegerDigits","minimumSignificantDigits","notation","noWrap","numberingSystem","roundingIncrement","roundingMode","roundingPriority","signDisplay","theme","propsTheme","trailingZeroDisplay","type","unit","unitDisplay","useGrouping","value","variant","forwardedProps","_objectWithoutProperties","_excluded","formatter","useNumberFormatter","_objectSpread","undefined","style","useTheme","React","createElement","_extends","$as","classNames","$color","$lineHeight","$fontSize","$fontFamily","$fontWeight","$noWrap","$theme","$variant","format","displayName"],"mappings":"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"}