allaw-ui 4.7.3 → 4.7.4

package/dist/components/atoms/buttons/PrimaryButton.d.ts

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes } from "react";
 import "./PrimaryButton.css";
 import "../../../styles/global.css";
+export type ResponsiveLabels = Record<number, string>;
 export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
@@ -15,6 +16,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
     isLoading?: boolean;
     variant?: "default" | "warning";
     size?: "medium" | "large";
+    responsiveLabels?: ResponsiveLabels;
 }
 declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default PrimaryButton;

package/dist/components/atoms/buttons/PrimaryButton.js

@@ -62,10 +62,11 @@ import Image from "next/image";
 import "./PrimaryButton.css";
 import "../../../styles/global.css";
 var PrimaryButton = forwardRef(function (_a, ref) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, _b = _a.additionalIcons, additionalIcons = _b === void 0 ? [] : _b, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, variant = _a.variant, _g = _a.size, size = _g === void 0 ? "medium" : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "additionalIcons", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, _b = _a.additionalIcons, additionalIcons = _b === void 0 ? [] : _b, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, variant = _a.variant, _g = _a.size, size = _g === void 0 ? "medium" : _g, responsiveLabels = _a.responsiveLabels, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "additionalIcons", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size", "responsiveLabels"]);
     var buttonRef = React.useRef(null);
     var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
     var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
+    var _k = useState(label), currentLabel = _k[0], setCurrentLabel = _k[1];
     useImperativeHandle(ref, function () { return buttonRef.current; });
     var isButtonLoading = isLoading || internalIsLoading;
     // Determine where to place additional icons
@@ -90,6 +91,39 @@ var PrimaryButton = forwardRef(function (_a, ref) {
             }
         };
     }, [isButtonLoading]);
+    // Effect for responsive labels
+    useEffect(function () {
+        if (!responsiveLabels) {
+            setCurrentLabel(label);
+            return;
+        }
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var breakpoints = Object.keys(responsiveLabels)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            // Find the appropriate label for the current width
+            var selectedLabel = label; // Default to the prop label
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    selectedLabel = responsiveLabels[breakpoint];
+                }
+                else {
+                    break;
+                }
+            }
+            setCurrentLabel(selectedLabel);
+        };
+        // Initial check
+        handleResize();
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [responsiveLabels, label]);
     var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -122,7 +156,7 @@ var PrimaryButton = forwardRef(function (_a, ref) {
     return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : "").concat(variant === "warning" ? "primary-button-warning" : "", " ").concat(size === "large" ? "primary-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         shouldPlaceAtStart && renderAdditionalIcons(),
         startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
-        React.createElement("span", { className: "primary-button-label" }, label),
+        React.createElement("span", { className: "primary-button-label" }, currentLabel),
         isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })),
         !shouldPlaceAtStart && renderAdditionalIcons()));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.7.3",
+  "version": "4.7.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",