@trackunit/react-components 0.1.162 → 0.1.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.162",
+  "version": "0.1.164",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,8 +10,9 @@
     "@floating-ui/react": "0.25.4",
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/css-core": "0.0.95",
+    "@trackunit/shared-utils": "0.0.9",
     "@trackunit/ui-design-tokens": "0.0.77",
-    "@trackunit/ui-icons": "0.0.76",
+    "@trackunit/ui-icons": "0.0.77",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/components/Card/Card.d.ts

@@ -6,12 +6,6 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
      * Whether the card should have full height or not.
      */
     fullHeight?: boolean;
-    /**
-     * The css grid area to place the card.
-     *
-     * @deprecated Use tailwind based grid layouts instead.
-     */
-    gridArea?: string;
     /**
      * Children to show in the card
      */
@@ -36,4 +30,4 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, gridArea, ...rest }: CardProps) => JSX.Element;
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }: CardProps) => JSX.Element;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,5 +1,7 @@
+import { Size } from "@trackunit/shared-utils";
 import * as React from "react";
 import { CommonProps } from "../../../common";
+type MenuItemSize = Extract<Size, "small" | "medium">;
 export interface MenuItemProps extends CommonProps {
     /**
      * Label of the menu item
@@ -10,6 +12,10 @@ export interface MenuItemProps extends CommonProps {
      * If you use this prop, the label prop will be ignored.
      */
     children?: React.ReactNode;
+    /**
+     * Size of the menu item
+     */
+    size?: MenuItemSize;
     /**
      * An React element to render before the label.
      * This is typically used to render an icon.
@@ -54,4 +60,5 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, }: MenuItemProps) => JSX.Element;
+export {};

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -2,6 +2,7 @@ export declare const cvaMenuItem: (props?: ({
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     focused?: boolean | null | undefined;
+    size?: "small" | "medium" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaMenuItemSuffix: (props?: ({

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { IconProps } from "../../Icon/Icon";
-import { PopoverContentChildren, PopoverPlacement } from "../../Popover";
+import { PopoverContentChildren, PopoverProps } from "../../Popover";
 import { IconButtonProps } from "../../buttons";
 export type MenuPlacement = "above" | "below";
 type FilteredIconProps = Omit<IconProps, "onClick" | "name"> & Pick<Partial<IconProps>, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
     children: PopoverContentChildren;
-    menuPlacement?: PopoverPlacement;
+    popoverProps?: PopoverProps;
     iconProps?: FilteredIconProps;
     iconButtonProps?: FilteredIconButtonProps;
     customPortalId?: string;
@@ -21,5 +21,5 @@ export interface MoreMenuProps extends CommonProps {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => JSX.Element;
+export declare const MoreMenu: ({ className, dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => JSX.Element;
 export {};

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

@@ -16,6 +16,9 @@ export declare const usePopoverContext: () => {
         className?: string | undefined;
         dataTestId?: string | undefined;
     };
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -52,11 +55,8 @@ export declare const usePopoverContext: () => {
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 /**
  * The popover component.

package/src/components/Popover/PopoverTypes.d.ts

@@ -1,9 +1,10 @@
-import { Placement } from "@floating-ui/react";
+import { Placement, UseDismissProps } from "@floating-ui/react";
 import { CommonProps } from "../../common";
 export type PopoverActivation = {
     click?: boolean;
     hover?: boolean;
 };
+export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress" | "referencePress">;
 export type PopoverPlacement = Placement;
 export interface PopoverProps extends CommonProps {
     /**
@@ -23,9 +24,13 @@ export interface PopoverProps extends CommonProps {
      */
     isOpen?: boolean;
     /**
-     * Action(s) that activates the popover
+     * Options for activation of the popover
      */
     activation?: PopoverActivation;
+    /**
+     * Options for dismissal of the popover
+     */
+    dismissal?: PopoverDismissal;
     /**
      * Callback to be called when the popover open state changes
      */

package/src/components/Popover/usePopover.d.ts

@@ -7,7 +7,7 @@ import { PopoverProps } from "./PopoverTypes";
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<usePopover>} The data for the popover
  */
-export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, onOpenStateChange: setControlledIsOpen, ...restOptions }: PopoverProps) => {
+export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, onOpenStateChange, ...restOptions }: PopoverProps) => {
     isModal: boolean | undefined;
     labelId: string | undefined;
     descriptionId: string | undefined;
@@ -17,6 +17,9 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         className?: string | undefined;
         dataTestId?: string | undefined;
     };
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -53,9 +56,6 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/src/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export type TagSize = "small" | "medium";
+import { CommonProps, Size } from "../../common/CommonProps";
+export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
 export interface TagProps extends CommonProps {
     /**

package/src/components/ValueBar/ValueBar.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Size } from "@trackunit/shared-utils";
 import { CommonProps } from "../../common";
 import { LevelColors } from "./ValueBarTypes";
+type ValueBarSize = Extract<Size, "small" | "large">;
 export interface ValueBarProps extends CommonProps {
     /**
      * Value to display.
@@ -21,7 +23,7 @@ export interface ValueBarProps extends CommonProps {
     /**
      * Size of the tooltip
      */
-    size?: "small" | "large";
+    size?: ValueBarSize;
     /**
      * Custom level colors. If this param is not provided then default values are used.
      */
@@ -42,3 +44,4 @@ export interface ValueBarProps extends CommonProps {
  * @returns {JSX.Element} ValueBar component
  */
 export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, }: ValueBarProps) => JSX.Element;
+export {};