@redis-ui/components 39.18.0 → 41.3.2

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 (215) hide show
  1. package/dist/AppSelectionMenu/components/Icon/Icon.cjs +3 -1
  2. package/dist/AppSelectionMenu/components/Icon/Icon.js +3 -1
  3. package/dist/AppSelectionMenu/components/Trigger/Trigger.styles.cjs +1 -1
  4. package/dist/AppSelectionMenu/components/Trigger/Trigger.styles.js +1 -1
  5. package/dist/AutoCompleteSelect/AutoCompleteSelect.style.d.ts +1 -1
  6. package/dist/Banner/Banner.d.ts +3 -3
  7. package/dist/Banner/components/Actions/Actions.d.ts +1 -1
  8. package/dist/Banner/components/Compose/Compose.style.d.ts +1 -1
  9. package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.types.d.ts +1 -1
  10. package/dist/ChipList/Components/ExtraItem.cjs +3 -0
  11. package/dist/ChipList/Components/ExtraItem.js +3 -0
  12. package/dist/Drawer/Drawer.d.ts +2 -2
  13. package/dist/Drawer/components/Body/Body.cjs +17 -3
  14. package/dist/Drawer/components/Body/Body.d.ts +1 -1
  15. package/dist/Drawer/components/Body/Body.js +17 -3
  16. package/dist/Drawer/components/Body/Body.types.d.ts +3 -1
  17. package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.styles.d.ts +2 -2
  18. package/dist/FormField/FormField.context.d.ts +6 -2
  19. package/dist/FormField/FormField.d.ts +2 -4
  20. package/dist/FormField/components/Compose/Compose.d.ts +1 -1
  21. package/dist/FormField/components/Compose/Compose.types.d.ts +2 -2
  22. package/dist/FormField/components/Nested/Nested.cjs +25 -8
  23. package/dist/FormField/components/Nested/Nested.d.ts +1 -1
  24. package/dist/FormField/components/Nested/Nested.js +25 -8
  25. package/dist/FormField/components/Nested/Nested.types.d.ts +2 -0
  26. package/dist/Helpers/common.types.d.ts +1 -1
  27. package/dist/Helpers/contexts/NullableContext.cjs +17 -0
  28. package/dist/Helpers/contexts/NullableContext.d.ts +4 -0
  29. package/dist/Helpers/contexts/NullableContext.js +17 -0
  30. package/dist/Helpers/contexts/PrimitiveContextState.cjs +27 -0
  31. package/dist/Helpers/contexts/PrimitiveContextState.d.ts +7 -2
  32. package/dist/Helpers/contexts/PrimitiveContextState.js +27 -0
  33. package/dist/Helpers/hooks/useScrollable.cjs +32 -0
  34. package/dist/Helpers/hooks/useScrollable.d.ts +3 -0
  35. package/dist/Helpers/hooks/useScrollable.js +32 -0
  36. package/dist/Helpers/index.d.ts +2 -0
  37. package/dist/Inputs/Input/Input.d.ts +1 -1
  38. package/dist/Inputs/NumericInput/NumericInput.d.ts +1 -1
  39. package/dist/Inputs/PasswordInput/components/Compose/Compose.style.d.ts +1 -1
  40. package/dist/Inputs/QuantityCounter/QuantityCounter.d.ts +2 -2
  41. package/dist/Inputs/QuantityCounter/components/Compose/Compose.style.d.ts +1 -1
  42. package/dist/Inputs/QuantityCounter/components/InputGroup/InputGroup.d.ts +1 -1
  43. package/dist/Inputs/SearchInput/SearchInput.d.ts +1 -1
  44. package/dist/Inputs/TextArea/TextArea.d.ts +1 -1
  45. package/dist/Inputs/TextArea/components/Compose/Compose.style.d.ts +1 -1
  46. package/dist/Inputs/components/Context/Field.context.d.ts +3 -1
  47. package/dist/Loader/Loader.style.cjs +1 -1
  48. package/dist/Loader/Loader.style.js +1 -1
  49. package/dist/Menu/Menu.d.ts +1 -1
  50. package/dist/Menu/components/Content/Content.d.ts +1 -1
  51. package/dist/Menu/components/Content/components/Label/Label.d.ts +1 -1
  52. package/dist/Modal/Modal.d.ts +1 -1
  53. package/dist/Modal/components/Content/Content.d.ts +1 -1
  54. package/dist/ProfileIcon/ProfileIcon.types.d.ts +1 -1
  55. package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.cjs +32 -0
  56. package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.d.ts +8 -0
  57. package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.js +32 -0
  58. package/dist/ScreenReaderAnnounce/index.d.ts +1 -0
  59. package/dist/Section/Section.cjs +11 -8
  60. package/dist/Section/Section.d.ts +9 -7
  61. package/dist/Section/Section.js +11 -8
  62. package/dist/Section/Section.types.d.ts +8 -2
  63. package/dist/Section/components/Body/Body.cjs +10 -6
  64. package/dist/Section/components/Body/Body.d.ts +1 -1
  65. package/dist/Section/components/Body/Body.js +11 -7
  66. package/dist/Section/components/Body/Body.style.cjs +1 -1
  67. package/dist/Section/components/Body/Body.style.js +1 -1
  68. package/dist/Section/components/Body/Body.types.d.ts +2 -5
  69. package/dist/Section/components/Compose/Compose.cjs +18 -7
  70. package/dist/Section/components/Compose/Compose.d.ts +1 -1
  71. package/dist/Section/components/Compose/Compose.js +18 -7
  72. package/dist/Section/components/Compose/Compose.types.d.ts +2 -2
  73. package/dist/Section/components/Header/Header.cjs +12 -20
  74. package/dist/Section/components/Header/Header.d.ts +5 -4
  75. package/dist/Section/components/Header/Header.js +12 -20
  76. package/dist/Section/components/Header/Header.types.d.ts +7 -3
  77. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.cjs +34 -0
  78. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.d.ts +2 -0
  79. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.js +34 -0
  80. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.cjs +30 -0
  81. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.d.ts +3 -0
  82. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.js +28 -0
  83. package/dist/Section/components/Header/components/CollapseButton/CollapseButton.types.d.ts +6 -0
  84. package/dist/Section/components/Header/components/Compose/Compose.cjs +2 -30
  85. package/dist/Section/components/Header/components/Compose/Compose.d.ts +1 -1
  86. package/dist/Section/components/Header/components/Compose/Compose.js +3 -31
  87. package/dist/Section/components/Header/components/Compose/Compose.style.cjs +3 -36
  88. package/dist/Section/components/Header/components/Compose/Compose.style.d.ts +1 -9
  89. package/dist/Section/components/Header/components/Compose/Compose.style.js +5 -38
  90. package/dist/Section/components/Header/components/Compose/Compose.types.d.ts +2 -5
  91. package/dist/Section/components/Header/components/Group/Group.types.d.ts +1 -1
  92. package/dist/Section/components/Header/components/Label/Label.cjs +18 -7
  93. package/dist/Section/components/Header/components/Label/Label.js +19 -8
  94. package/dist/Section/components/Header/components/Label/Label.style.cjs +17 -4
  95. package/dist/Section/components/Header/components/Label/Label.style.d.ts +2 -1
  96. package/dist/Section/components/Header/components/Label/Label.style.js +17 -4
  97. package/dist/Section/components/Header/components/Label/Label.types.d.ts +2 -2
  98. package/dist/Section/components/SummaryBar/SummaryBar.cjs +14 -0
  99. package/dist/Section/components/SummaryBar/SummaryBar.d.ts +2 -0
  100. package/dist/Section/components/SummaryBar/SummaryBar.js +14 -0
  101. package/dist/Section/components/SummaryBar/SummaryBar.style.cjs +22 -0
  102. package/dist/Section/components/SummaryBar/SummaryBar.style.d.ts +3 -0
  103. package/dist/Section/components/SummaryBar/SummaryBar.style.js +20 -0
  104. package/dist/Section/components/SummaryBar/SummaryBar.types.d.ts +4 -0
  105. package/dist/Select/components/Content/components/Search/SelectSearchInput.style.d.ts +1 -1
  106. package/dist/SideBar/components/Footer/Footer.style.cjs +4 -1
  107. package/dist/SideBar/components/Footer/Footer.style.js +5 -2
  108. package/dist/SideBar/components/Header/Header.cjs +4 -6
  109. package/dist/SideBar/components/Header/Header.js +4 -6
  110. package/dist/SideBar/components/ScrollContainer/ScrollContainer.types.d.ts +1 -1
  111. package/dist/Stepper/Stepper.cjs +15 -27
  112. package/dist/Stepper/Stepper.context.cjs +13 -0
  113. package/dist/Stepper/Stepper.context.d.ts +12 -0
  114. package/dist/Stepper/Stepper.context.js +13 -0
  115. package/dist/Stepper/Stepper.d.ts +14 -5
  116. package/dist/Stepper/Stepper.js +15 -25
  117. package/dist/Stepper/Stepper.types.d.ts +9 -3
  118. package/dist/Stepper/components/Compose/Compose.cjs +42 -0
  119. package/dist/Stepper/components/Compose/Compose.d.ts +10 -0
  120. package/dist/Stepper/components/Compose/Compose.js +42 -0
  121. package/dist/Stepper/{Stepper.style.cjs → components/Compose/Compose.style.cjs} +4 -4
  122. package/dist/Stepper/components/Compose/Compose.style.d.ts +1 -0
  123. package/dist/Stepper/{Stepper.style.js → components/Compose/Compose.style.js} +4 -4
  124. package/dist/Stepper/components/Compose/Compose.types.d.ts +6 -0
  125. package/dist/Stepper/components/Step/Step.cjs +10 -17
  126. package/dist/Stepper/components/Step/Step.context.d.ts +3 -3
  127. package/dist/Stepper/components/Step/Step.d.ts +7 -5
  128. package/dist/Stepper/components/Step/Step.js +10 -17
  129. package/dist/Stepper/components/Step/Step.types.cjs +2 -2
  130. package/dist/Stepper/components/Step/Step.types.d.ts +6 -8
  131. package/dist/Stepper/components/Step/Step.types.js +2 -2
  132. package/dist/Stepper/components/Step/components/Compose/Compose.cjs +36 -4
  133. package/dist/Stepper/components/Step/components/Compose/Compose.d.ts +1 -1
  134. package/dist/Stepper/components/Step/components/Compose/Compose.js +37 -5
  135. package/dist/Stepper/components/Step/components/Compose/Compose.style.cjs +8 -4
  136. package/dist/Stepper/components/Step/components/Compose/Compose.style.d.ts +1 -1
  137. package/dist/Stepper/components/Step/components/Compose/Compose.style.js +10 -6
  138. package/dist/Stepper/components/Step/components/Compose/Compose.types.d.ts +2 -5
  139. package/dist/Stepper/components/Step/components/Icon/Icon.cjs +11 -6
  140. package/dist/Stepper/components/Step/components/Icon/Icon.d.ts +1 -1
  141. package/dist/Stepper/components/Step/components/Icon/Icon.js +12 -7
  142. package/dist/Stepper/components/Step/components/Icon/Icon.style.cjs +1 -1
  143. package/dist/Stepper/components/Step/components/Icon/Icon.style.js +2 -2
  144. package/dist/Stepper/components/Step/components/Label/Label.cjs +11 -13
  145. package/dist/Stepper/components/Step/components/Label/Label.d.ts +1 -1
  146. package/dist/Stepper/components/Step/components/Label/Label.js +12 -14
  147. package/dist/Stepper/components/Step/components/Label/Label.style.cjs +8 -8
  148. package/dist/Stepper/components/Step/components/Label/Label.style.d.ts +1 -1
  149. package/dist/Stepper/components/Step/components/Label/Label.style.js +9 -9
  150. package/dist/Stepper/components/Step/components/Label/Label.types.d.ts +3 -2
  151. package/dist/Stepper/hooks/useStepIndexing.cjs +38 -0
  152. package/dist/Stepper/hooks/useStepIndexing.d.ts +10 -0
  153. package/dist/Stepper/hooks/useStepIndexing.js +38 -0
  154. package/dist/Stepper/hooks/useStepRegistration.cjs +25 -0
  155. package/dist/Stepper/hooks/useStepRegistration.d.ts +5 -0
  156. package/dist/Stepper/hooks/useStepRegistration.js +25 -0
  157. package/dist/Stepper/hooks/useStepperInteractive.cjs +96 -0
  158. package/dist/Stepper/hooks/useStepperInteractive.d.ts +30 -0
  159. package/dist/Stepper/hooks/useStepperInteractive.js +96 -0
  160. package/dist/Switch/Switch.d.ts +1 -1
  161. package/dist/TableHeading/TableHeading.d.ts +1 -1
  162. package/dist/TableHeading/TableHeading.style.d.ts +1 -1
  163. package/dist/Tabs/Tabs.d.ts +3 -3
  164. package/dist/Tabs/components/ContentPane/ContentPane.d.ts +1 -1
  165. package/dist/Tabs/components/TabBar/TabBar.d.ts +2 -2
  166. package/dist/Tabs/components/TabBar/components/Trigger/Trigger.d.ts +1 -1
  167. package/dist/Toast/Toast.d.ts +4 -4
  168. package/dist/Toast/components/Actions/Actions.d.ts +1 -1
  169. package/dist/Toast/components/Actions/Actions.types.d.ts +1 -1
  170. package/dist/Toast/components/Actions/components/Action/Action.cjs +1 -1
  171. package/dist/Toast/components/Actions/components/Action/Action.js +1 -1
  172. package/dist/Toast/components/Actions/components/Compose/Compose.d.ts +1 -1
  173. package/dist/Toast/components/Compose/Compose.cjs +2 -2
  174. package/dist/Toast/components/Compose/Compose.d.ts +1 -1
  175. package/dist/Toast/components/Compose/Compose.js +2 -2
  176. package/dist/Toast/components/Compose/Compose.style.d.ts +1 -1
  177. package/dist/Toast/components/Content/Content.d.ts +1 -1
  178. package/dist/Toast/components/Content/Content.types.d.ts +1 -1
  179. package/dist/Toast/components/Content/components/Compose/Compose.cjs +15 -3
  180. package/dist/Toast/components/Content/components/Compose/Compose.d.ts +1 -1
  181. package/dist/Toast/components/Content/components/Compose/Compose.js +15 -3
  182. package/dist/Toast/components/Content/components/Description/Description.cjs +1 -1
  183. package/dist/Toast/components/Content/components/Description/Description.js +1 -1
  184. package/dist/Toast/components/Content/components/Message/Message.cjs +1 -1
  185. package/dist/Toast/components/Content/components/Message/Message.js +1 -1
  186. package/dist/Toast/components/Icon/Icon.cjs +1 -0
  187. package/dist/Toast/components/Icon/Icon.js +1 -0
  188. package/dist/Toast/core/content.helper.cjs +1 -1
  189. package/dist/Toast/core/content.helper.js +2 -2
  190. package/dist/Toast/core/context.cjs +4 -5
  191. package/dist/Toast/core/context.d.ts +1 -2
  192. package/dist/Toast/core/context.js +4 -5
  193. package/dist/Toast/core/core.cjs +2 -0
  194. package/dist/Toast/core/core.d.ts +9 -8
  195. package/dist/Toast/core/core.js +3 -1
  196. package/dist/Toast/core/mapping.helpers.cjs +24 -16
  197. package/dist/Toast/core/mapping.helpers.d.ts +8 -6
  198. package/dist/Toast/core/mapping.helpers.js +25 -17
  199. package/dist/Toast/core/mapping.types.d.ts +9 -8
  200. package/dist/Tooltip/Tooltip.types.d.ts +1 -1
  201. package/dist/Typography/components/Heading/Heading.types.d.ts +1 -1
  202. package/dist/index.cjs +7 -1
  203. package/dist/index.d.ts +1 -0
  204. package/dist/index.js +8 -2
  205. package/package.json +3 -3
  206. package/dist/Section/components/Header/components/ActionButton/ActionButton.cjs +0 -23
  207. package/dist/Section/components/Header/components/ActionButton/ActionButton.js +0 -23
  208. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.cjs +0 -19
  209. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.d.ts +0 -2
  210. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.js +0 -19
  211. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.cjs +0 -11
  212. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.d.ts +0 -1
  213. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.js +0 -9
  214. package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.types.d.ts +0 -2
  215. package/dist/Stepper/Stepper.style.d.ts +0 -1
