pge-front-common 14.0.12 → 14.0.14

package/lib/components/PgeButton/index.d.ts

@@ -1,3 +1,10 @@
 import React from "react";
-import { ButtonProps } from "./index.type";
-export declare const PgeButton: ({ variant, danger, disabled, widthType, leftIcon, rightIcon, title, className, ...props }: ButtonProps) => React.JSX.Element;
+export declare const PgeButton: React.ForwardRefExoticComponent<{
+    variant: "primary" | "secondary" | "tertiary";
+    danger?: boolean;
+    disabled?: boolean;
+    title: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    widthType?: "fit-content" | "full-width";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TooltipProps } from "./index.type";
-export declare const Tooltip: ({ text, children }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ text, children, forceVisible }: TooltipProps) => React.JSX.Element;

package/lib/components/Tooltip/index.type.d.ts

@@ -1,5 +1,6 @@
 export interface TooltipProps {
     text: string;
     children: React.ReactNode;
+    forceVisible?: boolean;
 }
 export type Position = "top-right" | "bottom-right" | "bottom-left" | "top-left" | "mobile";

package/lib/index.d.ts

@@ -2,12 +2,12 @@ import * as React$1 from 'react';
 import React__default, { InputHTMLAttributes, ReactNode, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, SVGProps } from 'react';
 import { Control } from 'react-hook-form';
 
-interface ButtonProps$1 extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant: "primary" | "secondary";
     text: string;
     leftIcon?: React__default.ReactNode;
 }
