@trackunit/react-date-and-time-components 1.13.14 → 1.13.16

package/index.cjs.js

@@ -141,7 +141,7 @@ const DateTimeHumanized = ({ value }) => {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }) => {
     const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
@@ -177,7 +177,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxRuntime.jsxs("div", { className: "flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white", "data-testid": dataTestId, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className), locale: language, onChange: value => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }

package/index.esm.js

@@ -139,7 +139,7 @@ const DateTimeHumanized = ({ value }) => {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
@@ -175,7 +175,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: "flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white", "data-testid": dataTestId, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className), locale: language, onChange: value => {
+    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.13.14",
+  "version": "1.13.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.14.13",
-    "@trackunit/date-and-time-utils": "1.10.11",
-    "@trackunit/react-date-and-time-hooks": "1.10.14",
-    "@trackunit/css-class-variance-utilities": "1.10.11",
-    "@trackunit/ui-icons": "1.10.11",
-    "@trackunit/shared-utils": "1.12.11",
-    "@trackunit/i18n-library-translation": "1.10.11",
-    "@trackunit/react-form-components": "1.11.13",
+    "@trackunit/react-components": "1.14.15",
+    "@trackunit/date-and-time-utils": "1.10.13",
+    "@trackunit/react-date-and-time-hooks": "1.10.16",
+    "@trackunit/css-class-variance-utilities": "1.10.13",
+    "@trackunit/ui-icons": "1.10.13",
+    "@trackunit/shared-utils": "1.12.13",
+    "@trackunit/i18n-library-translation": "1.10.13",
+    "@trackunit/react-form-components": "1.11.15",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayPicker/DayRangePicker.d.ts

@@ -31,6 +31,10 @@ export interface DayRangePickerProps extends CommonProps {
      * Callback for closing component view
      */
     onClose?: () => void;
+    /**
+     * A custom class name to be attached to the inner calendar element
+     */
+    classNameCalendar?: string;
 }
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
@@ -38,4 +42,4 @@ export interface DayRangePickerProps extends CommonProps {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.stories.d.ts

@@ -4,7 +4,7 @@ import { DayRangePickerProps } from "./DayRangePicker";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+    component: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
     tags: string[];
     parameters: {
         docs: {
@@ -22,6 +22,7 @@ declare const meta: {
         timezone?: import(".").TimeZone | undefined;
         cancelButtonLabel?: string | undefined;
         onClose?: (() => void) | undefined;
+        classNameCalendar?: string | undefined;
         className?: string | undefined;
         "data-testid"?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];