@nethru/ui 2.1.56 → 2.1.58

package/base/AddableSelect.js

@@ -0,0 +1,77 @@
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { Autocomplete, createFilterOptions, FormControl, FormHelperText } from "@mui/material";
+import { TextField } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddableSelect = /*#__PURE__*/forwardRef(({
+  label,
+  placeholder = '새 값을 입력하거나 선택해주세요',
+  helperText,
+  value,
+  options,
+  onInputChange,
+  error,
+  fullWidth,
+  formControlProps,
+  ...props
+}, ref) => {
+  const styles = useMemo(() => ({
+    mt: label ? '17px' : undefined,
+    ...formControlProps?.sx
+  }), [label, formControlProps]);
+  const [inputValue, setInputValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const getOptionLabel = useCallback(option => typeof option === 'string' ? option : option.label ?? '', []);
+  const filter = useMemo(() => createFilterOptions({
+    stringify: getOptionLabel
+  }), [getOptionLabel]);
+  const filteredOptions = useMemo(() => {
+    return filter(options, {
+      inputValue,
+      getOptionLabel
+    });
+  }, [filter, options, inputValue, getOptionLabel]);
+  const handleInputChange = useCallback((event, newValue, reason) => {
+    if (onInputChange) onInputChange(event, newValue, reason);
+    setInputValue(newValue);
+    if (reason !== 'input') {
+      setOpen(false);
+      return;
+    }
+    const nextFiltered = filter(options, {
+      inputValue: newValue,
+      getOptionLabel
+    });
+    setOpen(nextFiltered.length > 0);
+  }, [filter, options, getOptionLabel, onInputChange]);
+  return /*#__PURE__*/_jsxs(FormControl, {
+    ref: ref,
+    disabled: props.disabled,
+    error: error,
+    sx: styles,
+    fullWidth: fullWidth,
+    ...formControlProps,
+    children: [/*#__PURE__*/_jsx(Autocomplete, {
+      freeSolo: true,
+      options: options,
+      value: value ?? '',
+      inputValue: inputValue,
+      open: open && filteredOptions.length > 0,
+      onOpen: () => {
+        if (filteredOptions.length > 0) setOpen(true);
+      },
+      onClose: () => setOpen(false),
+      onInputChange: handleInputChange,
+      filterOptions: (opts, state) => filter(opts, state),
+      renderInput: params => /*#__PURE__*/_jsx(TextField, {
+        ...params,
+        label: label,
+        placeholder: placeholder
+      }),
+      ...props
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+export default AddableSelect;

package/base/index.js

@@ -7,6 +7,7 @@ export { colors };
 export { borderRadius, shadow, globalStyles, createTheme };
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AddableFormList } from "./AddableFormList";
+export { default as AddableSelect } from "./AddableSelect";
 export { default as Alert } from "./Alert";
 export { default as AlertDialog } from "./dialog/AlertDialog";
 export { default as AppBar } from "./frame/AppBar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.56",
+  "version": "2.1.58",
   "main": "base/index.js",
   "files": [
     "/base"