@uxf/ui 1.0.0-beta.171 → 1.0.0-beta.173

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

@@ -49,7 +49,7 @@ exports._InputWithPopover = (0, react_1.forwardRef)((props, ref) => {
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const error = useErrorProps(props.error, id, props.isInvalid);
-    const rootClassName = (0, cx_1.cx)("uxf-iwp", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    const rootClassName = (0, cx_1.cx)("uxf-input-with-popover", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     const floatingPopover = (0, react_2.useFloating)({
         placement: (_c = props.popoverPlacement) !== null && _c !== void 0 ? _c : "bottom",
         middleware: [
@@ -72,17 +72,18 @@ exports._InputWithPopover = (0, react_1.forwardRef)((props, ref) => {
     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" }, (renderProps) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_3.Popover, { as: react_1.Fragment }, (renderProps) => (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant, wrapperRef: floatingPopover.refs.setReference },
                 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, 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("") }),
-                    react_1.default.createElement(react_3.Popover.Button, { className: "uxf-iwp__trigger-element" }, props.triggerElement),
+                    react_1.default.createElement(react_3.Popover.Button, { className: "uxf-input-with-popover__trigger-element" }, props.triggerElement),
                     props.rightElement),
                 props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             isInteractive && renderProps.open && (react_1.default.createElement(react_2.FloatingPortal, null,
-                react_1.default.createElement(react_3.Popover.Panel, { className: (0, cx_1.cx)("uxf-iwp__popover-panel", floatingPopover.placement === "bottom" && "uxf-iwp__popover-panel--bottom", floatingPopover.placement === "top" && "uxf-iwp__popover-panel--top"), ref: floatingPopover.refs.setFloating, static: true, style: floatingPopover.floatingStyles }, props.children))))))));
+                react_1.default.createElement(react_3.Popover.Panel, { className: (0, cx_1.cx)("uxf-input-with-popover__panel", floatingPopover.placement === "bottom" &&
+                        "uxf-input-with-popover__panel--bottom", floatingPopover.placement === "top" && "uxf-input-with-popover__panel--top"), ref: floatingPopover.refs.setFloating, static: true, style: floatingPopover.floatingStyles }, props.children))))))));
 });
 exports._InputWithPopover.displayName = "UxfUiInputWithPopover";

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

@@ -1,5 +1,5 @@
 import { Placement, Strategy } from "@floating-ui/react";
-import type { Combobox, Listbox } from "@headlessui/react";
+import type { Combobox as HUICombobox, Listbox as HUIListbox } from "@headlessui/react";
 import { IconsSet } from "@uxf/ui/icon/theme";
 import { Clearable, FormControlProps } from "@uxf/ui/types";
 import React, { ReactElement, ReactNode, Ref } from "react";
@@ -38,11 +38,11 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     forwardRef?: Ref<SelectBaseTypeRef> | undefined;
 }
 type Props<ValueId = SelectBaseValue, Value = ValueId, Option = SelectBaseOption<ValueId>> = SelectBaseProps<Value, Option> & ({
-    HUIComponent: typeof Combobox;
+    HUIComponent: typeof HUICombobox;
     onChange?(value: Value | null): void;
     value: Value | null;
 } | {
-    HUIComponent: typeof Listbox;
+    HUIComponent: typeof HUIListbox;
     onChange?(value: Value | null): void;
     value: ValueId | null;
 });

package/_select-base/_select-base.js

@@ -34,6 +34,22 @@ 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"));
+function isHUICombobox(HUIComponent) {
+    return typeof HUIComponent.Input !== "undefined";
+}
+const InputWrapper = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { HUIComponent, children, ...restProps } = props;
+    if (isHUICombobox(HUIComponent)) {
+        return react_2.default.createElement(input_1.Input, { ...restProps }, children);
+    }
+    return (react_2.default.createElement(HUIComponent.Button, { as: input_1.Input, ...restProps }, children));
+};
+const InputArrow = (props) => {
+    var _a;
+    const iconName = (_a = props.iconName) !== null && _a !== void 0 ? _a : "caretDown";
+    return react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", props.open && classes_1.CLASSES.IS_OPEN), name: iconName });
+};
 const Options = (props) => {
     const Component = props.component;
     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, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
@@ -44,7 +60,7 @@ const Options = (props) => {
 };
 Options.displayName = "UxfUiSelectBaseOptions";
 const _SelectBase = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const innerRef = (0, react_2.useRef)(null);
@@ -52,13 +68,13 @@ const _SelectBase = (props) => {
     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, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
     const Component = props.HUIComponent;
-    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,
+    // const ComponentInput = typeof Component.Input.displayName === "undefined" ? Component.Button : Input;
+    return (react_2.default.createElement(Component, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", 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, size: props.size, variant: props.variant, wrapperRef: stableRef },
+            react_2.default.createElement(InputWrapper, { HUIComponent: Component, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-select-base__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, size: props.size, variant: props.variant, wrapperRef: stableRef },
                 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,
@@ -68,7 +84,8 @@ const _SelectBase = (props) => {
                         !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 })),
+                    isHUICombobox(Component) ? (react_2.default.createElement(Component.Button, null,
+                        react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))) : (react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))),
                 props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             renderProps.open && (react_2.default.createElement(react_1.FloatingPortal, null,
                 react_2.default.createElement(Options, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, style: dropdown.floatingStyles }))),

