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

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

@@ -28,7 +28,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     label: ReactNode;
     options?: Option[];
     placeholder?: string;
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;
     leftAddon?: ReactNode;

package/_select-base/_select-base.js

@@ -54,9 +54,9 @@ 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) => {
-        var _a, _b, _c, _d;
+        var _a;
         const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-        return (react_2.default.createElement(HUIComponent.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));
+        return (react_2.default.createElement(HUIComponent.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 }, (optionState) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label; }));
     })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 };
 Options.displayName = "UxfUiSelectBaseOptions";

package/combobox/combobox.d.ts

@@ -14,7 +14,7 @@ export interface ComboboxProps<ValueId = SelectBaseValueId, Option = ComboboxOpt
     loadOptions?: (query: string) => Promise<Option[]>;
     noQueryMessage?: string;
     notFoundMessage?: string;
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
 }
 export declare const Combobox: {
     <ValueId = SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: ComboboxProps<ValueId, Option, Value>): React.JSX.Element;

package/combobox/combobox.stories.js

@@ -52,7 +52,11 @@ function Default() {
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value })));
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")) })));
     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" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

package/file-input/file-input.d.ts

@@ -5,6 +5,7 @@ import { FileInputBaseProps } from "../_file-input-base";
 export interface FileInputProps extends FileInputBaseProps, Clearable {
     helperText?: ReactNode;
     label?: ReactNode;
+    hiddenLabel?: boolean;
     placeholder?: string;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;

package/file-input/file-input.js

@@ -63,7 +63,7 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
             setIsUploading(false);
         }
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(_file_input_base_1._FileInputBase, { 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, value: props.value }),
             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 },

package/multi-combobox/multi-combobox.stories.js

@@ -57,7 +57,10 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-4", label: "MultiCombobox with popup and checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true, withPopover: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-5", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Error message", id: "multi-combobox-6", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value })));
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-8", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label) })));
     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" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

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

@@ -64,9 +64,9 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                 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", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, 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;
+                    var _a, _b, _c;
                     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));
+                    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 }, (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : 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,

package/multi-select/multi-select.stories.js

@@ -52,7 +52,10 @@ const Default = () => {
     });
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-1", label: "MultiSelect", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
-        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true })));
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true }),
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-3", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label) })));
     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)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.41",
+  "version": "10.0.0-beta.48",
   "description": "",
   "publishConfig": {
     "access": "public"

package/select/select.d.ts

@@ -13,7 +13,7 @@ export interface SelectProps<ValueId = SelectValue, Option = SelectOption<ValueI
     noQueryMessage?: string;
     notFoundMessage?: string;
     options: Option[];
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     renderSelectedOption?: (option: Option) => ReactNode;
 }
 export declare const Select: {

package/select/select.stories.js

@@ -64,7 +64,13 @@ function Default() {
         react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "small" }),
         react_1.default.createElement(index_1.Select, { label: "Size default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" })));
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" }),
+        react_1.default.createElement(index_1.Select, { label: "RenderOption & RenderSelectedOption", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Selected: ",
+                option.label) })));
     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" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));