@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Wrappers/FormWrapper.tsx

@@ -1,83 +1,84 @@
-import { FC, FormEvent, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, IButtonColor, IButtonVariant } from '../Button/Button';
-import { Loader } from '../Loader/Loader';
-
-export interface IFormWrapper {
-  isLoading: boolean;
-  className?: string;
-  submitButton: {
-    label?: string;
-    icon?: any;
-    disabled?: boolean;
-    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
-    variant?: IButtonVariant;
-    color?: IButtonColor;
-  };
-  otherButtons?: {
-    label: string;
-    icon?: any;
-    onClick: () => void;
-    variant?: IButtonVariant;
-    color?: IButtonColor;
-    disabled?: boolean;
-    hidden?: boolean;
-  }[];
-  noAccess?: boolean;
-  children: ReactNode;
-}
-
-export const FormWrapper: FC<IFormWrapper> = ({
-  isLoading,
-  noAccess,
-  submitButton,
-  otherButtons,
-  className,
-  children,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Loader isLoading={isLoading}>
-      <form
-        className={className}
-        onSubmit={e => {
-          e.preventDefault();
-          e.stopPropagation();
-          !submitButton.disabled && submitButton.onSubmit(e);
-        }}
-      >
-        {children}
-        {(!noAccess || otherButtons) && (
-          <div className="iui-form-actions">
-            {otherButtons?.map(
-              e =>
-                !e.hidden && (
-                  <Button
-                    key={e.label}
-                    label={e.label}
-                    icon={e.icon}
-                    disabled={isLoading || e.disabled}
-                    variant={e.variant}
-                    color={e.color}
-                    onClick={e.onClick}
-                    type="button"
-                  />
-                )
-            )}
-            {!noAccess && (
-              <Button
-                label={submitButton.label ?? t('Save')}
-                // icon={submitButton.icon}
-                disabled={isLoading || submitButton.disabled}
-                variant={submitButton.variant}
-                color={submitButton.color}
-                type="submit"
-              />
-            )}
-          </div>
-        )}
-      </form>
-    </Loader>
-  );
-};
+import type { FC, FormEvent, ReactNode } from 'react';
+import type { IButtonColor, IButtonVariant } from '../Button/Button';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../Button/Button';
+import { Loader } from '../Loader/Loader';
+
+export interface IFormWrapper {
+  isLoading: boolean;
+  className?: string;
+  submitButton: {
+    label?: string;
+    icon?: any;
+    disabled?: boolean;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: IButtonVariant;
+    color?: IButtonColor;
+  };
+  otherButtons?: {
+    label: string;
+    icon?: any;
+    onClick: () => void;
+    variant?: IButtonVariant;
+    color?: IButtonColor;
+    disabled?: boolean;
+    hidden?: boolean;
+  }[];
+  noAccess?: boolean;
+  children: ReactNode;
+}
+
+export const FormWrapper: FC<IFormWrapper> = ({
+  isLoading,
+  noAccess,
+  submitButton,
+  otherButtons,
+  className,
+  children,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Loader isLoading={isLoading}>
+      <form
+        className={className}
+        onSubmit={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          !submitButton.disabled && submitButton.onSubmit(e);
+        }}
+      >
+        {children}
+        {(!noAccess || otherButtons) && (
+          <div className="iui-form-actions">
+            {otherButtons?.map(
+              e =>
+                !e.hidden && (
+                  <Button
+                    key={e.label}
+                    label={e.label}
+                    icon={e.icon}
+                    disabled={isLoading || e.disabled}
+                    variant={e.variant}
+                    color={e.color}
+                    onClick={e.onClick}
+                    type="button"
+                  />
+                )
+            )}
+            {!noAccess && (
+              <Button
+                label={submitButton.label ?? t('Save')}
+                // icon={submitButton.icon}
+                disabled={isLoading || submitButton.disabled}
+                variant={submitButton.variant}
+                color={submitButton.color}
+                type="submit"
+              />
+            )}
+          </div>
+        )}
+      </form>
+    </Loader>
+  );
+};

package/src/components/Wrappers/PageLayout.tsx

