@majapisoftwares/ui 4.2.0 → 4.3.0

package/components/Badge/Badge.jsx

@@ -1,6 +1,7 @@
 import clsx from "../../utils/clsx";
 import Link from "next/link";
 import { useCallback, } from "react";
+import preventDefault from "../../utils/preventDefault";
 const colorMap = {
     default: {
         badge: "bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-100",
@@ -39,12 +40,12 @@ function Badge({ color = "default", size = "md", className, children, onActionCl
     }, [onActionClick]);
     return (<Component className={clsx("inline-flex items-center py-0.5 font-medium", sizeMap.badge[size], colorMap[color].badge, className)} href={href} shallow={shallow} onClick={onClick} {...props}>
       {children}
-      {onActionClick && (<button type="button" className={clsx("ml-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full focus:text-white focus:outline-hidden", sizeMap.button[size], colorMap[color].button)} onClick={handleActionClick}>
-          <span className="sr-only">Delete</span>
+      {onActionClick && (<div className={clsx("ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full focus:text-white focus:outline-hidden", sizeMap.button[size], colorMap[color].button)} onClick={handleActionClick} onPointerDown={preventDefault}>
+          <span className="sr-only">Remove</span>
           <svg className="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
             <path strokeLinecap="round" strokeWidth="1.5" d="M1 1l6 6m0-6L1 7"/>
           </svg>
-        </button>)}
+        </div>)}
     </Component>);
 }
 export default Badge;

package/components/Input/MultiSelectInput.d.ts

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

package/components/Input/MultiSelectInput.jsx

@@ -3,24 +3,44 @@ import DropdownMenu from "../DropdownMenu";
 import Button from "../Button";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { xor } from "lodash-es";
-function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, ...props }) {
+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, ...props }) {
+    const { innerRef, innerValue, setInnerValue } = useInputRefValue({
+        value,
+        ref,
+        name,
+        onChange,
+    });
+    const isEmpty = !innerValue?.length;
+    useDeepCompareEffect(() => {
+        if (onValueChange) {
+            onValueChange(innerValue || []);
+        }
+    }, [innerValue]);
     return (<DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
-          {value?.length
-            ? options
-                .map((project) => value.includes(project.value) ? project.name : null)
-                .filter(Boolean)
-                .join(", ")
-            : emptyLabel}
+        <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,
+        })}>
+          {isEmpty
+            ? emptyLabel
+            : options
+                .filter((option) => innerValue.includes(option.value))
+                .map((option, index) => (<Badge key={index} className={badgeClassName} onActionClick={() => setInnerValue(xor(innerValue, [option.value]))}>
+                    {option.name}
+                  </Badge>))}
         </Input>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
-        <DropdownMenu.Item onClick={() => onChange?.([])}>
+        <DropdownMenu.Item onClick={() => setInnerValue([])}>
           {emptyLabel}
         </DropdownMenu.Item>
-        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
-            {options.name}
+        {options.map((option) => (<DropdownMenu.CheckboxItem key={option.name} checked={innerValue?.includes(option.value)} onClick={() => setInnerValue(xor(value, [option.value]))}>
+            {option.name}
           </DropdownMenu.CheckboxItem>))}
       </DropdownMenu.Content>
     </DropdownMenu.Root>);

package/components/Input/SelectInput.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type InputProps } from "./index";
+declare function SelectInput({ options, onChange, ref, placeholder, inputClassName, value, name, ...props }: InputProps<false> & {
+    options: {
+        value: string;
+        name: ReactNode;
+    }[];
+    children?: ReactNode;
+    placeholder?: string;
+}): import("react").JSX.Element;
+export type SelectInputProps = ComponentProps<typeof SelectInput>;
+export default SelectInput;

package/components/Input/SelectInput.jsx

