@inceptionbg/iui 2.0.23 → 2.0.25

package/src/components/Button/SplitButton.tsx

@@ -1,91 +1,91 @@
-import {
-  useMemo,
-  type ButtonHTMLAttributes,
-  type FC,
-  type MouseEventHandler,
-  type Ref,
-} from 'react';
-import clsx from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-import { Menu } from '../Menu/Menu';
-import { useIsMenuOpen } from '../../hooks/useIsMenuOpen';
-import { faCaretDown } from '../../assets/icons/solid/faCaretDown';
-
-export type ISplitAction = Pick<IMenuItem, 'label' | 'onClick'> &
-  Partial<Pick<IMenuItem, 'icon' | 'active' | 'disabled' | 'hidden'>>;
-
-export interface IButtonProps {
-  label: string;
-  icon?: IconDefinition;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  splitActions?: ISplitAction[];
-  menuPlacement?: IMenuPlacement;
-  variant?: 'solid' | 'outlined';
-  size?: 'xs' | 's' | 'm' | 'l';
-  disabled?: boolean;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  className?: string;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export const SplitButton: FC<IButtonProps> = ({
-  label,
-  icon,
-  onClick,
-  splitActions,
-  menuPlacement = 'bottom-right',
-  variant = 'solid',
-  size = 'm',
-  disabled,
-  type = 'button',
-  className,
-  buttonProps,
-  ref,
-}) => {
-  const { isOpen, onClose, onOpen } = useIsMenuOpen();
-
-  const filteredActions = useMemo(
-    () => splitActions?.filter(action => !action.hidden),
-    [splitActions]
-  );
-
-  return (
-    <button
-      ref={ref}
-      disabled={disabled}
-      className={clsx('iui-split-btn', variant, size, className)}
-      onClick={onClick}
-      type={type}
-      {...buttonProps}
-    >
-      <div className="iui-btn-content">
-        {icon && <FontAwesomeIcon icon={icon} />}
-        <div className="iui-btn-label">{label}</div>
-      </div>
-      {!!filteredActions?.length && (
-        <Menu
-          isOpen={isOpen}
-          onClose={onClose}
-          placement={menuPlacement}
-          renderButton={ref => (
-            <div
-              className={clsx('btn-actions', { active: isOpen })}
-              ref={ref}
-              onMouseOver={e => e.stopPropagation()}
-              onClick={e => {
-                e.stopPropagation();
-                onOpen();
-              }}
-            >
-              <FontAwesomeIcon icon={faCaretDown} />
-            </div>
-          )}
-          items={filteredActions}
-        />
-      )}
-    </button>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
+import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
+import { useMemo } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCaretDown } from '../../assets/icons/solid/faCaretDown';
+import { useIsMenuOpen } from '../../hooks/useIsMenuOpen';
+import { Menu } from '../Menu/Menu';
+
+export type ISplitAction = Pick<IMenuItem, 'label' | 'onClick'> &
+  Partial<Pick<IMenuItem, 'icon' | 'active' | 'disabled' | 'hidden'>>;
+
+export interface IButtonProps {
+  label: string;
+  icon?: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  splitActions?: ISplitAction[];
+  menuPlacement?: IMenuPlacement;
+  variant?: 'solid' | 'outlined';
+  size?: 'xs' | 's' | 'm' | 'l';
+  disabled?: boolean;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  className?: string;
+  fullWidth?: boolean;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+export const SplitButton: FC<IButtonProps> = ({
+  label,
+  icon,
+  onClick,
+  splitActions,
+  menuPlacement = 'bottom-right',
+  variant = 'solid',
+  size = 'm',
+  disabled,
+  type = 'button',
+  className,
+  fullWidth,
+  buttonProps,
+  ref,
+}) => {
+  const { isOpen, onClose, onOpen } = useIsMenuOpen();
+
+  const filteredActions = useMemo(
+    () => splitActions?.filter(action => !action.hidden),
+    [splitActions]
+  );
+
+  return (
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={clsx('iui-btn iui-split-btn', variant, size, className, {
+        primary: variant === 'solid',
+        neutral: variant !== 'solid',
+      })}
+      onClick={onClick}
+      type={type}
+      {...buttonProps}
+    >
+      <div className={clsx('iui-btn-content', { 'full-width': fullWidth })}>
+        {icon && <FontAwesomeIcon icon={icon} />}
+        <div className="iui-btn-label">{label}</div>
+      </div>
+      {!!filteredActions?.length && (
+        <Menu
+          isOpen={isOpen}
+          onClose={onClose}
+          placement={menuPlacement}
+          renderButton={ref => (
+            <div
+              className={clsx('btn-actions', { active: isOpen })}
+              ref={ref}
+              onMouseOver={e => e.stopPropagation()}
+              onClick={e => {
+                e.stopPropagation();
+                onOpen();
+              }}
+            >
+              <FontAwesomeIcon icon={faCaretDown} />
+            </div>
+          )}
+          items={filteredActions}
+        />
+      )}
+    </button>
+  );
+};

package/src/components/Dashboard/Dashboard.tsx

@@ -1,9 +1,9 @@
-import { FC, ReactNode } from 'react';
-
-export const Dashboard: FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="page-container">
-    <div className="page-content">
-      <div className="widget-container">{children}</div>
-    </div>
-  </div>
-);
+import type { FC, ReactNode } from 'react';
+
+export const Dashboard: FC<{ children: ReactNode }> = ({ children }) => (
+  <div className="page-container">
+    <div className="page-content">
+      <div className="widget-container">{children}</div>
+    </div>
+  </div>
+);

package/src/components/Dashboard/DashboardWidget.tsx

@@ -1,44 +1,44 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { FC, ReactNode } from 'react';
-import { Loader } from '../Loader/Loader';
-import { faCircleInfo, faTriangleExclamation } from '../../assets/icons';
-
-const Icons = {
-  warning: faTriangleExclamation,
-  info: faCircleInfo,
-};
-interface Props {
-  title: string;
-  icon?: any;
-  type?: 'warning' | 'info';
-  span?: 2 | 3 | 4;
-  isLoading?: boolean;
-  children: ReactNode;
-}
-export const DashboardWidget: FC<Props> = ({
-  title,
-  icon,
-  type,
-  span,
-  isLoading,
-  children,
-}) => (
-  <Loader isLoading={!!isLoading}>
-    <div
-      className={clsx('dashboard-widget', type, {
-        [`grid-span${span}`]: !!span,
-      })}
-    >
-      <div className="flex gap-3 mb-3">
-        {icon && (
-          <div className="widget-icon">
-            <FontAwesomeIcon icon={icon || Icons[type!]} />
-          </div>
-        )}
-        <h1>{title}</h1>
-      </div>
-      {children}
-    </div>
-  </Loader>
-);
+import type { FC, ReactNode } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCircleInfo, faTriangleExclamation } from '../../assets/icons';
+import { Loader } from '../Loader/Loader';
+
+const Icons = {
+  warning: faTriangleExclamation,
+  info: faCircleInfo,
+};
+interface Props {
+  title: string;
+  icon?: any;
+  type?: 'warning' | 'info';
+  span?: 2 | 3 | 4;
+  isLoading?: boolean;
+  children: ReactNode;
+}
+export const DashboardWidget: FC<Props> = ({
+  title,
+  icon,
+  type,
+  span,
+  isLoading,
+  children,
+}) => (
+  <Loader isLoading={!!isLoading}>
+    <div
+      className={clsx('dashboard-widget', type, {
+        [`grid-span${span}`]: !!span,
+      })}
+    >
+      <div className="flex gap-3 mb-3">
+        {icon && (
+          <div className="widget-icon">
+            <FontAwesomeIcon icon={icon || Icons[type!]} />
+          </div>
+        )}
+        <h1>{title}</h1>
+      </div>
+      {children}
+    </div>
+  </Loader>
+);

package/src/components/Dashboard/FastLinksWidget/FastLinksWidget.tsx

@@ -1,37 +1,37 @@
-import type { FC } from 'react';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { useTranslation } from 'react-i18next';
-import { DashboardWidget } from '../DashboardWidget';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLink } from '../../../assets/icons/light/faLink';
-import { faArrowUpRightFromSquare } from '../../../assets/icons/light/faArrowUpRightFromSquare';
-
-interface Props {
-  links: {
-    icon?: IconDefinition;
-    label: string;
-    onClick: () => void;
-  }[];
-}
-
-export const FastLinksWidget: FC<Props> = ({ links }) => {
-  const { t } = useTranslation();
-
-  return (
-    <DashboardWidget title={t('FastLinks')} icon={faLink}>
-      <div className="short-links-widget mt-4">
-        <ul>
-          {links.map((l, i) => (
-            <li onClick={l.onClick} className="clickable" key={`short-links-${i}`}>
-              <FontAwesomeIcon
-                icon={l.icon || faArrowUpRightFromSquare}
-                className="mr-3"
-              />
-              {l.label}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </DashboardWidget>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useTranslation } from 'react-i18next';
+import { faArrowUpRightFromSquare } from '../../../assets/icons/light/faArrowUpRightFromSquare';
+import { faLink } from '../../../assets/icons/light/faLink';
+import { DashboardWidget } from '../DashboardWidget';
+
+interface Props {
+  links: {
+    icon?: IconDefinition;
+    label: string;
+    onClick: () => void;
+  }[];
+}
+
+export const FastLinksWidget: FC<Props> = ({ links }) => {
+  const { t } = useTranslation();
+
+  return (
+    <DashboardWidget title={t('FastLinks')} icon={faLink}>
+      <div className="short-links-widget mt-4">
+        <ul>
+          {links.map((l, i) => (
+            <li onClick={l.onClick} className="clickable" key={`short-links-${i}`}>
+              <FontAwesomeIcon
+                icon={l.icon || faArrowUpRightFromSquare}
+                className="mr-3"
+              />
+              {l.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </DashboardWidget>
+  );
+};