@uxf/ui 11.0.0-beta.21 → 11.1.0

package/_file-input-base/file-input-base.d.ts

@@ -6,6 +6,7 @@ export interface FileInputBaseProps extends FormControlProps<FileResponse | null
     className?: string;
     form?: string;
     id?: string;
+    maxFileSize?: number;
     onUploadError?: (err: unknown) => void;
     onUploadFile: (file: File) => Promise<FileResponse>;
 }

package/_file-input-base/file-input-base.js

@@ -25,21 +25,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._FileInputBase = void 0;
 const react_1 = __importStar(require("react"));
+const validator_exceptions_1 = require("../utils/validator/validator-exceptions");
 exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
     const onChange = async (e) => {
-        var _a;
-        if (e.target.files) {
+        var _a, _b;
+        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a.length) {
             try {
-                const response = await props.onUploadFile(e.target.files[0]);
+                const file = e.target.files[0];
+                if (props.maxFileSize && file.size > props.maxFileSize) {
+                    throw validator_exceptions_1.ValidatorExceptions.MaxFileSize;
+                }
+                const response = await props.onUploadFile(file);
                 await props.onChange(response, e);
             }
             catch (err) {
-                (_a = props.onUploadError) === null || _a === void 0 ? void 0 : _a.call(props, err);
+                (_b = props.onUploadError) === null || _b === void 0 ? void 0 : _b.call(props, err);
             }
         }
-        else {
-            props.onChange(null, e);
-        }
     };
     return (react_1.default.createElement("input", { accept: props.accept, "aria-invalid": props.isInvalid, "aria-describedby": props["aria-describedby"], className: props.className, disabled: props.isDisabled, form: props.form, id: props.id, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isDisabled ? -1 : undefined, type: "file" }));
 });

package/_select-base/_select-base.d.ts

@@ -28,6 +28,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: ReactNode;
+    onOptionsUnmount?: () => void;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option, isSelected: boolean) => ReactNode;

package/_select-base/_select-base.js

@@ -27,6 +27,7 @@ exports._SelectBase = void 0;
 const react_1 = require("@floating-ui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const useOnUnmount_1 = require("@uxf/core/hooks/useOnUnmount");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
@@ -34,6 +35,11 @@ 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 Option = (props) => {
+    const HUIComponent = props.HUIComponent;
+    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), value: props.option }, (optionState) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : props.option.label; }));
+};
+Option.displayName = "UxfUiSelectBaseOption";
 function isHUICombobox(HUIComponent) {
     return typeof HUIComponent.Input !== "undefined";
 }
@@ -53,13 +59,16 @@ const InputArrow = (props) => {
 const Options = (props) => {
     var _a, _b;
     const HUIComponent = props.HUIComponent;
+    (0, useOnUnmount_1.useOnUnmount)(() => {
+        var _a;
+        (_a = props.onUnmount) === null || _a === void 0 ? void 0 : _a.call(props);
+    });
     return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-select-base__options", `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.matchWidth
             ? "uxf-select-base__options--match-width"
             : "uxf-select-base__options--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
-        var _a;
-        const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-        const _option = option;
-        return (react_2.default.createElement(HUIComponent.Option, { disabled: _option.disabled, 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 }, (optionState) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label; }));
+        var _a, _b;
+        const optionKey = (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id;
+        return (react_2.default.createElement(Option, { HUIComponent: HUIComponent, key: optionKey, option: option, renderOption: props.renderOption }));
     })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 };
 Options.displayName = "UxfUiSelectBaseOptions";
