@uxf/ui 1.0.0-beta.155 → 1.0.0-beta.157

package/_input-with-popover/input-with-popover.d.ts

@@ -19,5 +19,6 @@ export interface InputWithPopoverProps<ValueType = string> extends FormControlPr
     placeholder?: string;
     rightAddon?: ReactNode;
     rightElement?: ReactNode;
+    triggerElement: ReactNode;
 }
 export declare const _InputWithPopover: React.ForwardRefExoticComponent<InputWithPopoverProps<string> & React.RefAttributes<HTMLInputElement>>;

package/_input-with-popover/input-with-popover.js

@@ -72,21 +72,20 @@ exports._InputWithPopover = (0, react_1.forwardRef)((props, ref) => {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
-    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingPopover.reference), [ref, floatingPopover.reference]);
-    const onChange = () => props.onChange;
     const isInteractive = !props.isDisabled && !props.isReadOnly;
     const showRemoveButton = !!(props.value && isInteractive && props.isClearable);
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(react_3.Popover, { className: "uxf-iwp__popover" },
-            react_1.default.createElement(react_3.Popover.Button, { as: input_1.Input, inputFocus: input, size: props.size, variant: props.variant, ref: stableRef },
+            react_1.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant, wrapperRef: floatingPopover.refs.reference },
                 props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                 props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
-                react_1.default.createElement(input_1.Input.Element, { "aria-describedby": error.ariaDescribedby, "aria-errormessage": error.ariaErrormessage, "aria-invalid": error.ariaInvalid, "aria-live": "polite", autoComplete: "off", form: props.form, id: id, inputMode: "none", isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: onChange, placeholder: props.placeholder, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
-                (showRemoveButton || props.rightElement) && (react_1.default.createElement(input_1.Input.RightElement, null,
+                react_1.default.createElement(input_1.Input.Element, { "aria-describedby": error.ariaDescribedby, "aria-errormessage": error.ariaErrormessage, "aria-invalid": error.ariaInvalid, "aria-live": "polite", autoComplete: "off", form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, placeholder: props.placeholder, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), type: "text", value: props.value }),
+                react_1.default.createElement(input_1.Input.RightElement, null,
                     showRemoveButton && react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange }),
-                    props.rightElement)),
+                    react_1.default.createElement(react_3.Popover.Button, { className: "uxf-iwp__trigger-element" }, props.triggerElement),
+                    props.rightElement),
                 props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             isInteractive && (react_1.default.createElement(react_3.Transition, { as: react_1.Fragment, enter: "uxf-iwp__popover-panel--enter", enterFrom: "uxf-iwp__popover-panel--enter-from", enterTo: "uxf-iwp__popover-panel--enter-to", leave: "uxf-iwp__popover-panel--leave", leaveFrom: "uxf-iwp__popover-panel--leave-from", leaveTo: "uxf-iwp__popover-panel--leave-to" },
-                react_1.default.createElement(react_3.Popover.Panel, { className: "uxf-iwp__popover-panel", ref: floatingPopover.floating, static: true }, props.children))))));
+                react_1.default.createElement(react_3.Popover.Panel, { className: "uxf-iwp__popover-panel", ref: floatingPopover.refs.floating, static: true }, props.children))))));
 });
 exports._InputWithPopover.displayName = "UxfUiInputWithPopover";

package/_select-base/_select-base.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 composeRefs_1 = require("@uxf/core/utils/composeRefs");
@@ -32,43 +33,44 @@ const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
 const icon_1 = require("@uxf/ui/icon");
 const input_1 = require("@uxf/ui/input");
 const label_1 = require("@uxf/ui/label");
