@drivy/cobalt 2.19.0 → 2.24.0

package/styles/components/Popover/index.scss

@@ -1,90 +1,47 @@
-@import "tippy.js/dist/tippy.css";
-@import "tippy.js/themes/light.css";
-@import "tippy.js/animations/shift-away-subtle.css";
-
-[data-theme~="cobalt-popover"] {
-  &.tippy-box {
-    @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
-  }
-
-  .tippy-content {
-    padding: 0;
-    min-width: 16rem;
-
-    @apply c-rounded-lg;
-  }
-
-  &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: theme("colors.surfaceBright") !important;
-  }
+.cobalt-popover {
+  @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
+  padding: 0;
+  min-width: 16rem;
+  max-width: 500px;
 }
 
-[data-theme~="cobalt-popover--fitContent"] {
-  .tippy-content {
-    min-width: auto;
-  }
+.cobalt-popover--fitContent {
+  min-width: auto;
+  max-width: none;
 }
 
-[data-theme~="cobalt-popover--withArrow"] {
-  &.tippy-box {
-    @apply c-rounded-xl;
-  }
+.cobalt-popover--withArrow {
+  @apply c-rounded-xl;
+}
 
-  .tippy-content {
-    @apply c-rounded-xl;
-  }
+.cobalt-popover--withBorder {
+  @apply c-border c-border-outline;
 }
 
 .cobalt-popover--bodySpacing {
   padding: theme("spacing.md");
 }
 
+.cobalt-popover__arrow {
+  fill: theme("colors.surfaceBright");
+}
+
 .use-cobalt-dark-theme {
-  [data-theme~="cobalt-popover"] {
+  .cobalt-popover {
     box-shadow: 0 0 0 1px theme("colors.outline");
+  }
 
-    &[data-placement^="top"] > .tippy-arrow {
-      bottom: -1px;
-
-      &::before {
-        border-top-color: theme("colors.outline") !important;
-      }
-    }
-
-    &[data-placement^="bottom"] > .tippy-arrow {
-      top: -1px;
-
-      &::before {
-        border-bottom-color: theme("colors.outline") !important;
-      }
-    }
-
-    &[data-placement^="left"] > .tippy-arrow {
-      right: -1px;
+  .cobalt-popover__arrow {
+    fill: theme("colors.surfaceBright");
+    stroke: theme("colors.outline");
+    stroke-width: 1;
+  }
+}
 
-      &::before {
-        border-left-color: theme("colors.outline") !important;
-      }
-    }
+.cobalt-popover[data-theme~="tooltip"] {
+  @apply c-py-2xs c-px-xs c-rounded c-text-body-sm;
 
-    &[data-placement^="right"] > .tippy-arrow {
-      left: -1px;
+  min-width: auto;
 
-      &::before {
-        border-right-color: theme("colors.outline") !important;
-      }
-    }
-  }
+  box-shadow: elevation(), elevation(md);
 }

package/styles/components/ProgressBanner/index.scss

@@ -48,6 +48,13 @@
   }
 }
 
