@servicetitan/anvil2 1.44.2 → 1.45.0

package/dist/Drawer-DI_k6W2k.js

@@ -0,0 +1,377 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, forwardRef, useRef, useId, useCallback, useEffect, useMemo } from 'react';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { T as Text } from './Text-BqvcbXyp.js';
+import { B as Button } from './Button-BxFXQ0-n.js';
+import { a as DrawerContext } from './DrawerContext-DboTgTmo.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { a as ToastProvider, b as ToasterPopover, c as ToasterContent } from './Toaster-BgjT0p8b.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { u as useDialogTransitionStates, a as useDialogScrollLock } from './useDialogTransitionStates-2NaE_noq.js';
+import { a as useKeyboardFocusables, b as useOnClickOutside } from './useOnClickOutside-BHEWMLa9.js';
+import { g as getActiveElement } from './getActiveElement-BcSyVE7S.js';
+
+import './Drawer.css';const drawer = "_drawer_xvcm1_2";
+const container = "_container_xvcm1_28";
+const content = "_content_xvcm1_41";
+const header = "_header_xvcm1_48";
+const footer = "_footer_xvcm1_72";
+const remove = "_remove_xvcm1_90";
+const large = "_large_xvcm1_99";
+const sticky = "_sticky_xvcm1_102";
+const styles = {
+	drawer: drawer,
+	container: container,
+	content: content,
+	header: header,
+	"close-container": "_close-container_xvcm1_65",
+	footer: footer,
+	remove: remove,
+	large: large,
+	sticky: sticky,
+	"close-button": "_close-button_xvcm1_108"
+};
+
+function useDrawerContext() {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error(
+      "useDrawerContext must be used within a DrawerContextProvider"
+    );
+  }
+  return context;
+}
+
+const DrawerCancelButton = forwardRef((props, ref) => {
+  const { onClick, ...rest } = props;
+  const { close } = useDrawerContext();
+  const data = {
+    children: childrenToString(props.children),
+    appearance: props.appearance,
+    size: props.size,
+    type: props.type
+  };
+  const trackingId = useTrackingId({
+    name: "DrawerCancelButton",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const onClickHandler = (e) => {
+    onClick?.(e);
+    close();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Close drawer",
+      "data-anv": "drawer-cancel-button",
+      "data-tracking-id": trackingId,
+      onClick: onClickHandler,
+      ref,
+      ...rest
+    }
+  );
+});
+DrawerCancelButton.displayName = "DrawerCancelButton";
+
+const DrawerHeader = forwardRef(
+  (props, ref) => {
+    const { className, children } = props;
+    const data = {
+      children: childrenToString(props.children)
+    };
+    const trackingId = useTrackingId({
+      name: "DrawerHeader",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const drawerHeaderClasses = cx(styles.header, className);
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: drawerHeaderClasses,
+        "data-anv": "drawer-header",
+        "data-tracking-id": trackingId,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
+          /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
+            DrawerCancelButton,
+            {
+              className: styles["close-button"],
+              size: "small",
+              appearance: "ghost",
+              "aria-label": "Close drawer",
+              "data-anv": "drawer-header-close-button",
+              icon: SvgClose
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, ...rest } = props;
+    const drawerFooterClasses = cx(styles.footer, className, {
+      [styles["sticky"]]: sticky
+    });
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: drawerFooterClasses,
+        "data-anv": "drawer-footer",
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerContent = forwardRef(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+    const drawerContentClasses = cx(styles.content, className);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: drawerContentClasses,
+        "data-anv": "drawer-content",
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerElement = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      open = false,
+      children,
+      onOpen,
+      onClose,
+      /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+        onCancel is destructured so that it is not passed to the dialog in ...rest
+      */
+      onCancel,
+      onKeyDown,
+      disableCloseOnEscape = false,
+      onClickOutside,
+      disableCloseOnClickOutside = false,
+      size = "medium",
+      enableScrollChaining,
+      onOpenAnimationStart,
+      onOpenAnimationComplete,
+      onCloseAnimationStart,
+      onCloseAnimationComplete,
+      ...rest
+    } = props;
+    const elRef = useRef(null);
+    const contentRef = useRef(null);
+    const toasterRef = useRef(null);
+    const combinedRef = useMergeRefs([elRef, ref]);
+    const id = useId();
+    const { state, isOpenOrOpening } = useDialogTransitionStates(elRef, open, {
+      onOpenAnimationStart: useCallback(() => {
+        onOpenAnimationStart?.();
+      }, [onOpenAnimationStart]),
+      onOpenAnimationComplete: useCallback(() => {
+        onOpenAnimationComplete?.();
+        onOpen?.();
+      }, [onOpen, onOpenAnimationComplete]),
+      onCloseAnimationStart: useCallback(() => {
+        onCloseAnimationStart?.();
+      }, [onCloseAnimationStart]),
+      onCloseAnimationComplete: useCallback(() => {
+        onCloseAnimationComplete?.();
+      }, [onCloseAnimationComplete])
+    });
+    const classNames = cx([styles.drawer], className, {
+      [styles.remove]: state === "closing",
+      [styles.large]: size === "large"
+    });
+    const { focusables } = useKeyboardFocusables(contentRef, {
+      observeChange: false
+    });
+    const firstFocusable = focusables?.[0];
+    const lastFocusable = focusables?.[focusables.length - 1];
+    useDialogScrollLock({
+      open: isOpenOrOpening,
+      id,
+      enableScrollChaining,
+      elementRef: elRef
+    });
+    useEffect(() => {
+      if (!isOpenOrOpening) return;
+      if (!focusables) return;
+      const activeElement = getActiveElement(document);
+      if (!activeElement) return;
+      if (activeElement.dataset.anv !== "drawer-header-close-button" && (focusables.includes(activeElement) || activeElement.tagName === "DIALOG")) {
+        return;
+      }
+      if (focusables[0]?.dataset.anv === "drawer-header-close-button" && focusables[1]) {
+        focusables[1].focus();
+      } else {
+        focusables[0]?.focus();
+      }
+    }, [isOpenOrOpening, focusables]);
+    const onCancelHandler = (e) => {
+      e.preventDefault();
+      if (disableCloseOnEscape) return;
+      onClose?.();
+    };
+    useOnClickOutside({
+      onOutsidePress: (e) => {
+        if (!open) return;
+        onClickOutside?.(e);
+      },
+      targets: [
+        contentRef.current,
+        toasterRef.current
+      ],
+      onClose: () => {
+        if (disableCloseOnClickOutside || !open) return;
+        onClose?.();
+      }
+    });
+    const onKeyDownHandler = (e) => {
+      onKeyDown?.(e);
+      if (e.code === "Tab") {
+        if (e.shiftKey && e.target === firstFocusable) {
+          e.preventDefault();
+          lastFocusable?.focus();
+          return;
+        }
+        if (e.target === lastFocusable && !e.shiftKey) {
+          e.preventDefault();
+          firstFocusable?.focus();
+          return;
+        }
+      }
+    };
+    const contextValue = useMemo(() => {
+      return { close: () => onClose?.() };
+    }, [onClose]);
+    return (
+      // dialog element does seem to be interactive on MDN guideline
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ jsxs(
+        "dialog",
+        {
+          className: classNames,
+          "data-anv": "drawer",
+          "data-anv-scroll-chaining": enableScrollChaining,
+          "data-anv-transition-state": state,
+          ref: combinedRef,
+          onCancel: onCancelHandler,
+          onKeyDown: onKeyDownHandler,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(ToastProvider, { isDialogToaster: isOpenOrOpening, children: /* @__PURE__ */ jsx(ToasterPopover, { children: /* @__PURE__ */ jsx(ToasterContent, { id: "drawer-toaster", ref: toasterRef }) }) }),
+            /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+              "section",
+              {
+                ref: contentRef,
+                className: styles.container,
+                "data-open": isOpenOrOpening,
+                children
+              }
+            ) })
+          ]
+        }
+      )
+    );
+  }
+);
+DrawerElement.displayName = "Drawer";
+const Drawer = Object.assign(DrawerElement, {
+  /**
+   * Header component for the drawer that displays a title and close button.
+   *
+   * Features:
+   * - Displays the drawer title as a headline
+   * - Includes an accessible close button
+   * - Sticky positioning at the top of the drawer
+   * - Proper semantic HTML structure
+   * - Accessible with proper ARIA attributes
+   * - Consistent styling with the design system
+   * - Automatic close functionality
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Drawer.Header>Settings</Drawer.Header>
+   */
+  Header: DrawerHeader,
+  /**
+   * Footer component for the drawer that displays action buttons and controls.
+   *
+   * Features:
+   * - Flexible layout for action buttons and controls
+   * - Optional sticky positioning at the bottom
+   * - Proper semantic HTML structure
+   * - Accessible with proper ARIA attributes
+   * - Consistent styling with the design system
+   * - Supports all standard footer element props
+   * - Responsive design that adapts to content
+   *
+   * @example
+   * <Drawer.Footer sticky>
+   *   <Button onClick={handleSave}>Save</Button>
+   *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>
+   * </Drawer.Footer>
+   */
+  Footer: DrawerFooter,
+  /**
+   * Content container for the drawer that holds the main content area.
+   *
+   * Features:
+   * - Flexible content area with proper spacing
+   * - Scrollable content when needed
+   * - Proper semantic HTML structure
+   * - Accessible with proper ARIA attributes
+   * - Consistent styling with the design system
+   * - Supports all standard div element props
+   * - Responsive design that adapts to content
+   * - Proper focus management
+   *
+   * @example
+   * <Drawer.Content>
+   *   <p>This is the main content of the drawer.</p>
+   *   <p>It can contain any type of content.</p>
+   * </Drawer.Content>
+   */
+  Content: DrawerContent,
+  /**
+   * A button component that automatically closes the drawer when clicked.
+   *
+   * Features:
+   * - Automatically closes the drawer when clicked
+   * - Extends Button component functionality
+   * - Accessible with proper ARIA attributes
+   * - Consistent styling with the design system
+   * - Supports all standard button props
+   * - Proper focus management
+   * - Can be used anywhere within the drawer context
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Drawer.CancelButton appearance="ghost" size="small">
+   *   Cancel
+   * </Drawer.CancelButton>
+   */
+  CancelButton: DrawerCancelButton
+});
+
+export { Drawer as D, DrawerCancelButton as a, DrawerFooter as b, DrawerHeader as c, DrawerContent as d };
+//# sourceMappingURL=Drawer-DI_k6W2k.js.map

