@drivy/cobalt 2.19.0 → 2.24.0

package/components/Popover/useDesktopPopoverCore.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFloating, shift, offset, flip, arrow, autoUpdate, useHover, safePolygon, useClick, useDismiss, useRole, useInteractions, useTransitionStyles, FloatingArrow, FloatingPortal } from '@floating-ui/react';
+import cx from 'classnames';
+import { useRef, useEffect } from 'react';
+import { zIndexes } from '../../tokens/index.js';
+
+const ANIMATION_TRANSITION_DISTANCE_PX = 4;
+function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement = "top", flip: flip$1 = true, tooltip = false, arrow: showArrow = true, theme = "", zIndex = zIndexes.dropdown, appendToBody = true, fitContent = true, withBorder = false, trigger = "click", interactive = false, delay = 0, offset: offset$1, bodySpacing = false, ariaLabel, onShow, onHidden, getFloatingExtraProps, }) {
+    const arrowRef = useRef(null);
+    const [crossAxis, mainAxis] = offset$1 !== null && offset$1 !== void 0 ? offset$1 : [0, showArrow ? 12 : 8];
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange,
+        placement,
+        transform: false,
+        middleware: [
+            shift({ padding: 8 }),
+            offset({ mainAxis, crossAxis }),
+            ...(flip$1 ? [flip()] : []),
+            ...(showArrow ? [arrow({ element: arrowRef })] : []),
+        ],
+        whileElementsMounted: autoUpdate,
+        elements: { reference: referenceElement },
+    });
+    const isHover = trigger === "mouseenter";
+    const isClick = trigger === "click";
+    const hover = useHover(context, {
+        enabled: isHover,
+        move: false,
+        delay,
+        handleClose: isHover && interactive ? safePolygon() : undefined,
+    });
+    const click = useClick(context, {
+        enabled: isClick,
+    });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "dialog" });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        click,
+        dismiss,
+        role,
+    ]);
+    const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+        duration: { open: 200, close: 150 },
+        initial: ({ side }) => ({
+            opacity: 0,
+            transform: side === "top"
+                ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                : side === "bottom"
+                    ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                    : side === "left"
+                        ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                        : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,
+        }),
+    });
+    const prevMountedRef = useRef(false);
+    useEffect(() => {
+        if (isMounted && !prevMountedRef.current)
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        if (!isMounted && prevMountedRef.current)
+            onHidden === null || onHidden === void 0 ? void 0 : onHidden();
+        prevMountedRef.current = isMounted;
+    }, [isMounted, onShow, onHidden]);
+    const renderFloating = (content) => {
+        var _a;
+        if (!isMounted)
+            return null;
+        const body = bodySpacing ? (jsx("div", { className: "cobalt-popover--bodySpacing", children: content })) : (content);
+        const extraFloatingProps = (_a = getFloatingExtraProps === null || getFloatingExtraProps === void 0 ? void 0 : getFloatingExtraProps()) !== null && _a !== void 0 ? _a : {};
+        const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } = extraFloatingProps;
+        const node = (jsxs("div", { ref: refs.setFloating, style: {
+                ...floatingStyles,
+                ...transitionStyles,
+                zIndex,
+            }, className: cx("cobalt-popover", {
+                "cobalt-popover--withArrow": showArrow,
+                "cobalt-popover--fitContent": fitContent,
+                "cobalt-popover--withBorder": withBorder,
+            }), "data-placement": context.placement, "data-theme": cx(theme, {
+                tooltip: tooltip,
+            }), ...getFloatingProps({
+                "aria-label": ariaLabel,
+                ...restExtraFloatingProps,
+                onMouseEnter,
+                onMouseLeave,
+            }), children: [showArrow && (jsx(FloatingArrow, { ref: arrowRef, context: context, className: "cobalt-popover__arrow" })), body] }));
+        return appendToBody ? jsx(FloatingPortal, { children: node }) : node;
+    };
+    return {
+        refs: {
+            setReference: refs.setReference,
+            setFloating: refs.setFloating,
+        },
+        getReferenceProps,
+        renderFloating,
+        isMounted,
+    };
+}
+
+export { useDesktopPopoverCore };
+//# sourceMappingURL=useDesktopPopoverCore.js.map

