@inceptionbg/iui 2.0.22 → 2.0.24

package/src/pages/NoAccessPage.tsx

@@ -1,27 +1,27 @@
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { Button } from '../components/Button/Button';
-
-const NoAccessPage: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="full-screen-page">
-      <div id="content">
-        <h1>{t('NoAccessPage')}</h1>
-        <p className="subtitle">{t('NoAccessPageInfo')}</p>
-      </div>
-      <p id="img" className="img-403">
-        403
-      </p>
-      <div id="actions">
-        <Link to="/">
-          <Button label={t('ReturnToHomepage')} />
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default NoAccessPage;
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { Button } from '../components/Button/Button';
+
+const NoAccessPage: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="full-screen-page">
+      <div id="content">
+        <h1>{t('NoAccessPage')}</h1>
+        <p className="subtitle">{t('NoAccessPageInfo')}</p>
+      </div>
+      <p id="img" className="img-403">
+        403
+      </p>
+      <div id="actions">
+        <Link to="/">
+          <Button label={t('ReturnToHomepage')} />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NoAccessPage;

package/src/pages/NotFoundPage.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { Button } from '../components/Button/Button';
-import notFoundImg from '../assets/images/not-found.svg';
-
-const NotFoundPage: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="full-screen-page">
-      <div id="content">
-        <h1>{t('PageNotFound')}</h1>
-        <p className="subtitle">{t('PageNotFoundInfo')}</p>
-      </div>
-      <img id="img" src={notFoundImg} alt="404" />
-      <div id="actions">
-        <Link to="/">
-          <Button label={t('ReturnToHomepage')} />
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default NotFoundPage;
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import notFoundImg from '../assets/images/not-found.svg';
+import { Button } from '../components/Button/Button';
+
+const NotFoundPage: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="full-screen-page">
+      <div id="content">
+        <h1>{t('PageNotFound')}</h1>
+        <p className="subtitle">{t('PageNotFoundInfo')}</p>
+      </div>
+      <img id="img" src={notFoundImg} alt="404" />
+      <div id="actions">
+        <Link to="/">
+          <Button label={t('ReturnToHomepage')} />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

package/src/styles/common/helpers/_size.scss

@@ -14,9 +14,6 @@
 .w-300 {
   width: 300px !important;
 }
-.w-600 {
-  width: 600px !important;
-}
 
 .full-height {
   height: 100% !important;

package/src/styles/components/_accordions.scss

@@ -45,6 +45,7 @@
     width: 14px;
   }
   .iui-accordion-content {
-    padding: 8px 24px 16px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--neutral-200);
   }
 }

package/src/styles/components/_buttonSplit.scss

@@ -2,16 +2,7 @@
 @use '../common/maps/buttonMaps' as buttonMaps;
 
 .iui-split-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 100px;
-  cursor: pointer;
-  user-select: none;
   overflow: hidden;
-  transition:
-    border-color 250ms,
-    background-color 250ms;
   .iui-btn-content {
     display: flex;
     justify-content: center;
@@ -24,33 +15,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-left: 2px solid var(--neutral-200);
+    border-left: 1px solid;
   }
