@uxf/ui 11.118.2 → 11.120.0

package/button/button.stories.js

@@ -97,6 +97,7 @@ function Default() {
         react_1.default.createElement("hr", null))))))))))));
 }
 function OnlyForE2ETests() {
+    const [lastClicked, setLastClicked] = (0, react_1.useState)(null);
     const onClick = console.log;
     return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
         react_1.default.createElement("div", { "data-testid": "card-a" },
@@ -104,7 +105,12 @@ function OnlyForE2ETests() {
         react_1.default.createElement("div", { "data-testid": "card-b" },
             react_1.default.createElement(button_1.Button, { onClick: onClick }, "Confirm")),
         react_1.default.createElement("div", { "data-testid": "card-c" },
-            react_1.default.createElement(button_1.Button, { onClick: onClick }, "Confirm"))));
+            react_1.default.createElement(button_1.Button, { onClick: onClick }, "Confirm")),
+        react_1.default.createElement(button_1.Button, { onClick: () => setLastClicked("Nevyřešené") }, "Nevy\u0159e\u0161en\u00E9"),
+        react_1.default.createElement(button_1.Button, { onClick: () => setLastClicked("Vyřešené") },
+            react_1.default.createElement(icon_1.Icon, { name: "check" }),
+            "Vy\u0159e\u0161en\u00E9"),
+        lastClicked !== null && react_1.default.createElement("div", { "data-testid": "last-clicked" }, lastClicked)));
 }
 function LoadingButton() {
     const clickHandler = () => new Promise((resolve) => setTimeout(resolve, 3000));

package/combobox/combobox.stories.js

@@ -86,16 +86,23 @@ const e2eLoadOptions = (data) => async (query) => {
     await delay(300);
     return data.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()));
 };
+const STAV_OPTIONS = [
+    { id: "nevyresene", label: "Nevyřešené" },
+    { id: "vyresene", label: "Vyřešené" },
+];
 function OnlyForE2ETests() {
     const [fruit, setFruit] = (0, react_1.useState)(null);
     const [country, setCountry] = (0, react_1.useState)(null);
     const [color, setColor] = (0, react_1.useState)(null);
     const [size, setSize] = (0, react_1.useState)(null);
+    const [stav, setStav] = (0, react_1.useState)(null);
     return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
         react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Fruit", loadOptions: e2eLoadOptions(FRUITS), name: "fruit", onChange: setFruit, placeholder: "Select fruit...", value: fruit }),
         react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Country", loadOptions: e2eLoadOptions(COUNTRIES), name: "country", onChange: setCountry, placeholder: "Select country...", value: country }),
         react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Color", loadOptions: e2eLoadOptions(COLORS), name: "color", onChange: setColor, placeholder: "Select color...", value: color }),
-        react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Size", loadOptions: e2eLoadOptions(SIZES), name: "size", onChange: setSize, placeholder: "Select size...", value: size })));
+        react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Size", loadOptions: e2eLoadOptions(SIZES), name: "size", onChange: setSize, placeholder: "Select size...", value: size }),
+        react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "Stav", loadOptions: e2eLoadOptions(STAV_OPTIONS), name: "stav", onChange: setStav, placeholder: "Vyberte stav...", value: stav }),
+        stav !== null && react_1.default.createElement("div", { "data-testid": "selected-stav" }, stav.id)));
 }
 function AsynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);

package/context/context.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UiContext = void 0;
-const react_1 = require("react");
-exports.UiContext = (0, react_1.createContext)(undefined);
+const global_context_1 = require("@uxf/core-react/global-context");
+exports.UiContext = (0, global_context_1.createGlobalContext)("ui/context", undefined);

package/context/index.d.ts

@@ -1,3 +1,3 @@
-export * from "@uxf/ui/context/context";
-export * from "@uxf/ui/context/provider";
-export * from "@uxf/ui/context/use-component-context";
+export * from "./context";
+export * from "./provider";
+export * from "./use-component-context";

package/context/index.js

