@uxf/ui 10.0.1 → 10.0.2

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

@@ -17,6 +17,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     children: ReactElement;
     className?: string;
     customInputElementDisplayName: string;
+    dropdownClassName?: string;
     dropdownMatchesInputWidth?: boolean;
     dropdownPlacement?: Placement;
     dropdownStrategy?: Strategy;

package/_select-base/_select-base.js

@@ -53,7 +53,9 @@ const InputArrow = (props) => {
 const Options = (props) => {
     var _a, _b;
     const HUIComponent = props.HUIComponent;
-    return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, 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) => {
+    return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-select-base__options", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.matchWidth
+            ? "uxf-select-base__options--match-width"
+            : "uxf-select-base__options--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
         var _a;
         const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
         const _option = option;
@@ -89,7 +91,7 @@ const _SelectBase = (props) => {
                         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, { HUIComponent: HUIComponent, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
+                react_2.default.createElement(Options, { HUIComponent: HUIComponent, className: props.dropdownClassName, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
             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;

package/combobox/combobox.js

@@ -42,7 +42,7 @@ const Combobox = (props) => {
     const onInputChange = (event) => setQuery(event.target.value);
     const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
     const selectedOption = (_d = props.value) !== null && _d !== void 0 ? _d : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
         react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
 };
 exports.Combobox = Combobox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "description": "",
   "publishConfig": {
     "access": "public"

package/select/select.js

@@ -12,7 +12,7 @@ const Select = (props) => {
     var _a, _b, _c, _d;
     const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };
     const selectedOption = (_a = props.options.find((option) => option.id === props.value)) !== null && _a !== void 0 ? _a : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, 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: selectedOption, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, 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: selectedOption, 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
                 ? (_d = (_c = props.renderSelectedOption) === null || _c === void 0 ? void 0 : _c.call(props, selectedOption)) !== null && _d !== void 0 ? _d : selectedOption.label