@uxf/ui 11.0.0-beta.21 → 11.0.0

package/message/README.md

@@ -1 +1,25 @@
-# Message
+# Message
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/message/message.css");
+@import url("@uxf/ui/dialog/dialog.css");
+@import url("@uxf/ui/button/button.css");
+```
+
+## Implementation
+
+```tsx
+import {AppProps} from "next/app";
+import {getMessageRef, Message} from "@uxf/ui/message";
+
+function App(props: AppProps) {
+    return (
+        <UiContextProvider value={...}>
+            {props.children}
+            <Message ref={getMessageRef()}/>
+        </UiContextProvider>
+    );
+}
+```

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

@@ -30,6 +30,7 @@ const classes_1 = require("@uxf/core/constants/classes");
 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 last_1 = require("@uxf/core/utils/last");
 const slugify_1 = require("@uxf/core/utils/slugify");
 const chip_1 = require("@uxf/ui/chip");
 const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
@@ -39,6 +40,22 @@ const input_1 = require("@uxf/ui/input");
 const label_1 = require("@uxf/ui/label");
 const react_3 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
+function handleInputKeyDownRecursion(selectedOptions, onRemove) {
+    const lastSelectedOption = (0, last_1.last)(selectedOptions);
+    if (!lastSelectedOption) {
+        return;
+    }
+    if (lastSelectedOption.disabled) {
+        handleInputKeyDownRecursion(selectedOptions.slice(0, -1), onRemove);
+    }
+    else {
+        onRemove(lastSelectedOption.id);
+    }
+}
+const OptionElement = (props) => {
+    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && props.withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: props.option.disabled, value: props.option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected })) : (props.label)))));
+};
+OptionElement.displayName = "UxfUiMultiComboboxOption";
 exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
@@ -77,7 +94,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
     };
     const handleInputKeyDown = (e) => {
         if (e.key === "Backspace" && query === "" && selectedOptions.length > 0) {
-            onRemove(selectedOptions[selectedOptions.length - 1].id);
+            handleInputKeyDownRecursion(selectedOptions, onRemove);
         }
     };
     const handleInputChange = (e) => setQuery(e.target.value);
@@ -91,6 +108,12 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
             ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
+    const onBlur = (e) => {
+        /* TODO: refactor component to enable this */
+        // setQuery("");
+        var _a;
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
     return (react_3.default.createElement(react_2.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) => {
         var _a, _b;
         const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
@@ -99,15 +122,14 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
                 props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                 react_3.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
                     selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
-                    react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
+                    react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onBlur: onBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
                 props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
                 props.rightElement && react_3.default.createElement(input_1.Input.RightElement, null, props.rightElement),
                 react_3.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_3.default.createElement(react_1.FloatingPortal, null,
                 react_3.default.createElement(react_2.Combobox.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 }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
-                    const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
+                    return (react_3.default.createElement(OptionElement, { option: option, key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
                 })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
             props.helperText && withoutPopover && (react_3.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_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.0.0-beta.21",
+  "version": "11.0.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,9 @@
   "dependencies": {
     "@floating-ui/react": "0.26.0",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "10.0.0",
-    "@uxf/datepicker": "10.0.0",
-    "@uxf/styles": "10.0.0",
+    "@uxf/core": "10.10.1",
+    "@uxf/datepicker": "11.0.0",
+    "@uxf/styles": "10.10.1",
     "color2k": "2.0.2",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/radio-group/radio-group.d.ts

@@ -6,7 +6,7 @@ export type RadioGroupOptionValueId = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
     id: RadioGroupOptionValueId;
-    label: string;
+    label: ReactNode;
 }
 export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
     className?: string;

package/tabs/tabs.d.ts

@@ -7,6 +7,7 @@ export interface TabsPanelProps {
 }
 export interface TabsProps {
     className?: string;
+    customTabListContent?: ReactNode;
     defaultIndex?: number;
     grow?: boolean;
     onChange?: (index: number) => void;

package/tabs/tabs.js

@@ -62,7 +62,8 @@ const TabsRoot = (0, react_2.forwardRef)((props, ref) => {
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
                     var _a;
                     return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
-                }, key: `${tab.title}--${index}` }, tab.title))))),
+                }, key: `${tab.title}--${index}` }, tab.title)))),
+            props.customTabListContent),
         react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
 });
 TabsRoot.displayName = "UxfUiTabs";

package/utils/validator/validator-exceptions.d.ts

@@ -0,0 +1,3 @@
+export declare enum ValidatorExceptions {
+    MaxFileSize = "MaxFileSizeException"
+}

package/utils/validator/validator-exceptions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatorExceptions = void 0;
+var ValidatorExceptions;
+(function (ValidatorExceptions) {
+    ValidatorExceptions["MaxFileSize"] = "MaxFileSizeException";
+})(ValidatorExceptions || (exports.ValidatorExceptions = ValidatorExceptions = {}));