@@ -14,6 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("@uxf/ui/context/context"), exports);
-__exportStar(require("@uxf/ui/context/provider"), exports);
-__exportStar(require("@uxf/ui/context/use-component-context"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./provider"), exports);
+__exportStar(require("./use-component-context"), exports);

package/context/provider.js

@@ -5,21 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UiContextProvider = void 0;
 const translations_1 = require("@uxf/core-react/translations");
-const context_1 = require("@uxf/localize/src/context/context");
+const localize_1 = require("@uxf/localize");
 const dayjs_1 = require("dayjs");
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
 const react_1 = __importDefault(require("react"));
 const use_handle_color_scheme_1 = require("../color-scheme/use-handle-color-scheme");
-const context_2 = require("./context");
+const context_1 = require("./context");
 (0, dayjs_1.extend)(localizedFormat_1.default);
 (0, dayjs_1.extend)(customParseFormat_1.default);
 const UiContextProvider = (props) => {
     (0, use_handle_color_scheme_1.useHandleColorScheme)(props.value.colorScheme);
     (0, dayjs_1.locale)(props.value.localeConfig.locale);
     return (react_1.default.createElement(translations_1.TranslationsProvider, { value: props.value.translationFn },
-        react_1.default.createElement(context_1._LocalizeProvider, { value: props.value.localeConfig.locale },
-            react_1.default.createElement(context_2.UiContext.Provider, { value: props.value }, props.children))));
+        react_1.default.createElement(localize_1._LocalizeProvider, { value: props.value.localeConfig.locale },
+            react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children))));
 };
 exports.UiContextProvider = UiContextProvider;
 exports.UiContextProvider.displayName = "UxfUiContextProvider";

package/flash-messages/flash-messages.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function OnlyForE2ETests(): React.JSX.Element;

package/flash-messages/flash-messages.stories.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.OnlyForE2ETests = OnlyForE2ETests;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
@@ -50,3 +51,8 @@ function Default() {
                 message: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",
             }) }, "Long text")));
 }
+function OnlyForE2ETests() {
+    return (react_1.default.createElement("div", { className: "inline-flex flex-col space-y-4" },
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({ autoDismiss: false, message: "Vyřešené", variant: "info" }) }, "Zobrazit Vy\u0159e\u0161en\u00E9"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({ autoDismiss: false, message: "Nevyřešené", variant: "info" }) }, "Zobrazit Nevy\u0159e\u0161en\u00E9")));
+}

package/hooks/use-dropdown.d.ts

@@ -3,8 +3,8 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
     placement: Placement;
     strategy: Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
     y: number;
+    x: number;
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
@@ -19,8 +19,8 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number;
         y: number;
+        x: number;
         placement: Placement;
         strategy: Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;

package/icon-button/icon-button.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function OnlyForE2ETests(): React.JSX.Element;

package/icon-button/icon-button.stories.js

@@ -34,6 +34,9 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.OnlyForE2ETests = OnlyForE2ETests;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const react_1 = __importStar(require("react"));
 const toggle_1 = require("../toggle");
@@ -65,3 +68,12 @@ function Default() {
                 config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "flex items-center justify-center gap-2", key: `${size}${color}${variant}` },
                     react_1.default.createElement(icon_button_1.IconButton, { color: color, iconName: "user", isDisabled: isDisabled, isLoading: isLoading, label: "User", onClick: onClick, size: size, variant: variant })))))))))))));
 }
+function OnlyForE2ETests() {
+    const [lastClicked, setLastClicked] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
+        react_1.default.createElement(icon_button_1.IconButton, { iconName: "xmark", label: "Zru\u0161it", onClick: () => setLastClicked("Zrušit"), title: "Zru\u0161it" }),
+        react_1.default.createElement(icon_button_1.IconButton, { iconName: "check", label: "Potvrdit", onClick: () => setLastClicked("Potvrdit"), title: "Potvrdit" }),
+        react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: () => setLastClicked("Smazat"), title: "Smazat" },
+            react_1.default.createElement(icon_1.Icon, { name: "trash" })),
+        lastClicked !== null && react_1.default.createElement("div", { "data-testid": "last-clicked" }, lastClicked)));
+}

package/image-gallery/context.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useImageGalleryContext = exports.ImageGalleryProvider = void 0;
+const global_context_1 = require("@uxf/core-react/global-context");
 const react_1 = require("react");
