@snapcall/design-system 1.14.3 → 1.14.4

package/dist/index.d.mts

@@ -154,21 +154,28 @@ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
 type StringKeys<T> = {
     [K in keyof T]: T[K] extends string ? K : never;
 }[keyof T];
-interface CreatableSelectProps<T, Multiple extends boolean> {
+interface CreatableSelectBaseProps<Multiple extends boolean> {
     isLoading?: boolean;
-    items: T[];
     multiple?: Multiple;
     newLabel?: string;
     nothingFoundLabel?: string;
     placeholder?: string;
     value: string[];
-    valueKey: StringKeys<T>;
     onValueChanged: (v: string[]) => void;
+    'data-has-error'?: string;
+}
+type WithItemsProps<T> = {
+    items: T[];
+    valueKey: StringKeys<T>;
     getItemProps: (item: T) => CommandItemExtension & {
         children: react__default.ReactNode;
     };
-    'data-has-error'?: string;
-}
+};
+type CreatableSelectProps<T, Multiple extends boolean> = (CreatableSelectBaseProps<Multiple> & WithItemsProps<T>) | (CreatableSelectBaseProps<Multiple> & {
+    items?: never;
+    valueKey?: never;
+    getItemProps?: never;
+});
 declare function CreatableSelect<T, Multiple extends boolean>({ isLoading, items, multiple, newLabel, nothingFoundLabel, placeholder, value, valueKey, onValueChanged, getItemProps, ...props }: CreatableSelectProps<T, Multiple>): react_jsx_runtime.JSX.Element;
 
 declare const Dialog: react.FC<DialogPrimitive.DialogProps>;

package/dist/index.d.ts

@@ -154,21 +154,28 @@ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
 type StringKeys<T> = {
     [K in keyof T]: T[K] extends string ? K : never;
 }[keyof T];
-interface CreatableSelectProps<T, Multiple extends boolean> {
+interface CreatableSelectBaseProps<Multiple extends boolean> {
     isLoading?: boolean;
-    items: T[];
     multiple?: Multiple;
     newLabel?: string;
     nothingFoundLabel?: string;
     placeholder?: string;
     value: string[];
-    valueKey: StringKeys<T>;
     onValueChanged: (v: string[]) => void;
+    'data-has-error'?: string;
+}
+type WithItemsProps<T> = {
+    items: T[];
+    valueKey: StringKeys<T>;
     getItemProps: (item: T) => CommandItemExtension & {
         children: react__default.ReactNode;
     };
-    'data-has-error'?: string;
-}
+};
+type CreatableSelectProps<T, Multiple extends boolean> = (CreatableSelectBaseProps<Multiple> & WithItemsProps<T>) | (CreatableSelectBaseProps<Multiple> & {
+    items?: never;
+    valueKey?: never;
+    getItemProps?: never;
+});
 declare function CreatableSelect<T, Multiple extends boolean>({ isLoading, items, multiple, newLabel, nothingFoundLabel, placeholder, value, valueKey, onValueChanged, getItemProps, ...props }: CreatableSelectProps<T, Multiple>): react_jsx_runtime.JSX.Element;
 
 declare const Dialog: react.FC<DialogPrimitive.DialogProps>;

package/dist/index.js

@@ -53375,15 +53375,23 @@ function CreatableSelect(_a) {
     },
     [onValueChanged, value]
   );
