@trackunit/react-components 0.1.278 → 0.1.280

package/index.cjs.js

@@ -14,6 +14,7 @@ var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactUse = require('react-use');
 var reactDayPicker = require('react-day-picker');
+var tailwindMerge = require('tailwind-merge');
 var locale = require('date-fns/locale');
 var react = require('@floating-ui/react');
 var lodash = require('lodash');
@@ -1162,7 +1163,7 @@ const useLocale = (language) => {
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
-    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: tailwindMerge.twMerge("custom-day-picker", className), disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
 };
 
 /**
@@ -1183,7 +1184,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             onRangeSelect({ from, to });
         }
     }, [onRangeSelect]);
-    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
 };
 
 const cvaDrawerOverlay = cssClassVarianceUtilities.cvaMerge([
@@ -2275,12 +2276,12 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     };
     return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React__default["default"].Children.map(children, child => {
                     return React__default["default"].cloneElement(child, {
-                        className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
+                        className: tailwindMerge.twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, Object.assign({ iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default["default"].Children.map(children, child => {
+                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: tailwindMerge.twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default["default"].Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default["default"].cloneElement(child, {
                                 onClick: () => {

package/index.esm.js

@@ -11,6 +11,7 @@ import { snakeCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard, usePrevious } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
+import { twMerge } from 'tailwind-merge';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { useFloating, FloatingFocusManager, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { omit } from 'lodash';
@@ -1131,7 +1132,7 @@ const useLocale = (language) => {
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
-    return (jsx(DayPicker$1, { className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
+    return (jsx(DayPicker$1, { className: twMerge("custom-day-picker", className), disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
 };
 
 /**
@@ -1152,7 +1153,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             onRangeSelect({ from, to });
         }
     }, [onRangeSelect]);
-    return (jsx(DayPicker$1, { className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
+    return (jsx(DayPicker$1, { className: twMerge("custom-day-picker", "range-picker", className), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
 };
 
 const cvaDrawerOverlay = cvaMerge([
@@ -2244,12 +2245,12 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     };
     return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
-                        className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
+                        className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
+                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default.cloneElement(child, {
                                 onClick: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.278",
+  "version": "0.1.280",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -24,7 +24,8 @@
     "@testing-library/react": "14.0.0",
     "@floating-ui/react": "^0.26.6",
     "@tanstack/react-router": "1.19.1",
-    "string-ts": "^2.0.0"
+    "string-ts": "^2.0.0",
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"