@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.
@@ -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;
@@ -1,20 +1,20 @@
1
1
  .uxf-image-gallery {
2
- @apply fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity;
2
+ @apply fixed inset-0 z-imageGallery flex flex-col;
3
3
 
4
4
  &__content {
5
- @apply container mx-auto flex h-full flex-1 flex-col;
5
+ @apply mx-auto grow max-h-[calc(100%-128px)];
6
6
  }
7
7
 
8
8
  &__inner {
9
- @apply relative flex flex-1 items-center justify-center;
9
+ @apply container flex items-center justify-center h-full;
10
10
  }
11
11
 
12
12
  &__image {
13
- @apply absolute left-0 right-0 top-0 h-full w-full object-contain;
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-white;
33
+ @apply h-2 w-2 rounded-full bg-gray-500;
34
34
 
35
35
  &--active {
36
- @apply bg-gray-500;
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
- return (react_1.default.createElement("div", { className: "uxf-image-gallery" },
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-gallery__content" },
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));
@@ -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 SelectSizes;
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.4",
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",
@@ -12,6 +12,7 @@ export declare const twZIndex: {
12
12
  menu: string;
13
13
  header: string;
14
14
  modal: string;
15
+ imageGallery: string;
15
16
  dropdown: string;
16
17
  flashMessage: string;
17
18
  tooltip: string;
@@ -16,6 +16,7 @@ exports.twZIndex = {
16
16
  menu: "25",
17
17
  header: "50",
18
18
  modal: "100",
19
+ imageGallery: "150",
19
20
  dropdown: "200",
20
21
  flashMessage: "250",
21
22
  tooltip: "300",
@@ -116,6 +116,7 @@ module.exports = {
116
116
  menu: "25",
117
117
  header: "50",
118
118
  modal: "100",
119
+ imageGallery: "150",
119
120
  dropdown: "200",
120
121
  flashMessage: "250",
121
122
  tooltip: "300",
package/select/theme.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export interface SelectSizes {
2
- sm: true;
3
- default: true;
4
- lg: true;
5
- }
package/select/theme.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });