@uxf/ui 11.31.0 → 11.32.0

package/date-picker/date-picker.stories.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
@@ -73,14 +73,12 @@ function Default() {
             react_1.default.createElement("li", null, "now + 5 days & now + 6 days -> flag-1 className, not disabled"),
             react_1.default.createElement("li", null, "now + 3 days & now + 4 days -> flag-2 className, disabled"),
             react_1.default.createElement("li", null, "now + 8 days -> no custom className, disabled")),
-        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, datesConfig: datesConfig }),
+        react_1.default.createElement(date_picker_1.DatePicker, { datesConfig: datesConfig, onChange: onChange, selectedDate: value }),
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker with bottom content"),
-        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, bottomContent: react_1.default.createElement("div", null,
+        react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")) }),
+                react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, selectedDate: value }),
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker with onMonthChange callback"),
-        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, onMonthChange: (months) => alert(months[0].month) })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, onMonthChange: (months) => { var _a, _b; return alert((_b = (_a = months.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : "No month"); }, selectedDate: value })));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }
-exports.Default = Default;

package/date-picker-input/date-picker-input.js

@@ -82,6 +82,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/date-picker-input/date-picker-input.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 const action_1 = require("../utils/action");
@@ -41,12 +41,10 @@ function Default() {
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: date }),
-        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, label: "Min/max", maxDate: "2023-06-12", minDate: "2023-06-06", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }
-exports.Default = Default;

package/date-range-picker/date-range-picker-decade.js

@@ -35,8 +35,9 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
+    var _a, _b;
     const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
-    const currentYear = activeMonths[0].year;
+    const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
     const { decadeLabel, years } = (0, use_decade_1.useDecade)({
         year: currentYear,
     });
@@ -58,12 +59,12 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
         }
     }, [canGoToYear, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                onClick: handleGoToPrevDecadeClick,
-                title: "Zpět",
-            }, nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
                 onClick: handleGoToNextDecadeClick,
                 title: "Vpřed",
+            }, prevButtonProps: {
+                onClick: handleGoToPrevDecadeClick,
+                title: "Zpět",
             }, selectButtonProps: {
                 children: decadeLabel,
             } }),

package/date-range-picker/date-range-picker-month.js

@@ -51,19 +51,19 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
         props.setViewMode("year");
     }, [props]);
     return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
-        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                isDisabled: !canGoToPrevMonth,
-                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
-                title: "Předchozí měsíc",
-            }, nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
                 isDisabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
                 title: "Nadcházející měsíc",
+            }, prevButtonProps: {
+                isDisabled: !canGoToPrevMonth,
+                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
+                title: "Předchozí měsíc",
             }, selectButtonProps: {
                 children: monthLabel,
                 onClick: handleMonthClick,
                 title: "Vybrat měsíc",
             } }),
-        react_1.default.createElement(calendar_1.Calendar, { month: props.month, year: props.year, datePickerProps: dateRangePickerProps })));
+        react_1.default.createElement(calendar_1.Calendar, { datePickerProps: dateRangePickerProps, month: props.month, year: props.year })));
 });
 exports.DateRangePickerMonth.displayName = "UxfUiDateRangePickerMonth";

package/date-range-picker/date-range-picker-year.js

@@ -35,9 +35,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerYear = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d;
     const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
-    const currentMonth = activeMonths[0].month;
-    const currentYear = activeMonths[0].year;
+    const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
+    const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { months, yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
         yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
@@ -62,14 +63,14 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
         }
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                isDisabled: !canGoToPrevYear,
-                onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
-                title: "Předchozí rok",
-            }, nextButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
                 isDisabled: !canGoToNextYear,
                 onClick: canGoToNextYear ? handleGoToNextYear : undefined,
                 title: "Nadcházející rok",