-const react_1 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const Options = (props) => {
     const Component = props.component;
-    return (react_1.default.createElement(Component.Options, { className: (0, cx_1.cx)("uxf-dropdown", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top"), ref: props.forwardRef }, props.options && props.options.length > 0 ? (props.options.map((option) => {
+    return (react_2.default.createElement(Component.Options, { className: (0, cx_1.cx)("uxf-dropdown", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top"), ref: props.forwardRef }, props.options && props.options.length > 0 ? (props.options.map((option) => {
         var _a, _b, _c, _d;
         const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-        return (react_1.default.createElement(Component.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, (_d = (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : optionKey) !== null && _d !== void 0 ? _d : option.label));
-    })) : (react_1.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
+        return (react_2.default.createElement(Component.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, (_d = (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : optionKey) !== null && _d !== void 0 ? _d : option.label));
+    })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 };
 Options.displayName = "UxfUiSelectBaseOptions";
 const _SelectBase = (props) => {
     var _a, _b, _c;
-    const generatedId = (0, react_1.useId)();
+    const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
-    const innerRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_2.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
-    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.reference), [dropdown.reference, props.forwardRef]);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.reference), [dropdown.refs.reference, props.forwardRef]);
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
     const Component = props.HUIComponent;
-    return (react_1.default.createElement(Component, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-sb", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, value: props.value }, (renderProps) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "uxf-form-component__label" },
-            react_1.default.createElement(Component.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
-        react_1.default.createElement("div", { className: "uxf-form-component__input" },
-            react_1.default.createElement(Component.Button, { "aria-invalid": props.isInvalid, "aria-describedby": errorId, as: input_1.Input, className: (0, cx_1.cx)("uxf-sb__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: props.customInputElementDisplayName, inputFocus: input, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, 
+    return (react_2.default.createElement(Component, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-sb", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement("div", { className: "uxf-form-component__label" },
+            react_2.default.createElement(Component.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
+        react_2.default.createElement("div", { className: "uxf-form-component__input" },
+            react_2.default.createElement(Component.Button, { "aria-invalid": props.isInvalid, "aria-describedby": errorId, as: input_1.Input, className: (0, cx_1.cx)("uxf-sb__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: props.customInputElementDisplayName, inputFocus: input, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, 
                 // ref={composeRefs(innerRef, props.forwardRef) as any as RefObject<HTMLButtonElement>}
                 size: props.size, variant: props.variant, wrapperRef: stableRef },
-                props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
-                props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                props.leftAddon && react_2.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_2.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                 props.children,
-                react_1.default.createElement(input_1.Input.RightElement, null,
-                    props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
-                    react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-sb__button-icon z-[1]", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
-                props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
-            react_1.default.createElement(Options, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.floating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption }),
-            props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
+                react_2.default.createElement(input_1.Input.RightElement, null,
+                    props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_2.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
+                    react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-sb__button-icon z-[1]", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
+                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, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.floating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption }))),
+            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;
 exports._SelectBase.displayName = "UxfUiSelectBase";

package/button-list/button-list.js

@@ -41,11 +41,11 @@ const ButtonList = (props) => {
         restButtons.length > 0 && (react_1.default.createElement(react_2.Menu, { as: "div", className: "uxf-button-list__menu" }, ({ open }) => {
             var _a, _b, _c, _d, _e, _f, _g;
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...props.openButton, color: (_b = (_a = props.openButton) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : props.color, size: (_d = (_c = props.openButton) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : props.size, variant: (_f = (_e = props.openButton) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : props.variant, className: (0, cx_1.cx)((_g = props.openButton) === null || _g === void 0 ? void 0 : _g.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.reference },
+                react_1.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...props.openButton, color: (_b = (_a = props.openButton) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : props.color, size: (_d = (_c = props.openButton) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : props.size, variant: (_f = (_e = props.openButton) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : props.variant, className: (0, cx_1.cx)((_g = props.openButton) === null || _g === void 0 ? void 0 : _g.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.refs.reference },
                     openButtonIcon && (react_1.default.createElement(icon_1.Icon, { name: openButtonIcon, className: "uxf-button-list__open-button-icon" })),
                     openButtonLabel && (react_1.default.createElement("span", { className: "uxf-button-list__open-button-label" }, openButtonLabel))),
                 open && (react_1.default.createElement(react_3.FloatingPortal, null,
-                    react_1.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.floating }, restButtons.map((button, index) => {
+                    react_1.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.refs.floating }, restButtons.map((button, index) => {
                         var _a, _b, _c;
                         return (react_1.default.createElement(react_2.Menu.Item, { key: index },
                             react_1.default.createElement(MenuButton, { ...button, color: (_a = button.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = button.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = button.variant) !== null && _c !== void 0 ? _c : props.variant })));

package/css/flash-messages.css

@@ -1,8 +1,8 @@
 .uxf-flash-messages {
-    @apply pointer-events-none fixed inset-0 z-50 flex items-end p-6;
+    @apply pointer-events-none fixed inset-0 z-flashMessage flex items-end p-6;
 
     &__list-wrapper {
-        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end;
+        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end ml-auto;
     }
 }
 

package/css/input-with-popover.css

@@ -1,7 +1,4 @@
 .uxf-iwp {
-    -webkit-user-select: none;
-    user-select: none;
-
     &__popover {
         @apply relative;
     }
@@ -41,4 +38,8 @@
             @apply origin-top scale-0 opacity-0;
         }
     }
+
+    &__trigger-element {
+        @apply inline-flex items-center justify-center w-5 h-5 rounded-sm;
+    }
 }

package/css/input.css

@@ -30,7 +30,7 @@
     }
 
     &__right-element {
-        @apply ml-2;
+        @apply ml-2 space-x-2;
     }
 
     &__left-addon,
@@ -71,10 +71,10 @@
     }
 
     &__remove-button {
-        @apply inline-flex items-center justify-center w-11 h-11 -my-3.5 -mx-1.5 rounded-full relative z-1;
+        @apply inline-flex items-center justify-center w-5 h-5 rounded-sm;
 
         &-inner {
-            @apply flex items-center justify-center w-4 h-4 rounded-inherit;
+            @apply flex items-center justify-center w-4 h-4 rounded-full;
 
             :root .light & {
                 @apply bg-gray-300;
@@ -211,11 +211,11 @@
 
             .uxf-input__element {
                 :root .light & {
-                    @apply border-gray-200 text-error;
+                    @apply border-gray-200 text-error placeholder-error-300;
                 }
 
                 :root .dark & {
-                    @apply border-gray-700 text-error;
+                    @apply border-gray-700 text-error placeholder-error-700;
                 }
             }
         }

package/date-picker-input/date-picker-input.d.ts

@@ -1,6 +1,9 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
-export interface DatePickerInputProps extends Omit<InputWithPopoverProps<Date | null>, "children" | "placeholder"> {
+export declare const ALLOWED_DATE_FORMAT: string[];
+export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
+export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
+    triggerElement?: ReactNode;
 }
 export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -26,10 +26,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerInput = void 0;
-const dayjs_1 = __importDefault(require("dayjs"));
+exports.DatePickerInput = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
+const dayjs_1 = __importStar(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const date_picker_provider_1 = require("./date-picker-provider");
 const _input_with_popover_1 = require("../_input-with-popover");
-exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: props.onChange, placeholder: props.placeholder || "Vyberte datum...", ref: ref, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value })))));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const icon_1 = require("../icon");
+(0, dayjs_1.extend)(customParseFormat_1.default);
+exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"];
+exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
+exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const onChange = props.onChange;
+    const onDatePickerChange = (0, react_1.useCallback)((value) => {
+        onChange((0, dayjs_1.default)(value).format("l"));
+    }, [onChange]);
+    const parsedDate = (0, dayjs_1.default)(props.value, exports.ALLOWED_DATE_FORMAT, true);
+    const selectedDate = props.value && parsedDate.isValid() ? parsedDate.toDate() : null;
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, placeholder: props.placeholder || "Vyberte datum...", ref: ref, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: onDatePickerChange, selectedDate: selectedDate }))));
+});
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/hooks/use-dropdown.d.ts

@@ -4,22 +4,18 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean):
     placement: Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    x: number;
+    y: number;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         placement: Placement;
         strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/react").MiddlewareData;
         update: () => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
         isPositioned: boolean;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
         onOpenChange: (open: boolean) => void;
         events: import("@floating-ui/react").FloatingEvents;
@@ -32,4 +28,5 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean):
     refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     isPositioned: boolean;
+    floatingStyles: import("react").CSSProperties;
 };

package/input/input-left-addon.js

@@ -8,10 +8,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const InputLeftAddon = (props) => {
     const isText = typeof props.children === "string";
-    const onClick = (e) => e.stopPropagation();
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__left-addon", isText && "uxf-input__left-addon--text"), onClick: onClick }, props.children));
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__left-addon", isText && "uxf-input__left-addon--text") }, props.children);
 };
 exports.InputLeftAddon = InputLeftAddon;
 exports.InputLeftAddon.displayName = "UxfUiInputLeftAddon";

package/input/input-left-element.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputLeftElement = void 0;
 const react_1 = __importDefault(require("react"));
 const InputLeftElement = (props) => {
-    const onClick = (e) => e.stopPropagation();
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: "uxf-input__left-element", onClick: onClick }, props.children));
+    return react_1.default.createElement("div", { className: "uxf-input__left-element" }, props.children);
 };
 exports.InputLeftElement = InputLeftElement;
 exports.InputLeftElement.displayName = "UxfUiInputLeftElement";

package/input/input-right-addon.js

@@ -8,10 +8,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const InputRightAddon = (props) => {
     const isText = typeof props.children === "string";
-    const onClick = (e) => e.stopPropagation();
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__right-addon", isText && "uxf-input__right-addon--text"), onClick: onClick }, props.children));
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__right-addon", isText && "uxf-input__right-addon--text") }, props.children));
 };
 exports.InputRightAddon = InputRightAddon;
 exports.InputRightAddon.displayName = "UxfUiInputRightAddon";

package/input/input-right-element.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputRightElement = void 0;
 const react_1 = __importDefault(require("react"));
 const InputRightElement = (props) => {
-    const onClick = (e) => e.stopPropagation();
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: "uxf-input__right-element", onClick: onClick }, props.children));
+    return react_1.default.createElement("div", { className: "uxf-input__right-element" }, props.children);
 };
 exports.InputRightElement = InputRightElement;
 exports.InputRightElement.displayName = "UxfUiInputRightElement";

package/multi-combobox/_multi-combobox-base.js

@@ -37,6 +37,7 @@ const icon_1 = require("@uxf/ui/icon");
 const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
+const react_3 = require("@floating-ui/react");
 exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
@@ -54,7 +55,7 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true);
     const inputRef = (0, react_2.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.refs.reference), [ref, dropdown.refs.reference]);
     const onRemove = (valueId) => { var _a, _b; return props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []); };
     const handleRemove = (valueId) => (e) => {
         e.preventDefault();
@@ -95,11 +96,12 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
                 selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
                 react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query }),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && "is-open"), name: iconName })),
