@inceptionbg/iui 2.0.8 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inceptionbg/iui",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "UI components, elements & utils for Inception ecosystem",
   "type": "module",
   "exports": {

package/src/assets/icons/index.ts

@@ -11,7 +11,7 @@ export * from './light/faHouse';
 export * from './light/faIdBadge';
 export * from './light/faLink';
 export * from './light/faMagnifyingGlass';
-export * from './light/faPenField';
+export * from './light/faPen';
 export * from './light/faPrint';
 export * from './light/faQuestion';
 export * from './light/faRotateRight';

package/src/assets/icons/light/faClipboardCheck.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fal";
+const iconName = "clipboard-check";
+const width = 384;
+const height = 512;
+const unicode = "f46c";
+const svgPathData =
+  "M320 64c-8.844 0-16 7.156-16 16S311.2 96 320 96c17.64 0 32 14.34 32 32v320c0 17.66-14.36 32-32 32H64c-17.64 0-32-14.34-32-32V128c0-17.66 14.36-32 32-32c8.844 0 16-7.156 16-16S72.84 64 64 64C28.7 64 0 92.72 0 128v320c0 35.28 28.7 64 64 64h256c35.3 0 64-28.72 64-64V128C384 92.72 355.3 64 320 64zM112 128h160C280.8 128 288 120.8 288 112S280.8 96 272 96h-24.88C252.6 86.55 256 75.72 256 64c0-35.35-28.65-64-64-64S128 28.65 128 64c0 11.72 3.379 22.55 8.877 32H112C103.2 96 96 103.2 96 112S103.2 128 112 128zM192 32c17.64 0 32 14.36 32 32s-14.36 32-32 32S160 81.64 160 64S174.4 32 192 32zM84.69 299.3l64 64C151.8 366.4 155.9 368 160 368s8.188-1.562 11.31-4.688l128-128c6.25-6.25 6.25-16.38 0-22.62s-16.38-6.25-22.62 0L160 329.4L107.3 276.7c-6.25-6.25-16.38-6.25-22.62 0S78.44 293.1 84.69 299.3z";
+
+export const faClipboardCheck: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faHouse.ts

@@ -1,15 +1,15 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fal";
-const iconName = "house";
-const width = 576;
-const height = 512;
-const unicode = "f015";
-const svgPathData =
-  "M570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L570.6 244zM144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7V432C96 458.5 117.5 480 144 480zM240 480H336V320H240V480z";
-
-export const faHouse: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fal";
+const iconName = "house";
+const width = 576;
+const height = 512;
+const unicode = "f015";
+const svgPathData =
+  "M570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L570.6 244zM144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7V432C96 458.5 117.5 480 144 480zM240 480H336V320H240V480z";
+
+export const faHouse: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faIdBadge.ts

@@ -1,15 +1,15 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fal";
-const iconName = "id-badge";
-const width = 384;
-const height = 512;
-const unicode = "f2c1";
-const svgPathData =
-  "M320 0H64C28.65 0 0 28.65 0 64v384c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V64C384 28.65 355.3 0 320 0zM352 448c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V64c0-17.64 14.36-32 32-32h256c17.64 0 32 14.36 32 32V448zM192 288c35.35 0 64-28.65 64-64s-28.65-64-64-64S128 188.7 128 224S156.7 288 192 288zM192 192c17.64 0 32 14.36 32 32s-14.36 32-32 32S160 241.6 160 224S174.4 192 192 192zM224 320H160c-44.18 0-80 35.82-80 80C80 408.8 87.16 416 96 416c8.838 0 16-7.164 16-16C112 373.5 133.5 352 160 352h64c26.51 0 48 21.49 48 48c0 8.836 7.164 16 16 16c8.838 0 16-7.164 16-16C304 355.8 268.2 320 224 320zM144 96h96C248.8 96 256 88.84 256 80S248.8 64 240 64h-96C135.2 64 128 71.16 128 80S135.2 96 144 96z";
-
-export const faIdBadge: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fal";
+const iconName = "id-badge";
+const width = 384;
+const height = 512;
+const unicode = "f2c1";
+const svgPathData =
+  "M320 0H64C28.65 0 0 28.65 0 64v384c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V64C384 28.65 355.3 0 320 0zM352 448c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V64c0-17.64 14.36-32 32-32h256c17.64 0 32 14.36 32 32V448zM192 288c35.35 0 64-28.65 64-64s-28.65-64-64-64S128 188.7 128 224S156.7 288 192 288zM192 192c17.64 0 32 14.36 32 32s-14.36 32-32 32S160 241.6 160 224S174.4 192 192 192zM224 320H160c-44.18 0-80 35.82-80 80C80 408.8 87.16 416 96 416c8.838 0 16-7.164 16-16C112 373.5 133.5 352 160 352h64c26.51 0 48 21.49 48 48c0 8.836 7.164 16 16 16c8.838 0 16-7.164 16-16C304 355.8 268.2 320 224 320zM144 96h96C248.8 96 256 88.84 256 80S248.8 64 240 64h-96C135.2 64 128 71.16 128 80S135.2 96 144 96z";
+
+export const faIdBadge: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faPen.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fal";
+const iconName = "pen";
+const width = 512;
+const height = 512;
+const unicode = "f304";
+const svgPathData =
+  "M493.2 56.26l-37.51-37.51C443.2 6.252 426.8 0 410.5 0c-16.38 0-32.76 6.25-45.26 18.75L45.11 338.9c-8.568 8.566-14.53 19.39-17.18 31.21l-27.61 122.8C-1.7 502.1 6.158 512 15.95 512c1.047 0 2.116-.1034 3.198-.3202c0 0 84.61-17.95 122.8-26.93c11.54-2.717 21.87-8.523 30.25-16.9l321.2-321.2C518.3 121.7 518.2 81.26 493.2 56.26zM149.5 445.2c-4.219 4.219-9.252 7.039-14.96 8.383c-24.68 5.811-69.64 15.55-97.46 21.52l22.04-98.01c1.332-5.918 4.303-11.31 8.594-15.6l247.6-247.6l82.76 82.76L149.5 445.2zM470.7 124l-50.03 50.02l-82.76-82.76l49.93-49.93C393.9 35.33 401.9 32 410.5 32s16.58 3.33 22.63 9.375l37.51 37.51C483.1 91.37 483.1 111.6 470.7 124z";
+
+export const faPen: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/components/Button/IconButton.tsx

@@ -14,6 +14,7 @@ export interface IIconButtonProps {
   disabled?: boolean;
   active?: boolean;
   tooltip?: string;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   className?: string;
   buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
   ref?: Ref<HTMLButtonElement>;
@@ -28,6 +29,7 @@ export const IconButton: FC<IIconButtonProps> = ({
   disabled,
   active,
   tooltip,
+  type = 'button',
   className,
   buttonProps,
   ref,
@@ -40,7 +42,7 @@ export const IconButton: FC<IIconButtonProps> = ({
         active,
       })}
       onClick={onClick}
-      type={buttonProps?.type || onClick ? 'button' : 'submit'}
+      type={type}
       {...buttonProps}
     >
       <FontAwesomeIcon icon={icon} />

package/src/components/Dialog/Dialog.tsx

@@ -1,52 +1,33 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
-import { FC, ReactNode, useCallback, useRef } from 'react';
+import { FC, KeyboardEventHandler, ReactNode, Ref, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { rootDir } from '../../utils/RootDir';
-import { Button, IButtonColor, IButtonVariant } from '../Button/Button';
+import { rootDir } from '../../utils/rootDir';
 import { Loader } from '../Loader/Loader';
 import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { useDialogKeyboard } from './hooks/useDialogKeyboard';
 import { faXmark } from '../../assets/icons';
 import { IconButton } from '../Button/IconButton';
 import { infoIcons } from '../../utils/icons';
 import { IInfoType } from '../../types/IInfo';
 import { useBackgroundClose } from '../../hooks/useBackgroundClose';
+import { DialogFooter, IDialogFooterActions } from './components/DialogFooter';
+import {
+  PopupControlRef,
+  useLocalPopoverControl,
+} from '../../hooks/useLocalPopoverControl';
+import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
+import { onPopupKeyDown } from '../../utils/popupUtils';
 
 interface Props {
+  controlRef: Ref<PopupControlRef>;
   title?: string;
   titleEl?: ReactNode;
   desc?: string;
   descEl?: ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
+  onFormSubmit?: () => void;
+  onCloseCallback?: () => void;
   isLoading?: boolean;
-  confirmButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    onFormSubmit?: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    isKeyboardDisabled?: boolean;
-  };
-  cancelButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-  };
-  additionalButton?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    color?: IButtonColor;
-    variant?: IButtonVariant;
-  };
-  hideActionButtons?: boolean;
+  footer?: IDialogFooterActions;
   isKeyboardDisabled?: boolean;
   noBackgroundClick?: boolean;
   noOverflow?: boolean;
@@ -57,18 +38,16 @@ interface Props {
 }
 
 export const Dialog: FC<Props> = ({
+  controlRef,
   title,
   titleEl,
   desc,
   descEl,
-  isOpen,
-  onClose,
+  onFormSubmit,
+  onCloseCallback,
   isLoading,
-  confirmButton,
-  cancelButton,
-  additionalButton,
+  footer,
   isKeyboardDisabled,
-  hideActionButtons,
   noBackgroundClick,
   noOverflow,
   type,
@@ -76,58 +55,60 @@ export const Dialog: FC<Props> = ({
   className,
   children,
 }) => {
-  const { t } = useTranslation();
-
-  const portalRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
-  const handleClose = useCallback(() => {
-    portalRef.current?.classList.add('closing');
-    setTimeout(onClose, 200);
-  }, [portalRef, onClose]);
+  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
+    controlRef,
+    onCloseCallback,
+  });
 
-  useDialogKeyboard({
+  const focusableElements = useGetFocusableElements({
+    elementRef,
     isOpen,
-    isDisabled: isKeyboardDisabled,
-    onClose: handleClose,
-    submit: {
-      onEnter: () => {
-        if (confirmButton) {
-          if (confirmButton.onFormSubmit) {
-            formRef.current?.requestSubmit();
-          } else {
-            confirmButton.onClick?.();
-            !confirmButton.keepOpen && handleClose();
-          }
-        } else {
-          cancelButton?.onClick ? cancelButton.onClick() : handleClose();
-        }
-      },
-      isDisabled: !confirmButton?.disabled && !confirmButton?.isKeyboardDisabled,
-    },
   });
 
   useBackgroundClose({
-    portalRef,
+    portalRef: elementRef,
     disabled: noBackgroundClick || !isOpen,
-    handleClose,
+    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={portalRef} className="iui-dialog">
+        <div
+          ref={elementRef}
+          className="iui-dialog"
+          aria-label="popup"
+          onKeyDown={onKeyDown}
+          tabIndex={-1}
+        >
           <Loader isLoading={!!isLoading}>
             <div className={clsx('iui-dialog-container', size, type, className)}>
               <ConditionalWrapper
-                condition={!!confirmButton?.onFormSubmit}
+                condition={!!onFormSubmit}
                 wrapper={children => (
                   <form
                     ref={formRef}
                     onSubmit={e => {
                       e.preventDefault();
                       e.stopPropagation();
-                      confirmButton?.onFormSubmit?.();
-                      !confirmButton?.keepOpen && handleClose();
+                      onFormSubmit?.();
+                      !footer?.confirmButton?.keepOpen && onClose();
                     }}
                   >
                     {children}
@@ -151,10 +132,11 @@ export const Dialog: FC<Props> = ({
                         {title ? <h4>{title}</h4> : titleEl}
                         <IconButton
                           icon={faXmark}
-                          onClick={handleClose}
+                          onClick={onClose}
                           color="neutral"
                           size="l"
                           className="close-icon"
+                          buttonProps={{ tabIndex: -1 }}
                         />
                       </div>
                       {desc ? <p className="iui-dialog-desc">{desc}</p> : descEl}
@@ -162,59 +144,13 @@ export const Dialog: FC<Props> = ({
                   </div>
                   {children}
                 </div>
-                {!hideActionButtons && (
-                  <div className="iui-dialog-actions">
-                    <Button
-                      label={
-                        cancelButton?.label || (confirmButton ? t('Cancel') : t('Close'))
-                      }
-                      icon={cancelButton?.icon}
-                      variant={confirmButton ? 'outlined' : 'solid'}
-                      onClick={e => {
-                        e.stopPropagation();
-                        cancelButton?.onClick ? cancelButton.onClick() : handleClose();
-                      }}
-                      type="button"
-                    />
-                    {additionalButton && (
-                      <Button
-                        label={additionalButton.label}
-                        icon={additionalButton.icon}
-                        onClick={
-                          !!additionalButton.onClick
-                            ? e => {
-                                e.stopPropagation();
-                                additionalButton.onClick!();
-                                !additionalButton.keepOpen && handleClose();
-                              }
-                            : undefined
-                        }
-                        type="button"
-                        variant={additionalButton.variant ?? 'outlined'}
-                        color={additionalButton.color}
-                        disabled={additionalButton.disabled}
-                      />
-                    )}
-                    {confirmButton && (
-                      <Button
-                        label={confirmButton.label || 'Potvrdi'}
-                        icon={confirmButton.icon}
-                        variant="solid"
-                        type={confirmButton.onFormSubmit ? 'submit' : 'button'}
-                        onClick={
-                          !!confirmButton.onClick
-                            ? e => {
-                                e.stopPropagation();
-                                confirmButton.onClick!();
-                                !confirmButton.keepOpen && handleClose();
-                              }
-                            : undefined
-                        }
-                        color={type === 'danger' ? 'danger' : undefined}
-                        disabled={confirmButton.disabled}
-                      />
-                    )}
-                  </div>
+                {footer && (
+                  <DialogFooter
+                    {...footer}
+                    onClose={onClose}
+                    isForm={!!onFormSubmit}
+                    type={type}
+                  />
                 )}
               </ConditionalWrapper>
             </div>

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

@@ -0,0 +1,92 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ButtonHTMLAttributes, FC } from 'react';
+import { Button, IButtonColor } from '../../Button/Button';
+import { useTranslation } from 'react-i18next';
+import { IInfoType } from '../../../types/IInfo';
+
+export interface IDialogFooterActions {
+  confirmButton: {
+    label?: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    disabled?: boolean;
+    keepOpen?: boolean;
+    color?: IButtonColor;
+    isKeyboardDisabled?: boolean;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  };
+  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();
+
+  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"
+        />
+      )}
+      <Button
+        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}
+      />
+    </div>
+  );
+};

package/src/components/Dialog/hooks/useDialogKeyboard.ts

@@ -18,13 +18,14 @@ export const useDialogKeyboard = ({
   useEffect(() => {
     if (isOpen && !isDisabled) {
       const handleKeyDown = (event: KeyboardEvent) => {
+        event.stopPropagation();
         const actions: IKeyboardAction[] = [
-          { key: 'Enter', onAction: submit.onEnter!, disabled: submit.isDisabled },
-          { key: 'Escape', onAction: onClose },
+          { code: 'Enter', onAction: submit.onEnter!, disabled: submit.isDisabled },
+          { code: 'Escape', onAction: onClose },
         ];
 
         actions.forEach(item => {
-          if (!item.disabled && item.key === event.key) {
+          if (!item.disabled && item.code === event.key) {
             event.preventDefault();
             event.stopPropagation();
             item.onAction();
@@ -32,9 +33,9 @@ export const useDialogKeyboard = ({
         });
       };
 
-      window.addEventListener('keydown', handleKeyDown);
+      document.addEventListener('keydown', handleKeyDown);
       return () => {
-        window.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('keydown', handleKeyDown);
       };
     }
   }, [isOpen, submit, onClose, isDisabled]);

package/src/components/Header/Header.tsx

@@ -21,7 +21,7 @@ export const Header: FC<Props> = ({
 }) => (
   <div className="iui-header">
     {modulesProps && <ModuleSelect {...modulesProps} />}
-    {customTitle && <h3 className="p-3">{customTitle}</h3>}
+    {customTitle && <h3 className="ml-3">{customTitle}</h3>}
     <div className="flex gap-2 align-center">
       {children}
       {/* {!hideNotifications && <Notifications />} */}