package/css/dropdown.css

@@ -2,6 +2,8 @@
     @apply absolute z-dropdown w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
         ring-opacity-5 sm:text-sm;
 
+    outline: none;
+
     :root .light & {
         @apply bg-white text-gray-800;
     }

package/css/input-with-popover.css

@@ -1,7 +1,12 @@
-.uxf-iwp {
-    &__popover-panel {
-        @apply z-dropdown max-w-md overflow-y-auto rounded-md p-3 shadow-lg ring-1 ring-black
-            ring-opacity-5 focus:outline-none;
+.uxf-input-with-popover {
+    &__panel {
+        @apply z-dropdown max-w-md rounded-md p-3 shadow-lg ring-1 ring-black ring-opacity-5;
+
+        overflow-y: auto;
+
+        &:focus {
+            outline: none;
+        }
 
         :root .light & {
             @apply bg-white text-gray-800;
@@ -21,6 +26,10 @@
     }
 
     &__trigger-element {
-        @apply inline-flex items-center justify-center w-5 h-5 rounded-sm;
+        @apply w-5 h-5 rounded-sm;
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
     }
 }

package/css/input.css

@@ -10,7 +10,10 @@
     }
 
     &__element {
-        @apply appearance-none bg-transparent outline-none placeholder:font-light;
+        @apply bg-transparent placeholder:font-light;
+
+        appearance: none;
+        outline: none;
 
         :root .light & {
             @apply placeholder:text-gray-400;
@@ -25,6 +28,17 @@
         }
     }
 
+    &__left-element,
+    &__right-element {
+        :root .light & {
+            @apply text-lightLow;
+        }
+
+        :root .dark & {
+            @apply text-darkLow;
+        }
+    }
+
     &__left-element {
         @apply mr-2;
     }
@@ -59,7 +73,7 @@
     }
 
     &__wrapper {
-        @apply rounded-md border px-4;
+        @apply rounded-md border px-3;
 
         :root .light & {
             @apply border-gray-200;
@@ -71,10 +85,19 @@
     }
 
     &__remove-button {
-        @apply inline-flex items-center justify-center w-5 h-5 rounded-sm;
+        @apply rounded-sm;
+
+        align-items: center;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
 
         &-inner {
-            @apply flex items-center justify-center w-4 h-4 rounded-full;
+            @apply w-3.5 h-3.5 rounded-full;
+
+            align-items: center;
+            display: flex;
+            justify-content: center;
 
             :root .light & {
                 @apply bg-gray-300;
@@ -86,7 +109,7 @@
         }
 
         &-icon {
-            @apply w-2.5 h-2.5;
+            @apply w-2 h-2;
 
             :root .light & {
                 @apply text-white;
@@ -149,7 +172,7 @@
     }
 
     &.is-disabled {
-        @apply cursor-not-allowed;
+        cursor: not-allowed;
 
         :root .light & {
             @apply bg-gray-100;
@@ -160,15 +183,15 @@
         }
 
         .uxf-input__element {
-            @apply cursor-not-allowed;
+            cursor: not-allowed;
         }
     }
 
     &.is-readonly {
-        @apply cursor-text;
+        cursor: text;
 
         .uxf-input__element {
-            @apply cursor-text;
+            cursor: text;
         }
 
         .uxf-input__wrapper {
@@ -225,8 +248,6 @@
         &,
         &:hover,
         &:focus {
-            -webkit-appearance: none;
-            -moz-appearance: none;
             appearance: none;
             margin: 1px;
             transition: background-color 5000s ease-in-out 0s !important;

package/css/multi-combobox.css

@@ -4,16 +4,24 @@
     &__button {
         min-height: theme("inputSize.default");
 
-        @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-4 pr-8 pb-[7px]
+        @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-3 pr-8 pb-[7px]
             text-left outline-none before:absolute before:inset-0 before:pointer-events-none before:border
-            before:rounded-lg;
+            before:rounded-lg shadow-sm;
 
         &--with-popover {
             @apply cursor-text pb-0;
         }
 
         .uxf-icon {
-            @apply absolute top-3.5 right-4 h-3;
+            @apply absolute top-1/2 -translate-y-1/2 right-3;
+
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow;
+            }
         }
 
         :root .light & {

package/css/select-base.css

@@ -1,10 +1,19 @@
-.uxf-sb {
+.uxf-select-base {
     &__button-text {
-        @apply min-w-0 flex-grow truncate cursor-default inline-flex items-center h-full;
+        @apply truncate;
+
+        align-items: center;
+        cursor: default;
+        display: inline-flex;
+        flex-grow: 1;
+        height: 100%;
+        min-width: 0;
     }
 
     .uxf-input__element {
-        @apply flex items-center min-w-0;
+        align-items: center;
+        display: flex;
+        min-width: 0;
 
         &.is-empty {
             @apply font-light;
@@ -29,45 +38,13 @@
         }
     }
 
-    &__button-icon {
-        @apply h-3 transition duration-300;
+    &__arrow-icon {
+        @apply w-3 h-5;
 
-        :root .light & {
-            @apply text-lightMedium;
-        }
-
-        :root .dark & {
-            @apply text-darkMedium;
-        }
+        z-index: 1;
 
         &.is-open {
             @apply -scale-y-100;
         }
     }
-
-    input:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            margin: 1px;
-            transition: background-color 5000s ease-in-out 0s !important;
-
-            :root .dark & {
-                -webkit-text-fill-color: theme("colors.gray.300");
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
-                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
-                background-color: theme("colors.gray.800");
-                caret-color: white;
-            }
-
-            :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
-                box-shadow: inset 0 0 0 1000px theme("colors.white");
-                background-color: theme("colors.white");
-            }
-        }
-    }
 }

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

@@ -51,7 +51,7 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
             return (!((_a = props.value) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === item.id)) || props.withCheckboxes) &&
                 (query === "" || (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
         });
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
     const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true, props.dropdownStrategy);
     const inputRef = (0, react_2.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
@@ -92,10 +92,10 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-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, ref: stableRef },
+            react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-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" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
                 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(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
             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"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;

package/multi-combobox/multi-combobox.js

@@ -37,7 +37,7 @@ exports.MultiCombobox = (0, react_2.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const fakeInputId = `${id}--fake-input`;
-    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "chevronDown";
+    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
     const fakeInputRef = (0, react_2.useRef)(null);
     const handlePopoverButtonKeyPress = (e) => {
@@ -60,7 +60,7 @@ exports.MultiCombobox = (0, react_2.forwardRef)((props, ref) => {
                         "uxf-multi-combobox__input-placeholder--with-popover") }, selectedOptions.length > 0
                     ? selectedOptions.map((e) => e.label).join(", ")
                     : props.placeholder),
-                react_2.default.createElement(icon_1.Icon, { className: "uxf-select__button-icon", name: iconName })),
+                react_2.default.createElement(icon_1.Icon, { className: "uxf-select-base__arrow-icon", name: iconName })),
             react_2.default.createElement(react_1.Popover.Panel, { className: "uxf-multi-combobox__popover-panel", focus: popoverRenderProps.open, unmount: false },
                 react_2.default.createElement(_multi_combobox_base_1._MultiComboboxBase, { ...props, errorId: errorId, isPopoverOpen: popoverRenderProps.open, ref: ref, withPopover: true })))))));
 });

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