package/dist/Drawer-DI_k6W2k.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer-DI_k6W2k.js","sources":["../src/components/Drawer/internal/useDrawerContext.ts","../src/components/Drawer/DrawerCancelButton.tsx","../src/components/Drawer/DrawerHeader.tsx","../src/components/Drawer/DrawerFooter.tsx","../src/components/Drawer/DrawerContent.tsx","../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { DrawerContext } from \"./DrawerContext\";\n\n/**\n * Hook to access the drawer context.\n *\n * @returns The drawer context containing close function and ref\n * @throws Error if used outside of a DrawerContextProvider\n */\nexport function useDrawerContext() {\n  const context = useContext(DrawerContext);\n  if (!context) {\n    throw new Error(\n      \"useDrawerContext must be used within a DrawerContextProvider\",\n    );\n  }\n  return context;\n}\n","import { MouseEvent, forwardRef } from \"react\";\nimport { Button, ButtonProps } from \"../Button\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { useDrawerContext } from \"./internal/useDrawerContext\";\n\n/**\n * Props for the DrawerCancelButton component\n * @extends ButtonProps\n */\nexport type DrawerCancelButtonProps = ButtonProps & DataTrackingId;\n\n/**\n * A button component that automatically closes the drawer when clicked.\n *\n * Features:\n * - Automatically closes the drawer when clicked\n * - Extends Button component functionality\n * - Accessible with proper ARIA attributes\n * - Consistent styling with the design system\n * - Supports all standard button props\n * - Proper focus management\n * - Can be used anywhere within the drawer context\n *\n * @example\n * <DrawerCancelButton appearance=\"ghost\" size=\"small\">\n *   Cancel\n * </DrawerCancelButton>\n */\nexport const DrawerCancelButton = forwardRef<\n  HTMLButtonElement,\n  DrawerCancelButtonProps\n>((props, ref) => {\n  const { onClick, ...rest } = props;\n  const { close } = useDrawerContext();\n  const data = {\n    children: childrenToString(props.children),\n    appearance: props.appearance,\n    size: props.size,\n    type: props.type,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"DrawerCancelButton\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    close();\n  };\n  return (\n    <Button\n      aria-label=\"Close drawer\"\n      data-anv=\"drawer-cancel-button\"\n      data-tracking-id={trackingId}\n      onClick={onClickHandler}\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n\nDrawerCancelButton.displayName = \"DrawerCancelButton\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport styles from \"./Drawer.module.scss\";\nimport { Text } from \"../Text\";\nimport { DrawerCancelButton } from \"./DrawerCancelButton\";\nimport cx from \"classnames\";\nimport { DataTrackingId } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\n\n/**\n * Props for the DrawerHeader component\n * @extends ComponentPropsWithoutRef<\"header\">\n */\nexport type DrawerHeaderProps = ComponentPropsWithoutRef<\"header\"> &\n  DataTrackingId;\n\n/**\n * Header component for the drawer that displays a title and close button.\n *\n * Features:\n * - Displays the drawer title as a headline\n * - Includes an accessible close button\n * - Sticky positioning at the top of the drawer\n * - Proper semantic HTML structure\n * - Accessible with proper ARIA attributes\n * - Consistent styling with the design system\n * - Automatic close functionality\n *\n * @example\n * <Drawer.Header>Settings</Drawer.Header>\n */\nexport const DrawerHeader = forwardRef<HTMLHeadElement, DrawerHeaderProps>(\n  (props, ref) => {\n    const { className, children } = props;\n    const data = {\n      children: childrenToString(props.children),\n    };\n\n    const trackingId = useTrackingId({\n      name: \"DrawerHeader\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const drawerHeaderClasses = cx(styles.header, className);\n\n    return (\n      <header\n        className={drawerHeaderClasses}\n        data-anv=\"drawer-header\"\n        data-tracking-id={trackingId}\n        ref={ref}\n      >\n        <Text variant=\"headline\" el=\"h1\">\n          {children}\n        </Text>\n        <span className={styles[\"close-container\"]}>\n          <DrawerCancelButton\n            className={styles[\"close-button\"]}\n            size=\"small\"\n            appearance=\"ghost\"\n            aria-label=\"Close drawer\"\n            data-anv=\"drawer-header-close-button\"\n            icon={Close}\n          />\n        </span>\n      </header>\n    );\n  },\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport styles from \"./Drawer.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DrawerFooter component\n * @extends ComponentPropsWithoutRef<\"footer\">\n */\nexport type DrawerFooterProps = ComponentPropsWithoutRef<\"footer\"> & {\n  /**\n   * When true, the footer will stick to the bottom of the drawer.\n   * @default false\n   */\n  sticky?: boolean;\n};\n\n/**\n * Footer component for the drawer that displays action buttons and controls.\n *\n * Features:\n * - Flexible layout for action buttons and controls\n * - Optional sticky positioning at the bottom\n * - Proper semantic HTML structure\n * - Accessible with proper ARIA attributes\n * - Consistent styling with the design system\n * - Supports all standard footer element props\n * - Responsive design that adapts to content\n *\n * @example\n * <Drawer.Footer sticky>\n *   <Button onClick={handleSave}>Save</Button>\n *   <Button onClick={handleCancel}>Cancel</Button>\n * </Drawer.Footer>\n */\nexport const DrawerFooter = forwardRef<HTMLElement, DrawerFooterProps>(\n  (props, ref) => {\n    const { className, children, sticky = false, ...rest } = props;\n    const drawerFooterClasses = cx(styles.footer, className, {\n      [styles[\"sticky\"]]: sticky,\n    });\n\n    return (\n      <footer\n        className={drawerFooterClasses}\n        data-anv=\"drawer-footer\"\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </footer>\n    );\n  },\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport styles from \"./Drawer.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DrawerContent component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type DrawerContentProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Content container for the drawer that holds the main content area.\n *\n * Features:\n * - Flexible content area with proper spacing\n * - Scrollable content when needed\n * - Proper semantic HTML structure\n * - Accessible with proper ARIA attributes\n * - Consistent styling with the design system\n * - Supports all standard div element props\n * - Responsive design that adapts to content\n * - Proper focus management\n *\n * @example\n * <Drawer.Content>\n *   <p>This is the main content of the drawer.</p>\n *   <p>It can contain any type of content.</p>\n * </Drawer.Content>\n */\nexport const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(\n  (props, ref) => {\n    const { className, children, ...rest } = props;\n    const drawerContentClasses = cx(styles.content, className);\n\n    return (\n      <div\n        className={drawerContentClasses}\n        data-anv=\"drawer-content\"\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDrawerContent.displayName = \"DrawerContent\";\n","import styles from \"./Drawer.module.scss\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useId,\n  useCallback,\n  useEffect,\n  SyntheticEvent,\n  KeyboardEvent,\n  useMemo,\n} from \"react\";\nimport { DrawerHeader } from \"./DrawerHeader\";\nimport { DrawerFooter } from \"./DrawerFooter\";\nimport { DrawerContent } from \"./DrawerContent\";\nimport { DrawerCancelButton } from \"./DrawerCancelButton\";\nimport {\n  OpenCloseTransitionStateEffects,\n  useDialogScrollLock,\n  useDialogTransitionStates,\n  useKeyboardFocusables,\n  useOnClickOutside,\n} from \"../../internal/hooks\";\nimport { DisableCloseOnEscapeOrClickProps, Size } from \"../../types\";\nimport { useMergeRefs } from \"../../hooks\";\nimport cx from \"classnames\";\nimport { getActiveElement } from \"../../internal/functions\";\nimport { ToastProvider } from \"../Toast/internal/ToastProvider\";\nimport { ToasterPopover } from \"../Toast/internal/ToasterPopover\";\nimport { ToasterContent } from \"../Toast/internal/Toaster\";\nimport { DrawerContext } from \"./internal/DrawerContext\";\n\n/**\n * Props for the Drawer component\n * @extends ComponentPropsWithoutRef<\"dialog\">\n * @extends DialogTransitionStateEffects\n * @extends DisableCloseOnEscapeOrClickProps\n */\nexport type DrawerProps = ComponentPropsWithoutRef<\"dialog\"> &\n  OpenCloseTransitionStateEffects &\n  DisableCloseOnEscapeOrClickProps & {\n    /**\n     * The size of the drawer.\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"medium\" | \"large\">;\n    /**\n     * Controls whether the drawer is open or closed.\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Callback function called after the drawer is animated closed.\n     */\n    onClose?: () => void;\n    /**\n     * Callback function called when the drawer opens.\n     * @deprecated Use onOpenAnimationStart or onOpenAnimationComplete instead\n     */\n    onOpen?: () => void;\n    /**\n     * Callback when clicking outside the drawer\n     */\n    onClickOutside?: (e: globalThis.MouseEvent) => void;\n    /**\n     * Enables scroll chaining behavior.\n     * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining\n     */\n    enableScrollChaining?: boolean;\n  };\n\nconst DrawerElement = forwardRef<HTMLDialogElement, DrawerProps>(\n  (props, ref) => {\n    const {\n      className,\n      open = false,\n      children,\n      onOpen,\n      onClose,\n      /* eslint-disable-next-line @typescript-eslint/no-unused-vars --\n        onCancel is destructured so that it is not passed to the dialog in ...rest\n      */\n      onCancel,\n      onKeyDown,\n      disableCloseOnEscape = false,\n      onClickOutside,\n      disableCloseOnClickOutside = false,\n      size = \"medium\",\n      enableScrollChaining,\n      onOpenAnimationStart,\n      onOpenAnimationComplete,\n      onCloseAnimationStart,\n      onCloseAnimationComplete,\n      ...rest\n    } = props;\n\n    const elRef = useRef<HTMLDialogElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const toasterRef = useRef<HTMLDivElement>(null);\n    const combinedRef = useMergeRefs([elRef, ref]);\n    const id = useId();\n\n    const { state, isOpenOrOpening } = useDialogTransitionStates(elRef, open, {\n      onOpenAnimationStart: useCallback(() => {\n        onOpenAnimationStart?.();\n      }, [onOpenAnimationStart]),\n      onOpenAnimationComplete: useCallback(() => {\n        onOpenAnimationComplete?.();\n        onOpen?.(); // DEPRECATED\n      }, [onOpen, onOpenAnimationComplete]),\n      onCloseAnimationStart: useCallback(() => {\n        onCloseAnimationStart?.();\n      }, [onCloseAnimationStart]),\n      onCloseAnimationComplete: useCallback(() => {\n        onCloseAnimationComplete?.();\n      }, [onCloseAnimationComplete]),\n    });\n\n    const classNames = cx([styles.drawer], className, {\n      [styles.remove]: state === \"closing\",\n      [styles.large]: size === \"large\",\n    });\n\n    const { focusables } = useKeyboardFocusables(contentRef, {\n      observeChange: false,\n    });\n    const firstFocusable = focusables?.[0];\n    const lastFocusable = focusables?.[focusables.length - 1];\n\n    useDialogScrollLock({\n      open: isOpenOrOpening,\n      id,\n      enableScrollChaining,\n      elementRef: elRef,\n    });\n\n    useEffect(() => {\n      if (!isOpenOrOpening) return;\n      if (!focusables) return;\n\n      const activeElement = getActiveElement(document);\n      if (!activeElement) return;\n\n      if (\n        activeElement.dataset.anv !== \"drawer-header-close-button\" &&\n        (focusables.includes(activeElement) ||\n          activeElement.tagName === \"DIALOG\")\n      ) {\n        return;\n      }\n\n      if (\n        focusables[0]?.dataset.anv === \"drawer-header-close-button\" &&\n        focusables[1]\n      ) {\n        focusables[1].focus();\n      } else {\n        focusables[0]?.focus();\n      }\n    }, [isOpenOrOpening, focusables]);\n\n    const onCancelHandler = (e: SyntheticEvent<HTMLDialogElement>) => {\n      e.preventDefault();\n\n      if (disableCloseOnEscape) return;\n      onClose?.();\n    };\n\n    useOnClickOutside({\n      onOutsidePress: (e) => {\n        if (!open) return;\n        onClickOutside?.(e);\n      },\n      targets: [\n        contentRef.current as HTMLElement,\n        toasterRef.current as HTMLElement,\n      ],\n      onClose: () => {\n        if (disableCloseOnClickOutside || !open) return;\n        onClose?.();\n      },\n    });\n\n    const onKeyDownHandler = (e: KeyboardEvent<HTMLDialogElement>) => {\n      onKeyDown?.(e);\n      if (e.code === \"Tab\") {\n        if (e.shiftKey && e.target === firstFocusable) {\n          e.preventDefault();\n          (lastFocusable as HTMLElement)?.focus();\n          return;\n        }\n        if (e.target === lastFocusable && !e.shiftKey) {\n          e.preventDefault();\n          (firstFocusable as HTMLElement)?.focus();\n          return;\n        }\n      }\n    };\n\n    const contextValue = useMemo(() => {\n      return { close: () => onClose?.() };\n    }, [onClose]);\n\n    return (\n      // dialog element does seem to be interactive on MDN guideline\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <dialog\n        className={classNames}\n        data-anv=\"drawer\"\n        data-anv-scroll-chaining={enableScrollChaining}\n        data-anv-transition-state={state}\n        ref={combinedRef}\n        onCancel={onCancelHandler}\n        onKeyDown={onKeyDownHandler}\n        {...rest}\n      >\n        <ToastProvider isDialogToaster={isOpenOrOpening}>\n          <ToasterPopover>\n            <ToasterContent id=\"drawer-toaster\" ref={toasterRef} />\n          </ToasterPopover>\n        </ToastProvider>\n        <DrawerContext.Provider value={contextValue}>\n          <section\n            ref={contentRef}\n            className={styles.container}\n            data-open={isOpenOrOpening}\n          >\n            {children}\n          </section>\n        </DrawerContext.Provider>\n      </dialog>\n    );\n  },\n);\nDrawerElement.displayName = \"Drawer\";\n\n/**\n * A slide-out drawer component that provides a modal-like experience from the side of the screen.\n *\n * Features:\n * - Slide-in animation from the side of the screen\n * - Keyboard navigation with focus trapping\n * - Escape key and click outside to close\n * - Configurable size variants (medium, large)\n * - Built-in toast support for notifications\n * - Automatic scroll locking when open\n * - Accessible with proper ARIA attributes\n * - Compound component structure with Header, Footer, Content, and CancelButton\n * - Transition state callbacks for animation control\n * - Optional scroll chaining support\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Drawer open={isOpen} onClose={handleClose} size=\"medium\">\n *   <Drawer.Header>Settings</Drawer.Header>\n *   <Drawer.Content>Drawer content goes here</Drawer.Content>\n *   <Drawer.Footer>\n *     <Button onClick={handleSave}>Save</Button>\n *     <Drawer.CancelButton>Cancel</Drawer.CancelButton>\n *   </Drawer.Footer>\n * </Drawer>\n */\nexport const Drawer = Object.assign(DrawerElement, {\n  /**\n   * Header component for the drawer that displays a title and close button.\n   *\n   * Features:\n   * - Displays the drawer title as a headline\n   * - Includes an accessible close button\n   * - Sticky positioning at the top of the drawer\n   * - Proper semantic HTML structure\n   * - Accessible with proper ARIA attributes\n   * - Consistent styling with the design system\n   * - Automatic close functionality\n   * - Automatic tracking ID generation for analytics\n   *\n   * @example\n   * <Drawer.Header>Settings</Drawer.Header>\n   */\n  Header: DrawerHeader,\n  /**\n   * Footer component for the drawer that displays action buttons and controls.\n   *\n   * Features:\n   * - Flexible layout for action buttons and controls\n   * - Optional sticky positioning at the bottom\n   * - Proper semantic HTML structure\n   * - Accessible with proper ARIA attributes\n   * - Consistent styling with the design system\n   * - Supports all standard footer element props\n   * - Responsive design that adapts to content\n   *\n   * @example\n   * <Drawer.Footer sticky>\n   *   <Button onClick={handleSave}>Save</Button>\n   *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>\n   * </Drawer.Footer>\n   */\n  Footer: DrawerFooter,\n  /**\n   * Content container for the drawer that holds the main content area.\n   *\n   * Features:\n   * - Flexible content area with proper spacing\n   * - Scrollable content when needed\n   * - Proper semantic HTML structure\n   * - Accessible with proper ARIA attributes\n   * - Consistent styling with the design system\n   * - Supports all standard div element props\n   * - Responsive design that adapts to content\n   * - Proper focus management\n   *\n   * @example\n   * <Drawer.Content>\n   *   <p>This is the main content of the drawer.</p>\n   *   <p>It can contain any type of content.</p>\n   * </Drawer.Content>\n   */\n  Content: DrawerContent,\n  /**\n   * A button component that automatically closes the drawer when clicked.\n   *\n   * Features:\n   * - Automatically closes the drawer when clicked\n   * - Extends Button component functionality\n   * - Accessible with proper ARIA attributes\n   * - Consistent styling with the design system\n   * - Supports all standard button props\n   * - Proper focus management\n   * - Can be used anywhere within the drawer context\n   * - Automatic tracking ID generation for analytics\n   *\n   * @example\n   * <Drawer.CancelButton appearance=\"ghost\" size=\"small\">\n   *   Cancel\n   * </Drawer.CancelButton>\n   */\n  CancelButton: DrawerCancelButton,\n});\n"],"names":["Close"],"mappings":"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"}

