@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Dialog/Dialog.tsx

@@ -1,166 +1,166 @@
-import type { FC, KeyboardEventHandler, ReactNode } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import type { ILocalPopupControl } from '../../types/IPopup';
-import type { IDialogFooterActions } from './components/DialogFooter';
-import { useRef } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { faXmark } from '../../assets/icons';
-import { useBackgroundClose } from '../../hooks/useBackgroundClose';
-import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
-import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
-import { infoIcons } from '../../utils/icons';
-import { onPopupKeyDown } from '../../utils/popupUtils';
-import { rootDir } from '../../utils/rootDir';
-import { IconButton } from '../Button/IconButton';
-import { Loader } from '../Loader/Loader';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { DialogFooter } from './components/DialogFooter';
-
-interface Props {
-  control: ILocalPopupControl;
-  title?: string;
-  titleEl?: ReactNode;
-  desc?: string;
-  descEl?: ReactNode;
-  onFormSubmit?: () => void;
-  onCloseCallback?: () => void;
-  isLoading?: boolean;
-  footer?: IDialogFooterActions;
-  isKeyboardDisabled?: boolean;
-  noBackgroundClick?: boolean;
-  noOverflow?: boolean;
-  type?: IInfoType;
-  size?: 'm' | 'l' | 'xl';
-  className?: string;
-  classNameContent?: string;
-  children?: ReactNode;
-}
-
-export const Dialog: FC<Props> = ({
-  control,
-  title,
-  titleEl,
-  desc,
-  descEl,
-  onFormSubmit,
-  onCloseCallback,
-  isLoading,
-  footer,
-  isKeyboardDisabled,
-  noBackgroundClick,
-  noOverflow,
-  type,
-  size = 'm',
-  className,
-  classNameContent,
-  children,
-}) => {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
-    control,
-    onCloseCallback,
-  });
-
-  const focusableElements = useGetFocusableElements({
-    elementRef,
-    isOpen,
-  });
-
-  useBackgroundClose({
-    portalRef: elementRef,
-    disabled: noBackgroundClick || !isOpen,
-    handleClose: onClose,
-  });
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
-    !isKeyboardDisabled &&
-      onPopupKeyDown(event, {
-        onClose,
-        enter: {
-          onAction: () => {
-            footer?.confirmButton?.onClick?.();
-            !footer?.confirmButton?.keepOpen && onClose();
-          },
-          disabled: !footer?.confirmButton?.onClick,
-        },
-        focusableElements,
-      });
-  };
-
-  return isOpen
-    ? createPortal(
-        <div
-          ref={elementRef}
-          className="iui-dialog"
-          aria-label="popup"
-          onKeyDown={onKeyDown}
-          tabIndex={-1}
-        >
-          <Loader isLoading={!!isLoading}>
-            <ConditionalWrapper
-              condition={!!onFormSubmit}
-              wrapper={children => (
-                <form
-                  ref={formRef}
-                  onSubmit={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onFormSubmit?.();
-                    !footer?.confirmButton?.keepOpen && onClose();
-                  }}
-                >
-                  {children}
-                </form>
-              )}
-            >
-              <div className={clsx('iui-dialog-container', size, type, className)}>
-                <div className="iui-dialog-header">
-                  {type && (
-                    <FontAwesomeIcon
-                      icon={infoIcons[type]}
-                      className={clsx('dialog-type-icon', type)}
-                    />
-                  )}
-                  <div className="full-width">
-                    <div className="iui-dialog-title">
-                      {title ? <h4>{title}</h4> : titleEl}
-                      <IconButton
-                        icon={faXmark}
-                        onClick={onClose}
-                        color="neutral"
-                        size="l"
-                        className="close-icon"
-                        buttonProps={{ tabIndex: -1 }}
-                      />
-                    </div>
-                    {desc ? <p className="iui-dialog-desc">{desc}</p> : descEl}
-                  </div>
-                </div>
-                {children && (
-                  <div
-                    className={clsx('iui-dialog-content', classNameContent, {
-                      'no-overflow': noOverflow,
-                    })}
-                  >
-                    {children}
-                  </div>
-                )}
-                {footer && (
-                  <DialogFooter
-                    {...footer}
-                    onClose={onClose}
-                    isForm={!!onFormSubmit}
-                    type={type}
-                  />
-                )}
-              </div>
-            </ConditionalWrapper>
-          </Loader>
-        </div>,
-        rootDir
-      )
-    : null;
-};
+import type { FC, KeyboardEventHandler, ReactNode } from 'react';
+import type { IInfoType } from '../../types/IInfo';
+import type { ILocalPopupControl } from '../../types/IPopup';
+import type { IDialogFooterActions } from './components/DialogFooter';
+import { useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { faXmark } from '../../assets/icons';
+import { useBackgroundClose } from '../../hooks/useBackgroundClose';
+import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
+import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
+import { infoIcons } from '../../utils/icons';
+import { onPopupKeyDown } from '../../utils/popupUtils';
+import { rootDir } from '../../utils/rootDir';
+import { IconButton } from '../Button/IconButton';
+import { Loader } from '../Loader/Loader';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { DialogFooter } from './components/DialogFooter';
+
+interface Props {
+  control: ILocalPopupControl;
+  title?: string;
+  titleEl?: ReactNode;
+  desc?: string;
+  descEl?: ReactNode;
+  onFormSubmit?: () => void;
+  onCloseCallback?: () => void;
+  isLoading?: boolean;
+  footer?: IDialogFooterActions;
+  isKeyboardDisabled?: boolean;
+  noBackgroundClick?: boolean;
+  noOverflow?: boolean;
+  type?: IInfoType;
+  size?: 'm' | 'l' | 'xl';
+  className?: string;
+  classNameContent?: string;
+  children?: ReactNode;
+}
+
+export const Dialog: FC<Props> = ({
+  control,
+  title,
+  titleEl,
+  desc,
+  descEl,
+  onFormSubmit,
+  onCloseCallback,
+  isLoading,
+  footer,
+  isKeyboardDisabled,
+  noBackgroundClick,
+  noOverflow,
+  type,
+  size = 'm',
+  className,
+  classNameContent,
+  children,
+}) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
+    control,
+    onCloseCallback,
+  });
+
+  const focusableElements = useGetFocusableElements({
+    elementRef,
+    isOpen,
+  });
+
+  useBackgroundClose({
+    portalRef: elementRef,
+    disabled: noBackgroundClick || !isOpen,
+    handleClose: onClose,
+  });
+
+  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
+    !isKeyboardDisabled &&
+      onPopupKeyDown(event, {
+        onClose,
+        enter: {
+          onAction: () => {
+            footer?.confirmButton?.onClick?.();
+            !footer?.confirmButton?.keepOpen && onClose();
+          },
+          disabled: !footer?.confirmButton?.onClick,
+        },
+        focusableElements,
+      });
+  };
+
+  return isOpen
+    ? createPortal(
+        <div
+          ref={elementRef}
+          className="iui-dialog"
+          aria-label="popup"
+          onKeyDown={onKeyDown}
+          tabIndex={-1}
+        >
+          <Loader isLoading={!!isLoading}>
+            <ConditionalWrapper
+              condition={!!onFormSubmit}
+              wrapper={children => (
+                <form
+                  ref={formRef}
+                  onSubmit={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onFormSubmit?.();
+                    !footer?.confirmButton?.keepOpen && onClose();
+                  }}
+                >
+                  {children}
+                </form>
+              )}
+            >
+              <div className={clsx('iui-dialog-container', size, type, className)}>
+                <div className="iui-dialog-header">
+                  {type && (
+                    <FontAwesomeIcon
+                      icon={infoIcons[type]}
+                      className={clsx('dialog-type-icon', type)}
+                    />
+                  )}
+                  <div className="full-width">
+                    <div className="iui-dialog-title">
+                      {title ? <h4>{title}</h4> : titleEl}
+                      <IconButton
+                        icon={faXmark}
+                        onClick={onClose}
+                        color="neutral"
+                        size="l"
+                        className="close-icon"
+                        buttonProps={{ tabIndex: -1 }}
+                      />
+                    </div>
+                    {desc ? <p className="iui-dialog-desc">{desc}</p> : descEl}
+                  </div>
+                </div>
+                {children && (
+                  <div
+                    className={clsx('iui-dialog-content', classNameContent, {
+                      'no-overflow': noOverflow,
+                    })}
+                  >
+                    {children}
+                  </div>
+                )}
+                {footer && (
+                  <DialogFooter
+                    {...footer}
+                    onClose={onClose}
+                    isForm={!!onFormSubmit}
+                    type={type}
+                  />
+                )}
+              </div>
+            </ConditionalWrapper>
+          </Loader>
+        </div>,
+        rootDir
+      )
+    : null;
+};

