@majapisoftwares/ui 4.1.5 → 4.1.7

package/components/Breadcrumbs/Breadcrumbs.jsx

@@ -9,7 +9,7 @@ export default function Breadcrumbs({ pages, homeHref = "/", className, loading,
         return null;
     }
     return (<nav className={clsx("flex", className)} aria-label="Breadcrumb">
-      <ol role="list" className="flex w-full space-x-4 bg-white px-6 shadow-sm md:w-auto md:rounded-md dark:border-y dark:border-zinc-800 dark:bg-zinc-900 md:dark:border-x">
+      <ol role="list" className="flex w-full space-x-4 overflow-auto bg-white px-6 whitespace-nowrap shadow-sm md:w-auto md:rounded-md dark:border-y dark:border-zinc-800 dark:bg-zinc-900 md:dark:border-x">
         <li className="flex">
           <div className="flex items-center">
             <NextLink href={homeHref} className="text-zinc-400 hover:text-zinc-500 dark:hover:text-zinc-200">

package/components/MultiSelect/MultiSelect.d.ts

@@ -25,4 +25,4 @@ export interface MultiSelectProps<T extends object | string> extends Omit<Unstyl
     itemsRenderLimit?: number;
     valueProperty?: string | number;
 }
-export default function MultiSelect<T extends object | string>({ placeholder, emptyText, items, renderProperty, renderFunction, filterProperty, filterFunction, onChange, query: defaultQuery, onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, labelClassName, creatable, getCreateLabel, itemsRenderLimit, className, valueProperty, label, required, readOnly, ...props }: MultiSelectProps<T>): import("react").JSX.Element;
+export default function MultiSelect<T extends object | string>({ placeholder, emptyText, items, renderProperty, renderFunction, filterProperty, filterFunction, onChange, query: defaultQuery, onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, labelClassName, creatable, getCreateLabel, itemsRenderLimit, className, valueProperty, label, required, readOnly, error, ...props }: MultiSelectProps<T>): import("react").JSX.Element;

package/components/MultiSelect/MultiSelect.jsx

@@ -1,34 +1,16 @@
 import { Combobox } from "@headlessui/react";
 import Loading from "../Loading";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { defaultHelpTextClassName, defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
 import clsx from "../../utils/clsx";
 import { isEqual, take } from "lodash-es";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import Badge from "../Badge";
 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";
-function getValue(id, item) {
-    return typeof item === "string"
-        ? item
-        : item[id];
-}
-function MultiSelectInput({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, ...props }) {
-    const ref = useRef(null);
-    return (<div className={clsx("flex flex-wrap border focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500 dark:focus-within:border-primary-500", 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>))}
-        </div>)}
-      {!readOnly && (<Combobox.Input 
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} ref={ref} className="rounded-md border-none ring-transparent! disabled:cursor-not-allowed disabled:text-zinc-500 dark:bg-zinc-800 dark:disabled:bg-zinc-900/90 sm:text-sm" readOnly={readOnly}/>)}
-    </div>);
-}
 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, ...props }) {
+displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, creatable, getCreateLabel = (query) => `+ create "${query}"`, itemsRenderLimit, className, valueProperty = "_id", label, required, readOnly, error, ...props }) {
     const [query, setQuery] = useState(defaultQuery);
     const [selectedItems, setSelectedItems] = useState(value || []);
     // noinspection DuplicatedCode
@@ -53,8 +35,8 @@ displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, cr
                 .toLowerCase()
                 .includes(query.toLowerCase()))), [filterFunction, filterProperty, items, query]);
     trailing = loading ? (<Loading />) : (trailing ||
-        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
-        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
+        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
+        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
       </Combobox.Button>) : undefined));
     const ComponentInput = as || UnstyledInput;
     const doRender = useCallback((item) => renderFunction
@@ -64,67 +46,71 @@ displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, cr
             : item[renderProperty], [renderFunction, renderProperty]);
     useDeepCompareEffect(() => {
         onChange?.(selectedItems);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems || {}]);
     useDeepCompareEffect(() => {
         if (!isEqual(selectedItems, value)) {
             setSelectedItems(value || []);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value || {}]);
     const removeItem = useCallback((item) => () => setSelectedItems((selectedItems) => [
         ...selectedItems.filter((i) => getValue(valueProperty, i) !== getValue(valueProperty, item)),
     ]), [valueProperty]);
     if (label && required) {
-        label = (<>
-        {label} <span className="text-red-500">*</span>
+        label = (<>
+        {label} <span className="text-red-500">*</span>
       </>);
     }
     const renderedItems = itemsRenderLimit
         ? take(filteredItems, itemsRenderLimit)
         : filteredItems;
-    return (<div className={clsx("relative", className)}>
+    let inputClassName = clsx(defaultInputClassName, "bg-white dark:bg-zinc-800 pl-0", inputElementClassName, {
+        "border-dashed": readOnly,
+    });
+    let helpTextClassName = defaultHelpTextClassName;
+    if (error) {
+        inputClassName = clsx(inputClassName, "border-error-300 dark:border-error-500 text-error-900 dark:text-error-500 placeholder-error-300 focus:border-error-500 dark:focus:border-error-500 focus:ring-error-500");
+        helpTextClassName = clsx(helpTextClassName, "text-error-600 dark:text-error-500");
+    }
+    return (<div className={clsx("relative", className)}>
       <Combobox 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    onChange={setSelectedItems} value={selectedItems} multiple>
-        {({ open }) => (<div>
+    onChange={setSelectedItems} value={selectedItems} 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={clsx(defaultInputClassName, "bg-white dark:bg-zinc-800 pl-0", inputElementClassName, {
-                "border-dashed": readOnly,
-            })} 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}/>
-
+        {...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}/>
+
             {!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")}>
+                ((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")}>
                   {!renderedItems.some((item) => getValue(valueProperty, item) === query) &&
                     creatable &&
-                    !!query && (<Combobox.Option value={query} className={({ active }) => clsx("cursor-default select-none px-4 py-2", {
+                    !!query && (<Combobox.Option value={query} className={({ active }) => clsx("cursor-default px-4 py-2 select-none", {
                         "bg-primary-600 text-white": active,
-                    })}>
-                        {({ selected }) => (<div className="flex">
-                            {selected && <CheckIcon className="mr-2 w-5"/>}
-                            {selected ? query : getCreateLabel(query)}
-                          </div>)}
-                      </Combobox.Option>)}
-                  {renderedItems.map((item) => (<Combobox.Option key={getValue(valueProperty, item)} value={item} className={({ active }) => clsx("cursor-default select-none px-4 py-2", {
+                    })}>
+                        {({ selected }) => (<div className="flex">
+                            {selected && <CheckIcon className="mr-2 w-5"/>}
+                            {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", {
                         "bg-primary-600 text-white": active,
-                    })}>
-                      {({ selected }) => (<div className="flex">
-                          {selected && <CheckIcon className="mr-2 w-5"/>}
-                          {doRender(item)}
-                        </div>)}
-                    </Combobox.Option>))}
-                </Combobox.Options>)}
-
+                    })}>
+                      {({ selected }) => (<div className="flex">
+                          {selected && <CheckIcon className="mr-2 w-5"/>}
+                          {doRender(item)}
+                        </div>)}
+                    </Combobox.Option>))}
+                </Combobox.Options>)}
+
             {!readOnly &&
                 !creatable &&
                 open &&
                 emptyText &&
                 query !== "" &&
-                filteredItems.length === 0 && (<p className={clsx(defaultMenuItemsClassName, "absolute mt-1 w-full p-4 text-sm text-zinc-500 dark:text-zinc-400")}>
-                  {emptyText}
-                </p>)}
-          </div>)}
-      </Combobox>
+                filteredItems.length === 0 && (<p className={clsx(defaultMenuItemsClassName, "absolute mt-1 w-full p-4 text-sm text-zinc-500 dark:text-zinc-400")}>
+                  {emptyText}
+                </p>)}
+          </div>)}
+      </Combobox>
     </div>);
 }

