@akanjs/ui 0.9.13 → 0.9.14

package/Field.d.ts

@@ -26,8 +26,8 @@ export declare const Field: {
     Price: import("react").MemoExoticComponent<({ label, desc, labelClassName, className, value, onChange, placeholder, nullable, disabled, minlength, maxlength, transform, validate, onPressEnter, inputClassName, inputStyleType, }: PriceProps) => import("react/jsx-runtime").JSX.Element>;
     TextArea: import("react").MemoExoticComponent<({ label, desc, labelClassName, className, value, onChange, placeholder, nullable, disabled, rows, minlength, maxlength, transform, validate, onPressEnter, cache, inputClassName, }: TextAreaProps) => import("react/jsx-runtime").JSX.Element>;
     Switch: ({ label, desc, labelClassName, className, value, onChange, disabled, inputClassName, onDesc, offDesc, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
-    ToggleSelect: <I extends string>({ className, labelClassName, label, desc, model, field, items, value, validate, onChange, nullable, disabled, btnClassName, }: ToggleSelectProps<I>) => import("react/jsx-runtime").JSX.Element;
-    MultiToggleSelect: <I>({ className, labelClassName, label, desc, model, field, items, value, minlength, maxlength, validate, onChange, disabled, }: MultiToggleSelectProps<I>) => import("react/jsx-runtime").JSX.Element;
+    ToggleSelect: <I extends string | number | boolean | null>({ className, labelClassName, label, desc, model, field, items, value, validate, onChange, nullable, disabled, btnClassName, }: ToggleSelectProps<I>) => import("react/jsx-runtime").JSX.Element;
+    MultiToggleSelect: <I extends string | number | boolean>({ className, labelClassName, label, desc, model, field, items, value, minlength, maxlength, validate, onChange, disabled, }: MultiToggleSelectProps<I>) => import("react/jsx-runtime").JSX.Element;
     TextList: ({ label, desc, labelClassName, className, value, onChange, placeholder, disabled, transform, minlength, maxlength, minTextlength, maxTextlength, cache, validate, inputClassName, }: TextListProps) => import("react/jsx-runtime").JSX.Element;
     Tags: ({ label, desc, labelClassName, className, value, onChange, placeholder, disabled, transform, minlength, maxlength, minTextlength, maxTextlength, validate, inputClassName, }: TagsProps) => import("react/jsx-runtime").JSX.Element;
     Date: <Nullable extends boolean>({ className, labelClassName, nullable, label, desc, value, min, max, onChange, showTime, dateClassName, }: DateProps<Nullable>) => import("react/jsx-runtime").JSX.Element;
@@ -148,14 +148,14 @@ interface ToggleSelectProps<I> {
         label: string;
         value: I;
     }[] | readonly I[] | I[] | Enum<I>;
-    value: I | null;
+    value: I;
     nullable?: boolean;
     disabled?: boolean;
     validate?: (value: I) => boolean | string;
     onChange: (value: I) => void;
     btnClassName?: string;
 }
-interface MultiToggleSelectProps<I> {
+interface MultiToggleSelectProps<I extends string | number | boolean> {
     className?: string;
     labelClassName?: string;
     label?: string;

package/Select.d.ts

@@ -1,19 +1,17 @@
 import { Enum } from "@akanjs/base";
 import { ReactNode } from "react";
-type Options<T> = T[] | {
+interface LabelOption<T> {
     label: string | boolean | number;
     value: T;
-}[] | Enum<T>;
-interface SelectProps<T, Multiple extends boolean = false, Searchable extends boolean = false> {
+}
+type Options<T> = T[] | LabelOption<T>[] | Enum<T>;
+interface SelectProps<T extends string | number | boolean | null | undefined, Multiple extends boolean = false, Searchable extends boolean = false, Option extends Options<T> = Options<T>> {
     label?: string;
     desc?: string;
     labelClassName?: string;
     className?: string;
-    value: Multiple extends true ? T[] : T | null;
-    options: Searchable extends true ? T extends string ? Options<T> : {
-        label: string | boolean | number;
-        value: T;
-    }[] : Options<T>;
+    value: Multiple extends true ? T[] : T;
+    options: Searchable extends true ? (T extends string ? Option : LabelOption<T>[]) : Option;
     multiple?: Multiple;
     searchable?: Searchable;
     placeholder?: string;
@@ -23,10 +21,10 @@ interface SelectProps<T, Multiple extends boolean = false, Searchable extends bo
     nullable?: boolean;
     disabled?: boolean;
     onOpen?: () => void;
-    onChange: Multiple extends true ? (value: T[], prev: T[]) => void : (value: T | undefined, prev: T | undefined) => void;
+    onChange: Multiple extends true ? (value: T[], prev: T[]) => void : (value: T, prev: T) => void;
     onSearch?: (text: string) => void;
     renderOption?: (value: T) => ReactNode;
     renderSelected?: (value: T) => ReactNode;
 }
-export declare const Select: <T, Multiple extends boolean = false, Searchable extends boolean = false>({ label, desc, labelClassName, className, value, options, nullable, disabled, multiple, searchable, placeholder, selectClassName, selectorClassName, selectedClassName, onOpen, onChange, onSearch, renderOption, renderSelected, }: SelectProps<T, Multiple, Searchable>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends string | number | boolean | null | undefined, Multiple extends boolean = false, Searchable extends boolean = false, Option extends Options<T> = Options<T>>({ label, desc, labelClassName, className, value, options, nullable, disabled, multiple, searchable, placeholder, selectClassName, selectorClassName, selectedClassName, onOpen, onChange, onSearch, renderOption, renderSelected, }: SelectProps<T, Multiple, Searchable, Option>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ToggleSelect.d.ts

@@ -1,18 +1,18 @@
-interface ToggleSelectProps {
+interface ToggleSelectProps<I extends string | number | boolean | null> {
     className?: string;
     btnClassName?: string;
     items: string[] | {
         label: string;
-        value: string;
+        value: I;
     }[];
-    value: string | null;
+    value: I;
     nullable: boolean;
-    validate: (value: string) => boolean | string;
-    onChange: (value: string, idx: number) => void;
+    validate: (value: I) => boolean | string;
+    onChange: (value: I, idx: number) => void;
     disabled?: boolean;
 }
 export declare const ToggleSelect: {
-    ({ className, btnClassName, items, nullable, validate, value, onChange, disabled, }: ToggleSelectProps): import("react/jsx-runtime").JSX.Element;
+    <I extends string | number | boolean | null>({ className, btnClassName, items, nullable, validate, value, onChange, disabled, }: ToggleSelectProps<I>): import("react/jsx-runtime").JSX.Element;
     Multi: ({ className, btnClassName, items, nullable, validate, value, onChange, disabled }: MultiProps) => import("react/jsx-runtime").JSX.Element;
 };
 interface MultiProps {

package/cjs/Data/QueryMaker.js

@@ -223,11 +223,11 @@ const SelectIDWithRef = ({ queryArgMeta, value, onChange }) => {
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Select.Select,
             {
+              value,
               options: modelList.map((model) => ({
                 label: renderOption(model),
                 value: model.id
               })),
-              value,
               onChange: (value2) => {
                 onChange(value2);
               }

package/cjs/Field.js

@@ -990,26 +990,33 @@ const Parent = ({
         desc,
         labelClassName,
         selectClassName,
-        value: value?.id,
+        value: value?.id ?? null,
         searchable: true,
         options: modelList.map((model) => {
           const render = renderOption(model);
           return { label: typeof render === "string" ? render : model.id, value: model.id };
         }),
         renderOption: (modelId) => {
+          if (!modelId)
+            return null;
           const model = modelList.get(modelId);
           if (!model)
             return null;
           return renderOption(model);
         },
         renderSelected: (modelId) => {
+          if (!modelId)
+            return null;
           const model = modelList.get(modelId);
           if (!model)
             return null;
           return renderSelected(model);
         },
         onChange: (modelId) => {
-          onChange(modelList.get(modelId));
+          if (modelId)
+            onChange(modelList.get(modelId) ?? null);
+          else
+            onChange(null);
         },
         onOpen: () => {
           if (!disabled)
@@ -1072,12 +1079,16 @@ const ParentId = ({
           return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
         }),
         renderOption: (renderId) => {
+          if (!renderId)
+            return null;
           const model = modelList.get(renderId);
           if (!model)
             return null;
           return renderOption?.(model) ?? null;
         },
         renderSelected: (renderId) => {
+          if (!renderId)
+            return null;
           const model = modelList.get(renderId);
           if (!model)
             return null;
@@ -1088,7 +1099,10 @@ const ParentId = ({
             void storeDo[namesOfSlice.initModel](...initArgs ?? []);
         },
         onChange: (modelId) => {
-          onChange(modelId, modelList.get(modelId));
+          if (modelId)
+            onChange(modelId, modelList.get(modelId));
+          else
+            onChange(null, null);
         },
         onSearch
       }

package/cjs/Select.js

@@ -53,7 +53,10 @@ const Select = ({
   const { l } = (0, import_next.usePage)();
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const labeledOptions = (0, import_react.useMemo)(
-    () => options instanceof import_base.Enum ? options.values.map((v) => ({ label: v, value: v })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
+    () => options instanceof import_base.Enum ? options.values.map((v) => ({
+      label: typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v),
+      value: v
+    })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
     [options]
   );
   const [selectedValues, setSelectedValues] = (0, import_react.useState)(multiple ? value : [value]);

package/cjs/System/CSR.js

@@ -64,7 +64,7 @@ const CSRProvider = ({
         return { lang };
       },
       render: ({ lang }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           CSRWrapper,
           {
             className,
@@ -74,11 +74,7 @@ const CSRProvider = ({
             fonts,
             prefix,
             layoutStyle,
-            children: [
-              children,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Inner, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSRInner, {})
-            ]
+            children
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -90,6 +86,8 @@ const CSRProvider = ({
             fetchMe,
             fetchSelf,
             render: ({ mePromise, selfPromise }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Inner, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSRInner, {}),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_Client.Client.Bridge,
                 {

package/cjs/ToggleSelect.js

@@ -34,8 +34,8 @@ const ToggleSelect = ({
   disabled
 }) => {
   const { l } = (0, import_next.usePage)();
-  const validateResult = validate(value ?? "");
-  const invalidMessage = !value?.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const validateResult = value ? validate(value) : false;
+  const invalidMessage = value === null || typeof value === "string" && !value.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
   const options = items.map(
     (item) => typeof item === "string" ? { label: item, value: item } : item
   );

package/esm/Data/QueryMaker.js

@@ -209,11 +209,11 @@ const SelectIDWithRef = ({ queryArgMeta, value, onChange }) => {
           /* @__PURE__ */ jsx(
             Select,
             {
+              value,
               options: modelList.map((model) => ({
                 label: renderOption(model),
                 value: model.id
               })),
-              value,
               onChange: (value2) => {
                 onChange(value2);
               }

package/esm/Field.js

@@ -968,26 +968,33 @@ const Parent = ({
         desc,
         labelClassName,
         selectClassName,
-        value: value?.id,
+        value: value?.id ?? null,
         searchable: true,
         options: modelList.map((model) => {
           const render = renderOption(model);
           return { label: typeof render === "string" ? render : model.id, value: model.id };
         }),
         renderOption: (modelId) => {
+          if (!modelId)
+            return null;
           const model = modelList.get(modelId);
           if (!model)
             return null;
           return renderOption(model);
         },
         renderSelected: (modelId) => {
+          if (!modelId)
+            return null;
           const model = modelList.get(modelId);
           if (!model)
             return null;
           return renderSelected(model);
         },
         onChange: (modelId) => {
-          onChange(modelList.get(modelId));
+          if (modelId)
+            onChange(modelList.get(modelId) ?? null);
+          else
+            onChange(null);
         },
         onOpen: () => {
           if (!disabled)
@@ -1050,12 +1057,16 @@ const ParentId = ({
           return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
         }),
         renderOption: (renderId) => {
+          if (!renderId)
+            return null;
           const model = modelList.get(renderId);
           if (!model)
             return null;
           return renderOption?.(model) ?? null;
         },
         renderSelected: (renderId) => {
+          if (!renderId)
+            return null;
           const model = modelList.get(renderId);
           if (!model)
             return null;
@@ -1066,7 +1077,10 @@ const ParentId = ({
             void storeDo[namesOfSlice.initModel](...initArgs ?? []);
         },
         onChange: (modelId) => {
-          onChange(modelId, modelList.get(modelId));
+          if (modelId)
+            onChange(modelId, modelList.get(modelId));
+          else
+            onChange(null, null);
         },
         onSearch
       }

package/esm/Select.js

@@ -31,7 +31,10 @@ const Select = ({
   const { l } = usePage();
   const [isOpen, setIsOpen] = useState(false);
   const labeledOptions = useMemo(
-    () => options instanceof Enum ? options.values.map((v) => ({ label: v, value: v })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
+    () => options instanceof Enum ? options.values.map((v) => ({
+      label: typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v),
+      value: v
+    })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
     [options]
   );
   const [selectedValues, setSelectedValues] = useState(multiple ? value : [value]);

package/esm/System/CSR.js

@@ -41,7 +41,7 @@ const CSRProvider = ({
         return { lang };
       },
       render: ({ lang }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsx(
           CSRWrapper,
           {
             className,
@@ -51,11 +51,7 @@ const CSRProvider = ({
             fonts,
             prefix,
             layoutStyle,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(Client.Inner, {}),
-              /* @__PURE__ */ jsx(CSRInner, {})
-            ]
+            children
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -67,6 +63,8 @@ const CSRProvider = ({
             fetchMe,
             fetchSelf,
             render: ({ mePromise, selfPromise }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Client.Inner, {}),
+              /* @__PURE__ */ jsx(CSRInner, {}),
               /* @__PURE__ */ jsx(
                 Client.Bridge,
                 {

package/esm/ToggleSelect.js

@@ -12,8 +12,8 @@ const ToggleSelect = ({
   disabled
 }) => {
   const { l } = usePage();
-  const validateResult = validate(value ?? "");
-  const invalidMessage = !value?.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const validateResult = value ? validate(value) : false;
+  const invalidMessage = value === null || typeof value === "string" && !value.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
   const options = items.map(
     (item) => typeof item === "string" ? { label: item, value: item } : item
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"