@vidispine/vdt-mui 23.3.0-pre.2 → 23.3.0-pre.4

package/dist/es/general/CalendarPicker/CalendarPicker.d.ts

@@ -0,0 +1,134 @@
+/// <reference types="react" />
+import { Paper as MuiPaper, Divider as MuiDivider, Button as MuiButton, Box as MuiBox, ButtonGroup as MuiButtonGroup } from '@mui/material';
+import { CalendarPicker as MuiCalendarPicker, LocalizationProvider as MuiLocalizationProvider } from '@mui/x-date-pickers';
+import VdtPickersDay from './components/PickersDay';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiPaper: typeof MuiPaper;
+type StyledMuiCalendarPickerLeftType = StyledComponent<typeof MuiCalendarPicker, {
+    showDouble?: boolean;
+}>;
+declare const StyledMuiCalendarPickerLeft: StyledMuiCalendarPickerLeftType;
+declare const StyledMuiCalendarPickerRight: typeof MuiCalendarPicker;
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledMuiButtonGroup: typeof MuiButtonGroup;
+declare const StyledMuiDivider: typeof MuiDivider;
+declare const defaultComponents: {
+    Root: typeof StyledMuiPaper;
+    LocalizationProvider: typeof MuiLocalizationProvider;
+    Box: typeof StyledMuiBox;
+    CalendarPickerLeft: typeof StyledMuiCalendarPickerLeft;
+    CalendarPickerRight: typeof StyledMuiCalendarPickerRight;
+    PickersDay: typeof VdtPickersDay;
+    Divider: typeof StyledMuiDivider;
+    ButtonGroup: typeof StyledMuiButtonGroup;
+    ClearButton: typeof MuiButton;
+    SubmitButton: typeof MuiButton;
+};
+export interface CalendarPickerProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The selected start date for the picker
+     */
+    value?: {
+        start?: string;
+        end?: string;
+    } | string | number;
+    /**
+     * The selected end date for the picker
+     */
+    defaultValue?: {
+        start?: string;
+        end?: string;
+    } | string | number;
+    /**
+     * Month to display
+     *
+     * Note: Will set left month if double calendar (right calender will be next month after that)
+     */
+    monthDate?: string | number;
+    /**
+     * Set if it should select start or end
+     */
+    range?: boolean;
+    /**
+     * Used to select if it's start or end you should set
+     *
+     * Note: Will alternate between start then end if undefined
+     */
+    rangeValueToChange?: 'START' | 'END';
+    /**
+     * Set if highlight today's date should be disabled
+     */
+    disableHighlightToday?: boolean;
+    /**
+     * Set past dates in picker
+     */
+    disablePast?: boolean;
+    /**
+     * Set future dates in picker
+     */
+    disableFuture?: boolean;
+    /**
+     * Locale of calendar picker
+     */
+    locale?: 'en' | 'en-gb' | 'de' | 'sv' | 'fr';
+    /**
+     * Set min date to pick
+     */
+    minDate?: string | number;
+    /**
+     * Set max date time to pick
+     */
+    maxDate?: string | number;
+    /**
+     * Render single or double picker
+     */
+    showDouble?: boolean;
+    /**
+     * Set text for clear button
+     */
+    clearText?: string;
+    /**
+     * Set text for submit button
+     */
+    submitText?: string;
+    /**
+     * Submit range after selection
+     */
+    submitOnChange?: boolean;
+    /**
+     * Callback when value changed
+     *
+     * Note: Only triggered when changed to a valid date
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement> | null, payload: {
+        value: {
+            start?: string;
+            end?: string;
+        } | string | number;
+    }) => void;
+    /**
+     * Callback when month is changed
+     *
+     * Note: will return month from left calender if double
+     */
+    onMonthChange?: (event: null, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Callback when reset button is clicked
+     *
+     */
+    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback when submit button is clicked
+     *
+     */
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        value: {
+            start?: string;
+            end?: string;
+        } | string | number;
+    }) => void;
+}
+declare const CalendarPicker: React.FC<CalendarPickerProps>;
+export default CalendarPicker;