package/components/MultiSelect/MultiSelectInput.d.ts

@@ -0,0 +1,11 @@
+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 }: {
+    className?: string;
+    selectedItems: T[];
+    doRender: (item: T) => ReactNode;
+    removeItem: (item: T) => () => void;
+    valueProperty: Id;
+    readOnly?: boolean;
+    error?: boolean;
+}): import("react").JSX.Element;

package/components/MultiSelect/MultiSelectInput.jsx

@@ -0,0 +1,22 @@
+import { useRef } from "react";
+import clsx from "../../utils/clsx";
+import Badge from "../Badge";
+import { Combobox } from "@headlessui/react";
+export function getValue(id, item) {
+    return typeof item === "string"
+        ? item
+        : item[id];
+}
+export function MultiSelectInput({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, ...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>))}
+        </div>)}
+      {!readOnly && (<Combobox.Input 
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        {...props} ref={ref} className="rounded-md border-none ring-transparent! disabled:cursor-not-allowed disabled:text-zinc-500 sm:text-sm dark:bg-zinc-800 dark:disabled:bg-zinc-900/90" readOnly={readOnly}/>)}
+    </div>);
+}

package/components/MultiSelect/index.d.ts

@@ -1,3 +1,5 @@
 import MultiSelect from "./MultiSelect";
 export * from "./MultiSelect";
 export default MultiSelect;
+export { MultiSelectInput } from "./MultiSelectInput";
+export { getValue } from "./MultiSelectInput";

package/components/MultiSelect/index.jsx

@@ -1,3 +1,5 @@
 import MultiSelect from "./MultiSelect";
 export * from "./MultiSelect";
 export default MultiSelect;
+export { MultiSelectInput } from "./MultiSelectInput";
+export { getValue } from "./MultiSelectInput";

package/package.json

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