@trackunit/react-components 0.3.5 → 0.3.7

package/index.cjs.js

@@ -4096,7 +4096,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
             true: "grid-rows-min-fr grid overflow-y-hidden p-0",
@@ -4709,13 +4709,13 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
 /**
  *  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
+ * @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, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, 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);
+                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, }) => {

package/index.esm.js

@@ -4076,7 +4076,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
+const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
             true: "grid-rows-min-fr grid overflow-y-hidden p-0",
@@ -4689,13 +4689,13 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
 /**
  *  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
+ * @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, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, 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);
+                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, }) => {

package/package.json

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

package/src/common/AllOrNone.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Type that ensures that if one property is passed, ALL are required.
+ *
+ * @example
+ * AllOrNone<{
+    selected?: TSelectedId | null;
+    setSelected?: React.Dispatch<React.SetStateAction<TSelectedId | null>>;
+  }>
+ */
+export type AllOrNone<TProps> = (TProps & Required<TProps>) | {
+    [Key in keyof TProps]?: never;
+};

package/src/common/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AllOrNone";
 export * from "./AriaProps";
 export * from "./CommonProps";
 export * from "./Density";

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

@@ -1,13 +1,14 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
-export interface BasicToggleGroupListProps {
+export interface BasicToggleGroupListProps<TSelectedId extends string = string> {
     /**
      * Used to identify an individual button to be able to highlight the selected one.
      */
-    id: string;
+    id: TSelectedId;
     /**
      * Tooltip's fallback and button's text content.
      */
@@ -18,8 +19,8 @@ export interface BasicToggleGroupListProps {
     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.
+     * This behavior is individual for each button.
+     * For a button that use this feature, the full text can be read on hover.
      * Truncation should be avoided if possible.
      */
     text?: {
@@ -37,14 +38,12 @@ export interface BasicToggleGroupListProps {
     };
     dataTestId?: string;
 }
-export interface ToggleGroupProps extends CommonProps, Omit<VariantProps<typeof cvaToggleGroup>, "className"> {
-    list: BasicToggleGroupListProps[];
-    selected: string;
-    setSelected: React.Dispatch<React.SetStateAction<string>>;
+export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Omit<VariantProps<typeof cvaToggleGroup>, "className"> & {
+    list: readonly BasicToggleGroupListProps<TSelectedId>[];
     /**
-     * For when the click event needs to do more than select an id
+     * Instead of onClick, we now use onChange to return the selected value
      */
-    onClick?: () => void;
+    onChange?: (selectedId: TSelectedId) => void;
     disabled?: boolean;
     /**
      * ToggleGroup buttons can be one of two sizes
@@ -54,15 +53,17 @@ export interface ToggleGroupProps extends CommonProps, Omit<VariantProps<typeof
      * Enable to use toggle buttons with icons only and a tooltip on hover
      */
     isIconOnly?: boolean;
-}
+    selected: TSelectedId;
+    setSelected: React.Dispatch<React.SetStateAction<TSelectedId>>;
+};
 /**
  *  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
+ * @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) => import("react/jsx-runtime").JSX.Element;
-export interface ToggleItemProps extends CommonProps, Omit<BasicToggleGroupListProps, "id"> {
+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;