@@ -41,7 +41,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     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, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
-    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "chevronDown";
+    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
     const filteredOptions = props.options.filter((option) => !selectedOptions.map((i) => i.id).includes(option.id));
     const handleSelectValueChange = (v) => {
@@ -56,11 +56,11 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-multi-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 && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": props.errorId },
+            react_2.default.createElement(react_1.Listbox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-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" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.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 },
                 react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
                     ? 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(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
             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.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
                     var _a;

package/multi-select/multi-select.js

@@ -36,7 +36,7 @@ exports.MultiSelect = (0, react_2.forwardRef)((props, ref) => {
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "chevronDown";
+    const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
     if (!props.withPopover) {
         return react_2.default.createElement(_multi_select_base_1._MultiSelectBase, { ...props, errorId: errorId, id: id, ref: ref });
@@ -48,7 +48,7 @@ exports.MultiSelect = (0, react_2.forwardRef)((props, ref) => {
                         "uxf-multi-combobox__input-placeholder--with-popover") }, selectedOptions.length > 0
                     ? selectedOptions.map((e) => e.label).join(", ")
                     : props.placeholder),
-                react_2.default.createElement(icon_1.Icon, { className: "uxf-select__button-icon", name: iconName })),
+                react_2.default.createElement(icon_1.Icon, { className: "uxf-select-base__arrow-icon", name: iconName })),
             react_2.default.createElement(react_1.Popover.Panel, { className: "uxf-multi-combobox__popover-panel", focus: popoverRenderProps.open, unmount: false },
                 react_2.default.createElement(_multi_select_base_1._MultiSelectBase, { ...props, errorId: errorId, isPopoverOpen: popoverRenderProps.open, ref: ref, withPopover: true })))))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.171",
+  "version": "1.0.0-beta.173",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@floating-ui/react": "0.24.2",
-    "@headlessui/react": "1.7.15",
+    "@headlessui/react": "1.7.14",
     "@uxf/core": "4.5.1",
     "@uxf/datepicker": "1.2.1",
     "@uxf/styles": "2.1.2",