@uxf/ui 1.0.0-beta.115 → 1.0.0-beta.117

package/button/button.js

@@ -15,7 +15,5 @@ exports.Button = (0, forwardRef_1.forwardRef)("Button", (props, ref) => {
         ...restProps,
         className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
-        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),
-        react_1.default.createElement("div", { className: "loader" })));
+    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children)));
 });

package/button-list/button-list.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from "react";
+import { ButtonProps } from "../button";
+import { IconName } from "../icon/types";
+import { Placement } from "@floating-ui/react";
+declare type SingleButtonProps = Omit<ButtonProps, "children"> & {
+    icon?: IconName | null;
+    label?: ReactNode;
+};
+export interface ButtonGroupProps {
+    buttons: SingleButtonProps[];
+    openButton?: SingleButtonProps;
+    visibleButtonsCount: number;
+    color?: ButtonProps["color"];
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+    menuPlacement?: Placement;
+}
+export declare const ButtonList: FC<ButtonGroupProps>;
+export {};

package/button-list/button-list.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonList = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@headlessui/react");
+const button_1 = require("../button");
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("../icon");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const MenuButton = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
+    const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        ...restProps,
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", className),
+    });
+    return (react_1.default.createElement("a", { ...anchorProps },
+        icon && react_1.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__menu-button-icon" }),
+        label && react_1.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
+};
+const ButtonList = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const buttonsToRender = props.buttons.slice(0, props.visibleButtonsCount);
+    const restButtons = props.buttons.slice(props.visibleButtonsCount, props.buttons.length);
+    const openButtonIcon = ((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.icon) === null ? null : (_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : "ellipsis-vertical";
+    const openButtonLabel = (_e = (_d = props.openButton) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
+    const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.menuPlacement) !== null && _f !== void 0 ? _f : "bottom-start");
+    return (react_1.default.createElement("div", { className: "uxf-button-list" },
+        buttonsToRender.map((button, index) => {
+            var _a, _b, _c;
+            const { icon, label, ...restProps } = button;
+            return (react_1.default.createElement(button_1.Button, { key: index, ...restProps, color: (_a = restProps.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = restProps.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = restProps.variant) !== null && _c !== void 0 ? _c : props.variant, className: (0, cx_1.cx)(restProps.className, "uxf-button-list__button") },
+                icon && react_1.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__button-icon" }),
+                label && react_1.default.createElement("span", { className: "uxf-button-list__button-label" }, label)));
+        }),
+        restButtons.length > 0 && (react_1.default.createElement(react_2.Menu, { as: "div", className: "uxf-button-list__menu" },
+            react_1.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...props.openButton, color: (_h = (_g = props.openButton) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : props.color, size: (_k = (_j = props.openButton) === null || _j === void 0 ? void 0 : _j.size) !== null && _k !== void 0 ? _k : props.size, variant: (_m = (_l = props.openButton) === null || _l === void 0 ? void 0 : _l.variant) !== null && _m !== void 0 ? _m : props.variant, className: (0, cx_1.cx)((_o = props.openButton) === null || _o === void 0 ? void 0 : _o.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.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))),
+            react_1.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.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 })));
+            }))))));
+};
+exports.ButtonList = ButtonList;

package/button-list/button-list.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./button-list").ButtonGroupProps>;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/button-list/button-list.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/ButtonList",
+    component: index_1.ButtonList,
+};
+const Default = () => {
+    const component = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 0, variant: "outlined", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item", disabled: true },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "white", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item" },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 2, buttons: [
+                // eslint-disable-next-line no-console
+                { label: "First item", onClick: console.log },
+                { label: "Second item", color: "success" },
+                { label: "Third item" },
+                // eslint-disable-next-line no-console
+                { label: "Fourth item", onClick: console.log },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "xs", color: "error", variant: "outlined", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log },
+                { icon: "user", label: "Second item", color: "success" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: {} }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "xs", color: "success", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log, color: "error" },
+                { icon: "user", label: "Second item", color: "success", size: "default" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: { variant: "outlined", color: "default" } })));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));
+};
+exports.Default = Default;

package/button-list/index.d.ts

@@ -0,0 +1 @@
+export { ButtonList, ButtonGroupProps } from "./button-list";

package/button-list/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonList = void 0;
+var button_list_1 = require("./button-list");
+Object.defineProperty(exports, "ButtonList", { enumerable: true, get: function () { return button_list_1.ButtonList; } });

package/checkbox/checkbox.js

@@ -9,10 +9,10 @@ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_2 = __importDefault(require("react"));
 const checkbox_visual_1 = require("../checkbox-visual");
 exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
