@uxf/ui 10.0.0-beta.4 → 10.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_select-base/_select-base.js +3 -2
- package/css/image-gallery.css +13 -9
- package/image-gallery/components/gallery.d.ts +2 -2
- package/image-gallery/components/gallery.js +12 -5
- package/image-gallery/image-gallery.d.ts +2 -0
- package/image-gallery/image-gallery.js +1 -1
- package/multi-combobox/_multi-combobox-base.js +2 -1
- package/multi-combobox/types.d.ts +3 -0
- package/multi-select/_multi-select-base.js +2 -1
- package/multi-select/types.d.ts +3 -2
- package/package.json +3 -2
- package/tw-tokens/tw-z-index.d.ts +1 -0
- package/tw-tokens/tw-z-index.js +1 -0
- package/utils/tailwind-config.js +1 -0
- package/select/theme.d.ts +0 -5
- package/select/theme.js +0 -2
|
@@ -51,8 +51,9 @@ const InputArrow = (props) => {
|
|
|
51
51
|
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 });
|
|
52
52
|
};
|
|
53
53
|
const Options = (props) => {
|
|
54
|
+
var _a, _b;
|
|
54
55
|
const HUIComponent = props.HUIComponent;
|
|
55
|
-
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) => {
|
|
56
|
+
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) => {
|
|
56
57
|
var _a, _b, _c, _d;
|
|
57
58
|
const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
|
|
58
59
|
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) => {
|
|
|
87
88
|
react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))) : (react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))),
|
|
88
89
|
props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
|
|
89
90
|
renderProps.open && (react_2.default.createElement(react_1.FloatingPortal, null,
|
|
90
|
-
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 }))),
|
|
91
|
+
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 }))),
|
|
91
92
|
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)))))));
|
|
92
93
|
};
|
|
93
94
|
exports._SelectBase = _SelectBase;
|
package/css/image-gallery.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
.uxf-image-gallery {
|
|
2
|
-
@apply fixed inset-0
|
|
2
|
+
@apply fixed inset-0 z-imageGallery flex flex-col;
|
|
3
3
|
|
|
4
4
|
&__content {
|
|
5
|
-
@apply
|
|
5
|
+
@apply mx-auto grow max-h-[calc(100%-128px)];
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
&__inner {
|
|
9
|
-
@apply
|
|
9
|
+
@apply container flex items-center justify-center h-full;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&__image {
|
|
13
|
-
@apply
|
|
13
|
+
@apply h-full w-full object-contain z-1;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&__buttons {
|
|
17
|
-
@apply pointer-events-none absolute inset-0 flex items-center justify-between p-2;
|
|
17
|
+
@apply pointer-events-none container absolute inset-0 flex items-center justify-between p-2 z-10;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&__button {
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&__dots {
|
|
29
|
-
@apply mx-auto flex space-x-2 p-4;
|
|
29
|
+
@apply mx-auto flex items-center space-x-2 p-4 z-1 h-[64px];
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&__dot {
|
|
33
|
-
@apply h-2 w-2 rounded-full bg-
|
|
33
|
+
@apply h-2 w-2 rounded-full bg-gray-500;
|
|
34
34
|
|
|
35
35
|
&--active {
|
|
36
|
-
@apply bg-
|
|
36
|
+
@apply bg-white;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&__close-button-wrapper {
|
|
41
|
-
@apply flex justify-end;
|
|
41
|
+
@apply flex justify-end z-1;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&__close-button {
|
|
@@ -56,4 +56,8 @@
|
|
|
56
56
|
&__custom-content {
|
|
57
57
|
@apply absolute right-0 bottom-0 bg-gray-600 text-white;
|
|
58
58
|
}
|
|
59
|
+
|
|
60
|
+
&__backdrop {
|
|
61
|
+
@apply absolute inset-0 bg-black bg-opacity-75 transition-opacity;
|
|
62
|
+
}
|
|
59
63
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
import { ImageGalleryImageProps } from "../types";
|
|
3
|
-
interface GalleryProps {
|
|
3
|
+
export interface GalleryProps {
|
|
4
4
|
closeButtonTitle?: string;
|
|
5
|
+
disableBackdropClose?: boolean;
|
|
5
6
|
onClose: () => void;
|
|
6
7
|
onNext: () => void;
|
|
7
8
|
onPrevious: () => void;
|
|
@@ -9,4 +10,3 @@ interface GalleryProps {
|
|
|
9
10
|
images: ImageGalleryImageProps[];
|
|
10
11
|
}
|
|
11
12
|
export declare const Gallery: FC<GalleryProps>;
|
|
12
|
-
export {};
|
|
@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
|
|
|
30
30
|
const close_button_1 = require("./close-button");
|
|
31
31
|
const dot_1 = require("./dot");
|
|
32
32
|
const arrow_button_1 = require("./arrow-button");
|
|
33
|
+
const react_swipeable_1 = require("react-swipeable");
|
|
33
34
|
const Gallery = (props) => {
|
|
34
35
|
var _a;
|
|
35
36
|
(0, react_1.useEffect)(() => {
|
|
@@ -56,15 +57,21 @@ const Gallery = (props) => {
|
|
|
56
57
|
}, []);
|
|
57
58
|
const imageSrc = props.images[props.imageIndex].src;
|
|
58
59
|
const customContent = props.images[props.imageIndex].customContent;
|
|
59
|
-
|
|
60
|
+
const handlers = (0, react_swipeable_1.useSwipeable)({
|
|
61
|
+
onSwipedLeft: () => props.onNext(),
|
|
62
|
+
onSwipedRight: () => props.onPrevious(),
|
|
63
|
+
swipeDuration: 500,
|
|
64
|
+
});
|
|
65
|
+
return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
|
|
66
|
+
react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
|
|
60
67
|
react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
|
|
61
68
|
react_1.default.createElement(close_button_1.CloseButton, { onClick: props.onClose, text: props.closeButtonTitle })),
|
|
62
|
-
react_1.default.createElement("div", { className: "uxf-image-
|
|
69
|
+
props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
|
|
70
|
+
react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
|
|
71
|
+
react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
|
|
72
|
+
react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
|
|
63
73
|
react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
|
|
64
74
|
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 : "" }),
|
|
65
|
-
props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
|
|
66
|
-
react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
|
|
67
|
-
react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
|
|
68
75
|
react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
|
|
69
76
|
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 })))))));
|
|
70
77
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { FC, ReactNode } from "react";
|
|
2
|
+
import { GalleryProps } from "./components/gallery";
|
|
2
3
|
export interface ImageGalleryProps {
|
|
3
4
|
children: ReactNode;
|
|
4
5
|
closeButtonTitle?: string;
|
|
6
|
+
disableBackdropClose?: GalleryProps["disableBackdropClose"];
|
|
5
7
|
}
|
|
6
8
|
export declare const ImageGallery: FC<ImageGalleryProps>;
|
|
@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
|
|
|
48
48
|
const contextValue = { registerImage, unregisterImage, openGallery };
|
|
49
49
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
50
50
|
react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
|
|
51
|
-
typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
|
|
51
|
+
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 }))));
|
|
52
52
|
};
|
|
53
53
|
exports.ImageGallery = ImageGallery;
|
|
54
54
|
exports.ImageGallery.displayName = "UxfUiImageGallery";
|
|
@@ -91,13 +91,14 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
|
|
|
91
91
|
: (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
|
|
92
92
|
const withoutPopover = !props.withPopover;
|
|
93
93
|
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) => {
|
|
94
|
+
var _a, _b;
|
|
94
95
|
const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
|
|
95
96
|
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 },
|
|
96
97
|
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))),
|
|
97
98
|
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 }),
|
|
98
99
|
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 })),
|
|
99
100
|
renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
|
|
100
|
-
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) => {
|
|
101
|
+
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) => {
|
|
101
102
|
var _a, _b, _c, _d;
|
|
102
103
|
const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
|
|
103
104
|
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)))));
|
|
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
|
|
|
3
3
|
import { ChipColor } from "../chip";
|
|
4
4
|
import { IconsSet } from "../icon/theme";
|
|
5
5
|
import { FormControlProps } from "../types";
|
|
6
|
+
import { InputGroupSizes, InputGroupVariants } from "../input/theme";
|
|
6
7
|
export type MultiComboboxValueId = number | string;
|
|
7
8
|
export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
|
|
8
9
|
id: ValueId;
|
|
@@ -30,6 +31,8 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
|
|
|
30
31
|
options?: Option[];
|
|
31
32
|
placeholder?: string;
|
|
32
33
|
renderOption?: (option: Option) => ReactNode;
|
|
34
|
+
size?: keyof InputGroupSizes;
|
|
35
|
+
variant?: keyof InputGroupVariants;
|
|
33
36
|
withCheckboxes?: boolean;
|
|
34
37
|
withPopover?: boolean;
|
|
35
38
|
}
|
|
@@ -55,6 +55,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
|
|
|
55
55
|
};
|
|
56
56
|
const withoutPopover = !props.withPopover;
|
|
57
57
|
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) => {
|
|
58
|
+
var _a, _b;
|
|
58
59
|
const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
|
|
59
60
|
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 },
|
|
60
61
|
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) => {
|
|
|
62
63
|
: 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)))),
|
|
63
64
|
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 })),
|
|
64
65
|
renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
|
|
65
|
-
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) => {
|
|
66
|
+
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) => {
|
|
66
67
|
var _a;
|
|
67
68
|
const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
|
|
68
69
|
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
CHANGED
|
@@ -2,8 +2,8 @@ import { Placement, Strategy } from "@floating-ui/react";
|
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
import { ChipColor } from "../chip";
|
|
4
4
|
import { IconsSet } from "../icon/theme";
|
|
5
|
-
import { SelectSizes } from "../select/theme";
|
|
6
5
|
import { FormControlProps } from "../types";
|
|
6
|
+
import { InputGroupSizes, InputGroupVariants } from "../input/theme";
|
|
7
7
|
export type MultiSelectValueId = number | string;
|
|
8
8
|
export type MultiSelectOption<T = MultiSelectValueId> = {
|
|
9
9
|
color?: ChipColor;
|
|
@@ -25,7 +25,8 @@ export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSe
|
|
|
25
25
|
options: Option[];
|
|
26
26
|
placeholder?: string;
|
|
27
27
|
renderOption?: (option: Option) => ReactNode;
|
|
28
|
-
size?: keyof
|
|
28
|
+
size?: keyof InputGroupSizes;
|
|
29
|
+
variant?: keyof InputGroupVariants;
|
|
29
30
|
withPopover?: boolean;
|
|
30
31
|
}
|
|
31
32
|
export type MultiSelectTypeRef = HTMLDivElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/ui",
|
|
3
|
-
"version": "10.0.0-beta.
|
|
3
|
+
"version": "10.0.0-beta.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"color2k": "^2.0.2",
|
|
22
22
|
"dayjs": "^1.11.7",
|
|
23
23
|
"jump.js": "^1.0.2",
|
|
24
|
-
"react-dropzone": "14.2.3"
|
|
24
|
+
"react-dropzone": "14.2.3",
|
|
25
|
+
"react-swipeable": "7.0.1"
|
|
25
26
|
},
|
|
26
27
|
"devDependencies": {
|
|
27
28
|
"@types/jump.js": "^1.0.4",
|
package/tw-tokens/tw-z-index.js
CHANGED
package/utils/tailwind-config.js
CHANGED
package/select/theme.d.ts
DELETED
package/select/theme.js
DELETED