@@ -91,7 +100,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, className: props.dropdownClassName, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
+                react_2.default.createElement(Options, { HUIComponent: HUIComponent, className: props.dropdownClassName, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, onUnmount: props.onOptionsUnmount, 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/avatar-file-input/avatar-file-input.d.ts

@@ -1,10 +1,18 @@
-import React, { ReactNode } from "react";
+import React, { MouseEventHandler, ReactNode } from "react";
 import { FileInputBaseProps } from "../_file-input-base";
+import { IconName } from "../icon/types";
 import { AvatarFileInputVariant } from "./theme";
 export interface AvatarFileInputProps extends FileInputBaseProps {
+    customControls?: (args: {
+        onSelectFile: MouseEventHandler;
+        onRemoveFile: MouseEventHandler;
+    }) => ReactNode;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    icon?: IconName;
     label?: ReactNode;
-    changeFileLabel?: ReactNode;
+    removeFileLabel?: ReactNode;
+    selectFileLabel?: ReactNode;
     variant?: AvatarFileInputVariant;
 }
 export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;

package/avatar-file-input/avatar-file-input.js

@@ -26,28 +26,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFileInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const file_1 = require("@uxf/core/utils/file");
 const react_1 = __importStar(require("react"));
 const _file_input_base_1 = require("../_file-input-base");
 const avatar_1 = require("../avatar");
+const button_1 = require("../button");
+const form_component_1 = require("../form-component");
 const icon_1 = require("../icon");
 exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
-    const stateClassNames = (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID);
-    const label = props.value && props.changeFileLabel ? props.changeFileLabel : props.label;
-    return (react_1.default.createElement("div", { className: `uxf-avatar-file-input uxf-avatar-file-input--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
-        react_1.default.createElement("div", { className: "uxf-avatar-file-input__label-wrapper" },
-            props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: (0, cx_1.cx)("uxf-avatar-file-input__image", stateClassNames), src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label", stateClassNames), htmlFor: id, tabIndex: 0 },
-                react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-avatar-file-input__label-icon", stateClassNames), name: "cloud", size: 28 }))),
-            (props.label && typeof props.label === "string") ||
-                (props.value && props.changeFileLabel && typeof props.changeFileLabel === "string") ? (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames), htmlFor: id, tabIndex: 0 }, label)) : (label)),
-        react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
-        props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", errorId && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
+    const stateClassName = (0, cx_1.cx)(((_a = props.isFocused) !== null && _a !== void 0 ? _a : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
+    const rootClassName = (0, cx_1.cx)(`uxf-avatar-file-input uxf-avatar-file-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, stateClassName, props.className);
+    const onSelectFile = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const onRemoveFile = () => {
+        props.onChange(null);
+        // this ensures that the file input is cleared on remove, so that the same file can be selected again
+        const inputNode = innerRef.current;
+        if (inputNode) {
+            inputNode.value = "";
+        }
+    };
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label },
+        react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
+            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
+                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
+                props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
+                    react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_d = props.icon) !== null && _d !== void 0 ? _d : "cloud" })))),
+            react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({
+                onSelectFile,
+                onRemoveFile,
+            })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
+                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "white" }, (_e = props.selectFileLabel) !== null && _e !== void 0 ? _e : "Upload image"),
+                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/calendar/calendar-day-cell.js

@@ -30,11 +30,13 @@ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_day_1 = require("@uxf/datepicker/hooks/use-day");
 const react_1 = __importStar(require("react"));
+const get_class_names_from_flags_1 = require("./utils/get-class-names-from-flags");
 exports.CalendarDayCell = (0, react_1.memo)((props) => {
     const dayCellRef = (0, react_1.useRef)(null);
     const innerRef = (0, react_1.useRef)(null);
-    const { disabledDate, isHovered, isSelected, isInsideRange, isToday, isWithinHoverRange, onClick, onKeyDown, onMouseEnter, tabIndex, } = (0, use_day_1.useDay)({
+    const { disabledDate, flags, isFirstDisabled, isHovered, isInsideRange, isLastDisabled, isSelected, isToday, isWithinHoverRange, onClick, onKeyDown, onMouseEnter, tabIndex, } = (0, use_day_1.useDay)({
         date: props.day.date,
+        datesConfig: props.datePickerProps.datesConfig,
         focusedDate: props.datePickerProps.focusedDate,
         isDateBlocked: props.datePickerProps.isDateBlocked,
         isDateFocused: props.datePickerProps.isDateFocused,
@@ -46,6 +48,7 @@ exports.CalendarDayCell = (0, react_1.memo)((props) => {
         onDateSelect: props.datePickerProps.onDateSelect,
         dayRef: dayCellRef,
         preventScroll: props.datePickerProps.preventScroll,
+        unavailableDates: props.datePickerProps.unavailableDates,
     });
     (0, useOnMount_1.useOnMount)(() => {
         const node = innerRef.current;
@@ -56,7 +59,7 @@ exports.CalendarDayCell = (0, react_1.memo)((props) => {
     if (!props.day.dayLabel) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month"), ref: disabledDate ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isFirstDisabled && props.day.currentMonth && "is-disabled-start", isLastDisabled && props.day.currentMonth && "is-disabled-end", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month", (0, get_class_names_from_flags_1.getClassNamesFromFlags)(flags)), ref: disabledDate ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
         react_1.default.createElement("span", { className: "uxf-calendar__cell__inner" }, props.day.dayLabel)));
 });
 exports.CalendarDayCell.displayName = "UxfUiCalendarDayCell";

package/calendar/utils/get-class-names-from-flags.d.ts

@@ -0,0 +1,2 @@
+import { Flag } from "@uxf/datepicker/utils/types";
+export declare const getClassNamesFromFlags: (flags: Flag[]) => string[];

package/calendar/utils/get-class-names-from-flags.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassNamesFromFlags = void 0;
+const getClassNamesFromFlags = (flags) => flags.reduce((acc, curr) => [
+    ...acc,
+    curr.flag,
+    ...(curr.isFirst ? [`${curr.flag}--first`] : []),
+    ...(curr.isLast ? [`${curr.flag}--last`] : []),
+], []);
+exports.getClassNamesFromFlags = getClassNamesFromFlags;

package/checkbox-input/checkbox-input.d.ts

@@ -8,5 +8,6 @@ export interface CheckboxInputProps extends FormControlProps<boolean | undefined
     label: ReactNode;
     size?: CheckboxSize;
     style?: CSSProperties;
+    helperText?: ReactNode;
 }
 export declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox-input/checkbox-input.js

@@ -28,10 +28,15 @@ const react_1 = require("@headlessui/react");
 const react_2 = __importStar(require("react"));
 const checkbox_1 = require("../checkbox");
 exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
-    var _a;
+    var _a, _b;
+    const generatedId = (0, react_2.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
             react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, style: props.style, value: checked }))),
-            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox-input__label" }, props.label))));
+            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox-input__label" },
+                react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),
+                react_2.default.createElement("span", { id: errorId, className: "uxf-checkbox-input__label--subtitle" }, props.helperText)))));
 });
 exports.CheckboxInput.displayName = "UxfUiCheckboxInput";

