@etsoo/materialui 1.0.83 → 1.0.84

package/lib/AutocompleteExtendedProps.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options' | 'multiple'> & {
+export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>, M extends boolean | undefined = boolean | undefined> = Omit<AutocompleteProps<T, M, false, false>, 'renderInput' | 'options' | 'multiple'> & {
     /**
      * Id field
      */

package/lib/ComboBox.d.ts

@@ -21,6 +21,10 @@ export type ComboBoxProps<T extends object, D extends DataTypes.Keys<T>, L exten
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Multiple
+     */
+    multiple?: boolean;
     /**
      * On load data handler
      */
@@ -29,6 +33,10 @@ export type ComboBoxProps<T extends object, D extends DataTypes.Keys<T>, L exten
      * Array of options.
      */
     options?: ReadonlyArray<T>;
+    /**
+     * Id values
+     */
+    idValues?: T[D][];
 };
 /**
  * ComboBox

package/lib/ComboBox.js

@@ -12,7 +12,7 @@ import { ReactUtils } from '@etsoo/react';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'new-password', // disable autocomplete and autofill, 'off' does not work
+    const { search = false, autoAddBlankItem = search, idField = 'id', idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, multiple = false, onLoadData, name, inputAutoComplete = 'new-password', // disable autocomplete and autofill, 'off' does not work
     options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
@@ -27,17 +27,14 @@ export function ComboBox(props) {
             setOptions(options);
     }, [options, propertyWay]);
     // Local default value
-    let localValue = idValue != null
+    const localValue = React.useMemo(() => idValue != null
         ? localOptions.find((o) => o[idField] === idValue)
-        : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    if (localValue === undefined)
-        localValue = null;
+        : idValues != null
+            ? localOptions.filter((o) => idValues === null || idValues === void 0 ? void 0 : idValues.includes(o[idField]))
+            : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value, [idValue, idValues, defaultValue, value]);
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
-    // Current id value
-    // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && stateValue[idField];
     React.useEffect(() => {
         if (localValue != null)
             setStateValue(localValue);
@@ -62,6 +59,13 @@ export function ComboBox(props) {
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
         return params;
     };
+    const getValue = (value) => {
+        if (value == null)
+            return '';
+        if (Array.isArray(value))
+            return value.map((item) => item[idField]).join(',');
+        return `${value[idField]}`;
+    };
     const setInputValue = (value) => {
         // Set state
         setStateValue(value);
@@ -69,7 +73,7 @@ export function ComboBox(props) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue = value != null ? `${value[idField]}` : '';
+            const newValue = getValue(value);
             if (newValue !== input.value) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, newValue, false);
@@ -97,8 +101,8 @@ export function ComboBox(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${localIdValue !== null && localIdValue !== void 0 ? localIdValue : ''}`, readOnly: true, onChange: inputOnChange }),
-        React.createElement(Autocomplete, { value: stateValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
+        React.createElement(Autocomplete, { value: stateValue, multiple: multiple, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);
                 // Custom

package/lib/Tiplist.d.ts

@@ -4,7 +4,7 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 /**
  * Tiplist props
  */
-export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteExtendedProps<T, D>, 'open'> & {
+export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteExtendedProps<T, D, undefined>, 'open' | 'multiple'> & {
     /**
      * Load data callback
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.83",
+    "version": "1.0.84",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/AutocompleteExtendedProps.ts

@@ -7,9 +7,10 @@ import { ChangeEventHandler } from 'react';
  */
 export type AutocompleteExtendedProps<
     T extends object,
-    D extends DataTypes.Keys<T>
+    D extends DataTypes.Keys<T>,
+    M extends boolean | undefined = boolean | undefined
 > = Omit<
-    AutocompleteProps<T, undefined, false, false>,
+    AutocompleteProps<T, M, false, false>,
     'renderInput' | 'options' | 'multiple'
 > & {
     /**

package/src/ComboBox.tsx

@@ -41,6 +41,11 @@ export type ComboBoxProps<
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
 
+    /**
+     * Multiple
+     */
+    multiple?: boolean;
+
     /**
      * On load data handler
      */
@@ -50,6 +55,11 @@ export type ComboBoxProps<
      * Array of options.
      */
     options?: ReadonlyArray<T>;
+
+    /**
+     * Id values
+     */
+    idValues?: T[D][];
 };
 
 /**
@@ -68,6 +78,7 @@ export function ComboBox<
         autoAddBlankItem = search,
         idField = 'id' as D,
         idValue,
+        idValues,
         inputError,
         inputHelperText,
         inputMargin,
@@ -78,6 +89,7 @@ export function ComboBox<
         label,
         labelField = 'label' as L,
         loadData,
+        multiple = false,
         onLoadData,
         name,
         inputAutoComplete = 'new-password', // disable autocomplete and autofill, 'off' does not work
@@ -107,20 +119,19 @@ export function ComboBox<
     }, [options, propertyWay]);
 
     // Local default value
-    let localValue =
-        idValue != null
-            ? localOptions.find((o) => o[idField] === idValue)
-            : defaultValue ?? value;
-
-    if (localValue === undefined) localValue = null;
+    const localValue = React.useMemo(
+        () =>
+            idValue != null
+                ? localOptions.find((o) => o[idField] === idValue)
+                : idValues != null
+                ? localOptions.filter((o) => idValues?.includes(o[idField]))
+                : defaultValue ?? value,
+        [idValue, idValues, defaultValue, value]
+    );
 
     // State
     // null for controlled
-    const [stateValue, setStateValue] = React.useState<T | null>(null);
-
-    // Current id value
-    // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && stateValue[idField];
+    const [stateValue, setStateValue] = React.useState<T | T[] | null>(null);
 
     React.useEffect(() => {
         if (localValue != null) setStateValue(localValue);
@@ -151,7 +162,14 @@ export function ComboBox<
         return params;
     };
 
-    const setInputValue = (value: T | null) => {
+    const getValue = (value: T | T[] | null): string => {
+        if (value == null) return '';
+        if (Array.isArray(value))
+            return value.map((item) => item[idField]).join(',');
+        return `${value[idField]}`;
+    };
+
+    const setInputValue = (value: T | T[] | null) => {
         // Set state
         setStateValue(value);
 
@@ -159,7 +177,7 @@ export function ComboBox<
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue = value != null ? `${value[idField]}` : '';
+            const newValue = getValue(value);
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
@@ -195,13 +213,14 @@ export function ComboBox<
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={`${localIdValue ?? ''}`}
+                value={getValue(stateValue)}
                 readOnly
                 onChange={inputOnChange}
             />
             {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-            <Autocomplete<T, undefined, false, false>
+            <Autocomplete<T, boolean | undefined, false, false>
                 value={stateValue}
+                multiple={multiple}
                 getOptionLabel={getOptionLabel}
                 isOptionEqualToValue={(option: T, value: T) =>
                     option[idField] === value[idField]

package/src/Tiplist.tsx

@@ -10,8 +10,8 @@ import { SearchField } from './SearchField';
  * Tiplist props
  */
 export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
-    AutocompleteExtendedProps<T, D>,
-    'open'
+    AutocompleteExtendedProps<T, D, undefined>,
+    'open' | 'multiple'
 > & {
     /**
      * Load data callback