@trackunit/react-components 0.1.365 → 0.1.367

package/index.cjs.js

@@ -4532,6 +4532,44 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
+const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
+const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+    variants: {
+        selected: {
+            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            false: [],
+        },
+    },
+});
+const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+    variants: {
+        disabledAndSelected: {
+            true: ["text-slate-800"],
+            false: [],
+        },
+        maxWidth: {
+            sm: ["max-w-[80px]"],
+            md: ["max-w-[120px]"],
+        },
+    },
+});
+
+/**
+ *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
+ *
+ * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
+ * @returns {JSX.Element}  ToggleGroup component
+ */
+const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+                onClick && onClick();
+                setSelected(item.id);
+            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+};
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+};
+
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -4607,6 +4645,7 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;

package/index.esm.js

@@ -4501,6 +4501,44 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
+const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
+const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+    variants: {
+        selected: {
+            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            false: [],
+        },
+    },
+});
+const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+    variants: {
+        disabledAndSelected: {
+            true: ["text-slate-800"],
+            false: [],
+        },
+        maxWidth: {
+            sm: ["max-w-[80px]"],
+            md: ["max-w-[120px]"],
+        },
+    },
+});
+
+/**
+ *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
+ *
+ * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
+ * @returns {JSX.Element}  ToggleGroup component
+ */
+const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+    return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+                onClick && onClick();
+                setSelected(item.id);
+            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+};
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+    return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+};
+
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -4525,4 +4563,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, 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, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, 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, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.365",
+  "version": "0.1.367",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,72 @@
+/// <reference types="react" />
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { IconName } from "@trackunit/ui-icons";
+import { CommonProps } from "../../common/CommonProps";
+import { TooltipPlacement } from "../Tooltip/Tooltip";
+import { cvaToggleGroup } from "./ToggleGroup.variants";
+export interface BasicToggleGroupListProps {
+    /**
+     * Used to identify an individual button to be able to highlight the selected one.
+     */
+    id: string;
+    /**
+     * Tooltip's fallback and button's text content.
+     */
+    title: string;
+    /**
+     * Pass the name of an icon to include one for each of the buttons.
+     */
+    iconName?: IconName;
+    /**
+     * Due to size of the text, one might need to truncate a button's content or another.
+     * This behaviour is individual for each button.
+     * For a button that utilises this feature, the full text can be read on hover.
+     * Truncation should be avoided if possible.
+     */
+    text?: {
+        truncate: boolean;
+        maxWidth: "sm" | "md";
+    };
+    /**
+     * A tooltip's position can be modified for extreme cases where it's default state breaks the UI.
+     * Defaults to top.
+     * Use content for the cases where the title doesn't use the same exact text.
+     */
+    tooltip?: {
+        content?: string;
+        placement?: TooltipPlacement;
+    };
+    dataTestId?: string;
+}
+export interface ToggleGroupProps extends CommonProps, Omit<VariantProps<typeof cvaToggleGroup>, "className"> {
+    list: BasicToggleGroupListProps[];
+    selected: string;
+    setSelected: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * For when the click event needs to do more than select an id
+     */
+    onClick?: () => void;
+    disabled?: boolean;
+    /**
+     * ToggleGroup buttons can be one of two sizes
+     */
+    size?: "small" | "medium";
+    /**
+     * Enable to use toggle buttons with icons only and a tooltip on hover
+     */
+    isIconOnly?: boolean;
+}
+/**
+ *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
+ *
+ * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
+ * @returns {JSX.Element}  ToggleGroup component
+ */
+export declare const ToggleGroup: ({ list, selected, setSelected, onClick, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps) => JSX.Element;
+export interface ToggleItemProps extends CommonProps, Omit<BasicToggleGroupListProps, "id"> {
+    onClick: () => void;
+    disabled: boolean;
+    isIconOnly: boolean;
+    size: "small" | "medium";
+    selected: boolean;
+}

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

@@ -0,0 +1,8 @@
+export declare const cvaToggleGroup: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleItem: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleItemText: (props?: ({
+    disabledAndSelected?: boolean | null | undefined;
+    maxWidth?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -39,3 +39,4 @@ export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
 export * from "./buttons";
+export * from "./ToggleGroup/ToggleGroup";