@vidispine/vdt-mui 23.2.0-pre.2 → 23.2.0

package/dist/es/general/BlurredBackground/BlurredBackground.js

@@ -0,0 +1,85 @@
+import { jsx as i } from "react/jsx-runtime";
+import o from "prop-types";
+import u from "@mui/material/Box";
+import { styled as l } from "@mui/material/styles";
+const m = l(u, {
+  shouldForwardProp: (r) => !["image", "blur", "grayscale"].includes(r)
+})(({
+  color: r,
+  image: e,
+  blur: t,
+  grayscale: n
+}) => ({
+  height: "100%",
+  width: "100%",
+  backgroundColor: r,
+  backgroundImage: `url(${e})`,
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center",
+  filter: `blur(${Math.max(t, 0)}px) grayscale(${Math.max(n, 0)}%)`
+})), d = {
+  Root: m
+};
+function s({
+  image: r,
+  color: e,
+  blur: t,
+  grayscale: n,
+  components: c,
+  componentsProps: a
+}) {
+  const {
+    Root: p
+  } = c;
+  return /* @__PURE__ */ i(p, { component: "div", image: r, blur: t, grayscale: n, ...a.root, sx: {
+    ...!r && {
+      backgroundColor: e
+    },
+    ...a.root.sx || {}
+  } });
+}
+s.propTypes = {
+  /**
+   * The image uri to show as blurred
+   */
+  image: o.string,
+  /**
+   * Set a blurred background color (works with a sx theme palette string)
+   *
+   * Note: `image` has precedence
+   */
+  color: o.string,
+  /**
+   * Set blur amount (in px)
+   */
+  blur: o.number,
+  /**
+   * Set grayscale amount (in percentage)
+   */
+  grayscale: o.number,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object)
+  })
+};
+s.defaultProps = {
+  image: void 0,
+  color: "primary.main",
+  blur: 20,
+  grayscale: 50,
+  components: d,
+  componentsProps: void 0
+};
+export {
+  s as default
+};

package/dist/es/general/BlurredBackground/index.js

@@ -0,0 +1,11 @@
+import { styled as t } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import d from "./BlurredBackground.js";
+const o = "BlurredBackground", r = `Vdt${o}`, m = n(r)(d), s = t(m, {
+  name: r,
+  overridesResolver: (i, e) => e.root
+})(() => ({}));
+s.displayName = o;
+export {
+  s as default
+};

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

