@trackunit/react-components 0.5.4 → 0.5.6

package/index.cjs.js

@@ -12,7 +12,6 @@ var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
 var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
-var isEqual = require('lodash/isEqual');
 var usehooksTs = require('usehooks-ts');
 var reactRouter = require('@tanstack/react-router');
 var react = require('@floating-ui/react');
@@ -833,7 +832,7 @@ const setLocalStorage = (key, value) => {
 const validateState = ({ state, schema, onValidationFailed, onValidationSuccessful, defaultState, }) => {
     try {
         const parsedState = schema.parse(state);
-        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
+        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(parsedState);
         return parsedState;
     }
     catch (error) {
@@ -888,7 +887,7 @@ const usePrevious = (value) => {
 const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
     const prevState = usePrevious(state);
     React.useEffect(() => {
-        if (isEqual(prevState, state)) {
+        if (JSON.stringify(prevState) === JSON.stringify(state)) {
             return;
         }
         if (schema) {
@@ -902,9 +901,9 @@ const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationF
                     localStorage.removeItem(key);
                     onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
                 },
-                onValidationSuccessful: () => {
-                    setLocalStorage(key, state);
-                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
+                onValidationSuccessful: data => {
+                    setLocalStorage(key, data);
+                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(data);
                 },
             });
         }
@@ -927,7 +926,14 @@ const useLocalStorage = ({ key, defaultState, schema, onValidationFailed, onVali
         throw new Error("useLocalStorage key may not be falsy");
     }
     const [state, setState] = React.useState(initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
+    useLocalStorageEffect({
+        key,
+        state,
+        defaultState,
+        schema,
+        onValidationFailed,
+        onValidationSuccessful,
+    });
     const reset = () => {
         setState(defaultState);
     };
@@ -3506,7 +3512,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["flex"]);
+const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3529,11 +3535,11 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-1/4 top-[8%]",
-            "left-end": "bottom-1/4 bottom-[8%]",
+            "left-start": "top-[8%]",
+            "left-end": "bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-1/4 top-[8%]",
-            "right-end": "bottom-1/4 bottom-[8%]",
+            "right-start": "top-[8%]",
+            "right-end": "bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3579,7 +3585,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, childrenWrapperClassName, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const arrowRef = React__namespace.useRef(null);
     const { refs, floatingStyles, context } = react.useFloating({
@@ -3592,7 +3598,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     const { isMounted } = react.useTransitionStatus(context);
     // Please don't try to move this into the component body directly
     // I tried and it caused infinite re-renders some places (for whatever reason)
-    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipContainer({ className: childrenWrapperClassName }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     const openTooltip = React__namespace.useCallback(() => {
         if (disabled) {
             return;
@@ -4645,7 +4651,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 /**
- * Individual TooggleItem to create custom ToggleGroups
+ * Individual ToggleItem 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 }) }) }));

package/index.esm.js

@@ -11,7 +11,6 @@ import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
-import isEqual from 'lodash/isEqual';
 import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
@@ -813,7 +812,7 @@ const setLocalStorage = (key, value) => {
 const validateState = ({ state, schema, onValidationFailed, onValidationSuccessful, defaultState, }) => {
     try {
         const parsedState = schema.parse(state);
-        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
+        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(parsedState);
         return parsedState;
     }
     catch (error) {
@@ -868,7 +867,7 @@ const usePrevious = (value) => {
 const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
     const prevState = usePrevious(state);
     useEffect(() => {
-        if (isEqual(prevState, state)) {
+        if (JSON.stringify(prevState) === JSON.stringify(state)) {
             return;
         }
         if (schema) {
@@ -882,9 +881,9 @@ const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationF
                     localStorage.removeItem(key);
                     onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
                 },
-                onValidationSuccessful: () => {
-                    setLocalStorage(key, state);
-                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
+                onValidationSuccessful: data => {
+                    setLocalStorage(key, data);
+                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(data);
                 },
             });
         }
@@ -907,7 +906,14 @@ const useLocalStorage = ({ key, defaultState, schema, onValidationFailed, onVali
         throw new Error("useLocalStorage key may not be falsy");
     }
     const [state, setState] = useState(initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
+    useLocalStorageEffect({
+        key,
+        state,
+        defaultState,
+        schema,
+        onValidationFailed,
+        onValidationSuccessful,
+    });
     const reset = () => {
         setState(defaultState);
     };
@@ -3486,7 +3492,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipFlexContainer = cvaMerge(["flex"]);
+const cvaTooltipContainer = cvaMerge(["flex"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3509,11 +3515,11 @@ const cvaTooltipPopoverTail = cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-1/4 top-[8%]",
-            "left-end": "bottom-1/4 bottom-[8%]",
+            "left-start": "top-[8%]",
+            "left-end": "bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-1/4 top-[8%]",
-            "right-end": "bottom-1/4 bottom-[8%]",
+            "right-start": "top-[8%]",
+            "right-end": "bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3559,7 +3565,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, childrenWrapperClassName, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const arrowRef = React.useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -3572,7 +3578,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     const { isMounted } = useTransitionStatus(context);
     // Please don't try to move this into the component body directly
     // I tried and it caused infinite re-renders some places (for whatever reason)
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
+    const wrappedChildren = (jsx("div", { className: cvaTooltipContainer({ className: childrenWrapperClassName }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     const openTooltip = React.useCallback(() => {
         if (disabled) {
             return;
@@ -4625,7 +4631,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 /**
- * Individual TooggleItem to create custom ToggleGroups
+ * Individual ToggleItem 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 }) }) }));

package/package.json

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

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

@@ -71,6 +71,6 @@ export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGrou
     selected?: boolean;
 }
 /**
- * Individual TooggleItem to create custom ToggleGroups
+ * Individual ToggleItem 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;

package/src/components/Tooltip/Tooltip.d.ts

@@ -28,6 +28,10 @@ export interface TooltipProps extends CommonProps {
      * The props for setting the icon on this tip.
      */
     iconProps?: Omit<IconProps, "type">;
+    /**
+     * The className to be passed to the children wrapper.
+     */
+    childrenWrapperClassName?: string;
     /**
      * Ihe id of the html element
      */
@@ -45,4 +49,4 @@ export interface TooltipProps extends CommonProps {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, childrenWrapperClassName, label, placement, mode, iconProps, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipIcon: (props?: ({
     color?: "light" | "dark" | null | undefined;
     defaultVariants?: "color" | null | undefined;

package/src/hooks/localStorage/types.d.ts

@@ -13,7 +13,7 @@ export interface LocalStorageParams<TState> {
      */
     schema?: z.Schema<TState>;
 }
-export interface LocalStorageCallbacks {
+export interface LocalStorageCallbacks<TState> {
     /**
      * Optional callback function called when validation fails.
      *
@@ -23,5 +23,5 @@ export interface LocalStorageCallbacks {
     /**
      * Optional callback function called when validation succeeds.
      */
-    onValidationSuccessful?: () => void;
+    onValidationSuccessful?: (data: TState) => void;
 }

package/src/hooks/localStorage/useLocalStorage.d.ts

@@ -7,4 +7,4 @@ import { LocalStorageCallbacks, LocalStorageParams } from "./types";
  * @param {Omit<LocalStorageParams<TState>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
  * @returns {[TState, Dispatch<SetStateAction<TState>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
  */
-export declare const useLocalStorage: <TState>({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks) => readonly [TState, Dispatch<SetStateAction<TState>>, () => void];
+export declare const useLocalStorage: <TState>({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks<TState>) => readonly [TState, Dispatch<SetStateAction<TState>>, () => void];

package/src/hooks/localStorage/useLocalStorageEffect.d.ts

@@ -6,6 +6,6 @@ import { LocalStorageCallbacks, LocalStorageParams } from "./types";
  * @template TState - The type of the state variable.
  * @param {LocalStorageParams<TState> & LocalStorageCallbacks & { state: TState }} params - The parameters for the useLocalStorageEffect hook.
  */
-export declare const useLocalStorageEffect: <TState>({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks & {
+export declare const useLocalStorageEffect: <TState>({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks<TState> & {
     state: TState;
 }) => void;

package/src/hooks/localStorage/useLocalStorageReducer.d.ts

@@ -10,4 +10,4 @@ import { LocalStorageCallbacks, LocalStorageParams } from "./types";
  */
 export declare const useLocalStorageReducer: <TState, TAction>({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }: {
     reducer: (state: TState, action: TAction) => TState;
-} & LocalStorageParams<TState> & LocalStorageCallbacks) => readonly [TState, Dispatch<TAction>];
+} & LocalStorageParams<TState> & LocalStorageCallbacks<TState>) => readonly [TState, Dispatch<TAction>];

package/src/hooks/localStorage/validateState.d.ts

@@ -2,7 +2,7 @@ import { LocalStorageCallbacks, LocalStorageParams } from "./types";
 type ValidateStateOptions<TState> = Required<Pick<LocalStorageParams<TState>, "schema">> & {
     state: TState;
     defaultState: TState;
-} & LocalStorageCallbacks;
+} & LocalStorageCallbacks<TState>;
 /**
  * Validates the state object using a Zod schema.
  *

package/src/common/useContainerProps.d.ts

@@ -1,16 +0,0 @@
-export interface UseContainerProps {
-    className?: string;
-    dataTestId?: string;
-}
-/**
- * Utility for common props on containers.
- *
- * @param {UseContainerProps} ContainerProps - Props for the utility
- * @param {string} ContainerProps.className - Optional custom className
- * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
- * @returns {UseContainerProps} - Object with undefined values removed
- */
-export declare const useContainerProps: ({ className, dataTestId }: UseContainerProps) => {
-    className: string | undefined;
-    "data-testid": string | undefined;
-};