-            react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), static: props.withPopover, ref: dropdown.floating }, filteredData.length > 0 ? (filteredData.map((option) => {
-                var _a, _b, _c, _d;
-                const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
-            })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))),
+            renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
+                react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), static: props.withPopover, ref: dropdown.refs.floating }, filteredData.length > 0 ? (filteredData.map((option) => {
+                    var _a, _b, _c, _d;
+                    const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
+                    return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
+                })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement("div", { className: "uxf-form-component__label" },

package/multi-select/_multi-select-base.js

@@ -34,12 +34,13 @@ const chip_1 = require("@uxf/ui/chip");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
 const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
+const react_3 = require("@floating-ui/react");
 exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const innerRef = (0, react_2.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_a = props.dropdownPlacement) !== null && _a !== void 0 ? _a : "bottom", true);
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.reference), [ref, dropdown.refs.reference]);
     const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "chevronDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
     const filteredOptions = props.options.filter((option) => !selectedOptions.map((i) => i.id).includes(option.id));
@@ -60,11 +61,12 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                     ? props.placeholder
                     : selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label)))),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
-            react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating, static: props.withPopover }, filteredOptions.map((option) => {
-                var _a;
-                const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-                return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));
-            })),
+            renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
+                react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.floating, static: props.withPopover }, filteredOptions.map((option) => {
+                    var _a;
+                    const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
+                    return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));
+                })))),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement("div", { className: "uxf-form-component__label" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.155",
+  "version": "1.0.0-beta.157",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react": "^0.23.1",
+    "@floating-ui/react": "^0.24.1",
     "@headlessui/react": "^1.7.14",
     "@uxf/core": "^4.5.1",
     "@uxf/datepicker": "^1.2.0",

package/select/select.js

@@ -1,45 +1,22 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const react_1 = require("@headlessui/react");
-const cx_1 = require("@uxf/core/utils/cx");
-const react_2 = __importStar(require("react"));
+const react_2 = __importDefault(require("react"));
 const _select_base_1 = require("../_select-base");
 const classes_1 = require("@uxf/core/constants/classes");
-const SelectedOption = (0, react_2.forwardRef)((props, ref) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__element", props.isEmpty && classes_1.CLASSES.IS_EMPTY), ref: ref },
-    react_2.default.createElement("span", { className: "uxf-input__element-text" }, props.children))));
-SelectedOption.displayName = "UxfUiSelectSelectedOption";
 const Select = (props) => {
     var _a, _b, _c;
     const selectedOption = props.options.find((option) => option.id === props.value);
     const onChange = (v) => props.onChange(v === null || v === void 0 ? void 0 : v.id);
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, customInputElementDisplayName: SelectedOption.displayName, dropdownPlacement: props.dropdownPlacement, 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: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: props.value, variant: props.variant },
-        react_2.default.createElement(SelectedOption, { isEmpty: !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) }, selectedOption
-            ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
-            : props.placeholder)));
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownPlacement: props.dropdownPlacement, 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: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: props.value, variant: props.variant },
+        react_2.default.createElement(react_1.Listbox.Button, { className: `uxf-input__element ${!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && classes_1.CLASSES.IS_EMPTY}` },
+            react_2.default.createElement("span", { className: "uxf-input__element-text" }, selectedOption
+                ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
+                : props.placeholder))));
 };
 exports.Select = Select;
 exports.Select.displayName = "UxfUiSelect";

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

