@majapisoftwares/ui 4.3.1 → 4.3.3

package/components/Input/MultiSelectInput.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react";
 import { type InputProps } from "./Input";
-declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, badgeClassName, name, onValueChange, inputClassName, ...props }: Omit<InputProps<undefined>, "value"> & {
+declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, badgeClassName, name, onValueChange, inputClassName, emptyClassName, ...props }: Omit<InputProps<undefined>, "value"> & {
     options: {
         value: string;
         name: string;
@@ -9,6 +9,7 @@ declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, b
     onValueChange?: (value: string[]) => void;
     emptyLabel?: string;
     badgeClassName?: string;
+    emptyClassName?: string;
 }): import("react").JSX.Element;
 export type MultiSelectInputProps = ComponentProps<typeof MultiSelectInput>;
 export default MultiSelectInput;

package/components/Input/MultiSelectInput.jsx

@@ -7,7 +7,7 @@ import clsx from "../../utils/clsx";
 import Badge from "../Badge";
 import useInputRefValue from "./useInputRefValue";
 import { useDeepCompareEffect } from "react-use";
-function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, badgeClassName, name, onValueChange, inputClassName, ...props }) {
+function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, badgeClassName, name, onValueChange, inputClassName, emptyClassName, ...props }) {
     const { innerRef, innerValue, setInnerValue } = useInputRefValue({
         value,
         ref,
@@ -20,12 +20,12 @@ function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref,
             onValueChange(innerValue || []);
         }
     }, [innerValue]);
+    emptyClassName = isEmpty
+        ? clsx("text-zinc-500 dark:text-zinc-500", emptyClassName)
+        : "p-1.5";
     return (<DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <Input as={Button} {...props} name={name} onChange={onChange} ref={innerRef} trailing={<ChevronDownIcon className="h-5 w-5 shrink-0"/>} inputClassName={clsx("text-left dark:hover:bg-zinc-700/70 bg-white gap-1.5 flex justify-start flex-wrap", {
-            "text-zinc-500 dark:text-zinc-500": isEmpty,
-            "p-1.5": !isEmpty,
-        }, inputClassName)}>
+        <Input as={Button} {...props} name={name} ref={innerRef} trailing={<ChevronDownIcon className="h-5 w-5 shrink-0"/>} inputClassName={clsx("text-left dark:hover:bg-zinc-700/70 bg-white gap-1.5 flex justify-start flex-wrap", emptyClassName, inputClassName)}>
           {isEmpty
             ? emptyLabel
             : options
@@ -39,7 +39,7 @@ function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref,
         <DropdownMenu.Item onClick={() => setInnerValue([])}>
           {emptyLabel}
         </DropdownMenu.Item>
-        {options.map((option) => (<DropdownMenu.CheckboxItem key={option.name} checked={innerValue?.includes(option.value)} onClick={() => setInnerValue(xor(value, [option.value]))}>
+        {options.map((option) => (<DropdownMenu.CheckboxItem key={option.name} checked={innerValue?.includes(option.value)} onClick={() => setInnerValue(xor(innerValue, [option.value]))}>
             {option.name}
           </DropdownMenu.CheckboxItem>))}
       </DropdownMenu.Content>

package/components/Input/SelectInput.jsx

@@ -14,7 +14,7 @@ function SelectInput({ options, onChange, ref, placeholder, inputClassName, valu
         value: innerValue,
         onValueChange: setInnerValue,
     }}>
-      <Select.Trigger placeholder={placeholder} buttonClassName={clsx("bg-white dark:hover:bg-zinc-700/70 dark:bg-zinc-800 w-full justify-between", inputClassName)}/>
+      <Select.Trigger placeholder={placeholder} buttonClassName={clsx("bg-white dark:hover:bg-zinc-700/70 dark:bg-zinc-800 w-full justify-between min-h-[38px]", inputClassName)}/>
       <Select.Content>
         {options?.map((option) => (<Select.Item key={option.value} value={option.value}>
             {option.name}

package/package.json

@@ -4,5 +4,5 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.3.1"
+  "version": "4.3.3"
 }