package/components/Popover/useDesktopPopoverCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDesktopPopoverCore.js","sources":["../../../src/components/Popover/useDesktopPopoverCore.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  FloatingPortal,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  type Placement,\n  safePolygon,\n  shift as shiftMiddleware,\n  useClick,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from \"@floating-ui/react\"\nimport classNames from \"classnames\"\nimport type React from \"react\"\nimport { useEffect, useRef } from \"react\"\nimport { zIndexes } from \"../../tokens\"\n\nconst ANIMATION_TRANSITION_DISTANCE_PX = 4\n\nexport type PopoverConfig = {\n  placement?: Placement\n  flip?: boolean\n  arrow?: boolean\n  theme?: string\n  tooltip?: boolean\n  lightMode?: boolean\n  zIndex?: number\n  appendToBody?: boolean\n  withBorder?: boolean\n  fitContent?: boolean\n  trigger?: \"click\" | \"mouseenter\"\n  interactive?: boolean\n  delay?: number | { open?: number; close?: number }\n  offset?: [number, number]\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n}\n\nexport type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, \"trigger\"> & {\n  isOpen: boolean\n  onOpenChange?: (open: boolean) => void\n  referenceElement: Element | null\n  trigger?: \"click\" | \"mouseenter\" | \"manual\"\n  ariaLabel?: string\n  getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>\n}\n\nexport type DesktopPopoverCoreRefs = {\n  setReference: (node: Element | null) => void\n  setFloating: (node: HTMLElement | null) => void\n}\n\ntype UseDesktopPopoverCoreReturnType = {\n  refs: DesktopPopoverCoreRefs\n  getReferenceProps: ReturnType<\n    typeof import(\"@floating-ui/react\").useInteractions\n  >[\"getReferenceProps\"]\n  renderFloating: (content: React.ReactNode) => React.ReactNode\n  isMounted: boolean\n}\n\nexport function useDesktopPopoverCore({\n  isOpen,\n  onOpenChange,\n  referenceElement,\n  placement = \"top\",\n  flip = true,\n  tooltip = false,\n  arrow: showArrow = true,\n  theme = \"\",\n  zIndex = zIndexes.dropdown,\n  appendToBody = true,\n  fitContent = true,\n  withBorder = false,\n  trigger = \"click\",\n  interactive = false,\n  delay = 0,\n  offset,\n  bodySpacing = false,\n  ariaLabel,\n  onShow,\n  onHidden,\n  getFloatingExtraProps,\n}: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType {\n  const arrowRef = useRef<SVGSVGElement | null>(null)\n\n  const [crossAxis, mainAxis] = offset ?? [0, showArrow ? 12 : 8]\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange,\n    placement,\n    transform: false,\n    middleware: [\n      shiftMiddleware({ padding: 8 }),\n      offsetMiddleware({ mainAxis, crossAxis }),\n      ...(flip ? [flipMiddleware()] : []),\n      ...(showArrow ? [arrow({ element: arrowRef })] : []),\n    ],\n    whileElementsMounted: autoUpdate,\n    elements: { reference: referenceElement },\n  })\n\n  const isHover = trigger === \"mouseenter\"\n  const isClick = trigger === \"click\"\n\n  const hover = useHover(context, {\n    enabled: isHover,\n    move: false,\n    delay,\n    handleClose: isHover && interactive ? safePolygon() : undefined,\n  })\n\n  const click = useClick(context, {\n    enabled: isClick,\n  })\n\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: \"dialog\" })\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    click,\n    dismiss,\n    role,\n  ])\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: { open: 200, close: 150 },\n    initial: ({ side }) => ({\n      opacity: 0,\n      transform:\n        side === \"top\"\n          ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n          : side === \"bottom\"\n            ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n            : side === \"left\"\n              ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n              : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,\n    }),\n  })\n\n  const prevMountedRef = useRef(false)\n\n  useEffect(() => {\n    if (isMounted && !prevMountedRef.current) onShow?.()\n    if (!isMounted && prevMountedRef.current) onHidden?.()\n    prevMountedRef.current = isMounted\n  }, [isMounted, onShow, onHidden])\n\n  const renderFloating = (content: React.ReactNode) => {\n    if (!isMounted) return null\n\n    const body = bodySpacing ? (\n      <div className=\"cobalt-popover--bodySpacing\">{content}</div>\n    ) : (\n      content\n    )\n\n    const extraFloatingProps = getFloatingExtraProps?.() ?? {}\n    const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } =\n      extraFloatingProps\n\n    const node = (\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          ...transitionStyles,\n          zIndex,\n        }}\n        className={classNames(\"cobalt-popover\", {\n          \"cobalt-popover--withArrow\": showArrow,\n          \"cobalt-popover--fitContent\": fitContent,\n          \"cobalt-popover--withBorder\": withBorder,\n        })}\n        data-placement={context.placement}\n        data-theme={classNames(theme, {\n          tooltip: tooltip,\n        })}\n        {...getFloatingProps({\n          \"aria-label\": ariaLabel,\n          ...restExtraFloatingProps,\n          onMouseEnter,\n          onMouseLeave,\n        })}\n      >\n        {showArrow && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            className=\"cobalt-popover__arrow\"\n          />\n        )}\n        {body}\n      </div>\n    )\n\n    return appendToBody ? <FloatingPortal>{node}</FloatingPortal> : node\n  }\n\n  return {\n    refs: {\n      setReference: refs.setReference,\n      setFloating: refs.setFloating,\n    },\n    getReferenceProps,\n    renderFloating,\n    isMounted,\n  }\n}\n"],"names":["flip","offset","shiftMiddleware","offsetMiddleware","flipMiddleware","_jsx","_jsxs","classNames"],"mappings":";;;;;;AAuBA,MAAM,gCAAgC,GAAG,CAAC,CAAA;AA6C1B,SAAA,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,SAAS,GAAG,KAAK,QACjBA,MAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,KAAK,EAAE,SAAS,GAAG,IAAI,EACvB,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,QAAQ,CAAC,QAAQ,EAC1B,YAAY,GAAG,IAAI,EACnB,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,OAAO,EACjB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,CAAC,UACTC,QAAM,EACN,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,MAAM,EACN,QAAQ,EACR,qBAAqB,GACQ,EAAA;AAC7B,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAEnD,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAGA,QAAM,KAAA,IAAA,IAANA,QAAM,KAAA,KAAA,CAAA,GAANA,QAAM,GAAI,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAE/D,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC;AACpD,QAAA,IAAI,EAAE,MAAM;QACZ,YAAY;QACZ,SAAS;AACT,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,UAAU,EAAE;AACV,YAAAC,KAAe,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC/B,YAAAC,MAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AACzC,YAAA,IAAIH,MAAI,GAAG,CAACI,IAAc,EAAE,CAAC,GAAG,EAAE,CAAC;AACnC,YAAA,IAAI,SAAS,GAAG,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACrD,SAAA;AACD,QAAA,oBAAoB,EAAE,UAAU;AAChC,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AAC1C,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,OAAO,GAAG,OAAO,KAAK,YAAY,CAAA;AACxC,IAAA,MAAM,OAAO,GAAG,OAAO,KAAK,OAAO,CAAA;AAEnC,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE;AAC9B,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,KAAK;QACX,KAAK;AACL,QAAA,WAAW,EAAE,OAAO,IAAI,WAAW,GAAG,WAAW,EAAE,GAAG,SAAS;AAChE,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE;AAC9B,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;AACnC,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAA;AAEjD,IAAA,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,GAAG,eAAe,CAAC;QAC9D,KAAK;QACL,KAAK;QACL,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,OAAO,EAAE;QAC3E,QAAQ,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;QACnC,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM;AACtB,YAAA,OAAO,EAAE,CAAC;YACV,SAAS,EACP,IAAI,KAAK,KAAK;kBACV,CAAc,WAAA,EAAA,gCAAgC,CAAK,GAAA,CAAA;kBACnD,IAAI,KAAK,QAAQ;sBACf,CAAe,YAAA,EAAA,gCAAgC,CAAK,GAAA,CAAA;sBACpD,IAAI,KAAK,MAAM;0BACb,CAAc,WAAA,EAAA,gCAAgC,CAAK,GAAA,CAAA;0BACnD,CAAe,YAAA,EAAA,gCAAgC,CAAK,GAAA,CAAA;SAC/D,CAAC;AACH,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEpC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,SAAS,IAAI,CAAC,cAAc,CAAC,OAAO;AAAE,YAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,MAAM,EAAI,CAAA;AACpD,QAAA,IAAI,CAAC,SAAS,IAAI,cAAc,CAAC,OAAO;AAAE,YAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,EAAI,CAAA;AACtD,QAAA,cAAc,CAAC,OAAO,GAAG,SAAS,CAAA;KACnC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAA;AAEjC,IAAA,MAAM,cAAc,GAAG,CAAC,OAAwB,KAAI;;AAClD,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,IAAI,CAAA;QAE3B,MAAM,IAAI,GAAG,WAAW,IACtBC,aAAK,SAAS,EAAC,6BAA6B,EAAE,QAAA,EAAA,OAAO,GAAO,KAE5D,OAAO,CACR,CAAA;QAED,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,qBAAqB,KAAA,IAAA,IAArB,qBAAqB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAArB,qBAAqB,EAAI,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAA;QAC1D,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,sBAAsB,EAAE,GAC7D,kBAAkB,CAAA;QAEpB,MAAM,IAAI,IACRC,IACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,gBAAgB;gBACnB,MAAM;AACP,aAAA,EACD,SAAS,EAAEC,EAAU,CAAC,gBAAgB,EAAE;AACtC,gBAAA,2BAA2B,EAAE,SAAS;AACtC,gBAAA,4BAA4B,EAAE,UAAU;AACxC,gBAAA,4BAA4B,EAAE,UAAU;aACzC,CAAC,EAAA,gBAAA,EACc,OAAO,CAAC,SAAS,gBACrBA,EAAU,CAAC,KAAK,EAAE;AAC5B,gBAAA,OAAO,EAAE,OAAO;aACjB,CAAC,EAAA,GACE,gBAAgB,CAAC;AACnB,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,GAAG,sBAAsB;gBACzB,YAAY;gBACZ,YAAY;aACb,CAAC,EAAA,QAAA,EAAA,CAED,SAAS,KACRF,GAAA,CAAC,aAAa,EACZ,EAAA,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,uBAAuB,EAAA,CACjC,CACH,EACA,IAAI,CACD,EAAA,CAAA,CACP,CAAA;AAED,QAAA,OAAO,YAAY,GAAGA,GAAC,CAAA,cAAc,EAAE,EAAA,QAAA,EAAA,IAAI,EAAkB,CAAA,GAAG,IAAI,CAAA;AACtE,KAAC,CAAA;IAED,OAAO;AACL,QAAA,IAAI,EAAE;YACJ,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;AAC9B,SAAA;QACD,iBAAiB;QACjB,cAAc;QACd,SAAS;KACV,CAAA;AACH;;;;"}

