@navikt/ds-react 5.7.6 → 5.9.0

package/src/layout/bleed/Bleed.tsx

@@ -1,10 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import {
-  ResponsiveProp,
-  SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
+import { getResponsiveProps } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 import { Slot } from "../../util/Slot";
 
 export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;

package/src/layout/box/Box.tsx

@@ -1,13 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
+import { getResponsiveProps } from "../utilities/css";
 import {
   SpaceDelimitedAttribute,
   ResponsiveProp,
   SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
-import {
   BackgroundToken,
   BorderColorToken,
   ShadowToken,

package/src/layout/grid/HGrid.tsx

@@ -1,11 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
-import { BreakpointsAlias } from "../utilities/css";
+import { BreakpointsAlias } from "../utilities/types";
 import { Slot } from "../../util/Slot";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {

package/src/layout/sidemal-test/Sidebar.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { Link } from "../../link";
 import { Heading, Label } from "../../typography";
 import { Box } from "../box";
 import { VStack } from "../stack";
-import { Link } from "../../link";
 
 const LinkElement = ({ children }) => {
   return (

package/src/layout/stack/Stack.tsx

@@ -1,12 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

package/src/layout/utilities/css.ts

@@ -1,39 +1,4 @@
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
-
-export type SpacingScale =
-  | "0"
-  | "05"
-  | "1"
-  | "1-alt"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "14"
-  | "16"
-  | "18"
-  | "20"
-  | "24"
-  | "32";
-
-export type SpaceDelimitedAttribute<T extends string> =
-  | T
-  | `${T} ${T}`
-  | `${T} ${T} ${T}`
-  | `${T} ${T} ${T} ${T}`;
-
-type FixedResponsiveT<T> = {
-  [Breakpoint in BreakpointsAlias]?: T;
-};
-
-export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
   componentName: string,

package/src/layout/utilities/types.ts

@@ -3,6 +3,7 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
 import borderRadii from "@navikt/ds-tokens/src/border.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
+import Spacing from "@navikt/ds-tokens/src/spacing.json";
 
 export type BackgroundToken =
   | keyof typeof bgColors.a
@@ -12,3 +13,18 @@ export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
+
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+type FixedResponsiveT<T> = {
+  [Breakpoint in BreakpointsAlias]?: T;
+};
+
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;

package/src/loader/Loader.tsx

@@ -52,7 +52,7 @@ export type LoaderType = React.ForwardRefExoticComponent<
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(

package/src/modal/Modal.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
 } from "react";
 import { createPortal } from "react-dom";
+import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
 import { mergeRefs, useId } from "../util";
@@ -82,11 +83,13 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       open,
       onBeforeClose,
       onCancel,
+      closeOnBackdropClick,
       width,
       portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
+      onClick,
       ...rest
     }: ModalProps,
     ref
@@ -97,7 +100,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const rootElement = useProvider()?.rootElement;
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
-    if (useContext(ModalContext)) {
+    const dateContext = useContext(DateContext);
+    const modalContext = useContext(ModalContext);
+    if (modalContext && !dateContext) {
       console.error("Modals should not be nested");
     }
 
@@ -108,6 +113,11 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
       }
+      // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
+      // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
+      // We have to use JS because it doesn't work to set it with a prop (React bug?)
+      // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
+      if (modalRef.current && portalNode) modalRef.current.autofocus = true;
     }, [modalRef, portalNode]);
 
     useEffect(() => {
@@ -128,34 +138,57 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
+    const mergedClassName = cl("navds-modal", className, {
+      "navds-modal--polyfilled": needPolyfill,
+      "navds-modal--autowidth": !width,
+      [`navds-modal--${width}`]: isWidthPreset,
+    });
+
+    const mergedStyle = {
+      ...style,
+      ...(!isWidthPreset ? { width } : {}),
+    };
+
+    const mergedOnCancel: React.DialogHTMLAttributes<HTMLDialogElement>["onCancel"] =
+      (event) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+          event.preventDefault();
+        } else if (onCancel) onCancel(event);
+      };
+
+    const mergedOnClick =
+      closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
+        ? (event: React.MouseEvent<HTMLDialogElement>) => {
+            onClick && onClick(event);
+            if (
+              event.target === modalRef.current &&
+              (!onBeforeClose || onBeforeClose() !== false)
+            ) {
+              modalRef.current.close();
+            }
+          }
+        : onClick;
+
+    const mergedAriaLabelledBy =
+      !ariaLabelledby && !rest["aria-label"] && header
+        ? ariaLabelId
+        : ariaLabelledby;
+
     const component = (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
       <dialog
         {...rest}
         ref={mergedRef}
-        className={cl("navds-modal", className, {
-          "navds-modal--polyfilled": needPolyfill,
-          "navds-modal--autowidth": !width,
-          [`navds-modal--${width}`]: isWidthPreset,
-        })}
-        style={{
-          ...style,
-          ...(!isWidthPreset ? { width } : {}),
-        }}
-        onCancel={(event) => {
-          // FYI: onCancel fires when you press Esc
-          if (onBeforeClose && onBeforeClose() === false) {
-            event.preventDefault();
-          } else if (onCancel) onCancel(event);
-        }}
-        aria-labelledby={
-          !ariaLabelledby && !rest["aria-label"] && header
-            ? ariaLabelId
-            : ariaLabelledby
-        }
+        className={mergedClassName}
+        style={mergedStyle}
+        onCancel={mergedOnCancel} // FYI: onCancel fires when you press Esc
+        onClick={mergedOnClick}
+        aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContext.Provider
           value={{
             closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+            ref: modalRef,
           }}
         >
           {header && (

package/src/modal/ModalContext.ts

@@ -2,5 +2,6 @@ import React from "react";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  ref: React.RefObject<HTMLDialogElement>;
 }
 export const ModalContext = React.createContext<ModalContextProps | null>(null);

package/src/modal/modal.stories.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
-import { BodyLong, Button, Heading } from "..";
+import React, { useRef, useState } from "react";
+import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";
 
 export default {
@@ -27,6 +27,7 @@ export const WithUseRef = () => {
           heading: "Title",
           size: "small",
         }}
+        closeOnBackdropClick
       >
         <Modal.Body>
           <BodyLong spacing>
@@ -45,6 +46,7 @@ export const WithUseRef = () => {
             onBeforeClose={() =>
               window.confirm("Are you sure you want to close the modal?")
             }
+            closeOnBackdropClick
             aria-labelledby="heading123"
           >
             <Modal.Header>
@@ -111,6 +113,7 @@ export const WithUseState = () => {
               e.stopPropagation(); // onClose wil propagate to parent modal if not stopped
               setOpen2(false);
             }}
+            closeOnBackdropClick
             aria-label="Nested modal"
             width={800}
           >
@@ -165,3 +168,28 @@ export const MediumWithPortal = () => (
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+
+export const WithTooltip = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  return (
+    <div>
+      <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
+      <Modal
+        open={ref.current ? undefined : true /* initially open */}
+        ref={ref}
+      >
+        <Modal.Body>
+          <div style={{ marginBottom: "1rem" }}>
+            <Tooltip content="This_is_the_first_tooltip">
+              <Button>Test 1</Button>
+            </Tooltip>
+          </div>
+          <Tooltip content="This is the second tooltip">
+            <Button>Test 2</Button>
+          </Tooltip>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};

package/src/modal/types.ts

@@ -42,6 +42,13 @@ export interface ModalProps
    * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
    */
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+  /**
+   * Whether to close when clicking on the backdrop.
+   *
+   * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   * @default false
+   */
+  closeOnBackdropClick?: boolean;
   /**
    * @default fit-content (up to 700px)
    * */

package/src/popover/Popover.tsx

@@ -18,6 +18,7 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
 import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -73,11 +74,6 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default "absolute"
    */
   strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
   /**
    * Changes placement of the floating element in order to keep it in view.
    * @default true
@@ -124,7 +120,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement = "top",
       offset,
       strategy: userStrategy,
-      bubbleEscape = false,
       flip: _flip = true,
       ...rest
     },
@@ -132,8 +127,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
+    const isInDatepicker = useContext(DateContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInModal ? true : _flip;
+    const chosenFlip = isInDatepicker ? false : _flip;
 
     const {
       x,
@@ -160,11 +156,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context, {
-        bubbles: {
-          escapeKey: bubbleEscape,
-        },
-      }),
+      useDismiss(context),
     ]);
 
     useClientLayoutEffect(() => {

package/src/tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
 import {
-  arrow as flArrow,
+  FloatingPortal,
   autoUpdate,
+  arrow as flArrow,
   flip,
-  FloatingPortal,
   offset,
   safePolygon,
   shift,
@@ -14,16 +14,18 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, {
+  HTMLAttributes,
   cloneElement,
   forwardRef,
-  HTMLAttributes,
+  useContext,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { ModalContext } from "../modal/ModalContext";
+import { useProvider } from "../provider";
 import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
-import { useProvider } from "../provider";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -110,7 +112,11 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) => {
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const rootElement = useProvider()?.rootElement;
+    const modalContext = useContext(ModalContext);
+    const providerRootElement = useProvider()?.rootElement;
+    const rootElement = modalContext
+      ? modalContext.ref.current
+      : providerRootElement;
 
     const {
       x,
@@ -133,7 +139,13 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
       ],
-      whileElementsMounted: autoUpdate,
+      whileElementsMounted: modalContext
+        ? (reference, floating, update) =>
+            // Reduces jumping in Chrome when used in a Modal and it's the first focusable element.
+            // Can be removed when autofocus starts working on <dialog> in Chrome. See also Modal.tsx
+            autoUpdate(reference, floating, update, { animationFrame: true })
+        : autoUpdate,
+      strategy: modalContext ? "fixed" : undefined,
     });
 
     const { getReferenceProps, getFloatingProps } = useInteractions([

package/src/util/__tests__/useMedia.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { useMedia } from "../useMedia";
+
+function TestComponent({ fallback }: { fallback?: boolean }) {
+  const media = useMedia("screen and (min-width: 1024px)", fallback);
+  return <div data-testid="media-id">{`${media}`}</div>;
+}
+
+describe("useMedia", () => {
+  test("Should return 'undefined' when no fallback is given", async () => {
+    render(<TestComponent />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("undefined");
+  });
+  test("Should return fallback", async () => {
+    render(<TestComponent fallback={true} />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("true");
+  });
+});

package/src/util/useMedia.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+export const noMatchMedia =
+  typeof window !== "undefined" && window.matchMedia === undefined;
+
+/**
+ * @example useMedia("screen and (min-width: 1024px)")
+ * @param media string
+ * @param fallback boolean
+ * @returns boolean | undefined
+ */
+export const useMedia = (
+  media: string,
+  fallback?: boolean
+): boolean | undefined => {
+  const [matches, setMatches] = useState(fallback);
+
+  useEffect(() => {
+    if (noMatchMedia) {
+      return;
+    }
+    const mediaQueryList = window.matchMedia(media);
+
+    setMatches(mediaQueryList.matches);
+
+    const listener = (evt: MediaQueryListEvent) => {
+      setMatches(evt.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [media]);
+
+  return matches;
+};

package/cjs/date/hooks/useEscape.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEscape = void 0;
-const react_1 = require("react");
-const useEscape = (open, setOpen, focusRef) => {
-    const handleClose = (0, react_1.useCallback)(() => {
-        setOpen(false);
-        (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
-    }, [focusRef, setOpen]);
-    const escape = (0, react_1.useCallback)((event) => {
-        if (open && event.key === "Escape") {
-            event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-            handleClose();
-        }
-    }, [handleClose, open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
-};
-exports.useEscape = useEscape;

package/cjs/date/hooks/useOutsideClickHandler.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOutsideClickHandler = void 0;
-const react_1 = require("react");
-const useOutsideClickHandler = (open, setOpen, refs) => {
-    const handleFocusIn = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c;
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        if (!refs.some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed)))) {
-            open && setOpen(false);
-        }
-    }, [open, refs, setOpen]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
-};
-exports.useOutsideClickHandler = useOutsideClickHandler;

package/esm/date/DateInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":"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"}

package/esm/date/hooks/useEscape.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare const useEscape: (open: boolean, setOpen: (openState: boolean) => void, focusRef: RefObject<HTMLElement>) => void;

package/esm/date/hooks/useEscape.js

@@ -1,20 +0,0 @@
-import { useCallback, useEffect } from "react";
-export const useEscape = (open, setOpen, focusRef) => {
-    const handleClose = useCallback(() => {
-        setOpen(false);
-        (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
-    }, [focusRef, setOpen]);
-    const escape = useCallback((event) => {
-        if (open && event.key === "Escape") {
-            event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-            handleClose();
-        }
-    }, [handleClose, open]);
-    useEffect(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
-};
-//# sourceMappingURL=useEscape.js.map

package/esm/date/hooks/useEscape.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../../src/date/hooks/useEscape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE1D,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAa,EACb,OAAqC,EACrC,QAAgC,EAChC,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,sEAAsE;YAC9F,WAAW,EAAE,CAAC;SACf;IACH,CAAC,EACD,CAAC,WAAW,EAAE,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC,CAAC"}

package/esm/date/hooks/useOutsideClickHandler.d.ts

@@ -1 +0,0 @@
-export declare const useOutsideClickHandler: (open: boolean, setOpen: (openState: boolean) => void, refs: Array<any>) => void;

package/esm/date/hooks/useOutsideClickHandler.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect } from "react";
-export const useOutsideClickHandler = (open, setOpen, refs) => {
-    const handleFocusIn = useCallback((e) => {
-        var _a, _b, _c;
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        if (!refs.some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed)))) {
-            open && setOpen(false);
-        }
-    }, [open, refs, setOpen]);
-    useEffect(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
-};
-//# sourceMappingURL=useOutsideClickHandler.js.map

package/esm/date/hooks/useOutsideClickHandler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOutsideClickHandler.js","sourceRoot":"","sources":["../../../src/date/hooks/useOutsideClickHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,IAAa,EACb,OAAqC,EACrC,IAAgB,EAChB,EAAE;IACF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAC,EAAE,EAAE;;QACJ,MAAM,QAAQ,GAAG,MAAA,MAAA,CAAC,CAAC,YAAY,iDAAI,0CAAG,CAAC,CAAC,CAAC;QACzC,IAAI,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,CAAA,IAAI,CAAC,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,QAAQ,CAAA,IAAI,CAAC,QAAQ,EAAE;YACnD,OAAO;SACR;QACD,IACE,CAAC,IAAI,CAAC,IAAI,CACR,CAAC,OAAO,EAAE,EAAE,CACV,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAC7D,EACD;YACA,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,EACD,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CACtB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;;YACV,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,uDAAG,SAAS,EAAE,aAAa,CAAC,CAAC;YACxD,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,uDAAG,aAAa,EAAE,aAAa,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC"}