@@ -0,0 +1,397 @@
+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 "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)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "min-content",
+  margin: "auto",
+  minWidth: 300
+})), Pe = u(W, {
+  shouldForwardProp: (r) => r !== "showDouble"
+})(({
+  showDouble: r,
+  views: m
+}) => ({
+  margin: 0,
+  minWidth: 300,
+  maxHeight: "unset",
+  "& .MuiDayPicker-weekDayLabel": {
+    margin: "0 1px"
+  },
+  ...m.length === 1 && m.includes("day") && {
+    "& .MuiPickersCalendarHeader-labelContainer": {
+      pointerEvents: "none"
+    }
+  },
+  ...r && {
+    "& .MuiPickersArrowSwitcher-spacer": {
+      display: "none"
+    },
+    "& .MuiPickersCalendarHeader-root": {
+      paddingLeft: 24,
+      paddingRight: 24,
+      display: "flex",
+      flexDirection: "row-reverse",
+      "& .MuiPickersCalendarHeader-labelContainer": {
+        margin: "auto",
+        "& .MuiPickersCalendarHeader-label": {
+          margin: 0
+        }
+      }
+    }
+  }
+})), ke = u(W, {
+  shouldForwardProp: (r) => r !== "showDouble"
+})(({
+  views: r
+}) => ({
+  margin: 0,
+  minWidth: 300,
+  maxHeight: "unset",
+  "& .MuiDayPicker-weekDayLabel": {
+    margin: "0 1px"
+  },
+  ...r.length === 1 && r.includes("day") && {
+    "& .MuiPickersCalendarHeader-labelContainer": {
+      pointerEvents: "none"
+    }
+  },
+  "& .MuiPickersArrowSwitcher-spacer": {
+    display: "none"
+  },
+  "& .MuiPickersCalendarHeader-root": {
+    paddingLeft: 24,
+    paddingRight: 24,
+    "& .MuiPickersCalendarHeader-labelContainer": {
+      margin: "auto",
+      "& .MuiPickersCalendarHeader-label": {
+        margin: 0
+      }
+    }
+  }
+})), Te = u(he)(() => ({
+  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({
+  value: r,
+  defaultValue: m,
+  range: f,
+  monthDate: s,
+  rangeValueToChange: C,
+  disableHighlightToday: N,
+  disablePast: p,
+  disableFuture: O,
+  minDate: v,
+  maxDate: M,
+  locale: h,
+  showDouble: l,
+  submitOnChange: K,
+  clearText: _,
+  submitText: Y,
+  onMonthChange: $,
+  onChange: c,
+  onReset: q,
+  onSubmit: J,
+  components: Q,
+  componentsProps: a
+}) {
+  var j, w;
+  const {
+    Root: U,
+    LocalizationProvider: X,
+    Box: Z,
+    CalendarPickerLeft: V,
+    CalendarPickerRight: ee,
+    PickersDay: x,
+    Divider: S,
+    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()
+    });
+  }, L = (t) => {
+    i.current = t.toISOString(), c(null, {
+      value: i.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 ? {
+      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
+    });
+  };
+  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: [
+      /* @__PURE__ */ o(
+        V,
+        {
+          defaultCalendarMonth: P,
+          disableHighlightToday: N,
+          disablePast: p,
+          disableFuture: O,
+          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),
+          reduceAnimations: !0,
+          views: ["day", "year"],
+          ...a.calendarPickerLeft,
+          components: {
+            ...l ? {
+              RightArrowButton: () => null
+            } : {},
+            ...((j = a.calendarPickerLeft) == null ? void 0 : j.components) || {}
+          }
+        },
+        ie
+      ),
+      l && /* @__PURE__ */ y(ce, { children: [
+        /* @__PURE__ */ o(S, { flexItem: !0, orientation: "vertical", sx: {
+          borderWidth: 1
+        } }),
+        /* @__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),
+            disableHighlightToday: !0,
+            reduceAnimations: !0,
+            views: ["day"],
+            ...a.calendarPickerRight,
+            components: {
+              LeftArrowButton: () => null,
+              ...((w = a.calendarPickerRight) == null ? void 0 : w.components) || {}
+            }
+          },
+          ae
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ o(S, { 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.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 = {
+  value: void 0,
+  defaultValue: void 0,
+  range: !0,
+  rangeValueToChange: void 0,
+  monthDate: void 0,
+  disableHighlightToday: !1,
+  disablePast: !1,
+  disableFuture: !1,
+  minDate: void 0,
+  maxDate: void 0,
+  showDouble: !1,
+  locale: "en",
+  clearText: "Clear",
+  submitText: "Submit",
+  submitOnChange: !0,
+  onChange: () => null,
+  onMonthChange: () => null,
+  onReset: () => null,
+  onSubmit: () => null,
+  componentsProps: void 0,
+  components: Oe
+};
+export {
+  I as default
+};

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

@@ -0,0 +1,71 @@
+import { jsx as a } from "react/jsx-runtime";
+import y from "dayjs";
+import u from "@mui/material/Box";
+import { styled as b } from "@mui/material/styles";
+import { PickersDay as F } from "@mui/x-date-pickers";
+import { getFirstDayOfWeek as B, getLastDayOfWeek as L, getLastDayOfMonth as P, differenceInDays as g } from "../utils/index.js";
+const h = "50% 0px 0px 50%", k = "0px 50% 50% 0px", W = b(u, {
+  shouldForwardProp: (o) => !["isSelectedDay", "isBetweenSelected", "isSelectedStartEndDay", "borderRadius"].includes(o)
+})(({
+  isSelectedDay: o,
+  isBetweenSelected: t,
+  borderRadius: i
+}) => ({
+  borderRadius: i,
+  ...(o || t) && {
+    backgroundColor: "rgba(66, 165, 245, 0.6)"
+  }
+})), R = b(F, {
+  shouldForwardProp: (o) => !["isSelectedDay", "isBetweenSelected", "isStart", "isEnd"].includes(o)
+})(({
+  isSelectedDay: o,
+  isBetweenSelected: t,
+  isStart: i,
+  isEnd: e,
+  outsideCurrentMonth: n,
+  theme: s
+}) => {
+  const {
+    palette: {
+      mode: c
+    }
+  } = s;
+  return {
+    margin: 0,
+    height: "38px",
+    width: "38px",
+    backgroundColor: "transparent",
+    ...o && {
+      backgroundColor: "rgb(25, 118, 210)",
+      "&:hover, &:focus": {
+        backgroundColor: "rgb(21, 103, 184)"
+      },
+      fontWeight: 600,
+      ...(i || e) && c === "light" && {
+        color: "#fff"
+      }
+    },
+    ...(t || n) && {
+      backgroundColor: "transparent"
+    },
+    ...n && {
+      pointerEvents: "none"
+    }
+  };
+});
+function U({
+  date: o,
+  value: t,
+  locale: i,
+  ...e
+}) {
+  const n = t != null && t.start ? y(t == null ? void 0 : t.start).toDate() : void 0, s = t != null && t.end ? y(t == null ? void 0 : t.end).toDate() : void 0, c = t && typeof t == "string" ? y(t).toDate() : void 0, r = o.toDate(), x = B({
+    locale: i
+  }) === r.getDay(), E = L({
+    locale: i
+  }) === r.getDay(), p = (r == null ? void 0 : r.getDate()) === 1, w = P(r) === (r == null ? void 0 : r.getDate()), S = x || p, m = E || w, O = n && g(r, n) === 0 || s && g(r, s) === 0 || c && g(r, c) === 0, d = +n == +r, f = +s == +r, D = r > n && r < s, C = (() => c || (d || !n) && (f || !s) || S && m && (D || d || f) ? "50%" : S ? f ? "50%" : h : m ? d ? "50%" : k : d ? h : f ? k : D ? "unset" : "50%")();
+  return e != null && e.outsideCurrentMonth ? /* @__PURE__ */ a(R, { ...e }) : /* @__PURE__ */ a(W, { isSelectedDay: O, isBetweenSelected: D, borderRadius: C, children: /* @__PURE__ */ a(R, { ...e, isSelectedDay: O, isBetweenSelected: D, isStart: d, isEnd: f }) });
+}
+export {
+  U as default
+};

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

@@ -0,0 +1,11 @@
+import { styled as t } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import m from "./CalendarPicker.js";
+const e = "CalendarPicker", o = `Vdt${e}`, i = n(o)(m), s = t(i, {
+  name: o,
+  overridesResolver: (a, r) => r.root
+})(() => ({}));
+s.displayName = e;
+export {
+  s as default
+};

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

@@ -0,0 +1,17 @@
+import t from "dayjs";
+import o from "dayjs/plugin/localeData";
+t.extend(o);
+const l = (e, a) => (
+  // Get difference without accounting for time
+  t(e).diff(t(a), "day")
+), n = ({
+  locale: e
+}) => t().locale(e).localeData().firstDayOfWeek(), r = ({
+  locale: e
+}) => t().locale(e).localeData().firstDayOfWeek() + 6 === 6 ? 6 : 0, f = (e) => new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate();
+export {
+  l as differenceInDays,
+  n as getFirstDayOfWeek,
+  f as getLastDayOfMonth,
+  r as getLastDayOfWeek
+};

package/dist/es/general/CompactBadge/CompactBadge.js

@@ -0,0 +1,65 @@
+import { jsx as i } from "react/jsx-runtime";
+import o from "prop-types";
+import s from "@mui/material/Box";
+import a from "@mui/material/Typography";
+import { styled as m } from "@mui/material/styles";
+const d = m(s)(({
+  theme: e
+}) => ({
+  height: "1rem",
+  borderColor: e.palette.primary.main,
+  borderWidth: 1.45,
+  borderStyle: "solid",
+  backgroundColor: e.palette.mode === "light" ? "unset" : "rgba(0, 0, 0, .15)",
+  padding: "0 4px",
+  borderRadius: 2.5,
+  whiteSpace: "nowrap",
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeight: 900,
+  fontSize: "0.7rem",
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  minWidth: 32,
+  textAlign: "center",
+  userSelect: "none"
+})), c = {
+  Root: d,
+  Badge: a
+};
+function t({
+  text: e,
+  components: r,
+  componentsProps: n
+}) {
+  const {
+    Root: p
+  } = r;
+  return /* @__PURE__ */ i(p, { component: "span", ...n.root, children: e });
+}
+t.propTypes = {
+  /**
+   * Text to show as badge
+   */
+  text: o.string,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object)
+  })
+};
+t.defaultProps = {
+  text: void 0,
+  components: c,
+  componentsProps: void 0
+};
+export {
+  t as default
+};

package/dist/es/general/CompactBadge/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as m } from "../../_utils/withOverrides.js";
+import n from "./CompactBadge.js";
+const o = "CompactBadge", e = `Vdt${o}`, s = m(e)(n), a = r(s, {
+  name: e,
+  overridesResolver: (d, t) => t.root
+})(() => ({}));
+a.displayName = o;
+export {
+  a as default
+};