-    var _a;
+    var _a, _b, _c;
     return (react_2.default.createElement(react_1.Switch.Group, null,
         react_2.default.createElement("div", { className: `uxf-checkbox__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: "uxf-checkbox-visual-wrapper", disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
-                react_2.default.createElement(checkbox_visual_1.CheckboxVisual, { indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, size: props.size, value: props.value })),
+            react_2.default.createElement(react_1.Switch, { checked: (_b = props.value) !== null && _b !== void 0 ? _b : false, className: "uxf-checkbox-visual-wrapper", disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+                react_2.default.createElement(checkbox_visual_1.CheckboxVisual, { indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, size: props.size, value: (_c = props.value) !== null && _c !== void 0 ? _c : false })),
             react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
 });

package/combobox/combobox.d.ts

@@ -1,7 +1,7 @@
 import { Placement } from "@floating-ui/react";
+import { IconsSet } from "@uxf/ui/icon/theme";
+import { FormControlProps } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
-import { IconsSet } from "../icon/theme";
-import { FormControlProps } from "../types";
 export declare type ComboboxValueId = number | string;
 export declare type ComboboxValue<ValueId = ComboboxValueId> = {
     id: ValueId;

package/combobox/combobox.js

@@ -31,11 +31,12 @@ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const slugify_1 = require("@uxf/core/utils/slugify");
+const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
+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_2 = __importStar(require("react"));
-const use_dropdown_1 = require("../hooks/use-dropdown");
-const icon_1 = require("../icon");
-const label_1 = require("../label");
-const use_async_loading_1 = require("../hooks/use-async-loading");
 // TODO make the component generic ComboboxProps<T>
 exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     var _a, _b, _c, _d, _e, _f;
@@ -55,10 +56,11 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const emptyMessage = query.length === 0
         ? (_e = props.noQueryMessage) !== null && _e !== void 0 ? _e : "Pro zobrazení možností začněte psát"
         : (_f = props.notFoundMessage) !== null && _f !== void 0 ? _f : "Nic nenalezeno";
-    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v); }, value: selectedOption !== null && selectedOption !== void 0 ? selectedOption : null, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
+            props.value && !props.isDisabled && !props.isReadOnly && (react_2.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
             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.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.length > 0 ? (filteredData.map((option) => {
             var _a, _b, _c, _d;

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1674566060684";
+export declare const ICONS_VERSION = "1676106442386";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1674566060684";
+exports.ICONS_VERSION = "1676106442386";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -55,6 +55,10 @@ export declare const ICONS: {
         readonly w: 512;
         readonly h: 512;
     };
+    readonly "ellipsis-vertical": {
+        readonly w: 128;
+        readonly h: 512;
+    };
     readonly file: {
         readonly w: 384;
         readonly h: 512;
@@ -93,6 +97,7 @@ declare module "@uxf/ui/icon/theme" {
         "chevronUp": true;
         "cloud": true;
         "copy": true;
+        "ellipsis-vertical": true;
         "file": true;
         "imageFile": true;
         "videoFile": true;

package/config/icons.js

@@ -17,6 +17,7 @@ exports.ICONS = {
     "chevronUp": { w: 512, h: 512 },
     "cloud": { w: 640, h: 512 },
     "copy": { w: 512, h: 512 },
+    "ellipsis-vertical": { w: 128, h: 512 },
     "file": { w: 384, h: 512 },
     "imageFile": { w: 384, h: 512 },
     "videoFile": { w: 384, h: 512 },

package/css/button-list.css

@@ -0,0 +1,61 @@
+.uxf-button-list {
+    @apply flex items-center space-x-2;
+
+    &__menu {
+        @apply relative;
+    }
+
+    &__menu-items {
+        @apply absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none z-dropdown;
+
+        :root .light & {
+            @apply divide-gray-100 bg-white ring-black/5;
+        }
+
+        :root .dark & {
+            @apply divide-gray-700 bg-gray-900 ring-white/10;
+        }
+    }
+
+    &__button {
+        @apply space-x-2;
+    }
+
+    &__open-button {
+        @apply space-x-2;
+    }
+
+    &__menu-button {
+        @apply flex px-3 py-2 space-x-3 text-sm is-hoverable:hover:cursor-pointer;
+
+        :root .light & {
+            @apply text-black hover:text-gray-800;
+        }
+
+        :root .dark & {
+            @apply text-white hover:text-gray-200;
+        }
+
+        &-icon {
+            @apply w-3;
+
+            :root .light & {
+                @apply text-lightMedium;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium;
+            }
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow;
+            }
+        }
+    }
+}

package/css/file-input.css

@@ -58,7 +58,7 @@
         }
 
         &__wrapper {
-            @apply flex items-center border px-3 rounded-r-md w-full min-w-0;
+            @apply flex items-center justify-between border px-3 rounded-r-md w-full min-w-0;
 
             :root .light & {
                 @apply border-gray-200;

package/css/input.css

@@ -66,6 +66,30 @@
         }
     }
 
+    &__remove-button {
+        @apply px-1 py-0.5 mx-2 rounded-full;
+
+        :root .light & {
+            @apply bg-gray-300;
+        }
+
+        :root .dark & {
+            @apply bg-gray-600;
+        }
+
+        &__icon {
+            @apply w-2 h-3;
+
+            :root .light & {
+                @apply text-white;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium;
+            }
+        }
+    }
+
     &--size-small {
         height: theme("inputSize.sm");
 

package/css/select.css

@@ -49,7 +49,7 @@
     }
 
     &__button-text {
-        @apply flex-grow;
+        @apply flex-grow truncate;
     }
 
     &__button-icon {

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

@@ -1,6 +1,6 @@
+import { InputProps } from "@uxf/ui/input/input";
+import { FormControlProps } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
-import { InputProps } from "../input/input";
-import { FormControlProps } from "../types";
 export interface DatePickerInputProps extends Omit<FormControlProps<Date | null>, "value">, Pick<InputProps, "size" | "variant"> {
     className?: string;
     defaultValue?: string;

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

@@ -33,9 +33,10 @@ const classes_1 = require("@uxf/core/constants/classes");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const form_control_1 = require("@uxf/ui/form-control");
+const input_1 = require("@uxf/ui/input");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_3 = __importStar(require("react"));
-const form_control_1 = require("../form-control");
 const date_picker_provider_1 = require("./date-picker-provider");
 exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props, ref) => {
     var _a;
@@ -82,6 +83,7 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
             react_3.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper", ref: stableRef },
                 react_3.default.createElement("span", { className: "uxf-date-picker-input__left-element" }, props.leftElement),
                 react_3.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }),
+                props.value && !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
                 react_3.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
             !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(react_2.Transition, { as: react_3.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
                 react_3.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", ref: floatingDatePicker.floating, static: true }, ({ close }) => (react_3.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));

package/file-input/file-input.js

@@ -29,9 +29,11 @@ const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const form_control_1 = require("@uxf/ui/form-control");
+const input_1 = require("@uxf/ui/input");
 const loader_1 = require("@uxf/ui/loader/loader");
 const react_1 = __importStar(require("react"));
 const file_input_base_1 = require("./file-input-base");
+// eslint-disable-next-line complexity
 exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
     var _a, _b;
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
@@ -60,9 +62,10 @@ exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
     };
     return (react_1.default.createElement(form_control_1.FormControl, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(file_input_base_1.BaseFileInput, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref }),
             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-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ("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" },
-                    react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet"))),
-            react_1.default.createElement(file_input_base_1.BaseFileInput, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref }))));
+                    react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet"),
+                    props.value && !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
 });

package/input/index.d.ts

@@ -5,8 +5,9 @@ import { InputRightAddon } from "./input-right-addon";
 import { InputRightElement } from "./input-right-element";
 export declare const Input: import("react").ForwardRefExoticComponent<import("./input").InputProps & import("react").RefAttributes<HTMLInputElement>> & {
     Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
-    LeftElement: typeof InputLeftElement;
-    RightElement: typeof InputRightElement;
     LeftAddon: typeof InputLeftAddon;
+    LeftElement: typeof InputLeftElement;
+    RemoveButton: import("react").FC<import("./input-remove-button").InputRemoveButtonProps>;
     RightAddon: typeof InputRightAddon;
+    RightElement: typeof InputRightElement;
 };

package/input/index.js

@@ -5,12 +5,14 @@ const input_1 = require("./input");
 const input_element_1 = require("./input-element");
 const input_left_addon_1 = require("./input-left-addon");
 const input_left_element_1 = require("./input-left-element");
+const input_remove_button_1 = require("./input-remove-button");
 const input_right_addon_1 = require("./input-right-addon");
 const input_right_element_1 = require("./input-right-element");
 exports.Input = Object.assign(input_1.Input, {
     Element: input_element_1.InputElement,
-    LeftElement: input_left_element_1.InputLeftElement,
-    RightElement: input_right_element_1.InputRightElement,
     LeftAddon: input_left_addon_1.InputLeftAddon,
+    LeftElement: input_left_element_1.InputLeftElement,
+    RemoveButton: input_remove_button_1.InputRemoveButton,
     RightAddon: input_right_addon_1.InputRightAddon,
+    RightElement: input_right_element_1.InputRightElement,
 });

package/input/input-remove-button.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+export interface InputRemoveButtonProps {
+    onChange?: (value: any) => void;
+}
+export declare const InputRemoveButton: FC<InputRemoveButtonProps>;

package/input/input-remove-button.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRemoveButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const InputRemoveButton = (props) => {
+    const onRemoveClick = (e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+    };
+    const onRemoveKeyDown = (e) => {
+        var _a;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+        }
+    };
+    return (react_1.default.createElement("button", { className: "uxf-input__remove-button", onClick: onRemoveClick, onKeyDown: onRemoveKeyDown, type: "button" },
+        react_1.default.createElement(icon_1.Icon, { className: "uxf-input__remove-button__icon", name: "xmarkLarge" })));
+};
+exports.InputRemoveButton = InputRemoveButton;

package/input/input.stories.d.ts

@@ -3,10 +3,11 @@ declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./input").InputProps & React.RefAttributes<HTMLInputElement>> & {
         Element: React.ForwardRefExoticComponent<import("./input-element").InputElementProps & React.RefAttributes<HTMLInputElement>>;
-        LeftElement: typeof import("./input-left-element").InputLeftElement;
-        RightElement: typeof import("./input-right-element").InputRightElement;
         LeftAddon: typeof import("./input-left-addon").InputLeftAddon;
+        LeftElement: typeof import("./input-left-element").InputLeftElement;
+        RemoveButton: React.FC<import("./input-remove-button").InputRemoveButtonProps>;
         RightAddon: typeof import("./input-right-addon").InputRightAddon;
+        RightElement: typeof import("./input-right-element").InputRightElement;
     };
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.115",
+  "version": "1.0.0-beta.117",
   "description": "",
   "publishConfig": {
     "access": "public"

package/select/select.d.ts

@@ -1,8 +1,8 @@
 import type { Placement } from "@floating-ui/react";
-import React, { ReactNode } from "react";
-import { IconsSet } from "../icon/theme";
-import { FormControlProps } from "../types";
+import { IconsSet } from "@uxf/ui/icon/theme";
 import { SelectSizes } from "@uxf/ui/select/theme";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
 export declare type SelectValue = number | string;
 export declare type SelectOption<T = SelectValue> = {
     disabled?: boolean;

package/select/select.js

@@ -30,10 +30,11 @@ const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+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_2 = __importStar(require("react"));
-const use_dropdown_1 = require("../hooks/use-dropdown");
-const icon_1 = require("../icon");
-const label_1 = require("../label");
 exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
     var _a, _b, _c, _d;
     const generatedId = (0, react_2.useId)();
@@ -45,10 +46,11 @@ exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", `uxf-select--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`, 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), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", `uxf-select--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`, 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), onChange: (v) => { var _a; return v && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id)); }, value: selectedOption !== null && selectedOption !== void 0 ? selectedOption : null, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
+            props.value && !props.isDisabled && !props.isReadOnly && (react_2.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
             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, { ref: dropdown.floating, className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top") }, props.options.map((option) => {
             var _a, _b, _c, _d;

package/select/select.stories.d.ts

@@ -1,5 +1,5 @@
-import { SelectValue } from "./select";
 import React from "react";
+import { SelectValue } from "./select";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./select").SelectProps<SelectValue, import("./select").SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;

package/select/select.stories.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
+const index_1 = require("./index");
 exports.default = {
     title: "UI/Select",
     component: index_1.Select,
@@ -38,15 +38,13 @@ const options = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two" },
     { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
+    { id: "four", label: "Option four" },
+    { id: "five", label: "Option five" },
+    { id: "six", label: "Option six" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)();

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

@@ -1,7 +1,7 @@
 import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
+import { InputProps } from "@uxf/ui/input/input";
+import { FormControlProps } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
-import { InputProps } from "../input/input";
-import { FormControlProps } from "../types";
 export interface TimePickerInputProps extends Omit<FormControlProps<TimeType | null>, "value">, Pick<InputProps, "size" | "variant"> {
     className?: string;
     defaultValue?: string;

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

@@ -30,8 +30,9 @@ const classes_1 = require("@uxf/core/constants/classes");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const form_control_1 = require("@uxf/ui/form-control");
+const input_1 = require("@uxf/ui/input");
 const react_3 = __importStar(require("react"));
-const form_control_1 = require("../form-control");
 const time_picker_1 = require("./time-picker");
 exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props, ref) => {
     var _a;
@@ -80,6 +81,7 @@ exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props
                 react_3.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-time-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "text", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte \u010Das...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value
                         ? `${props.value.hour}:${props.value.minute < 10 ? "0" + props.value.minute : props.value.minute}`
                         : "" }),
+                props.value && !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
                 react_3.default.createElement("span", { className: "uxf-time-picker-input__right-element" }, props.rightElement)),
             !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(react_2.Transition, { as: react_3.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
                 react_3.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", ref: floatingTimePicker.floating, static: true }, ({ close }) => {

package/utils/icons-config.js

@@ -70,6 +70,11 @@ module.exports = {
         height: 512,
         data: `<path fill="currentColor" d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />`,
     },
+    "ellipsis-vertical": {
+        width: 128,
+        height: 512,
+        data: `<path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/>`,
+    },
     file: {
         width: 384,
         height: 512,