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

package/dist/es/item/ItemTableRow/ItemTableRow.js

@@ -1,138 +1,68 @@
-import { jsxs as R, jsx as r } from "react/jsx-runtime";
-import { useMemo as g, useState as V } from "react";
-import e from "prop-types";
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import { useMemo as A, useState as g } from "react";
 import E from "@mui/material/TableRow";
-import I from "@mui/material/TableCell";
-import M from "@mui/material/Skeleton";
-import S from "@mui/material/Checkbox";
-import { styled as q } from "@mui/material/styles";
-import N from "@vidispine/proptypes";
-import { uuidv4 as P } from "../../_utils/uuidv4.js";
+import M from "@mui/material/TableCell";
+import S from "@mui/material/Skeleton";
+import j from "@mui/material/Checkbox";
+import { styled as I } from "@mui/material/styles";
+import { uuidv4 as q } from "../../_utils/uuidv4.js";
 import "clsx";
-import { getEntityText as U } from "../../entity/_utils/getEntityText.js";
-import z from "../../entity/EntityTableRow/components/EntityTableCellAvatar.js";
-import B from "../../entity/EntityTableRow/components/EntityTableCellCheckbox.js";
-const D = q(E)(({
-  onClick: t
+import { getEntityText as H } from "../../entity/_utils/getEntityText.js";
+import V from "../../entity/EntityTableRow/components/EntityTableCellAvatar.js";
+import z from "../../entity/EntityTableRow/components/EntityTableCellCheckbox.js";
+const B = I(E)(({
+  onClick: o
 }) => ({
-  ...t ? {
+  ...o ? {
     cursor: "pointer"
   } : {}
-})), F = {
-  Root: D,
-  TableCell: I,
-  TableCellAvatar: z,
-  TableCellCheckbox: B,
-  Checkbox: S
-};
-function h({
-  itemType: t,
-  rows: b,
-  defaultValue: s,
-  checked: c,
-  showAvatar: d,
-  avatarVariant: u,
-  isLoading: n,
+})), D = {
+  Root: B,
+  TableCell: M,
+  TableCellAvatar: V,
+  TableCellCheckbox: z,
+  Checkbox: j
+}, F = ({
+  itemType: o,
+  rows: c,
+  defaultValue: n,
+  checked: a,
+  showAvatar: s,
+  avatarVariant: m,
+  isLoading: r,
   onClick: f,
-  onCheck: p,
-  components: v,
-  componentsProps: l
-}) {
+  onCheck: C,
+  components: h,
+  componentsProps: t
+}) => {
   const {
-    Root: k,
-    TableCell: T,
-    TableCellAvatar: x,
-    TableCellCheckbox: y,
-    Checkbox: O
-  } = v, A = g(() => b.map(({
-    value: o
-  } = {}) => U(o, {
-    itemType: t
-  }) || s), [t, s, b]), [j, w] = V(!1), i = c === void 0 ? j : c, m = typeof p != "function" ? void 0 : (o) => {
-    const a = !i;
-    p(o, {
-      value: a,
-      itemType: t
-    }), c === void 0 && w(a);
+    Root: u,
+    TableCell: v,
+    TableCellAvatar: k,
+    TableCellCheckbox: p,
+    Checkbox: x
+  } = h, T = A(() => c.map(({
+    value: e
+  } = {}) => typeof e == "string" ? H(e, {
+    itemType: o
+  }) : e ?? n), [o, n, c]), [R, w] = g(!1), i = a === void 0 ? R : a, b = typeof C != "function" ? void 0 : (e) => {
+    const d = !i;
+    C(e, {
+      value: d,
+      itemType: o
+    }), a === void 0 && w(d);
   };
-  return /* @__PURE__ */ R(k, { hover: !0, selected: i, onClick: typeof f != "function" ? void 0 : (o) => {
-    var a, C;
-    ((a = o == null ? void 0 : o.target) == null ? void 0 : a.nodeName) === "INPUT" && ((C = o == null ? void 0 : o.target) == null ? void 0 : C.checked) !== void 0 || f(o, {
-      itemType: t
+  return /* @__PURE__ */ y(u, { hover: !0, selected: i, onClick: typeof f != "function" ? void 0 : (e) => {
+    e.target instanceof HTMLInputElement || f(e, {
+      itemType: o
     });
-  }, ...l.root, children: [
-    m && /* @__PURE__ */ r(y, { itemType: t, isLoading: n, ...l.tableCellCheckbox, children: /* @__PURE__ */ r(O, { checked: i, onChange: m, ...l.checkbox }) }),
-    d && /* @__PURE__ */ r(x, { itemType: t, isLoading: n, variant: u, ...l.tableCellAvatar }),
-    A.map((o) => /* @__PURE__ */ r(T, { ...l.tableCell, children: n ? /* @__PURE__ */ r(M, {}) : o }, P()))
+  }, ...t.root, children: [
+    b && /* @__PURE__ */ l(p, { itemType: o, isLoading: r, ...t.tableCellCheckbox, children: /* @__PURE__ */ l(x, { checked: i, onChange: b, ...t.checkbox }) }),
+    s && /* @__PURE__ */ l(k, { itemType: o, isLoading: r, avatarVariant: m, ...t.tableCellAvatar }),
+    T.map((e) => /* @__PURE__ */ l(v, { ...t.tableCell, children: r ? /* @__PURE__ */ l(S, {}) : typeof e == "string" && e || "" }, q()))
   ] });
-}
-h.propTypes = {
-  /**
-   * The `ItemType` to show
-   */
-  itemType: N.ItemType,
-  /**
-   * A list of what item content to display in the table rows
-   */
-  rows: e.arrayOf(e.shape({
-    value: e.oneOfType([e.node, e.func])
-  })),
-  /**
-   * Add a default value for all row values that are empty
-   */
-  defaultValue: e.string,
-  /**
-   * Set if avatar should be shown on row
-   */
-  showAvatar: e.bool,
-  /**
-   * Whether the checkbox is checked or not
-   */
-  checked: e.bool,
-  /**
-   * Variant/shapes for the Avatar
-   */
-  avatarVariant: e.oneOf(["circular", "rounded", "square"]),
-  /**
-   * Show skeleton table item as loading state
-   */
-  isLoading: e.bool,
-  // Callbacks
-  /**
-   * A function that handles the item being clicked
-   */
-  onClick: e.func,
-  /**
-   * A function that handles the checkbox being clicked
-   */
-  onCheck: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    TableCell: e.elementType,
-    TableCellAvatar: e.elementType,
-    TableCellCheckbox: e.elementType,
-    Checkbox: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    tableCell: e.instanceOf(Object),
-    tableCellAvatar: e.shape({
-      entityAvatar: e.instanceOf(Object)
-    }),
-    tableCellCheckbox: e.shape({
-      checkbox: e.instanceOf(Object)
-    }),
-    checkbox: e.instanceOf(Object)
-  })
 };
-h.defaultProps = {
+F.defaultProps = {
   itemType: void 0,
   defaultValue: void 0,
   rows: [],
@@ -142,9 +72,9 @@ h.defaultProps = {
   isLoading: !1,
   onClick: void 0,
   onCheck: void 0,
-  components: F,
+  components: D,
   componentsProps: void 0
 };
 export {
-  h as default
+  F as default
 };

package/dist/es/item/ItemTableRow/index.d.ts

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

package/dist/es/item/ItemTableRow/index.js

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

package/dist/es/item/ItemThumbnail/ItemThumbnail.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import { CornerLabelPlacer as VdtCornerLabelPlacer, ScrubLine as VdtScrubLine, BlurredBackground as VdtBlurredBackground } from '../../general';
+import type { PropsFrom, StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledVdtScrubLine: typeof VdtScrubLine;
+declare const StyledVdtCornerLabelPlacer: typeof VdtCornerLabelPlacer;
+declare const StyledVdtBlurredBackground: typeof VdtBlurredBackground;
+type StyledMuiBoxImageType = StyledComponent<typeof MuiBox, {
+    image?: string;
+    cover?: boolean;
+}>;
+declare const StyledMuiBoxImage: StyledMuiBoxImageType;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    ScrubLine: typeof StyledVdtScrubLine;
+    CornerLabelPlacer: typeof StyledVdtCornerLabelPlacer;
+    BlurredBackground: typeof StyledVdtBlurredBackground;
+    ImageBox: typeof StyledMuiBoxImage;
+};
+export interface ItemThumbnailProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Item to show thumbnail for
+     */
+    itemType?: ItemType;
+    /**
+     * The index for which thumbnail to use from the ItemType
+     */
+    thumbnailIndex?: number;
+    /**
+     * Add a placeholder if image is unavailable
+     */
+    placeholderImage?: string;
+    /**
+     * Show a label on the thumbnail
+     */
+    label?: string;
+    /**
+     * Cover the whole width/height of container
+     */
+    cover?: boolean;
+    /**
+     * Whether to show a blurred background behind the thumbnail or not
+     */
+    showBlurredBackground?: boolean;
+    /**
+     * Show a scrub line above the thumbnail
+     */
+    showScrub?: boolean;
+    /**
+     * Set position for the scrub line
+     */
+    scrubPosition?: number;
+    /**
+     * Show a label for the scrub line
+     */
+    scrubLabel?: string;
+    /**
+     * Add event handler when the thumbnail is clicked
+     *
+     * Set `undefined` to disable
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, payload: {
+        itemType: ItemType;
+        thumbnailIndex: number;
+    }) => void;
+    /**
+     * Callback when mouse moves over thumbnail
+     *
+     * e.g. to handle scrubbing
+     */
+    onMouseMove?: PropsFrom<typeof VdtScrubLine>['onMouseMove'];
+    /**
+     * Callback for mouse entering thumbnail
+     *
+     * e.g. to handle scrubbing or showing label/blurred background
+     */
+    onMouseEnter?: PropsFrom<typeof VdtScrubLine>['onMouseEnter'];
+    /**
+     * Callback for mouse leaving thumbnail
+     *
+     * e.g. to handle scrubbing or hiding label/blurred background
+     */
+    onMouseLeave?: PropsFrom<typeof VdtScrubLine>['onMouseLeave'];
+}
+declare const ItemThumbnail: React.FC<ItemThumbnailProps>;
+export default ItemThumbnail;

package/dist/es/item/ItemThumbnail/ItemThumbnail.js

@@ -1,23 +1,22 @@
-import { jsx as i, jsxs as T } from "react/jsx-runtime";
-import e from "prop-types";
-import s from "@mui/material/Box";
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+import c from "@mui/material/Box";
 import { styled as t } from "@mui/material/styles";
-import w from "@vidispine/proptypes";
 import "../../general/AvatarMenu/index.js";
-import O from "../../general/BlurredBackground/index.js";
+import M from "../../general/BlurredBackground/index.js";
 import "../../general/CalendarPicker/index.js";
 import "../../general/CompactBadge/index.js";
 import "../../general/CompactLabel/index.js";
-import j from "../../general/CornerLabelPlacer/index.js";
+import z from "../../general/CornerLabelPlacer/index.js";
 import "../../general/ExpandButton/index.js";
 import "../../general/ImageCollage/index.js";
 import "../../general/MediaIcon/index.js";
 import "../../general/MenuItem/index.js";
-import z from "../../general/ScrubLine/index.js";
+import P from "../../general/ScrubLine/index.js";
 import "../../general/Sort/index.js";
 import "../../general/TablePagination/index.js";
+import "../../general/Form/index.js";
 import "../../general/ThemeContext/ThemeContext.js";
-const R = t(s)(({
+const R = t(c)(({
   onClick: o
 }) => ({
   height: "100%",
@@ -25,26 +24,26 @@ const R = t(s)(({
   ...o && {
     cursor: "pointer"
   }
-})), V = t(z)(() => ({
+})), V = t(P)(() => ({
   position: "relative",
   zIndex: 10
-})), $ = t(j)(() => ({
+})), $ = t(z)(() => ({
   height: "100%",
   width: "100%",
   position: "absolute",
   zIndex: 15,
   top: 0
-})), E = t(O)(() => ({
+})), j = t(M)(() => ({
   height: "100%",
   width: "100%",
   position: "absolute",
   zIndex: 0,
   top: 0
-})), F = t(s, {
+})), E = t(c, {
   shouldForwardProp: (o) => !["image", "cover"].includes(o)
 })(({
   image: o,
-  cover: n
+  cover: r
 }) => ({
   height: "inherit",
   width: "inherit",
@@ -54,141 +53,56 @@ const R = t(s)(({
   background: o ? `url(${o})` : "none",
   backgroundPosition: "center",
   backgroundRepeat: "no-repeat",
-  ...n ? {
+  ...r ? {
     backgroundSize: "cover"
   } : {
     backgroundSize: "contain"
   }
-})), q = {
+})), F = {
   Root: R,
   ScrubLine: V,
   CornerLabelPlacer: $,
-  BlurredBackground: E,
-  ImageBox: F
-};
-function u({
+  BlurredBackground: j,
+  ImageBox: E
+}, T = ({
   itemType: o,
-  thumbnailIndex: n,
-  placeholderImage: p,
-  showBlurredBackground: m,
-  label: b,
-  cover: g,
+  thumbnailIndex: r,
+  placeholderImage: u,
+  showBlurredBackground: s,
+  label: m,
+  cover: p,
   showScrub: h,
-  scrubLabel: f,
-  scrubPosition: B,
-  onClick: l,
+  scrubLabel: b,
+  scrubPosition: g,
+  onClick: d,
   onMouseMove: v,
-  onMouseEnter: y,
-  onMouseLeave: k,
+  onMouseEnter: B,
+  onMouseLeave: f,
   components: x,
-  componentsProps: r
-}) {
-  var d;
+  componentsProps: e
+}) => {
+  var a;
   const {
-    Root: L,
-    ScrubLine: S,
-    BlurredBackground: I,
+    Root: S,
+    ScrubLine: k,
+    BlurredBackground: y,
     ImageBox: C,
-    CornerLabelPlacer: M
+    CornerLabelPlacer: L
   } = x, {
-    thumbnails: c
-  } = o || {}, a = ((d = c == null ? void 0 : c.uri) == null ? void 0 : d[n]) || p;
-  return /* @__PURE__ */ i(L, { onClick: typeof l != "function" ? void 0 : (P) => {
-    l(P, {
+    thumbnails: n
+  } = o || {}, l = ((a = n == null ? void 0 : n.uri) == null ? void 0 : a[r]) || u;
+  return /* @__PURE__ */ i(S, { onClick: typeof d != "function" ? void 0 : (I) => {
+    d(I, {
       itemType: o,
-      thumbnailIndex: n
+      thumbnailIndex: r
     });
-  }, ...r.root, children: /* @__PURE__ */ T(S, { show: h, label: f, position: B, onMouseMove: v, onMouseEnter: y, onMouseLeave: k, ...r.scrubLine, children: [
-    m && /* @__PURE__ */ i(I, { image: a, ...r.blurredBackground }),
-    /* @__PURE__ */ i(C, { component: "div", image: a, cover: g, ...r.imageBox }),
-    /* @__PURE__ */ i(M, { labelBottomRight: b, ...r.cornerLabelPlacer })
+  }, ...e.root, children: /* @__PURE__ */ w(k, { show: h, label: b, position: g, onMouseMove: v, onMouseEnter: B, onMouseLeave: f, ...e.scrubLine, children: [
+    s && /* @__PURE__ */ i(y, { image: l, ...e.blurredBackground }),
+    /* @__PURE__ */ i(C, { component: "div", image: l, cover: p, ...e.imageBox }),
+    /* @__PURE__ */ i(L, { labelBottomRight: m, ...e.cornerLabelPlacer })
   ] }) });
-}
-u.propTypes = {
-  /**
-   * ItemType
-   */
-  itemType: w.ItemType,
-  /**
-   * The index for which thumbnail to use from the ItemType
-   */
-  thumbnailIndex: e.number,
-  /**
-   * Add a placeholder if image is unavailable
-   */
-  placeholderImage: e.string,
-  /**
-   * Show a label on the thumbnail
-   */
-  label: e.string,
-  /**
-   * Cover the whole width/height of container
-   */
-  cover: e.bool,
-  /**
-   * Whether to show a blurred background behind the thumbnail or not
-   */
-  showBlurredBackground: e.bool,
-  /**
-   * Show a scrub line above the thumbnail
-   */
-  showScrub: e.bool,
-  /**
-   * Set position for the scrub line
-   */
-  scrubPosition: e.number,
-  /**
-   * Show a label for the scrub line
-   */
-  scrubLabel: e.string,
-  // Callbacks
-  /**
-   * Add event handler when the thumbnail is clicked
-   *
-   * Set `undefined` to disable
-   */
-  onClick: e.func,
-  /**
-   * Callback when mouse moves over thumbnail
-   *
-   * e.g. to handle scrubbing
-   */
-  onMouseMove: e.func,
-  /**
-   * Callback for mouse entering thumbnail
-   *
-   * e.g. to handle scrubbing or showing label/blurred background
-   */
-  onMouseEnter: e.func,
-  /**
-   * Callback for mouse leaving thumbnail
-   *
-   * e.g. to handle scrubbing or hiding label/blurred background
-   */
-  onMouseLeave: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    ScrubLine: e.elementType,
-    BlurredBackground: e.elementType,
-    ImageBox: e.elementType,
-    CornerLabelPlacer: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    scrubLine: e.instanceOf(Object),
-    blurredBackground: e.instanceOf(Object),
-    imageBox: e.instanceOf(Object),
-    cornerLabelPlacer: e.instanceOf(Object)
-  })
 };
-u.defaultProps = {
+T.defaultProps = {
   itemType: void 0,
   thumbnailIndex: 0,
   label: void 0,
@@ -202,9 +116,9 @@ u.defaultProps = {
   onMouseMove: void 0,
   onMouseEnter: void 0,
   onMouseLeave: void 0,
-  components: q,
+  components: F,
   componentsProps: void 0
 };
 export {
-  u as default
+  T as default
 };

package/dist/es/item/ItemThumbnail/index.d.ts

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

package/dist/es/item/ItemThumbnail/index.js

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

package/dist/es/item/index.d.ts

@@ -0,0 +1,9 @@
+export { default as ItemList } from './ItemList';
+export { default as ItemListItem } from './ItemListItem';
+export { default as ItemThumbnail } from './ItemThumbnail';
+export { default as ItemCard } from './ItemCard';
+export { default as ItemTable } from './ItemTable';
+export { default as ItemTableRow } from './ItemTableRow';
+export { default as ItemPoster } from './ItemPoster';
+export { default as ItemPosterViewer } from './ItemPosterViewer';
+export { default as ItemPosterList } from './ItemPosterList';

package/dist/es/search/SearchFilterForm/SearchFilterForm.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { MetadataFieldType, FacetType, SearchFilterType } from '@vidispine/types';
+import VdtForm from '../../general/Form';
+import useSearchFilterFormInputs from './hooks/UseSearchFilterFormInputs';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiBox;
+    Form: typeof VdtForm;
+};
+export interface SearchFilterFormProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * A VidiCore field definition list to create filter inputs from
+     */
+    fieldList?: MetadataFieldType[];
+    /**
+     * A VidiCore facet list to add options and/or options count for inputs
+     */
+    facetList?: FacetType[];
+    /**
+     * Override input props using field __name__ or __type__ as key
+     *
+     * Note: `name` props has precedence if prop is applicable from both name and type
+     *
+     * E.g. `{ 'vdt_stringField': { label: 'String Field', disabled: true, Component: CheckboxGroupInput } }` or `{ 'string-exact': { ...customInputProps } }`
+     */
+    inputsProps?: {
+        [fieldNameOrType: string]: object;
+    };
+    /**
+     * Add facets as options (if false, only adds facet count for field value enumerations)
+     */
+    includeFacetsAsOptions?: boolean;
+    /**
+     * Map a field data key to an input prop (ignores data keys it can't find on fields)
+     *
+     * E.g. `{ label: 'displayName' }` would add the value from data key 'displayName' as a label prop
+     */
+    dataToPropsMap?: {
+        [propKey: string]: string;
+    };
+    /**
+     * Function for mapping values to filter
+     */
+    mapValuesToFilter?: (values: {
+        [fieldName: string]: any;
+    }, inputs: ReturnType<typeof useSearchFilterFormInputs>) => SearchFilterType[];
+    /**
+     * Callback when filters are cleared (doesn't reset default values)
+     */
+    onClear?: (event: React.SyntheticEvent, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        filter: SearchFilterType[];
+    }) => void;
+    /**
+     * Callback when filters are reset (resets to default values)
+     */
+    onReset?: (event: React.SyntheticEvent, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        filter: SearchFilterType[];
+    }) => void;
+    /**
+     * Callback when filters are changed
+     */
+    onChange?: (event: React.SyntheticEvent | null, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        filter: SearchFilterType[];
+    }) => void;
+    /**
+     * Callback when filters are submitted
+     */
+    onSubmit?: (event: React.BaseSyntheticEvent, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        filter: SearchFilterType[];
+    }) => void;
+    /**
+     * Callback when filters are submitted with errors (invalid values according to form rules)
+     */
+    onError?: PropsFrom<typeof VdtForm>['onError'];
+}
+declare const SearchFilterForm: React.FC<SearchFilterFormProps>;
+export default SearchFilterForm;