@@ -0,0 +1,25 @@
+import {} from "react";
+import Input, {} from "./index";
+import Select from "../Select/Select";
+import clsx from "../../utils/clsx";
+import useInputRefValue from "./useInputRefValue";
+function SelectInput({ options, onChange, ref, placeholder, inputClassName, value, name, ...props }) {
+    const { innerRef, innerValue, setInnerValue } = useInputRefValue({
+        value,
+        ref,
+        name,
+        onChange,
+    });
+    return (<Input as={Select.Root} {...props} ref={innerRef} {...{
+        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.Content>
+        {options?.map((option) => (<Select.Item key={option.value} value={option.value}>
+            {option.name}
+          </Select.Item>))}
+      </Select.Content>
+    </Input>);
+}
+export default SelectInput;

package/components/Input/useInputRefValue.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent, type Ref } from "react";
+export default function useInputRefValue<T>({ value, ref, name, onChange, }: {
+    value?: T;
+    ref?: Ref<HTMLInputElement>;
+    name?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}): {
+    innerRef: import("react").RefObject<HTMLInputElement>;
+    innerValue: T | undefined;
+    setInnerValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+};

package/components/Input/useInputRefValue.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from "react";
+import { useDeepCompareEffect } from "react-use";
+import { isEqual } from "lodash-es";
+export default function useInputRefValue({ value, ref, name, onChange, }) {
+    const [innerValue, setInnerValue] = useState(value);
+    useDeepCompareEffect(() => {
+        if (value && !isEqual(value, innerValue)) {
+            setInnerValue(value);
+        }
+    }, [{ value }]);
+    const innerRef = useRef({
+        get value() {
+            return innerValue;
+        },
+        set value(value) {
+            setInnerValue(value);
+        },
+    });
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(innerRef.current);
+            }
+            else {
+                try {
+                    ref.current = innerRef.current;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // do nothing
+                }
+            }
+        }
+    }, [ref]);
+    useDeepCompareEffect(() => {
+        if (onChange) {
+            onChange({
+                target: {
+                    name,
+                    value: innerValue,
+                },
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            });
+        }
+    }, [innerValue]);
+    return {
+        innerRef,
+        innerValue,
+        setInnerValue,
+    };
+}

package/components/Select/Select.d.ts

@@ -6,8 +6,9 @@ declare function SelectSeparator({ className, ...props }: ComponentProps<typeof
 declare function SelectItem({ children, className, indicatorClassName, ...props }: ComponentProps<typeof RSelect.Item> & {
     indicatorClassName?: string;
 }): import("react").JSX.Element;
-declare function SelectTrigger({ className, placeholder, children, readOnly, ref, ...props }: ComponentProps<typeof RSelect.Trigger> & ComponentProps<typeof Button> & {
+declare function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }: ComponentProps<typeof RSelect.Trigger> & ComponentProps<typeof Button> & {
     placeholder?: string;
+    buttonClassName?: string;
 }): import("react").JSX.Element;
 declare function SelectLabel({ className, ...props }: ComponentProps<typeof RSelect.Label>): import("react").JSX.Element;
 declare const Select: {

package/components/Select/Select.jsx

@@ -29,11 +29,11 @@ function SelectItem({ children, className, indicatorClassName, ...props }) {
       <RSelect.ItemText>{children}</RSelect.ItemText>
     </RSelect.Item>);
 }
-function SelectTrigger({ className, placeholder, children, readOnly, ref, ...props }) {
-    return (<RSelect.Trigger asChild {...props} className={className} ref={children ? ref : undefined}>
+function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }) {
+    return (<RSelect.Trigger asChild {...props} className={clsx("data-[placeholder]:text-zinc-500", className)} ref={children ? ref : undefined}>
       {children || (<Button trailing={!readOnly ? (<RSelect.Icon>
                 <ChevronDownIcon />
-              </RSelect.Icon>) : undefined} ref={ref} disabled={readOnly} className="opacity-100">
+              </RSelect.Icon>) : undefined} ref={ref} disabled={readOnly} className={clsx("rounded-md opacity-100", buttonClassName)}>
           <RSelect.Value placeholder={placeholder}/>
         </Button>)}
     </RSelect.Trigger>);

package/package.json

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