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

package/dist/es/inputs/TextInput/TextInput.js

@@ -1,134 +1,48 @@
-import { jsx as j } from "react/jsx-runtime";
-import e from "prop-types";
-import q from "@mui/material/TextField";
-const z = {
-  Root: q
-};
-function u({
-  name: n,
-  label: p,
+import { jsx as R } from "react/jsx-runtime";
+import j from "@mui/material/TextField";
+const k = {
+  Root: j
+}, q = ({
+  name: t,
+  label: s,
   value: l,
-  defaultValue: f,
-  helperText: r,
-  error: t,
-  required: m,
-  disabled: c,
+  defaultValue: u,
+  helperText: n,
+  error: e,
+  required: v,
+  disabled: m,
   placeholder: i,
-  fullWidth: v,
-  multiline: h,
-  variant: g,
-  size: b,
-  type: x,
-  onChange: T,
-  onBlur: C,
-  onFocus: y,
-  components: O,
-  componentsProps: a
-}) {
+  fullWidth: p,
+  multiline: f,
+  variant: c,
+  size: x,
+  type: h,
+  onChange: C,
+  onBlur: T,
+  onFocus: b,
+  components: g,
+  componentsProps: r
+}) => {
   const {
-    Root: P
-  } = O, F = (o) => {
-    var d;
-    T(o, {
-      value: (d = o == null ? void 0 : o.target) == null ? void 0 : d.value
+    Root: F
+  } = g, I = (o) => {
+    var a;
+    C(o, {
+      value: (a = o == null ? void 0 : o.target) == null ? void 0 : a.value
     });
-  }, I = l !== void 0, s = !!t, R = (t || "").trim();
-  return /* @__PURE__ */ j(P, { id: n, name: n, label: p, ...I ? {
+  }, P = l !== void 0, d = !!e, L = (e || "").trim();
+  return /* @__PURE__ */ R(F, { id: t, name: t, label: s, ...P ? {
     value: l || ""
   } : {
-    defaultValue: f
-  }, helperText: (R || r) && s ? t : r, error: s, required: m, disabled: c, fullWidth: v, multiline: h, variant: g, size: b, type: x, placeholder: i, autoComplete: "off", onChange: F, onBlur: C, onFocus: y, InputLabelProps: {
+    defaultValue: u
+  }, helperText: (L || n) && d ? e : n, error: d, required: v, disabled: m, fullWidth: p, multiline: f, variant: c, size: x, type: h, placeholder: i, autoComplete: "off", onChange: I, onBlur: T, onFocus: b, InputLabelProps: {
     ...i !== void 0 ? {
       shrink: !0
     } : {},
-    ...a.root.InputLabelProps || {}
-  }, ...a.root });
-}
-u.propTypes = {
-  /**
-   * Name for input
-   */
-  name: e.string,
-  /**
-   * Label for input
-   */
-  label: e.string,
-  /**
-   * Value of input
-   */
-  value: e.string,
-  /**
-   * Default value of input (use if uncontrolled)
-   */
-  defaultValue: e.string,
-  /**
-   * Help text underneath input
-   */
-  helperText: e.string,
-  /**
-   * An error message to display underneath input component
-   */
-  error: e.string,
-  /**
-   * Set if required
-   */
-  required: e.bool,
-  /**
-   * Set if disabled
-   */
-  disabled: e.bool,
-  /**
-   * Set if input should be full width
-   */
-  fullWidth: e.bool,
-  /**
-   * Set if multiline (use text area)
-   */
-  multiline: e.bool,
-  /**
-   * Set variant of input
-   */
-  variant: e.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Set size of input
-   */
-  size: e.oneOf(["medium", "small"]),
-  /**
-   * Set type of text input
-   */
-  type: e.oneOf(["text", "email", "password", "search", "tel", "url"]),
-  /**
-   * Set placeholder for input
-   */
-  placeholder: e.string,
-  // Callbacks
-  /**
-   * Callback when value changed
-   */
-  onChange: e.func,
-  /**
-   * Callback when input is blurred
-   */
-  onBlur: e.func,
-  /**
-   * Callback when input is focused
-   */
-  onFocus: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object)
-  })
+    ...r.root.InputLabelProps || {}
+  }, ...r.root });
 };
