@trackunit/react-components 0.5.38 → 0.5.39

package/index.cjs.js

@@ -458,7 +458,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     "cursor-pointer",
     "flex-none",
     "component-button-border",
-    "component-button-padding", //TODO: Is overwritten by size which messes with marketing theme
+    "component-button-padding",
     "component-button-height",
     "disabled:cursor-not-allowed",
     "font-medium",
@@ -653,11 +653,21 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
         variant: {
             primary: [],
             "primary-danger": [],
-            secondary: ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
+            secondary: [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
             "secondary-danger": [],
             ghost: [],
-            "ghost-neutral": ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
-        }
+            "ghost-neutral": [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -1281,7 +1291,7 @@ const getWindowSize = () => {
             width: window.innerWidth,
         };
     }
-    catch (err) {
+    catch (error) {
         return {
             height: 0,
             width: 0,
@@ -1928,7 +1938,6 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
     for (let i = 0; i < lines; i++) {
         skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 && i >= 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
     }
-    // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
 });
 SkeletonLines.displayName = "SkeletonLines";
@@ -4296,6 +4305,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
+    // eslint-disable-next-line sonarjs/deprecation
     reactRouter.useBlocker(confirmExit, when);
 }
 /**
@@ -4398,7 +4408,7 @@ const cvaSidebarChildContainer = cssClassVarianceUtilities.cvaMerge(["apply", "f
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
     const [itemOverflowMap, setItemOverflowMap] = React.useState({});
-    const overflowContainerRef = React.useRef(null); // TODO: Handle other elements than div
+    const overflowContainerRef = React.useRef(null);
     const observerRef = React.useRef(null);
     const handleIntersection = React.useCallback(entries => {
         const updatedEntries = {};
@@ -4608,6 +4618,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
+    // eslint-disable-next-line sonarjs/no-selector-parameter
     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

@@ -438,7 +438,7 @@ const cvaButton = cvaMerge([
     "cursor-pointer",
     "flex-none",
     "component-button-border",
-    "component-button-padding", //TODO: Is overwritten by size which messes with marketing theme
+    "component-button-padding",
     "component-button-height",
     "disabled:cursor-not-allowed",
     "font-medium",
@@ -633,11 +633,21 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
         variant: {
             primary: [],
             "primary-danger": [],
-            secondary: ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
+            secondary: [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
             "secondary-danger": [],
             ghost: [],
-            "ghost-neutral": ["text-secondary-400", "group-focus:text-secondary-400", "group-hover:text-secondary-500", "group-active:text-secondary-600"],
-        }
+            "ghost-neutral": [
+                "text-secondary-400",
+                "group-focus:text-secondary-400",
+                "group-hover:text-secondary-500",
+                "group-active:text-secondary-600",
+            ],
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -1261,7 +1271,7 @@ const getWindowSize = () => {
             width: window.innerWidth,
         };
     }
-    catch (err) {
+    catch (error) {
         return {
             height: 0,
             width: 0,
@@ -1908,7 +1918,6 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
     for (let i = 0; i < lines; i++) {
         skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 && i >= 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
     }
-    // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
 });
 SkeletonLines.displayName = "SkeletonLines";
@@ -4276,6 +4285,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
+    // eslint-disable-next-line sonarjs/deprecation
     useBlocker(confirmExit, when);
 }
 /**
@@ -4378,7 +4388,7 @@ const cvaSidebarChildContainer = cvaMerge(["apply", "flex", "overflow-hidden", "
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
     const [itemOverflowMap, setItemOverflowMap] = useState({});
-    const overflowContainerRef = useRef(null); // TODO: Handle other elements than div
+    const overflowContainerRef = useRef(null);
     const observerRef = useRef(null);
     const handleIntersection = useCallback(entries => {
         const updatedEntries = {};
@@ -4588,6 +4598,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
+    // eslint-disable-next-line sonarjs/no-selector-parameter
     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.38",
+  "version": "0.5.39",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -4,7 +4,7 @@ import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.var
 import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     variant?: MenuItemVariant;
-    selected?: boolean | null | undefined;
+    selected: boolean | null | undefined;
 };
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.

package/src/test-utils/hooks.d.ts

@@ -0,0 +1,12 @@
+import { RenderHookOptions } from "@testing-library/react";
+/**
+ *  Custom renderHook function to avoid boilerplate
+ *
+ * @template T
+ * @template K
+ * @param {(props: T) => K} callback - callback function
+ * @param {RenderHookOptions<T>} [options] - options
+ */
+declare const customRenderHook: <TProps, TReturn>(callback: (props: TProps) => TReturn, options?: RenderHookOptions<TProps>) => import("@testing-library/react").RenderHookResult<TReturn, TProps>;
+export * from "@testing-library/react";
+export { customRenderHook as renderHook };

package/src/test-utils/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { RenderOptions, RenderResult } from "@testing-library/react";
+import * as React from "react";
+/**
+ * Enhanced render with providers
+ *
+ * @param ui - The UI to render
+ * @param options - The options for the render
+ * @returns {RenderResult} The rendered UI
+ */
+declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "wrapper">) => RenderResult;
+export * from "@testing-library/react";
+export { customRender as render };