@@ -1,7 +1,13 @@
-import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
-import React from "react";
+import React, { ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
-export interface TimePickerInputProps extends Omit<InputWithPopoverProps<TimeType | null>, "children" | "placeholder"> {
+export declare const ALLOWED_TIME_FORMAT: string[];
+export declare const DISPLAY_TIME_FORMAT = "H:mm";
+export declare function stringToTimeType(value: string): {
+    hour: number;
+    minute: number;
+};
+export interface TimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
+    triggerElement?: ReactNode;
 }
 export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -22,16 +22,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimePickerInput = void 0;
+exports.TimePickerInput = exports.stringToTimeType = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
 const react_1 = __importStar(require("react"));
 const time_picker_1 = require("./time-picker");
 const _input_with_popover_1 = require("../_input-with-popover");
-function formatTime(value) {
-    return `${value.hour}:${value.minute < 10 ? "0" + value.minute : value.minute}`;
+const dayjs_1 = __importStar(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const icon_1 = require("../icon");
+(0, dayjs_1.extend)(customParseFormat_1.default);
+exports.ALLOWED_TIME_FORMAT = ["HH:mm", "H:mm"];
+exports.DISPLAY_TIME_FORMAT = "H:mm";
+function stringToTimeType(value) {
+    const parseTime = (0, dayjs_1.default)(value, exports.ALLOWED_TIME_FORMAT, true);
+    return {
+        hour: parseTime.hour(),
+        minute: parseTime.minute(),
+    };
 }
-exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: props.onChange, placeholder: props.placeholder || "Vyberte čas...", ref: ref, value: props.value ? formatTime(props.value) : "" }, ({ close }) => {
-    var _a;
-    return (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: props.onChange, selectedTime: (_a = props.value) !== null && _a !== void 0 ? _a : null }));
-})));
+exports.stringToTimeType = stringToTimeType;
+exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const onChange = props.onChange;
+    const onTimePickerChange = (0, react_1.useCallback)((value) => onChange(value ? (0, dayjs_1.default)().hour(value.hour).minute(value.minute).second(0).format("H:mm") : null), [onChange]);
+    const parsedTime = (0, dayjs_1.default)(props.value, exports.ALLOWED_TIME_FORMAT, true);
+    const selectedTime = props.value && parsedTime.isValid() ? stringToTimeType(props.value) : null;
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, placeholder: props.placeholder || "Vyberte čas...", ref: ref, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", 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 }))));
+});
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