package/components/Popover/useSingletonPopover.js

@@ -0,0 +1,148 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { registerPopover } from './popoverRegistry.js';
+import { useDesktopPopoverCore } from './useDesktopPopoverCore.js';
+
+function normalizeDelay(delay) {
+    var _a, _b;
+    if (typeof delay === "number") {
+        return { open: delay, close: delay };
+    }
+    return {
+        open: (_a = delay === null || delay === void 0 ? void 0 : delay.open) !== null && _a !== void 0 ? _a : 0,
+        close: (_b = delay === null || delay === void 0 ? void 0 : delay.close) !== null && _b !== void 0 ? _b : 0,
+    };
+}
+function useSingletonPopover({ trigger = "mouseenter", delay = 0, interactive = false, gracePeriod = 100, ...options }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [content, setContent] = useState(null);
+    const openTimeoutRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const delays = normalizeDelay(delay);
+    const clearOpenTimeout = useCallback(() => {
+        if (openTimeoutRef.current != null) {
+            window.clearTimeout(openTimeoutRef.current);
+            openTimeoutRef.current = null;
+        }
+    }, []);
+    const clearCloseTimeout = useCallback(() => {
+        if (closeTimeoutRef.current != null) {
+            window.clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (openTimeoutRef.current != null) {
+                window.clearTimeout(openTimeoutRef.current);
+            }
+            if (closeTimeoutRef.current != null) {
+                window.clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
+    const closePopover = useCallback((immediate = false, useGracePeriod = false) => {
+        clearOpenTimeout();
+        const run = () => {
+            setIsOpen(false);
+        };
+        const closeDelay = useGracePeriod
+            ? Math.max(delays.close, gracePeriod)
+            : delays.close;
+        if (immediate || closeDelay === 0) {
+            clearCloseTimeout();
+            run();
+            return;
+        }
+        clearCloseTimeout();
+        closeTimeoutRef.current = window.setTimeout(run, closeDelay);
+    }, [clearOpenTimeout, clearCloseTimeout, delays.close, gracePeriod]);
+    useEffect(() => {
+        return registerPopover(() => {
+            closePopover(true);
+        });
+    }, [closePopover]);
+    const core = useDesktopPopoverCore({
+        ...options,
+        isOpen,
+        onOpenChange: setIsOpen,
+        referenceElement,
+        trigger: "manual",
+        interactive,
+        getFloatingExtraProps: interactive && trigger === "mouseenter"
+            ? () => ({
+                onMouseEnter: () => {
+                    clearCloseTimeout();
+                },
+                onMouseLeave: () => {
+                    closePopover(false, true);
+                },
+            })
+            : undefined,
+    });
+    const openWithItem = (item, element, immediate = false) => {
+        clearCloseTimeout();
+        const run = () => {
+            setReferenceElement(element);
+            core.refs.setReference(element);
+            setContent(item.content);
+            setIsOpen(true);
+        };
+        const shouldOpenImmediately = immediate || isOpen || delays.open === 0;
+        if (shouldOpenImmediately) {
+            clearOpenTimeout();
+            run();
+            return;
+        }
+        clearOpenTimeout();
+        openTimeoutRef.current = window.setTimeout(run, delays.open);
+    };
+    const getReferenceProps = (item, userProps = {}) => {
+        const { onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onClick, ...restUserProps } = userProps;
+        return core.getReferenceProps({
+            ...restUserProps,
+            onMouseEnter: (e) => {
+                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+                if (trigger === "mouseenter") {
+                    openWithItem(item, e.currentTarget);
+                }
+            },
+            onPointerEnter: (e) => {
+                onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
+            },
+            onMouseLeave: (e) => {
+                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+                if (trigger === "mouseenter" && !interactive) {
+                    closePopover(false, true);
+                }
+            },
+            onPointerLeave: (e) => {
+                onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
+            },
+            onClick: (e) => {
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                if (trigger === "click") {
+                    const sameReference = referenceElement === e.currentTarget;
+                    setReferenceElement(e.currentTarget);
+                    core.refs.setReference(e.currentTarget);
+                    setContent(item.content);
+                    if (sameReference && isOpen) {
+                        setIsOpen(false);
+                    }
+                    else {
+                        setIsOpen(true);
+                    }
+                }
+            },
+        });
+    };
+    return {
+        getReferenceProps,
+        renderFloating: () => content == null ? null : core.renderFloating(content),
+        close: () => closePopover(true),
+        isOpen,
+    };
+}
+
+export { useSingletonPopover };
+//# sourceMappingURL=useSingletonPopover.js.map

package/components/Popover/useSingletonPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSingletonPopover.js","sources":["../../../src/components/Popover/useSingletonPopover.tsx"],"sourcesContent":["import type React from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { registerPopover } from \"./popoverRegistry\"\nimport type { UseDesktopPopoverCoreOptions } from \"./useDesktopPopoverCore\"\nimport { useDesktopPopoverCore } from \"./useDesktopPopoverCore\"\n\ntype SingletonItem = {\n  content: React.ReactNode\n}\n\ntype SingletonReferenceProps = React.HTMLAttributes<HTMLElement>\n\ntype SingletonOptions = Omit<\n  UseDesktopPopoverCoreOptions,\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"referenceElement\"\n  | \"trigger\"\n  | \"getFloatingExtraProps\"\n> & {\n  trigger?: \"click\" | \"mouseenter\"\n  gracePeriod?: number\n}\n\nfunction normalizeDelay(delay: SingletonOptions[\"delay\"]) {\n  if (typeof delay === \"number\") {\n    return { open: delay, close: delay }\n  }\n\n  return {\n    open: delay?.open ?? 0,\n    close: delay?.close ?? 0,\n  }\n}\n\nexport function useSingletonPopover({\n  trigger = \"mouseenter\",\n  delay = 0,\n  interactive = false,\n  gracePeriod = 100,\n  ...options\n}: SingletonOptions) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null,\n  )\n  const [content, setContent] = useState<React.ReactNode>(null)\n\n  const openTimeoutRef = useRef<number | null>(null)\n  const closeTimeoutRef = useRef<number | null>(null)\n\n  const delays = normalizeDelay(delay)\n\n  const clearOpenTimeout = useCallback(() => {\n    if (openTimeoutRef.current != null) {\n      window.clearTimeout(openTimeoutRef.current)\n      openTimeoutRef.current = null\n    }\n  }, [])\n\n  const clearCloseTimeout = useCallback(() => {\n    if (closeTimeoutRef.current != null) {\n      window.clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current != null) {\n        window.clearTimeout(openTimeoutRef.current)\n      }\n\n      if (closeTimeoutRef.current != null) {\n        window.clearTimeout(closeTimeoutRef.current)\n      }\n    }\n  }, [])\n\n  const closePopover = useCallback(\n    (immediate = false, useGracePeriod = false) => {\n      clearOpenTimeout()\n\n      const run = () => {\n        setIsOpen(false)\n      }\n\n      const closeDelay = useGracePeriod\n        ? Math.max(delays.close, gracePeriod)\n        : delays.close\n\n      if (immediate || closeDelay === 0) {\n        clearCloseTimeout()\n        run()\n        return\n      }\n\n      clearCloseTimeout()\n      closeTimeoutRef.current = window.setTimeout(run, closeDelay)\n    },\n    [clearOpenTimeout, clearCloseTimeout, delays.close, gracePeriod],\n  )\n\n  useEffect(() => {\n    return registerPopover(() => {\n      closePopover(true)\n    })\n  }, [closePopover])\n\n  const core = useDesktopPopoverCore({\n    ...options,\n    isOpen,\n    onOpenChange: setIsOpen,\n    referenceElement,\n    trigger: \"manual\",\n    interactive,\n    getFloatingExtraProps:\n      interactive && trigger === \"mouseenter\"\n        ? () => ({\n            onMouseEnter: () => {\n              clearCloseTimeout()\n            },\n            onMouseLeave: () => {\n              closePopover(false, true)\n            },\n          })\n        : undefined,\n  })\n\n  const openWithItem = (\n    item: SingletonItem,\n    element: HTMLElement,\n    immediate = false,\n  ) => {\n    clearCloseTimeout()\n\n    const run = () => {\n      setReferenceElement(element)\n      core.refs.setReference(element)\n      setContent(item.content)\n      setIsOpen(true)\n    }\n\n    const shouldOpenImmediately = immediate || isOpen || delays.open === 0\n\n    if (shouldOpenImmediately) {\n      clearOpenTimeout()\n      run()\n      return\n    }\n\n    clearOpenTimeout()\n    openTimeoutRef.current = window.setTimeout(run, delays.open)\n  }\n\n  const getReferenceProps = (\n    item: SingletonItem,\n    userProps: SingletonReferenceProps = {},\n  ) => {\n    const {\n      onMouseEnter,\n      onMouseLeave,\n      onPointerEnter,\n      onPointerLeave,\n      onClick,\n      ...restUserProps\n    } = userProps\n\n    return core.getReferenceProps({\n      ...restUserProps,\n\n      onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n        onMouseEnter?.(e)\n\n        if (trigger === \"mouseenter\") {\n          openWithItem(item, e.currentTarget)\n        }\n      },\n\n      onPointerEnter: (e: React.PointerEvent<HTMLElement>) => {\n        onPointerEnter?.(e)\n      },\n\n      onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n        onMouseLeave?.(e)\n\n        if (trigger === \"mouseenter\" && !interactive) {\n          closePopover(false, true)\n        }\n      },\n\n      onPointerLeave: (e: React.PointerEvent<HTMLElement>) => {\n        onPointerLeave?.(e)\n      },\n\n      onClick: (e: React.MouseEvent<HTMLElement>) => {\n        onClick?.(e)\n\n        if (trigger === \"click\") {\n          const sameReference = referenceElement === e.currentTarget\n\n          setReferenceElement(e.currentTarget)\n          core.refs.setReference(e.currentTarget)\n          setContent(item.content)\n\n          if (sameReference && isOpen) {\n            setIsOpen(false)\n          } else {\n            setIsOpen(true)\n          }\n        }\n      },\n    })\n  }\n\n  return {\n    getReferenceProps,\n    renderFloating: () =>\n      content == null ? null : core.renderFloating(content),\n    close: () => closePopover(true),\n    isOpen,\n  }\n}\n"],"names":[],"mappings":"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"}

package/components/ProgressBanner/index.js

@@ -3,14 +3,16 @@ import cx from 'classnames';
 import '../Icon/index.js';
 import { ProgressCircular } from '../ProgressCircular/index.js';
 import CheckIcon from '../Icon/__generated__/CheckIcon.js';
+import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
 
-function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
-    return (jsxs("div", { className: cx("cobalt-progressBanner", className, {
+function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, href, }) {
+    const Root = href != null ? "a" : "div";
+    return (jsxs(Root, { ...(href != null ? { href } : null), className: cx("cobalt-progressBanner", className, {
             "cobalt-progressBanner--completed": completed,
             "cobalt-progressBanner--fullWidth": fullWidth,
         }), children: [progress && !completed && (jsx(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated, children: jsxs("div", { className: "cobalt-progressBanner__progress-container", children: [progress.done, "/", progress.total] }) })), completed && (jsx("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
                     "cobalt-progressBanner__completed-icon-container--animated": animated,
-                }), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] })] }));
+                }), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] }), href && (jsx("div", { className: "c-flex", children: jsx(ChevronRightIcon, {}) }))] }));
 }
 
 export { ProgressBanner };

