@nethru/ui 2.1.55 → 2.1.57

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/datagrid/DataGrid.js

@@ -40,21 +40,28 @@ const DataGrid = /*#__PURE__*/forwardRef(({
       footer: Footer,
       ...slots
     },
+    slotProps: {
+      toolbar: {
+        toolbarLeadingSlot
+      }
+    },
     ...props
   });
-  function Toolbar() {
-    return /*#__PURE__*/_jsxs(Stack, {
-      direction: "row",
-      justifyContent: "space-between",
-      mb: 1.5,
-      children: [/*#__PURE__*/_jsx(Box, {
-        children: toolbarLeadingSlot
-      }), /*#__PURE__*/_jsx(Box, {
-        children: /*#__PURE__*/_jsx(GridToolbarQuickFilter, {
-          variant: "outlined"
-        })
-      })]
-    });
-  }
 });
+function Toolbar({
+  toolbarLeadingSlot
+}) {
+  return /*#__PURE__*/_jsxs(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    mb: 1.5,
+    children: [/*#__PURE__*/_jsx(Box, {
+      children: toolbarLeadingSlot
+    }), /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(GridToolbarQuickFilter, {
+        variant: "outlined"
+      })
+    })]
+  });
+}
 export default DataGrid;

package/package.json

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