@@ -1,7 +1,7 @@
1
1
  import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
2
2
  import { isValidElement } from "react";
3
3
  import Toast from "../Toast.js";
4
- import { Context } from "./context.js";
4
+ import { ToastContextProvider } from "./context.js";
5
5
  const renderContent = (content) => {
6
6
  if (typeof content === "string" || !content) return jsxRuntimeExports.jsx(Toast, {
7
7
  message: content
@@ -11,7 +11,7 @@ const renderContent = (content) => {
11
11
  ...content
12
12
  });
13
13
  };
14
- const wrapInContextProvider = (contextProps, content) => jsxRuntimeExports.jsx(Context.Provider, {
14
+ const wrapInContextProvider = (contextProps, content) => jsxRuntimeExports.jsx(ToastContextProvider, {
15
15
  value: contextProps,
16
16
  children: content
17
17
  });
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const Context = React.createContext({
5
- variant: "informative"
3
+ const NullableContext = require("../../Helpers/contexts/NullableContext.cjs");
4
+ const [useToastParams, ToastContextProvider] = NullableContext.createNullableContext({
5
+ forComponentName: "Toast"
6
6
  });
7
- const useToastParams = () => React.useContext(Context);
8
- exports.Context = Context;
7
+ exports.ToastContextProvider = ToastContextProvider;
9
8
  exports.useToastParams = useToastParams;
@@ -1,4 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { ToastContextProps } from './core.types';
3
- export declare const Context: import("react").Context<ToastContextProps>;
4
- export declare const useToastParams: () => ToastContextProps;
3
+ export declare const useToastParams: () => ToastContextProps, ToastContextProvider: import("react").Provider<ToastContextProps>;
@@ -1,9 +1,8 @@
1
- import { createContext, useContext } from "react";
2
- const Context = createContext({
3
- variant: "informative"
1
+ import { createNullableContext } from "../../Helpers/contexts/NullableContext.js";
2
+ const [useToastParams, ToastContextProvider] = createNullableContext({
3
+ forComponentName: "Toast"
4
4
  });
5
- const useToastParams = () => useContext(Context);
6
5
  export {
7
- Context,
6
+ ToastContextProvider,
8
7
  useToastParams
9
8
  };
@@ -18,8 +18,10 @@ const ToastPositions = {
18
18
  BottomRight: "bottom-right"
19
19
  };
20
20
  const toast = (content, options) => mapping_helpers.createToast((contextProps) => content_helper.wrapInContextProvider(contextProps, content_helper.renderContent(content)), options);
21
+ const update = (id, content, options) => mapping_helpers.updateToast(id, (contextProps) => content_helper.wrapInContextProvider(contextProps, content_helper.renderContent(content)), options);
21
22
  toast.Position = ToastPositions;
22
23
  toast.Variant = ToastVariants;
24
+ toast.update = update;
23
25
  toast.dismiss = mapping_helpers.dismiss;
24
26
  toast.isActive = mapping_helpers.isActive;
25
27
  toast.addChangeListener = mapping_helpers.addChangeListener;
@@ -1,6 +1,6 @@
1
- import type { ToastContent, ToastOptions } from './core.types';
1
+ import { ToastContent, ToastId, ToastOptions } from './core.types';
2
2
  export declare const toast: {
3
- (content: ToastContent, options?: ToastOptions): import("react-toastify").Id;
3
+ (content: ToastContent, options?: ToastOptions): ToastId;
4
4
  Position: {
5
5
  readonly TopLeft: "top-left";
6
6
  readonly TopCenter: "top-center";
@@ -16,11 +16,12 @@ export declare const toast: {
16
16
  readonly Attention: "attention";
17
17
  readonly Danger: "danger";
18
18
  };
19
- dismiss: (id?: import("react-toastify").Id | undefined) => void;
20
- isActive: (id: import("react-toastify").Id) => boolean;
19
+ update: (id: ToastId, content: ToastContent, options?: ToastOptions) => void;
20
+ dismiss: (id?: ToastId | undefined) => void;
21
+ isActive: (id: ToastId) => boolean;
21
22
  addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
22
- notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
23
- attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
24
- danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
25
- success: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
23
+ notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
24
+ attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
25
+ danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
26
+ success: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
26
27
  };
@@ -1,5 +1,5 @@
1
1
  import { wrapInContextProvider, renderContent } from "./content.helper.js";
2
- import { createToast, dismiss, isActive, addChangeListener } from "./mapping.helpers.js";
2
+ import { createToast, dismiss, isActive, addChangeListener, updateToast } from "./mapping.helpers.js";
3
3
  const ToastVariants = {
4
4
  Notice: "notice",
5
5
  Informative: "informative",
@@ -16,8 +16,10 @@ const ToastPositions = {
16
16
  BottomRight: "bottom-right"
17
17
  };
18
18
  const toast = (content, options) => createToast((contextProps) => wrapInContextProvider(contextProps, renderContent(content)), options);
19
+ const update = (id, content, options) => updateToast(id, (contextProps) => wrapInContextProvider(contextProps, renderContent(content)), options);
19
20
  toast.Position = ToastPositions;
20
21
  toast.Variant = ToastVariants;
22
+ toast.update = update;
21
23
  toast.dismiss = dismiss;
22
24
  toast.isActive = isActive;
23
25
  toast.addChangeListener = addChangeListener;
@@ -1,23 +1,30 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const reactToastify_esm = require("../../node_modules/react-toastify/dist/react-toastify.esm.cjs");
4
- const extractContextProps = (props, options) => ({
5
- ...props.toastProps,
6
- variant: (options == null ? void 0 : options.variant) || "informative"
4
+ const extractContextProps = (props) => ({
5
+ variant: "informative",
6
+ liveRole: "alert",
7
+ ...props.toastProps
8
+ });
9
+ const cleanupOptions = (options) => ({
10
+ ...options,
11
+ type: options == null ? void 0 : options.variant,
12
+ icon: false,
13
+ closeButton: false,
14
+ hideProgressBar: true,
15
+ draggable: false,
16
+ theme: "none",
17
+ role: "group",
18
+ ...(options == null ? void 0 : options.role) ? {
19
+ liveRole: options == null ? void 0 : options.role
20
+ } : {}
21
+ // save real role for inner container, only if specified
22
+ });
23
+ const createToast = (render, options) => reactToastify_esm.toast((props) => render(extractContextProps(props)), cleanupOptions(options));
24
+ const updateToast = (id, render, options) => reactToastify_esm.toast.update(id, {
25
+ render: (props) => render(extractContextProps(props)),
26
+ ...cleanupOptions(options)
7
27
  });
8
- function cleanupOptions(options) {
9
- return options && {
10
- ...options,
11
- type: options.variant,
12
- icon: false,
13
- closeButton: false,
14
- hideProgressBar: true,
15
- draggable: false,
16
- theme: "none"
17
- // use dummy theme (later custom themes can be used)
18
- };
19
- }
20
- const createToast = (render, options) => reactToastify_esm.toast((props) => render(extractContextProps(props, options)), cleanupOptions(options));
21
28
  const {
22
29
  dismiss,
23
30
  isActive
@@ -27,3 +34,4 @@ exports.addChangeListener = addChangeListener;
27
34
  exports.createToast = createToast;
28
35
  exports.dismiss = dismiss;
29
36
  exports.isActive = isActive;
37
+ exports.updateToast = updateToast;
@@ -1,13 +1,15 @@
1
1
  /**
2
2
  * This file maps toastify api to redis-ui api
3
3
  */
4
- /// <reference types="react" />
5
- import { ToastContextProps, ToastOptions } from './mapping.types';
4
+ import { ReactElement } from 'react';
5
+ import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions } from './mapping.types';
6
6
  /**
7
7
  * converts parameters to/from toastify and calls toastify toast
8
- * @param render
9
- * @param options
10
8
  */
11
- export declare const createToast: (render: (contextProps: ToastContextProps) => JSX.Element, options?: ToastOptions) => import("react-toastify").Id;
12
- export declare const dismiss: (id?: import("react-toastify").Id | undefined) => void, isActive: (id: import("react-toastify").Id) => boolean;
9
+ export declare const createToast: (render: (contextProps: ToastContextProps) => ReactElement, options?: ToastOptions) => ToastId;
10
+ /**
11
+ * converts parameters to/from toastify and calls toastify update
12
+ */
13
+ export declare const updateToast: (id: ToastId, render: (contextProps: ToastContextProps) => ReactElement, options?: ToastUpdateOptions) => void;
14
+ export declare const dismiss: (id?: ToastId | undefined) => void, isActive: (id: ToastId) => boolean;
13
15
  export declare const addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
@@ -1,21 +1,28 @@
1
1
  import { toast as Q } from "../../node_modules/react-toastify/dist/react-toastify.esm.js";
2
- const extractContextProps = (props, options) => ({
3
- ...props.toastProps,
4
- variant: (options == null ? void 0 : options.variant) || "informative"
2
+ const extractContextProps = (props) => ({
3
+ variant: "informative",
4
+ liveRole: "alert",
5
+ ...props.toastProps
6
+ });
7
+ const cleanupOptions = (options) => ({
8
+ ...options,
9
+ type: options == null ? void 0 : options.variant,
10
+ icon: false,
11
+ closeButton: false,
12
+ hideProgressBar: true,
13
+ draggable: false,
14
+ theme: "none",
15
+ role: "group",
16
+ ...(options == null ? void 0 : options.role) ? {
17
+ liveRole: options == null ? void 0 : options.role
18
+ } : {}
19
+ // save real role for inner container, only if specified
20
+ });
21
+ const createToast = (render, options) => Q((props) => render(extractContextProps(props)), cleanupOptions(options));
22
+ const updateToast = (id, render, options) => Q.update(id, {
23
+ render: (props) => render(extractContextProps(props)),
24
+ ...cleanupOptions(options)
5
25
  });
6
- function cleanupOptions(options) {
7
- return options && {
8
- ...options,
9
- type: options.variant,
10
- icon: false,
11
- closeButton: false,
12
- hideProgressBar: true,
13
- draggable: false,
14
- theme: "none"
15
- // use dummy theme (later custom themes can be used)
16
- };
17
- }
18
- const createToast = (render, options) => Q((props) => render(extractContextProps(props, options)), cleanupOptions(options));
19
26
  const {
20
27
  dismiss,
21
28
  isActive
@@ -25,5 +32,6 @@ export {
25
32
  addChangeListener,
26
33
  createToast,
27
34
  dismiss,
28
- isActive
35
+ isActive,
36
+ updateToast
29
37
  };
@@ -4,12 +4,11 @@
4
4
  import { RefAttributes } from 'react';
5
5
  import { ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition } from 'react-toastify';
6
6
  import { SemanticVariant } from '../../Banner/components/BannerSemanticComponents';
7
- declare const pickToastOptions: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "toastId", "delay", "onClose"];
8
- type PickToastOptions = (typeof pickToastOptions)[number];
9
- declare const pickToastProps: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "toastId", "delay", "onClose", "closeToast"];
10
- type PickToastProps = (typeof pickToastProps)[number];
11
- declare const pickToasterProps: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "newestOnTop", "limit", "style"];
12
- type PickToasterProps = (typeof pickToasterProps)[number];
7
+ export type { Id as ToastId } from 'react-toastify';
8
+ type PickCommonOptions = 'pauseOnHover' | 'closeOnClick' | 'autoClose' | 'position' | 'role' | 'rtl' | 'containerId' | 'transition';
9
+ type PickToastOptions = PickCommonOptions | 'toastId' | 'delay' | 'onClose';
10
+ type PickToastProps = PickToastOptions | 'closeToast';
11
+ type PickToasterProps = PickCommonOptions | 'newestOnTop' | 'limit' | 'style';
13
12
  export type ToasterProps = Pick<RcToastContainerProps, PickToasterProps> & RefAttributes<HTMLDivElement> & {
14
13
  className?: string;
15
14
  };
@@ -18,6 +17,8 @@ type ToastOverriddenOptions = {
18
17
  variant: ToastVariant;
19
18
  };
20
19
  export type ToastOptions = Pick<RcToastOptions, PickToastOptions> & Partial<ToastOverriddenOptions>;
21
- export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'], PickToastProps>> & ToastOverriddenOptions;
20
+ export type ToastUpdateOptions = ToastOptions;
21
+ export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'], PickToastProps>> & ToastOverriddenOptions & {
22
+ liveRole: string;
23
+ };
22
24
  export type ToastPosition = RcToastPosition;
23
- export {};
@@ -1,5 +1,5 @@
1
1
  import { TooltipComposeProps } from './components/Compose/Compose.types';
2
2
  import { TooltipContentProps } from './components/Content/Content.types';
3
3
  import { TooltipTriggerProps } from './components/Trigger/Trigger.types';
4
- export interface TooltipProps extends Omit<TooltipContentProps, 'backgroundColor'>, Omit<TooltipComposeProps, 'children'>, TooltipTriggerProps {
4
+ export interface TooltipProps extends TooltipContentProps, Omit<TooltipComposeProps, 'children'>, TooltipTriggerProps {
5
5
  }
@@ -4,7 +4,7 @@ import { TypographyColor } from '../../Typography.types';
4
4
  export type TypographyHeadingSize = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
5
5
  export type TypographyHeadingVariant = 'bold' | 'semiBold';
6
6
  export type TypographyHeadingComponent = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
7
- export interface TypographyHeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
7
+ export interface TypographyHeadingProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
8
8
  size?: TypographyHeadingSize;
9
9
  ellipsis?: boolean;
10
10
  children: React.ReactNode;
package/dist/index.cjs CHANGED
@@ -53,9 +53,11 @@ const generateId = require("./Helpers/generateId.cjs");
53
53
  const debounce = require("./Helpers/debounce.cjs");
54
54
  const SharedId_context = require("./Helpers/contexts/SharedId.context.cjs");
55
55
  const PrimitiveContextState = require("./Helpers/contexts/PrimitiveContextState.cjs");
56
+ const NullableContext = require("./Helpers/contexts/NullableContext.cjs");
56
57
  const SelfContained = require("./Helpers/SelfContained.cjs");
57
58
  const RestylableElement = require("./Helpers/RestylableElement.cjs");
58
59
  const Popper_context = require("./Helpers/contexts/Popper/Popper.context.cjs");
60
+ const useScrollable = require("./Helpers/hooks/useScrollable.cjs");
59
61
  const Input = require("./Inputs/Input/Input.cjs");
60
62
  const NumericInput = require("./Inputs/NumericInput/NumericInput.cjs");
61
63
  const PasswordInput = require("./Inputs/PasswordInput/PasswordInput.cjs");
@@ -81,6 +83,7 @@ const Pagination_context = require("./Pagination/Pagination.context.cjs");
81
83
  const Pagination = require("./Pagination/Pagination.cjs");
82
84
  const Popover = require("./Popover/Popover.cjs");
83
85
  const RadioGroup = require("./RadioGroup/RadioGroup.cjs");
86
+ const ScreenReaderAnnounce = require("./ScreenReaderAnnounce/ScreenReaderAnnounce.cjs");
84
87
  const SearchBar = require("./SearchBar/SearchBar.cjs");
85
88
  const Section = require("./Section/Section.cjs");
86
89
  const CategoryValueList = require("./Section/components/Header/components/CategoryValueList/CategoryValueList.cjs");
@@ -159,10 +162,12 @@ exports.SharedIdProvider = SharedId_context.SharedIdProvider;
159
162
  exports.SharedIdTransProvider = SharedId_context.SharedIdTransProvider;
160
163
  exports.useSharedId = SharedId_context.useSharedId;
161
164
  exports.createPrimitiveContextState = PrimitiveContextState.createPrimitiveContextState;
165
+ exports.createNullableContext = NullableContext.createNullableContext;
162
166
  exports.SelfContained = SelfContained.SelfContained;
163
167
  exports.RestylableElement = RestylableElement.RestylableElement;
164
168
  exports.PopperProvider = Popper_context.PopperProvider;
165
169
  exports.usePopperContext = Popper_context.usePopperContext;
170
+ exports.useScrollable = useScrollable.useScrollable;
166
171
  exports.Input = Input.default;
167
172
  exports.NumericInput = NumericInput.default;
168
173
  exports.PasswordInput = PasswordInput.default;
@@ -199,6 +204,7 @@ exports.usePaginationContext = Pagination_context.usePaginationContext;
199
204
  exports.Pagination = Pagination.Pagination;
200
205
  exports.Popover = Popover.default;
201
206
  exports.RadioGroup = RadioGroup.default;
207
+ exports.ScreenReaderAnnounce = ScreenReaderAnnounce.ScreenReaderAnnounce;
202
208
  exports.SearchBar = SearchBar.default;
203
209
  exports.Section = Section.default;
204
210
  exports.CategoryValueList = CategoryValueList.default;
@@ -207,7 +213,7 @@ exports.useSelectContext = Context$1.useSelectContext;
207
213
  exports.SideBar = SideBar.default;
208
214
  exports.Skeleton = Skeleton.default;
209
215
  exports.Stepper = Stepper.default;
210
- exports.StepState = Step_types.StepState;
216
+ exports.StepperStepState = Step_types.StepperStepState;
211
217
  exports.Switch = Switch.default;
212
218
  exports.TableHeading = TableHeading.default;
213
219
  exports.Tabs = Tabs.default;
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export * from './Overflow';
28
28
  export * from './Pagination';
29
29
  export * from './Popover';
30
30
  export * from './RadioGroup';
31
+ export * from './ScreenReaderAnnounce';
31
32
  export * from './SearchBar';
32
33
  export * from './Section';
33
34
  export * from './Select';
package/dist/index.js CHANGED
@@ -51,9 +51,11 @@ import { generateId, useGeneratedId } from "./Helpers/generateId.js";
51
51
  import { debounce } from "./Helpers/debounce.js";
52
52
  import { SharedIdProvider, SharedIdTransProvider, useSharedId } from "./Helpers/contexts/SharedId.context.js";
53
53
  import { createPrimitiveContextState } from "./Helpers/contexts/PrimitiveContextState.js";
54
+ import { createNullableContext } from "./Helpers/contexts/NullableContext.js";
54
55
  import { SelfContained } from "./Helpers/SelfContained.js";
55
56
  import { RestylableElement } from "./Helpers/RestylableElement.js";
56
57
  import { PopperProvider, usePopperContext } from "./Helpers/contexts/Popper/Popper.context.js";
58
+ import { useScrollable } from "./Helpers/hooks/useScrollable.js";
57
59
  import { default as default24 } from "./Inputs/Input/Input.js";
58
60
  import { default as default25 } from "./Inputs/NumericInput/NumericInput.js";
59
61
  import { default as default26 } from "./Inputs/PasswordInput/PasswordInput.js";
@@ -79,6 +81,7 @@ import { usePaginationContext } from "./Pagination/Pagination.context.js";
79
81
  import { Pagination } from "./Pagination/Pagination.js";
80
82
  import { default as default38 } from "./Popover/Popover.js";
81
83
  import { default as default39 } from "./RadioGroup/RadioGroup.js";
84
+ import { ScreenReaderAnnounce } from "./ScreenReaderAnnounce/ScreenReaderAnnounce.js";
82
85
  import { default as default40 } from "./SearchBar/SearchBar.js";
83
86
  import { default as default41 } from "./Section/Section.js";
84
87
  import { default as default42 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
@@ -87,7 +90,7 @@ import { useSelectContext } from "./Select/components/Context/Context.js";
87
90
  import { default as default44 } from "./SideBar/SideBar.js";
88
91
  import { default as default45 } from "./Skeleton/Skeleton.js";
89
92
  import { default as default46 } from "./Stepper/Stepper.js";
90
- import { StepState } from "./Stepper/components/Step/Step.types.js";
93
+ import { StepperStepState } from "./Stepper/components/Step/Step.types.js";
91
94
  import { default as default47 } from "./Switch/Switch.js";
92
95
  import { default as default48 } from "./TableHeading/TableHeading.js";
93
96
  import { default as default49 } from "./Tabs/Tabs.js";
@@ -162,6 +165,7 @@ export {
162
165
  default39 as RadioGroup,
163
166
  default21 as RangeDatePicker,
164
167
  RestylableElement,
168
+ ScreenReaderAnnounce,
165
169
  default40 as SearchBar,
166
170
  default27 as SearchInput,
167
171
  default41 as Section,
@@ -171,8 +175,8 @@ export {
171
175
  SharedIdTransProvider,
172
176
  default44 as SideBar,
173
177
  default45 as Skeleton,
174
- StepState,
175
178
  default46 as Stepper,
179
+ StepperStepState,
176
180
  default47 as Switch,
177
181
  default48 as TableHeading,
178
182
  default49 as Tabs,
@@ -196,6 +200,7 @@ export {
196
200
  buttonWithIconVariants,
197
201
  childrenToString,
198
202
  combineHandlers,
203
+ createNullableContext,
199
204
  createPrimitiveContextState,
200
205
  debounce,
201
206
  forwardRefWithGenerics,
@@ -220,6 +225,7 @@ export {
220
225
  useMultiSelectContext,
221
226
  usePaginationContext,
222
227
  usePopperContext,
228
+ useScrollable,
223
229
  useSelectContext,
224
230
  useSharedId,
225
231
  useToastParams
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@redis-ui/components",
3
3
  "license": "UNLICENSED",
4
- "version": "39.18.0",
4
+ "version": "41.3.2",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "publishConfig": {
@@ -27,8 +27,8 @@
27
27
  "test": "vitest"
28
28
  },
29
29
  "peerDependencies": {
30
- "@redis-ui/icons": "^6.1.0",
31
- "@redis-ui/styles": "^12.9.0",
30
+ "@redis-ui/icons": "^6.3.12",
31
+ "@redis-ui/styles": "^13.1.7",
32
32
  "react": "^17.0.0 || ^18.0.0",
33
33
  "react-dom": "^17.0.0 || ^18.0.0",
34
34
  "styled-components": "^5.0.0"
@@ -1,23 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
4
- const TextButton = require("../../../../../Button/TextButton/TextButton.cjs");
5
- const ActionButton = ({
6
- onClick,
7
- children,
8
- ...restProps
9
- }) => {
10
- if (!onClick || !children) {
11
- return null;
12
- }
13
- const handleActionButtonClick = (e) => {
14
- e.stopPropagation();
15
- onClick(e);
16
- };
17
- return jsxRuntime.jsxRuntimeExports.jsx(TextButton.default, {
18
- onClick: handleActionButtonClick,
19
- ...restProps,
20
- children
21
- });
22
- };
23
- exports.ActionButton = ActionButton;
@@ -1,23 +0,0 @@
1
- import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
2
- import TextButton from "../../../../../Button/TextButton/TextButton.js";
3
- const ActionButton = ({
4
- onClick,
5
- children,
6
- ...restProps
7
- }) => {
8
- if (!onClick || !children) {
9
- return null;
10
- }
11
- const handleActionButtonClick = (e) => {
12
- e.stopPropagation();
13
- onClick(e);
14
- };
15
- return jsxRuntimeExports.jsx(TextButton, {
16
- onClick: handleActionButtonClick,
17
- ...restProps,
18
- children
19
- });
20
- };
21
- export {
22
- ActionButton
23
- };
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
4
- const CollapseIndicator_style = require("./CollapseIndicator.style.cjs");
5
- const Section_context = require("../../../../Section.context.cjs");
6
- const CollapseIndicator = (props) => {
7
- const {
8
- collapsible
9
- } = Section_context.useSectionContext();
10
- if (collapsible) {
11
- return jsxRuntime.jsxRuntimeExports.jsx(CollapseIndicator_style.CollapseIcon, {
12
- size: "M",
13
- "aria-hidden": true,
14
- ...props
15
- });
16
- }
17
- return null;
18
- };
19
- exports.CollapseIndicator = CollapseIndicator;
@@ -1,2 +0,0 @@
1
- import { SectionCollapseIndicatorProps } from './CollapseIndicator.types';
2
- export declare const CollapseIndicator: (props: SectionCollapseIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -1,19 +0,0 @@
1
- import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
2
- import { CollapseIcon } from "./CollapseIndicator.style.js";
3
- import { useSectionContext } from "../../../../Section.context.js";
4
- const CollapseIndicator = (props) => {
5
- const {
6
- collapsible
7
- } = useSectionContext();
8
- if (collapsible) {
9
- return jsxRuntimeExports.jsx(CollapseIcon, {
10
- size: "M",
11
- "aria-hidden": true,
12
- ...props
13
- });
14
- }
15
- return null;
16
- };
17
- export {
18
- CollapseIndicator
19
- };
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const _styled = require("styled-components");
4
- const redisUiIcons = require("@redislabsdev/redis-ui-icons");
5
- const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
6
- const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
7
- const CollapseIcon = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
8
- displayName: "CollapseIndicatorstyle__CollapseIcon",
9
- componentId: "RedisUI__sc-i5i8uh-0"
10
- })(["transition:transform 0.1s;"]);
11
- exports.CollapseIcon = CollapseIcon;
@@ -1 +0,0 @@
1
- export declare const CollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
@@ -1,9 +0,0 @@
1
- import _styled from "styled-components";
2
- import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
3
- const CollapseIcon = _styled(ChevronDownIcon).withConfig({
4
- displayName: "CollapseIndicatorstyle__CollapseIcon",
5
- componentId: "RedisUI__sc-i5i8uh-0"
6
- })(["transition:transform 0.1s;"]);
7
- export {
8
- CollapseIcon
9
- };
@@ -1,2 +0,0 @@
1
- import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons/monochrome';
2
- export type SectionCollapseIndicatorProps = MonochromeIconProps;
@@ -1 +0,0 @@
1
- export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;