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

package/time-picker/time-picker-hour.js

@@ -29,11 +29,10 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
 const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,
         hourRef,
@@ -42,8 +41,9 @@ const TimePickerHour = (props) => {
         isHourSelected,
         onHourSelect,
         onHourFocus,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__hour", isSelected && classes_1.CLASSES.IS_SELECTED), ref: hourRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-hour", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: hourRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerHour = TimePickerHour;
 exports.TimePickerHour.displayName = "UxfUiTimePickerHour";

package/time-picker/time-picker-hours.js

@@ -9,7 +9,7 @@ const time_picker_hour_1 = require("./time-picker-hour");
 const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const TimePickerHours = () => {
     const { hours } = (0, use_hours_1.useHours)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
 };
 exports.TimePickerHours = TimePickerHours;
 exports.TimePickerHours.displayName = "UxfUiTimePickerHours";

package/time-picker/time-picker-minute.js

@@ -29,11 +29,10 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
 const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
 const TimePickerMinute = (props) => {
     const minuteRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
         minute: props.minute,
         minuteRef,
@@ -42,8 +41,9 @@ const TimePickerMinute = (props) => {
         isMinuteSelected,
         onMinuteFocus,
         onMinuteSelect,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-minute", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: minuteRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerMinute = TimePickerMinute;
 exports.TimePickerMinute.displayName = "UxfUiTimePickerMinute";

package/time-picker/time-picker-minutes.js

@@ -9,7 +9,7 @@ const time_picker_minute_1 = require("./time-picker-minute");
 const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const TimePickerMinutes = () => {
     const { minutes } = (0, use_minutes_1.useMinutes)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
 };
 exports.TimePickerMinutes = TimePickerMinutes;
 exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";

package/time-picker/time-picker.d.ts

@@ -3,6 +3,7 @@ import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picke
 export interface TimePickerProps {
     closePopoverHandler?: () => void;
     onChange: (data: OnTimeChangeType) => void;
+    preventScroll?: boolean;
     selectedTime: TimeType | null;
 }
 export declare const TimePicker: FC<TimePickerProps>;

package/time-picker/time-picker.js

@@ -37,6 +37,7 @@ const TimePicker = (props) => {
         selectedTime: props.selectedTime,
         onTimeChange: props.onChange,
         onSelectCallback: () => setViewMode("global"),
+        preventScroll: props.preventScroll,
     });
     const timePickerComponents = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -45,7 +46,7 @@ const TimePicker = (props) => {
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
-                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour) !== null && _b !== void 0 ? _b : "0"),
+                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
                 react_1.default.createElement("div", null, ":"),
@@ -55,7 +56,7 @@ const TimePicker = (props) => {
                     react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
                         ? props.selectedTime.minute < 10
                             ? "0" + props.selectedTime.minute
-                            : props.selectedTime.minute
+                            : props.selectedTime.minute.toString()
                         : "00"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),

package/time-picker-input/time-picker-input.js

@@ -33,6 +33,7 @@ const _input_with_popover_1 = require("../_input-with-popover");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const icon_1 = require("../icon");
+const cx_1 = require("@uxf/core/utils/cx");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_TIME_FORMAT = ["HH:mm", "H:mm"];
 exports.DISPLAY_TIME_FORMAT = "H:mm";
@@ -57,6 +58,7 @@ function getSelectedTime(value) {
 exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-time-picker-input", props.className);
     const onInputChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_TIME_FORMAT, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -73,6 +75,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, selectedTime: selectedTime }))));
+    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_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

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

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

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

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

package/utils/mocks/uploadFIle.mock.js

@@ -13,7 +13,7 @@ function getRandomUuid() {
 function uploadFile(file, uploadOptions) {
     // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
     return new Promise((resolve) => {
-        const time = file.size / 10;
+        const time = file.size / 100;
         const interval = time / 10;
         let loaded = 0;
         const intervalTimer = window.setInterval(() => {

package/utils/storybook-config.d.ts

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

package/utils/tailwind-config.js

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

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

@@ -1,7 +0,0 @@
-import { FC } from "react";
-interface NextButtonProps {
-    onClick: () => void;
-    type: "prev" | "next";
-}
-export declare const ArrowButton: FC<NextButtonProps>;
-export {};

package/image-gallery/components/arrow-button.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowButton = void 0;
-const react_1 = __importDefault(require("react"));
-const icon_1 = require("../../icon");
-const ArrowButton = (props) => {
-    return (react_1.default.createElement("button", { className: `uxf-image-gallery__button ${props.type === "prev" ? "uxf-image-gallery__button--prev" : "uxf-image-gallery__button--next"}`, onClick: props.onClick },
-        react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: props.type === "prev" ? "chevronLeft" : "chevronRight" })));
-};
-exports.ArrowButton = ArrowButton;
-exports.ArrowButton.displayName = "UxfUiArrowButton";

package/select/theme.d.ts

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