@uxf/ui 10.0.0-beta.4 → 10.0.0-beta.6

package/_select-base/_select-base.js

@@ -51,8 +51,9 @@ const InputArrow = (props) => {
     return react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", props.open && classes_1.CLASSES.IS_OPEN), name: iconName });
 };
 const Options = (props) => {
+    var _a, _b;
     const HUIComponent = props.HUIComponent;
-    return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top"), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
+    return (react_2.default.createElement(HUIComponent.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"}`, props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top"), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
         var _a, _b, _c, _d;
         const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
         return (react_2.default.createElement(HUIComponent.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, (_d = (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : optionKey) !== null && _d !== void 0 ? _d : option.label));
@@ -87,7 +88,7 @@ const _SelectBase = (props) => {
                         react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))) : (react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))),
                 props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             renderProps.open && (react_2.default.createElement(react_1.FloatingPortal, null,
-                react_2.default.createElement(Options, { HUIComponent: HUIComponent, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, style: dropdown.floatingStyles }))),
+                react_2.default.createElement(Options, { HUIComponent: HUIComponent, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
 };
 exports._SelectBase = _SelectBase;

package/chip/chip.d.ts

@@ -1,13 +1,11 @@
-import { ChipColors, ChipSizes, ChipVariants } from "@uxf/ui/chip/theme";
-import React, { HTMLAttributes, MouseEventHandler } from "react";
-export type ChipColor = keyof ChipColors;
-export type ChipSize = keyof ChipSizes;
-export type ChipVariant = keyof ChipVariants;
-export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+import { ChipColor, ChipSize, ChipVariant } from "@uxf/ui/chip/theme";
+import React, { AnchorHTMLAttributes, MouseEventHandler } from "react";
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+export interface ChipProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "type">, UseAnchorProps {
     color?: ChipColor;
     onClose?: MouseEventHandler;
     size?: ChipSize;
     suppressFocus?: boolean;
     variant?: ChipVariant;
 }
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLAnchorElement>>;

package/chip/chip.js

@@ -26,15 +26,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const CloseButton = (props) => {
+    const onClose = (e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return (react_1.default.createElement("button", { className: "uxf-chip__button", onClick: onClose, tabIndex: props.suppressFocus ? -1 : undefined, type: "button" },
+        react_1.default.createElement("span", { className: "uxf-chip__close-button-label" }, "Remove option"),
+        react_1.default.createElement("svg", { className: "uxf-chip__close-button-icon", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
+            react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))));
+};
 exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { children, className, onClose, suppressFocus, ...restProps } = props;
+    const { children, className, href, onClose, ...restProps } = props;
     const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, onClose && "has-button", className);
-    return (react_1.default.createElement("div", { className: chipClassName, ref: ref, ...restProps },
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        className: (0, cx_1.cx)(chipClassName),
+        ...restProps,
+    });
+    return (react_1.default.createElement("a", { href: href, className: chipClassName, ref: ref, ...anchorProps },
         typeof children === "string" ? react_1.default.createElement("span", { className: "uxf-chip__text" }, children) : children,
-        onClose && (react_1.default.createElement("button", { className: "uxf-chip__button", onClick: onClose, tabIndex: suppressFocus ? -1 : undefined, type: "button" },
-            react_1.default.createElement("span", { className: "sr-only" }, "Remove option"),
-            react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
-                react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))))));
+        !!onClose && react_1.default.createElement(CloseButton, { onClose: onClose })));
 });
-exports.Chip.displayName = "UxfUiChip";
+exports.Chip.displayName = "UxfChip";

package/chip/chip.spec.d.ts

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

package/chip/chip.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 chip_stories_1 = require("./chip.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(chip_stories_1.Default, null));

package/chip/chip.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("@uxf/ui/chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/chip").ChipProps & React.RefAttributes<HTMLAnchorElement>>;
     parameters: {
         docs: {};
     };

package/chip/index.d.ts

@@ -1 +1,3 @@
-export * from "./chip";
+export type { ChipColor, ChipSize, ChipVariant } from "./theme";
+export type { ChipProps } from "./chip";
+export { Chip } from "./chip";

package/chip/index.js

@@ -1,17 +1,5 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./chip"), exports);
+exports.Chip = void 0;
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });

package/chip/theme.d.ts

@@ -20,3 +20,6 @@ export interface ChipVariants {
     medium: true;
     low: true;
 }
+export type ChipColor = keyof ChipColors;
+export type ChipSize = keyof ChipSizes;
+export type ChipVariant = keyof ChipVariants;

package/css/image-gallery.css

