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

package/dist/es/inputs/CheckboxGroupInput/CheckboxGroupInput.js

@@ -0,0 +1,292 @@
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
+import e from "prop-types";
+import q from "@mui/material/FormControl";
+import U from "@mui/material/FormHelperText";
+import V from "@mui/material/InputLabel";
+import w from "@mui/material/OutlinedInput";
+import E from "@mui/material/FilledInput";
+import P from "@mui/material/Input";
+import A from "@mui/material/Checkbox";
+import { styled as n } from "@mui/material/styles";
+import D from "../_components/FormControlLabel.js";
+import J from "./components/CheckboxGroup.js";
+const K = n(V)(() => ({
+  paddingRight: 8
+})), Q = n(P)(() => ({
+  // Medium Size
+  "&:not(.MuiInputBase-sizeSmall)": {
+    minHeight: 58,
+    paddingLeft: 11,
+    paddingRight: 11
+  },
+  // Small size (48px, medium for others)
+  "&.MuiInputBase-sizeSmall": {
+    minHeight: 54,
+    paddingLeft: 8,
+    paddingRight: 8,
+    "& .MuiFormControlLabel-root": {
+      "& .MuiCheckbox-root": {
+        minHeight: 38,
+        maxHeight: 32,
+        maxWidth: 32
+      }
+    }
+  }
+})), X = n(E)(() => ({
+  // Medium Size
+  "&:not(.MuiInputBase-sizeSmall)": {
+    minHeight: 66,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 24,
+    paddingBottom: 0
+  },
+  // Small size (56px, medium for others)
+  "&.MuiInputBase-sizeSmall": {
+    minHeight: 56,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 24,
+    paddingBottom: 0,
+    "& .MuiFormControlLabel-root": {
+      "& .MuiCheckbox-root": {
+        maxHeight: 32,
+        maxWidth: 32
+      }
+    }
+  }
+})), Y = n(w)(() => ({
+  paddingLeft: 14,
+  paddingRight: 14,
+  // Medium Size (56px)
+  "&:not(.MuiInputBase-sizeSmall)": {
+    minHeight: 56,
+    paddingTop: 8,
+    paddingBottom: 6
+  },
+  // Small size (40px)
+  "&.MuiInputBase-sizeSmall": {
+    minHeight: 40,
+    paddingTop: 2
+  }
+})), Z = {
+  Root: q,
+  InputLabel: K,
+  Input: Q,
+  // Standard input
+  FilledInput: X,
+  OutlinedInput: Y,
+  FormControlLabel: D,
+  FormGroup: J,
+  FormHelperText: U,
+  Checkbox: A
+};
+function f({
+  name: o,
+  label: l,
+  value: c,
+  defaultValue: b,
+  options: g,
+  helperText: a,
+  error: d,
+  required: h,
+  disabled: C,
+  fullWidth: p,
+  orientation: I,
+  labelPlacement: O,
+  justifyContent: x,
+  variant: i,
+  size: u,
+  onChange: y,
+  onBlur: F,
+  onFocus: T,
+  components: L,
+  componentsProps: t
+}) {
+  const {
+    Root: M,
+    FormHelperText: v,
+    InputLabel: H,
+    Input: j,
+    FilledInput: k,
+    OutlinedInput: B,
+    FormGroup: S,
+    FormControlLabel: z,
+    Checkbox: R
+  } = L, G = {
+    standard: j,
+    filled: k,
+    outlined: B
+  }[i], W = {
+    standard: {
+      disableUnderline: !0,
+      ...t.input
+    },
+    filled: {
+      disableUnderline: !0,
+      ...t.filledInput
+    },
+    outlined: {
+      label: l,
+      notched: !0,
+      ...t.outlinedInput
+    }
+  }[i], m = !!d, s = (d || "").trim();
+  return /* @__PURE__ */ $(M, { error: m, required: h, disabled: C, variant: i, fullWidth: p, ...t.root, children: [
+    /* @__PURE__ */ r(H, { htmlFor: o, id: `${o}-label`, shrink: !0, ...t.inputLabel, children: l }),
+    /* @__PURE__ */ r(G, { id: o, name: o, fullWidth: p, size: u, inputComponent: S, "aria-describedby": `${o}-describedby`, inputProps: {
+      value: c,
+      defaultValue: b,
+      options: g,
+      size: u,
+      orientation: I,
+      labelPlacement: O,
+      justifyContent: x,
+      onChange: y,
+      onFocus: T,
+      onBlur: F,
+      FormControlLabelComponent: z,
+      formControlLabelProps: t.formControlLabel,
+      CheckboxComponent: R,
+      checkboxProps: t.checkbox,
+      vdtClassNames: t.formGroup.className,
+      ...t.formGroup
+    }, ...W }),
+    (s || a) && /* @__PURE__ */ r(v, { id: `${o}-describedby`, ...t.formHelperText, children: m ? s : a })
+  ] });
+}
+f.propTypes = {
+  /**
+   * Name of input
+   */
+  name: e.string,
+  /**
+   * Value of input
+   */
+  value: e.arrayOf(e.string),
+  /**
+   * Default value of input
+   */
+  defaultValue: e.arrayOf(e.string),
+  /**
+   * Label of input
+   */
+  label: e.string,
+  /**
+   * Options for input
+   */
+  options: e.arrayOf(e.shape({
+    name: e.string,
+    value: e.string,
+    label: e.string
+  })),
+  /**
+   * Help text underneath input
+   */
+  helperText: e.string,
+  /**
+   * Error to display underneath input (overrides `helperText`)
+   */
+  error: e.string,
+  /**
+   * Set if input is required
+   */
+  required: e.bool,
+  /**
+   * Set if input is disabled
+   */
+  disabled: e.bool,
+  /**
+   * Set if input should be full width
+   */
+  fullWidth: e.bool,
+  /**
+   * Set direction inputs should be aligned
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * Label placement
+   */
+  labelPlacement: e.oneOf(["end", "start", "bottom", "top"]),
+  /**
+   * Alignment of inputs
+   *
+   * Only used when `orientation:horizontal`
+   */
+  justifyContent: e.oneOf(["flex-start", "center", "space-around", "space-evenly", "space-between", "flex-end"]),
+  /**
+   * Set variant of input
+   */
+  variant: e.oneOf(["outlined", "filled", "standard"]),
+  /**
+   * Whether the slider is a range or not
+   */
+  size: e.oneOf(["medium", "small"]),
+  // 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,
+    FormHelperText: e.elementType,
+    InputLabel: e.elementType,
+    Input: e.elementType,
+    FilledInput: e.elementType,
+    OutlinedInput: e.elementType,
+    FormGroup: e.elementType,
+    FormControlLabel: e.elementType,
+    Checkbox: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    formHelperText: e.instanceOf(Object),
+    inputLabel: e.instanceOf(Object),
+    input: e.instanceOf(Object),
+    filledInput: e.instanceOf(Object),
+    outlinedInput: e.instanceOf(Object),
+    formGroup: e.instanceOf(Object),
+    formControlLabel: e.instanceOf(Object),
+    checkbox: e.instanceOf(Object)
+  })
+};
+f.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  options: [],
+  helperText: void 0,
+  error: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  orientation: "horizontal",
+  labelPlacement: "end",
+  justifyContent: "space-around",
+  variant: "outlined",
+  size: "medium",
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  components: Z,
+  componentsProps: void 0
+};
+export {
+  f as default
+};

