@uxf/ui 10.0.0-beta.8 → 10.0.0-beta.80

package/message/message-content.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageContent = void 0;
+const react_1 = __importDefault(require("react"));
+const alert_bubble_1 = require("../alert-bubble");
+const button_1 = require("../button");
+const BUTTON_COLOR = {
+    default: "default",
+    error: "error",
+    warning: "warning",
+    success: "success",
+};
+const MessageContent = (props) => {
+    var _a, _b, _c;
+    const onAcceptClick = () => {
+        var _a;
+        props.onClose();
+        (_a = props.onAccept) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const onCancelClick = () => {
+        var _a;
+        props.onClose();
+        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const isCentered = props.variant === "centered";
+    return (react_1.default.createElement("div", { className: `uxf-message__content ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement("div", { className: "uxf-message__content-wrapper" },
+            props.CustomIconComponent !== null ? (react_1.default.createElement("div", { className: "uxf-message__icon-wrapper" }, (_b = props.CustomIconComponent) !== null && _b !== void 0 ? _b : (react_1.default.createElement(alert_bubble_1.AlertBubble, { className: "uxf-message__alert-bubble", color: props.color, size: isCentered ? "default" : "xs" })))) : null,
+            react_1.default.createElement("div", { className: "uxf-message__text-content" },
+                react_1.default.createElement("h2", { className: "uxf-message__title" }, props.title),
+                react_1.default.createElement("p", { className: "uxf-message__description" }, props.description)),
+            props.children),
+        react_1.default.createElement("div", { className: "uxf-message__buttons-wrapper" },
+            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", variant: "white", isFullWidth: isCentered, onClick: onCancelClick }, props.cancelLabel),
+            props.onAccept ? (react_1.default.createElement(button_1.Button, { className: "uxf-message__accept-button", color: BUTTON_COLOR[props.color], isFullWidth: isCentered, onClick: onAcceptClick }, (_c = props.acceptLabel) !== null && _c !== void 0 ? _c : "Ok")) : null)));
+};
+exports.MessageContent = MessageContent;
+exports.MessageContent.displayName = "UxfUiConfirmContent";

package/message/message-service.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { MessageProps, MessageRef } from "./message";
+declare function getMessageRef(): import("react").RefObject<MessageRef>;
+declare function openAlert(confirm: Omit<MessageProps, "onAccept" | "acceptLabel">): void;
+declare function openConfirm(confirm: Omit<MessageProps, "onAccept" | "acceptLabel"> & Required<Pick<MessageProps, "onAccept" | "acceptLabel">>): void;
+declare function close(): void;
+export declare const MessageService: {
+    getMessageRef: typeof getMessageRef;
+    openAlert: typeof openAlert;
+    openConfirm: typeof openConfirm;
+    close: typeof close;
+};
+export {};

package/message/message-service.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageService = void 0;
+const react_1 = require("react");
+const messageRef = (0, react_1.createRef)();
+function getMessageRef() {
+    return messageRef;
+}
+function openAlert(confirm) {
+    if (messageRef.current) {
+        messageRef.current.message(confirm);
+    }
+}
+function openConfirm(confirm) {
+    if (messageRef.current) {
+        messageRef.current.message(confirm);
+    }
+}
+function close() {
+    if (messageRef.current) {
+        messageRef.current.close();
+    }
+}
+exports.MessageService = {
+    getMessageRef,
+    openAlert,
+    openConfirm,
+    close,
+};

package/message/message.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { MessageColor, MessageVariant } from "./theme";
+export interface MessageProps {
+    CustomIconComponent?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    onCancel?: () => void;
+    onAccept?: () => void;
+    title: string;
+    description?: string;
+    acceptLabel?: string;
+    cancelLabel: string;
+    variant?: MessageVariant;
+    color: MessageColor;
+}
+export interface MessageRef {
+    close: () => void;
+    message: (message: MessageProps) => void;
+}
+export declare const Message: React.ForwardRefExoticComponent<React.RefAttributes<MessageRef>>;

package/message/message.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("../dialog");
+const message_content_1 = require("./message-content");
+exports.Message = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const [content, setContent] = (0, react_1.useState)();
+    const message = (0, react_1.useCallback)((newConfirm) => setContent(newConfirm), []);
+    const close = (0, react_1.useCallback)(() => setContent(null), []);
+    const innerRef = (0, react_1.useRef)({
+        close,
+        message,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        message: innerRef.current.message,
+    }), []);
+    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: !!content },
+        react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
+});
+exports.Message.displayName = "UxfUiMessage";

package/message/message.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/message/message.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const message_stories_1 = require("./message.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(message_stories_1.Default, null));

package/message/message.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.RefAttributes<import("./message").MessageRef>>;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/message/message.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const storybook_config_1 = require("../utils/storybook-config");
+const message_1 = require("./message");
+const message_service_1 = require("./message-service");
+exports.default = {
+    title: "UI/Message",
+    component: message_1.Message,
+};
+const getConfirmForSize = (variant, colors) => {
+    const confirmTypes = colors.map((color) => (react_1.default.createElement("div", { className: "space-y-2", key: color },
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openConfirm({
+                acceptLabel: "Potvrdit",
+                cancelLabel: "Zrušit",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onAccept: () => console.log("accepted"),
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " confirm"),
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openAlert({
+                cancelLabel: "Rozumím",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " alert"),
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openConfirm({
+                CustomIconComponent: null,
+                acceptLabel: "Potvrdit",
+                cancelLabel: "Zrušit",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onAccept: () => console.log("accepted"),
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " confirm no icon"))));
+    return (react_1.default.createElement("div", { className: "grid gap-4" },
+        react_1.default.createElement("div", { className: "flex w-full flex-col gap-2" }, confirmTypes)));
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (react_1.default.createElement("div", { className: "flex justify-center lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-10" },
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors))),
+        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-10 text-white" },
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
+            react_1.default.createElement("div", { className: "dark flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors)))));
+}
+exports.Default = Default;

package/message/theme.d.ts

@@ -0,0 +1,12 @@
+export interface MessageColors {
+    default: true;
+    success: true;
+    error: true;
+    warning: true;
+}
+export type MessageColor = keyof MessageColors;
+export interface MessageVariants {
+    simple: true;
+    centered: true;
+}
+export type MessageVariant = keyof MessageVariants;

package/message/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/modal/README.md

@@ -0,0 +1,24 @@
+# Modal
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/dialog/dialog.css");
+@import url("@uxf/ui/modal/modal.css");
+```
+
+## Implementation
+
+```tsx
+import {AppProps} from "next/app";
+import {getModalRef, Modal} from "@uxf/ui/modal";
+
+function App(props: AppProps) {
+    return (
+        <UiContextProvider value={...}>
+            {props.children}
+            <Modal ref={getModalRef()}/>
+        </UiContextProvider>
+    );
+}
+```

package/modal/index.d.ts

@@ -1,3 +1,4 @@
-export { closeModal, getModalRef, openModal } from "./modal-service";
-export type { ModalProps, ModalRef } from "./modal";
 export { Modal } from "./modal";
+export type { ModalProps, ModalRef } from "./modal";
+export { closeModal, getModalRef, openModal } from "./modal-service";
+export type { ModalWidth } from "./theme";

package/modal/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.openModal = exports.getModalRef = exports.closeModal = void 0;
+exports.openModal = exports.getModalRef = exports.closeModal = exports.Modal = void 0;
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
 var modal_service_1 = require("./modal-service");
 Object.defineProperty(exports, "closeModal", { enumerable: true, get: function () { return modal_service_1.closeModal; } });
 Object.defineProperty(exports, "getModalRef", { enumerable: true, get: function () { return modal_service_1.getModalRef; } });
 Object.defineProperty(exports, "openModal", { enumerable: true, get: function () { return modal_service_1.openModal; } });
-var modal_1 = require("./modal");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });

package/modal/modal.d.ts

@@ -1,11 +1,12 @@
 import React, { ReactNode } from "react";
-import type { ModalDialogProps } from "./modal-dialog";
+import type { DialogProps } from "../dialog";
+import { ModalWidth } from "./theme";
 export interface ModalProps {
     children: ReactNode;
-    className?: ModalDialogProps["className"];
-    disableBackdropClose?: ModalDialogProps["disableBackdropClose"];
+    className?: DialogProps["className"];
+    disableBackdropClose?: DialogProps["disableBackdropClose"];
     onClose?: () => void;
-    width?: ModalDialogProps["width"];
+    width?: ModalWidth;
 }
 export interface ModalRef {
     close: () => void;

package/modal/modal.js

@@ -25,11 +25,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
-const modal_dialog_1 = require("./modal-dialog");
+const dialog_1 = require("../dialog");
 exports.Modal = (0, react_1.forwardRef)((props, ref) => {
-    const [modal, setModal] = (0, react_1.useState)();
-    const open = (0, react_1.useCallback)((newModal) => setModal(newModal), []);
-    const close = (0, react_1.useCallback)(() => setModal(null), []);
+    var _a, _b;
+    const [content, setContent] = (0, react_1.useState)();
+    const open = (0, react_1.useCallback)((newModal) => setContent(newModal), []);
+    const close = (0, react_1.useCallback)(() => setContent(null), []);
     const innerRef = (0, react_1.useRef)({
         close,
         open,
@@ -39,13 +40,12 @@ exports.Modal = (0, react_1.forwardRef)((props, ref) => {
         open: innerRef.current.open,
     }), []);
     const onClose = (0, react_1.useCallback)(() => {
-        setModal((prev) => {
-            if (prev === null || prev === void 0 ? void 0 : prev.onClose) {
-                prev.onClose();
-            }
+        setContent((prev) => {
+            var _a;
+            (_a = prev === null || prev === void 0 ? void 0 : prev.onClose) === null || _a === void 0 ? void 0 : _a.call(prev);
             return null;
         });
     }, []);
-    return modal ? (react_1.default.createElement(modal_dialog_1.ModalDialog, { className: modal.className, disableBackdropClose: modal.disableBackdropClose, onClose: onClose, open: !!modal, width: modal.width }, modal.children)) : null;
+    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: `uxf-modal uxf-modal--width-${(_a = content.width) !== null && _a !== void 0 ? _a : "default"} ${(_b = content.className) !== null && _b !== void 0 ? _b : ""}`, disableBackdropClose: content.disableBackdropClose, onClose: onClose, open: !!content }, content.children)) : null;
 });
 exports.Modal.displayName = "UxfUiModal";

package/modal/modal.stories.js

@@ -19,6 +19,12 @@ function Default() {
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
             }) }, "Click to open modal - default"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "xs",
+            }) }, "Click to open modal - xs"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
                 children: (react_1.default.createElement("div", { className: "p-4" },
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
@@ -31,6 +37,12 @@ function Default() {
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
                 width: "lg",
             }) }, "Click to open modal - lg"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "xl",
