@trackunit/react-components 0.0.185 → 0.0.186

package/components/DayPicker/DayPicker.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
-export interface DayPickerProps {
+import { CommonProps } from "../../common/CommonProps";
+export interface DayPickerProps extends CommonProps {
     /**
      * A callback function for when a date is selected
      */
@@ -8,15 +9,18 @@ export interface DayPickerProps {
     /**
      * Define any days which may not be selected
      */
-    disabledDays: Matcher | Matcher[] | undefined;
+    disabledDays?: Matcher | Matcher[];
     /**
      * Set any days which are selected
      */
-    selectedDays: Matcher | Matcher[] | undefined;
+    selectedDays?: Matcher | Matcher[];
     /**
      * Set the language
      */
     language: string;
+    /**
+     * The maximum amount of days that can be selected
+     */
     max?: number;
 }
 /**
@@ -25,4 +29,4 @@ export interface DayPickerProps {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {JSX.Element} DayPicker component
  */
-export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, ...rest }: DayPickerProps) => JSX.Element;
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }: DayPickerProps) => JSX.Element;

package/components/DayPicker/DayPickerPopover.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
-import { Size } from "../../common";
+import { CommonProps, Size } from "../../common/CommonProps";
 import { ButtonColor } from "../buttons";
 import { PopoverPlacement } from "../Popover";