+            }, prevButtonProps: {
+                isDisabled: !canGoToPrevYear,
+                onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
+                title: "Předchozí rok",
             }, selectButtonProps: {
                 children: yearLabel,
                 onClick: handleYearClick,

package/date-range-picker/date-range-picker.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
@@ -34,9 +34,6 @@ exports.default = {
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_range_picker_1.DateRangePicker, { closePopoverHandler: close, onChange: onChange, selectedDates: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
+    const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { closePopoverHandler: close, onChange: onChange, selectedDates: value });
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }
-exports.Default = Default;

package/date-range-picker-input/date-range-picker-input.js

@@ -37,7 +37,7 @@ exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
 exports.SEPARATOR = " – ";
 const splitValueToRange = (value) => {
     const splitStr = value === null || value === void 0 ? void 0 : value.split(exports.SEPARATOR);
-    return { from: splitStr ? splitStr[0] : undefined, to: splitStr && splitStr.length > 0 ? splitStr[1] : undefined };
+    return { from: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(0), to: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(1) };
 };
 exports.splitValueToRange = splitValueToRange;
 exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {

package/date-range-picker-input/date-range-picker-input.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const date_range_picker_input_1 = require("./date-range-picker-input");
 // import Docs from "./date-picker.docs.mdx";
@@ -41,15 +41,13 @@ function Default() {
     const [range, setRange] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setRange);
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", value: range, onChange: onChange, isClearable: true }),
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", value: range, onChange: onChange }),
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", name: "date-disabled", label: "Datum disabled", value: range, onChange: onChange, isDisabled: true }),
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", name: "date-readonly", label: "Datum readonly", value: range, onChange: onChange, isReadOnly: true }),
-        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", value: range, onChange: onChange, isInvalid: true, isClearable: true }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: range }),
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", name: "date", label: "With bottom content", value: range, onChange: onChange, isClearable: true })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
+                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, value: range })));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }
-exports.Default = Default;

package/datetime-picker/datetime-picker.js

@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatetimePicker = exports.getStrictParsedDatetime = exports.OUTPUT_DATETIME_FORMAT = void 0;
+exports.DatetimePicker = exports.OUTPUT_DATETIME_FORMAT = void 0;
+exports.getStrictParsedDatetime = getStrictParsedDatetime;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const dayjs_1 = __importStar(require("dayjs"));
@@ -40,7 +41,6 @@ function getStrictParsedDatetime(date) {
     var _a;
     return (0, dayjs_1.default)((_a = date === null || date === void 0 ? void 0 : date.slice(0, 19)) !== null && _a !== void 0 ? _a : null, exports.OUTPUT_DATETIME_FORMAT.slice(0, 19), true);
 }
-exports.getStrictParsedDatetime = getStrictParsedDatetime;
 function getSelectedDate(value) {
     const parsedValue = getStrictParsedDatetime(value);
     if (value && parsedValue.isValid()) {
@@ -75,7 +75,7 @@ const DatetimePicker = (props) => {
         var _a;
         const parsedValue = value
             ? (tmpDate !== null && tmpDate !== void 0 ? tmpDate : (0, dayjs_1.default)()).hour(value.hour).minute(value.minute).second(0)
-            : tmpDate !== null && tmpDate !== void 0 ? tmpDate : null;
+            : (tmpDate !== null && tmpDate !== void 0 ? tmpDate : null);
         onChange((_a = parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.toISOString()) !== null && _a !== void 0 ? _a : null);
         setTmpDate(parsedValue);
     }, [onChange, tmpDate]);

package/datetime-picker/datetime-picker.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const datetime_picker_1 = require("./datetime-picker");
@@ -34,11 +34,8 @@ exports.default = {
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testDatetimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: react_1.default.createElement("div", null,
-                "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatetimePickers)));
+    const testDatetimePickers = (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: react_1.default.createElement("div", null,
+            "Bottom content",
+            react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value }));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatetimePickers);
 }
-exports.Default = Default;

package/datetime-picker-input/datetime-picker-input.js

@@ -79,7 +79,6 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { value: (0, get_datetime_string_1.getDatetimeString)(props.value), onChange: onChange, onClose: close })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, bottomContent: props.bottomContent, closePopoverHandler: close, onChange: onChange, value: props.value, unavailableDates: props.unavailableDates })))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { onChange: onChange, onClose: close, value: (0, get_datetime_string_1.getDatetimeString)(props.value) })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onChange, unavailableDates: props.unavailableDates, value: props.value }))));
 });
 exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

package/datetime-picker-input/datetime-picker-input.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 const action_1 = require("../utils/action");
@@ -41,11 +41,9 @@ function Default() {
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum a \u010Das disabled", name: "date-disabled", onChange: onChange, value: date }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum a \u010Das readonly", name: "date-readonly", onChange: onChange, value: date }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum a \u010Das invalid", name: "date-invalid", onChange: onChange, value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-13", maxDate: "2023-06-26", label: "min/max-validate", name: "min/max", onChange: onChange, placeholder: "", value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, label: "min/max-validate", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min/max", onChange: onChange, placeholder: "", value: date }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }
-exports.Default = Default;