+            }) }, "Click to open modal - xl"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
                 children: (react_1.default.createElement("div", { className: "p-4" },
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),

package/modal/theme.d.ts

@@ -1,5 +1,8 @@
 export interface ModalWidths {
+    xs: true;
     sm: true;
     default: true;
     lg: true;
+    xl: true;
 }
+export type ModalWidth = keyof ModalWidths;

package/multi-combobox/README.md

@@ -0,0 +1,10 @@
+# MultiCombobox
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/multi-combobox/multi-combobox.css");
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
+@import url("@uxf/ui/form-component/form-component.css");
+```

package/multi-combobox/_multi-combobox-base.js

@@ -24,7 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._MultiComboboxBase = void 0;
-const react_1 = require("@headlessui/react");
+const react_1 = require("@floating-ui/react");
+const react_2 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
@@ -34,14 +35,14 @@ const chip_1 = require("@uxf/ui/chip");
 const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
 const icon_1 = require("@uxf/ui/icon");
+const input_1 = require("@uxf/ui/input");
 const label_1 = require("@uxf/ui/label");
-const react_2 = __importStar(require("react"));
+const react_3 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
-const react_3 = require("@floating-ui/react");
-exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
+exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
-    const [query, setQuery] = (0, react_2.useState)("");
+    const [query, setQuery] = (0, react_3.useState)("");
     const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : [], props.loadOptions);
     const selectedOptions = (_b = props.value) !== null && _b !== void 0 ? _b : [];
     const filteredData = isAsync
@@ -53,9 +54,9 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
         });
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
     const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true, props.dropdownStrategy);
-    const inputRef = (0, react_2.useRef)(null);
+    const inputRef = (0, react_3.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
+    const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const onRemove = (valueId) => { var _a, _b; return props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []); };
     const handleRemove = (valueId) => (e) => {
         e.preventDefault();
@@ -90,24 +91,29 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
             ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
-    return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
         var _a, _b;
-        const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
-                selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
-                react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query }),
-                react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
-            renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
-                react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
+        const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
+            react_3.default.createElement(react_2.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
+                props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                react_3.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
+                    selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
+                    react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
+                props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
+                props.rightElement && react_3.default.createElement(input_1.Input.RightElement, null, props.rightElement),
+                react_3.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
+            renderProps.open && (react_3.default.createElement(react_1.FloatingPortal, null,
+                react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
                     const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                    return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
-                })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
-            props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
-        return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement("div", { className: "uxf-form-component__label" },
-                react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
-            react_2.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
+                    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
+                })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
+            props.helperText && withoutPopover && (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
+        return (react_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,
+            react_3.default.createElement("div", { className: "uxf-form-component__label" },
+                react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
+            react_3.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
     }));
 });
 exports._MultiComboboxBase.displayName = "UxfUiMultiComboboxBase";

package/multi-combobox/multi-combobox.js

@@ -27,9 +27,9 @@ exports.MultiCombobox = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const form_component_1 = require("../form-component");
 const icon_1 = require("@uxf/ui/icon");
 const react_2 = __importStar(require("react"));
+const form_component_1 = require("../form-component");
 const _multi_combobox_base_1 = require("./_multi-combobox-base");
 exports.MultiCombobox = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;

package/multi-combobox/multi-combobox.stories.js

@@ -28,19 +28,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Async = exports.Default = void 0;
 const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const multi_combobox_1 = require("./multi-combobox");
-const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/MultiCombobox",
     component: multi_combobox_1.MultiCombobox,
 };
 const options = [
     { id: "one", label: "Option red", color: "red" },
-    { id: "two", label: "Option blue", color: "blue" },
+    { id: "two", label: "Option blue", color: "blue", disabled: true },
     { id: "three", label: "Option green", color: "green" },
     { id: "four", label: "Option four" },
-    { id: "five", label: "Option five" },
+    { id: "five", label: "Option five disabled" },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
 ];
 function Default() {
@@ -57,7 +57,10 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-4", label: "MultiCombobox with popup and checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true, withPopover: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-5", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Error message", id: "multi-combobox-6", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value })));
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-8", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

package/multi-combobox/types.d.ts

@@ -1,9 +1,9 @@
 import { Placement, Strategy } from "@floating-ui/react";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
-import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiComboboxValueId = number | string;
 export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
     id: ValueId;
@@ -25,12 +25,16 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: string;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
     loadOptions?: (query: string) => Promise<Option[]>;
     noQueryMessage?: string;
     notFoundMessage?: string;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;

package/multi-select/README.md

@@ -0,0 +1,11 @@
+# MultiSelect
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/multi-combobox/multi-combobox.css");
+@import url("@uxf/ui/multi-select/multi-select.css");
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
+@import url("@uxf/ui/form-component/form-component.css");
+```