@redis-ui/components 39.18.0 → 41.3.2

package/dist/AppSelectionMenu/components/Icon/Icon.cjs

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
-const Icon = () => jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.MenuIcon, {});
+const Icon = () => jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.MenuIcon, {
+  customColor: "currentColor"
+});
 exports.Icon = Icon;

package/dist/AppSelectionMenu/components/Icon/Icon.js

@@ -1,6 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { MenuIcon } from "@redislabsdev/redis-ui-icons";
-const Icon = () => jsxRuntimeExports.jsx(MenuIcon, {});
+const Icon = () => jsxRuntimeExports.jsx(MenuIcon, {
+  customColor: "currentColor"
+});
 export {
   Icon
 };

package/dist/AppSelectionMenu/components/Trigger/Trigger.styles.cjs

@@ -13,7 +13,7 @@ const getStyles = (theme) => _styled.css`
   width: ${theme.components.appSelectionMenu.trigger.width};
   padding: ${theme.components.appSelectionMenu.trigger.padding};
 `;
-const maps = [css_utils.tokenMaps.bgColor];
+const maps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor, css_utils.tokenMaps.borderColor];
 const getStateStyle = (theme, active) => {
   const state = active ? "on" : "off";
   const stateColors = theme.components.appSelectionMenu.trigger.toggleStates[state];

package/dist/AppSelectionMenu/components/Trigger/Trigger.styles.js

@@ -9,7 +9,7 @@ const getStyles = (theme) => css`
   width: ${theme.components.appSelectionMenu.trigger.width};
   padding: ${theme.components.appSelectionMenu.trigger.padding};
 `;
-const maps = [tokenMaps.bgColor];
+const maps = [tokenMaps.bgColor, tokenMaps.textColor, tokenMaps.borderColor];
 const getStateStyle = (theme, active) => {
   const state = active ? "on" : "off";
   const stateColors = theme.components.appSelectionMenu.trigger.toggleStates[state];

package/dist/AutoCompleteSelect/AutoCompleteSelect.style.d.ts

@@ -13,7 +13,7 @@ export declare const ContentContainer: import("styled-components").StyledCompone
     Label: (({ children, text, icon, ...restProps }: import("../Menu").MenuLabelProps & import("../Menu").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: (props: import("../Menu/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("../Menu/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("../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {

package/dist/Banner/Banner.d.ts

@@ -5,11 +5,11 @@ declare const Banner: (({ show, onClose, actions, message, showIcon, showCloseBu
     Compose: ({ size, variant, layoutVariant, onClose, ...props }: import("./components/BannerSemanticComponents").SemanticContainerProps & {
         layoutVariant?: import("./Banner.types").BannerLayout | undefined;
         onClose?: VoidFunction | undefined;
-    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ customIcon, variant, ...props }: import("./components/Icon/Icon.types").BannerIconProps) => import("react/jsx-runtime").JSX.Element;
     Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps & ChildFree<ComposeElementProps<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element | null) & {
-        Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps & ChildFree<ComposeElementProps<HTMLElement>>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("./Banner.types").BannerActionType & {
             size?: "M" | "S" | undefined;
             variant?: import("./components/BannerSemanticComponents").SemanticOutlineVariant | undefined;

package/dist/Banner/components/Actions/Actions.d.ts

@@ -1,7 +1,7 @@
 import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
 import type { ActionsProps } from './Actions.types';
 declare const Actions: (({ primary, secondary, ...props }: ActionsProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("../..").BannerActionType & {
         size?: "M" | "S" | undefined;
         variant?: import("../BannerSemanticComponents").SemanticOutlineVariant | undefined;

package/dist/Banner/components/Compose/Compose.style.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const BannerContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const BannerContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.types.d.ts

@@ -1,4 +1,4 @@
-import { TooltipContentProps } from 'src/Tooltip/components/Content/Content.types';
+import { TooltipContentProps } from '../../../../../Tooltip/components/Content/Content.types';
 import { BoxSelectionGroupBox } from '../../../../BoxSelectionGroup.types';
 import { ComposeElementProps } from '../../../../../Helpers/common.types';
 export type BoxSelectionGroupItemComposeProps = {

package/dist/ChipList/Components/ExtraItem.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Chip = require("../../Chip/Chip.cjs");
 const ExtraItem_style = require("./ExtraItem.style.cjs");
 const useScrollableTooltip = require("../../Tooltip/hooks/useScrollableTooltip.cjs");
@@ -19,6 +20,7 @@ const ExtraItem = ({
   chips,
   renderTooltip = defaultTooltip
 }) => {
+  const theme = redisUiStyles.useTheme();
   const {
     tooltipScrollContainerRef,
     onOpenChange,
@@ -32,6 +34,7 @@ const ExtraItem = ({
       disableInteractionHelper: true,
       withButton: true,
       placement: "right",
+      backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntime.jsxRuntimeExports.jsx(ExtraItem_style.ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content

package/dist/ChipList/Components/ExtraItem.js

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
 import Chip from "../../Chip/Chip.js";
 import { ExtraListContainer, ExtraListItem } from "./ExtraItem.style.js";
 import { useScrollableTooltip } from "../../Tooltip/hooks/useScrollableTooltip.js";
@@ -17,6 +18,7 @@ const ExtraItem = ({
   chips,
   renderTooltip = defaultTooltip
 }) => {
+  const theme = useTheme();
   const {
     tooltipScrollContainerRef,
     onOpenChange,
@@ -30,6 +32,7 @@ const ExtraItem = ({
       disableInteractionHelper: true,
       withButton: true,
       placement: "right",
+      backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntimeExports.jsx(ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content

package/dist/Drawer/Drawer.d.ts

@@ -5,10 +5,10 @@ declare const Drawer: (({ children, persistent, open, onOpenChange, containerEle
         Compose: ({ children, ...props }: import("./components/Header/components/Compose/Compose.types").DrawerHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ hidden, children, ...restProps }: import("./components/Header/components/Title/Title.types").DrawerContentTitleProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").DrawerDescriptionProps & 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").DrawerDescriptionProps & 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: (props: import("./components/Body/Body.types").DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ focusableForScroll, ...props }: import("./components/Body/Body.types").DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
     Footer: (({ primaryButtonText, secondaryButtonText, tertiaryButtonText, tertiaryButtonIcon, primaryButtonDisabled, secondaryButtonDisabled, tertiaryButtonDisabled, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, ...restProps }: import("./components/Footer/Footer.types").DrawerFooterProps) => import("react/jsx-runtime").JSX.Element) & {
         ActionButtonsContainer: ({ children, ...props }: import("./components/Footer/components/ActionButtonsContainer/ActionButtonsContainer.types").ActionButtonsContainerProps) => import("react/jsx-runtime").JSX.Element;
         Compose: (props: import("./components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Drawer/components/Body/Body.cjs

@@ -1,9 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
 const Body_style = require("./Body.style.cjs");
-const Body = (props) => jsxRuntime.jsxRuntimeExports.jsx(Body_style.DrawerBody, {
-  tabIndex: 0,
+const useScrollable = require("../../../Helpers/hooks/useScrollable.cjs");
+const Body = ({
+  focusableForScroll = true,
   ...props
-});
+}) => {
+  const ref = React.useRef(null);
+  const scrollable = useScrollable.useScrollable(ref);
+  return jsxRuntime.jsxRuntimeExports.jsx(Body_style.DrawerBody, {
+    ref: focusableForScroll ? ref : void 0,
+    ...scrollable && {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Drawer content"
+    },
+    ...props
+  });
+};
 exports.default = Body;

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

@@ -1,3 +1,3 @@
 import { DrawerBodyProps } from './Body.types';
-declare const Body: (props: DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Body: ({ focusableForScroll, ...props }: DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

package/dist/Drawer/components/Body/Body.js

@@ -1,9 +1,23 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useRef } from "react";
 import { DrawerBody } from "./Body.style.js";
-const Body = (props) => jsxRuntimeExports.jsx(DrawerBody, {
-  tabIndex: 0,
+import { useScrollable } from "../../../Helpers/hooks/useScrollable.js";
+const Body = ({
+  focusableForScroll = true,
   ...props
-});
+}) => {
+  const ref = useRef(null);
+  const scrollable = useScrollable(ref);
+  return jsxRuntimeExports.jsx(DrawerBody, {
+    ref: focusableForScroll ? ref : void 0,
+    ...scrollable && {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Drawer content"
+    },
+    ...props
+  });
+};
 export {
   Body as default
 };

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

@@ -1,2 +1,4 @@
 import { HTMLAttributes } from 'react';
-export type DrawerBodyProps = HTMLAttributes<HTMLDivElement>;
+export type DrawerBodyProps = HTMLAttributes<HTMLDivElement> & {
+    focusableForScroll?: boolean;
+};

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.styles.d.ts

@@ -12,7 +12,7 @@ export declare const MenuContent: import("styled-components").StyledComponent<im
     Label: (({ children, text, icon, ...restProps }: import("../../../Menu").MenuLabelProps & import("../../../Menu").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ tooltipOnEllipsis, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("../../../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: (props: import("../../../Menu/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("../../../Menu/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("../../../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;
@@ -23,7 +23,7 @@ export declare const FilterToggleButton: import("styled-components").StyledCompo
 export declare const MenuOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuOption: import("styled-components").StyledComponent<({ isSelected, selected, onClick, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const OptionsSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../../../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("../../../Inputs").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../../../Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/FormField.context.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { FieldStatus } from './FormField.types';
-export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element;
-export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<FieldStatus>> & {
+    passOnlyStateDown?: FieldStatus | ((state: FieldStatus) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
+    passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/FormField.d.ts

@@ -2,10 +2,8 @@
 import { FormFieldProps } from './FormField.types';
 import { ComposeElementProps } from '../Helpers/common.types';
 declare const FormField: (({ children, label, infoIconProps, required, optional, additionalText, ...restProps }: FormFieldProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
-    Nested: ({ id, children }: import("./components/Nested/Nested.types").FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
-    Compose: ({ layout, id, ...restProps }: import("./components/Nested/Nested.types").FormFieldNestedProps & {
-        layout?: import("./FormField.types").FormFieldLayout | undefined;
-    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Nested: ({ id, children, disabledState }: import("./components/Nested/Nested.types").FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ layout, id, ...restProps }: import("./components/Compose/Compose.types").FormFieldComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     AdditionalText: ({ size, children, forceStatus, ...restProps }: import("./components/AdditionalText/AdditionalText.types").AdditionalTextProps) => import("react/jsx-runtime").JSX.Element | null;
     Label: (({ label, infoIconProps, required, optional, readOnly, ...restProps }: import("../Label").LabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ children, readOnly, ...restProps }: import("../Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/components/Compose/Compose.d.ts

@@ -1,4 +1,4 @@
 import { FormFieldComposeProps } from './Compose.types';
-import { ComposeElementProps } from '../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../Helpers';
 declare const Compose: ({ layout, id, ...restProps }: FormFieldComposeProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/FormField/components/Compose/Compose.types.d.ts

@@ -1,5 +1,5 @@
 import { FormFieldLayout } from '../../FormField.types';
-import { FormFieldNestedProps } from '../Nested/Nested.types';
-export type FormFieldComposeProps = FormFieldNestedProps & {
+export type FormFieldComposeProps = {
+    id?: string;
     layout?: FormFieldLayout;
 };

package/dist/FormField/components/Nested/Nested.cjs

@@ -2,16 +2,33 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const FormField_context = require("../../FormField.context.cjs");
+const Field_context = require("../../../Inputs/components/Context/Field.context.cjs");
 const SharedId_context = require("../../../Helpers/contexts/SharedId.context.cjs");
+const DISABLED_STATE_TO_PASS = true;
 const Nested = ({
   id,
-  children
-}) => jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdProvider, {
-  customId: id,
-  children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusProvider, {
-    children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
-      children
+  children,
+  disabledState = "smart"
+}) => {
+  const otherProviders = jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdProvider, {
+    customId: id,
+    children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusProvider, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
+        children
+      })
     })
-  })
-});
+  });
+  if (disabledState === "smart") {
+    return jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
+      passOnlyStateDown: DISABLED_STATE_TO_PASS,
+      children: otherProviders
+    });
+  }
+  if (disabledState === "cut") {
+    return jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledProvider, {
+      children: otherProviders
+    });
+  }
+  return otherProviders;
+};
 exports.default = Nested;

package/dist/FormField/components/Nested/Nested.d.ts

@@ -1,3 +1,3 @@
 import { FormFieldNestedProps } from './Nested.types';
-declare const Nested: ({ id, children }: FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
+declare const Nested: ({ id, children, disabledState }: FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
 export default Nested;

package/dist/FormField/components/Nested/Nested.js

@@ -1,17 +1,34 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { FieldStatusProvider, FieldReadonlyProvider } from "../../FormField.context.js";
+import { FieldDisabledTransProvider, FieldDisabledProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdProvider } from "../../../Helpers/contexts/SharedId.context.js";
+const DISABLED_STATE_TO_PASS = true;
 const Nested = ({
   id,
-  children
-}) => jsxRuntimeExports.jsx(SharedIdProvider, {
-  customId: id,
-  children: jsxRuntimeExports.jsx(FieldStatusProvider, {
-    children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
-      children
+  children,
+  disabledState = "smart"
+}) => {
+  const otherProviders = jsxRuntimeExports.jsx(SharedIdProvider, {
+    customId: id,
+    children: jsxRuntimeExports.jsx(FieldStatusProvider, {
+      children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
+        children
+      })
     })
-  })
-});
+  });
+  if (disabledState === "smart") {
+    return jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
+      passOnlyStateDown: DISABLED_STATE_TO_PASS,
+      children: otherProviders
+    });
+  }
+  if (disabledState === "cut") {
+    return jsxRuntimeExports.jsx(FieldDisabledProvider, {
+      children: otherProviders
+    });
+  }
+  return otherProviders;
+};
 export {
   Nested as default
 };

package/dist/FormField/components/Nested/Nested.types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
+export type DisableStateManagement = 'pass' | 'cut' | 'smart';
 export type FormFieldNestedProps = {
     children?: ReactNode;
     id?: string;
+    disabledState?: DisableStateManagement;
 };

package/dist/Helpers/common.types.d.ts

@@ -9,6 +9,6 @@ export type AnyOtherString = string & NonNullable<unknown>;
 export type ComposeChildrenProps = {
     children: ReactNode;
 };
-export type ComposeElementProps<T extends HTMLElement = HTMLDivElement> = ComposeChildrenProps & Omit<HTMLAttributes<T>, 'children' | 'content'>;
+export type ComposeElementProps<T extends HTMLElement = HTMLElement> = ComposeChildrenProps & Omit<HTMLAttributes<T>, 'children' | 'content'>;
 export type ToCamel<S extends string | number | symbol> = S extends string ? S extends `${infer Head}_${infer Tail}` ? `${ToCamel<Uncapitalize<Head>>}${Capitalize<ToCamel<Tail>>}` : S extends `${infer Head}-${infer Tail}` ? `${ToCamel<Uncapitalize<Head>>}${Capitalize<ToCamel<Tail>>}` : Uncapitalize<S> : never;
 export type ToPascal<S extends string | number | symbol> = S extends string ? S extends `${infer Head}_${infer Tail}` ? `${Capitalize<ToCamel<Head>>}${Capitalize<ToCamel<Tail>>}` : S extends `${infer Head}-${infer Tail}` ? `${Capitalize<ToCamel<Head>>}${Capitalize<ToCamel<Tail>>}` : Capitalize<S> : never;

package/dist/Helpers/contexts/NullableContext.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const createNullableContext = ({
+  forComponentName
+}) => {
+  const Context = React.createContext(null);
+  const useTheContext = () => {
+    const context = React.useContext(Context);
+    if (context === null) {
+      throw new Error(`${forComponentName} compound components cannot be rendered outside the ${forComponentName} component`);
+    }
+    return context;
+  };
+  return [useTheContext, Context.Provider, Context];
+};
+exports.createNullableContext = createNullableContext;

package/dist/Helpers/contexts/NullableContext.d.ts

@@ -0,0 +1,4 @@
+import { Provider } from 'react';
+export declare const createNullableContext: <T>({ forComponentName }: {
+    forComponentName: string;
+}) => readonly [() => T, Provider<T>, import("react").Context<T | null>];

package/dist/Helpers/contexts/NullableContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+const createNullableContext = ({
+  forComponentName
+}) => {
+  const Context = createContext(null);
+  const useTheContext = () => {
+    const context = useContext(Context);
+    if (context === null) {
+      throw new Error(`${forComponentName} compound components cannot be rendered outside the ${forComponentName} component`);
+    }
+    return context;
+  };
+  return [useTheContext, Context.Provider, Context];
+};
+export {
+  createNullableContext
+};

package/dist/Helpers/contexts/PrimitiveContextState.cjs

@@ -40,8 +40,30 @@ const createPrimitiveContextState = () => {
       children
     });
   };
+  const OverridingStateProvider = ({
+    value,
+    passOnlyStateDown,
+    children
+  }) => {
+    var _a;
+    const [state, setState] = React.useState(value);
+    React.useLayoutEffect(() => {
+      if (value !== void 0) setState(value);
+    }, [value]);
+    const contextState = (_a = React.useContext(Context)) == null ? void 0 : _a.state;
+    const mergedState = contextState !== void 0 && (passOnlyStateDown === contextState || typeof passOnlyStateDown === "function" && passOnlyStateDown(contextState)) ? contextState : state;
+    const context = React.useMemo(() => ({
+      state: mergedState,
+      setState
+    }), [mergedState]);
+    return jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
+      value: context,
+      children
+    });
+  };
   const StateTransProvider = ({
     value,
+    passOnlyStateDown = void 0,
     children
   }) => {
     const context = React.useContext(Context);
@@ -49,6 +71,11 @@ const createPrimitiveContextState = () => {
       value,
       children
     });
+    if (passOnlyStateDown !== void 0) return jsxRuntime.jsxRuntimeExports.jsx(OverridingStateProvider, {
+      passOnlyStateDown,
+      value,
+      children
+    });
     if (value !== void 0) return jsxRuntime.jsxRuntimeExports.jsx(ValueUpdater, {
       value,
       children

package/dist/Helpers/contexts/PrimitiveContextState.d.ts

@@ -1,5 +1,8 @@
 import { ProviderProps } from 'react';
 type StateProviderProps<T> = Partial<ProviderProps<T>>;
+type OverridingStateProps<T> = {
+    passOnlyStateDown?: T | ((state: T) => boolean);
+};
 /**
  * Presents the shared context state for a primitive value.
  *
@@ -11,7 +14,9 @@ type StateProviderProps<T> = Partial<ProviderProps<T>>;
  * The top provider unconditionally creates its own shared state and passes it to descendants.
  *
  * The transitive provider forwards state from the ascendant top provider, if there is one.
- * Otherwise, it behaves like a top state provider.
+ * Otherwise, it behaves like a top provider.<br/>
+ * If the `passOnlyStateDown` prop is set, the provider creates inner shared state (like a top provider),
+ * but overrides the state value with outer state if allowed by the prop
  *
  * Each provider type and hook optionally receives a value and updates state.
  * Undefined values are ignored.
@@ -19,5 +24,5 @@ type StateProviderProps<T> = Partial<ProviderProps<T>>;
  *
  * If no providers are found, the hook returns the state passed to it.
  */
-export declare const createPrimitiveContextState: <T extends string | number | boolean | null>() => readonly [(value?: T | undefined) => T | undefined, ({ value, children }: Partial<ProviderProps<T>>) => import("react/jsx-runtime").JSX.Element, ({ value, children }: Partial<ProviderProps<T>>) => import("react/jsx-runtime").JSX.Element];
+export declare const createPrimitiveContextState: <T extends string | number | boolean | null>() => readonly [(value?: T | undefined) => T | undefined, ({ value, children }: Partial<ProviderProps<T>>) => import("react/jsx-runtime").JSX.Element, ({ value, passOnlyStateDown, children }: Partial<ProviderProps<T>> & OverridingStateProps<T>) => import("react/jsx-runtime").JSX.Element];
 export {};

package/dist/Helpers/contexts/PrimitiveContextState.js

@@ -38,8 +38,30 @@ const createPrimitiveContextState = () => {
       children
     });
   };
+  const OverridingStateProvider = ({
+    value,
+    passOnlyStateDown,
+    children
+  }) => {
+    var _a;
+    const [state, setState] = useState(value);
+    useLayoutEffect(() => {
+      if (value !== void 0) setState(value);
+    }, [value]);
+    const contextState = (_a = useContext(Context)) == null ? void 0 : _a.state;
+    const mergedState = contextState !== void 0 && (passOnlyStateDown === contextState || typeof passOnlyStateDown === "function" && passOnlyStateDown(contextState)) ? contextState : state;
+    const context = useMemo(() => ({
+      state: mergedState,
+      setState
+    }), [mergedState]);
+    return jsxRuntimeExports.jsx(Context.Provider, {
+      value: context,
+      children
+    });
+  };
   const StateTransProvider = ({
     value,
+    passOnlyStateDown = void 0,
     children
   }) => {
     const context = useContext(Context);
@@ -47,6 +69,11 @@ const createPrimitiveContextState = () => {
       value,
       children
     });
+    if (passOnlyStateDown !== void 0) return jsxRuntimeExports.jsx(OverridingStateProvider, {
+      passOnlyStateDown,
+      value,
+      children
+    });
     if (value !== void 0) return jsxRuntimeExports.jsx(ValueUpdater, {
       value,
       children

package/dist/Helpers/hooks/useScrollable.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function isScrollable(el) {
+  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+}
+const useScrollable = (ref) => {
+  const [scrollable, setScrollable] = React.useState(false);
+  React.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;
+};
+exports.useScrollable = useScrollable;

package/dist/Helpers/hooks/useScrollable.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+/** Hook: returns whether element is scrollable */
+export declare const useScrollable: (ref: RefObject<HTMLElement>) => boolean;