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

package/dist/es/general/ExpandButton/ExpandButton.js

@@ -1,81 +1,52 @@
 import { jsx as r } from "react/jsx-runtime";
-import o from "prop-types";
-import l from "@mui/icons-material/esm/ExpandMore";
-import m from "@mui/material/Box";
-import f from "@mui/material/IconButton";
+import u from "@mui/icons-material/esm/ExpandMore";
+import l from "@mui/material/Box";
+import m from "@mui/material/IconButton";
 import { styled as i } from "@mui/material/styles";
-const x = i(m)(() => ({
+const p = i(l)(() => ({
   height: "100%",
   display: "flex",
   alignItems: "flex-end"
-})), B = i(f, {
-  shouldForwardProp: (t) => t !== "expanded"
+})), f = i(m, {
+  shouldForwardProp: (o) => o !== "expanded"
 })(({
-  theme: t,
-  expanded: n
+  theme: o,
+  expanded: t
 }) => ({
   marginLeft: "auto",
-  transition: t.transitions.create("transform", {
-    duration: t.transitions.duration.shortest
+  transition: o.transitions.create("transform", {
+    duration: o.transitions.duration.shortest
   }),
-  ...n ? {
+  ...t ? {
     transform: "rotate(180deg)"
   } : {}
-})), I = i(l)(() => ({
+})), x = i(u)(() => ({
   transition: "color .2s ease-out"
-})), y = {
-  Root: x,
-  IconButton: B,
-  Icon: I
-};
-function c({
-  expanded: t,
-  onClick: n,
-  components: s,
-  componentsProps: e
-}) {
+})), B = {
+  Root: p,
+  IconButton: f,
+  Icon: x
+}, I = ({
+  expanded: o,
+  onClick: t,
+  components: e,
+  componentsProps: n
+}) => {
   const {
     Root: a,
-    IconButton: p,
-    Icon: d
-  } = s;
-  return /* @__PURE__ */ r(a, { component: "span", ...e.root, children: /* @__PURE__ */ r(p, { expanded: t, onClick: (u) => n(u, {
-    value: !t
-  }), ...e.iconButton, children: /* @__PURE__ */ r(d, { ...e.icon }) }) });
-}
-c.propTypes = {
-  /**
-   * Set if expand button is expanded or not
-   */
-  expanded: o.bool,
-  /**
-   * Callback for clicking expand button
-   */
-  onClick: o.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType,
-    IconButton: o.elementType,
-    Icon: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object),
-    iconButton: o.instanceOf(Object),
-    icon: o.instanceOf(Object)
-  })
+    IconButton: s,
+    Icon: c
+  } = e;
+  return /* @__PURE__ */ r(a, { component: "span", ...n.root, children: /* @__PURE__ */ r(s, { expanded: o, onClick: (d) => t(d, {
+    value: !o
+  }), ...n.iconButton, children: /* @__PURE__ */ r(c, { ...n.icon }) }) });
 };
