@uxf/ui 11.118.0 → 11.119.0

package/combobox/combobox.stories.d.ts

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

package/combobox/combobox.stories.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SynchronousOptions = SynchronousOptions;
+exports.OnlyForE2ETests = OnlyForE2ETests;
 exports.AsynchronousOptions = AsynchronousOptions;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
@@ -56,6 +57,46 @@ function SynchronousOptions() {
                 option.label,
                 isSelected && " (selected)")), value: value })));
 }
+const FRUITS = [
+    { id: "apple", label: "Apple" },
+    { id: "banana", label: "Banana" },
+    { id: "cherry", label: "Cherry" },
+    { id: "mango", label: "Mango" },
+];
+const COUNTRIES = [
+    { id: "cz", label: "Czech Republic" },
+    { id: "sk", label: "Slovakia" },
+    { id: "de", label: "Germany" },
+    { id: "at", label: "Austria" },
+];
+const COLORS = [
+    { id: "red", label: "Red" },
+    { id: "green", label: "Green" },
+    { id: "blue", label: "Blue" },
+    { id: "yellow", label: "Yellow" },
+];
+const SIZES = [
+    { id: "xs", label: "Extra Small" },
+    { id: "sm", label: "Small" },
+    { id: "md", label: "Medium" },
+    { id: "lg", label: "Large" },
+];
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const e2eLoadOptions = (data) => async (query) => {
+    await delay(300);
+    return data.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()));
+};
+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);
+    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 })));
+}
 function AsynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.118.0",
+    "version": "11.119.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.119.0",
+        "@uxf/datepicker": "11.119.0",
+        "@uxf/localize": "11.119.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.119.0",
+        "@uxf/datepicker": "11.119.0",
+        "@uxf/localize": "11.119.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/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/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];