@majapisoftwares/ui 4.0.2

package/components/Menu/Menu.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
+import Button from "../Button/Button";
+import { UnstyledButtonProps } from "../Button/UnstyledButton";
+import { TextProps } from "../Text";
+export declare const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
+export type MenuProps = {
+    className?: string;
+    position?: "left" | "right" | "bottom-right" | "bottom-left";
+    iconClassName?: string;
+    menuItemsClassName?: string;
+    buttonProps?: ComponentPropsWithoutRef<typeof Button>;
+    label?: ReactNode;
+    children?: ReactNode;
+    button?: ReactNode;
+    unmount?: boolean;
+    ref?: Ref<HTMLDivElement>;
+};
+export type MenuItemProps<T extends HTMLElement = HTMLButtonElement> = UnstyledButtonProps<T> & {
+    icon?: ReactElement<{
+        className?: string;
+    }>;
+};
+export type MenuLabelProps = TextProps;
+declare const _default: (({ className, iconClassName, position, children, label, button, buttonProps, unmount, menuItemsClassName, ...props }: MenuProps) => import("react").JSX.Element) & {
+    Label: (props: MenuLabelProps) => import("react").JSX.Element;
+    Item: <T extends HTMLElement = HTMLButtonElement>({ className, icon, children, ...props }: MenuItemProps<T>) => import("react").JSX.Element;
+};
+export default _default;

package/components/Menu/Menu.jsx

@@ -0,0 +1,54 @@
+import { cloneElement, Fragment, } from "react";
+import { Menu as HuiMenu, Transition } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import clsx from "../../utils/clsx";
+import Button from "../Button/Button";
+import UnstyledButton from "../Button/UnstyledButton";
+import Text from "../Text";
+import { useMount } from "react-use";
+export 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 Item = function MenuItem({ className, icon, children, ...props }) {
+    return (<HuiMenu.Item>
+      {({ active }) => (<UnstyledButton {...props} type="button" className={clsx("flex w-full items-center text-left", active
+                ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-700/50 dark:text-zinc-100"
+                : "text-zinc-700 dark:text-zinc-200", "block px-4 py-2 text-sm", className)}>
+          {icon &&
+                cloneElement(icon, {
+                    className: clsx("w-5 mr-2", icon.props.className),
+                })}
+          {children}
+        </UnstyledButton>)}
+    </HuiMenu.Item>);
+};
+const Label = function MenuLabel(props) {
+    return (<Text {...props} variant="label" className={clsx("w-full text-left", "block px-4 py-2 text-sm", props.className)}/>);
+};
+const Menu = function Menu({ className, iconClassName, position = "right", children, label, button, buttonProps, unmount, menuItemsClassName, ...props }) {
+    useMount(() => {
+        console.warn("<Menu> was deprecated and should be replaced with <DropdownMenu>");
+    });
+    return (<HuiMenu as="div" className={clsx("relative inline-block text-left", className)} {...props}>
+      <div>
+        {button ? (<HuiMenu.Button as={Fragment}>{button}</HuiMenu.Button>) : (<HuiMenu.Button 
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        as={Button} className={clsx("flex w-full", buttonProps?.className)} trailing={<ChevronDownIcon className={iconClassName}/>} {...buttonProps}>
+            {label}
+          </HuiMenu.Button>)}
+      </div>
+
+      <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
+        <HuiMenu.Items unmount={unmount} className={clsx(defaultMenuItemsClassName, "absolute mt-2 min-w-[14rem]", {
+            "right-0": position.includes("right"),
+            "origin-top-right": position.includes("right") && !position.includes("bottom"),
+            "origin-top-left": position.includes("left") && !position.includes("bottom"),
+            "origin-bottom-right": position.includes("right") && position.includes("bottom"),
+            "origin-bottom-left": position.includes("left") && position.includes("bottom"),
+            "left-0": position.includes("left"),
+            "bottom-0": position.includes("bottom"),
+        }, menuItemsClassName)}>
+          <div className="py-1">{children}</div>
+        </HuiMenu.Items>
+      </Transition>
+    </HuiMenu>);
+};
+export default Object.assign(Menu, { Label, Item });