package/src/components/Dialog/components/DialogFooter.tsx

@@ -1,100 +1,100 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ButtonHTMLAttributes, FC } from 'react';
-import type { IInfoType } from '../../../types/IInfo';
-import type { IButtonColor } from '../../Button/Button';
-import type { ISplitAction } from '../../Button/SplitButton';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../Button/Button';
-import { SplitButton } from '../../Button/SplitButton';
-
-export interface IDialogFooterActions {
-  confirmButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    color?: IButtonColor;
-    isKeyboardDisabled?: boolean;
-    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-    splitActions?: ISplitAction[];
-  };
-  cancelButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    hidden?: boolean;
-  };
-  additionalButton?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    color?: IButtonColor;
-  };
-}
-
-interface Props extends IDialogFooterActions {
-  onClose: () => void;
-  isForm?: boolean;
-  type?: IInfoType;
-}
-
-export const DialogFooter: FC<Props> = ({
-  confirmButton,
-  cancelButton,
-  additionalButton,
-  onClose,
-  isForm,
-  type,
-}) => {
-  const { t } = useTranslation();
-  const ConfirmButton = confirmButton?.splitActions ? SplitButton : Button;
-
-  return (
-    <div className="iui-dialog-actions">
-      {additionalButton && (
-        <Button
-          {...additionalButton}
-          onClick={e => {
-            e.stopPropagation();
-            additionalButton.onClick!();
-            !additionalButton.keepOpen && onClose();
-          }}
-          variant="simple"
-          className="mr-auto"
-        />
-      )}
-      {!cancelButton?.hidden && (
-        <Button
-          label={cancelButton?.label ?? t('Cancel')}
-          icon={cancelButton?.icon}
-          variant="outlined"
-          onClick={e => {
-            e.stopPropagation();
-            cancelButton?.onClick?.();
-            onClose();
-          }}
-          type="button"
-        />
-      )}
-      {confirmButton && (
-        <ConfirmButton
-          label={confirmButton.label || t('Confirm')}
-          icon={confirmButton.icon}
-          variant="solid"
-          type={confirmButton.type ?? (isForm ? 'submit' : 'button')}
-          onClick={e => {
-            e.stopPropagation();
-            confirmButton.onClick?.();
-            !confirmButton.keepOpen && !isForm && onClose();
-          }}
-          color={(confirmButton.color ?? type === 'danger') ? 'danger' : undefined}
-          disabled={confirmButton.disabled}
-          splitActions={confirmButton.splitActions}
-        />
-      )}
-    </div>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ButtonHTMLAttributes, FC } from 'react';
+import type { IInfoType } from '../../../types/IInfo';
+import type { IButtonColor } from '../../Button/Button';
+import type { ISplitAction } from '../../Button/SplitButton';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../Button/Button';
+import { SplitButton } from '../../Button/SplitButton';
+
+export interface IDialogFooterActions {
+  confirmButton?: {
+    label?: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    disabled?: boolean;
+    keepOpen?: boolean;
+    color?: IButtonColor;
+    isKeyboardDisabled?: boolean;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    splitActions?: ISplitAction[];
+  };
+  cancelButton?: {
+    label?: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    hidden?: boolean;
+  };
+  additionalButton?: {
+    label: string;
+    icon?: IconDefinition;
+    onClick: () => void;
+    disabled?: boolean;
+    keepOpen?: boolean;
+    color?: IButtonColor;
+  };
+}
+
+interface Props extends IDialogFooterActions {
+  onClose: () => void;
+  isForm?: boolean;
+  type?: IInfoType;
+}
+
+export const DialogFooter: FC<Props> = ({
+  confirmButton,
+  cancelButton,
+  additionalButton,
+  onClose,
+  isForm,
+  type,
+}) => {
+  const { t } = useTranslation();
+  const ConfirmButton = confirmButton?.splitActions ? SplitButton : Button;
+
+  return (
+    <div className="iui-dialog-actions">
+      {additionalButton && (
+        <Button
+          {...additionalButton}
+          onClick={e => {
+            e.stopPropagation();
+            additionalButton.onClick!();
+            !additionalButton.keepOpen && onClose();
+          }}
+          variant="simple"
+          className="mr-auto"
+        />
+      )}
+      {!cancelButton?.hidden && (
+        <Button
+          label={cancelButton?.label ?? t('Cancel')}
+          icon={cancelButton?.icon}
+          variant="outlined"
+          onClick={e => {
+            e.stopPropagation();
+            cancelButton?.onClick?.();
+            onClose();
+          }}
+          type="button"
+        />
+      )}
+      {confirmButton && (
+        <ConfirmButton
+          label={confirmButton.label || t('Confirm')}
+          icon={confirmButton.icon}
+          variant="solid"
+          type={confirmButton.type ?? (isForm ? 'submit' : 'button')}
+          onClick={e => {
+            e.stopPropagation();
+            confirmButton.onClick?.();
+            !confirmButton.keepOpen && !isForm && onClose();
+          }}
+          color={(confirmButton.color ?? type === 'danger') ? 'danger' : undefined}
+          disabled={confirmButton.disabled}
+          splitActions={confirmButton.splitActions}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/Header/Components/EnvBadge.tsx

@@ -1,17 +1,17 @@
-import type { FC } from 'react';
-import { PillBadge } from '../../Badge/PillBadge';
-
-export const EnvBadge: FC = () => {
-  // @ts-ignore
-  const env = import.meta.env.VITE_ENV;
-  const isTest = env.includes('TEST');
-  const isUAT = env.includes('UAT');
-
-  if (!isTest && !isUAT) {
-    return null;
-  }
-
-  return (
-    <PillBadge label={isTest ? 'Test' : 'UAT'} color="warning" className="env-badge" />
-  );
-};
+import type { FC } from 'react';
+import { PillBadge } from '../../Badge/PillBadge';
+
+export const EnvBadge: FC = () => {
+  // @ts-ignore
+  const env = import.meta.env.VITE_ENV;
+  const isTest = env.includes('TEST');
+  const isUAT = env.includes('UAT');
+
+  if (!isTest && !isUAT) {
+    return null;
+  }
+
+  return (
+    <PillBadge label={isTest ? 'Test' : 'UAT'} color="warning" className="env-badge" />
+  );
+};