@majapisoftwares/ui 4.1.14 → 4.1.15

package/components/MultiSelect/MultiSelect.jsx

@@ -7,7 +7,7 @@ import { isEqual, take } from "lodash-es";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { useDeepCompareEffect } from "react-use";
 import { getValue, MultiSelectInput } from "./MultiSelectInput";
-const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
+const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black/5 dark:ring-zinc-700 focus:outline-hidden dark:bg-zinc-800";
 export default function MultiSelect({ placeholder, emptyText = "No item found.", items = [], renderProperty = "title", renderFunction, filterProperty = "title", filterFunction, onChange, query: defaultQuery = "", onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, creatable, getCreateLabel = (query) => `+ create "${query}"`, itemsRenderLimit, className, valueProperty = "_id", label, required, readOnly, error, ...props }) {
@@ -74,11 +74,11 @@ displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, cr
     return (<div className={clsx("relative", className)}>
       <Combobox 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    onChange={setSelectedItems} value={selectedItems} multiple>
+    onChange={setSelectedItems} value={selectedItems.map((item) => getValue(valueProperty, item))} multiple>
         {({ open }) => (<div>
             <ComponentInput 
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} as={MultiSelectInput} placeholder={!readOnly ? placeholder : undefined} value={query} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={inputClassName} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} labelClassName={clsx(defaultLabelClassName, labelClassName)} selectedItems={selectedItems} doRender={doRender} removeItem={removeItem} required={required && !selectedItems.length} label={label} readOnly={readOnly} valueProperty={valueProperty} helpTextClassName={helpTextClassName}/>
+        {...props} as={MultiSelectInput} placeholder={!readOnly ? placeholder : undefined} value={query} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={inputClassName} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} labelClassName={clsx(defaultLabelClassName, labelClassName)} selectedItems={selectedItems} doRender={doRender} removeItem={removeItem} required={required && !selectedItems.length} label={label} readOnly={readOnly} valueProperty={valueProperty} helpTextClassName={helpTextClassName} items={items}/>
 
             {!readOnly &&
                 ((creatable && query) || filteredItems.length > 0) && (<Combobox.Options static={isStatic} className={clsx(defaultMenuItemsClassName, "absolute z-10 mt-1 max-h-72 w-full scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200")}>
@@ -92,7 +92,7 @@ displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, cr
                             {selected ? query : getCreateLabel(query)}
                           </div>)}
                       </Combobox.Option>)}
-                  {renderedItems.map((item) => (<Combobox.Option key={getValue(valueProperty, item)} value={item} className={({ active }) => clsx("cursor-default px-4 py-2 select-none", {
+                  {renderedItems.map((item) => (<Combobox.Option key={getValue(valueProperty, item)} value={getValue(valueProperty, item)} className={({ active }) => clsx("cursor-default px-4 py-2 select-none", {
                         "bg-primary-600 text-white": active,
                     })}>
                       {({ selected }) => (<div className="flex">

package/components/MultiSelect/MultiSelectInput.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
 export declare function getValue<Id extends string | number, T extends object | string>(id: Id, item: T): string | number;
-export declare function MultiSelectInput<Id extends string | number, T extends object | string>({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, ...props }: {
+export declare function MultiSelectInput<Id extends string | number, T extends object | string>({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, items, ...props }: {
     className?: string;
-    selectedItems: T[];
+    selectedItems: string[];
     doRender: (item: T) => ReactNode;
     removeItem: (item: T) => () => void;
     valueProperty: Id;
     readOnly?: boolean;
     error?: boolean;
+    items?: T[];
 }): import("react").JSX.Element;

package/components/MultiSelect/MultiSelectInput.jsx

@@ -7,13 +7,18 @@ export function getValue(id, item) {
         ? item
         : item[id];
 }
-export function MultiSelectInput({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, ...props }) {
+export function MultiSelectInput({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, items, ...props }) {
     const ref = useRef(null);
     return (<div className={clsx("focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 flex flex-wrap border focus-within:ring-1", className)} onClick={() => ref.current?.focus()}>
       {!!selectedItems.length && (<div className="flex flex-wrap items-center gap-1 p-1.5 pb-0">
-          {selectedItems.map((item) => (<Badge key={getValue(valueProperty, item)} onActionClick={!readOnly ? removeItem(item) : undefined}>
-              {doRender(item)}
-            </Badge>))}
+          {selectedItems.map((selectedItem) => {
+                const item = items?.find((item) => getValue(valueProperty, item) === selectedItem);
+                if (!item)
+                    return null;
+                return (<Badge key={getValue(valueProperty, item)} onActionClick={!readOnly ? removeItem(item) : undefined}>
+                {doRender(item)}
+              </Badge>);
+            })}
         </div>)}
       {!readOnly && (<Combobox.Input 
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/package.json

@@ -4,6 +4,6 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.1.14",
+  "version": "4.1.15",
   "type": "module"
 }