-u.defaultProps = {
+q.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -146,9 +60,9 @@ u.defaultProps = {
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: z,
+  components: k,
   componentsProps: void 0
 };
 export {
-  u as default
+  q as default
 };

package/dist/es/inputs/TextInput/index.d.ts

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

package/dist/es/inputs/TextInput/index.js

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

package/dist/es/inputs/_components/FormControlLabel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material';
+export interface FormControlLabelProps extends Omit<MuiFormControlLabelProps, 'label'> {
+    label?: string;
+    count?: number | string;
+    size?: 'small' | 'medium';
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const FormControlLabel: React.FC<FormControlLabelProps>;
+export default FormControlLabel;

package/dist/es/inputs/_components/FormControlLabel.js

@@ -4,57 +4,57 @@ import i from "@mui/material/FormControlLabel";
 import n from "@mui/material/Typography";
 import s from "@mui/material/Box";
 import { styled as d } from "@mui/material/styles";
-const c = d(i, {})(({
-  theme: t,
-  size: o,
-  labelPlacement: r,
-  orientation: e
+const c = d(i)(({
+  theme: e,
+  labelPlacement: o,
+  size: t,
+  orientation: r
 }) => ({
-  ...e === "vertical" && {
+  ...r === "vertical" && {
     width: "inherit",
     margin: 0
   },
   "& .VdtFormControlLabel-box": {
     display: "flex",
     maxWidth: "100%",
-    ...e === "vertical" && {
-      ...["start", "end"].includes(r) && {
+    ...r === "vertical" && {
+      ...["start", "end"].includes(o) && {
         width: "100%",
         justifyContent: "space-between"
       }
     }
   },
   "& .VdtFormControlLabel-label": {
-    ...o === "small" ? {
+    ...t === "small" ? {
       fontSize: "0.8rem"
     } : {}
   },
   "& .VdtFormControlLabel-count": {
-    marginLeft: t.spacing(1),
+    marginLeft: e.spacing(1),
     alignSelf: "center",
-    ...o === "small" && {
+    ...t === "small" && {
       fontSize: "0.8rem"
     },
-    ...o === "medium" && {
+    ...t === "medium" && {
       lineHeight: 1.7
     }
   }
-}));
-function h({
-  label: t,
+})), p = ({
+  label: e,
   count: o,
-  ...r
-}) {
-  const e = m(() => /* @__PURE__ */ l(s, { className: "VdtFormControlLabel-box", children: [
-    /* @__PURE__ */ a(n, { className: "VdtFormControlLabel-label", component: "span", children: t }),
+  ...t
+}) => {
+  const r = m(() => /* @__PURE__ */ l(s, { className: "VdtFormControlLabel-box", children: [
+    /* @__PURE__ */ a(n, { className: "VdtFormControlLabel-label", component: "span", children: e }),
     o && /* @__PURE__ */ l(n, { className: "VdtFormControlLabel-count", component: "span", variant: "body2", color: "text.secondary", children: [
       "(",
       o,
       ")"
     ] })
-  ] }), [o, t]);
-  return /* @__PURE__ */ a(c, { label: e(), disableTypography: !0, ...r });
-}
+  ] }), [o, e]);
+  return /* @__PURE__ */ a(c, { label: r(), disableTypography: !0, ...t });
+};
+p.defaultProps = {};
 export {
-  h as default
+  p as default
 };

package/dist/es/inputs/_components/MenuItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MenuItemProps as MuiMenuItemProps } from '@mui/material';
+export interface MenuItemProps extends Omit<MuiMenuItemProps, 'onClick'> {
+    label?: string;
+    count?: number | string;
+    onClick?: (event: React.MouseEvent<HTMLLIElement>, payload: {
+        value: string | number | readonly string[];
+    }) => void;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+export default MenuItem;

package/dist/es/inputs/_components/MenuItem.js

@@ -1,23 +1,24 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
 import a from "@mui/material/MenuItem";
-import s from "@mui/material/ListItemText";
+import f from "@mui/material/ListItemText";
 import l from "@mui/material/Typography";
-function u({
+const p = ({
   value: o,
-  label: d,
+  label: n,
   count: t,
   selected: r,
   onClick: e,
   ...i
-}) {
+}) => {
   const m = typeof e != "function" ? void 0 : (c) => e(c, {
     value: o
   });
-  return /* @__PURE__ */ f(a, { value: o, selected: r !== void 0 ? r : i["aria-selected"], onClick: m, ...i, children: [
-    /* @__PURE__ */ n(s, { children: d || o }),
-    t !== void 0 && /* @__PURE__ */ n(l, { variant: "body2", color: "text.secondary", children: t })
+  return /* @__PURE__ */ s(a, { value: o, selected: r !== void 0 ? r : !!i["aria-selected"], onClick: m, ...i, children: [
+    /* @__PURE__ */ d(f, { children: n || o }),
+    t !== void 0 && /* @__PURE__ */ d(l, { variant: "body2", color: "text.secondary", children: t })
   ] });
-}
+};
+p.defaultProps = {};
 export {
-  u as default
+  p as default
 };

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

@@ -0,0 +1,12 @@
+export { default as BasicDateTimeInput } from './BasicDateTimeInput';
+export { default as BooleanInput } from './BooleanInput';
+export { default as CheckboxGroupInput } from './CheckboxGroupInput';
+export { default as DateRangeInput } from './DateRangeInput';
+export { default as DateTimeInput } from './DateTimeInput';
+export { default as MaskedTextInput } from './MaskedTextInput';
+export { default as NumberInput } from './NumberInput';
+export { default as RadioGroupInput } from './RadioGroupInput';
+export { default as SelectInput } from './SelectInput';
+export { default as SliderInput } from './SliderInput';
+export { default as TagInput } from './TagInput';
+export { default as TextInput } from './TextInput';

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

@@ -0,0 +1,165 @@
+/// <reference types="react" />
+import { CardActionArea as MuiCardActionArea, Collapse as MuiCollapse } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import VdtCardActions from '../../entity/EntityCard/components/EntityCardActions';
+import VdtCard from '../../entity/EntityCard/components/EntityCardBase';
+import VdtCardContent from '../../entity/EntityCard/components/EntityCardContent';
+import VdtCardHeader from '../../entity/EntityCard/components/EntityCardHeader';
+import VdtCardMedia from './components/ItemCardMedia';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledVdtCardType = StyledComponent<typeof VdtCard, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCard: StyledVdtCardType;
+type StyledVdtCardHeaderType = StyledComponent<typeof VdtCardHeader, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCardHeader: StyledVdtCardHeaderType;
+type StyledVdtCardMediaType = StyledComponent<typeof VdtCardMedia, {
+    horizontal?: boolean;
+    mediaPadding?: number;
+    mediaSize?: React.CSSProperties['width'];
+}>;
+declare const StyledVdtCardMedia: StyledVdtCardMediaType;
+type StyledVdtCardContentType = StyledComponent<typeof VdtCardContent, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCardContent: StyledVdtCardContentType;
+declare const StyledVdtCardActions: typeof VdtCardActions;
+declare const StyledMuiCardActionArea: typeof MuiCardActionArea<'button'>;
+declare const StyledMuiCollapse: typeof MuiCollapse;
+declare const defaultComponents: {
+    Root: typeof StyledVdtCard;
+    CardHeader: typeof StyledVdtCardHeader;
+    CardMedia: typeof StyledVdtCardMedia;
+    CardContent: typeof StyledVdtCardContent;
+    CardContentExpanded: typeof StyledVdtCardContent;
+    CardActions: typeof StyledVdtCardActions;
+    CardActionArea: typeof StyledMuiCardActionArea;
+    Collapse: typeof StyledMuiCollapse;
+};
+type ItemCardAction = {
+    name?: string;
+    Icon?: (props?: any) => JSX.Element;
+    iconProps?: object;
+};
+type ItemCardMenuOption = {
+    label: string;
+    secondaryLabel?: string;
+    name?: string;
+    icon?: (props: any) => JSX.Element;
+};
+export interface ItemCardProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The Item to show
+     */
+    itemType?: ItemType;
+    /**
+     * Title text for the item card header
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get itemType as argument
+     */
+    title?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => string);
+    /**
+     * Subheader text for the item card header
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get itemType as argument
+     *
+     * Defaults to undefined
+     */
+    subheader?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => string);
+    /**
+     * Content text for the card body
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get itemType as argument
+     *
+     * Defaults to undefined
+     */
+    content?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => string);
+    /**
+     * Content text for the expanded card body
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get collectionType as argument
+     *
+     * Defaults to undefined which disables the expand functionality
+     */
+    expandedContent?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => string);
+    /**
+     * Whether the card should have horizontal or standard layout
+     */
+    horizontal?: boolean;
+    /**
+     * Add padding around media (theme spacing value)
+     */
+    mediaPadding?: number;
+    /**
+     * Set size for the card media
+     *
+     * `width` if horizontal: true, `height` otherwise
+     */
+    mediaSize?: string;
+    /**
+     * Whether the media card is marked as checked or not
+     */
+    checked?: boolean;
+    /**
+     * Whether the expanded content is shown or not
+     */
+    expanded?: boolean;
+    /**
+     * A list of options for the card header action
+     */
+    menuOptions?: ItemCardMenuOption[];
+    /**
+     * The list of actions to show
+     */
+    actions?: ItemCardAction[];
+    /**
+     * A function that handles the onClick event
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        itemType?: ItemType;
+    }) => void;
+    /**
+     * A function that handles the check box being clicked
+     */
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        itemType?: ItemType;
+        value: boolean;
+    }) => void;
+    /**
+     * A function that handles the expand button being clicked
+     */
+    onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        itemType?: ItemType;
+        value: boolean;
+    }) => void;
+    /**
+     * Callback for clicking on option which will get the option as argument
+     */
+    onOptionClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, payload: {
+        option: ItemCardMenuOption;
+        itemType?: ItemType;
+    }) => void;
+    /**
+     * Callback for clicking on an action which will get the action name as argument
+     */
+    onActionClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        action: ItemCardAction;
+        itemType?: ItemType;
+    }) => void;
+}
+declare const ItemCard: React.FC<ItemCardProps>;
+export default ItemCard;