@rnaga/wp-next-ui 1.0.10 → 1.0.11

package/InputColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputColor.d.ts","sourceRoot":"","sources":["../src/InputColor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAUzC,CAAC;AA2IJ,eAAO,MAAM,UAAU,GACrB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,4CA6DF,CAAC"}
+{"version":3,"file":"InputColor.d.ts","sourceRoot":"","sources":["../src/InputColor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAUzC,CAAC;AA2IJ,eAAO,MAAM,UAAU,GACrB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,4CAiEF,CAAC"}

package/InputColor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Input } from "./Input";
 import { Box } from "@mui/material";
 export const isColorString = (src) => /^#([\da-f]{3}|[\da-f]{6})$/i.test(src) ||
@@ -117,6 +117,9 @@ export const InputColor = (props) => {
         setValue(value);
         onBlur(value);
     };
+    useEffect(() => {
+        setValue(`${props.value ?? ""}`);
+    }, [props.value]);
     return (_jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "center", ...sx }, children: [_jsx(Input, { size: size, onChange: (value) => {
                     handleChange(value);
                 }, onBlur: (value) => {

package/InputMultiple.js

@@ -43,7 +43,7 @@ export const InputMultiple = (props) => {
                     size: size ?? "small",
                     sx: {
                         zIndex: 9999,
-                        height: size == "medium" ? 32 : 24,
+                        minHeight: size == "medium" ? 32 : 24,
                         ...slotSxProps?.input,
                     },
                     ...sx,

package/SelectFreeSoloAutocomplete.d.ts

@@ -0,0 +1,16 @@
+import { SxProps } from "@mui/material";
+import { type SlotSxProps } from "./SelectAutocomplete";
+type Item = {
+    label: string;
+    value: string | number;
+};
+export declare const SelectFreeSoloAutocomplete: (props: {
+    onChange: (value: string, item: Item) => void;
+    size?: "small" | "medium";
+    slotSxProps?: SlotSxProps;
+    items: Item[];
+    value?: string;
+    sx?: SxProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectFreeSoloAutocomplete.d.ts.map

package/SelectFreeSoloAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFreeSoloAutocomplete.d.ts","sourceRoot":"","sources":["../src/SelectFreeSoloAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,OAAO,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAO5E,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,OAAO;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,4CAuGA,CAAC"}

package/SelectFreeSoloAutocomplete.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, ListItem } from "@mui/material";
+import { useMemo, useState } from "react";
+import { SelectAutocomplete } from "./SelectAutocomplete";
+import { Typography } from "./Typography";
+const sxSelectAutocomplete = SelectAutocomplete.sx;
+const SelectAutocompleteTextField = SelectAutocomplete.TextField;
+const Wrapper = SelectAutocomplete.Wrapper;
+export const SelectFreeSoloAutocomplete = (props) => {
+    const { onChange, size, items, value, slotSxProps, sx } = props;
+    const [inputValue, setInputValue] = useState("");
+    const currentValue = useMemo(() => {
+        if (!value) {
+            return undefined;
+        }
+        const item = items.find((item) => item.value == value);
+        return item
+            ? { label: item.label, id: `${item.value}` }
+            : { label: `${value}`, id: `${value}` };
+    }, [value, items]);
+    return (_jsx(Wrapper, { size: size, slotSxProps: slotSxProps, children: _jsx(Autocomplete, { size: "small", freeSolo: true, value: currentValue ?? { label: "", id: "" }, inputValue: inputValue !== "" ? inputValue : currentValue?.label ?? "", options: items.map((item) => ({
+                label: item.label,
+                id: `${item.value}`,
+            })), onInputChange: (_, newInputValue, reason) => {
+                if (reason === "input") {
+                    setInputValue(newInputValue);
+                }
+                else {
+                    setInputValue("");
+                }
+            }, onChange: (_, newValue, reason) => {
+                if (reason === "createOption" && typeof newValue === "string") {
+                    const item = { label: newValue, value: newValue };
+                    onChange(newValue, item);
+                    setInputValue("");
+                }
+                else if (reason === "selectOption" &&
+                    typeof newValue === "object" &&
+                    newValue !== null) {
+                    const item = {
+                        label: newValue.label,
+                        value: newValue.id,
+                    };
+                    onChange(newValue.id, item);
+                    setInputValue("");
+                }
+            }, getOptionLabel: (option) => {
+                if (typeof option === "string") {
+                    return option;
+                }
+                return option.label;
+            }, renderInput: (params) => (_jsx(SelectAutocompleteTextField, { params: params, size: size, sx: slotSxProps?.textField })), sx: sxSelectAutocomplete({
+                size: size ?? "small",
+                sx: slotSxProps?.input ?? sx,
+            }), renderOption: (props, option, state) => {
+                const { key, ...restProps } = props;
+                if (state.selected) {
+                    return null;
+                }
+                return (_jsx(ListItem, { ...restProps, onClick: (e) => {
+                        const item = {
+                            label: option.label,
+                            value: option.id,
+                        };
+                        onChange(option.id, item);
+                        setInputValue("");
+                        restProps?.onClick && restProps.onClick(e);
+                    }, children: _jsx(Typography, { size: size, sx: slotSxProps?.options, children: option.label }) }, key));
+            }, disableClearable: true }) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnaga/wp-next-ui",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",