-export interface DayPickerPopoverProps {
+export interface DayPickerPopoverProps extends CommonProps {
     disabledDays?: Matcher | Matcher[] | undefined;
-    className?: string;
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
     color?: ButtonColor;
@@ -20,4 +19,4 @@ export interface DayPickerPopoverProps {
  * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
  * @returns {JSX.Element} DayPickerPopover component
  */
-export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;
+export declare const DayPickerPopover: ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

package/components/DayPicker/DayRangePicker.d.ts

@@ -1,12 +1,27 @@
 /// <reference types="react" />
 import { DateRange, Matcher } from "react-day-picker";
+import { CommonProps } from "../../common/CommonProps";
 export declare type IDateRange = DateRange;
-export interface DayRangePickerProps {
+export interface DayRangePickerProps extends CommonProps {
+    /**
+     * A callback function for when a range is selected
+     */
     onRangeSelect?: (range: IDateRange | undefined) => void;
-    selectedDays: IDateRange;
-    dataTestId?: string;
+    /**
+     * Define any days which may not be selected
+     */
     disabledDays?: Matcher | Matcher[];
+    /**
+     * Set any days which are selected
+     */
+    selectedDays: IDateRange;
+    /**
+     * Set the language
+     */
     language: string;
+    /**
+     * The maximum amount of days that can be selected
+     */
     max?: number;
 }
 /**
@@ -15,4 +30,4 @@ export interface DayRangePickerProps {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {JSX.Element} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, max, }: DayRangePickerProps) => JSX.Element;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, }: DayRangePickerProps) => JSX.Element;

package/components/Popover/Popover.d.ts

@@ -0,0 +1,37 @@
+import { Placement } from "@floating-ui/react-dom-interactions";
+import { ReactElement } from "react";
+import { CommonProps } from "../../common";
+declare type Render = (data: {
+    close: () => void;
+}) => ReactElement;
+export declare type PopoverPlacement = Placement;
+export declare type PopoverActivation = {
+    click?: boolean;
+    hover?: boolean;
+};
+export interface PopoverProps extends CommonProps {
+    /**
+     * What to render indide the popover with callback to close the popover
+     */
+    render: Render;
+    /**
+     * Where to preferentially render the popover relative to the invoking element.
+     * Will not be respected in case of insufficient space.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Action(s) that activates the tooltip
+     */
+    activation?: PopoverActivation;
+    /**
+     * The element, usually a button, that activates the popover.
+     * Event handling is automatic and tied to this element. No manual Event handling is necessary.
+     */
+    children: ReactElement;
+}
+/**
+ * @param {PopoverProps} props The children to render in the popover
+ * @returns {ReactElement} Popover with specified content and placement
+ */
+export declare const Popover: ({ children, render, placement, activation, className, dataTestId, }: PopoverProps) => JSX.Element;
+export {};

package/components/Popover/index.d.ts

@@ -1,5 +1,4 @@
-export * from "./AnimatedPopover";
+export * from "./Popover";
 export * from "./PopoverList";
 export * from "./PopoverListItem";
 export * from "./PopoverTitle";
-export * from "./usePopover";

package/components/Tip/Tip.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { CommonProps } from "../../common";
 import { IconProps } from "../Icon/Icon";
 import { TooltipProps } from "../Tooltip";
-export interface TipProps extends CommonProps {
+export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" | "mode"> {
     /**
      * Child nodes to render inside the tip.
      */
@@ -11,10 +11,6 @@ export interface TipProps extends CommonProps {
      * The props for setting the icon on this tip.
      */
     iconProps?: Partial<IconProps>;
-    /**
-     * The props for setting the tooltip on this tip.
-     */
-    tooltipProps?: Partial<TooltipProps>;
     /**
      * The element type the tip will be rendered as.
      */
@@ -31,4 +27,4 @@ export interface TipProps extends CommonProps {
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, link, renderAs, className, }: TipProps) => JSX.Element;
+export declare const Tip: ({ children, iconProps, dataTestId, link, renderAs, className, placement, mode, }: TipProps) => JSX.Element;

package/components/Tooltip/Tooltip.d.ts

@@ -1,23 +1,20 @@
 import * as React from "react";
+import { CommonProps } from "../../common";
 import { PopoverPlacement } from "../Popover";
 import { TextType } from "../Text";
-export interface TooltipProps {
+export interface TooltipProps extends CommonProps {
     /**
      * The text to be displayed in the tooltip.
      */
     label: string | React.ReactNode;
     /**
-     * Where the tooltip should be placed.
+     * Where the tooltip should preferentially be placed.
      */
     placement?: PopoverPlacement;
     /**
      * Child nodes
      */
     children?: React.ReactNode;
-    /**
-     * Id of test component.
-     */
-    dataTestId?: string;
     /**
      * Whether the tooltip is disabled or not.
      */
@@ -26,14 +23,6 @@ export interface TooltipProps {
      *  To select either "light" or "dark" mode.
      */
     mode?: "light" | "dark";
-    /**
-     * Offset value of the tooltip.
-     */
-    offset?: [number, number];
-    /**
-     * Additional classes to the component.
-     */
-    className?: string;
     /**
      * Type of content.
      */
@@ -45,4 +34,4 @@ export interface TooltipProps {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ label, placement, children, dataTestId, disabled, mode, offset, className, contentTextType, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, ...rest }: TooltipProps) => JSX.Element;

package/components/index.d.ts

@@ -24,6 +24,7 @@ export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
 export * from "./Popover";
+export * from "./Popover/Popover";
 export * from "./Prompt";
 export * from "./RadioGroup";
 export * from "./SectionHeader";

package/index.js

@@ -1,18 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useRef, Fragment as Fragment$1, useCallback, createElement, memo, useEffect, useContext } from 'react';
+import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, createElement, useRef, memo, useEffect, useContext } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
-import { useMeasure, useCopyToClipboard, useKeyPressEvent } from 'react-use';
+import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useSpring, animated } from '@react-spring/web';
-import usePortal from 'react-useportal';
-import { createPopper } from '@popperjs/core';
+import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
+import usePortal from 'react-useportal';
 import { Helmet } from 'react-helmet';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
@@ -116,7 +115,7 @@ const Spinner = ({
   containerClassName,
   dataTestId
 }) => {
-  return jsx(Container$9, Object.assign({
+  return jsx(Container$8, Object.assign({
     "$mode": mode,
     "$centered": centered,
     className: containerClassName
@@ -152,7 +151,7 @@ const StyledSpinner$1 = tw.span`
   ${p => p.$mode === "dark" ? tws`tu-spinner--dark` : null}
   ${getSpinnerStyles()}
 `;
-const Container$9 = tw.div`
+const Container$8 = tw.div`
   tu-spinner--container
   ${p => p.$centered ? tws`tu-spinner--container-centered` : null}
 `;
@@ -359,7 +358,7 @@ const Icon$1 = ({
     }, {
       children: jsx(IconComponent, {
         "data-testid": dataTestId ? `${dataTestId}-${name}` : name,
-        className: `${iconSizeClassName} ${colorClassNames} ${className} ${name} aspect-square`,
+        className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`,
         style: fillColor ? Object.assign(Object.assign({}, style), {
           fill: fillColor
         }) : Object.assign({}, style)
@@ -714,7 +713,7 @@ const Alert = ({
       ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
     }
   }, [ref, autoScroll]);
-  return jsxs(Container$8, Object.assign({
+  return jsxs(Container$7, Object.assign({
     "$color": color,
     className: className,
     "data-testid": dataTestId,
@@ -802,7 +801,7 @@ const getBackgroundColor = () => ({
   return colors[$color];
 };
 
-const Container$8 = tw.div`
+const Container$7 = tw.div`
   tu-alert
   ${p => p.$inline ? tws`tu-alert--inline` : null}
   ${getBackgroundColor()}
@@ -1281,7 +1280,7 @@ const CardHeader = ({
     className: className,
     "$density": density
   }, {
-    children: jsxs(Container$7, {
+    children: jsxs(Container$6, {
       children: [jsxs("div", {
         children: [jsxs(HeadingContainer$1, {
           children: [jsx(Heading$1, Object.assign({
@@ -1311,7 +1310,7 @@ const CardHeader = ({
 const BottomBorderedDensityContainer = twx(DensityContainer)`
   tu-card__header-density-container
 `;
-const Container$7 = tw.div`
+const Container$6 = tw.div`
   tu-card__header
 `;
 const HeadingContainer$1 = tw.div`
@@ -1810,182 +1809,93 @@ const DateInput = forwardRef((_a, ref) => {
   }, rest));
 });
 
-var PopoverLifecycle;
-
-(function (PopoverLifecycle) {
-  PopoverLifecycle["closed"] = "closed";
-  PopoverLifecycle["open"] = "open";
-  PopoverLifecycle["closing"] = "closing";
-})(PopoverLifecycle || (PopoverLifecycle = {}));
 /**
- * The usePopover Hook.
- *
- * @param {UsePopoverProps} props - The props for the usePopover hook
- * @returns {UsePopoverProps} - UsePopoverProps
+ * @param {PopoverProps} props The children to render in the popover
+ * @returns {ReactElement} Popover with specified content and placement
  */
 
-
-const usePopover = ({
-  targetRef,
-  popoverRef,
-  placement = "auto",
-  offset = [0, 8]
-}) => {
-  const [lifecycle, setLifecycle] = React.useState(PopoverLifecycle.closed);
-  const popperRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (targetRef.current && popoverRef.current) {
-      popperRef.current = createPopper(targetRef.current, popoverRef.current, {
-        placement,
-        strategy: "fixed",
-        modifiers: [{
-          name: "offset",
-          options: {
-            offset
-          }
-        }, {
-          name: "flip",
-          options: {
-            flipVariations: true
-          }
-        }]
-      });
-    }
-
-    return () => {
-      var _a;
-
-      (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-    };
-  }, [popoverRef, targetRef, lifecycle, placement, offset]);
-
-  const onShow = () => {
-    if (lifecycle !== PopoverLifecycle.open) {
-      setLifecycle(PopoverLifecycle.open);
-    }
-  };
-
-  const onHide = () => {
-    setLifecycle(PopoverLifecycle.closing);
-  };
-
-  const onClosed = () => {
-    setLifecycle(PopoverLifecycle.closed);
-  };
-
-  return {
-    targetRef,
-    popoverRef,
-    onShow,
-    onHide,
-    popoverProps: {
-      lifecycle,
-      onClosed
-    }
-  };
-};
-
-/**
- * The Popover component is used to display some content on top of another.
- * Use a popover to expose a small amount of information or functionality.
- *
- * @param {AnimatedPopoverProps} props - The props for the Card component
- * @returns {JSX.Element} Popover component
- */
-
-const AnimatedPopover = React.forwardRef(({
-  lifecycle,
-  onRequestClose,
+const Popover = ({
   children,
-  onClosed,
-  enterDelay,
-  exitDelay,
+  render,
+  placement,
+  activation = {
+    click: true,
+    hover: false
+  },
   className,
-  dataTestId,
-  bindTo,
-  enableBackdrop = true
-}, ref) => {
+  dataTestId
+}) => {
+  const [open, setOpen] = useState(false);
   const {
-    Portal
-  } = usePortal({
-    bindTo
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    context
+  } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(8), shift(), flip({
+      crossAxis: true,
+      fallbackPlacements: ["top", "bottom", "left", "right"]
+    })],
+    placement,
+    whileElementsMounted: autoUpdate
   });
-
-  const onClose = e => {
-    if (lifecycle === PopoverLifecycle.open) {
-      e.preventDefault();
-      e.stopPropagation();
-      onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
-    }
-  };
-
-  useKeyPressEvent("Escape", onClose);
-
-  if (lifecycle === PopoverLifecycle.closed) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, {});
-  }
-
-  return jsxs(Portal, {
-    children: [lifecycle !== PopoverLifecycle.closing && enableBackdrop && jsx(Backdrop$1, {
-      onClick: onClose
-    }), jsx(StyledContainer, Object.assign({
-      ref: ref,
-      className: className,
-      "data-testid": dataTestId
-    }, {
-      children: jsx(AnimatedContainer, Object.assign({
-        lifecycle: lifecycle,
-        onClosed: onClosed,
-        enterDelay: enterDelay,
-        exitDelay: exitDelay
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useClick(context, {
+    enabled: activation.click
+  }), useHover(context, {
+    enabled: activation.hover
+  }), useRole(context), useDismiss(context)]); // Preserve the consumer's ref
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const ref = useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
+  return jsxs(Fragment, {
+    children: [cloneElement(children, getReferenceProps(Object.assign({
+      ref
+    }, children.props))), jsx(FloatingPortal, {
+      children: open && jsx(FloatingFocusManager, Object.assign({
+        context: context,
+        modal: false,
+        order: ["reference", "content"],
+        returnFocus: false
       }, {
-        children: children
+        children: jsx("div", Object.assign({
+          ref: floating,
+          className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`,
+          "data-testid": dataTestId,
+          style: {
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : 0,
+            left: x !== null && x !== void 0 ? x : 0
+          }
+        }, getFloatingProps(), {
+          children: render({
+            close: () => {
+              setOpen(false);
+            }
+          })
+        }))
       }))
-    }))]
-  });
-});
-const Backdrop$1 = tw.div`
-  tu-popover-backdrop
-`;
-
-const AnimatedContainer = ({
-  lifecycle,
-  onClosed,
-  enterDelay = 0,
-  exitDelay = 0,
-  children
-}) => {
-  const props = useSpring({
-    config: {
-      tension: lifecycle === PopoverLifecycle.closing ? 2000 : 1500,
-      friction: 100,
-      precision: 0.1
-    },
-    from: {
-      opacity: 0,
-      transform: "scale(0.98)"
-    },
-    to: lifecycle === PopoverLifecycle.open ? {
-      opacity: 1,
-      transform: "scale(1)"
-    } : lifecycle === PopoverLifecycle.closing ? {
-      opacity: 0,
-      transform: "scale(0.98)"
-    } : {},
-    delay: lifecycle === PopoverLifecycle.open ? enterDelay : exitDelay,
-    onRest: () => lifecycle === PopoverLifecycle.closing && (onClosed === null || onClosed === void 0 ? void 0 : onClosed())
+    })]
   });
-  return jsx(animated.div, Object.assign({
-    style: props
-  }, {
-    children: children
-  }));
-};
-
-const StyledContainer = tw.div`
-  tu-popover-container
-`;
+}; // Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
+
+function mergeRefs(refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    });
+  };
+}
 
 /**
  * The PopoverList component.
@@ -2093,7 +2003,7 @@ const PopoverTitle = ({
   className,
   dataTestId
 }) => {
-  return jsxs(Container$6, Object.assign({
+  return jsxs(Container$5, Object.assign({
     "$divider": divider,
     className: className,
     "data-testid": dataTestId
@@ -2109,7 +2019,7 @@ const PopoverTitle = ({
     })), action]
   }));
 };
-const Container$6 = tw.div`
+const Container$5 = tw.div`
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -2124,65 +2034,65 @@ tu-popover-title-text
  * @returns {JSX.Element} Tooltip component
  */
 
-const Tooltip = ({
+const Tooltip = _a => {
+  var {
+    children,
+    dataTestId,
+    disabled,
+    className
+  } = _a,
+      rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+
+  const wrappedChildren = jsx(Flex$1, Object.assign({
+    className: className,
+    "data-testid": dataTestId && `${dataTestId}-parent`
+  }, {
+    children: children
+  }));
+
+  if (disabled) {
+    return wrappedChildren;
+  }
+
+  return jsx(TooltipContainer, Object.assign({
+    dataTestId: dataTestId
+  }, rest, {
+    children: wrappedChildren
+  }));
+};
+
+const TooltipContainer = ({
   label,
   placement = "bottom",
-  children,
-  dataTestId,
-  disabled,
   mode = "dark",
-  offset,
-  className,
-  contentTextType = "p"
-}) => {
-  const target = React.useRef(null);
-  const popover = React.useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement,
-    offset
-  });
-  return jsxs(Fragment, {
-    children: [jsx(Flex$1, Object.assign({
-      className: className,
-      onMouseEnter: onShow,
-      onMouseLeave: onHide,
-      ref: targetRef,
-      "data-testid": dataTestId && `${dataTestId}-parent`
-    }, {
-      children: children
-    })), !disabled && jsx(Container$5, Object.assign({
-      ref: popoverRef,
-      onRequestClose: onHide,
-      enterDelay: 450
-    }, popoverProps, {
-      dataTestId: dataTestId,
-      enableBackdrop: false
+  contentTextType = "p",
+  children,
+  dataTestId
+}) => jsx(StyledPopover, Object.assign({
+  className: "tu-tooltip__container",
+  placement: placement,
+  activation: {
+    hover: true
+  },
+  dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "",
+  render: () => jsx(Content, Object.assign({
+    "$mode": mode
+  }, {
+    children: jsx(Text$1, Object.assign({
+      inverted: mode === "dark",
+      type: contentTextType
     }, {
-      children: jsx(Content, Object.assign({
-        "$mode": mode
-      }, {
-        children: jsx(Text$1, Object.assign({
-          inverted: mode === "dark",
-          type: contentTextType
-        }, {
-          children: label
-        }))
-      }))
-    }))]
-  });
-};
+      children: label
+    }))
+  }))
+}, {
+  children: children
+}));
+
 const Flex$1 = tw.div`
   inline-flex
 `;
-const Container$5 = twx(AnimatedPopover)`
+const StyledPopover = twx(Popover)`
   tu-tooltip__container
 `;
 const Content = tw.div`
@@ -2201,30 +2111,27 @@ const Content = tw.div`
 const Tip = ({
   children,
   iconProps,
-  tooltipProps,
   dataTestId,
   link,
   renderAs = "span",
-  className
+  className,
+  placement = "bottom",
+  mode
 }) => {
-  var _a;
-
-  const ifAnchorTag = () => {
-    return renderAs === "a";
-  };
-
+  const ifAnchorTag = renderAs === "a";
   return jsx(TipContainer, Object.assign({
     "data-testid": dataTestId,
     "$as": renderAs,
-    href: ifAnchorTag() ? link : undefined,
-    target: ifAnchorTag() ? "_blank" : undefined,
+    href: ifAnchorTag ? link : undefined,
+    target: ifAnchorTag ? "_blank" : undefined,
     className: className
   }, {
     children: jsx(Tooltip, Object.assign({
       label: children,
-      dataTestId: `${dataTestId}-tooltip`
-    }, tooltipProps, {
-      className: `${(_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _a !== void 0 ? _a : ""} tu-tip-tooltip`
+      dataTestId: `${dataTestId}-tooltip`,
+      mode: mode,
+      className: "tu-tip-tooltip",
+      placement: placement
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
@@ -2391,23 +2298,27 @@ const useLocale = language => {
  * @returns {JSX.Element} DayPicker component
  */
 
-const DayPicker = _a => {
-  var {
-    onDaySelect,
-    disabledDays,
-    selectedDays,
-    language
-  } = _a,
-      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
-
+const DayPicker = ({
+  onDaySelect,
+  disabledDays,
+  selectedDays,
+  language,
+  className,
+  dataTestId,
+  max
+}) => {
   const locale = useLocale(language);
-  return jsx(DayPicker$1, Object.assign({
+  return jsx(DayPicker$1, {
     onDayClick: onDaySelect,
     selected: selectedDays,
     locale: locale,
     disabled: disabledDays,
-    className: "custom-day-picker"
-  }, rest));
+    className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`,
+    max: max,
+    footer: jsx("div", {
+      "data-testid": dataTestId
+    })
+  });
 };
 
 /**
@@ -2420,29 +2331,27 @@ const DayPicker = _a => {
 const DayPickerPopover = ({
   disabledDays,
   className,
+  dataTestId,
   selectedDay,
   onDaySelect,
   color = "secondary",
-  placement = "bottom",
+  placement,
   size = "small",
   buttonContent,
   language
 }) => {
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: placement
-  });
-  return jsxs(Fragment$1, {
-    children: [jsx(Button, Object.assign({
+  return jsx(Popover, Object.assign({
+    placement: placement,
+    render: () => jsx(PopoverList, {
+      children: jsx(DayPicker, {
+        disabledDays: disabledDays,
+        onDaySelect: onDaySelect,
+        selectedDays: selectedDay,
+        language: language
+      })
+    })
+  }, {
+    children: jsx(Button, Object.assign({
       color: color,
       size: size,
       className: className,
@@ -2450,29 +2359,11 @@ const DayPickerPopover = ({
         name: "CalendarIcon",
         size: "small"
       }),
-      ref: targetRef,
-      onClick: onShow
+      dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker"
     }, {
       children: buttonContent
-    })), jsx(AnimatedPopover, Object.assign({
-      ref: popoverRef,
-      onRequestClose: () => {
-        var _a;
-
-        onHide();
-        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    }, popoverProps, {
-      children: jsx(PopoverList, {
-        children: jsx(DayPicker, {
-          disabledDays: disabledDays,
-          onDaySelect: onDaySelect,
-          selectedDays: selectedDay,
-          language: language
-        })
-      })
-    }))]
-  });
+    }))
+  }));
 };
 
 /**
@@ -2488,6 +2379,7 @@ const DayRangePicker = ({
   disabledDays,
   dataTestId,
   language,
+  className,
   max
 }) => {
   const locale = useLocale(language);
@@ -2505,20 +2397,19 @@ const DayRangePicker = ({
       });
     }
   }, [onRangeSelect]);
-  return jsx("div", Object.assign({
-    "data-testid": dataTestId
-  }, {
-    children: jsx(DayPicker$1, {
-      mode: "range",
-      onSelect: onSelect,
-      selected: selectedDays,
-      defaultMonth: selectedDays && selectedDays.from,
-      locale: locale,
-      disabled: disabledDays,
-      className: "custom-day-picker range-picker",
-      max: max
+  return jsx(DayPicker$1, {
+    mode: "range",
+    onSelect: onSelect,
+    selected: selectedDays,
+    defaultMonth: selectedDays && selectedDays.from,
+    locale: locale,
+    disabled: disabledDays,
+    className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`,
+    max: max,
+    footer: jsx("div", {
+      "data-testid": dataTestId
     })
-  }));
+  });
 };
 
 /**
@@ -5542,4 +5433,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.185",
+  "version": "0.0.186",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.60",
+    "@trackunit/css-core": "0.0.61",
     "@trackunit/tailwind-styled-components": "0.0.48",
     "react": "17.0.2",
     "@trackunit/ui-design-tokens": "0.0.49",
@@ -16,9 +16,8 @@
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.52",
     "react-useportal": "1.0.17",
-    "@react-spring/web": "9.5.4",
+    "@floating-ui/react-dom-interactions": "^0.10.1",
     "react-router-dom": "6.4.1",
-    "@popperjs/core": "^2.11.6",
     "react-helmet": "^6.1.0",
     "react-select": "^5.4.0",
     "jest-canvas-mock": "^2.4.0"

package/components/Popover/AnimatedPopover.d.ts

@@ -1,43 +0,0 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-import { PopoverLifecycle } from "./usePopover";
-export interface AnimatedPopoverProps extends CommonProps {
-    /**
-     * Controls the lifecycle of the popover.
-     */
-    lifecycle: PopoverLifecycle;
-    /**
-     * Sets the popover to closing state.
-     */
-    onRequestClose: () => void;
-    /**
-     * Sets the popover to closed state.
-     */
-    onClosed: () => void;
-    /**
-     * Child nodes
-     */
-    children: React.ReactNode;
-    /**
-     * The delay(in seconds) for triggering the popover state when entering it.
-     */
-    enterDelay?: number;
-    /**
-     * The delay(in seconds) for triggering the popover state when exiting it.
-     */
-    exitDelay?: number;
-    /** An element to use as the portal root for the popover component */
-    bindTo?: HTMLElement;
-    /**
-     * Whether the popover should have a backdrop or not.
-     */
-    enableBackdrop?: boolean;
-}
-/**
- * The Popover component is used to display some content on top of another.
- * Use a popover to expose a small amount of information or functionality.
- *
- * @param {AnimatedPopoverProps} props - The props for the Card component
- * @returns {JSX.Element} Popover component
- */
-export declare const AnimatedPopover: React.ForwardRefExoticComponent<AnimatedPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/components/Popover/usePopover.d.ts

@@ -1,42 +0,0 @@
-import { Placement } from "@popperjs/core";
-import * as React from "react";
-export declare type PopoverPlacement = Placement;
-export interface UsePopoverProps<T, Y> {
-    /**
-     * Reference to the target component.
-     */
-    targetRef: React.RefObject<T>;
-    /**
-     * Reference to the popover component.
-     */
-    popoverRef: React.RefObject<Y>;
-    /**
-     * Placement of the popover.
-     */
-    placement?: PopoverPlacement;
-    /**
-     * The positional offset of the popover from the target component.
-     */
-    offset?: [number, number];
-}
-export declare enum PopoverLifecycle {
-    closed = "closed",
-    open = "open",
-    closing = "closing"
-}
-/**
- * The usePopover Hook.
- *
- * @param {UsePopoverProps} props - The props for the usePopover hook
- * @returns {UsePopoverProps} - UsePopoverProps
- */
-export declare const usePopover: <T extends HTMLElement, Y extends HTMLElement>({ targetRef, popoverRef, placement, offset, }: UsePopoverProps<T, Y>) => {
-    targetRef: React.RefObject<T>;
-    popoverRef: React.RefObject<Y>;
-    onShow: () => void;
-    onHide: () => void;
-    popoverProps: {
-        lifecycle: PopoverLifecycle;
-        onClosed: () => void;
-    };
-};