package/components/ProgressBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { CheckIcon } from \"../Icon\"\nimport { ProgressCircular } from \"../ProgressCircular\"\n\ntype ProgressBannerPropsType = {\n  progress?: {\n    done: number\n    total: number\n  }\n  title: string\n  description: string\n  completed?: boolean\n  animated?: boolean\n  fullWidth?: boolean\n  className?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n}: ProgressBannerPropsType) {\n  return (\n    <div\n      className={cx(\"cobalt-progressBanner\", className, {\n        \"cobalt-progressBanner--completed\": completed,\n        \"cobalt-progressBanner--fullWidth\": fullWidth,\n      })}\n    >\n      {progress && !completed && (\n        <ProgressCircular\n          size={48}\n          progress={(progress.done * 100) / progress.total}\n          animated={animated}\n        >\n          <div className=\"cobalt-progressBanner__progress-container\">\n            {progress.done}/{progress.total}\n          </div>\n        </ProgressCircular>\n      )}\n\n      {completed && (\n        <div\n          className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n            \"cobalt-progressBanner__completed-icon-container--animated\":\n              animated,\n          })}\n        >\n          <CheckIcon color=\"success\" size={32} />\n        </div>\n      )}\n\n      <div className=\"cobalt-progressBanner__text-container\">\n        <div className=\"cobalt-progressBanner__title\">{title}</div>\n        <div className=\"cobalt-progressBanner__description\">{description}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAiBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACe,EAAA;IACxB,QACEA,cACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA,QAAA,EAAA,CAED,QAAQ,IAAI,CAAC,SAAS,KACrBC,GAAC,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAElB,QAAA,EAAAD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,QAAQ,CAAC,IAAI,EAAA,GAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,EAAA,CAC3B,EACW,CAAA,CACpB,EAEA,SAAS,KACRC,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,oBAAA,2DAA2D,EACzD,QAAQ;AACX,iBAAA,CAAC,YAEFA,GAAC,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EAAA,CACnC,CACP,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EACpD,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAO,EAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAE,QAAA,EAAA,WAAW,GAAO,CACnE,EAAA,CAAA,CAAA,EAAA,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { CheckIcon, ChevronRightIcon } from \"../Icon\"\nimport { ProgressCircular } from \"../ProgressCircular\"\n\ntype ProgressBannerPropsType = {\n  progress?: {\n    done: number\n    total: number\n  }\n  title: string\n  description: string\n  completed?: boolean\n  animated?: boolean\n  fullWidth?: boolean\n  className?: string\n  href?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n  href,\n}: ProgressBannerPropsType) {\n  const Root: React.ElementType = href != null ? \"a\" : \"div\"\n  return (\n    <Root\n      {...(href != null ? { href } : null)}\n      className={cx(\"cobalt-progressBanner\", className, {\n        \"cobalt-progressBanner--completed\": completed,\n        \"cobalt-progressBanner--fullWidth\": fullWidth,\n      })}\n    >\n      {progress && !completed && (\n        <ProgressCircular\n          size={48}\n          progress={(progress.done * 100) / progress.total}\n          animated={animated}\n        >\n          <div className=\"cobalt-progressBanner__progress-container\">\n            {progress.done}/{progress.total}\n          </div>\n        </ProgressCircular>\n      )}\n\n      {completed && (\n        <div\n          className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n            \"cobalt-progressBanner__completed-icon-container--animated\":\n              animated,\n          })}\n        >\n          <CheckIcon color=\"success\" size={32} />\n        </div>\n      )}\n\n      <div className=\"cobalt-progressBanner__text-container\">\n        <div className=\"cobalt-progressBanner__title\">{title}</div>\n        <div className=\"cobalt-progressBanner__description\">{description}</div>\n      </div>\n\n      {href && (\n        <div className=\"c-flex\">\n          <ChevronRightIcon />\n        </div>\n      )}\n    </Root>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAmBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,IAAI,GACoB,EAAA;AACxB,IAAA,MAAM,IAAI,GAAsB,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK,CAAA;IAC1D,QACEA,IAAC,CAAA,IAAI,EACC,EAAA,IAAC,IAAI,IAAI,IAAI,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,EACpC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA,QAAA,EAAA,CAED,QAAQ,IAAI,CAAC,SAAS,KACrBC,GAAC,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAElB,QAAA,EAAAD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,QAAQ,CAAC,IAAI,EAAA,GAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,EAAA,CAC3B,EACW,CAAA,CACpB,EAEA,SAAS,KACRC,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,oBAAA,2DAA2D,EACzD,QAAQ;iBACX,CAAC,EAAA,QAAA,EAEFA,GAAC,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GACnC,CACP,EAEDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,aACpDC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAO,EAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,WAAW,EAAO,CAAA,CAAA,EAAA,CACnE,EAEL,IAAI,KACHA,aAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EACrBA,GAAC,CAAA,gBAAgB,KAAG,EAChB,CAAA,CACP,CACI,EAAA,CAAA,EACR;AACH;;;;"}