-c.defaultProps = {
+I.defaultProps = {
   expanded: !1,
   onClick: void 0,
-  components: y,
+  components: B,
   componentsProps: void 0
 };
 export {
-  c as default
+  I as default
 };

package/dist/es/general/ExpandButton/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './ExpandButton';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

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

@@ -4,7 +4,7 @@ import m from "./ExpandButton.js";
 const o = "ExpandButton", t = `Vdt${o}`, s = r(t)(m), d = n(s, {
   name: t,
   overridesResolver: (p, e) => e.root
-})(() => ({}));
+})({});
 d.displayName = o;
 export {
   d as default

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

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+import { Controller as ReactHookFormController, FieldErrorsImpl, UseFormReturn } from 'react-hook-form';
+import { Box as MuiBox, Button as MuiButton, ButtonGroup as MuiButtonGroup } from '@mui/material';
+import type { WithOverrideProps } from '../../_types';
+import type { UseControllerProps, UseFormProps } from 'react-hook-form';
+declare const StyledMuiButtonGroup: typeof MuiButtonGroup;
+declare const StyledMuiBoxInputContainer: typeof MuiBox;
+declare const defaultComponents: {
+    Root: typeof MuiBox;
+    InputContainer: typeof StyledMuiBoxInputContainer;
+    Controller: typeof ReactHookFormController;
+    ButtonGroup: typeof StyledMuiButtonGroup;
+    ClearButton: typeof MuiButton;
+    ResetButton: typeof MuiButton;
+    SubmitButton: typeof MuiButton;
+};
+type ReactHookFormRules = UseControllerProps['rules'];
+type CommonInputProps = {
+    name?: string;
+    label?: string;
+    value?: any;
+    defaultValue?: any;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange?: (event: React.SyntheticEvent | null, payload: {
+        value: any;
+        [key: string]: any;
+    }) => void;
+    onBlur?: (event: React.SyntheticEvent | null, payload: {
+        value: any;
+        [key: string]: any;
+    }) => void;
+    onFocus?: (event: React.SyntheticEvent | null, payload: {
+        value: any;
+        [key: string]: any;
+    }) => void;
+    options?: any[];
+    placeholder?: string;
+    fullWidth?: boolean;
+    variant?: string;
+    size?: string;
+    orientation?: string;
+    multiple?: boolean;
+    labelPlacement?: string;
+    min?: any;
+    max?: any;
+    type?: string;
+    range?: boolean;
+    locale?: string;
+    justifyContent?: string;
+    submitOnChange?: boolean;
+    onSubmit?: (event: React.SyntheticEvent | null, payload: {
+        value: any;
+        [key: string]: any;
+    }) => void;
+};
+type Input<TComponent extends React.FC<CommonInputProps> = React.FC<CommonInputProps>> = TComponent extends React.FC<infer Props> ? {
+    Component: TComponent;
+    rules?: ReactHookFormRules;
+} & Props & {
+    [key: string]: any;
+} : never;
+export interface FormProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Inputs to display inside form
+     */
+    inputs?: Input[];
+    /**
+     * Add general input props (added to all input components)
+     */
+    inputProps?: CommonInputProps & {
+        [key: string]: any;
+    };
+    /**
+     * Add props to react-hook-form useForm hook
+     */
+    formProps?: UseFormProps;
+    /**
+     * Retrieve what's returned from useForm as function props
+     *
+     * _e.g. store in a "ref" to interact with the form_
+     */
+    formReturn?: (props: UseFormReturn) => void;
+    /**
+     * Set variant of filter inputs
+     */
+    variant?: 'standard' | 'outlined' | 'filled';
+    /**
+     * Set size of filter inputs
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Set clear button text
+     */
+    clearText?: string;
+    /**
+     * Set reset button text
+     */
+    resetText?: string;
+    /**
+     * Set submit button text
+     */
+    submitText?: string;
+    /**
+     * Callback when all filters are cleared from values
+     */
+    onClear?: (event: React.SyntheticEvent, values: {
+        [inputName: string]: [] | null;
+    }) => void;
+    /**
+     * Callback when filters are reset to default values
+     */
+    onReset?: (event: React.SyntheticEvent, values: {
+        [inputName: string]: any;
+    }) => void;
+    /**
+     * Callback when some field has changed value
+     */
+    onChange?: (event: React.SyntheticEvent, values: {
+        [inputName: string]: any;
+    }) => void;
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit?: (event: React.BaseSyntheticEvent, values: {
+        [inputName: string]: any;
+    }) => void;
+    /**
+     * Callback when form has error (invalid values)
+     */
+    onError?: (event: React.BaseSyntheticEvent, errors: Partial<FieldErrorsImpl<{
+        [x: string]: any;
+    }>>) => void;
+}
+declare const Form: React.FC<FormProps>;
+export default Form;

package/dist/es/general/Form/Form.js

@@ -1,217 +1,136 @@
-import { jsxs as R, jsx as l } from "react/jsx-runtime";
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
 import { useRef as tt, useEffect as et } from "react";