package/tooltip/tooltip.js

@@ -35,13 +35,13 @@ const STATIC_SIDES = {
     left: "right",
 };
 exports.Tooltip = (0, react_1.forwardRef)(({ children, className, content, style, ...options }, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const arrowRef = (0, react_1.useRef)(null);
     const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
     const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
     const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
     const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
-    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.reference, children.ref), [ref, tooltip.reference, children]);
+    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.refs.reference, children.ref), [ref, tooltip.refs.reference, children]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         (0, react_1.cloneElement)(children, tooltip.getReferenceProps({
             ref: stableRef,
@@ -49,12 +49,12 @@ exports.Tooltip = (0, react_1.forwardRef)(({ children, className, content, style
             "data-state": tooltip.open ? "open" : "closed",
         })),
         tooltip.open && (react_1.default.createElement("div", { ...tooltip.getFloatingProps({
-                ref: tooltip.floating,
+                ref: tooltip.refs.floating,
                 style: {
                     position: tooltip.strategy,
-                    top: (_c = tooltip.y) !== null && _c !== void 0 ? _c : 0,
-                    left: (_d = tooltip.x) !== null && _d !== void 0 ? _d : 0,
-                    visibility: tooltip.x === null ? "hidden" : "visible",
+                    top: tooltip.y,
+                    left: tooltip.x,
+                    visibility: !tooltip.x ? "hidden" : "visible",
                     ...style,
                 },
                 className: (0, cx_1.cx)("uxf-tooltip", className),

package/tooltip/use-tooltip.d.ts

@@ -10,22 +10,18 @@ export declare function useTooltip(options: TooltipOptions): {
     placement: Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    x: number;
+    y: number;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         placement: Placement;
         strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/react").MiddlewareData;
         update: () => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
         isPositioned: boolean;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
         onOpenChange: (open: boolean) => void;
         events: import("@floating-ui/react").FloatingEvents;
@@ -38,6 +34,7 @@ export declare function useTooltip(options: TooltipOptions): {
     refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     isPositioned: boolean;
+    floatingStyles: import("react").CSSProperties;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;