@trackunit/react-components 0.4.9 → 0.4.10

package/index.cjs.js

@@ -4725,7 +4725,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 +4758,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 +5049,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

@@ -4705,7 +4705,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 +4738,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 +4976,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.10",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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;