package/datetime-picker-input/get-datetime-string.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDatetimeString = void 0;
+exports.getDatetimeString = getDatetimeString;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const dayjs_1 = __importDefault(require("dayjs"));
 /**
@@ -16,4 +16,3 @@ function getDatetimeString(value) {
     const date = (0, dayjs_1.default)(value, ["YYYY-MM-DD[T]HH:mm:ssZ", "YYYY-MM-DD[T]HH:mm:ss.SSS[Z]"]);
     return date.isValid() ? date.format("YYYY-MM-DD[T]HH:mm:ssZ") : null;
 }
-exports.getDatetimeString = getDatetimeString;

package/dialog/dialog.js

@@ -28,7 +28,7 @@ const react_1 = require("@headlessui/react");
 const react_2 = __importStar(require("react"));
 exports.Dialog = (0, react_2.memo)((props) => {
     var _a, _b;
-    return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, open: props.open, onClose: props.disableBackdropClose ? () => null : props.onClose },
+    return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, onClose: props.disableBackdropClose ? () => null : props.onClose, open: props.open },
         react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-dialog__backdrop" }),
         react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
             react_2.default.createElement("div", { className: "uxf-dialog__body" },

package/dialog/dialog.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const button_1 = require("../button");
 const dialog_1 = require("./dialog");
@@ -39,4 +39,3 @@ function Default() {
                 react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Dialog"),
                 react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => setOpen(false) }, "Close dialog"))))));
 }
-exports.Default = Default;

package/dropdown/dropdown.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const react_2 = __importDefault(require("react"));
@@ -19,11 +19,9 @@ const testDropdownItems = [
     { id: 3, title: "Test 3" },
 ];
 function Default() {
-    const storyDropdown = (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
-            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "positive", title: "Test" }, "Click me"),
-            react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
+    const storyDropdown = (react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
+        react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "positive", title: "Test" }, "Click me"),
+        react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title))))))));
     return (react_2.default.createElement("div", { className: "flex" },
         react_2.default.createElement("div", { className: "grow gap-4 p-4" }, storyDropdown)));
 }
-exports.Default = Default;

package/dropzone/dropzone-list.js

@@ -69,7 +69,7 @@ const DropzoneList = (props) => {
         var _a, _b, _c;
         const isUploading = file.id < 0 && !file.error;
         return ((_b = (_a = props.renderItem) === null || _a === void 0 ? void 0 : _a.call(props, file)) !== null && _b !== void 0 ? _b : (react_1.default.createElement("li", { className: "uxf-dropzone-list__item-wrapper", key: file.id },
-            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
+            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", Boolean(file.error) && classes_1.CLASSES.IS_INVALID) },
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: (0, get_file_icon_1.getIconNameFromFileExtension)(file.extension.toLowerCase()) }),
                     (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", download: props.isDownloadableOnClick ? file.name : undefined, href: (0, get_file_url_1.getFileUrl)(context.domain, file), rel: !props.isDownloadableOnClick ? "noreferrer noopenner" : undefined, target: !props.isDownloadableOnClick ? "_blank" : undefined }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
@@ -78,7 +78,7 @@ const DropzoneList = (props) => {
                         ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),
                     react_1.default.createElement("button", { className: "uxf-dropzone-list__item__block__remove-button", onClick: onRemove(file, isUploading), type: "button" },
                         react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__remove-button__icon", name: "xmarkLarge" })))),
-            !!file.error && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
+            Boolean(file.error) && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
     })));
 };
 exports.DropzoneList = DropzoneList;

package/dropzone/dropzone.stories.js

@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Default = void 0;
+exports.Default = Default;
+exports.ComponentStructure = ComponentStructure;
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
 const react_1 = __importStar(require("react"));
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
@@ -59,18 +60,16 @@ function Default() {
         });
     };
     return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
-        react_1.default.createElement(index_1.Dropzone, { isDisabled: status === "UPLOADING", helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-drag-and-drop" }),
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-click" }),
-        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-only-images" }),
-        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-single-file" }),
-        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled" }),
-        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
-        react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
-                react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
+        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", isDisabled: status === "UPLOADING", label: "Use drag and drop or click to upload", name: "dropzone-disabled-drag-and-drop", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), name: "dropzone-disabled-click", noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", name: "dropzone-only-images", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, name: "dropzone-single-file", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", name: "dropzone-disabled", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { name: "dropzone-list", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
+                react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files })));
 }
-exports.Default = Default;
 function ComponentStructure() {
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,
         react_1.default.createElement(index_1.Dropzone, null)));
 }
-exports.ComponentStructure = ComponentStructure;

package/dropzone/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type { DropzoneInputProps } from "./dropzone-input";
 export type { DropzoneListProps } from "./dropzone-list";
 export declare const Dropzone: import("react").ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & import("react").RefAttributes<HTMLDivElement>> & {

package/error-message/error-message.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorMessage = void 0;
 const react_1 = __importDefault(require("react"));
 const ErrorMessage = (props) => {
-    return (react_1.default.createElement("p", { id: props.id, className: "uxf-error-message" }, props.children));
+    return (react_1.default.createElement("p", { className: "uxf-error-message", id: props.id }, props.children));
 };
 exports.ErrorMessage = ErrorMessage;
 exports.ErrorMessage.displayName = "UxfUiErrorMessage";

package/error-message/error-message.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
@@ -14,4 +14,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.ErrorMessage, null, "This field is required.")));
 }
-exports.Default = Default;

package/file-input/file-input.js

@@ -60,13 +60,13 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
         }
         props.onChange(value, event);
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, compose_refs_1.composeRefs)(ref, innerRef), value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
-                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
+                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? (((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor")) : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
-                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
+                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), rel: "noreferrer noopenner", target: "_blank" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })))))));
 });
 exports.FileInput.displayName = "UxfUiFileInput";

package/file-input/file-input.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
@@ -39,11 +39,9 @@ function Default() {
         // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "space-y-2 p-20" },
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(index_1.FileInput, { label: "Default file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input" }),
-                react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isInvalid: true, label: "Error file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, isClearable: true, name: "file-input-error-message" }),
-                react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", label: "Readonly/disabled file input", isReadOnly: true, isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input-read-only" })))));
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
+        react_1.default.createElement("div", { className: "space-y-2" },
+            react_1.default.createElement(index_1.FileInput, { label: "Default file input", name: "file-input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isClearable: true, isInvalid: true, label: "Error file input", name: "file-input-error-message", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", isDisabled: true, isReadOnly: true, label: "Readonly/disabled file input", name: "file-input-read-only", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }))));
 }
-exports.Default = Default;

package/flash-messages/flash-messages-service.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Notification } from "@uxf/ui/flash-messages/flash-message";
 import { FlashMessagesRef } from "@uxf/ui/flash-messages/flash-messages";
 export declare function getFlashMessagesRef(): import("react").RefObject<FlashMessagesRef>;

package/flash-messages/flash-messages-service.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.flashMessage = exports.getFlashMessagesRef = void 0;
+exports.getFlashMessagesRef = getFlashMessagesRef;
+exports.flashMessage = flashMessage;
 const react_1 = require("react");
 const flashMessagesRef = (0, react_1.createRef)();
 function getFlashMessagesRef() {
     return flashMessagesRef;
 }
-exports.getFlashMessagesRef = getFlashMessagesRef;
 function flashMessage(notification) {
     if (flashMessagesRef.current) {
         flashMessagesRef.current.open(notification);
     }
 }
-exports.flashMessage = flashMessage;

package/flash-messages/flash-messages.js

@@ -32,7 +32,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_2.useState)([]);
     const permanentNotificationsRef = (0, react_2.useRef)(null);
     const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
-    const dismissableNotifications = notifications.filter((notification) => !!notification.autoDismiss);
+    const dismissableNotifications = notifications.filter((notification) => Boolean(notification.autoDismiss));
     const [lastToastHeight, setLastToastHeight] = (0, react_2.useState)(0);
     const lastToastRef = (0, react_2.useRef)(null);
     const [isCollapsed, setIsCollapsed] = (0, react_2.useState)(true);
@@ -91,7 +91,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
         dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ...clickableProps },
             react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
                 const isLast = index === dismissableNotifications.length - 1;
-                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper", ref: isLast ? lastToastRef : null, style: isLast
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, ref: isLast ? lastToastRef : null, show: true, style: isLast
                         ? {}
                         : {
                             "--flash-message-height": `${lastToastHeight}px`,
@@ -99,9 +99,9 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
                     react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
             })))),
         showDivider && react_2.default.createElement("hr", { className: "uxf-flash-messages__divider" }),
-        permanentNotifications.length > 0 && (react_2.default.createElement("div", { ref: permanentNotificationsRef, className: "uxf-flash-messages__permanent" },
+        permanentNotifications.length > 0 && (react_2.default.createElement("div", { className: "uxf-flash-messages__permanent", ref: permanentNotificationsRef },
             react_2.default.createElement("div", null, permanentNotifications.map((notification) => {
-                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, show: true },
                     react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
             })))))) : null;
 });