+a.cobalt-progressBanner {
+  @apply c-state-interactive;
+
+  color: inherit;
+  text-decoration: none;
+}
+
 @keyframes progressBanner__animation--zoom-in {
   0% {
     transform: scale(0, 0);

package/styles/components/Sidepanel/index.scss

@@ -1,5 +1,5 @@
 .cobalt-sidepanel {
-  @apply c-bg-surface;
+  @apply c-bg-surface c-rounded-tl-xl c-rounded-bl-xl;
 
   position: fixed;
 
@@ -16,8 +16,8 @@
   transform: translateX(100%);
 
   transition-duration: 250ms;
-  transition-timing-function: ease-out;
-  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform, box-shadow;
 
   will-change: transform;
 
@@ -58,3 +58,9 @@
 .cobalt-sidepanel--show + .cobalt-sidepanel-overlay {
   opacity: 1;
 }
+
+.cobalt-sidepanel__close {
+  @apply c--mr-xs;
+  min-height: 32px;
+  min-width: 32px;
+}

package/types/src/components/Modal/index.d.ts

@@ -60,6 +60,7 @@ export type ModalPropsType = {
      * Always take the full height of the screen
      */
     fullHeight?: boolean;
+    fullScreen?: boolean;
     /**
      * Remove the modal from the DOM on hidden (enabled by default)
      */

package/types/src/components/Popover/DesktopPopover.d.ts

@@ -0,0 +1,2 @@
+import type { PopoverPropsType } from ".";
+export declare const DesktopPopover: ({ targetRef, children, isOpen, onOpenChange, ...rest }: PopoverPropsType) => import("react").ReactNode;

package/types/src/components/Popover/PopoverWrapper.d.ts

@@ -0,0 +1,13 @@
+import React, { type ReactElement, type Ref } from "react";
+import { type PopoverPropsType } from ".";
+type RefableElement = ReactElement & {
+    ref?: Ref<HTMLElement>;
+};
+export type PopoverWrapperPropsType = Omit<PopoverPropsType, "targetRef" | "children" | "isOpen"> & {
+    content: React.ReactNode;
+    disabled?: boolean;
+    isOpenByDefault?: boolean;
+    children: RefableElement;
+};
+export declare function PopoverWrapper({ content, children, trigger, onOpenChange, isOpenByDefault, disabled, responsive, ...popoverProps }: PopoverWrapperPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/src/components/Popover/TooltipWrapper.d.ts

@@ -0,0 +1,3 @@
+import { type PopoverWrapperPropsType } from "./PopoverWrapper";
+export type TooltipWrapperPropsType = Omit<PopoverWrapperPropsType, "responsive">;
+export declare function TooltipWrapper({ content, children, ...popoverProps }: TooltipWrapperPropsType): import("react/jsx-runtime").JSX.Element;

package/types/src/components/Popover/index.d.ts

@@ -1,29 +1,18 @@
-import { type TippyProps } from "@tippyjs/react";
 import type React from "react";
-export type PopoverPropsType = {
-    children?: React.ReactNode;
+import type { DesktopPopoverCoreRefs, PopoverConfig } from "./useDesktopPopoverCore";
+type DesktopPopoverRenderProps = {
+    refs: DesktopPopoverCoreRefs;
+    getReferenceProps: ReturnType<typeof import("@floating-ui/react").useInteractions>["getReferenceProps"];
+    renderFloating: (content: React.ReactNode) => React.ReactNode;
+};
+export type DesktopPopoverChildren = React.ReactNode | ((props: DesktopPopoverRenderProps) => React.ReactNode);
+export type PopoverPropsType = PopoverConfig & {
+    children?: DesktopPopoverChildren;
     isOpen: boolean;
-    close: () => void;
+    onOpenChange?: (open: boolean) => void;
     "aria-label"?: string;
-    bodySpacing?: boolean;
-    onShow?: () => void;
-    onHidden?: () => void;
-    targetRef: TippyProps["reference"];
-    arrow?: boolean;
-    placement?: TippyProps["placement"];
-    flip?: boolean;
-    theme?: string;
-    distance?: number;
-    zIndex?: number;
-    appendToBody?: boolean;
-    fitContent?: boolean;
-    /**
-     * __Only for desktop popover__
-     *
-     * Allow to render the content only when the popover is mounted in the DOM
-     * Useful to render async content in the popover
-     */
-    lazy?: boolean;
+    targetRef: React.RefObject<Element | null> | Element | null;
+    responsive?: boolean;
 };
-declare const Popover: ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing, onShow, onHidden, arrow, placement, flip, theme, distance, zIndex, appendToBody, fitContent, lazy, }: PopoverPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: ({ arrow, placement, bodySpacing, appendToBody, fitContent, responsive, ...restProps }: PopoverPropsType) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/types/src/components/Popover/popoverRegistry.d.ts

@@ -0,0 +1,4 @@
+type CloseFn = () => void;
+export declare const registerPopover: (close: CloseFn) => () => void;
+export declare const hideAllPopovers: () => void;
+export {};

package/types/src/components/Popover/tooltipConfig.d.ts

@@ -0,0 +1,9 @@
+export declare const tooltipConfig: {
+    trigger: "mouseenter";
+    interactive: false;
+    tooltip: true;
+    arrow: true;
+    placement: "top";
+    bodySpacing: false;
+    appendToBody: true;
+};

package/types/src/components/Popover/useDesktopPopoverCore.d.ts

@@ -0,0 +1,44 @@
+import { type Placement } from "@floating-ui/react";
+import type React from "react";
+export type PopoverConfig = {
+    placement?: Placement;
+    flip?: boolean;
+    arrow?: boolean;
+    theme?: string;
+    tooltip?: boolean;
+    lightMode?: boolean;
+    zIndex?: number;
+    appendToBody?: boolean;
+    withBorder?: boolean;
+    fitContent?: boolean;
+    trigger?: "click" | "mouseenter";
+    interactive?: boolean;
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    offset?: [number, number];
+    bodySpacing?: boolean;
+    onShow?: () => void;
+    onHidden?: () => void;
+};
+export type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, "trigger"> & {
+    isOpen: boolean;
+    onOpenChange?: (open: boolean) => void;
+    referenceElement: Element | null;
+    trigger?: "click" | "mouseenter" | "manual";
+    ariaLabel?: string;
+    getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>;
+};
+export type DesktopPopoverCoreRefs = {
+    setReference: (node: Element | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+};
+type UseDesktopPopoverCoreReturnType = {
+    refs: DesktopPopoverCoreRefs;
+    getReferenceProps: ReturnType<typeof import("@floating-ui/react").useInteractions>["getReferenceProps"];
+    renderFloating: (content: React.ReactNode) => React.ReactNode;
+    isMounted: boolean;
+};
+export declare function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement, flip, tooltip, arrow: showArrow, theme, zIndex, appendToBody, fitContent, withBorder, trigger, interactive, delay, offset, bodySpacing, ariaLabel, onShow, onHidden, getFloatingExtraProps, }: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType;
+export {};

package/types/src/components/Popover/useSingletonPopover.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { UseDesktopPopoverCoreOptions } from "./useDesktopPopoverCore";
+type SingletonItem = {
+    content: React.ReactNode;
+};
+type SingletonReferenceProps = React.HTMLAttributes<HTMLElement>;
+type SingletonOptions = Omit<UseDesktopPopoverCoreOptions, "isOpen" | "onOpenChange" | "referenceElement" | "trigger" | "getFloatingExtraProps"> & {
+    trigger?: "click" | "mouseenter";
+    gracePeriod?: number;
+};
+export declare function useSingletonPopover({ trigger, delay, interactive, gracePeriod, ...options }: SingletonOptions): {
+    getReferenceProps: (item: SingletonItem, userProps?: SingletonReferenceProps) => Record<string, unknown>;
+    renderFloating: () => React.ReactNode;
+    close: () => void;
+    isOpen: boolean;
+};
+export {};

package/types/src/components/ProgressBanner/index.d.ts

@@ -9,6 +9,7 @@ type ProgressBannerPropsType = {
     animated?: boolean;
     fullWidth?: boolean;
     className?: string;
+    href?: string;
 };
-export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, href, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/src/components/Sidepanel/index.d.ts

@@ -9,9 +9,10 @@ type SidepanelPropsType = React.PropsWithChildren<{
     close?: () => void;
     width?: ComponentProps<typeof Fixed>["width"];
     withDesktopOverlay?: boolean;
+    onPointerDownOutside?: () => void;
 }>;
 export declare const Sidepanel: {
-    ({ isOpen, title, close, withDesktopOverlay, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Footer: (_props: SidepanelFooterPropsType) => null;

package/types/src/index.d.ts

@@ -50,6 +50,12 @@ export { default as PhotoDropzone } from "./components/PhotoDropzone";
 export { Pill, PillGroup } from "./components/Pill";
 export { PlateNumber } from "./components/PlateNumber";
 export { default as Popover } from "./components/Popover";
+export { PopoverWrapper, type PopoverWrapperPropsType, } from "./components/Popover/PopoverWrapper";
+export { hideAllPopovers } from "./components/Popover/popoverRegistry";
+export { TooltipWrapper } from "./components/Popover/TooltipWrapper";
+export { tooltipConfig } from "./components/Popover/tooltipConfig";
+export type { PopoverConfig } from "./components/Popover/useDesktopPopoverCore";
+export { useSingletonPopover } from "./components/Popover/useSingletonPopover";
 export { PriceTable, PriceTableRow } from "./components/PriceTable";
 export { ProgressBanner } from "./components/ProgressBanner";
 export { ProgressBar } from "./components/ProgressBar";

package/components/Calendar/CalendarRangePicker/DayTooltip.js

@@ -1,23 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import Tippy from '@tippyjs/react';
-import { sticky } from 'tippy.js';
-
-const DayTooltip = (props) => {
-    return (jsx(Tippy, { animation: "fade",
-        arrow: true,
-        interactive: true,
-        interactiveBorder: 10,
-        placement: "top",
-        theme: "cobalt-popover range-picker",
-        delay: [0, 0],
-        duration: [0, 0],
-        maxWidth: 500,
-        offset: [0, 8],
-        sticky: true,
-        plugins: [sticky],
-        appendTo: document.body,
-        ...props }));
-};
-
-export { DayTooltip as default };
-//# sourceMappingURL=DayTooltip.js.map

package/components/Calendar/CalendarRangePicker/DayTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DayTooltip.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/DayTooltip.tsx"],"sourcesContent":["import Tippy, { type TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nconst DayTooltip = (props: TippyProps) => {\n  return (\n    <Tippy\n      {...{\n        animation: \"fade\",\n        arrow: true,\n        interactive: true,\n        interactiveBorder: 10,\n        placement: \"top\",\n        theme: \"cobalt-popover range-picker\",\n        delay: [0, 0],\n        duration: [0, 0],\n        maxWidth: 500,\n        offset: [0, 8],\n        sticky: true,\n        plugins: [sticky],\n        appendTo: document.body,\n        ...props,\n      }}\n    />\n  )\n}\n\nexport default DayTooltip\n"],"names":["_jsx"],"mappings":";;;;AAGA,MAAM,UAAU,GAAG,CAAC,KAAiB,KAAI;AACvC,IAAA,QACEA,GAAC,CAAA,KAAK,EAEF,EAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACd,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC,MAAM,CAAC;QACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI;QACvB,GAAG,KAAK,EAEV,CAAA,EACH;AACH;;;;"}

package/components/Popover/LazyTippy.js

@@ -1,9 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import Tippy from '@tippyjs/react';
-
-const LazyTippy = (props) => {
-    return props.visible ? jsx(Tippy, { ...props }) : null;
-};
-
-export { LazyTippy as default };
-//# sourceMappingURL=LazyTippy.js.map

package/components/Popover/LazyTippy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LazyTippy.js","sources":["../../../src/components/Popover/LazyTippy.tsx"],"sourcesContent":["// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.\n// Replace <Tippy /> with <LazyTippy /> component and it should work the same.\n\nimport Tippy, { type TippyProps } from \"@tippyjs/react\"\n\nconst LazyTippy = (props: TippyProps) => {\n  return props.visible ? <Tippy {...props} /> : null\n}\n\nexport default LazyTippy\n"],"names":["_jsx"],"mappings":";;;AAKA,MAAM,SAAS,GAAG,CAAC,KAAiB,KAAI;AACtC,IAAA,OAAO,KAAK,CAAC,OAAO,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,KAAK,EAAI,CAAA,GAAG,IAAI,CAAA;AACpD;;;;"}

package/types/src/__tests__/AsyncComponent.d.ts

@@ -1,6 +0,0 @@
-import type React from "react";
-declare const AsyncComponent: ({ children, timeout, }: {
-    children?: React.ReactNode;
-    timeout?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default AsyncComponent;

package/types/src/components/Calendar/CalendarRangePicker/DayTooltip.d.ts

@@ -1,3 +0,0 @@
-import { type TippyProps } from "@tippyjs/react";
-declare const DayTooltip: (props: TippyProps) => import("react/jsx-runtime").JSX.Element;
-export default DayTooltip;

package/types/src/components/Popover/LazyTippy.d.ts

@@ -1,3 +0,0 @@
-import { type TippyProps } from "@tippyjs/react";
-declare const LazyTippy: (props: TippyProps) => import("react/jsx-runtime").JSX.Element | null;
-export default LazyTippy;