package/dist/es/inputs/CheckboxGroupInput/components/CheckboxGroup.js

@@ -0,0 +1,81 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as $, useRef as y } from "react";
+import N from "@mui/material/FormGroup";
+import S from "@mui/material/FormControlLabel";
+import j from "@mui/material/Checkbox";
+import { styled as q } from "@mui/material/styles";
+const E = q(N, {
+  shouldForwardProp: (t) => t !== "justifyContent"
+})(({
+  row: t,
+  justifyContent: m
+}) => ({
+  width: "100%",
+  ...t && m ? {
+    justifyContent: m
+  } : {},
+  "& .MuiFormControlLabel-labelPlacementStart": {
+    marginLeft: 1.5,
+    marginRight: 0
+  },
+  "& .MuiFormControlLabel-labelPlacementEnd": {
+    marginLeft: 0,
+    marginRight: 1.5
+  }
+})), U = $(({
+  id: t,
+  value: m,
+  defaultValue: n,
+  required: O,
+  disabled: b,
+  options: a,
+  fullWidth: W,
+  orientation: i,
+  labelPlacement: f,
+  justifyContent: g,
+  size: u,
+  onChange: C,
+  FormControlLabelComponent: p = S,
+  formControlLabelProps: v = {},
+  CheckboxComponent: F = j,
+  checkboxProps: k = {},
+  ...w
+}, x) => {
+  const {
+    vdtClassNames: L,
+    // Ignore
+    className: _,
+    autoComplete: z,
+    autoFocus: A,
+    rows: B,
+    type: D,
+    ...M
+  } = w, h = y(), r = m || h.current || [], R = (o) => {
+    var c;
+    const e = (c = o == null ? void 0 : o.target) == null ? void 0 : c.value, s = r != null && r.includes(e) ? r == null ? void 0 : r.filter((d) => d !== e) : [...r, e];
+    h.current = s, C({
+      ...o,
+      target: {
+        ...o.target,
+        value: s
+      }
+    }, {
+      value: s
+    });
+  }, G = m !== void 0;
+  return /* @__PURE__ */ l(E, { ref: x, className: L, row: i === "horizontal", justifyContent: g, onChange: R, role: "group", ...M, children: a == null ? void 0 : a.map(({
+    name: o,
+    value: e,
+    label: s,
+    count: c,
+    disabled: d,
+    ...P
+  }) => /* @__PURE__ */ l(p, { label: s || e, count: c, labelPlacement: f, orientation: i, size: u, control: /* @__PURE__ */ l(F, { id: `${t}-${o || e}`, value: e, ...G ? {
+    checked: r == null ? void 0 : r.includes(e)
+  } : {
+    defaultChecked: n == null ? void 0 : n.includes(e)
+  }, disabled: d || b, size: u, ...P, ...k }), ...v }, `${t}-${o || e}`)) });
+});
+export {
+  U as default
+};

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

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