@redis-ui/components 38.6.0 → 39.12.0

package/dist/AutoCompleteSelect/AutoCompleteSelect.cjs

@@ -81,7 +81,7 @@ const AutoCompleteSelect = React__default.default.forwardRef(({
       onInteractOutside: onClickOutside,
       ref: contentRef,
       children: [!isSuggestedOptionsEmpty && jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Label, {
-        children: optionsLabel
+        text: optionsLabel
       }), suggestedOptions.map((item, index) => jsxRuntime.jsxRuntimeExports.jsx(AutoCompleteSelect_style.Item, {
         role: "button",
         onClick: () => onItemClick(item.value),

package/dist/AutoCompleteSelect/AutoCompleteSelect.js

@@ -77,7 +77,7 @@ const AutoCompleteSelect = React__default.forwardRef(({
       onInteractOutside: onClickOutside,
       ref: contentRef,
       children: [!isSuggestedOptionsEmpty && jsxRuntimeExports.jsx(Menu.Content.Label, {
-        children: optionsLabel
+        text: optionsLabel
       }), suggestedOptions.map((item, index) => jsxRuntimeExports.jsx(Item, {
         role: "button",
         onClick: () => onItemClick(item.value),

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

@@ -1,16 +1,20 @@
 /// <reference types="react" />
 export declare const Item: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Menu/components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: import("../Menu").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../Menu").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => 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;
         SubHead: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: ({ isSelected, variant, onClick, ...restProps }: import("../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ isSelected, selected, onClick, ...restProps }: import("../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Check: ({ icon, ...restProps }: import("../Menu/components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("../Menu/components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
     DropdownArrow: (props: import("../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("../Menu/components/Content/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Label: (({ children, text, icon, ...restProps }: import("../Menu").MenuLabelProps & import("../Menu").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => 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("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "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, {
     $contentMaxHeight?: string | undefined;

package/dist/Button/ActionIconButton/ActionIconButton.cjs

@@ -12,7 +12,6 @@ const ActionIconButton = React__default.default.forwardRef(({
   variant = "primary",
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   const theme = redisUiStyles.useTheme().components.actionIconButton;
@@ -26,8 +25,7 @@ const ActionIconButton = React__default.default.forwardRef(({
       ...restProps,
       children: jsxRuntime.jsxRuntimeExports.jsx(Icon.default, {
         icon,
-        customSize: theme.sizes[size].iconSize,
-        title
+        customSize: theme.sizes[size].iconSize
       })
     })
   });

package/dist/Button/ActionIconButton/ActionIconButton.js

@@ -8,7 +8,6 @@ const ActionIconButton = React__default.forwardRef(({
   variant = "primary",
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   const theme = useTheme().components.actionIconButton;
@@ -22,8 +21,7 @@ const ActionIconButton = React__default.forwardRef(({
       ...restProps,
       children: jsxRuntimeExports.jsx(Icon, {
         icon,
-        customSize: theme.sizes[size].iconSize,
-        title
+        customSize: theme.sizes[size].iconSize
       })
     })
   });

package/dist/Button/IconButton/IconButton.cjs

@@ -10,7 +10,6 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
 const IconButton = React__default.default.forwardRef(({
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   return jsxRuntime.jsxRuntimeExports.jsx(Button_context.ButtonContext.Provider, {
@@ -22,8 +21,7 @@ const IconButton = React__default.default.forwardRef(({
       ...restProps,
       children: jsxRuntime.jsxRuntimeExports.jsx(Icon.default, {
         icon,
-        customSize: "100%",
-        title
+        customSize: "100%"
       })
     })
   });

package/dist/Button/IconButton/IconButton.js

@@ -6,7 +6,6 @@ import { ButtonContext } from "../Button.context.js";
 const IconButton = React__default.forwardRef(({
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   return jsxRuntimeExports.jsx(ButtonContext.Provider, {
@@ -18,8 +17,7 @@ const IconButton = React__default.forwardRef(({
       ...restProps,
       children: jsxRuntimeExports.jsx(Icon, {
         icon,
-        customSize: "100%",
-        title
+        customSize: "100%"
       })
     })
   });

package/dist/Button/components/Icon/Icon.cjs

@@ -18,11 +18,13 @@ const Icon = ({
   const buttonContext = Button_context.useButtonContext();
   const IconElement = icon;
   return jsxRuntime.jsxRuntimeExports.jsx(Icon_style.ButtonIconContainer, {
+    title,
+    "aria-hidden": true,
     children: jsxRuntime.jsxRuntimeExports.jsx(IconElement, {
       customColor: "currentColor",
       size: ICON_SIZES[buttonContext],
       customSize,
-      title
+      "aria-hidden": true
     })
   });
 };

package/dist/Button/components/Icon/Icon.js

@@ -16,11 +16,13 @@ const Icon = ({
   const buttonContext = useButtonContext();
   const IconElement = icon;
   return jsxRuntimeExports.jsx(ButtonIconContainer, {
+    title,
+    "aria-hidden": true,
     children: jsxRuntimeExports.jsx(IconElement, {
       customColor: "currentColor",
       size: ICON_SIZES[buttonContext],
       customSize,
-      title
+      "aria-hidden": true
     })
   });
 };

package/dist/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import { CheckboxProps } from './Checkbox.types';
 declare const Checkbox: (({ label, defaultChecked, checked, onCheckedChange, required, disabled, id, variant, className, style, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ defaultChecked, checked, onCheckedChange, required, disabled, id, variant, ...restProps }: import("./components/Compose/Compose.types").CheckboxComposeProps & import("./components/Compose/Compose.types").RestCheckboxComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: import("./components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ readOnly, ...restProps }: import("./components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("./components/Label/Label.types").CheckboxLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Checkbox;

package/dist/Checkbox/components/Indicator/Indicator.cjs

@@ -4,18 +4,34 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const Checkbox_context = require("../../Checkbox.context.cjs");
 const Indicator_style = require("./Indicator.style.cjs");
-const Indicator = (props) => {
+const Indicator = ({
+  readOnly = false,
+  ...restProps
+}) => {
   const checkboxRootProps = Checkbox_context.useCheckboxContext();
   const Icon = checkboxRootProps.checked === "indeterminate" ? redisUiIcons.MinusIcon : redisUiIcons.CheckBoldIcon;
-  return jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
-    ...props,
-    ...checkboxRootProps,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicatorCheckmark, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
-        customColor: "currentColor",
-        size: "S"
-      })
+  const checkmark = jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicatorCheckmark, {
+    "aria-hidden": true,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
+      customColor: "currentColor",
+      size: "S"
     })
   });
+  const indicatorProps = {
+    "aria-description": checkboxRootProps.checked ? "checked" : "unchecked",
+    ...restProps,
+    ...checkboxRootProps
+  };
+  return readOnly ? jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
+    asChild: true,
+    ...indicatorProps,
+    onCheckedChange: void 0,
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      children: checkmark
+    })
+  }) : jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
+    ...indicatorProps,
+    children: checkmark
+  });
 };
 exports.default = Indicator;

package/dist/Checkbox/components/Indicator/Indicator.d.ts

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

package/dist/Checkbox/components/Indicator/Indicator.js

@@ -1,20 +1,36 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { MinusIcon, CheckBoldIcon } from "@redislabsdev/redis-ui-icons";
 import { useCheckboxContext } from "../../Checkbox.context.js";
-import { CheckboxIndicator, CheckboxIndicatorCheckmark } from "./Indicator.style.js";
-const Indicator = (props) => {
+import { CheckboxIndicatorCheckmark, CheckboxIndicator } from "./Indicator.style.js";
+const Indicator = ({
+  readOnly = false,
+  ...restProps
+}) => {
   const checkboxRootProps = useCheckboxContext();
   const Icon = checkboxRootProps.checked === "indeterminate" ? MinusIcon : CheckBoldIcon;
-  return jsxRuntimeExports.jsx(CheckboxIndicator, {
-    ...props,
-    ...checkboxRootProps,
-    children: jsxRuntimeExports.jsx(CheckboxIndicatorCheckmark, {
-      children: jsxRuntimeExports.jsx(Icon, {
-        customColor: "currentColor",
-        size: "S"
-      })
+  const checkmark = jsxRuntimeExports.jsx(CheckboxIndicatorCheckmark, {
+    "aria-hidden": true,
+    children: jsxRuntimeExports.jsx(Icon, {
+      customColor: "currentColor",
+      size: "S"
     })
   });
+  const indicatorProps = {
+    "aria-description": checkboxRootProps.checked ? "checked" : "unchecked",
+    ...restProps,
+    ...checkboxRootProps
+  };
+  return readOnly ? jsxRuntimeExports.jsx(CheckboxIndicator, {
+    asChild: true,
+    ...indicatorProps,
+    onCheckedChange: void 0,
+    children: jsxRuntimeExports.jsx("div", {
+      children: checkmark
+    })
+  }) : jsxRuntimeExports.jsx(CheckboxIndicator, {
+    ...indicatorProps,
+    children: checkmark
+  });
 };
 export {
   Indicator as default

package/dist/Checkbox/components/Indicator/Indicator.types.d.ts

@@ -1,2 +1,4 @@
 import { HTMLAttributes } from 'react';
-export type IndicatorProps = Omit<HTMLAttributes<HTMLButtonElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'children' | 'color'>;
+export type IndicatorProps = Omit<HTMLAttributes<HTMLButtonElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'children' | 'color'> & {
+    readOnly?: boolean;
+};

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -29,11 +29,12 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
+    title: "Remove",
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],
       customColor: "currentColor",
-      title: "Remove"
+      "aria-hidden": true
     })
   });
 };

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -27,11 +27,12 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
+    title: "Remove",
     ...restProps,
     children: jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],
       customColor: "currentColor",
-      title: "Remove"
+      "aria-hidden": true
     })
   });
 };

package/dist/Drawer/Drawer.cjs

@@ -9,6 +9,7 @@ const Content = require("./components/Content/Content.cjs");
 const Header = require("./components/Header/Header.cjs");
 const Body = require("./components/Body/Body.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
+const Description = require("./components/Description/Description.cjs");
 const Drawer = Object.assign(({
   children,
   persistent = false,
@@ -61,6 +62,7 @@ const Drawer = Object.assign(({
   });
 }, {
   Header: Header.default,
+  Description: Description.default,
   Body: Body.default,
   Footer: Footer.default
 });

package/dist/Drawer/Drawer.d.ts

@@ -1,9 +1,13 @@
+/// <reference types="react" />
 import { DrawerProps } from './Drawer.types';
 declare const Drawer: (({ children, persistent, open, onOpenChange, containerElement, zIndex, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Header: (({ title, titleHidden, ...restProps }: import("./components/Header/Header.types").DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         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("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
+        Text: (props: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Body: (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;

package/dist/Drawer/Drawer.js

@@ -7,6 +7,7 @@ import Content from "./components/Content/Content.js";
 import Header from "./components/Header/Header.js";
 import Body from "./components/Body/Body.js";
 import Footer from "./components/Footer/Footer.js";
+import Description from "./components/Description/Description.js";
 const Drawer = Object.assign(({
   children,
   persistent = false,
@@ -59,6 +60,7 @@ const Drawer = Object.assign(({
   });
 }, {
   Header,
+  Description,
   Body,
   Footer
 });

package/dist/Drawer/components/Content/Content.cjs

@@ -2,8 +2,27 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [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-compose-refs/dist/index.cjs");
 const Drawer_context = require("../../Drawer.context.cjs");
+const useJitterFix = require("./hooks/useJitterFix.cjs");
+const useFocusTrigger = require("./hooks/useFocusTrigger.cjs");
 const Content_style = require("./Content.style.cjs");
+const react_utils = require("../../../Helpers/react.utils.cjs");
+const handleAriaDescriptionRef = (el) => {
+  if (el) {
+    const id = el.getAttribute("aria-describedby");
+    if (id) {
+      if (!el.querySelector(`#${CSS.escape(id)}`)) {
+        el.removeAttribute("aria-describedby");
+      }
+    } else {
+      const descEl = el.querySelector(`[data-role=drawer-description]`);
+      if (descEl) {
+        el.setAttribute("aria-describedby", descEl.id);
+      }
+    }
+  }
+};
 const Content = React.forwardRef(({
   children,
   ...props
@@ -15,35 +34,24 @@ const Content = React.forwardRef(({
     isPersistent,
     isRenderedInsideContainer
   } = Drawer_context.useDrawerContext();
-  const handleInteractOutside = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const handleEscapeKeyDown = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const [ready, setReady] = React.useState(false);
-  React.useEffect(() => {
-    setReady(true);
-  }, []);
-  const nonReadyStyle = !ready && {
-    position: "fixed",
-    opacity: 0
-  } || void 0;
+  const jitterFixProps = useJitterFix.useJitterFix();
+  const comboRef = index.useComposedRefs(ref, handleAriaDescriptionRef);
+  const {
+    handleClickTarget,
+    refocus
+  } = useFocusTrigger.useFocusTrigger();
   return jsxRuntime.jsxRuntimeExports.jsx(Content_style.PreventOverflow, {
     children: jsxRuntime.jsxRuntimeExports.jsx(Content_style.DrawerContent, {
+      "data-role": "drawer",
       "$zIndex": zIndex,
-      ref,
-      onInteractOutside: handleInteractOutside,
-      onEscapeKeyDown: handleEscapeKeyDown,
+      ref: comboRef,
+      onInteractOutside: isPersistent ? react_utils.handlePreventDefault : void 0,
+      onEscapeKeyDown: isPersistent ? react_utils.handlePreventDefault : void 0,
       "$isRenderedInsideContainer": isRenderedInsideContainer,
       ...props,
-      ...nonReadyStyle && {
-        style: nonReadyStyle
-      },
+      ...jitterFixProps,
+      onCloseAutoFocus: refocus,
+      onPointerDownOutside: isPersistent ? void 0 : (e) => handleClickTarget(e.target),
       children
     })
   });

package/dist/Drawer/components/Content/Content.js

@@ -1,7 +1,26 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { forwardRef, useState, useEffect } from "react";
+import { forwardRef } from "react";
+import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { useDrawerContext } from "../../Drawer.context.js";
+import { useJitterFix } from "./hooks/useJitterFix.js";
+import { useFocusTrigger } from "./hooks/useFocusTrigger.js";
 import { PreventOverflow, DrawerContent } from "./Content.style.js";
+import { handlePreventDefault } from "../../../Helpers/react.utils.js";
+const handleAriaDescriptionRef = (el) => {
+  if (el) {
+    const id = el.getAttribute("aria-describedby");
+    if (id) {
+      if (!el.querySelector(`#${CSS.escape(id)}`)) {
+        el.removeAttribute("aria-describedby");
+      }
+    } else {
+      const descEl = el.querySelector(`[data-role=drawer-description]`);
+      if (descEl) {
+        el.setAttribute("aria-describedby", descEl.id);
+      }
+    }
+  }
+};
 const Content = forwardRef(({
   children,
   ...props
@@ -13,35 +32,24 @@ const Content = forwardRef(({
     isPersistent,
     isRenderedInsideContainer
   } = useDrawerContext();
-  const handleInteractOutside = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const handleEscapeKeyDown = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    setReady(true);
-  }, []);
-  const nonReadyStyle = !ready && {
-    position: "fixed",
-    opacity: 0
-  } || void 0;
+  const jitterFixProps = useJitterFix();
+  const comboRef = useComposedRefs(ref, handleAriaDescriptionRef);
+  const {
+    handleClickTarget,
+    refocus
+  } = useFocusTrigger();
   return jsxRuntimeExports.jsx(PreventOverflow, {
     children: jsxRuntimeExports.jsx(DrawerContent, {
+      "data-role": "drawer",
       "$zIndex": zIndex,
-      ref,
-      onInteractOutside: handleInteractOutside,
-      onEscapeKeyDown: handleEscapeKeyDown,
+      ref: comboRef,
+      onInteractOutside: isPersistent ? handlePreventDefault : void 0,
+      onEscapeKeyDown: isPersistent ? handlePreventDefault : void 0,
       "$isRenderedInsideContainer": isRenderedInsideContainer,
       ...props,
-      ...nonReadyStyle && {
-        style: nonReadyStyle
-      },
+      ...jitterFixProps,
+      onCloseAutoFocus: refocus,
+      onPointerDownOutside: isPersistent ? void 0 : (e) => handleClickTarget(e.target),
       children
     })
   });

package/dist/Drawer/components/Content/Content.style.cjs

@@ -8,7 +8,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const PreventOverflow = _styled__default.default.div.withConfig({
   displayName: "Contentstyle__PreventOverflow",
   componentId: "RedisUI__sc-19kw0pf-0"
-})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;"]);
+})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;"]);
 const slideIn = _styled.keyframes`
   from { transform: translateX(100%) };
   to { transform: translateX(0) };
@@ -20,7 +20,7 @@ const slideOut = _styled.keyframes`
 const DrawerContent = _styled__default.default(index.Content).withConfig({
   displayName: "Contentstyle__DrawerContent",
   componentId: "RedisUI__sc-19kw0pf-1"
-})(["display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
+})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
   $zIndex
 }) => $zIndex, () => redisUiStyles.useTheme().components.drawer.bgColor, () => redisUiStyles.useTheme().components.drawer.shadow, ({
   $isRenderedInsideContainer

package/dist/Drawer/components/Content/Content.style.js

@@ -4,7 +4,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const PreventOverflow = _styled.div.withConfig({
   displayName: "Contentstyle__PreventOverflow",
   componentId: "RedisUI__sc-19kw0pf-0"
-})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;"]);
+})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;"]);
 const slideIn = keyframes`
   from { transform: translateX(100%) };
   to { transform: translateX(0) };
@@ -16,7 +16,7 @@ const slideOut = keyframes`
 const DrawerContent = _styled(Content).withConfig({
   displayName: "Contentstyle__DrawerContent",
   componentId: "RedisUI__sc-19kw0pf-1"
-})(["display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
+})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
   $zIndex
 }) => $zIndex, () => useTheme().components.drawer.bgColor, () => useTheme().components.drawer.shadow, ({
   $isRenderedInsideContainer

package/dist/Drawer/components/Content/hooks/useFocusTrigger.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function useFocusTrigger() {
+  const focusedRef = React.useRef(null);
+  const isClickedRef = React.useRef(false);
+  if (!focusedRef.current) {
+    focusedRef.current = document.activeElement;
+  }
+  const refocus = () => {
+    var _a;
+    if (!isClickedRef.current) {
+      (_a = focusedRef.current) == null ? void 0 : _a.focus();
+    }
+    focusedRef.current = null;
+  };
+  const handleClickTarget = (target) => {
+    var _a;
+    isClickedRef.current = !!(target && !((_a = focusedRef.current) == null ? void 0 : _a.contains(target)));
+    setTimeout(() => {
+      isClickedRef.current = false;
+    }, 1e3);
+  };
+  return {
+    refocus,
+    handleClickTarget
+  };
+}
+exports.useFocusTrigger = useFocusTrigger;

package/dist/Drawer/components/Content/hooks/useFocusTrigger.d.ts

@@ -0,0 +1,4 @@
+export declare function useFocusTrigger(): {
+    refocus: () => void;
+    handleClickTarget: (target: EventTarget | null) => void;
+};

package/dist/Drawer/components/Content/hooks/useFocusTrigger.js

@@ -0,0 +1,29 @@
+import { useRef } from "react";
+function useFocusTrigger() {
+  const focusedRef = useRef(null);
+  const isClickedRef = useRef(false);
+  if (!focusedRef.current) {
+    focusedRef.current = document.activeElement;
+  }
+  const refocus = () => {
+    var _a;
+    if (!isClickedRef.current) {
+      (_a = focusedRef.current) == null ? void 0 : _a.focus();
+    }
+    focusedRef.current = null;
+  };
+  const handleClickTarget = (target) => {
+    var _a;
+    isClickedRef.current = !!(target && !((_a = focusedRef.current) == null ? void 0 : _a.contains(target)));
+    setTimeout(() => {
+      isClickedRef.current = false;
+    }, 1e3);
+  };
+  return {
+    refocus,
+    handleClickTarget
+  };
+}
+export {
+  useFocusTrigger
+};

package/dist/Drawer/components/Content/hooks/useJitterFix.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useJitterFix = () => {
+  const [ready, setReady] = React.useState(false);
+  React.useLayoutEffect(() => {
+    setReady(true);
+  }, []);
+  const nonReadyStyle = !ready && {
+    position: "fixed",
+    opacity: 0
+  } || void 0;
+  return nonReadyStyle && {
+    style: nonReadyStyle
+  };
+};
+exports.useJitterFix = useJitterFix;

package/dist/Drawer/components/Content/hooks/useJitterFix.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useJitterFix: () => {
+    style: import("react").CSSProperties;
+} | undefined;