package/components/Modal/Modal.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from "react";
+import Button from "../Button";
+declare function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }: {
+    open?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+    overlayClassName?: string;
+    panelClassName?: string;
+    dialogClassName?: string;
+    dialogOuterPanelClassName?: string;
+    dialogOverflowClassName?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+declare namespace Modal {
+    var Container: typeof ModalContainer;
+    var Title: typeof ModalTitle;
+    var Content: typeof ModalContent;
+    var Actions: typeof ModalActions;
+    var Icon: typeof ModalIcon;
+    var CloseButton: typeof ModalCloseButton;
+}
+export default Modal;
+declare function ModalContainer({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function ModalTitle({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function ModalContent({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function ModalActions({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function ModalIcon({ children, }: {
+    children?: ReactElement<{
+        className?: string;
+        "aria-hidden"?: string;
+    }>;
+}): import("react").JSX.Element;
+declare function ModalCloseButton({ className, ...props }: ComponentPropsWithoutRef<typeof Button>): import("react").JSX.Element;

package/components/Modal/Modal.jsx

@@ -0,0 +1,65 @@
+import { cloneElement, Fragment, useCallback, } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import Stack from "../Stack";
+import Group from "../Group";
+import Button from "../Button";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "../../utils/clsx";
+export default function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }) {
+    const handleOnClose = useCallback(() => onClose?.(), [onClose]);
+    return (<Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className={clsx("relative z-10", dialogClassName)} onClose={handleOnClose} style={style}>
+        <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+          <div className={clsx("fixed inset-0 bg-white/75 transition-opacity dark:bg-black/75", overlayClassName)}/>
+        </Transition.Child>
+
+        <div className={clsx("fixed inset-0 z-10 overflow-y-auto", dialogOverflowClassName)}>
+          <div className={clsx("flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", dialogOuterPanelClassName)}>
+            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className={clsx("relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-zinc-900 dark:ring-1 dark:ring-white/5 sm:my-8 sm:w-full sm:max-w-sm", panelClassName)}>
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>);
+}
+Modal.Container = ModalContainer;
+function ModalContainer({ children, className, }) {
+    return (<Stack className={clsx("gap-4! px-4 pb-4 pt-5 sm:p-6", className)}>
+      {children}
+    </Stack>);
+}
+Modal.Title = ModalTitle;
+function ModalTitle({ children, className, }) {
+    return (<Dialog.Title as="h3" className={clsx("text-center text-lg font-medium leading-6 text-zinc-900 dark:text-zinc-100", className)}>
+      {children}
+    </Dialog.Title>);
+}
+Modal.Content = ModalContent;
+function ModalContent({ children, className, }) {
+    return (<div className={clsx("text-center text-sm text-zinc-500 dark:text-zinc-400", className)}>
+      {children}
+    </div>);
+}
+Modal.Actions = ModalActions;
+function ModalActions({ children, className, }) {
+    return <Group className={className}>{children}</Group>;
+}
+Modal.Icon = ModalIcon;
+function ModalIcon({ children, }) {
+    return (<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-800">
+      {children &&
+            cloneElement(children, {
+                className: "h-6 w-6 text-green-600 dark:text-green-400",
+                "aria-hidden": "true",
+            })}
+    </div>);
+}
+Modal.CloseButton = ModalCloseButton;
+function ModalCloseButton({ className, ...props }) {
+    return (<Button icon className={clsx("absolute right-2 top-2", className)} variant="text" {...props}>
+      <XMarkIcon />
+    </Button>);
+}

package/components/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import Modal from "./Modal";
+export * from "./Modal";
+export default Modal;
+export { default as useModalState } from "./useModalState";

package/components/Modal/index.jsx

@@ -0,0 +1,4 @@
+import Modal from "./Modal";
+export * from "./Modal";
+export default Modal;
+export { default as useModalState } from "./useModalState";

package/components/Modal/useModalState.d.ts

@@ -0,0 +1,6 @@
+export default function useModalState(): readonly [boolean, {
+    readonly setModalOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    readonly openModal: () => void;
+    readonly closeModal: () => void;
+    readonly toggleModal: () => void;
+}];

package/components/Modal/useModalState.js

@@ -0,0 +1,16 @@
+import { useCallback, useMemo, useState } from "react";
+export default function useModalState() {
+    const [modalOpen, setModalOpen] = useState(false);
+    const handleModalToggle = useCallback(() => setModalOpen((open) => !open), []);
+    const handleModalOpen = useCallback(() => setModalOpen(true), []);
+    const handleModalClose = useCallback(() => setModalOpen(false), []);
+    return useMemo(() => [
+        modalOpen,
+        {
+            setModalOpen,
+            openModal: handleModalOpen,
+            closeModal: handleModalClose,
+            toggleModal: handleModalToggle,
+        },
+    ], [handleModalClose, handleModalOpen, handleModalToggle, modalOpen]);
+}

package/components/ModeToggle/ModeToggle.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from "react";
+export interface ModeToggleProps {
+    ariaLabel?: string;
+    className?: string;
+    iconClassName?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const ModeToggle: ({ ariaLabel, className, iconClassName, ref, }: ModeToggleProps) => import("react").JSX.Element;
+export default ModeToggle;

package/components/ModeToggle/ModeToggle.jsx

@@ -0,0 +1,12 @@
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+import useModeToggle from "./useModeToggle";
+const ModeToggle = function ModeToggle({ ariaLabel = "Toggle dark mode", className, iconClassName, ref, }) {
+    const toggleMode = useModeToggle();
+    return (<Button ref={ref} icon variant="text" aria-label={ariaLabel} onClick={toggleMode} className={className}>
+      <SunIcon className={clsx("dark:hidden", iconClassName)}/>
+      <MoonIcon className={clsx("hidden dark:block", iconClassName)}/>
+    </Button>);
+};
+export default ModeToggle;

package/components/ModeToggle/index.d.ts

@@ -0,0 +1,4 @@
+import ModeToggle from "./ModeToggle";
+export * from "./ModeToggle";
+export default ModeToggle;
+export { default as useModeToggle } from "./useModeToggle";

package/components/ModeToggle/index.jsx

@@ -0,0 +1,5 @@
+import ModeToggle from "./ModeToggle";
+export * from "./ModeToggle";
+export default ModeToggle;
+// noinspection JSUnusedGlobalSymbols
+export { default as useModeToggle } from "./useModeToggle";

package/components/ModeToggle/useModeToggle.d.ts

@@ -0,0 +1 @@
+export default function useModeToggle(): () => void;

package/components/ModeToggle/useModeToggle.js

@@ -0,0 +1,21 @@
+export default function useModeToggle() {
+    function disableTransitionsTemporarily() {
+        document.documentElement.classList.add("**:transition-none!");
+        window.setTimeout(() => {
+            document.documentElement.classList.remove("**:transition-none!");
+        }, 0);
+    }
+    function toggleMode() {
+        disableTransitionsTemporarily();
+        const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const isSystemDarkMode = darkModeMediaQuery.matches;
+        const isDarkMode = document.documentElement.classList.toggle("dark");
+        if (isDarkMode === isSystemDarkMode) {
+            delete window.localStorage.isDarkMode;
+        }
+        else {
+            window.localStorage.isDarkMode = isDarkMode;
+        }
+    }
+    return toggleMode;
+}

package/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import Input, { UnstyledInputProps } from "../Input";
+export interface MultiSelectProps<T extends object | string> extends Omit<UnstyledInputProps<false>, "as" | "onSelect" | "inputClassName" | "innerClassName" | "value" | "onChange"> {
+    placeholder?: string;
+    emptyText?: string;
+    items?: T[];
+    filterProperty?: keyof T;
+    filterFunction?: (item: T) => boolean;
+    onChange?: (items: T[]) => void;
+    renderProperty?: keyof T;
+    renderFunction?: (item: T) => ReactNode;
+    query?: string;
+    onChangeQuery?: (query: string) => void;
+    loading?: boolean;
+    leadingClassName?: string;
+    inputInnerClassName?: string;
+    inputElementClassName?: string;
+    leading?: ReactNode;
+    as?: typeof Input;
+    static?: boolean;
+    displayValue?: (item: T | null) => string;
+    value?: T[];
+    creatable?: boolean;
+    getCreateLabel?: (query: string) => string;
+    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;

package/components/MultiSelect/MultiSelect.jsx

@@ -0,0 +1,130 @@
+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 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";
+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 }) {
+    const [query, setQuery] = useState(defaultQuery);
+    const [selectedItems, setSelectedItems] = useState(value || []);
+    // noinspection DuplicatedCode
+    useEffect(() => {
+        if (query !== defaultQuery) {
+            setQuery(defaultQuery);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultQuery]);
+    useEffect(() => {
+        if (onChangeQuery && query !== defaultQuery) {
+            onChangeQuery(query);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query]);
+    const filteredItems = useMemo(() => query === ""
+        ? items
+        : items.filter(filterFunction ||
+            ((item) => (typeof item === "string"
+                ? item
+                : item[filterProperty])
+                .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"/>
+      </Combobox.Button>) : undefined));
+    const ComponentInput = as || UnstyledInput;
+    const doRender = useCallback((item) => renderFunction
+        ? renderFunction(item)
+        : typeof item === "string"
+            ? item
+            : 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>
+      </>);
+    }
+    const renderedItems = itemsRenderLimit
+        ? take(filteredItems, itemsRenderLimit)
+        : filteredItems;
+    return (<div className={clsx("relative", className)}>
+      <Combobox 
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    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}/>
+
+            {!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")}>
+                  {!renderedItems.some((item) => getValue(valueProperty, item) === query) &&
+                    creatable &&
+                    !!query && (<Combobox.Option value={query} className={({ active }) => clsx("cursor-default select-none px-4 py-2", {
+                        "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", {
+                        "bg-primary-600 text-white": active,
+                    })}>
+                      {({ 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>
+    </div>);
+}

package/components/MultiSelect/index.d.ts

@@ -0,0 +1,3 @@
+import MultiSelect from "./MultiSelect";
+export * from "./MultiSelect";
+export default MultiSelect;

package/components/MultiSelect/index.jsx

@@ -0,0 +1,3 @@
+import MultiSelect from "./MultiSelect";
+export * from "./MultiSelect";
+export default MultiSelect;

package/components/MultiText/MultiText.d.ts

@@ -0,0 +1,23 @@
+import { ChangeEventHandler, FocusEventHandler, Ref } from "react";
+export interface MultiTextProps {
+    value?: string[];
+    onChangeValue?: (value: string[]) => void;
+    name?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    id?: string;
+    className?: string;
+    helpText?: string;
+    label?: string;
+    validate?: (value: string) => boolean;
+    invalidHelpText?: string;
+    error?: boolean;
+    format?: (item: string) => string;
+    readOnly?: boolean;
+    loading?: boolean;
+    type?: string;
+    required?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+declare function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className, helpText, label, validate, invalidHelpText, error, format, readOnly, loading, type, required, ref, }: MultiTextProps): import("react").JSX.Element;
+export default MultiText;

package/components/MultiText/MultiText.jsx

@@ -0,0 +1,119 @@
+import { useEffect, useId, useRef, useState, } from "react";
+import { isEqual, uniq } from "lodash-es";
+import { useDeepCompareEffect } from "react-use";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import InputWrapper from "../Input2/InputWrapper";
+function defaultFormat(item) {
+    return item;
+}
+function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className, helpText, label, validate, invalidHelpText, error, format = defaultFormat, readOnly, loading, type, required, ref, }) {
+    const innerId = useId();
+    id = id || innerId;
+    const inputRef = useRef(null);
+    const [innerFocused, setInnerFocused] = useState(false);
+    const [innerValue, setInnerValue] = useState(value || []);
+    const [inputValue, setInputValue] = useState("");
+    const [invalid, setInvalid] = useState(false);
+    useDeepCompareEffect(() => {
+        if (value && onChangeValue && !isEqual(value, innerValue)) {
+            onChangeValue(innerValue);
+        }
+    }, [innerValue]);
+    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
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [innerValue]);
+    return (<InputWrapper id={id} className={className} helpText={(invalid ? invalidHelpText : undefined) || helpText} label={label} error={invalid || error} required={required}>
+      <div className="ui-multi-text" onClick={() => inputRef.current?.focus()} data-focused={innerFocused ? "" : undefined} data-error={invalid || error ? "" : undefined} data-loading={loading ? "" : undefined} data-readonly={readOnly ? "" : undefined}>
+        {!!innerValue?.length && (<div className="-mx-2 flex w-full flex-wrap gap-0.5">
+            {innerValue.map((item, i) => {
+                const removeItem = () => {
+                    const newValue = [...innerValue];
+                    newValue.splice(i, 1);
+                    setInnerValue(newValue);
+                    inputRef.current?.focus();
+                };
+                return (<span className="ui-multi-text-item" key={i} onClick={(e) => e.stopPropagation()} onDoubleClick={() => {
+                        setInputValue(item);
+                        removeItem();
+                    }}>
+                  <span className="ui-multi-text-item-content">
+                    {format(item)}
+                  </span>
+                  {!readOnly && (<button className="ui-multi-text-delete-button" onClick={removeItem} type="button">
+                      <XMarkIcon className="ui-multi-text-delete-icon"/>
+                    </button>)}
+                </span>);
+            })}
+          </div>)}
+        <input id={id} ref={inputRef} type={type || "text"} className="ui-multi-text-input" value={inputValue} onChange={(e) => {
+            setInvalid(false);
+            setInputValue(e.target.value);
+        }} onBlur={(e) => {
+            setInnerFocused(false);
+            const value = e.currentTarget.value;
+            if (value) {
+                if (!validate || validate(value)) {
+                    setInvalid(false);
+                    setInnerValue(uniq([...(innerValue || []), value]));
+                    setInputValue("");
+                }
+                else {
+                    setInvalid(true);
+                }
+            }
+            onBlur?.(e);
+        }} onKeyDown={(e) => {
+            const value = e.currentTarget.value;
+            if (e.code === "Enter") {
+                e.preventDefault();
+                if (!validate || validate(value)) {
+                    setInnerValue(uniq([...(innerValue || []), value]));
+                    setInputValue("");
+                }
+                else {
+                    setInvalid(true);
+                }
+            }
+        }} onFocus={() => setInnerFocused(true)} readOnly={readOnly} required={required && innerValue.length === 0}/>
+      </div>
+    </InputWrapper>);
+}
+export default MultiText;

package/components/MultiText/index.d.ts

@@ -0,0 +1,3 @@
+import MultiText from "./MultiText";
+export * from "./MultiText";
+export default MultiText;

package/components/MultiText/index.jsx

@@ -0,0 +1,3 @@
+import MultiText from "./MultiText";
+export * from "./MultiText";
+export default MultiText;

package/components/NavigationDrawer/NavigationDrawer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }: {
+    children: ReactNode;
+    navigationChildren: ReactNode;
+    position?: "left" | "right";
+    title?: ReactNode;
+    noPadding?: boolean;
+    panelClassName?: string;
+}): import("react").JSX.Element;