@@ -1,20 +1,20 @@
 .uxf-image-gallery {
-    @apply fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity;
+    @apply fixed inset-0 z-imageGallery flex flex-col;
 
     &__content {
-        @apply container mx-auto flex h-full flex-1 flex-col;
+        @apply mx-auto grow max-h-[calc(100%-128px)];
     }
 
     &__inner {
-        @apply relative flex flex-1 items-center justify-center;
+        @apply container flex items-center justify-center h-full;
     }
 
     &__image {
-        @apply absolute left-0 right-0 top-0 h-full w-full object-contain;
+        @apply h-full w-full object-contain z-1;
     }
 
     &__buttons {
-        @apply pointer-events-none absolute inset-0 flex items-center justify-between p-2;
+        @apply pointer-events-none container absolute inset-0 flex items-center justify-between p-2 z-10;
     }
 
     &__button {
@@ -26,19 +26,19 @@
     }
 
     &__dots {
-        @apply mx-auto flex space-x-2 p-4;
+        @apply mx-auto flex items-center space-x-2 p-4 z-1 h-[64px];
     }
 
     &__dot {
-        @apply h-2 w-2 rounded-full bg-white;
+        @apply h-2 w-2 rounded-full bg-gray-500;
 
         &--active {
-            @apply bg-gray-500;
+            @apply bg-white;
         }
     }
 
     &__close-button-wrapper {
-        @apply flex justify-end;
+        @apply flex justify-end z-1;
     }
 
     &__close-button {
@@ -56,4 +56,8 @@
     &__custom-content {
         @apply absolute right-0 bottom-0 bg-gray-600 text-white;
     }
+
+    &__backdrop {
+        @apply absolute inset-0 bg-black bg-opacity-75 transition-opacity;
+    }
 }

package/image-gallery/components/gallery.d.ts

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { ImageGalleryImageProps } from "../types";
-interface GalleryProps {
+export interface GalleryProps {
     closeButtonTitle?: string;
+    disableBackdropClose?: boolean;
     onClose: () => void;
     onNext: () => void;
     onPrevious: () => void;
@@ -9,4 +10,3 @@ interface GalleryProps {
     images: ImageGalleryImageProps[];
 }
 export declare const Gallery: FC<GalleryProps>;
-export {};

package/image-gallery/components/gallery.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const close_button_1 = require("./close-button");
 const dot_1 = require("./dot");
 const arrow_button_1 = require("./arrow-button");
+const react_swipeable_1 = require("react-swipeable");
 const Gallery = (props) => {
     var _a;
     (0, react_1.useEffect)(() => {
@@ -56,15 +57,21 @@ const Gallery = (props) => {
     }, []);
     const imageSrc = props.images[props.imageIndex].src;
     const customContent = props.images[props.imageIndex].customContent;
-    return (react_1.default.createElement("div", { className: "uxf-image-gallery" },
+    const handlers = (0, react_swipeable_1.useSwipeable)({
+        onSwipedLeft: () => props.onNext(),
+        onSwipedRight: () => props.onPrevious(),
+        swipeDuration: 500,
+    });
+    return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
+        react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
             react_1.default.createElement(close_button_1.CloseButton, { onClick: props.onClose, text: props.closeButtonTitle })),
-        react_1.default.createElement("div", { className: "uxf-image-gallery__content" },
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
+            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
+            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
+        react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
                 react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),
-                props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
                 react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
         props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex })))))));
 };

package/image-gallery/image-gallery.d.ts

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from "react";
+import { GalleryProps } from "./components/gallery";
 export interface ImageGalleryProps {
     children: ReactNode;
     closeButtonTitle?: string;
+    disableBackdropClose?: GalleryProps["disableBackdropClose"];
 }
 export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

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

@@ -91,13 +91,14 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
             : (_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) => {
+        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", 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) => {
+                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) => {
                     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)))));

package/multi-combobox/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "../input/theme";
 export type MultiComboboxValueId = number | string;
 export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
     id: ValueId;
@@ -30,6 +31,8 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;
     withPopover?: boolean;
 }

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

@@ -55,6 +55,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     };
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Listbox, { as: "div", 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: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
+        var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Listbox.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, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef },
                 react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
@@ -62,7 +63,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                     : 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(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", 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.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
+                react_2.default.createElement(react_1.Listbox.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 }, filteredOptions.map((option) => {
                     var _a;
                     const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
                     return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));

package/multi-select/types.d.ts

@@ -2,8 +2,8 @@ import { Placement, Strategy } from "@floating-ui/react";
 import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
-import { SelectSizes } from "../select/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "../input/theme";
 export type MultiSelectValueId = number | string;
 export type MultiSelectOption<T = MultiSelectValueId> = {
     color?: ChipColor;
@@ -25,7 +25,8 @@ export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSe
     options: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
-    size?: keyof SelectSizes;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withPopover?: boolean;
 }
 export type MultiSelectTypeRef = HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.4",
+  "version": "10.0.0-beta.6",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,8 @@
     "color2k": "^2.0.2",
     "dayjs": "^1.11.7",
     "jump.js": "^1.0.2",
-    "react-dropzone": "14.2.3"
+    "react-dropzone": "14.2.3",
+    "react-swipeable": "7.0.1"
   },
   "devDependencies": {
     "@types/jump.js": "^1.0.4",

package/tw-tokens/tw-z-index.d.ts

@@ -12,6 +12,7 @@ export declare const twZIndex: {
     menu: string;
     header: string;
     modal: string;
+    imageGallery: string;
     dropdown: string;
     flashMessage: string;
     tooltip: string;

package/tw-tokens/tw-z-index.js

@@ -16,6 +16,7 @@ exports.twZIndex = {
     menu: "25",
     header: "50",
     modal: "100",
+    imageGallery: "150",
     dropdown: "200",
     flashMessage: "250",
     tooltip: "300",

package/utils/storybook-config.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
-import { ChipColor } from "../chip/chip";
+import { ChipColor } from "../chip";
 import { InputGroupSizes } from "../input/theme";
 export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {

package/utils/tailwind-config.js

@@ -116,6 +116,7 @@ module.exports = {
                 menu: "25",
                 header: "50",
                 modal: "100",
+                imageGallery: "150",
                 dropdown: "200",
                 flashMessage: "250",
                 tooltip: "300",

package/select/theme.d.ts

@@ -1,5 +0,0 @@
-export interface SelectSizes {
-    sm: true;
-    default: true;
-    lg: true;
-}

package/select/theme.js

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