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

package/dist/es/inputs/SelectInput/SelectInput.js

@@ -1,173 +1,73 @@
-import { jsx as c } from "react/jsx-runtime";
-import e from "prop-types";
-import B from "@mui/material/TextField";
-import { styled as E } from "@mui/material/styles";
-import $ from "../_components/MenuItem.js";
-const k = E(B)(() => ({
+import { jsx as v } from "react/jsx-runtime";
+import $ from "@mui/material/TextField";
+import { styled as k } from "@mui/material/styles";
+import p from "../_components/MenuItem.js";
+const q = k($)(() => ({
   // Show label correctly with ellipsis
   minWidth: 72,
   "& .MuiFormLabel-root": {
     minWidth: 16,
     paddingRight: 16
   }
-})), D = {
-  Root: k,
-  MenuItem: $
-};
-function y({
-  name: u,
-  label: b,
-  value: o,
-  defaultValue: l,
-  options: t,
-  helperText: p,
-  error: d,
+})), z = {
+  Root: q,
+  MenuItem: p
+}, B = ({
+  name: a,
+  label: g,
+  value: i,
+  defaultValue: o,
+  options: e,
+  helperText: c,
+  error: u,
   required: h,
-  disabled: O,
-  fullWidth: T,
+  disabled: b,
+  fullWidth: x,
   variant: I,
-  size: x,
-  placeholder: i,
-  multiple: m,
+  size: A,
+  placeholder: n,
+  multiple: s,
   onChange: C,
   onBlur: M,
-  onFocus: A,
-  onOpen: F,
-  onClose: P,
-  components: j,
-  componentsProps: a
-}) {
+  onFocus: F,
+  onOpen: T,
+  onClose: L,
+  components: S,
+  componentsProps: l
+}) => {
   const {
-    Root: L,
+    Root: P,
     MenuItem: R
-  } = j, f = o !== void 0, S = f && m && o !== void 0 && !Array.isArray(o) ? [o] : o, W = !f && m && !Array.isArray(l) ? l && [l] || [] : l || "", q = (r) => {
-    var n;
+  } = S, m = i !== void 0, W = m && s && i !== void 0 && !Array.isArray(i) ? [i] : i, j = !m && s && !Array.isArray(o) ? o && [o] || [] : o || "", E = (r) => {
+    var t;
     C(r, {
-      value: (n = r == null ? void 0 : r.target) == null ? void 0 : n.value
+      value: (t = r == null ? void 0 : r.target) == null ? void 0 : t.value
     });
-  }, g = (r) => {
-    var n;
-    return ((n = t == null ? void 0 : t.find((s) => ((s == null ? void 0 : s.value) || s) === r)) == null ? void 0 : n.label) || r;
-  }, v = !!d, z = (d || "").trim();
-  return /* @__PURE__ */ c(L, { id: u, name: u, label: b, ...f ? {
-    value: S
+  }, f = (r) => {
+    var t;
+    return ((t = e == null ? void 0 : e.find((d) => ((d == null ? void 0 : d.value) || d) === r)) == null ? void 0 : t.label) || r;
+  }, y = !!u, O = (u || "").trim();
+  return /* @__PURE__ */ v(P, { id: a, name: a, label: g, ...m ? {
+    value: W
   } : {
-    defaultValue: W
-  }, helperText: (z || p) && v ? d : p, error: v, required: h, disabled: O, fullWidth: T, variant: I, size: x, select: !0, onChange: q, onBlur: M, onFocus: A, InputLabelProps: {
-    ...i !== void 0 ? {
+    defaultValue: j
+  }, helperText: (O || c) && y ? u : c, error: y, required: h, disabled: b, fullWidth: x, variant: I, size: A, select: !0, onChange: E, onBlur: M, onFocus: F, InputLabelProps: {
+    ...n !== void 0 ? {
       shrink: !0
     } : {},
-    ...a.root.InputLabelProps || {}
-  }, ...a.root, SelectProps: {
-    multiple: m,
-    onOpen: F,
-    onClose: P,
+    ...l.root.InputLabelProps || {}
+  }, ...l.root, SelectProps: {
+    multiple: s,
+    onOpen: T,
+    onClose: L,
     displayEmpty: !0,
-    renderValue: (r) => (i == null ? void 0 : i.length) > 0 && (r === "" || r.length === 0) ? /* @__PURE__ */ c("span", { style: {
+    renderValue: (r) => (n == null ? void 0 : n.length) > 0 && r.length === 0 ? /* @__PURE__ */ v("span", { style: {
       color: "#81858a"
-    }, children: i }) : Array.isArray(r) ? r.map((n) => g(n)).join(", ") : g(r),
-    ...a.root.SelectProps || {}
-  }, children: t == null ? void 0 : t.map((r) => /* @__PURE__ */ c(R, { ...r, ...a.menuItem }, `select-${u}-${r == null ? void 0 : r.value}`)) });
-}
-y.propTypes = {
-  /**
-   * Name for input (htmlFor attribute of InputLabel)
-   */
-  name: e.string,
-  /**
-   * Label of input
-   */
-  label: e.string,
-  /**
-   * Value of input (uncontrolled if unset)
-   */
-  value: e.oneOfType([e.string, e.arrayOf(e.string)]),
-  /**
-   * Default value of input component (use with uncontrolled)
-   */
-  defaultValue: e.oneOfType([e.string, e.arrayOf(e.string)]),
-  /**
-   * Options for input
-   */
-  options: e.arrayOf(e.shape({
-    value: e.string,
-    label: e.string,
-    count: e.number
-  })),
-  /**
-   * 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 multiple options can be selected
-   */
-  multiple: e.bool,
-  /**
-   * Set variant of input
-   */
-  variant: e.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Set size of input
-   */
-  size: e.oneOf(["medium", "small"]),
-  /**
-   * 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,
-  /**
-   * Callback when options are opened
-   */
-  onOpen: e.func,
-  /**
-   * Callback when options are closed
-   */
-  onClose: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    MenuItem: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    menuItem: e.instanceOf(Object)
-  })
+    }, children: n }) : Array.isArray(r) ? r.map((t) => f(t)).join(", ") : f(r),
+    ...l.root.SelectProps || {}
+  }, children: e == null ? void 0 : e.map((r) => /* @__PURE__ */ v(R, { ...r, ...l.menuItem }, `select-${a}-${r == null ? void 0 : r.value}`)) });
 };