-const ImageGalleryContext = (0, react_1.createContext)({
+const ImageGalleryContext = (0, global_context_1.createGlobalContext)("ui/image-gallery", {
     registerImage: () => null,
     unregisterImage: () => null,
     openGallery: () => null,

package/lightbox/components/use-lightbox-dialog.d.ts

@@ -9,8 +9,8 @@ export interface UseLightboxDialogProps {
 }
 export declare function useLightboxDialog(props: UseLightboxDialogProps): {
     floatingContext: {
-        x: number;
         y: number;
+        x: number;
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;

package/lightbox/context.js

@@ -2,10 +2,11 @@
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLightboxContext = exports.LightboxProvider = void 0;
+const global_context_1 = require("@uxf/core-react/global-context");
 const empty_array_1 = require("@uxf/core/constants/empty-array");
 const noop_1 = require("@uxf/core/utils/noop");
 const react_1 = require("react");
-const LightboxContext = (0, react_1.createContext)({
+const LightboxContext = (0, global_context_1.createGlobalContext)("ui/lightbox", {
     registerImage: noop_1.noop,
     unregisterImage: noop_1.noop,
     openLightbox: noop_1.noop,

package/modal/modal-layer-config.js

@@ -36,9 +36,10 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalLayerConfigProvider = ModalLayerConfigProvider;
 exports.useModalLayerConfig = useModalLayerConfig;
+const global_context_1 = require("@uxf/core-react/global-context");
 const react_1 = __importStar(require("react"));
 const constants_1 = require("./constants");
-const ModalLayerConfigContext = (0, react_1.createContext)({
+const ModalLayerConfigContext = (0, global_context_1.createGlobalContext)("ui/modal-layer-config", {
     config: constants_1.DEFAULT_MODAL_LAYERS,
 });
 function ModalLayerConfigProvider(props) {

package/multi-select/multi-select.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function OnlyForE2ETests(): React.JSX.Element;

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.OnlyForE2ETests = OnlyForE2ETests;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const multi_select_1 = require("./multi-select");
@@ -67,3 +68,13 @@ function Default() {
                 option.label), value: value }),
         react_1.default.createElement(multi_select_1.MultiSelect, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, options: options, value: value })));
 }
+const e2eOptions = [
+    { id: "nevyresene", label: "Nevyřešené" },
+    { id: "vyresene", label: "Vyřešené" },
+];
+function OnlyForE2ETests() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "p-8" },
+        react_1.default.createElement(multi_select_1.MultiSelect, { label: "Stav", name: "stav", onChange: (v) => setValue(v), options: e2eOptions, placeholder: "Vyberte...", value: value }),
+        value !== null && react_1.default.createElement("div", { "data-testid": "selected-value" }, value.join(","))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.118.2",
+    "version": "11.120.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -24,9 +24,9 @@
         "@floating-ui/react": "^0.27.17",
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.114.0",
-        "@uxf/core-react": "11.114.0",
-        "@uxf/datepicker": "11.114.0",
-        "@uxf/localize": "11.114.0",
+        "@uxf/core-react": "11.120.0",
+        "@uxf/datepicker": "11.120.0",
+        "@uxf/localize": "11.120.0",
         "@uxf/styles": "11.114.0",
         "dayjs": "^1.11.19",
         "react": ">= 18.2.0",
@@ -40,9 +40,9 @@
         "@types/react": "18.3.27",
         "@types/react-dom": "18.3.7",
         "@uxf/core": "11.114.0",
-        "@uxf/core-react": "11.114.0",
-        "@uxf/datepicker": "11.114.0",
-        "@uxf/localize": "11.114.0",
+        "@uxf/core-react": "11.120.0",
+        "@uxf/datepicker": "11.120.0",
+        "@uxf/localize": "11.120.0",
         "@uxf/styles": "11.114.0",
         "dayjs": "^1.11.19",
         "react-dropzone": "^14.4.0"

package/popover/popover.d.ts

@@ -12,8 +12,8 @@ export declare const usePopoverContext: () => {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
     y: number;
+    x: number;
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
@@ -28,8 +28,8 @@ export declare const usePopoverContext: () => {
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number;
         y: number;
+        x: number;
         placement: Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;

package/popover/popover.js

@@ -36,6 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = exports.usePopoverContext = void 0;
 const react_1 = require("@floating-ui/react");
+const global_context_1 = require("@uxf/core-react/global-context");
 const react_2 = __importStar(require("react"));
 function usePopover(options = {}) {
     var _a;
@@ -80,7 +81,7 @@ function usePopover(options = {}) {
         setDescriptionId,
     }), [isOpen, setIsOpen, interactions, data, labelId, descriptionId]);
 }
-const PopoverContext = (0, react_2.createContext)(null);
+const PopoverContext = (0, global_context_1.createGlobalContext)("ui/popover", null);
 const usePopoverContext = () => {
     const context = (0, react_2.useContext)(PopoverContext);
     if (!context) {

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

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function OnlyForE2ETests(): React.JSX.Element;

package/radio-group/radio-group.stories.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.OnlyForE2ETests = OnlyForE2ETests;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
@@ -63,3 +64,13 @@ function Default() {
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", name: "radio-group-variant-row", onChange: onChange, options: options, radioSize: "lg", value: value, variant: "row" })));
     return react_1.default.createElement("div", { className: "rounded p-8" }, testRadioGroups);
 }
+const e2eOptions = [
+    { id: "nevyresene", label: "Nevyřešené" },
+    { id: "vyresene", label: "Vyřešené" },
+];
+function OnlyForE2ETests() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "p-8" },
+        react_1.default.createElement(index_1.RadioGroup, { id: "stav", label: "Stav", name: "stav", onChange: setValue, options: e2eOptions, value: value }),
+        value !== null && react_1.default.createElement("div", { "data-testid": "selected-value" }, value)));
+}

package/select/select.stories.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function OnlyForE2ETests(): React.JSX.Element;
 export declare function ComponentStructure(): React.JSX.Element;

package/select/select.stories.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.OnlyForE2ETests = OnlyForE2ETests;
 exports.ComponentStructure = ComponentStructure;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
@@ -80,6 +81,16 @@ function Default() {
     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)));
 }
+const e2eOptions = [
+    { id: "nevyresene", label: "Nevyřešené" },
+    { id: "vyresene", label: "Vyřešené" },
+];
+function OnlyForE2ETests() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "p-8" },
+        react_1.default.createElement(index_1.Select, { label: "Stav", name: "stav", onChange: setValue, options: e2eOptions, placeholder: "Vyberte...", value: value }),
+        value !== null && react_1.default.createElement("div", { "data-testid": "selected-value" }, String(value))));
+}
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)(null);
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,