package/dist/Drawer.css

@@ -0,0 +1,161 @@
+@layer starter, reset, base, state, application;
+@layer base {
+  ._drawer_xvcm1_2 {
+    border: none;
+    background: transparent;
+    padding-block: 0;
+    padding-inline: 0;
+    outline: none;
+    animation: _close-drawer_xvcm1_1 2s forwards;
+    transition: width 200ms;
+    width: 35rem;
+    height: 100%;
+    max-width: 100%;
+    border-inline-start: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
+    background-color: var(--background-color, #ffffff);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    max-height: 100dvh;
+    margin-inline-end: 0;
+    overscroll-behavior: contain;
+    --xpos: 10rem;
+  }
+  ._drawer_xvcm1_2[open] {
+    animation: _open-drawer_xvcm1_1 300ms forwards;
+  }
+  ._drawer_xvcm1_2[open]::backdrop {
+    animation: _open-backdrop_xvcm1_1 200ms forwards;
+  }
+  ._drawer_xvcm1_2 ._container_xvcm1_28 {
+    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
+    font-size: 100%;
+    color: var(--foreground-color, #141414);
+    display: flex;
+    box-sizing: border-box;
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+    flex-direction: column;
+    background-color: inherit;
+    gap: 1.5rem;
+    min-height: 100%;
+  }
+  ._drawer_xvcm1_2 ._container_xvcm1_28 ._content_xvcm1_41 {
+    flex-grow: 1;
+    padding-block-start: 0.25rem;
+    padding-block-end: 0.25rem;
+    font-size: 1rem;
+    isolation: isolate;
+  }
+  ._header_xvcm1_48 {
+    position: sticky;
+    inset-block-start: 0;
+    display: flex;
+    justify-content: space-between;
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+    margin-block: -1.5rem;
+    margin-inline: -1.5rem;
+    background-color: inherit;
+    font-size: 1rem;
+    z-index: 1;
+  }
+  ._header_xvcm1_48 h1 {
+    margin-block: 0;
+    margin-inline: 0;
+  }
+  ._header_xvcm1_48 ._close-container_xvcm1_65 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.5625rem;
+    height: 1.5625rem;
+  }
+  ._footer_xvcm1_72 {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+    margin-block: -1.5rem;
+    margin-inline: -1.5rem;
+    background-color: inherit;
+    flex-wrap: wrap;
+  }
+}
+@layer state {
+  @media (prefers-reduced-motion: reduce) {
+    ._drawer_xvcm1_2 {
+      --xpos: 0;
+    }
+  }
+  ._drawer_xvcm1_2._remove_xvcm1_90[open] {
+    animation: _close-drawer_xvcm1_1 300ms forwards;
+  }
+  ._drawer_xvcm1_2._remove_xvcm1_90[open]::backdrop {
+    animation: _close-backdrop_xvcm1_1 200ms forwards;
+  }
+  ._drawer_xvcm1_2::backdrop {
+    background: #040404;
+  }
+  ._drawer_xvcm1_2._large_xvcm1_99 {
+    width: 48rem;
+  }
+  ._drawer_xvcm1_2 ._footer_xvcm1_72._sticky_xvcm1_102 {
+    position: sticky;
+    inset-block-end: 0;
+  }
+}
+@layer application {
+  ._drawer_xvcm1_2 ._header_xvcm1_48 ._close-button_xvcm1_108 {
+    color: var(--foreground-color, #141414);
+  }
+}
+.drawer-open {
+  overflow: hidden;
+}
+
+@keyframes _open-drawer_xvcm1_1 {
+  from {
+    opacity: 0;
+    transform: translateX(var(--xpos));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+@keyframes _close-drawer_xvcm1_1 {
+  from {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--xpos));
+  }
+}
+@keyframes _open-backdrop_xvcm1_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.6;
+  }
+}
+@keyframes _close-backdrop_xvcm1_1 {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 0;
+  }
+}
+body:has(
+    dialog[data-anv="drawer"][open]:not([data-anv-scroll-chaining="true"])
+  ) {
+  overflow: hidden;
+}
+
+body:has([data-anv-dialogs-open="true"]) {
+  overflow: hidden;
+}

package/dist/Drawer.js

@@ -1,2 +1,2 @@
-export { D as Drawer, a as DrawerCancelButton, d as DrawerContent, b as DrawerFooter, c as DrawerHeader, D as default } from './Drawer-0ayAWgAA.js';
+export { D as Drawer, a as DrawerCancelButton, d as DrawerContent, b as DrawerFooter, c as DrawerHeader, D as default } from './Drawer-DI_k6W2k.js';
 //# sourceMappingURL=Drawer.js.map