@trackunit/react-components 0.1.200 → 0.1.202

package/index.cjs.js

@@ -1221,7 +1221,6 @@ const usePopoverContext = () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
@@ -1414,7 +1413,6 @@ var WorkerWithSign = "8df3d27593b5fba4.svg";
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example
@@ -2159,6 +2157,118 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTab = cssClassVarianceUtilities.cvaMerge([
+    "mb-px",
+    "box-content",
+    "flex",
+    "h-12",
+    "min-w-0",
+    "cursor-pointer items-center",
+    "justify-center ",
+    "gap-2",
+    "border-b-4",
+    "px-1",
+    "font-medium",
+    "transition",
+    "duration-200",
+    "ease-in-out",
+], {
+    variants: {
+        isSelected: {
+            true: "border-b-blue-600 hover:text-neutral-500",
+            false: "border-neutral-200 text-neutral-500 hover:border-b-neutral-500",
+        },
+        isFullWidth: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isSelected: false,
+        isFullWidth: false,
+    },
+});
+cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "mr-4", "overflow-hidden"]);
+const cvaTabs = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
+const cvaTabsPanels = cssClassVarianceUtilities.cvaMerge(["mt-4", "flex", "h-full"]);
+const cvaTabsPanel = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        isSelected: {
+            true: "flex-1",
+            false: "grow-0",
+        },
+    },
+    defaultVariants: {
+        isSelected: false,
+    },
+});
+const cvaTabPanel = cssClassVarianceUtilities.cvaMerge(["flex-1"]);
+const cvaTabsContainer = cssClassVarianceUtilities.cvaMerge([
+    "m-0",
+    "flex",
+    "list-none",
+    "items-center",
+    "gap-x-4",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "p-0",
+]);
+
+/**
+ *
+ */
+const Tab = ({ onTabClick, isFullWidth = false, iconName, isSelected = false, label, dataTestId, suffix, }) => {
+    return (jsxRuntime.jsxs("li", { onClick: onTabClick, "data-testid": dataTestId, role: "tab", className: cvaTab({ isSelected, isFullWidth }), children: [iconName && jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), label, suffix] }));
+};
+
+/**
+ *
+ */
+const TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+};
+
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+const Tabs = ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }) => {
+    const getDefaultedSelectedTabId = () => {
+        if (defaultSelectedTabId) {
+            return defaultSelectedTabId;
+        }
+        const firstChild = React.Children.toArray(children)[0];
+        return firstChild.props.id;
+    };
+    const [selectedTabId, setSelectedTabId] = React.useState(getDefaultedSelectedTabId());
+    React.useEffect(() => {
+        if (defaultSelectedTabId) {
+            setSelectedTabId(defaultSelectedTabId);
+        }
+    }, [defaultSelectedTabId]);
+    const isTabSelected = (panel) => {
+        return panel.id === selectedTabId;
+    };
+    const handleTabClick = (panel) => {
+        if (selectedTabId !== panel.id) {
+            if (onSelectedTabChanged) {
+                onSelectedTabChanged(panel.id);
+            }
+            setSelectedTabId(panel.id);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: cvaTabs({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("ol", { role: "tablist", className: cvaTabsContainer(), children: React.Children.map(children, child => {
+                    const panel = child.props;
+                    return panel ? (jsxRuntime.jsx(Tab, { onTabClick: () => handleTabClick(panel), isSelected: panel.id === selectedTabId, isFullWidth: fullWidth, label: panel.label, iconName: panel.iconName, suffix: panel.suffix, dataTestId: panel.dataTestId })) : null;
+                }) }), jsxRuntime.jsx("div", { className: cvaTabsPanels(), children: React.Children.map(children, child => {
+                    const panel = child === null || child === void 0 ? void 0 : child.props;
+                    if (!panel || (panel.id !== selectedTabId && !forceRender)) {
+                        return null;
+                    }
+                    return (jsxRuntime.jsx("div", { className: cvaTabsPanel({ isSelected: isTabSelected(panel) }), children: jsxRuntime.jsx(TabPanel, Object.assign({}, panel)) }));
+                }) })] }));
+};
+
 const cvaTimeline = cssClassVarianceUtilities.cvaMerge("ml-4");
 const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
     "grid",
