@uxf/ui 11.33.2 → 11.34.1

package/button-list/button-list.js

@@ -39,7 +39,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color}`, `uxf-button-list__menu-button--variant-${variant}`, className),
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button-list__menu-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
     return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),

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

@@ -14,18 +14,18 @@ exports.default = {
 function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonList, { buttons: [
-                { label: "First item" },
-                { label: "Second item", color: "negative" },
-                { label: "Third item" },
-                { label: "Fourth item", isDisabled: true },
-                { label: "Fifth item" },
-                { label: "Sixth item" },
+                { label: "Default" },
+                { label: "Color Negative", color: "negative" },
+                { label: "Color Negative", color: "negative", icon: "camera" },
+                { label: "Disabled", isDisabled: true },
+                { label: "Color Negative disabled", color: "negative", isDisabled: true, icon: "camera" },
+                { label: "Sixth item", icon: "camera" },
                 { label: "Seventh item" },
                 { label: "Eighth item" },
                 { label: "Nineth item" },
                 { label: "Tenth item" },
                 { label: "Eleventh item" },
-            ], menuMaxHeight: 350, variant: "secondary", visibleButtonsCount: 0 }),
+            ], classNameDropdown: "w-64", menuMaxHeight: 350, variant: "secondary", visibleButtonsCount: 0 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
                 { label: "Second item" },

package/combobox/combobox.js

@@ -57,28 +57,30 @@ function Options(props) {
     })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 }
 Options.displayName = "UxfUiComboboxOptions";
+// eslint-disable-next-line complexity
 function Combobox(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
     const [query, setQuery] = (0, react_3.useState)("");
-    const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
+    const asyncOptions = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
+    const options = isAsync ? asyncOptions : ((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY);
     const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const emptyMessage = (0, is_empty_1.isEmpty)(query)
-        ? ((_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát")
+        ? ((_c = props.noQueryMessage) !== null && _c !== void 0 ? _c : "Pro zobrazení možností začněte psát")
         : (0, is_empty_1.isEmpty)(options)
-            ? ((_c = props.noOptionsMessage) !== null && _c !== void 0 ? _c : "Nabídka neosahuje žádné položky")
-            : ((_d = props.notFoundMessage) !== null && _d !== void 0 ? _d : "Nic nenalezeno");
+            ? ((_d = props.noOptionsMessage) !== null && _d !== void 0 ? _d : "Nabídka neosahuje žádné položky")
+            : ((_e = props.notFoundMessage) !== null && _e !== void 0 ? _e : "Nic nenalezeno");
     const clearQuery = () => setQuery("");
     const onChange = (v) => props.onChange(v);
     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 = (_e = props.value) !== null && _e !== void 0 ? _e : null;
+    const selectedOption = (_f = props.value) !== null && _f !== void 0 ? _f : null;
     const generatedId = (0, react_3.useId)();
-    const id = (_f = props.id) !== null && _f !== void 0 ? _f : generatedId;
+    const id = (_g = props.id) !== null && _g !== void 0 ? _g : generatedId;
     const innerRef = (0, react_3.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const dropdown = (0, use_dropdown_1.useDropdown)((_g = props.dropdownPlacement) !== null && _g !== void 0 ? _g : "bottom", (_h = props.dropdownMatchesInputWidth) !== null && _h !== void 0 ? _h : true, props.dropdownMaxHeight, props.dropdownStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_h = props.dropdownPlacement) !== null && _h !== void 0 ? _h : "bottom", (_j = props.dropdownMatchesInputWidth) !== null && _j !== void 0 ? _j : true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
     const isNotInteractive = props.isDisabled || props.isReadOnly;
     return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,

package/combobox/combobox.spec.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
 const combobox_stories_1 = require("./combobox.stories");
-(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(combobox_stories_1.Default, null));
-(0, snap_test_1.snapTest)("render async stories", react_1.default.createElement(combobox_stories_1.Async, null));
+(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(combobox_stories_1.SynchronousOptions, null));
+(0, snap_test_1.snapTest)("render async stories", react_1.default.createElement(combobox_stories_1.AsynchronousOptions, null));

package/combobox/combobox.stories.d.ts

@@ -1,10 +1,3 @@
 import React from "react";
-import { Combobox } from "./index";
-declare const _default: {
-    title: string;
-    component: typeof Combobox;
-};
-export default _default;
-export declare function Default(): React.JSX.Element;
-export declare function Async(): React.JSX.Element;
-export declare function ComponentStructure(): React.JSX.Element;
+export declare function SynchronousOptions(): React.JSX.Element;
+export declare function AsynchronousOptions(): React.JSX.Element;

package/combobox/combobox.stories.js

@@ -22,61 +22,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
-exports.Async = Async;
-exports.ComponentStructure = ComponentStructure;
+exports.SynchronousOptions = SynchronousOptions;
+exports.AsynchronousOptions = AsynchronousOptions;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
-const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Combobox",
-    component: index_1.Combobox,
-};
-const options = [
+const OPTIONS = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option with diacritics (ěščřžýáíé)" },
 ];
-function Default() {
+function SynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
-        console.log("Select value: ", v);
-        setValue(v);
-    });
-    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
-        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", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+    const onChange = (0, action_1.action)("onChange", setValue);
+    return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox", 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", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label,
                 isSelected && " (selected)")), value: value })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
-function Async() {
+function AsynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
-        console.log("Select value: ", v);
-        setValue(v);
-    });
-    const loadOptions = (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
-    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const loadOptions = (query) => Promise.resolve(OPTIONS.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
+    return (react_1.default.createElement("div", { className: "p-4" },
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", loadOptions: loadOptions, name: "combobox", onChange: onChange, placeholder: "Vyberte...", value: value })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
-}
-function ComponentStructure() {
-    const [value, onChange] = (0, react_1.useState)(null);
-    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
-        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-structure", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, value: value })));
 }

package/css/button-list.css

@@ -63,8 +63,16 @@
         &.is-disabled {
             color: theme("colors.lightLow");
 
+            .uxf-button-list__menu-button-icon {
+                color: theme("colors.lightLow");
+            }
+
             :root .dark & {
                 color: theme("colors.darkLow");
+
+                .uxf-button-list__menu-button-icon {
+                    color: theme("colors.darkLow");
+                }
             }
         }
 

package/package.json

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