package/dist/es/general/CalendarPicker/CalendarPicker.js

@@ -1,30 +1,29 @@
-import { jsxs as y, jsx as o, Fragment as ce } from "react/jsx-runtime";
-import { useState as se, useRef as H, useMemo as E, useEffect as ue } from "react";
-import e from "prop-types";
-import me from "@mui/material/Paper";
-import fe from "@mui/material/Divider";
-import z from "@mui/material/Button";
-import he from "@mui/material/Box";
-import ge from "@mui/material/ButtonGroup";
-import { styled as u } from "@mui/material/styles";
-import { CalendarPicker as W, LocalizationProvider as be } from "@mui/x-date-pickers";
-import { AdapterDayjs as G } from "@mui/x-date-pickers/AdapterDayjs";
-import ye from "./components/PickersDay.js";
+import { jsxs as k, jsx as o, Fragment as de } from "react/jsx-runtime";
+import { useState as oe, useRef as z, useMemo as F, useEffect as le } from "react";
+import ue from "@mui/material/Paper";
+import ce from "@mui/material/Divider";
+import N from "@mui/material/Button";
+import se from "@mui/material/Box";
+import me from "@mui/material/ButtonGroup";
+import { styled as c } from "@mui/material/styles";
+import { CalendarPicker as _, LocalizationProvider as fe } from "@mui/x-date-pickers";
+import { AdapterDayjs as O } from "@mui/x-date-pickers/AdapterDayjs";
+import he from "./components/PickersDay.js";
 import "dayjs/locale/fr";
 import "dayjs/locale/de";
 import "dayjs/locale/sv";
 import "dayjs/locale/en-gb";
