@redis-ui/components 39.18.0 → 41.3.2

package/dist/Helpers/hooks/useScrollable.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+function isScrollable(el) {
+  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+}
+const useScrollable = (ref) => {
+  const [scrollable, setScrollable] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const update = () => setScrollable(isScrollable(el));
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    const mutationObserver = new MutationObserver(update);
+    mutationObserver.observe(el, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true
+    });
+    window.addEventListener("resize", update);
+    update();
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [ref]);
+  return scrollable;
+};
+export {
+  useScrollable
+};

package/dist/Helpers/index.d.ts

@@ -3,7 +3,9 @@ export * from './generateId';
 export * from './debounce';
 export * from './contexts/SharedId.context';
 export * from './contexts/PrimitiveContextState';
+export * from './contexts/NullableContext';
 export * from './SelfContained';
 export * from './RestylableElement';
 export * from './contexts/Popper/Popper.context';
 export * from './common.types';
+export * from './hooks/useScrollable';

package/dist/Inputs/Input/Input.d.ts

@@ -2,7 +2,7 @@
 import { RestInputProps } from './Input.types';
 declare const Input: import("react").ForwardRefExoticComponent<import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & import("../components/InputTag/InputTag.types").InputTagProps & import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/ResetButton/ResetButton.types").ResetButtonProps & RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
     StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
-    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/NumericInput/NumericInput.d.ts