-y.defaultProps = {
+B.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -187,9 +87,9 @@ y.defaultProps = {
   onFocus: void 0,
   onOpen: void 0,
   onClose: void 0,
-  components: D,
+  components: z,
   componentsProps: void 0
 };
 export {
-  y as default
+  B as default
 };

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

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

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

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

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

@@ -0,0 +1,141 @@
+/// <reference types="react" />
+import { FormControl as MuiFormControl, FormHelperText as MuiFormHelperText, InputLabel as MuiInputLabel, OutlinedInput as MuiOutlinedInput, FilledInput as MuiFilledInput, Input as MuiInput, ButtonBase as MuiBaseButton } from '@mui/material';
+import VdtSlider from './components/Slider';
+import type { PropsFrom, StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiOutlinedInput: StyledComponent<typeof MuiOutlinedInput>;
+declare const StyledMuiFilledInput: StyledComponent<typeof MuiFilledInput>;
+declare const StyledMuiInput: StyledComponent<typeof MuiInput>;
+declare const StyledVdtSlider: React.ElementType<PropsFrom<typeof VdtSlider>>;
+declare const StyledMuiFormHelperText: typeof MuiFormHelperText;
+declare const StyledMuiBaseButton: typeof MuiBaseButton<'button'>;
+declare const defaultComponents: {
+    Root: typeof MuiFormControl;
+    FormHelperText: typeof StyledMuiFormHelperText;
+    InputLabel: typeof MuiInputLabel;
+    BaseButton: typeof StyledMuiBaseButton;
+    Input: typeof StyledMuiInput;
+    FilledInput: typeof StyledMuiFilledInput;
+    OutlinedInput: typeof StyledMuiOutlinedInput;
+    Slider: typeof StyledVdtSlider;
+};
+export interface SliderInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name of input
+     */
+    name?: string;
+    /**
+     * Label of input
+     */
+    label?: string;
+    /**
+     * Value of input component
+     */
+    value?: number | number[];
+    /**
+     * Default value of input component (use with uncontrolled)
+     */
+    defaultValue?: number | number[];
+    /**
+     * Options for the slider (used as marks)
+     *
+     * Will take `min`, `max` from options unless those are explicitly set
+     */
+    options?: {
+        value: number | string;
+        label?: string;
+    }[];
+    /**
+     * Help text underneath input
+     */
+    helperText?: string;
+    /**
+     * Error to display underneath input (overrides `helperText`)
+     */
+    error?: string;
+    /**
+     * Set if required
+     */
+    required?: boolean;
+    /**
+     * Set if disabled
+     */
+    disabled?: boolean;
+    /**
+     * Minimum value of range
+     *
+     * Default from `options`
+     */
+    min?: number;
+    /**
+     * Maximum value of range
+     *
+     * Default from `options`
+     */
+    max?: number;
+    /**
+     * Set `Number.MIN_SAFE_INTEGER` as min
+     *
+     * Unused if `min` is set
+     */
+    infiniteMin?: boolean;
+    /**
+     * Set `Number.MAX_SAFE_INTEGER` as max
+     *
+     * Unused if `max` is set
+     */
+    infiniteMax?: boolean;
+    /**
+     * Set how much the infinite min/max label should be separated from nearest min/max label
+     *
+     * Defaults max of 1 or `step`
+     */
+    infiniteDiff?: number;
+    /**
+     * Set variant of input
+     */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /**
+     * Set size of input
+     */
+    size?: 'medium' | 'small';
+    /**
+     * How many steps the slider thumb should move
+     *
+     * Defaults to stepping between options (if added), otherwise steps 1
+     */
+    step?: number;
+    /**
+     * Whether to show marks or not
+     */
+    showMarks?: boolean;
+    /**
+     * Whether to show clear button in label or not
+     *
+     * Limitation: Only clears controlled value so won't show if no `value` prop
+     */
+    clearable?: boolean;
+    /**
+     * Select if it should show tooltip for slider thumb
+     */
+    valueLabelDisplay?: 'off' | 'on' | 'auto';
+    /**
+     * Set if a range should be selected
+     */
+    range?: boolean;
+    /**
+     * Callback when value changed
+     */
+    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        value: number | number[];
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+declare const SliderInput: React.FC<SliderInputProps>;
+export default SliderInput;