@uxf/ui 11.77.0 → 11.78.0

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

@@ -5,4 +5,5 @@ export interface FlashMessagesRef {
     closeAll: () => void;
     open: (notification: Notification) => void;
 }
+export declare const FLASH_MESSAGES_COMPONENT_NAME = "flashMessages";
 export declare const FlashMessages: React.ForwardRefExoticComponent<React.RefAttributes<FlashMessagesRef>>;

package/flash-messages/flash-messages.js

@@ -23,12 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashMessages = void 0;
+exports.FlashMessages = exports.FLASH_MESSAGES_COMPONENT_NAME = void 0;
 const react_1 = require("@headlessui/react");
 const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
+exports.FLASH_MESSAGES_COMPONENT_NAME = "flashMessages";
 exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_2.useState)([]);
     const permanentNotificationsRef = (0, react_2.useRef)(null);
@@ -95,7 +96,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
             setIsCollapsed(true);
         },
     });
-    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", style: { "--last-flash-message-height": `${lastToastHeight}px` } },
+    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", "data-component": exports.FLASH_MESSAGES_COMPONENT_NAME, style: { "--last-flash-message-height": `${lastToastHeight}px` } },
         dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ref: dismissableContainerRef, ...clickableProps },
             react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
                 const isLast = index === dismissableNotifications.length - 1;

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

@@ -8,63 +8,45 @@ const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const flash_messages_service_1 = require("./flash-messages-service");
-// Random texts for flash message height testing
-const randomTexts = [
-    "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!",
-    "ulpa ex fuga neque. Delectus error",
-    "consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercit",
-];
 function Default() {
     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)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
-            }) }, "Click to fire Flash message, variant success"),
+                    react_1.default.createElement("span", null, "Success message"))),
+            }) }, "Success"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
+                    react_1.default.createElement("span", null, "Error message"))),
                 variant: "error",
-            }) }, "Click to fire Flash message, variant error"),
+            }) }, "Error"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
+                    react_1.default.createElement("span", null, "Info message"))),
                 variant: "info",
-            }) }, "Click to fire Flash message, variant info"),
+            }) }, "Info"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 20 }),
-                    react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
+                    react_1.default.createElement("span", null, "AutoDismiss error message"))),
                 autoDismiss: false,
                 variant: "error",
-            }) }, "AutoDismiss: false Flash message, variant error"),
+            }) }, "AutoDismiss Error"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }),
-                    react_1.default.createElement("span", null, "You should better watch out :)"))),
+                    react_1.default.createElement("span", null, "Warning message"))),
                 autoDismiss: false,
                 variant: "warning",
-            }) }, "Flash message, variant warning"),
+            }) }, "Warning"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
-                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Just letting you know"))),
+                message: "Small info message",
                 autoDismiss: false,
                 variant: "info",
-            }) }, "Flash message, variant info"),
+            }) }, "Small info"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
-                message: "Small",
-                autoDismiss: false,
-                variant: "info",
-            }) }, "Small flash message"),
-        react_1.default.createElement(button_1.Button, { onClick: () => {
-                const randomNumber = Math.floor(Math.random() * randomTexts.length);
-                return (0, flash_messages_service_1.flashMessage)({
-                    message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                        react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                        react_1.default.createElement("span", null, randomTexts[randomNumber]))),
-                });
-            } }, "Flash message, variant success, random text")));
+                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")));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.77.0",
+    "version": "11.78.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.72.3",
-        "@uxf/core-react": "11.74.4",
+        "@uxf/core": "11.78.0",
+        "@uxf/core-react": "11.78.0",
         "@uxf/datepicker": "11.61.0",
-        "@uxf/styles": "11.72.3",
+        "@uxf/styles": "11.78.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",