-  const selectables = items.filter(
+  const selectables = items == null ? void 0 : items.filter(
     (it) => !value.includes(it[valueKey])
   );
   const selectNewValue = () => {
-    onValueChanged(
-      multiple ? [...value, ...inputValue.split(",").map((it) => it.trim())] : [inputValue]
-    );
+    if (!value.includes(inputValue)) {
+      onValueChanged(
+        multiple ? [...value, ...inputValue.split(",").map((it) => it.trim())] : [inputValue]
+      );
+    }
     setInputValue("");
+    if (!items) {
+      setOpen(false);
+    }
   };
+  if (!inputValue && !items && open) {
+    setOpen(false);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(
     Command,
     {
@@ -53423,6 +53431,9 @@ function CreatableSelect(_a) {
                   ref: inputRef,
                   value: inputValue,
                   onValueChange: (v) => {
+                    if (!open) {
+                      setOpen(true);
+                    }
                     setInputValue(v);
                     !multiple && onValueChanged([]);
                   },
@@ -53432,7 +53443,11 @@ function CreatableSelect(_a) {
                       selectNewValue();
                     }
                   },
-                  onFocus: () => setOpen(true),
+                  onFocus: () => {
+                    if (items) {
+                      setOpen(true);
+                    }
+                  },
                   placeholder: multiple || value.length === 0 ? placeholder : "",
                   className: "flex-grow text-sm bg-transparent outline-none text-gray-1000 placeholder:text-gray-700"
                 }
@@ -53440,8 +53455,8 @@ function CreatableSelect(_a) {
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "relative", children: open && /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-gray-1000 animate-in", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(CommandLoading, {}) : selectables.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
-          selectables.map((it) => {
+        /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "relative", children: open && /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-gray-1000 animate-in", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
+          items && (selectables == null ? void 0 : selectables.map((it) => {
             const itemProps = getItemProps(it);
             return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
               CommandItem,
@@ -53460,7 +53475,7 @@ function CreatableSelect(_a) {
               }, itemProps),
               it[valueKey]
             );
-          }),
+          })),
           inputValue && !value.includes(inputValue) && /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
             CommandItem,
             {

package/dist/index.mjs

@@ -52018,15 +52018,23 @@ function CreatableSelect(_a) {
     },
     [onValueChanged, value]
   );
-  const selectables = items.filter(
+  const selectables = items == null ? void 0 : items.filter(
     (it) => !value.includes(it[valueKey])
   );
   const selectNewValue = () => {
-    onValueChanged(
-      multiple ? [...value, ...inputValue.split(",").map((it) => it.trim())] : [inputValue]
-    );
+    if (!value.includes(inputValue)) {
+      onValueChanged(
+        multiple ? [...value, ...inputValue.split(",").map((it) => it.trim())] : [inputValue]
+      );
+    }
     setInputValue("");
+    if (!items) {
+      setOpen(false);
+    }
   };
+  if (!inputValue && !items && open) {
+    setOpen(false);
+  }
   return /* @__PURE__ */ jsxs1011(
     Command,
     {
@@ -52066,6 +52074,9 @@ function CreatableSelect(_a) {
                   ref: inputRef,
                   value: inputValue,
                   onValueChange: (v) => {
+                    if (!open) {
+                      setOpen(true);
+                    }
                     setInputValue(v);
                     !multiple && onValueChanged([]);
                   },
@@ -52075,7 +52086,11 @@ function CreatableSelect(_a) {
                       selectNewValue();
                     }
                   },
-                  onFocus: () => setOpen(true),
+                  onFocus: () => {
+                    if (items) {
+                      setOpen(true);
+                    }
+                  },
                   placeholder: multiple || value.length === 0 ? placeholder : "",
                   className: "flex-grow text-sm bg-transparent outline-none text-gray-1000 placeholder:text-gray-700"
                 }
@@ -52083,8 +52098,8 @@ function CreatableSelect(_a) {
             ] })
           }
         ),
-        /* @__PURE__ */ jsx1232("div", { className: "relative", children: open && /* @__PURE__ */ jsx1232("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-gray-1000 animate-in", children: isLoading ? /* @__PURE__ */ jsx1232(CommandLoading, {}) : selectables.length < 1 ? /* @__PURE__ */ jsx1232("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ jsxs1011(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
-          selectables.map((it) => {
+        /* @__PURE__ */ jsx1232("div", { className: "relative", children: open && /* @__PURE__ */ jsx1232("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-gray-1000 animate-in", children: isLoading ? /* @__PURE__ */ jsx1232(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ jsx1232("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ jsxs1011(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
+          items && (selectables == null ? void 0 : selectables.map((it) => {
             const itemProps = getItemProps(it);
             return /* @__PURE__ */ jsx1232(
               CommandItem,
@@ -52103,7 +52118,7 @@ function CreatableSelect(_a) {
               }, itemProps),
               it[valueKey]
             );
-          }),
+          })),
           inputValue && !value.includes(inputValue) && /* @__PURE__ */ jsx1232(
             CommandItem,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/design-system",
-  "version": "1.14.3",
+  "version": "1.14.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",