package/components/Sidepanel/index.js

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { getA11yOnClick } from '../../helpers/index.js';
 import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Button from '../Buttons/Button/index.js';
 import '../Icon/index.js';
 import { Fixed } from '../Layout/Surfaces/index.js';
 import Modal from '../Modal/index.js';
@@ -14,7 +15,7 @@ const SidepanelFooter = ({ children, className }) => {
 };
 // Memoized component to not render content when the panel is collapsing
 function _SidepanelContent({ title, close, children }) {
-    return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline", children: [jsx("div", { className: "c-text-title-md c-flex-1", children: title }), close && (jsx("div", { className: "c-w-md c-cursor-pointer", ...getA11yOnClick(close), children: jsx(CloseIcon, { size: 24 }) }))] })), children] }));
+    return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline", children: [jsx("div", { className: "c-text-title-md c-flex-1", children: title }), close && (jsx(Button, { className: "cobalt-sidepanel__close", icon: jsx(CloseIcon, {}), text: true, ...getA11yOnClick(close) }))] })), children] }));
 }
 function areSidepanelContentEqual(_prevProps, nextProps) {
     return !nextProps.isOpen;
@@ -24,7 +25,7 @@ SidepanelContent.displayName = "SidepanelContent";
 // Only for the API, render nothing
 const SidepanelFooterAPI = (_props) => null;
 const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
-const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, children, }) => {
+const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width = 420, children, }) => {
     const { isMobile } = useBreakpoint();
     // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
     const [isPanelVisible, setIsPanelVisible] = useState(false);
@@ -36,12 +37,14 @@ const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, chi
     if (React.isValidElement(sidepanelFooter)) {
         footer = isMobile ? (jsx(Modal.Footer, { ...sidepanelFooter.props })) : (jsx(SidepanelFooter, { ...sidepanelFooter.props }));
     }
-    return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
+    return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, fullScreen: true, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
                     "cobalt-sidepanel--show": isOpen,
                     "cobalt-sidepanel--visible": isPanelVisible,
                 }), onTransitionEnd: () => {
                     !isOpen && setIsPanelVisible(false);
-                }, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && jsx("div", { className: "cobalt-sidepanel-overlay" })] }), document.body));
+                }, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && (jsx("div", { className: "cobalt-sidepanel-overlay", ...(onPointerDownOutside
+                    ? getA11yOnClick(onPointerDownOutside)
+                    : {}) }))] }), document.body));
 };
 _Sidepanel.displayName = "Sidepanel";
 const Sidepanel = Object.assign(_Sidepanel, {

package/components/Sidepanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" {...getA11yOnClick(close)}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType,\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c),\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body,\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Button from \"../Buttons/Button\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n  onPointerDownOutside?: () => void\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <Button\n              className=\"cobalt-sidepanel__close\"\n              icon={<CloseIcon />}\n              text\n              {...getA11yOnClick(close)}\n            />\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType,\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  onPointerDownOutside,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c),\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n      fullScreen\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && (\n          <div\n            className=\"cobalt-sidepanel-overlay\"\n            {...(onPointerDownOutside\n              ? getA11yOnClick(onPointerDownOutside)\n              : {})}\n          ></div>\n        )}\n      </>,\n      document.body,\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/index.js

@@ -50,6 +50,11 @@ export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
 export { PlateNumber } from './components/PlateNumber/index.js';
 export { default as Popover } from './components/Popover/index.js';
+export { PopoverWrapper } from './components/Popover/PopoverWrapper.js';
+export { hideAllPopovers } from './components/Popover/popoverRegistry.js';
+export { TooltipWrapper } from './components/Popover/TooltipWrapper.js';
+export { tooltipConfig } from './components/Popover/tooltipConfig.js';
+export { useSingletonPopover } from './components/Popover/useSingletonPopover.js';
 export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBanner } from './components/ProgressBanner/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.19.0",
+  "version": "2.24.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -20,17 +20,16 @@
   },
   "dependencies": {
     "@ark-ui/react": "5.30.0",
+    "@floating-ui/react": "0.27.10",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.6.0",
-    "@tippyjs/react": "4.2.6",
     "classnames": "2.5.1",
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "5.1.11",
     "postcss": "8.5.14",
-    "tailwindcss": "3.4.19",
-    "tippy.js": "6.3.7"
+    "tailwindcss": "3.4.19"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -305,11 +305,3 @@
     }
   }
 }
-
-.tippy-box[data-theme~="range-picker"] {
-  @apply c-p-xs;
-
-  .tippy-content {
-    min-width: unset;
-  }
-}

package/styles/components/Modal/index.scss

@@ -89,6 +89,18 @@
     }
   }
 
+  &--fullScreen {
+    height: 100%;
+
+    .cobalt-modal__content:not([hidden]) {
+      height: 100%;
+      max-width: unset;
+      max-height: unset;
+
+      border-radius: 0;
+    }
+  }
+
   &--overflowHidden {
     .cobalt-modal__content:not([hidden]) {
       overflow: hidden;
@@ -104,13 +116,13 @@
   }
 
   &-header {
-    @apply c-border-b c-border-b-outline c-p-md;
+    @apply c-border-b c-border-b-outline c-p-md c-gap-sm;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     &__title {
-      @apply c-text-title-md c-text-onSurface c-m-none;
+      @apply c-text-title-md c-text-onSurface c-m-none c-flex-1;
     }
 
     &__close-button {