-import t from "prop-types";
-import { useForm as nt, Controller as ot } from "react-hook-form";
-import V from "@mui/material/Box";
+import { useForm as ot, Controller as nt } from "react-hook-form";
+import G from "@mui/material/Box";
 import B from "@mui/material/Button";
-import rt from "@mui/material/ButtonGroup";
-import { styled as S } from "@mui/material/styles";
-const ut = S(rt)(({
+import ut from "@mui/material/ButtonGroup";
+import { styled as M } from "@mui/material/styles";
+const rt = M(ut)(({
   theme: o
 }) => ({
   marginTop: o.spacing(2),
   marginBottom: o.spacing(2),
   display: "flex",
   justifyContent: "center"
-})), it = S(V)(({
+})), it = M(G)(({
   theme: o
 }) => ({
   "&:not(:first-of-type)": {
     paddingTop: o.spacing(2)
   }
 })), at = {
-  Root: V,
+  Root: G,
   InputContainer: it,
-  Controller: ot,
-  ButtonGroup: ut,
+  Controller: nt,
+  ButtonGroup: rt,
   ClearButton: B,
   ResetButton: B,
   SubmitButton: B
-};
-function v({
+}, lt = ({
   inputs: o,
-  inputProps: G,
-  formProps: k,
-  size: y,
+  inputProps: T,
+  formProps: j,
+  formReturn: C,
+  size: h,
   variant: E,
-  clearText: M,
-  resetText: I,
-  submitText: q,
-  onClear: s,
-  onReset: f,
-  onChange: d,
-  onSubmit: p,
-  onError: O,
-  components: D,
-  componentsProps: r
-}) {
+  clearText: q,
+  resetText: D,
+  submitText: F,
+  onClear: d,
+  onReset: c,
+  onChange: f,
+  onSubmit: s,
+  onError: y,
+  components: I,
+  componentsProps: n
+}) => {
   const {
-    Root: F,
-    InputContainer: P,
-    Controller: w,
-    ButtonGroup: z,
-    ClearButton: W,
-    ResetButton: _,
-    SubmitButton: $
-  } = D, C = tt(), h = ({
-    multiple: e,
-    range: n
-  }) => e || n ? [] : null, A = o.reduce((e, {
-    name: n,
-    defaultValue: i,
-    ...a
+    Root: w,
+    InputContainer: O,
+    Controller: W,
+    ButtonGroup: _,
+    ClearButton: $,
+    ResetButton: z,
+    SubmitButton: A
+  } = I, b = tt(), g = ({
+    multiple: t,
+    range: e
+  }) => t || e ? [] : null, H = o.reduce((t, {
+    name: e,
+    defaultValue: r,
+    ...i
   }) => ({
-    ...e,
-    [n]: i || h(a)
-  }), {}), {
-    handleSubmit: H,
-    control: J,
-    reset: T,
-    watch: g,
-    formState: c
-  } = nt({
-    defaultValues: A,
-    ...k || {}
-  }), {
-    defaultValues: j
-  } = c, K = Object.keys((c == null ? void 0 : c.errors) || {}).length > 0, L = async (e) => {
-    const n = o.reduce((i, {
-      name: a,
-      defaultValue: U,
+    ...t,
+    [e]: r || g(i)
+  }), {}), x = ot({
+    defaultValues: H,
+    ...j || {}
+  });
+  C && C(x);
+  const {
+    handleSubmit: J,
+    control: K,
+    reset: R,
+    watch: V,
+    formState: l
+  } = x, {
+    defaultValues: v
+  } = l, L = Object.keys((l == null ? void 0 : l.errors) || {}).length > 0, N = (t) => {
+    const e = o.reduce((r, {
+      name: i,
+      defaultValue: X,
       ...m
     }) => ({
-      ...i,
-      [a]: h(m)
+      ...r,
+      [i]: g(m)
     }), {});
-    s && s(e, n), T(n, {
+    d && d(t, e), R(e, {
       keepDefaultValues: !0
     });
-  }, N = async (e) => {
-    f && f(e, j), T(j, {
+  }, Q = (t) => {
+    c && c(t, v), R(v, {
       keepDefaultValues: !0
     });
   };
   et(() => {
-    const e = d ? g((n) => d(C.current, n)) : void 0;
-    return () => e == null ? void 0 : e.unsubscribe();
-  }, [d, g]);
-  const Q = (e) => {
-    var n;
-    return typeof (e == null ? void 0 : e.required) == "string" || ((n = e == null ? void 0 : e.required) == null ? void 0 : n.value) === !0;
-  };
-  return /* @__PURE__ */ R(F, { component: "form", onSubmit: H((e, n) => typeof p == "function" && p(n, e), (e, n) => typeof O == "function" && O(n, e)), ...r.root, children: [
+    const t = f ? V((e) => f(b.current, e)) : void 0;
+    return () => t == null ? void 0 : t.unsubscribe();
+  }, [f, V]);
+  const U = (t) => typeof (t == null ? void 0 : t.required) == "string" || (t == null ? void 0 : t.required) === !0;
+  return /* @__PURE__ */ k(w, { component: "form", onSubmit: J((t, e) => typeof s == "function" && s(e, t), (t, e) => typeof y == "function" && y(e, t)), ...n.root, children: [
     o == null ? void 0 : o.map(({
-      Component: e,
-      name: n,
-      rules: i,
-      label: a,
-      defaultValue: U,
+      Component: t,
+      name: e,
+      rules: r,
+      label: i,
+      defaultValue: X,
       ...m
-    }) => /* @__PURE__ */ l(P, { ...r.inputContainer, children: /* @__PURE__ */ l(w, { control: J, name: n, rules: i, render: ({
+    }) => /* @__PURE__ */ a(O, { ...n.inputContainer, children: /* @__PURE__ */ a(W, { control: K, name: e, rules: r, render: ({
       field: {
-        onChange: X,
-        ...Y
+        onChange: Y,
+        ...Z
       },
       formState: {
-        errors: b
+        errors: p
       }
     }) => {
-      var x;
-      return /* @__PURE__ */ l(e, { onChange: (Z, u) => {
-        C.current = Z, X((u == null ? void 0 : u.value) !== void 0 ? u == null ? void 0 : u.value : u);
-      }, error: (x = b == null ? void 0 : b[n]) == null ? void 0 : x.message, size: y, variant: E, label: Q(i) ? `${a} *` : a, ...Y, ...G || {}, ...m });
-    }, ...r.controller }) }, n)),
-    /* @__PURE__ */ R(z, { variant: "text", size: y, fullWidth: !0, ...r.buttonGroup, children: [
-      s && /* @__PURE__ */ l(W, { onClick: L, ...r.clearButton, children: M }),
-      f && /* @__PURE__ */ l(_, { onClick: N, ...r.resetButton, children: I }),
-      p && /* @__PURE__ */ l($, { type: "submit", disabled: K, ...r.submitButton, children: q })
+      var S;
+      return /* @__PURE__ */ a(t, { onChange: (P, u) => {
+        b.current = P, Y((u == null ? void 0 : u.value) !== void 0 ? u == null ? void 0 : u.value : u);
+      }, error: (S = p == null ? void 0 : p[e]) == null ? void 0 : S.message, size: h, variant: E, label: U(r) ? `${i} *` : i, ...Z, ...T || {}, ...m });
+    }, ...n.controller }) }, e)),
+    /* @__PURE__ */ k(_, { variant: "text", size: h, fullWidth: !0, ...n.buttonGroup, children: [
+      d && /* @__PURE__ */ a($, { onClick: N, ...n.clearButton, children: q }),
+      c && /* @__PURE__ */ a(z, { onClick: Q, ...n.resetButton, children: D }),
+      s && /* @__PURE__ */ a(A, { type: "submit", disabled: L, ...n.submitButton, children: F })
     ] })
   ] });
-}
-v.propTypes = {
-  /**
-   * A VidiCore field list to add as filter inputs
-   */
-  inputs: t.arrayOf(t.instanceOf(Object)),
-  /**
-   * Add general input props (applied to all components)
-   */
-  inputProps: t.instanceOf(Object),
-  /**
-   * Add props to react-hook-form useForm hook
-   */
-  formProps: t.instanceOf(Object),
-  /**
-   * Set variant of filter inputs
-   */
-  variant: t.oneOf(["standard", "outlined", "filled"]),
-  /**
-   * Set size of filter inputs
-   */
-  size: t.oneOf(["medium", "small"]),
-  /**
-   * Set clear button text
-   */
-  clearText: t.string,
-  /**
-   * Set reset button text
-   */
-  resetText: t.string,
-  /**
-   * Set submit button text
-   */
-  submitText: t.string,
-  // Callbacks
-  /**
-   * Callback when all filters are cleared from values
-   */
-  onClear: t.func,
-  /**
-   * Callback when filters are reset to default values
-   */
-  onReset: t.func,
-  /**
-   * Callback when some field has changed value
-   */
-  onChange: t.func,
-  /**
-   * Callback when form is submitted
-   */
-  onSubmit: t.func,
-  /**
-   * Callback when form has error (invalid values)
-   */
-  onError: t.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: t.shape({
-    Root: t.elementType,
-    InputContainer: t.elementType,
-    Controller: t.elementType,
-    ButtonGroup: t.elementType,
-    ClearButton: t.elementType,
-    ResetButton: t.elementType,
-    SubmitButton: t.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: t.shape({
-    root: t.instanceOf(Object),
-    inputContainer: t.instanceOf(Object),
-    controller: t.instanceOf(Object),
-    buttonGroup: t.instanceOf(Object),
-    clearButton: t.instanceOf(Object),
-    resetButton: t.instanceOf(Object),
-    submitButton: t.instanceOf(Object)
-  })
 };
-v.defaultProps = {
+lt.defaultProps = {
   inputs: [],
   inputProps: void 0,
   formProps: void 0,
+  formReturn: void 0,
   variant: "standard",
   size: "medium",
   clearText: "Clear",
@@ -226,5 +145,5 @@ v.defaultProps = {
   componentsProps: void 0
 };
 export {
-  v as default
+  lt as default
 };

package/dist/es/general/Form/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './Form';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

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

@@ -4,7 +4,7 @@ import n from "./Form.js";
 const o = "Form", e = `Vdt${o}`, s = m(e)(n), i = r(s, {
   name: e,
   overridesResolver: (d, t) => t.root
-})(() => ({}));
+})({});
 i.displayName = o;
 export {
   i as default

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

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import VdtBlurredBackground from '../BlurredBackground';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledMuiBoxContainer: typeof MuiBox;
+type StyledMuiBoxImageType = StyledComponent<typeof MuiBox<'img'>, {
+    amountOfImages?: number;
+    showSingleStretched?: boolean;
+}>;
+declare const StyledMuiBoxImage: StyledMuiBoxImageType;
+declare const StyledVdtBlurredBackground: typeof VdtBlurredBackground;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    ContainerBox: typeof StyledMuiBoxContainer;
+    ImageBox: typeof StyledMuiBoxImage;
+    BlurredBackground: typeof StyledVdtBlurredBackground;
+};
+export interface ImageCollageProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Image urls to show
+     */
+    images: Array<{
+        src: string;
+        alt?: string;
+    }>;
+    /**
+     * Max amount of columns to display
+     */
+    maxColumns: number;
+    /**
+     * Max amount of images to display
+     */
+    maxImages: number;
+    /**
+     * Whether to stretch full width or follow height for single image
+     */
+    showSingleStretched: boolean;
+    /**
+     * Whether to stretch full width or follow height for last images
+     */
+    showLastRowStretched: boolean;
+    /**
+     * Show blurred backgrounds behind the images
+     */
+    showBlurredBackground: boolean;
+    /**
+     * Callback for error
+     */
+    onError: any;
+}
+declare const ImageCollage: React.FC<ImageCollageProps>;
+export default ImageCollage;