@trackunit/react-components 0.4.9 → 0.4.11

package/index.cjs.js

@@ -10,7 +10,6 @@ var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
 var stringTs = require('string-ts');
-var uuid = require('uuid');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
 var isEqual = require('lodash/isEqual');
@@ -168,7 +167,7 @@ const isSafari = () => {
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = React.useRef(null);
-    const ICON_CONTAINER_ID = uuid.v4();
+    const ICON_CONTAINER_ID = sharedUtils.uuidv4();
     const correctIconType = React.useMemo(() => {
         if (size === "small") {
             return "micro";
@@ -1459,7 +1458,7 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
         return reducedArrayElements;
     }, [breadcrumbItems, dataTestId]);
     const reducedArray = getReducedArray();
-    return (jsxRuntime.jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuid.v4()}`))) }));
+    return (jsxRuntime.jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${sharedUtils.uuidv4()}`))) }));
 };
 
 /**
@@ -1522,7 +1521,7 @@ const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
 const BreadcrumbItem = ({ item, dataTestId }) => {
-    const id = uuid.v4();
+    const id = sharedUtils.uuidv4();
     return (jsxRuntime.jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
 };
 
@@ -1792,7 +1791,7 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform
  * @returns {JSX.Element} Collapse component
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
-    const LABEL_ID = uuid.v4();
+    const LABEL_ID = sharedUtils.uuidv4();
     const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
     const handleClick = React__namespace.useCallback((e) => {
         if (onToggle) {
@@ -4725,7 +4724,7 @@ function defaultHeader(date, showTime) {
 }
 
 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"], {
+const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
         selected: {
             true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
@@ -4758,7 +4757,10 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
                 onChange === null || onChange === void 0 ? void 0 : onChange(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, }) => {
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, 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, { className: selected ? "text-slate-600" : "text-slate-400", 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, { className: selected ? "text-slate-600" : "text-slate-400", 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 }) }) }));
 };
 
@@ -5046,6 +5048,7 @@ exports.Text = Text;
 exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
 exports.ToggleGroup = ToggleGroup;
+exports.ToggleItem = ToggleItem;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useEffect, useState, useReducer, useCallback, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
-import { objectKeys, objectEntries, objectValues } from '@trackunit/shared-utils';
+import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
@@ -9,7 +9,6 @@ import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
-import { v4 } from 'uuid';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
@@ -148,7 +147,7 @@ const isSafari = () => {
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
-    const ICON_CONTAINER_ID = v4();
+    const ICON_CONTAINER_ID = uuidv4();
     const correctIconType = useMemo(() => {
         if (size === "small") {
             return "micro";
@@ -1439,7 +1438,7 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
         return reducedArrayElements;
     }, [breadcrumbItems, dataTestId]);
     const reducedArray = getReducedArray();
-    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${v4()}`))) }));
+    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
 };
 
 /**
@@ -1502,7 +1501,7 @@ const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
 const BreadcrumbItem = ({ item, dataTestId }) => {
-    const id = v4();
+    const id = uuidv4();
     return (jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
 };
 
@@ -1772,7 +1771,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * @returns {JSX.Element} Collapse component
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
-    const LABEL_ID = v4();
+    const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -4705,7 +4704,7 @@ function defaultHeader(date, showTime) {
 }
 
 const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
         selected: {
             true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
@@ -4738,7 +4737,10 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
                 onChange === null || onChange === void 0 ? void 0 : onChange(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, }) => {
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, 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, { className: selected ? "text-slate-600" : "text-slate-400", 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, { className: selected ? "text-slate-600" : "text-slate-400", 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 }) }) }));
 };
 
@@ -4973,4 +4975,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, Polygon, 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, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, 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, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -26,8 +26,7 @@
     "react-swipeable": "^7.0.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-table-pagination": "*",
-    "uuid": "^9.0.1"
+    "@trackunit/react-table-pagination": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -65,8 +65,12 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
 export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps<TSelectedId>) => import("react/jsx-runtime").JSX.Element;
 export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
     onClick: () => void;
-    disabled: boolean;
-    isIconOnly: boolean;
-    size: "small" | "medium";
-    selected: boolean;
+    disabled?: boolean;
+    isIconOnly?: boolean;
+    size?: "small" | "medium";
+    selected?: boolean;
 }
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+export declare const ToggleItem: ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }: ToggleItemProps) => import("react/jsx-runtime").JSX.Element;