package/combobox/combobox.js

@@ -38,11 +38,12 @@ const Combobox = (props) => {
     const emptyMessage = query.length === 0
         ? (_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát"
         : (_c = props.notFoundMessage) !== null && _c !== void 0 ? _c : "Nic nenalezeno";
+    const clearQuery = () => setQuery("");
     const onChange = (v) => props.onChange(v);
     const onInputChange = (event) => setQuery(event.target.value);
     const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
     const selectedOption = (_d = props.value) !== null && _d !== void 0 ? _d : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: emptyMessage, forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: emptyMessage, forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onOptionsUnmount: clearQuery, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
         react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
 };
 exports.Combobox = Combobox;

package/create-component-preview-page/ui-components.d.ts

@@ -14,6 +14,7 @@ import * as ColorRadioStories from "@uxf/ui/color-radio/color-radio.stories";
 import * as ComboboxStories from "@uxf/ui/combobox/combobox.stories";
 import * as DatePickerInputStories from "@uxf/ui/date-picker-input/date-picker-input.stories";
 import * as DatePickerStories from "@uxf/ui/date-picker/date-picker.stories";
+import * as DateRangePickerInputStories from "@uxf/ui/date-range-picker-input/date-range-picker-input.stories";
 import * as DatetimePickerInputStories from "@uxf/ui/datetime-picker-input/datetime-picker-input.stories";
 import * as DatetimePickerStories from "@uxf/ui/datetime-picker/datetime-picker.stories";
 import * as DropdownStories from "@uxf/ui/dropdown/dropdown.stories";
@@ -27,6 +28,7 @@ import * as InputStories from "@uxf/ui/input/input.stories";
 import * as LabelStories from "@uxf/ui/label/label.stories";
 import * as ListItemStories from "@uxf/ui/list-item/list-item.stories";
 import * as LoaderStories from "@uxf/ui/loader/loader.stories";
+import * as MessageStories from "@uxf/ui/message/message.stories";
 import * as ModalStories from "@uxf/ui/modal/modal.stories";
 import * as MultiComboboxStories from "@uxf/ui/multi-combobox/multi-combobox.stories";
 import * as MultiSelectStories from "@uxf/ui/multi-select/multi-select.stories";
@@ -45,6 +47,7 @@ import * as TimePickerStories from "@uxf/ui/time-picker/time-picker-input.storie
 import * as ToggleStories from "@uxf/ui/toggle/toggle.stories";
 import * as TooltipStories from "@uxf/ui/tooltip/tooltip.stories";
 import * as TypographyStories from "@uxf/ui/typography/typography.stories";
+import * as ImageGalleryStories from "../image-gallery/image-gallery.stories";
 export declare const uiComponents: {
     readonly avatar: {
         readonly title: "Avatar";
@@ -110,6 +113,10 @@ export declare const uiComponents: {
         readonly title: "DatePickerInput";
         readonly stories: typeof DatePickerInputStories;
     };
+    readonly "date-range-picker-input": {
+        readonly title: "DateRangePickerInput";
+        readonly stories: typeof DateRangePickerInputStories;
+    };
     readonly "datetime-picker": {
         readonly title: "DatetimePicker";
         readonly stories: typeof DatetimePickerStories;
@@ -146,6 +153,10 @@ export declare const uiComponents: {
         readonly title: "Icon";
         readonly stories: typeof IconStories;
     };
+    readonly "image-gallery": {
+        readonly title: "ImageGallery";
+        readonly stories: typeof ImageGalleryStories;
+    };
     readonly input: {
         readonly title: "Input";
         readonly stories: typeof InputStories;
@@ -162,6 +173,10 @@ export declare const uiComponents: {
         readonly title: "Loader";
         readonly stories: typeof LoaderStories;
     };
+    readonly message: {
+        readonly title: "Message";
+        readonly stories: typeof MessageStories;
+    };
     readonly modal: {
         readonly title: "Modal";
         readonly stories: typeof ModalStories;

package/create-component-preview-page/ui-components.js

@@ -40,6 +40,7 @@ const ColorRadioStories = __importStar(require("@uxf/ui/color-radio/color-radio.
 const ComboboxStories = __importStar(require("@uxf/ui/combobox/combobox.stories"));
 const DatePickerInputStories = __importStar(require("@uxf/ui/date-picker-input/date-picker-input.stories"));
 const DatePickerStories = __importStar(require("@uxf/ui/date-picker/date-picker.stories"));
+const DateRangePickerInputStories = __importStar(require("@uxf/ui/date-range-picker-input/date-range-picker-input.stories"));
 const DatetimePickerInputStories = __importStar(require("@uxf/ui/datetime-picker-input/datetime-picker-input.stories"));
 const DatetimePickerStories = __importStar(require("@uxf/ui/datetime-picker/datetime-picker.stories"));
 const DropdownStories = __importStar(require("@uxf/ui/dropdown/dropdown.stories"));
@@ -53,6 +54,7 @@ const InputStories = __importStar(require("@uxf/ui/input/input.stories"));
 const LabelStories = __importStar(require("@uxf/ui/label/label.stories"));
 const ListItemStories = __importStar(require("@uxf/ui/list-item/list-item.stories"));
 const LoaderStories = __importStar(require("@uxf/ui/loader/loader.stories"));
+const MessageStories = __importStar(require("@uxf/ui/message/message.stories"));
 const ModalStories = __importStar(require("@uxf/ui/modal/modal.stories"));
 const MultiComboboxStories = __importStar(require("@uxf/ui/multi-combobox/multi-combobox.stories"));
 const MultiSelectStories = __importStar(require("@uxf/ui/multi-select/multi-select.stories"));
@@ -71,6 +73,7 @@ const TimePickerStories = __importStar(require("@uxf/ui/time-picker/time-picker-
 const ToggleStories = __importStar(require("@uxf/ui/toggle/toggle.stories"));
 const TooltipStories = __importStar(require("@uxf/ui/tooltip/tooltip.stories"));
 const TypographyStories = __importStar(require("@uxf/ui/typography/typography.stories"));
+const ImageGalleryStories = __importStar(require("../image-gallery/image-gallery.stories"));
 exports.uiComponents = {
     avatar: {
         title: "Avatar",
@@ -136,6 +139,10 @@ exports.uiComponents = {
         title: "DatePickerInput",
         stories: DatePickerInputStories,
     },
+    "date-range-picker-input": {
+        title: "DateRangePickerInput",
+        stories: DateRangePickerInputStories,
+    },
     "datetime-picker": {
         title: "DatetimePicker",
         stories: DatetimePickerStories,
@@ -172,6 +179,10 @@ exports.uiComponents = {
         title: "Icon",
         stories: IconStories,
     },
+    "image-gallery": {
+        title: "ImageGallery",
+        stories: ImageGalleryStories,
+    },
     input: {
         title: "Input",
         stories: InputStories,
@@ -188,6 +199,10 @@ exports.uiComponents = {
         title: "Loader",
         stories: LoaderStories,
     },
+    message: {
+        title: "Message",
+        stories: MessageStories,
+    },
     modal: {
         title: "Modal",
         stories: ModalStories,

package/create-component-preview-page/ui-readmes.js

@@ -20,37 +20,40 @@ const README_md_13 = __importDefault(require("@uxf/ui/color-radio/README.md"));
 const README_md_14 = __importDefault(require("@uxf/ui/combobox/README.md"));
 const README_md_15 = __importDefault(require("@uxf/ui/date-picker-input/README.md"));
 const README_md_16 = __importDefault(require("@uxf/ui/date-picker/README.md"));
-const README_md_17 = __importDefault(require("@uxf/ui/datetime-picker-input/README.md"));
-const README_md_18 = __importDefault(require("@uxf/ui/datetime-picker/README.md"));
-const README_md_19 = __importDefault(require("@uxf/ui/dropdown/README.md"));
-const README_md_20 = __importDefault(require("@uxf/ui/dropzone/README.md"));
-const README_md_21 = __importDefault(require("@uxf/ui/error-message/README.md"));
-const README_md_22 = __importDefault(require("@uxf/ui/file-input/README.md"));
-const README_md_23 = __importDefault(require("@uxf/ui/flash-messages/README.md"));
-const README_md_24 = __importDefault(require("@uxf/ui/form-component/README.md"));
-const README_md_25 = __importDefault(require("@uxf/ui/icon/README.md"));
-const README_md_26 = __importDefault(require("@uxf/ui/input/README.md"));
-const README_md_27 = __importDefault(require("@uxf/ui/label/README.md"));
-const README_md_28 = __importDefault(require("@uxf/ui/list-item/README.md"));
-const README_md_29 = __importDefault(require("@uxf/ui/loader/README.md"));
-const README_md_30 = __importDefault(require("@uxf/ui/modal/README.md"));
-const README_md_31 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
-const README_md_32 = __importDefault(require("@uxf/ui/multi-select/README.md"));
-const README_md_33 = __importDefault(require("@uxf/ui/pagination/README.md"));
-const README_md_34 = __importDefault(require("@uxf/ui/paper/README.md"));
-const README_md_35 = __importDefault(require("@uxf/ui/radio-group/README.md"));
-const README_md_36 = __importDefault(require("@uxf/ui/radio/README.md"));
-const README_md_37 = __importDefault(require("@uxf/ui/raster-image/README.md"));
-const README_md_38 = __importDefault(require("@uxf/ui/select/README.md"));
-const README_md_39 = __importDefault(require("@uxf/ui/tabs/README.md"));
-const README_md_40 = __importDefault(require("@uxf/ui/text-input/README.md"));
-const README_md_41 = __importDefault(require("@uxf/ui/text-link/README.md"));
-const README_md_42 = __importDefault(require("@uxf/ui/textarea/README.md"));
-const README_md_43 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
-const README_md_44 = __importDefault(require("@uxf/ui/time-picker/README.md"));
-const README_md_45 = __importDefault(require("@uxf/ui/toggle/README.md"));
-const README_md_46 = __importDefault(require("@uxf/ui/tooltip/README.md"));
-const README_md_47 = __importDefault(require("@uxf/ui/typography/README.md"));
+const README_md_17 = __importDefault(require("@uxf/ui/date-range-picker-input/README.md"));
+const README_md_18 = __importDefault(require("@uxf/ui/datetime-picker-input/README.md"));
+const README_md_19 = __importDefault(require("@uxf/ui/datetime-picker/README.md"));
+const README_md_20 = __importDefault(require("@uxf/ui/dropdown/README.md"));
+const README_md_21 = __importDefault(require("@uxf/ui/dropzone/README.md"));
+const README_md_22 = __importDefault(require("@uxf/ui/error-message/README.md"));
+const README_md_23 = __importDefault(require("@uxf/ui/file-input/README.md"));
+const README_md_24 = __importDefault(require("@uxf/ui/flash-messages/README.md"));
+const README_md_25 = __importDefault(require("@uxf/ui/form-component/README.md"));
+const README_md_26 = __importDefault(require("@uxf/ui/icon/README.md"));
+const README_md_27 = __importDefault(require("@uxf/ui/image-gallery/README.md"));
+const README_md_28 = __importDefault(require("@uxf/ui/input/README.md"));
+const README_md_29 = __importDefault(require("@uxf/ui/label/README.md"));
+const README_md_30 = __importDefault(require("@uxf/ui/list-item/README.md"));
+const README_md_31 = __importDefault(require("@uxf/ui/loader/README.md"));
+const README_md_32 = __importDefault(require("@uxf/ui/message/README.md"));
+const README_md_33 = __importDefault(require("@uxf/ui/modal/README.md"));
+const README_md_34 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
+const README_md_35 = __importDefault(require("@uxf/ui/multi-select/README.md"));
+const README_md_36 = __importDefault(require("@uxf/ui/pagination/README.md"));
+const README_md_37 = __importDefault(require("@uxf/ui/paper/README.md"));
+const README_md_38 = __importDefault(require("@uxf/ui/radio-group/README.md"));
+const README_md_39 = __importDefault(require("@uxf/ui/radio/README.md"));
+const README_md_40 = __importDefault(require("@uxf/ui/raster-image/README.md"));
+const README_md_41 = __importDefault(require("@uxf/ui/select/README.md"));
+const README_md_42 = __importDefault(require("@uxf/ui/tabs/README.md"));
+const README_md_43 = __importDefault(require("@uxf/ui/text-input/README.md"));
+const README_md_44 = __importDefault(require("@uxf/ui/text-link/README.md"));
+const README_md_45 = __importDefault(require("@uxf/ui/textarea/README.md"));
+const README_md_46 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
+const README_md_47 = __importDefault(require("@uxf/ui/time-picker/README.md"));
+const README_md_48 = __importDefault(require("@uxf/ui/toggle/README.md"));
+const README_md_49 = __importDefault(require("@uxf/ui/tooltip/README.md"));
+const README_md_50 = __importDefault(require("@uxf/ui/typography/README.md"));
 exports.uiReadmes = {
     avatar: README_md_2.default,
     "avatar-file-input": README_md_1.default,
@@ -68,35 +71,38 @@ exports.uiReadmes = {
     combobox: README_md_14.default,
     "date-picker": README_md_16.default,
     "date-picker-input": README_md_15.default,
-    "datetime-picker": README_md_18.default,
-    "datetime-picker-input": README_md_17.default,
-    dropdown: README_md_19.default,
-    dropzone: README_md_20.default,
-    "error-message": README_md_21.default,
-    "file-input": README_md_22.default,
-    "flash-messages": README_md_23.default,
-    "form-component": README_md_24.default,
-    icon: README_md_25.default,
-    input: README_md_26.default,
-    label: README_md_27.default,
-    "list-item": README_md_28.default,
-    loader: README_md_29.default,
-    modal: README_md_30.default,
-    "multi-combobox": README_md_31.default,
-    "multi-select": README_md_32.default,
-    pagination: README_md_33.default,
-    paper: README_md_34.default,
-    radio: README_md_36.default,
-    "radio-group": README_md_35.default,
-    "raster-image": README_md_37.default,
-    select: README_md_38.default,
-    tabs: README_md_39.default,
-    "text-input": README_md_40.default,
-    "text-link": README_md_41.default,
-    textarea: README_md_42.default,
-    "time-picker": README_md_44.default,
-    "time-picker-input": README_md_43.default,
-    toggle: README_md_45.default,
-    tooltip: README_md_46.default,
-    typography: README_md_47.default,
+    "date-range-picker-input": README_md_17.default,
+    "datetime-picker": README_md_19.default,
+    "datetime-picker-input": README_md_18.default,
+    dropdown: README_md_20.default,
+    dropzone: README_md_21.default,
+    "error-message": README_md_22.default,
+    "file-input": README_md_23.default,
+    "flash-messages": README_md_24.default,
+    "form-component": README_md_25.default,
+    icon: README_md_26.default,
+    "image-gallery": README_md_27.default,
+    input: README_md_28.default,
+    label: README_md_29.default,
+    "list-item": README_md_30.default,
+    loader: README_md_31.default,
+    message: README_md_32.default,
+    modal: README_md_33.default,
+    "multi-combobox": README_md_34.default,
+    "multi-select": README_md_35.default,
+    pagination: README_md_36.default,
+    paper: README_md_37.default,
+    radio: README_md_39.default,
+    "radio-group": README_md_38.default,
+    "raster-image": README_md_40.default,
+    select: README_md_41.default,
+    tabs: README_md_42.default,
+    "text-input": README_md_43.default,
+    "text-link": README_md_44.default,
+    textarea: README_md_45.default,
+    "time-picker": README_md_47.default,
+    "time-picker-input": README_md_46.default,
+    toggle: README_md_48.default,
+    tooltip: README_md_49.default,
+    typography: README_md_50.default,
 };