@@ -1,155 +1,156 @@
-import { FC, ReactNode, useLayoutEffect, useState } from 'react';
-import { IHeaderAction } from '../../types/IHeader';
-import { Button } from '../Button/Button';
-import { Loader } from '../Loader/Loader';
-import { ConditionalWrapper } from './ConditionalWrapper';
-import { IconButton } from '../Button/IconButton';
-import { faArrowLeft } from '../../assets/icons/regular/faArrowLeft';
-import { faEllipsisVertical, faQuestion } from '../../assets/icons';
-import { Trans } from 'react-i18next';
-import { Pullover } from '../Pullover/Pullover';
-import { Link, useNavigate } from 'react-router';
-import { IMenuItem } from '../../types/IMenu';
-import { Menu } from '../Menu/Menu';
-import { usePopupControl } from '../../hooks/usePopupControl';
-
-export interface IPageLayoutProps {
-  breadcrumbs?: (string | undefined)[];
-  actions?: IHeaderAction[];
-  moreActions?: IMenuItem[];
-  backButton?: {
-    url?: string;
-    active: boolean;
-  };
-  help?: {
-    title: string;
-    descEl: ReactNode;
-  };
-  noAccess?: boolean;
-  isInitiallyLoading?: boolean;
-  isLoading?: boolean;
-  hideFooter?: boolean;
-  children?: ReactNode;
-}
-
-export const PageLayout: FC<IPageLayoutProps> = ({
-  breadcrumbs,
-  actions,
-  moreActions,
-  backButton,
-  help,
-  noAccess,
-  isLoading,
-  isInitiallyLoading,
-  hideFooter,
-  children,
-}) => {
-  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
-  const helpControl = usePopupControl();
-
-  const navigate = useNavigate();
-  const filteredActions = moreActions?.filter(e => !e.hidden);
-
-  useLayoutEffect(() => {
-    noAccess && navigate('/no-access', { replace: true });
-  }, [noAccess, navigate]);
-
-  if (noAccess) {
-    return null;
-  }
-
-  if (isInitiallyLoading) {
-    return <Loader isLoading isFullPage />;
-  }
-
-  return (
-    <Loader isLoading={!!isLoading}>
-      <div className="page-container">
-        {breadcrumbs && (
-          <div className="page-header">
-            <div className="flex align-center gap-2">
-              {backButton?.active && (
-                <IconButton
-                  icon={faArrowLeft}
-                  onClick={() =>
-                    backButton.url ? navigate(backButton.url) : navigate(-1)
-                  }
-                  // outlined
-                  // size="s"
-                />
-              )}
-              {/* ////// BREADCRUMBS ////// */}
-              <h3 className="breadcrumbs">
-                {breadcrumbs.reduce(
-                  (acc: string, e) => (e ? (acc ? `${acc} / ${e}` : e) : acc),
-                  ''
-                )}
-              </h3>
-            </div>
-            {/* ////// ACTIONS ////// */}
-            <div className="flex align-center gap-2">
-              {help && (
-                <>
-                  <IconButton
-                    icon={faQuestion}
-                    onClick={helpControl.onOpen}
-                    variant="outlined"
-                    size="s"
-                  />
-                  <Pullover
-                    control={helpControl.control}
-                    header={{
-                      title: help.title,
-                    }}
-                    size="vw50"
-                  >
-                    {help.descEl}
-                  </Pullover>
-                </>
-              )}
-              {!!filteredActions?.length && (
-                <Menu
-                  // id="page-more-actions"
-                  isOpen={isMoreActionsOpen}
-                  onClose={() => setIsMoreActionsOpen(false)}
-                  placement="bottom-right"
-                  renderButton={ref => (
-                    <IconButton
-                      ref={ref}
-                      icon={faEllipsisVertical}
-                      active={isMoreActionsOpen}
-                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
-                      variant="outlined"
-                      size="s"
-                    />
-                  )}
-                  items={filteredActions}
-                />
-              )}
-              {actions?.map(
-                action =>
-                  !action.hidden && (
-                    <ConditionalWrapper
-                      key={action.label}
-                      condition={!!action.to}
-                      wrapper={children => <Link to={action.to!}>{children}</Link>}
-                    >
-                      <Button key={action.label} {...action} className="ml-2" />
-                    </ConditionalWrapper>
-                  )
-              )}
-            </div>
-          </div>
-        )}
-        <div className="page-content">{children}</div>
-        {!hideFooter && (
-          <footer className="page-footer">
-            <p className="page-footer-text">
-              <Trans i18nKey="FooterText" />
-            </p>
-          </footer>
-        )}
-      </div>
-    </Loader>
-  );
-};
+import type { FC, ReactNode } from 'react';
+import type { IHeaderAction } from '../../types/IHeader';
+import type { IMenuItem } from '../../types/IMenu';
+import { useLayoutEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { Link, useNavigate } from 'react-router';
+import { faEllipsisVertical, faQuestion } from '../../assets/icons';
+import { faArrowLeft } from '../../assets/icons/regular/faArrowLeft';
+import { usePopupControl } from '../../hooks/usePopupControl';
+import { Button } from '../Button/Button';
+import { IconButton } from '../Button/IconButton';
+import { Loader } from '../Loader/Loader';
+import { Menu } from '../Menu/Menu';
+import { Pullover } from '../Pullover/Pullover';
+import { ConditionalWrapper } from './ConditionalWrapper';
+
+export interface IPageLayoutProps {
+  breadcrumbs?: (string | undefined)[];
+  actions?: IHeaderAction[];
+  moreActions?: IMenuItem[];
+  backButton?: {
+    url?: string;
+    active: boolean;
+  };
+  help?: {
+    title: string;
+    descEl: ReactNode;
+  };
+  noAccess?: boolean;
+  isInitiallyLoading?: boolean;
+  isLoading?: boolean;
+  hideFooter?: boolean;
+  children?: ReactNode;
+}
+
+export const PageLayout: FC<IPageLayoutProps> = ({
+  breadcrumbs,
+  actions,
+  moreActions,
+  backButton,
+  help,
+  noAccess,
+  isLoading,
+  isInitiallyLoading,
+  hideFooter,
+  children,
+}) => {
+  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
+  const helpControl = usePopupControl();
+
+  const navigate = useNavigate();
+  const filteredActions = moreActions?.filter(e => !e.hidden);
+
+  useLayoutEffect(() => {
+    noAccess && navigate('/no-access', { replace: true });
+  }, [noAccess, navigate]);
+
+  if (noAccess) {
+    return null;
+  }
+
+  if (isInitiallyLoading) {
+    return <Loader isLoading isFullPage />;
+  }
+
+  return (
+    <Loader isLoading={!!isLoading}>
+      <div className="page-container">
+        {breadcrumbs && (
+          <div className="page-header">
+            <div className="flex align-center gap-2">
+              {backButton?.active && (
+                <IconButton
+                  icon={faArrowLeft}
+                  onClick={() =>
+                    backButton.url ? navigate(backButton.url) : navigate(-1)
+                  }
+                  // outlined
+                  // size="s"
+                />
+              )}
+              {/* ////// BREADCRUMBS ////// */}
+              <h3 className="breadcrumbs">
+                {breadcrumbs.reduce(
+                  (acc: string, e) => (e ? (acc ? `${acc} / ${e}` : e) : acc),
+                  ''
+                )}
+              </h3>
+            </div>
+            {/* ////// ACTIONS ////// */}
+            <div className="flex align-center gap-2">
+              {help && (
+                <>
+                  <IconButton
+                    icon={faQuestion}
+                    onClick={helpControl.onOpen}
+                    variant="outlined"
+                    size="s"
+                  />
+                  <Pullover
+                    control={helpControl.control}
+                    header={{
+                      title: help.title,
+                    }}
+                    size="vw50"
+                  >
+                    {help.descEl}
+                  </Pullover>
+                </>
+              )}
+              {!!filteredActions?.length && (
+                <Menu
+                  // id="page-more-actions"
+                  isOpen={isMoreActionsOpen}
+                  onClose={() => setIsMoreActionsOpen(false)}
+                  placement="bottom-right"
+                  renderButton={ref => (
+                    <IconButton
+                      ref={ref}
+                      icon={faEllipsisVertical}
+                      active={isMoreActionsOpen}
+                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
+                      variant="outlined"
+                      size="s"
+                    />
+                  )}
+                  items={filteredActions}
+                />
+              )}
+              {actions?.map(
+                action =>
+                  !action.hidden && (
+                    <ConditionalWrapper
+                      key={action.label}
+                      condition={!!action.to}
+                      wrapper={children => <Link to={action.to!}>{children}</Link>}
+                    >
+                      <Button key={action.label} {...action} className="ml-2" />
+                    </ConditionalWrapper>
+                  )
+              )}
+            </div>
+          </div>
+        )}
+        <div className="page-content">{children}</div>
+        {!hideFooter && (
+          <footer className="page-footer">
+            <p className="page-footer-text">
+              <Trans i18nKey="FooterText" />
+            </p>
+          </footer>
+        )}
+      </div>
+    </Loader>
+  );
+};

package/src/hooks/useBackgroundClose.ts

@@ -1,18 +1,19 @@
-import { RefObject, useEffect } from 'react';
-
-interface Props {
-  disabled?: boolean;
-  portalRef: RefObject<HTMLDivElement | null>;
-  handleClose: () => void;
-}
-
-export const useBackgroundClose = ({ portalRef, disabled, handleClose }: Props) => {
-  useEffect(() => {
-    if (!disabled) {
-      const portal = portalRef.current;
-      const handleClick = (ev: MouseEvent) => ev.target === portal && handleClose();
-      portal?.addEventListener('click', handleClick);
-      return () => portal?.removeEventListener('click', handleClick);
-    }
-  }, [portalRef, disabled, handleClose]);
-};
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+interface Props {
+  disabled?: boolean;
+  portalRef: RefObject<HTMLDivElement | null>;
+  handleClose: () => void;
+}
+
+export const useBackgroundClose = ({ portalRef, disabled, handleClose }: Props) => {
+  useEffect(() => {
+    if (!disabled) {
+      const portal = portalRef.current;
+      const handleClick = (ev: MouseEvent) => ev.target === portal && handleClose();
+      portal?.addEventListener('click', handleClick);
+      return () => portal?.removeEventListener('click', handleClick);
+    }
+  }, [portalRef, disabled, handleClose]);
+};

package/src/hooks/useGetFocusableElements.ts

@@ -1,42 +1,43 @@
-import { RefObject, useEffect, useState } from 'react';
-
-export const useGetFocusableElements = ({
-  elementRef,
-  isOpen,
-  autoFocusIndex,
-}: {
-  elementRef: RefObject<HTMLDivElement | null>;
-  isOpen: boolean;
-  autoFocusIndex?: number;
-}) => {
-  const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
-
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element || !isOpen) return;
-
-    const focusableSelectors = [
-      'button:not([disabled]):not([tabindex="-1"])',
-      'input:not([disabled]):not([tabindex="-1"])',
-      'textarea:not([disabled]):not([tabindex="-1"])',
-      // 'select:not([disabled]):not([tabindex="-1"])',
-    ];
-
-    const focusables = Array.from(
-      element.querySelectorAll<HTMLElement>(focusableSelectors.join(','))
-    );
-
-    setFocusableElements(focusables);
-
-    // Autofocus
-    if (typeof autoFocusIndex === 'number' && focusables.length > autoFocusIndex) {
-      setTimeout(() => {
-        focusables[autoFocusIndex].focus();
-      }, 200);
-    } else {
-      element.focus();
-    }
-  }, [elementRef, isOpen, autoFocusIndex]);
-
-  return focusableElements;
-};
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+export const useGetFocusableElements = ({
+  elementRef,
+  isOpen,
+  autoFocusIndex,
+}: {
+  elementRef: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  autoFocusIndex?: number;
+}) => {
+  const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !isOpen) return;
+
+    const focusableSelectors = [
+      'button:not([disabled]):not([tabindex="-1"])',
+      'input:not([disabled]):not([tabindex="-1"])',
+      'textarea:not([disabled]):not([tabindex="-1"])',
+      // 'select:not([disabled]):not([tabindex="-1"])',
+    ];
+
+    const focusables = Array.from(
+      element.querySelectorAll<HTMLElement>(focusableSelectors.join(','))
+    );
+
+    setFocusableElements(focusables);
+
+    // Autofocus
+    if (typeof autoFocusIndex === 'number' && focusables.length > autoFocusIndex) {
+      setTimeout(() => {
+        focusables[autoFocusIndex].focus();
+      }, 200);
+    } else {
+      element.focus();
+    }
+  }, [elementRef, isOpen, autoFocusIndex]);
+
+  return focusableElements;
+};

package/src/hooks/useIsMenuOpen.ts

@@ -1,11 +1,11 @@
-import { useState } from 'react';
-
-export const useIsMenuOpen = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return {
-    isOpen,
-    onOpen: () => setIsOpen(true),
-    onClose: () => setTimeout(() => setIsOpen(false)),
-  };
-};
+import { useState } from 'react';
+
+export const useIsMenuOpen = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    isOpen,
+    onOpen: () => setIsOpen(true),
+    onClose: () => setTimeout(() => setIsOpen(false)),
+  };
+};