-declare function Button({ variant, text, leftIcon, ...props }: ButtonProps$1): React__default.JSX.Element;
+declare function Button({ variant, text, leftIcon, ...props }: ButtonProps): React__default.JSX.Element;
 
 interface InputBaseProps$1 extends InputHTMLAttributes<HTMLInputElement> {
     customClass?: string;
@@ -62,19 +62,15 @@ interface PasswordInputProps extends InputProps {
 }
 declare const PasswordInput: ({ togglePasswordVisibility, showPassword, restrictionMessage, customClass, inputRef, style, required, label, disabled, ...props }: PasswordInputProps) => React__default.JSX.Element;
 
-type ButtonVariant = "primary" | "secondary" | "tertiary";
-type WidthType = "full-width" | "fit-content";
-type ButtonProps = {
-    variant: ButtonVariant;
+declare const PgeButton: React__default.ForwardRefExoticComponent<{
+    variant: "primary" | "secondary" | "tertiary";
     danger?: boolean;
     disabled?: boolean;
     title: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    widthType?: WidthType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-declare const PgeButton: ({ variant, danger, disabled, widthType, leftIcon, rightIcon, title, className, ...props }: ButtonProps) => React__default.JSX.Element;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    widthType?: "fit-content" | "full-width";
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface UploadFileProps {
     fileTypes: string[];
@@ -87,9 +83,10 @@ declare const FileUpload: ({ fileTypes, onFileSelect, title }: UploadFileProps)
 interface TooltipProps {
     text: string;
     children: React.ReactNode;
+    forceVisible?: boolean;
 }
 
-declare const Tooltip: ({ text, children }: TooltipProps) => React__default.JSX.Element;
+declare const Tooltip: ({ text, children, forceVisible }: TooltipProps) => React__default.JSX.Element;
 
 type TextAlignType = "start" | "end" | "center";
 interface TextareaBaseProps extends Partial<HTMLTextAreaElement> {
@@ -531,4 +528,4 @@ declare const IconUploadFile2: (props?: SVGProps<SVGSVGElement>) => React__defau
 
 declare function installPrimeReactStyles(): void;
 
-export { Accordion, AccordionItem, type AccordionItemProps, BasicSelect, Blanket, BoxError, BoxSuccess, Button, type ButtonProps$1 as ButtonProps, Checkbox, type Column, CommonDotIcon, DateInput, Dropdown, FileUpload, FooterPge as Footer, Header, HeaderPge, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheck, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconExclude, IconHourglass, IconInvisibility, IconLogout, IconNewTab, IconPdf, IconPrint, IconProfile, IconQuestionMark, IconRemove, IconSearch, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpAndDownArror, IconUpload, IconUploadFile, IconUploadFile2, IconUploadV2, IconView, IconVisibility, IconWarning, InformativeBox, type InformativeBoxProps, InputBase, type InputProps, LoadingSpinner, Menu, MenuAction, MenuList, Modal, ModalBody, ModalFooter, ModalHeader, ModalUI, Option, type OptionsProps$2 as OptionsProps, PaginationTable, Pagination as PaginationV2, PasswordInput, PgeButton, RadioGroupBase, type RadioGroupBaseProps, SelectDefault, type SelectDefaultProps, SelectMult, type SelectMultProps, Table, TableBody, TableCell, TableComponent, type TableComponentProps, TableFooter, TableHeader, TableRow, TextareaBase, type TextareaBaseProps, Title, Tooltip, installPrimeReactStyles };
+export { Accordion, AccordionItem, type AccordionItemProps, BasicSelect, Blanket, BoxError, BoxSuccess, Button, type ButtonProps, Checkbox, type Column, CommonDotIcon, DateInput, Dropdown, FileUpload, FooterPge as Footer, Header, HeaderPge, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheck, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconExclude, IconHourglass, IconInvisibility, IconLogout, IconNewTab, IconPdf, IconPrint, IconProfile, IconQuestionMark, IconRemove, IconSearch, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpAndDownArror, IconUpload, IconUploadFile, IconUploadFile2, IconUploadV2, IconView, IconVisibility, IconWarning, InformativeBox, type InformativeBoxProps, InputBase, type InputProps, LoadingSpinner, Menu, MenuAction, MenuList, Modal, ModalBody, ModalFooter, ModalHeader, ModalUI, Option, type OptionsProps$2 as OptionsProps, PaginationTable, Pagination as PaginationV2, PasswordInput, PgeButton, RadioGroupBase, type RadioGroupBaseProps, SelectDefault, type SelectDefaultProps, SelectMult, type SelectMultProps, Table, TableBody, TableCell, TableComponent, type TableComponentProps, TableFooter, TableHeader, TableRow, TextareaBase, type TextareaBaseProps, Title, Tooltip, installPrimeReactStyles };

package/lib/index.esm.js

@@ -545,7 +545,7 @@ var css_248z$u = ".styles-module__button___ak3jK {\r\n  display: flex;\r\n  just
 var styles$r = {"button":"styles-module__button___ak3jK","fullWidth":"styles-module__fullWidth___hkrRe","fitContent":"styles-module__fitContent___h16Hv","primary":"styles-module__primary___0Lugn","secondary":"styles-module__secondary___C7rZE","danger":"styles-module__danger___kcS09","tertiary":"styles-module__tertiary___xMgwD"};
 styleInject(css_248z$u);
 
-var PgeButton = function (_a) {
+var PgeButton = React__default.forwardRef(function (_a, ref) {
     var _b;
     var variant = _a.variant, _c = _a.danger, danger = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.widthType, widthType = _e === void 0 ? "fit-content" : _e, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _f = _a.title, title = _f === void 0 ? "" : _f, className = _a.className, props = __rest(_a, ["variant", "danger", "disabled", "widthType", "leftIcon", "rightIcon", "title", "className"]);
     var buttonClass = clsx(styles$r.button, styles$r[variant], (_b = {},
@@ -554,11 +554,12 @@ var PgeButton = function (_a) {
         _b[styles$r.fullWidth] = widthType === "full-width",
         _b[styles$r.fitContent] = widthType === "fit-content",
         _b), className);
-    return (React__default.createElement("button", __assign({ className: buttonClass, disabled: disabled }, props),
+    return (React__default.createElement("button", __assign({ ref: ref, className: buttonClass, disabled: disabled }, props),
         leftIcon && leftIcon,
         title,
         rightIcon && rightIcon));
-};
+});
+PgeButton.displayName = "PgeButton";
 
 var css_248z$t = ".styles-module__container___9pLua {\r\n  width: 100%;\r\n  height: fit-content;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.styles-module__label___AWyTG {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: #303030;\r\n}\r\n\r\n.styles-module__inputContainer___tsCfV {\r\n  width: 100%;\r\n  height: fit-content;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 4px;\r\n  border: 2px dashed var(--primary-color, #005a92);\r\n  border-radius: 16px;\r\n  padding: 10px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__inputContainer___tsCfV {\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n  }\r\n  \r\n}\r\n\r\n.styles-module__button___1GicM {\r\n  width: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 7px 13px;\r\n  gap: 8px;\r\n  border-radius: 10px;\r\n  color: #fff;\r\n  background-color: var(--primary-color);\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__hiddenInput___lDoAG {\r\n  display: none;\r\n}\r\n\r\n.styles-module__description___S1vZj {\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--foreground);\r\n}\r\n\r\n.styles-module__instructionText___fa9r4 {\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--foreground);\r\n}\r\n\r\n.styles-module__errorText___1LAhk {\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--alert-color);\r\n}\r\n\r\n.styles-module__successText___s1G4K {\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  color: var(--success-color);\r\n}\r\n";
 var styles$q = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","inputContainer":"styles-module__inputContainer___tsCfV","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","instructionText":"styles-module__instructionText___fa9r4","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
@@ -602,11 +603,12 @@ var styles$p = {"container":"styles-module__container___YGeVk","tooltip":"styles
 styleInject(css_248z$s);
 
 var Tooltip$1 = function (_a) {
-    var text = _a.text, children = _a.children;
+    var text = _a.text, children = _a.children, forceVisible = _a.forceVisible;
     var _b = useState("top-right"), position = _b[0], setPosition = _b[1];
-    var _c = useState(false), visible = _c[0], setVisible = _c[1];
+    var _c = useState(false), internalVisible = _c[0], setInternalVisible = _c[1];
     var tooltipRef = useRef(null);
     var containerRef = useRef(null);
+    var visible = internalVisible || forceVisible;
     useEffect(function () {
         if (!visible || !tooltipRef.current || !containerRef.current)
             return;
@@ -636,16 +638,10 @@ var Tooltip$1 = function (_a) {
         }
         setPosition(newPosition);
     }, [visible]);
-    var handleInteraction = function () {
-        setVisible(!visible);
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleInteraction();
-        }
+    var handleToggle = function () {
+        setInternalVisible(function (prev) { return !prev; });
     };
-    return (React__default.createElement("div", { className: styles$p.container, ref: containerRef, onMouseEnter: function () { return setVisible(true); }, onMouseLeave: function () { return setVisible(false); }, onFocus: function () { return setVisible(true); }, onBlur: function () { return setVisible(false); }, onClick: handleInteraction, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-haspopup": "true", "aria-expanded": visible },
+    return (React__default.createElement("div", { className: styles$p.container, ref: containerRef, onMouseEnter: function () { return setInternalVisible(true); }, onMouseLeave: function () { return setInternalVisible(false); }, onClick: handleToggle, role: "button", "aria-haspopup": "true", "aria-expanded": visible },
         children,
         visible && (React__default.createElement("div", { ref: tooltipRef, className: "".concat(styles$p.tooltip, " ").concat(styles$p[position]) },
             React__default.createElement("span", { className: styles$p.textContent }, text)))));
@@ -23517,7 +23513,7 @@ var Portal2 = AlertDialogPortal;
 var Overlay2 = AlertDialogOverlay;
 var Content2 = AlertDialogContent;
 
-var css_248z$4 = ".styles-module__alertOverlay___eoTQD {\r\n  background: #00000080;\r\n  position: fixed;\r\n  inset: 0;\r\n  animation: styles-module__overlayShow___hSH5g 300ms cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes styles-module__overlayShow___hSH5g {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n.styles-module__modalHeaderContainer___zqcC3 {\r\n  width: 100%;\r\n  max-width: 500px;\r\n  height: 56px;\r\n  border-radius: 20px 20px 0px 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  background: var(--modal-header-bg-color);\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n}\r\n\r\n.styles-module__modalHeaderText___is1Qg {\r\n  font-size: var(--font-size-20, 20px);\r\n  font-weight: 700;\r\n  line-height: 27px;\r\n  text-align: left;\r\n  color: #fff;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__modalHeaderText___is1Qg {\r\n    font-size: var(--font-size-16, 16px);\r\n    line-height: 21px;\r\n  }\r\n}\r\n\r\n.styles-module__closeBtn___VOQjz {\r\n  all: unset;\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__customIcon___8Ly4h {\r\n  color: #ffffff;\r\n}\r\n\r\n.styles-module__contentContainer___tiBil {\r\n  border-radius: 20px;\r\n  box-shadow:\r\n    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\r\n    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  max-width: 500px;\r\n  max-height: 85vh;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__contentContainer___tiBil {\r\n    width: 295px;\r\n    height: 250px;\r\n  }\r\n}\r\n\r\n.styles-module__childrenContainer___BgV1l {\r\n  padding: 16px;\r\n  background-color: var(--background-color);\r\n  border-radius: 0px 0px 20px 20px;\r\n  max-height: 500px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.styles-module__iconClose___Veq4Y {\r\n  color: #fff;\r\n}\r\n\r\n.styles-module__closeBtn___VOQjz:focus-visible {\r\n  outline: 2px solid var(--background-color);\r\n  outline-offset: 4px;\r\n  border-radius: 4px;\r\n}";
+var css_248z$4 = ".styles-module__alertOverlay___eoTQD {\r\n  background: #00000080;\r\n  position: fixed;\r\n  inset: 0;\r\n  animation: styles-module__overlayShow___hSH5g 300ms cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes styles-module__overlayShow___hSH5g {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n.styles-module__modalHeaderContainer___zqcC3 {\r\n  width: 100%;\r\n  max-width: 500px;\r\n  height: 56px;\r\n  border-radius: 20px 20px 0px 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  background: var(--modal-header-bg-color);\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n}\r\n\r\n.styles-module__modalHeaderText___is1Qg {\r\n  font-size: var(--font-size-20, 20px);\r\n  font-weight: 700;\r\n  line-height: 27px;\r\n  text-align: left;\r\n  color: #fff;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__modalHeaderText___is1Qg {\r\n    font-size: var(--font-size-16, 16px);\r\n    line-height: 21px;\r\n  }\r\n}\r\n\r\n.styles-module__closeBtn___VOQjz {\r\n  all: unset;\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__customIcon___8Ly4h {\r\n  color: #ffffff;\r\n}\r\n\r\n.styles-module__contentContainer___tiBil {\r\n  border-radius: 20px;\r\n  box-shadow:\r\n    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\r\n    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  max-width: 500px;\r\n  max-height: 85vh;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__contentContainer___tiBil {\r\n    width: 295px;\r\n  }\r\n}\r\n\r\n.styles-module__childrenContainer___BgV1l {\r\n  padding: 16px;\r\n  background-color: var(--background-color);\r\n  border-radius: 0px 0px 20px 20px;\r\n  max-height: 500px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.styles-module__iconClose___Veq4Y {\r\n  color: #fff;\r\n}\r\n\r\n.styles-module__closeBtn___VOQjz:focus-visible {\r\n  outline: 2px solid var(--background-color);\r\n  outline-offset: 4px;\r\n  border-radius: 4px;\r\n}";
 var styles$2 = {"alertOverlay":"styles-module__alertOverlay___eoTQD","overlayShow":"styles-module__overlayShow___hSH5g","modalHeaderContainer":"styles-module__modalHeaderContainer___zqcC3","modalHeaderText":"styles-module__modalHeaderText___is1Qg","closeBtn":"styles-module__closeBtn___VOQjz","customIcon":"styles-module__customIcon___8Ly4h","contentContainer":"styles-module__contentContainer___tiBil","childrenContainer":"styles-module__childrenContainer___BgV1l","iconClose":"styles-module__iconClose___Veq4Y"};
 styleInject(css_248z$4);