@@ -2934,6 +3044,9 @@ exports.SkeletonLines = SkeletonLines;
 exports.Spacer = Spacer;
 exports.Spinner = Spinner;
 exports.StarButton = StarButton;
+exports.Tab = Tab;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Timeline = Timeline;

package/index.esm.js

@@ -1192,7 +1192,6 @@ const usePopoverContext = () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
@@ -1385,7 +1384,6 @@ var WorkerWithSign = "8df3d27593b5fba4.svg";
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example
@@ -2130,6 +2128,118 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTab = cvaMerge([
+    "mb-px",
+    "box-content",
+    "flex",
+    "h-12",
+    "min-w-0",
+    "cursor-pointer items-center",
+    "justify-center ",
+    "gap-2",
+    "border-b-4",
+    "px-1",
+    "font-medium",
+    "transition",
+    "duration-200",
+    "ease-in-out",
+], {
+    variants: {
+        isSelected: {
+            true: "border-b-blue-600 hover:text-neutral-500",
+            false: "border-neutral-200 text-neutral-500 hover:border-b-neutral-500",
+        },
+        isFullWidth: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isSelected: false,
+        isFullWidth: false,
+    },
+});
+cvaMerge(["whitespace-no-wrap", "mr-4", "overflow-hidden"]);
+const cvaTabs = cvaMerge(["flex", "flex-col"]);
+const cvaTabsPanels = cvaMerge(["mt-4", "flex", "h-full"]);
+const cvaTabsPanel = cvaMerge([], {
+    variants: {
+        isSelected: {
+            true: "flex-1",
+            false: "grow-0",
+        },
+    },
+    defaultVariants: {
+        isSelected: false,
+    },
+});
+const cvaTabPanel = cvaMerge(["flex-1"]);
+const cvaTabsContainer = cvaMerge([
+    "m-0",
+    "flex",
+    "list-none",
+    "items-center",
+    "gap-x-4",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "p-0",
+]);
+
+/**
+ *
+ */
+const Tab = ({ onTabClick, isFullWidth = false, iconName, isSelected = false, label, dataTestId, suffix, }) => {
+    return (jsxs("li", { onClick: onTabClick, "data-testid": dataTestId, role: "tab", className: cvaTab({ isSelected, isFullWidth }), children: [iconName && jsx(Icon, { name: iconName, size: "small" }), label, suffix] }));
+};
+
+/**
+ *
+ */
+const TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
+    return (jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+};
+
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+const Tabs = ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }) => {
+    const getDefaultedSelectedTabId = () => {
+        if (defaultSelectedTabId) {
+            return defaultSelectedTabId;
+        }
+        const firstChild = Children.toArray(children)[0];
+        return firstChild.props.id;
+    };
+    const [selectedTabId, setSelectedTabId] = useState(getDefaultedSelectedTabId());
+    useEffect(() => {
+        if (defaultSelectedTabId) {
+            setSelectedTabId(defaultSelectedTabId);
+        }
+    }, [defaultSelectedTabId]);
+    const isTabSelected = (panel) => {
+        return panel.id === selectedTabId;
+    };
+    const handleTabClick = (panel) => {
+        if (selectedTabId !== panel.id) {
+            if (onSelectedTabChanged) {
+                onSelectedTabChanged(panel.id);
+            }
+            setSelectedTabId(panel.id);
+        }
+    };
+    return (jsxs("div", { className: cvaTabs({ className }), "data-testid": dataTestId, children: [jsx("ol", { role: "tablist", className: cvaTabsContainer(), children: Children.map(children, child => {
+                    const panel = child.props;
+                    return panel ? (jsx(Tab, { onTabClick: () => handleTabClick(panel), isSelected: panel.id === selectedTabId, isFullWidth: fullWidth, label: panel.label, iconName: panel.iconName, suffix: panel.suffix, dataTestId: panel.dataTestId })) : null;
+                }) }), jsx("div", { className: cvaTabsPanels(), children: Children.map(children, child => {
+                    const panel = child === null || child === void 0 ? void 0 : child.props;
+                    if (!panel || (panel.id !== selectedTabId && !forceRender)) {
+                        return null;
+                    }
+                    return (jsx("div", { className: cvaTabsPanel({ isSelected: isTabSelected(panel) }), children: jsx(TabPanel, Object.assign({}, panel)) }));
+                }) })] }));
+};
+
 const cvaTimeline = cvaMerge("ml-4");
 const cvaTimelineElement = cvaMerge([
     "grid",
@@ -2866,4 +2976,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabPanel, Tabs, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.200",
+  "version": "0.1.202",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "react": "^18.2.0",
     "@trackunit/css-class-variance-utilities": "*",
     "react-use": "^17.4.0",
-    "react-day-picker": "^8.7.1",
-    "date-fns": "^2.29.3",
-    "@floating-ui/react": "^0.25.4",
+    "react-day-picker": "^8.9.1",
+    "date-fns": "^2.30.0",
+    "@floating-ui/react": "^0.26.2",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
     "react-useportal": "1.0.18",
-    "react-router-dom": "6.11.2",
+    "react-router-dom": "6.18.0",
     "react-helmet-async": "^1.3.0",
-    "zod": "3.22.3",
+    "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0"

package/src/components/EmptyState/EmptyState.d.ts

@@ -14,7 +14,6 @@ export interface EmptyStateProps extends CommonProps {
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example

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

@@ -1,5 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "default" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
     size?: "small" | "medium" | "large" | "font" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconComponent: (props?: ({

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

@@ -33,20 +33,20 @@ export interface MenuItemProps extends CommonProps {
      * An boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     selected?: boolean;
     /**
      * OnClick event handler it is thrown on root element of the component tree
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * An boolean flag to turn on/off focused state
      * This is typically used for keyboard navigation
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     focused?: boolean;
     /**

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

@@ -47,7 +47,7 @@ export declare const usePopoverContext: () => {
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -68,7 +68,6 @@ export declare const usePopoverContext: () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */

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

@@ -48,7 +48,7 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/src/components/Tabs/Tab.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "@trackunit/ui-icons";
+import * as React from "react";
+export interface TabProps {
+    onTabClick?: () => void;
+    isSelected: boolean;
+    isFullWidth?: boolean;
+    dataTestId?: string;
+    suffix?: JSX.Element;
+    iconName?: IconName;
+    label: string | React.ReactNode;
+}
+/**
+ *
+ */
+export declare const Tab: ({ onTabClick, isFullWidth, iconName, isSelected, label, dataTestId, suffix, }: TabProps) => JSX.Element;

package/src/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "@trackunit/ui-icons";
+import { ReactNode } from "react";
+export interface TabPanelProps {
+    id: string | number;
+    label: string | ReactNode;
+    iconName?: IconName;
+    suffix?: JSX.Element;
+    className?: string;
+    dataTestId?: string;
+    children?: ReactNode;
+}
+/**
+ *
+ */
+export declare const TabPanel: ({ id, label, iconName, suffix, className, dataTestId, children }: TabPanelProps) => JSX.Element;

package/src/components/Tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+export interface TabsProps {
+    /**
+     * The ID of the tab that should be selected by default.
+     */
+    defaultSelectedTabId?: string | number;
+    /**
+     * If set to true, forces the content of all tabs to render even if not selected.
+     */
+    forceRender?: boolean;
+    /**
+     * If set to true, the tabs will expand to fill the width of their container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The child elements to be displayed within the Tabs component.
+     */
+    children?: ReactNode;
+    /**
+     * A custom class name to be attached to root element
+     */
+    className?: string;
+    /**
+     * An ID that can be used in tests to locate the component.
+     */
+    dataTestId?: string;
+    /**
+     * A callback function invoked when the selected tab changes.
+     *
+     * @param id - ID of the selected tab.
+     */
+    onSelectedTabChanged?: (id: string | number) => void;
+}
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+export declare const Tabs: ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }: TabsProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const cvaTab: (props?: ({
+    isSelected?: boolean | null | undefined;
+    isFullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTabNoWrapContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabs: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabsPanels: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabsPanel: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTabPanel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,6 +1,6 @@
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    layout?: "withIcon" | "default" | null | undefined;
+    layout?: "default" | "withIcon" | null | undefined;
     color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/index.d.ts

@@ -23,6 +23,9 @@ export * from "./Sidebar/useOverflowItems";
 export * from "./SkeletonLines";
 export * from "./Spacer";
 export * from "./Spinner";
+export * from "./Tabs/Tab";
+export * from "./Tabs/TabPanel";
+export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./Timeline/Timeline";