package/tooltip/use-tooltip.d.ts

@@ -11,8 +11,8 @@ export declare function useTooltip(options: TooltipOptions): {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
     y: number;
+    x: number;
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
@@ -27,8 +27,8 @@ export declare function useTooltip(options: TooltipOptions): {
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number;
         y: number;
+        x: number;
         placement: Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;

package/typography/typography.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+export declare function OnlyForE2ETests(): React.JSX.Element;
 export declare function Default(): React.JSX.Element;

package/typography/typography.stories.js

@@ -3,8 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnlyForE2ETests = OnlyForE2ETests;
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
+function OnlyForE2ETests() {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h1", null, "Text bez pevn\u00E9 mezery"),
+        react_1.default.createElement("h1", null, "Text s\u00A0pevnou mezerou")));
+}
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4 dark:text-white" },
         react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),

package/utils/storybook-config.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultConfig = void 0;
 exports.useStorybookConfig = useStorybookConfig;
 exports.StorybookContextProvider = StorybookContextProvider;
+const global_context_1 = require("@uxf/core-react/global-context");
 const react_1 = __importStar(require("react"));
 exports.defaultConfig = {
     AlertBubble: {
@@ -72,7 +73,7 @@ exports.defaultConfig = {
     Select: {},
 };
 // Context
-const Context = (0, react_1.createContext)(exports.defaultConfig);
+const Context = (0, global_context_1.createGlobalContext)("ui/storybook-config", exports.defaultConfig);
 // consumer
 function useStorybookConfig(key) {
     return (0, react_1.useContext)(Context)[key];