@trackunit/react-components 0.4.33 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.33",
+  "version": "0.5.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -23,7 +23,6 @@
     "@testing-library/react": "15.0.6",
     "@floating-ui/react": "^0.26.25",
     "@tanstack/react-router": "1.47.1",
-    "react-swipeable": "^7.0.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/react-table-pagination": "*"

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

@@ -0,0 +1,4 @@
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+export declare const MenuDivider: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,10 @@
-import * as React from "react";
 import { CommonProps, Size } from "../../../common";
 type MenuItemSize = Extract<Size, "small" | "medium">;
+export type MenuItemVariant = "primary" | "danger";
 export interface MenuItemProps extends CommonProps {
+    /**
+     * The unique id for the menu item
+     */
     id?: string;
     /**
      * Label of the menu item
@@ -51,7 +54,14 @@ export interface MenuItemProps extends CommonProps {
      * used in Menu and Select components
      */
     stopPropagation?: boolean;
+    /**
+     * The tab index of the menu item.
+     */
     tabIndex?: number;
+    /**
+     * The button's variant. Values are primary and danger.
+     */
+    variant?: MenuItemVariant;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -59,5 +69,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, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,22 +1,35 @@
 import { type VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.variants";
-export declare const cvaMenuItemStyle: (props?: ({
-    size?: "small" | "medium" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     size?: "small" | "medium";
+    variant?: MenuItemVariant;
+    selected?: boolean | null | undefined;
 };
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 export declare const cvaMenuItem: (props?: CvaMenuItemProps) => string;
-export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMenuItemSuffix: (props?: ({
+export declare const cvaMenuItemStyle: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemLabel: (props?: ({
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemPrefix: (props?: ({
     selected?: boolean | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemSuffix: (props?: ({
+    selected?: boolean | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export {};

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

@@ -1,17 +1,9 @@
 import { CommonProps } from "../../../common";
-import { MenuItemProps } from "../MenuItem/MenuItem";
-export interface MenuListItemProps extends MenuItemProps {
-    showDivider?: boolean;
-}
 export interface MenuListProps extends CommonProps {
     /**
      * List of menu items to be rendered.
      */
     children: React.ReactNode;
-    /**
-     * List of menu items to be rendered.
-     */
-    showDivider?: boolean;
     /**
      * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
      *
@@ -20,11 +12,30 @@ export interface MenuListProps extends CommonProps {
     withStickyHeader?: boolean;
     /** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
     onClick?: () => void;
+    /**
+     * Enable multi-selection in the menu list.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * Array of IDs representing the currently selected items.
+     */
+    selectedItems?: string[];
+    /**
+     * Callback triggered when selected items change.
+     */
+    onSelectionChange?: (selected: string[]) => void;
 }
 /**
- * The MenuList component is used for menus and selects.
- 
+ * The MenuList is a popover menu that appears above all other content on the page. The menu offers a list of actions or functions that a user can access by clicking on a trigger.
+ *
+ * **When to use**
+ * - Use the MenuList if you have limited space and need to display overflow actions in a list.
+ * - Use the MenuList for actions that are not essential to completing workflows.
+ * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
+ *
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, showDivider, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => JSX.Element;

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

@@ -2,3 +2,5 @@ export declare const cvaMenuList: (props?: ({
     stickyHeader?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuListDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMenuListMultiSelect: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMenuListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,3 +1,4 @@
+export * from "./MenuDivider/MenuDivider";
 export * from "./MenuItem/MenuItem";
 export * from "./MenuList/MenuList";
 export * from "./MoreMenu/MoreMenu";

package/src/components/index.d.ts

@@ -6,7 +6,6 @@ export * from "./Card";
 export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
-export * from "./Drawer";
 export * from "./EmptyState/EmptyState";
 export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
@@ -41,4 +40,3 @@ export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
-export * from "./buttons";

package/src/components/Drawer/Drawer.d.ts

@@ -1,37 +0,0 @@
-import { CommonProps } from "../../common";
-export type Position = "left" | "right" | "top" | "bottom";
-export interface DrawerProps extends CommonProps {
-    /**
-     * Specifies whether the sidebar drawer is open or not.
-     */
-    open?: boolean;
-    /**
-     * The onClose handler for the drawer.
-     */
-    onClose?: (event?: React.MouseEvent | KeyboardEvent) => void;
-    /**
-     * The handler for toggling the drawer state.
-     */
-    onToggle?: (event: React.MouseEvent) => void;
-    /**
-     * Whether the drawer needs an overlay or not. Without the overlay, user will have to handle mechanism for closing the drawer.
-     */
-    disableOverlay?: boolean;
-    /**
-     * The position of the drawer.
-     */
-    position?: Position;
-    /**
-     * The child node that will be rendered inside the drawer.
-     */
-    children?: React.ReactNode;
-    dialogClassName?: string;
-}
-/**
- * MapSidebar is a sidebar component used with Maps.
- * It provides a slide over sidebar drawer which can be used for displaying map related information or controls.
- *
- * @param {DrawerProps} props - The props for the MapSidebar component
- * @returns {JSX.Element | null} Drawer component
- */
-export declare const Drawer: ({ open, onToggle, onClose, disableOverlay, position, children, dataTestId, className, dialogClassName, }: DrawerProps) => JSX.Element | null;

package/src/components/Drawer/Drawer.variants.d.ts

@@ -1,20 +0,0 @@
-export declare const cvaDialog: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | null | undefined;
-    sidebarMode?: "semi-closed" | "1/3" | "2/3" | "full" | "semi-full" | "closed" | null | undefined;
-    isLargeScreen?: boolean | null | undefined;
-    open?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaDialogContainer: (props?: ({
-    sidebarMode?: "semi-closed" | "1/3" | "2/3" | "full" | "semi-full" | "closed" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSwipeContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSwipeIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToogleContainer: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaToogleButton: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaOverlayContainer: (props?: ({
-    open?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Drawer/Overlay.d.ts

@@ -1,14 +0,0 @@
-interface OverlayProps {
-    open: boolean;
-    onClose?: (event: React.MouseEvent | KeyboardEvent) => void;
-}
-/**
- * Overlay Component
- *
- * @param {object} props - The Overlay component properties
- * @param {boolean} props.open - Open status of the Overlay
- * @param {Function} props.onClose - Callback function when Overlay is closed
- * @returns {JSX.Element|null} The Overlay component
- */
-declare const Overlay: ({ open, onClose }: OverlayProps) => JSX.Element | null;
-export default Overlay;

package/src/components/Drawer/ToogleButton.d.ts

@@ -1,19 +0,0 @@
-import { Position } from "./Drawer";
-interface ToogleButtonProps {
-    open: boolean;
-    onToggle?: (event: React.MouseEvent) => void;
-    position: Position;
-}
-/**
- * ToggleButton is a React functional component that returns a button with a chevron icon.
- * The direction of the chevron changes depending on the state of the 'open' prop and
- * the side the button is positioned ('position' prop).
- * The button might be disabled based on the 'disableButton' prop.
- *
- * @param {object} props - The properties passed to the component
- * @param {boolean} props.open - Indicates if the button is in "open" state
- * @param {Function} [props.onToggle] - Optional callback function for when the button is clicked
- * @param {Position} props.position - The position of the button relative to its container
- */
-declare const ToogleButton: ({ open, position, onToggle }: ToogleButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default ToogleButton;

package/src/components/Drawer/index.d.ts

@@ -1 +0,0 @@
-export * from "./Drawer";