@@ -4,7 +4,7 @@ declare const NumericInput: import("react").ForwardRefExoticComponent<import("..
     readOnly?: boolean | undefined;
 } & RestNumericInputProps & import("react").RefAttributes<HTMLInputElement>> & {
     StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
-    Compose: ({ value, defaultValue, onChange, min, max, step, required, maxDecimals, autoValidate, validate, calcStepActionValue, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, min, max, step, required, maxDecimals, autoValidate, validate, calcStepActionValue, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/PasswordInput/components/Compose/Compose.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const PasswordInputCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+export declare const PasswordInputCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
     readonlyRender?: import("../../../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
     readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 }) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Inputs/QuantityCounter/QuantityCounter.d.ts

@@ -4,7 +4,7 @@ declare const QuantityCounter: import("react").ForwardRefExoticComponent<import(
     incrementButtonProps?: Omit<import("./QuantityCounter.types").QuantityCounterStepButtonProps, "action"> | undefined;
     decrementButtonProps?: Omit<import("./QuantityCounter.types").QuantityCounterStepButtonProps, "action"> | undefined;
 } & RestQuantityCounterProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: ({ valueLabel, readonlyRender, children, onMouseEnter, onMouseLeave, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ valueLabel, readonlyRender, children, onMouseEnter, onMouseLeave, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     } & {
@@ -12,7 +12,7 @@ declare const QuantityCounter: import("react").ForwardRefExoticComponent<import(
     }) => import("react/jsx-runtime").JSX.Element;
     StepButton: ({ action, title, variant, size, icon, disabled, onClick, onMouseDown, ...restProps }: import("./QuantityCounter.types").QuantityCounterStepButtonProps) => import("react/jsx-runtime").JSX.Element;
     InputGroup: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").RestInputTagProps & import("./QuantityCounter.types").QuantityCounterInputGroupProps & import("react").RefAttributes<HTMLInputElement>> & {
-        Compose: (props: import("../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Tag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>, any, {
             autoSize: true;
             'aria-description': string;

package/dist/Inputs/QuantityCounter/components/Compose/Compose.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const QuantityCounterCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, min, max, step, required, maxDecimals, autoValidate, validate, calcStepActionValue, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+export declare const QuantityCounterCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, min, max, step, required, maxDecimals, autoValidate, validate, calcStepActionValue, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
     readonlyRender?: import("../../../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
     readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 }) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Inputs/QuantityCounter/components/InputGroup/InputGroup.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { QuantityCounterInputGroupProps } from './InputGroup.types';
 export declare const InputGroup: import("react").ForwardRefExoticComponent<import("../../../components/InputTag/InputTag.types").RestInputTagProps & QuantityCounterInputGroupProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: (props: import("../../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Tag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../components/InputTag/InputTag.types").InputTagProps & import("../../../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>, any, {
         autoSize: true;
         'aria-description': string;

package/dist/Inputs/SearchInput/SearchInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<import("../components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../components/InputTag/InputTag.types").InputTagProps & import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/ResetButton/ResetButton.types").ResetButtonProps & import("..").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/TextArea/TextArea.d.ts

@@ -8,7 +8,7 @@ declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import(".
     StatusIndicator: import("styled-components").StyledComponent<({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null, any, {}, never>;
     Compose: ({ readonlyRender, ...restProps }: Omit<import("../components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter"> & {
         height?: string | undefined;
-    } & Omit<import("../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    } & Omit<import("../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/TextArea/components/Compose/Compose.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TextAreaCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+export declare const TextAreaCompose: import("styled-components").StyledComponent<({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
     readonlyRender?: import("../../../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
     readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 }) => import("react/jsx-runtime").JSX.Element, any, Omit<import("../../../components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter"> & {

package/dist/Inputs/components/Context/Field.context.d.ts

@@ -1,4 +1,6 @@
 import { ReactElement } from 'react';
-export declare const useFieldDisabled: (value?: boolean | undefined) => boolean | undefined, FieldDisabledProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldDisabledTransProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldDisabled: (value?: boolean | undefined) => boolean | undefined, FieldDisabledProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldDisabledTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
+    passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useErrorContent: () => string | ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare const ErrorContentProvider: import("react").Provider<string | ReactElement<any, string | import("react").JSXElementConstructor<any>>>;

package/dist/Loader/Loader.style.cjs

@@ -33,7 +33,7 @@ const MessageText = _styled__default.default.div.withConfig({
 }) => {
   var _a;
   const theme = redisUiStyles.useTheme().components.loader;
-  return ((_a = theme.variants[$variant]) == null ? void 0 : _a.textColor) ?? theme.textColor;
+  return (_a = theme.variants[$variant]) == null ? void 0 : _a.textColor;
 });
 const getVariantStyle = (variant) => {
   return _styled.css`

package/dist/Loader/Loader.style.js

@@ -29,7 +29,7 @@ const MessageText = _styled.div.withConfig({
 }) => {
   var _a;
   const theme = useTheme().components.loader;
-  return ((_a = theme.variants[$variant]) == null ? void 0 : _a.textColor) ?? theme.textColor;
+  return (_a = theme.variants[$variant]) == null ? void 0 : _a.textColor;
 });
 const getVariantStyle = (variant) => {
   return css`

package/dist/Menu/Menu.d.ts

@@ -17,7 +17,7 @@ declare const Menu: (({ disabled, ...restProps }: MenuProps) => import("react/js
         Label: (({ children, text, icon, ...restProps }: import(".").MenuLabelProps & import(".").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
             Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, ...props }: import("./components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-            Compose: (props: import("./components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+            Compose: (props: import("./components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
         };
         Separator: (props: import("./components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     };

package/dist/Menu/components/Content/Content.d.ts

@@ -13,7 +13,7 @@ declare const Content: import("react").ForwardRefExoticComponent<MenuContentProp
     Label: (({ children, text, icon, ...restProps }: import("../..").MenuLabelProps & import("../..").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ tooltipOnEllipsis, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("./components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: (props: import("./components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../../../Helpers").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("./components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../../../Helpers").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     };
     Separator: (props: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/Menu/components/Content/components/Label/Label.d.ts

@@ -3,6 +3,6 @@ import { MenuLabelProps, RestMenuLabelProps } from './Label.types';
 declare const Label: (({ children, text, icon, ...restProps }: MenuLabelProps & RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
     Text: ({ tooltipOnEllipsis, ...restProps }: import("../../../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, ...props }: import("../Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-    Compose: (props: import("./components/Compose/Compose.types").MenuLabelComposeProps & import("../../../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("./components/Compose/Compose.types").MenuLabelComposeProps & import("../../../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
 };
 export default Label;

package/dist/Modal/Modal.d.ts

@@ -8,7 +8,7 @@ declare const Modal: (({ children, defaultOpen, onOpenChange, open, withButton,
             Compose: (props: import("./components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
             Title: ({ hidden, children, ...restProps }: import("./components/Content/components/Header/components/Title/Title.types").TitleProps) => import("react/jsx-runtime").JSX.Element;
         };
-        Description: (({ hidden, children, ...restProps }: import("./components/Content/components/Description/Description.types").ModalDescriptionProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
+        Description: (({ hidden, children, ...restProps }: import("./components/Content/components/Description/Description.types").ModalDescriptionProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
             Text: (props: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
         };
         Body: (({ content, ...restProps }: import("./components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {

package/dist/Modal/components/Content/Content.d.ts

@@ -6,7 +6,7 @@ declare const Content: (({ title, description, descriptionHidden, onCancel, prim
         Compose: (props: import("./components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ hidden, children, ...restProps }: import("./components/Header/components/Title/Title.types").TitleProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").ModalDescriptionProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
+    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").ModalDescriptionProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
         Text: (props: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
     Body: (({ content, ...restProps }: import("./components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {

package/dist/ProfileIcon/ProfileIcon.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { AnyOtherString } from 'src/Helpers/common.types';
+import { AnyOtherString } from '../Helpers/common.types';
 export type Colors = {
     primaryColor: string;
     secondaryColor: string;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const index = require("../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const ScreenReaderAnnounce = ({
+  text,
+  allowAnnounce = void 0,
+  ...restProps
+}) => {
+  const [enabled, setEnabled] = React.useState(false);
+  const hasTextChangedRef = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (allowAnnounce === void 0) {
+      if (hasTextChangedRef.current) {
+        setEnabled(true);
+      } else {
+        hasTextChangedRef.current = true;
+      }
+    } else {
+      setEnabled(allowAnnounce);
+    }
+  }, [allowAnnounce, text]);
+  if (!enabled || !text) return null;
+  return jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
+    "aria-atomic": true,
+    "aria-live": restProps.role === "alert" ? void 0 : "polite",
+    ...restProps,
+    children: text
+  });
+};
+exports.ScreenReaderAnnounce = ScreenReaderAnnounce;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, AriaAttributes } from 'react';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+export type ScreenReaderAnnounceProps = Omit<ComponentProps<typeof VisuallyHidden>, 'children' | 'style' | 'className' | 'aria-hidden' | 'role' | 'text' | 'asChild' | keyof AriaAttributes> & Pick<AriaAttributes, 'aria-live' | 'aria-atomic'> & {
+    text: string;
+    allowAnnounce?: boolean;
+    role?: 'alert' | 'status' | 'log';
+};
+export declare const ScreenReaderAnnounce: ({ text, allowAnnounce, ...restProps }: ScreenReaderAnnounceProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ScreenReaderAnnounce/ScreenReaderAnnounce.js

@@ -0,0 +1,32 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useState, useRef, useLayoutEffect } from "react";
+import { VisuallyHidden } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+const ScreenReaderAnnounce = ({
+  text,
+  allowAnnounce = void 0,
+  ...restProps
+}) => {
+  const [enabled, setEnabled] = useState(false);
+  const hasTextChangedRef = useRef(false);
+  useLayoutEffect(() => {
+    if (allowAnnounce === void 0) {
+      if (hasTextChangedRef.current) {
+        setEnabled(true);
+      } else {
+        hasTextChangedRef.current = true;
+      }
+    } else {
+      setEnabled(allowAnnounce);
+    }
+  }, [allowAnnounce, text]);
+  if (!enabled || !text) return null;
+  return jsxRuntimeExports.jsx(VisuallyHidden, {
+    "aria-atomic": true,
+    "aria-live": restProps.role === "alert" ? void 0 : "polite",
+    ...restProps,
+    children: text
+  });
+};
+export {
+  ScreenReaderAnnounce
+};

package/dist/ScreenReaderAnnounce/index.d.ts

@@ -0,0 +1 @@
+export * from './ScreenReaderAnnounce';

package/dist/Section/Section.cjs

@@ -4,29 +4,32 @@ const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Header = require("./components/Header/Header.cjs");
 const Body = require("./components/Body/Body.cjs");
+const SummaryBar = require("./components/SummaryBar/SummaryBar.cjs");
 const Section = Object.assign(({
   content,
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo,
+  actions,
+  summary,
+  summaryAlwaysVisible,
   ...composeProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Section.Compose, {
     ...composeProps,
     children: [jsxRuntime.jsxRuntimeExports.jsx(Section.Header, {
       label,
-      onAction,
-      actionButtonText,
-      collapsedInfo
+      actions
     }), jsxRuntime.jsxRuntimeExports.jsx(Section.Body, {
-      content
+      children: content
+    }), jsxRuntime.jsxRuntimeExports.jsx(Section.SummaryBar, {
+      alwaysVisible: summaryAlwaysVisible,
+      children: summary
     })]
   });
 }, {
   Compose: Compose.Compose,
   Header: Header.Header,
-  Body: Body.Body
+  Body: Body.Body,
+  SummaryBar: SummaryBar.SummaryBar
 });
 const Section$1 = Section;
 exports.default = Section$1;

package/dist/Section/Section.d.ts

@@ -1,13 +1,15 @@
+/// <reference types="react" />
 import { SectionProps } from './Section.types';
-declare const Section: (({ content, label, onAction, actionButtonText, collapsedInfo, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ open, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Header: (({ label, onAction, actionButtonText, collapsedInfo }: import("./components/Header/Header.types").SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, collapsedInfo, ...props }: import("./components/Header/components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Section: (({ content, label, actions, summary, summaryAlwaysVisible, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ open: controlledOpen, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Header: (({ label, actions }: import("./components/Header/Header.types").SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: (props: import("./components/Header/components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ label, ...restProps }: import("./components/Header/components/Label/Label.types").SectionHeaderLabelProps) => import("react/jsx-runtime").JSX.Element;
-        ActionButton: ({ onClick, children, ...restProps }: import("./components/Header/components/ActionButton/ActionButton.types").SectionHeaderActionButtonsProps) => import("react/jsx-runtime").JSX.Element | null;
-        CollapseIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element | null;
+        ActionButton: import("react").ForwardRefExoticComponent<import("..").TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+        CollapseButton: ({ hidden, icon, ...props }: import("./components/Header/components/CollapseButton/CollapseButton.types").SectionCollapseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
         Group: (props: import("./components/Header/components/Group/Group.types").SectionHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Body: ({ content, ...props }: import("./components/Body/Body.types").SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Body: ({ children, ...props }: import("./components/Body/Body.types").SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    SummaryBar: ({ children, alwaysVisible, ...restProps }: import("./components/SummaryBar/SummaryBar.types").SummaryBarProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Section;

package/dist/Section/Section.js

@@ -2,29 +2,32 @@ import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { Compose } from "./components/Compose/Compose.js";
 import { Header } from "./components/Header/Header.js";
 import { Body } from "./components/Body/Body.js";
+import { SummaryBar } from "./components/SummaryBar/SummaryBar.js";
 const Section = Object.assign(({
   content,
   label,
-  onAction,
-  actionButtonText,
-  collapsedInfo,
+  actions,
+  summary,
+  summaryAlwaysVisible,
   ...composeProps
 }) => {
   return jsxRuntimeExports.jsxs(Section.Compose, {
     ...composeProps,
     children: [jsxRuntimeExports.jsx(Section.Header, {
       label,
-      onAction,
-      actionButtonText,
-      collapsedInfo
+      actions
     }), jsxRuntimeExports.jsx(Section.Body, {
-      content
+      children: content
+    }), jsxRuntimeExports.jsx(Section.SummaryBar, {
+      alwaysVisible: summaryAlwaysVisible,
+      children: summary
     })]
   });
 }, {
   Compose,
   Header,
-  Body
+  Body,
+  SummaryBar
 });
 const Section$1 = Section;
 export {

package/dist/Section/Section.types.d.ts

@@ -1,10 +1,16 @@
 import { ReactNode } from 'react';
 import { SectionComposeProps } from './components/Compose/Compose.types';
-import { SectionHeaderProps } from './components/Header/Header.types';
-export interface SectionProps extends Omit<SectionComposeProps, 'children'>, Pick<SectionHeaderProps, 'label' | 'onAction' | 'actionButtonText' | 'collapsedInfo'> {
+import { OwnSectionHeaderProps } from './components/Header/Header.types';
+import { ChildFree } from '../Helpers';
+export interface SectionProps extends ChildFree<SectionComposeProps>, OwnSectionHeaderProps {
     content?: ReactNode;
+    summary?: ReactNode;
+    summaryAlwaysVisible?: boolean;
 }
 export interface SectionContextProps {
     collapsible?: boolean;
     setHasContent: (hasContent: boolean) => void;
+    triggerId: string | undefined;
+    labelId: string;
+    open: boolean;
 }

package/dist/Section/components/Body/Body.cjs

@@ -5,21 +5,25 @@ const React = require("react");
 const Section_context = require("../../Section.context.cjs");
 const Body_style = require("./Body.style.cjs");
 const Body = ({
-  content,
+  children,
   ...props
 }) => {
   const {
-    setHasContent
+    setHasContent,
+    labelId
   } = Section_context.useSectionContext();
+  const hasContent = !!React.Children.toArray(children).filter((ch) => typeof ch !== "string" || ch.trim() !== "").length;
   React.useLayoutEffect(() => {
-    setHasContent(!!content);
-  }, [setHasContent, content]);
-  if (!content) {
+    setHasContent(hasContent);
+  }, [setHasContent, hasContent]);
+  if (!hasContent) {
     return null;
   }
   return jsxRuntime.jsxRuntimeExports.jsx(Body_style.SectionBody, {
+    role: "region",
+    "aria-labelledby": labelId,
     ...props,
-    children: content
+    children
   });
 };
 exports.Body = Body;

package/dist/Section/components/Body/Body.d.ts

@@ -1,2 +1,2 @@
 import { SectionBodyProps } from './Body.types';
-export declare const Body: ({ content, ...props }: SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Body: ({ children, ...props }: SectionBodyProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Section/components/Body/Body.js

@@ -1,23 +1,27 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useLayoutEffect } from "react";
+import { Children, useLayoutEffect } from "react";
 import { useSectionContext } from "../../Section.context.js";
 import { SectionBody } from "./Body.style.js";
 const Body = ({
-  content,
+  children,
   ...props
 }) => {
   const {
-    setHasContent
+    setHasContent,
+    labelId
   } = useSectionContext();
+  const hasContent = !!Children.toArray(children).filter((ch) => typeof ch !== "string" || ch.trim() !== "").length;
   useLayoutEffect(() => {
-    setHasContent(!!content);
-  }, [setHasContent, content]);
-  if (!content) {
+    setHasContent(hasContent);
+  }, [setHasContent, hasContent]);
+  if (!hasContent) {
     return null;
   }
   return jsxRuntimeExports.jsx(SectionBody, {
+    role: "region",
+    "aria-labelledby": labelId,
     ...props,
-    children: content
+    children
   });
 };
 export {

package/dist/Section/components/Body/Body.style.cjs

@@ -8,5 +8,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SectionBody = _styled__default.default(index.Content).withConfig({
   displayName: "Bodystyle__SectionBody",
   componentId: "RedisUI__sc-1oa2ez8-0"
-})(["display:flex;padding:", ";justify-content:space-between;align-items:center;&[hidden]{padding:0;}"], () => redisUiStyles.useTheme().components.section.body.padding);
+})(["display:flex;padding:", ";justify-content:space-between;align-items:center;&[hidden]{padding:0;}&:not(:first-child){box-shadow:inset 0 ", " 0 0 ", ";}"], () => redisUiStyles.useTheme().components.section.body.padding, () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color);
 exports.SectionBody = SectionBody;

package/dist/Section/components/Body/Body.style.js

@@ -4,7 +4,7 @@ import { Content } from "../../../node_modules/@radix-ui/react-collapsible/dist/
 const SectionBody = _styled(Content).withConfig({
   displayName: "Bodystyle__SectionBody",
   componentId: "RedisUI__sc-1oa2ez8-0"
-})(["display:flex;padding:", ";justify-content:space-between;align-items:center;&[hidden]{padding:0;}"], () => useTheme().components.section.body.padding);
+})(["display:flex;padding:", ";justify-content:space-between;align-items:center;&[hidden]{padding:0;}&:not(:first-child){box-shadow:inset 0 ", " 0 0 ", ";}"], () => useTheme().components.section.body.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color);
 export {
   SectionBody
 };

package/dist/Section/components/Body/Body.types.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from 'react';
-import { ChildFree } from '../../../Helpers/common.types';
-export interface SectionBodyProps extends ChildFree<Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>> {
-    content: ReactNode;
-}
+import { ComposeElementProps } from '../../../Helpers';
+export type SectionBodyProps = ComposeElementProps;

package/dist/Section/components/Compose/Compose.cjs

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
-const Compose_style = require("./Compose.style.cjs");
+const index$1 = require("../../../node_modules/@radix-ui/react-id/dist/index.cjs");
+const index = require("../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
 const Section_context = require("../../Section.context.cjs");
+const Compose_style = require("./Compose.style.cjs");
 const Compose = ({
-  open,
+  open: controlledOpen,
   defaultOpen,
   disabled,
   onOpenChange,
@@ -14,15 +16,24 @@ const Compose = ({
   ...props
 }) => {
   const [hasContent, setHasContent] = React.useState(false);
+  const [open = false, setOpen] = index.useControllableState({
+    prop: hasContent && (!collapsible || controlledOpen),
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerId = index$1.useId();
+  const labelId = index$1.useId();
   const contextValue = React.useMemo(() => ({
+    open,
     collapsible,
-    setHasContent
-  }), [collapsible]);
+    setHasContent,
+    triggerId: collapsible && hasContent ? triggerId : void 0,
+    labelId
+  }), [collapsible, hasContent, labelId, open, triggerId]);
   return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CollapsibleRoot, {
-    open: hasContent && (!collapsible || open),
-    defaultOpen,
+    open,
+    onOpenChange: hasContent && collapsible ? setOpen : void 0,
     disabled,
-    onOpenChange,
     ...props,
     children: jsxRuntime.jsxRuntimeExports.jsx(Section_context.SectionContext.Provider, {
       value: contextValue,