-
-  &.solid {
-    background-color: var(--primary);
-    color: var(--text-inverse);
-    &:not(:disabled) {
-      .iui-btn-content,
-      .btn-actions {
-        &:hover,
-        &:active,
-        &.active {
-          background-color: var(--primary-600);
-        }
-      }
-      &:focus-visible {
-        box-shadow: 0px 0px 1px 3px var(--primary-200);
-      }
-    }
+  &:hover,
+  &.active {
+    background-color: transparent !important;
   }
   &.outlined {
-    border: 1px solid var(--neutral-300);
     &:not(:disabled) {
       .iui-btn-content,
       .btn-actions {
         &:hover,
-        &:active,
         &.active {
           background-color: var(--neutral-100);
         }

package/src/styles/components/_dialog.scss

@@ -65,8 +65,8 @@ $dialog-sizes: (
     flex-direction: column;
     gap: 8px;
     flex: 1;
-    margin-right: -24px;
-    padding-right: 24px;
+    margin: -24px;
+    padding: 24px;
     &:not(.no-overflow) {
       overflow: auto;
       overscroll-behavior: none;

package/src/styles/components/_input.scss

@@ -156,3 +156,12 @@
   pointer-events: none;
   z-index: -1;
 }
+
+.phone-input {
+  display: flex;
+  align-items: center;
+  .phone-code-input {
+    min-width: 90px;
+    max-width: 90px;
+  }
+}

package/src/styles/components/_page.scss

@@ -61,9 +61,8 @@
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  margin-right: -1.5rem;
-  padding-right: 1.5rem;
-  padding-bottom: 1rem;
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem 1rem;
 }
 
 .page-footer {

package/src/types/IBasic.ts

@@ -1,31 +1,32 @@
-export type DeepPartial<T> = T extends Array<infer U>
-  ? Array<DeepPartial<U>>
-  : T extends object
-  ? { [P in keyof T]?: DeepPartial<T[P]> }
-  : T;
-
-export interface IAnyObject {
-  [id: string]: any;
-}
-
-export interface IStringObject {
-  [id: string]: string;
-}
-
-export interface IBooleanObject {
-  [id: string]: boolean;
-}
-
-export interface ISimpleObject {
-  uuid: string;
-  name: string;
-}
-
-export interface ISimpleObjectWithCode extends ISimpleObject {
-  code: string;
-}
-
-export interface IValueLabel {
-  value: any;
-  label: string;
-}
+export type DeepPartial<T> =
+  T extends Array<infer U>
+    ? Array<DeepPartial<U>>
+    : T extends object
+      ? { [P in keyof T]?: DeepPartial<T[P]> }
+      : T;
+
+export interface IAnyObject {
+  [id: string]: any;
+}
+
+export interface IStringObject {
+  [id: string]: string;
+}
+
+export interface IBooleanObject {
+  [id: string]: boolean;
+}
+
+export interface ISimpleObject {
+  uuid: string;
+  name: string;
+}
+
+export interface ISimpleObjectWithCode extends ISimpleObject {
+  code: string;
+}
+
+export interface IValueLabel {
+  value: any;
+  label: string;
+}

package/src/types/ICountryCode.ts

@@ -0,0 +1,5 @@
+export interface ICountryCode {
+  name: string;
+  code: string;
+  phonePrefix: string;
+}

package/src/types/IError.ts

@@ -1,5 +1,5 @@
-export interface IError {
-  errorMessage: string;
-  errorCode?: string;
-  values?: Record<string, string>;
-}
+export interface IError {
+  errorMessage: string;
+  errorCode?: string;
+  values?: Record<string, string>;
+}

package/src/types/IHeader.ts

@@ -1,40 +1,40 @@
-import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
-import { IButtonColor } from '../components/Button/Button';
-import { IMenuItem } from './IMenu';
-import { FC } from 'react';
-import { IPopupControl } from './IPopup';
-
-export interface IHeaderAction {
-  label: string;
-  icon?: IconDefinition;
-  iconRotation?: RotateProp;
-  to?: string;
-  onClick?: () => void;
-  solid?: boolean;
-  color?: IButtonColor;
-  disabled?: boolean;
-  hidden?: boolean;
-}
-
-export type IHeaderUserMenuProps = {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  userName?: string;
-  organizationName?: string;
-  menuItems: IMenuItem[];
-  inviteCount?: number;
-  controls: {
-    myAccountControl: IPopupControl;
-    changeOrgControl: IPopupControl;
-    orgInvitesControl: IPopupControl;
-  };
-  refetchOrganizationInvites?: () => void;
-  HeaderUserMenuDialogs: FC<{
-    controls: {
-      myAccountControl: IPopupControl;
-      changeOrgControl: IPopupControl;
-      orgInvitesControl: IPopupControl;
-    };
-    refetchOrganizationInvites?: () => void;
-  }>;
-};
+import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import type { FC } from 'react';
+import type { IButtonColor } from '../components/Button/Button';
+import type { IMenuItem } from './IMenu';
+import type { IPopupControl } from './IPopup';
+
+export interface IHeaderAction {
+  label: string;
+  icon?: IconDefinition;
+  iconRotation?: RotateProp;
+  to?: string;
+  onClick?: () => void;
+  solid?: boolean;
+  color?: IButtonColor;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+export type IHeaderUserMenuProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  userName?: string;
+  organizationName?: string;
+  menuItems: IMenuItem[];
+  inviteCount?: number;
+  controls: {
+    myAccountControl: IPopupControl;
+    changeOrgControl: IPopupControl;
+    orgInvitesControl: IPopupControl;
+  };
+  refetchOrganizationInvites?: () => void;
+  HeaderUserMenuDialogs: FC<{
+    controls: {
+      myAccountControl: IPopupControl;
+      changeOrgControl: IPopupControl;
+      orgInvitesControl: IPopupControl;
+    };
+    refetchOrganizationInvites?: () => void;
+  }>;
+};

package/src/types/IInfo.ts

@@ -1 +1 @@
-export type IInfoType = 'success' | 'info' | 'warning' | 'danger';
+export type IInfoType = 'success' | 'info' | 'warning' | 'danger';

package/src/types/IKeyboard.ts

@@ -1,33 +1,33 @@
-import { ITableDataItem } from './ITable';
-
-export interface IKeyboardAction {
-  code: string;
-  onAction: () => void;
-  ctrl?: boolean;
-  shift?: boolean;
-  normalizedKey?: boolean;
-  onBulkAction?: (itemUuids: string[]) => void;
-  disabled?: boolean;
-}
-
-export interface ITableKeyboardActionsBase {
-  moveDisabled?: boolean;
-  editDisabled?: boolean;
-  additional?: (props: {
-    focusedRow: ITableDataItem | null;
-    isEditing: boolean;
-    isAdding: boolean;
-  }) => IKeyboardAction[];
-}
-export interface ITableKeyboardActionsProp extends ITableKeyboardActionsBase {
-  add?: {
-    isAdding: boolean;
-    setIsAdding: (item: boolean) => void;
-    enabled: boolean;
-  };
-  edit?: {
-    item: any | null;
-    setItem: (item: any | null) => void;
-    enabled: boolean;
-  };
-}
+import type { ITableDataItem } from './ITable';
+
+export interface IKeyboardAction {
+  code: string;
+  onAction: () => void;
+  ctrl?: boolean;
+  shift?: boolean;
+  normalizedKey?: boolean;
+  onBulkAction?: (itemUuids: string[]) => void;
+  disabled?: boolean;
+}
+
+export interface ITableKeyboardActionsBase {
+  moveDisabled?: boolean;
+  editDisabled?: boolean;
+  additional?: (props: {
+    focusedRow: ITableDataItem | null;
+    isEditing: boolean;
+    isAdding: boolean;
+  }) => IKeyboardAction[];
+}
+export interface ITableKeyboardActionsProp extends ITableKeyboardActionsBase {
+  add?: {
+    isAdding: boolean;
+    setIsAdding: (item: boolean) => void;
+    enabled: boolean;
+  };
+  edit?: {
+    item: any | null;
+    setItem: (item: any | null) => void;
+    enabled: boolean;
+  };
+}

package/src/types/IMenu.ts

@@ -1,19 +1,19 @@
-import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
-import type { MouseEventHandler } from 'react';
-
-export type IMenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-export interface IMenuItem {
-  label: string;
-  icon?: IconDefinition;
-  iconRotation?: RotateProp;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  to?: string;
-  badge?: number;
-  active?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-  withDevider?: boolean;
-  keepOpen?: boolean;
-  className?: string;
-}
+import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import type { MouseEventHandler } from 'react';
+
+export type IMenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface IMenuItem {
+  label: string;
+  icon?: IconDefinition;
+  iconRotation?: RotateProp;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  to?: string;
+  badge?: number;
+  active?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  withDevider?: boolean;
+  keepOpen?: boolean;
+  className?: string;
+}

package/src/types/INotifications.ts

@@ -1,15 +1,15 @@
-export interface INotification {
-  uuid: string;
-  type: INotificationType;
-  values?: {
-    key: string;
-    value: string;
-    url?: string;
-    format?: 'TRANSLATE' | 'DATE' | 'DATE_TIME';
-  }[];
-  seen: boolean;
-  event: string;
-  organization?: string;
-  createdAt: string;
-}
-export type INotificationType = 'WEB' | 'EMAIL';
+export interface INotification {
+  uuid: string;
+  type: INotificationType;
+  values?: {
+    key: string;
+    value: string;
+    url?: string;
+    format?: 'TRANSLATE' | 'DATE' | 'DATE_TIME';
+  }[];
+  seen: boolean;
+  event: string;
+  organization?: string;
+  createdAt: string;
+}
+export type INotificationType = 'WEB' | 'EMAIL';

package/src/types/IPopup.ts

@@ -1,17 +1,17 @@
-import { RefObject } from 'react';
-
-export interface IPopupControlRef {
-  onOpen: () => void;
-  onClose: () => void;
-}
-
-export interface ILocalPopupControl {
-  controlRef: RefObject<IPopupControlRef | null>;
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-}
-export interface IPopupControl {
-  control: ILocalPopupControl;
-  onOpen: () => void;
-  onClose: () => void;
-}
+import type { RefObject } from 'react';
+
+export interface IPopupControlRef {
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export interface ILocalPopupControl {
+  controlRef: RefObject<IPopupControlRef | null>;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+export interface IPopupControl {
+  control: ILocalPopupControl;
+  onOpen: () => void;
+  onClose: () => void;
+}

package/src/types/IRouter.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-
-export interface IRoute {
-  path: string;
-  element: ReactElement;
-}
+import type { ReactElement } from 'react';
+
+export interface IRoute {
+  path: string;
+  element: ReactElement;
+}