-const F = ["en", "en-gb", "de", "sv", "fr"], Ce = u(me)(() => ({
+const ge = c(ue)(() => ({
   display: "flex",
   flexDirection: "column",
   width: "min-content",
   margin: "auto",
   minWidth: 300
-})), Pe = u(W, {
+})), Ce = c(_, {
   shouldForwardProp: (r) => r !== "showDouble"
 })(({
-  showDouble: r,
-  views: m
+  views: r,
+  showDouble: y
 }) => ({
   margin: 0,
   minWidth: 300,
@@ -32,12 +31,12 @@ const F = ["en", "en-gb", "de", "sv", "fr"], Ce = u(me)(() => ({
   "& .MuiDayPicker-weekDayLabel": {
     margin: "0 1px"
   },
-  ...m.length === 1 && m.includes("day") && {
+  ...r.length === 1 && r.includes("day") && {
     "& .MuiPickersCalendarHeader-labelContainer": {
       pointerEvents: "none"
     }
   },
-  ...r && {
+  ...y && {
     "& .MuiPickersArrowSwitcher-spacer": {
       display: "none"
     },
@@ -54,9 +53,7 @@ const F = ["en", "en-gb", "de", "sv", "fr"], Ce = u(me)(() => ({
       }
     }
   }
-})), ke = u(W, {
-  shouldForwardProp: (r) => r !== "showDouble"
-})(({
+})), ve = c(_)(({
   views: r
 }) => ({
   margin: 0,
@@ -83,293 +80,199 @@ const F = ["en", "en-gb", "de", "sv", "fr"], Ce = u(me)(() => ({
       }
     }
   }
-})), Te = u(he)(() => ({
+})), ke = c(se)(() => ({
   display: "flex"
-})), pe = u(ge)(() => ({
-  padding: "3px"
-})), Oe = {
-  Root: Ce,
-  LocalizationProvider: be,
-  Box: Te,
-  CalendarPickerLeft: Pe,
-  CalendarPickerRight: ke,
-  PickersDay: ye,
-  Divider: fe,
-  ButtonGroup: pe,
-  ClearButton: z,
-  SubmitButton: z
-};
-function I({
+})), ye = c(me)(() => ({
+  padding: "3px",
+  border: "2px"
+})), Se = c(ce)(() => ({
+  marginRight: 1
+  // align with button border
+})), Me = {
+  Root: ge,
+  LocalizationProvider: fe,
+  Box: ke,
+  CalendarPickerLeft: Ce,
+  CalendarPickerRight: ve,
+  PickersDay: he,
+  Divider: Se,
+  ButtonGroup: ye,
+  ClearButton: N,
+  SubmitButton: N
+}, xe = ["en", "en-gb", "de", "sv", "fr"], Pe = ({
   value: r,
-  defaultValue: m,
-  range: f,
+  defaultValue: y,
+  range: m,
   monthDate: s,
-  rangeValueToChange: C,
-  disableHighlightToday: N,
-  disablePast: p,
-  disableFuture: O,
-  minDate: v,
-  maxDate: M,
-  locale: h,
+  rangeValueToChange: S,
+  disableHighlightToday: j,
+  disablePast: D,
+  disableFuture: R,
+  minDate: f,
+  maxDate: h,
+  locale: g,
   showDouble: l,
-  submitOnChange: K,
-  clearText: _,
-  submitText: Y,
-  onMonthChange: $,
-  onChange: c,
-  onReset: q,
-  onSubmit: J,
-  components: Q,
-  componentsProps: a
-}) {
-  var j, w;
+  submitOnChange: Y,
+  clearText: $,
+  submitText: q,
+  onMonthChange: J,
+  onChange: u,
+  onReset: Q,
+  onSubmit: U,
+  components: X,
+  componentsProps: i
+}) => {
+  var G, W;
   const {
-    Root: U,
-    LocalizationProvider: X,
-    Box: Z,
+    Root: Z,
+    LocalizationProvider: K,
+    Box: p,
     CalendarPickerLeft: V,
     CalendarPickerRight: ee,
-    PickersDay: x,
-    Divider: S,
+    PickersDay: L,
+    Divider: A,
     ClearButton: te,
-    SubmitButton: ne,
-    ButtonGroup: re
-  } = Q, d = new G(), [D, B] = se(s ?? (/* @__PURE__ */ new Date()).toISOString()), g = H(C || "START"), i = H(r || m), n = (f ? (r == null ? void 0 : r.start) !== null && (r == null ? void 0 : r.end) !== null : r !== void 0) ? r : i.current, R = C !== void 0 ? C : g.current, P = d.date(s || D), k = d.date(s || D).add(1, "month"), ie = E(() => l ? P : void 0, [P, l]), ae = E(() => l ? k : void 0, [k, l]), b = (t) => {
-    B(d.date(t)), $(null, {
-      value: t.toISOString()
+    SubmitButton: re,
+    ButtonGroup: ie
+  } = X, d = new O(), [T, H] = oe(s ?? (/* @__PURE__ */ new Date()).toISOString()), C = z(S || "START"), n = z(r || y), a = (m && typeof r == "object" ? (r == null ? void 0 : r.start) !== null && (r == null ? void 0 : r.end) !== null : r !== void 0) ? r : n.current, w = S !== void 0 ? S : C.current, M = d.date(s || T), x = d.date(s || T).add(1, "month"), P = F(() => l ? M : void 0, [M, l]), b = F(() => l ? x : void 0, [x, l]), v = (e) => {
+    var t;
+    H((t = d.date(e)) == null ? void 0 : t.toISOString()), J(null, {
+      value: e.toISOString()
     });
-  }, L = (t) => {
-    i.current = t.toISOString(), c(null, {
-      value: i.current
+  }, I = (e) => {
+    n.current = e == null ? void 0 : e.toISOString(), u(null, {
+      value: n.current
     });
-  }, A = (t) => {
-    R === "START" ? (!(n != null && n.end) || d.date(n == null ? void 0 : n.end).isBefore(t) ? (i.current = {
-      start: t.format(),
-      end: void 0
-    }, c(null, {
-      value: i.current
-    })) : (i.current = {
-      ...n,
-      start: t.format()
-    }, c(null, {
-      value: i.current
-    })), g.current = "END") : R === "END" && (!(n != null && n.start) || d.date(n == null ? void 0 : n.start).isAfter(t) ? (i.current = {
-      start: void 0,
-      end: t.format()
-    }, c(null, {
-      value: i.current
-    })) : (i.current = {
-      ...n,
-      end: t.format()
-    }, c(null, {
-      value: i.current
-    })), g.current = "START");
-  }, oe = (t) => {
-    i.current = f ? {
+  }, E = (e) => {
+    if (w === "START") {
+      const t = typeof a == "object" ? a : {};
+      !(t != null && t.end) || d.date(t == null ? void 0 : t.end).isBefore(e) ? (n.current = {
+        start: e.format(),
+        end: void 0
+      }, u(null, {
+        value: n.current
+      })) : (n.current = {
+        ...t,
+        start: e.format()
+      }, u(null, {
+        value: n.current
+      })), C.current = "END";
+    } else if (w === "END") {
+      const t = typeof a == "object" ? a : void 0;
+      !(t != null && t.start) || d.date(t == null ? void 0 : t.start).isAfter(e) ? (n.current = {
+        start: void 0,
+        end: e.format()
+      }, u(null, {
+        value: n.current
+      })) : (n.current = {
+        ...t,
+        end: e.format()
+      }, u(null, {
+        value: n.current
+      })), C.current = "START";
+    }
+  }, ne = (e) => {
+    n.current = m ? {
       start: void 0,
       end: void 0
-    } : "", g.current = "START", b(d.date(/* @__PURE__ */ new Date())), c(t, {
-      value: i.current
-    }), q();
-  }, le = (t) => {
-    J(t, {
-      value: i.current
+    } : "", C.current = "START", v(d.date(/* @__PURE__ */ new Date())), u(e, {
+      value: n.current
+    }), Q(e);
+  }, ae = (e) => {
+    U(e, {
+      value: n.current
     });
   };
-  return ue(() => {
-    B(s);
-  }, [s]), /* @__PURE__ */ y(U, { ...a.root, children: [
-    /* @__PURE__ */ o(X, { dateAdapter: G, adapterLocale: F.includes(h) ? h : "en", ...a.localizationProvider, children: /* @__PURE__ */ y(Z, { ...a.box, children: [
+  return le(() => {
+    H(s);
+  }, [s]), /* @__PURE__ */ k(Z, { ...i.root, children: [
+    /* @__PURE__ */ o(K, { dateAdapter: O, adapterLocale: xe.includes(g) ? g : "en", ...i.localizationProvider, children: /* @__PURE__ */ k(p, { ...i.box, children: [
       /* @__PURE__ */ o(
         V,
         {
-          defaultCalendarMonth: P,
-          disableHighlightToday: N,
-          disablePast: p,
-          disableFuture: O,
+          defaultCalendarMonth: M,
+          disableHighlightToday: j,
+          disablePast: D,
+          disableFuture: R,
           showDouble: l,
-          minDate: v,
-          maxDate: M,
-          renderDay: (t, de, T) => /* @__PURE__ */ o(x, { date: t, value: n, locale: h, ...T }),
-          onMonthChange: (t) => b(t.toDate()),
-          onYearChange: b,
-          onChange: (t) => f ? A(t) : L(t),
+          minDate: f ? d.date(f) : void 0,
+          maxDate: h ? d.date(h) : void 0,
+          renderDay: (e, t, B) => (
+            // @ts-expect-error
+            /* @__PURE__ */ o(
+              L,
+              {
+                date: e,
+                value: a,
+                locale: g,
+                ...B,
+                ...i.pickersDay
+              }
+            )
+          ),
+          onMonthChange: (e) => v(e),
+          onYearChange: v,
+          onChange: (e) => m ? E(e) : I(e),
           reduceAnimations: !0,
           views: ["day", "year"],
-          ...a.calendarPickerLeft,
+          ...i.calendarPickerLeft,
           components: {
             ...l ? {
               RightArrowButton: () => null
             } : {},
-            ...((j = a.calendarPickerLeft) == null ? void 0 : j.components) || {}
+            ...((G = i.calendarPickerLeft) == null ? void 0 : G.components) || {}
           }
         },
-        ie
+        P == null ? void 0 : P.toISOString()
       ),
-      l && /* @__PURE__ */ y(ce, { children: [
-        /* @__PURE__ */ o(S, { flexItem: !0, orientation: "vertical", sx: {
-          borderWidth: 1
-        } }),
+      l && /* @__PURE__ */ k(de, { children: [
+        /* @__PURE__ */ o(A, { flexItem: !0, orientation: "vertical", ...i.divider }),
         /* @__PURE__ */ o(
           ee,
           {
-            defaultCalendarMonth: k,
-            disablePast: p,
-            disableFuture: O,
-            minDate: v,
-            maxDate: M,
-            renderDay: (t, de, T) => /* @__PURE__ */ o(x, { date: t, value: n, locale: h, ...T }),
-            onMonthChange: (t) => b(d.date(t).subtract(1, "month")),
-            onChange: (t) => f ? A(t) : L(t),
+            defaultCalendarMonth: x,
+            disablePast: D,
+            disableFuture: R,
+            minDate: f ? d.date(f) : void 0,
+            maxDate: h ? d.date(h) : void 0,
+            renderDay: (e, t, B) => (
+              // @ts-expect-error
+              /* @__PURE__ */ o(
+                L,
+                {
+                  date: e,
+                  value: a,
+                  locale: g,
+                  ...B,
+                  ...i.pickersDay
+                }
+              )
+            ),
+            onMonthChange: (e) => v(d.date(e).subtract(1, "month")),
+            onChange: (e) => m ? E(e) : I(e),
             disableHighlightToday: !0,
             reduceAnimations: !0,
             views: ["day"],
-            ...a.calendarPickerRight,
+            ...i.calendarPickerRight,
             components: {
               LeftArrowButton: () => null,
-              ...((w = a.calendarPickerRight) == null ? void 0 : w.components) || {}
+              ...((W = i.calendarPickerRight) == null ? void 0 : W.components) || {}
             }
           },
-          ae
+          b == null ? void 0 : b.toISOString()
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ o(S, { sx: {
+    /* @__PURE__ */ o(A, { sx: {
       borderWidth: 1
-    } }),
-    /* @__PURE__ */ y(re, { variant: "text", fullWidth: !0, children: [
-      /* @__PURE__ */ o(te, { "data-testid": "clear-btn", onClick: oe, ...a.clearButton, children: _ }),
-      !K && /* @__PURE__ */ o(ne, { "data-testid": "submit-btn", onClick: le, disabled: !(n != null && n.start || n != null && n.end), ...a.submitButton, children: Y })
+    }, ...i.divider }),
+    /* @__PURE__ */ k(ie, { variant: "text", fullWidth: !0, ...i.buttonGroup, children: [
+      /* @__PURE__ */ o(te, { "data-testid": "clear-btn", onClick: ne, ...i.clearButton, children: $ }),
+      !Y && /* @__PURE__ */ o(re, { "data-testid": "submit-btn", onClick: ae, disabled: typeof a == "object" ? !(a != null && a.start || a != null && a.end) : a !== void 0, ...i.submitButton, children: q })
     ] })
   ] });
-}
-I.propTypes = {
-  /**
-   * The selected start date for the picker
-   */
-  value: e.oneOfType([e.shape({
-    start: e.string,
-    end: e.string
-  }), e.string, e.number]),
-  /**
-   * The selected end date for the picker
-   */
-  defaultValue: e.oneOfType([e.shape({
-    start: e.string,
-    end: e.string
-  }), e.string, e.number]),
-  /**
-   * Month to display
-   *
-   * Note: Will set left month if double calendar (right calender will be next month after that)
-   */
-  monthDate: e.oneOfType([e.string, e.number]),
-  /**
-   * Set if it should select start or end
-   */
-  range: e.bool,
-  /**
-   * Used to select if it's start or end you should set
-   *
-   * Note: Will alternate between start then end if undefined
-   */
-  rangeValueToChange: e.oneOf(["START", "END"]),
-  /**
-   * Set if highlight today's date should be disabled
-   */
-  disableHighlightToday: e.bool,
-  /**
-   * Set past dates in picker
-   */
-  disablePast: e.bool,
-  /**
-   * Set future dates in picker
-   */
-  disableFuture: e.bool,
-  /**
-   * Locale of calendar picker
-   */
-  locale: e.oneOf(F),
-  /**
-   * Set min date to pick
-   */
-  minDate: e.oneOfType([e.string, e.number]),
-  /**
-   * Set max date time to pick
-   */
-  maxDate: e.oneOfType([e.string, e.number]),
-  /**
-   * Render single or double picker
-   */
-  showDouble: e.bool,
-  /**
-   * Set text for clear button
-   */
-  clearText: e.string,
-  /**
-   * Set text for submit button
-   */
-  submitText: e.string,
-  /**
-   * Submit range after selection
-   */
-  submitOnChange: e.bool,
-  // Callbacks
-  /**
-   * Callback when value changed
-   *
-   * Note: Only triggered when changed to a valid date
-   */
-  onChange: e.func,
-  /**
-   * Callback when month is changed
-   *
-   * Note: will return month from left calender if double
-   */
-  onMonthChange: e.func,
-  /**
-   * Callback when reset button is clicked
-   *
-   */
-  onReset: e.func,
-  /**
-   * Callback when submit button is clicked
-   *
-   */
-  onSubmit: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    LocalizationProvider: e.elementType,
-    Box: e.elementType,
-    CalendarPickerLeft: e.elementType,
-    CalendarPickerRight: e.elementType,
-    PickersDay: e.elementType,
-    Divider: e.elementType,
-    ClearButton: e.elementType,
-    SubmitButton: e.elementType,
-    ButtonGroup: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    localizationProvider: e.instanceOf(Object),
-    box: e.instanceOf(Object),
-    calendarPickerLeft: e.instanceOf(Object),
-    calendarPickerRight: e.instanceOf(Object),
-    pickersDay: e.instanceOf(Object),
-    divider: e.instanceOf(Object),
-    clearButton: e.instanceOf(Object),
-    submitButton: e.instanceOf(Object),
-    buttonGroup: e.instanceOf(Object)
-  })
 };
-I.defaultProps = {
+Pe.defaultProps = {
   value: void 0,
   defaultValue: void 0,
   range: !0,
@@ -389,9 +292,9 @@ I.defaultProps = {
   onMonthChange: () => null,
   onReset: () => null,
   onSubmit: () => null,
-  componentsProps: void 0,
-  components: Oe
+  components: Me,
+  componentsProps: void 0
 };
 export {
-  I as default
+  Pe as default
 };

package/dist/es/general/CalendarPicker/components/PickersDay.d.ts

@@ -0,0 +1,15 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { Dayjs } from 'dayjs';
+import { PickersDayProps } from '@mui/x-date-pickers';
+type CustomPickerDayProps = Omit<PickersDayProps<Dayjs>, 'value'>;
+export interface VdtPickersDayProps extends CustomPickerDayProps {
+    date?: Dayjs;
+    value?: {
+        start?: string;
+        end?: string;
+    } | string | number;
+    locale?: string;
+}
+declare const VdtPickersDay: ForwardRefExoticComponent<Pick<VdtPickersDayProps, keyof VdtPickersDayProps> & RefAttributes<any>>;
+export default VdtPickersDay;