@inceptionbg/iui 2.0.15 → 2.0.16

package/src/components/Table/components/columns/ColumnsList.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState, type FC } from 'react';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableColumn } from '../../../../types/ITable';
+import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
+
+interface Props {
+  id: 'hidden' | 'visible';
+  items: ITableColumn[];
+  search: string;
+}
+
+export const ColumnsList: FC<Props> = ({ id, items, search }) => {
+  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
+
+  useEffect(() => {
+    if (search.length) {
+      setFilteredItems(
+        items.filter(e =>
+          (typeof e.label === 'string' ? e.label : (e.labelForFilter ?? ''))
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+        )
+      );
+    }
+  }, [search, items]);
+
+  const list = search.length ? filteredItems : items;
+
+  return (
+    <Droppable droppableId={id}>
+      {({ droppableProps, innerRef, placeholder }) => (
+        <div {...droppableProps} ref={innerRef} className="list-box">
+          {list.map(c => (
+            <Draggable key={c.id} draggableId={c.id} index={items.indexOf(c)}>
+              {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
+                <div
+                  className={`item ${snapshot.isDragging ? 'dragging' : ''}`}
+                  ref={innerRef}
+                  {...draggableProps}
+                  {...dragHandleProps}
+                  style={{
+                    ...draggableProps.style,
+                    top: 'unset',
+                    left: 'unset',
+                  }}
+                >
+                  {c.label}
+                  <FontAwesomeIcon icon={faGripDotsVertical} />
+                </div>
+              )}
+            </Draggable>
+          ))}
+          {placeholder}
+        </div>
+      )}
+    </Droppable>
+  );
+};

package/src/components/Table/components/columns/TableColumnsEdit.tsx

@@ -0,0 +1,116 @@
+import { FC, useEffect, useState } from 'react';
+import { DragDropContext, DropResult } from '@hello-pangea/dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableColumn } from '../../../../types/ITable';
+import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
+import { useTranslation } from 'react-i18next';
+import { ColumnsList } from './ColumnsList';
+import { SearchInput } from '../../../Inputs/SearchInput';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { IconButton } from '../../../Button/IconButton';
+import { faLineColumns } from '../../../../assets/icons/light/faLineColumns';
+
+export const TableColumnsEdit: FC = () => {
+  const [hidden, setHidden] = useState<ITableColumn[]>([]);
+  const [visible, setVisible] = useState<ITableColumn[]>([]);
+  const [searchHidden, setSearchHidden] = useState('');
+  const [searchVisible, setSearchVisible] = useState('');
+
+  const { t } = useTranslation();
+  const {
+    columnData: { defaultColumns, setColumns },
+  } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  useEffect(() => {
+    if (control.isOpen) {
+      let hiddenCols: ITableColumn[] = [];
+      let visibleCols: ITableColumn[] = [];
+      defaultColumns.forEach(col =>
+        !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
+      );
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    }
+  }, [control.isOpen, defaultColumns]);
+
+  const onDragEnd = ({ source, destination }: DropResult) => {
+    if (!destination) return;
+    const hiddenCols = [...hidden];
+    const visibleCols = [...visible];
+    const destinationIsHidden = destination.droppableId === 'hidden';
+
+    const sourceList = source.droppableId === 'hidden' ? hiddenCols : visibleCols;
+    const destinationList = destinationIsHidden ? hiddenCols : visibleCols;
+
+    const [removed] = sourceList.splice(source.index, 1);
+    destinationList.splice(destination.index, 0, removed);
+    if (source.droppableId !== destination.droppableId) {
+      destinationList[destination.index].hidden = destinationIsHidden;
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    } else {
+      destinationIsHidden ? setHidden(hiddenCols) : setVisible(visibleCols);
+    }
+  };
+
+  const onSubmit = () => {
+    if (setColumns) {
+      const newColumns = [...visible, ...hidden];
+      setColumns(newColumns);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Columns')}
+        icon={faLineColumns}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Pullover
+          control={control}
+          header={{ title: t('Columns') }}
+          footer={{
+            confirmButton: {
+              label: t('Confirm'),
+              onClick: onSubmit,
+            },
+          }}
+        >
+          <div className="dual-list-container">
+            <p className="pb-3">{t('DragDropListsInfo')}</p>
+            <div className="dual-list-content">
+              <p className="bold ml-2">{t('HiddenColumns')}:</p>
+              <div />
+              <p className="bold ml-2">{t('SelectedColumns')}:</p>
+
+              {/* {withSearch && (
+                <> */}
+              <SearchInput onSearch={setSearchHidden} />
+              <div />
+              <SearchInput onSearch={setSearchVisible} />
+              {/* </>
+              )} */}
+              <ColumnsList id="hidden" items={hidden} search={searchHidden} />
+
+              <div className="exchange-icon">
+                <FontAwesomeIcon icon={faArrowRightArrowLeft} />
+              </div>
+
+              <ColumnsList id="visible" items={visible} search={searchVisible} />
+            </div>
+          </div>
+        </Pullover>
+      </DragDropContext>
+    </>
+  );
+};

package/src/components/Table/components/edit/TableEditRow.tsx

@@ -1,15 +1,12 @@
 import { FC, useEffect, useRef } from 'react';
-import { ITableDataItem } from '../../../../types/ITable';
+import { ITableColumn, ITableDataItem } from '../../../../types/ITable';
 import { IconButton } from '../../../Button/IconButton';
 import { faCheck, faXmark } from '../../../../assets/icons';
 import { useTableContext } from '../../contexts/TableContext';
 import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
 
-export const TableEditRow: FC = () => {
-  const {
-    columnData: { columns },
-    editable,
-  } = useTableContext();
+export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
+  const { editable } = useTableContext();
 
   const elementRef = useRef(null);
 
@@ -54,19 +51,16 @@ export const TableEditRow: FC = () => {
 
   return (
     <tr ref={elementRef} data-id={rowData.uuid} className="edit-row">
-      {columns.map(
-        column =>
-          !column.hidden && (
-            <td
-              key={column.id}
-              align={column.align}
-              colSpan={rowData.cells[column.id]?.span}
-              className={rowData.cells[column.id]?.className}
-            >
-              {rowData.cells[column.id]?.value ?? ''}
-            </td>
-          )
-      )}
+      {columns.map(column => (
+        <td
+          key={column.id}
+          align={column.align}
+          colSpan={rowData.cells[column.id]?.span}
+          className={rowData.cells[column.id]?.className}
+        >
+          {rowData.cells[column.id]?.value ?? ''}
+        </td>
+      ))}
     </tr>
   );
 };

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -40,7 +40,7 @@ export const TableHeaderRow: FC<Props> = ({ row, print }) => {
                   ? { width: col.width }
                   : undefined
           }
-          hidden={col.hidden}
+          // hidden={col.hidden}
         >
           <div className="flex align-center">
             {typeof col.label === 'string' ? (

package/src/components/Table/contexts/TableContext.tsx

@@ -15,7 +15,6 @@ import {
   ITableSelectedAction,
 } from '../../../types/ITable';
 import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
-import { useLocalTableColumns } from '../hooks/localHooks/useLocalTableColumns';
 import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
 
 interface ITableContext extends ITable {
@@ -86,20 +85,13 @@ export const TableProvider = ({
     rowSelect,
   });
 
-  useLocalTableColumns({
-    columnData,
-    hasSelect: selectActions.length > 0,
-    data,
-    rowSelect,
-    hasItemActions: updatedDataActions.hasItemActions,
-  });
-
   const tableContextValue: ITableContext = {
     ...rest,
     data,
     dataActions: updatedDataActions,
     columnData,
     selectActions,
+    rowSelect,
   };
 
   if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };

package/src/components/Table/hooks/localHooks/useLocalTableColumns.tsx

@@ -1,33 +1,28 @@
-import { useEffect } from 'react';
-import { ITable, ITableColumn, ITableColumnsData } from '../../../../types/ITable';
+import { useMemo } from 'react';
+import { ITableColumn } from '../../../../types/ITable';
 import { useTranslation } from 'react-i18next';
 import { Checkbox } from '../../../Inputs/Checkbox';
+import { useTableContext } from '../../contexts/TableContext';
 
-interface Props {
-  columnData: ITableColumnsData;
-  hasSelect: boolean;
-  data: ITable['data'];
-  rowSelect: ITable['rowSelect'];
-  hasItemActions?: boolean;
-}
-
-export const useLocalTableColumns = ({
-  columnData: { defaultColumns, setColumns },
-  hasSelect,
-  data,
-  rowSelect,
-  hasItemActions,
-}: Props) => {
+export const useLocalTableColumns = () => {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const activeColumns = defaultColumns.filter(e => !e.hidden && !e.unavailable);
-    // const activeColumns = defaultColumns.filter(e => !e.unavailable);
+  const {
+    columnData: { columns },
+    selectActions,
+    data,
+    rowSelect,
+    dataActions: { hasItemActions } = {},
+  } = useTableContext();
+
+  const visibleColumns = useMemo(() => {
+    const hasSelect = rowSelect && selectActions.length > 0;
+    const filteredColumns = columns.filter(column => !column.hidden);
 
     let newCols: ITableColumn[] = [];
 
     // Select Column
-    if (hasSelect && rowSelect) {
+    if (hasSelect) {
       const selectableData = data.filter(e => !e.disableSelect);
       const selectedSome =
         !!rowSelect.selectedRows.size &&
@@ -57,7 +52,7 @@ export const useLocalTableColumns = ({
       newCols.push(selectColumn);
     }
 
-    newCols = newCols.concat(activeColumns);
+    newCols = newCols.concat(filteredColumns);
     hasItemActions &&
       newCols.push({
         id: 'actions',
@@ -66,6 +61,8 @@ export const useLocalTableColumns = ({
         className: 'actions-col',
       });
 
-    setColumns?.(newCols);
-  }, [defaultColumns, setColumns, hasSelect, data, rowSelect, hasItemActions, t]);
+    return newCols;
+  }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);
+
+  return { visibleColumns };
 };

package/src/components/Table/hooks/useTableColumns.ts

@@ -1,28 +1,36 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { ITableColumn, ITableColumnsData } from '../../../types/ITable';
 
 export interface ITableColumnsProps {
   defaultColumns: ITableColumn[];
   templateColumns?: ITableColumn[];
+  enableEdit?: boolean;
 }
 
 export const useTableColumns = ({
   defaultColumns,
   templateColumns,
+  enableEdit,
 }: ITableColumnsProps): ITableColumnsData => {
-  const [columns, setColumns] = useState<ITableColumn[]>(defaultColumns);
+  const [columns, setColumns] = useState<ITableColumn[]>([]);
 
-  useEffect(() => {
-    setColumns(defaultColumns);
-  }, [defaultColumns, templateColumns]);
+  const availableColumns = useMemo(
+    () => defaultColumns.filter(e => !e.unavailable),
+    [defaultColumns]
+  );
+
+  useLayoutEffect(() => {
+    setColumns(availableColumns);
+  }, [availableColumns, templateColumns]);
 
   const columnData = useMemo(
     () => ({
-      defaultColumns,
+      defaultColumns: availableColumns,
       columns,
-      setColumns,
+      setColumns: enableEdit ? setColumns : undefined,
     }),
-    [defaultColumns, columns]
+    [availableColumns, columns, enableEdit]
   );
+
   return columnData;
 };

package/src/components/Tabs/Tabs.tsx

@@ -36,6 +36,7 @@ export const Tabs: FC<Props> = ({
       <div className="iui-tabs">
         {filteredTabs.map(tab => (
           <div
+            id={tab.value}
             key={tab.value}
             className={clsx('iui-tab clickable', {
               selected: (control?.value || selected) === tab.value,

package/src/index.ts

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { ToastContainer } from 'react-toastify';
 
 import type { IFormWrapper } from './components/Wrappers/FormWrapper';

package/src/styles/components/_badge.scss

@@ -15,7 +15,7 @@
   padding: 0 4px;
   &.primary {
     color: var(--text-inverse);
-    border: 2px solid white;
+    border: 2px solid var(--background);
     background-color: var(--primary);
   }
   // SIZES

package/src/styles/components/_header.scss

@@ -118,13 +118,10 @@
       text-overflow: ellipsis;
     }
   }
-  .user-badge {
-    min-height: 10px;
-    max-height: 10px;
-    min-width: 10px;
-    max-width: 10px;
-    background: var(--danger);
-    border-radius: 50px;
+  .user-notif-badge {
+    border: 1px solid var(--primary);
+    background-color: var(--danger);
+    right: -5px;
   }
 }
 .header-user-menu {

package/src/styles/components/_list.scss

@@ -35,7 +35,7 @@
       cursor: default;
       opacity: 0.5;
     }
-    &:not(.disabled) {
+    &.clickable:not(.disabled) {
       cursor: pointer;
       &:hover {
         background-color: var(--neutral-hover);

package/src/styles/components/_table.scss

@@ -9,6 +9,8 @@ table {
   thead {
     z-index: 2;
     background-color: var(--neutral-100);
+    // background-color: var(--primary);
+    // color: var(--text-inverse);
     tr:first-child th {
       border-top: var(--borderlight);
     }
@@ -44,6 +46,10 @@ table {
     &.selected {
       background-color: rgba(0, 0, 0, 0.05);
     }
+    &:has(.iui-icon-btn:hover),
+    &:has(a:hover) {
+      background-color: transparent !important;
+    }
     &.focused {
       background-color: var(--primary-100);
     }
@@ -204,44 +210,49 @@ table {
 .table-sort-item {
   flex-direction: row-reverse;
 }
-// .dual-list-container {
-//   .dual-list-content {
-//     display: grid;
-//     grid-template-columns: 1fr auto 1fr;
-//     gap: 12px;
-//   }
-//   .list-box {
-//     border: var(--border-light);
-//     border-radius: 16px;
-//     padding: 10px;
-//     user-select: none;
-//     & > .item {
-//       display: flex;
-//       justify-content: space-between;
-//       align-items: center;
-//       padding: 8px;
-//       font-size: 12px;
-//       svg {
-//         color: rgba(0, 0, 0, 0.6);
-//         margin-left: 1rem;
-//       }
-//       &:hover {
-//         background-color: var(--primary-o10);
-//       }
-//       &:active {
-//         background-color: var(--primary-o25);
-//       }
-//     }
-//   }
-//   .exchange-icon {
-//     display: flex;
-//     align-items: center;
-//     svg {
-//       height: 20px;
-//       width: 20px;
-//     }
-//   }
-// }
+.dual-list-container {
+  .dual-list-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 16px 12px;
+  }
+  .list-box {
+    border: var(--border-light);
+    border-radius: 8px;
+    padding: 8px;
+    user-select: none;
+    & > .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      font-size: 14spx;
+      svg {
+        color: var(--text);
+        margin-left: 1rem;
+      }
+      &:hover {
+        background-color: var(--primary-o10);
+      }
+      &:active {
+        background-color: var(--primary-o25);
+      }
+      &.dragging {
+        transform: scale(1.02);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        background-color: #fff !important;
+      }
+    }
+  }
+  .exchange-icon {
+    display: flex;
+    align-items: center;
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
 
 .edit-row {
   background: var(--neutral-100);

package/src/styles/variables/_variables.scss

@@ -112,8 +112,17 @@
   --neutral-700: hsl(351, 0%, 31%);
   --neutral-t: rgba(16, 24, 40, 0.5);
 
+  // --danger-100: #fceae8;
+  // --danger-200: #f7d7d4;
+  // --danger-300: #dc776f;
+  // --danger-400: #de4f45;
+  // --danger-500: #d92d20;
+  // --danger-600: #c5261b;
+  // --danger-700: #a11b12;
+
   --primary: var(--primary-500);
   --neutral: var(--neutral-500);
+  --danger: var(--danger-500);
 
   --text: var(--neutral-700);
   --text-disabled: var(--neutral-400);

package/src/types/IHeader.ts

@@ -22,7 +22,7 @@ export type IHeaderUserMenuProps = {
   userName?: string;
   organizationName?: string;
   menuItems: IMenuItem[];
-  showBadge?: boolean;
+  inviteCount?: number;
   controls: {
     myAccountControl: IPopupControl;
     changeOrgControl: IPopupControl;

package/src/types/ITable.ts

@@ -4,6 +4,7 @@ import { ITableKeyboardActionsBase } from './IKeyboard';
 import { IPopupControl } from './IPopup';
 
 export interface ITable<T = unknown> {
+  id?: string;
   columnData: ITableColumnsData;
   data: ITableDataItem[];
   dataActions?: ITableDataActions;

package/dist/NoAccessPage-DBq5IzIf.js

@@ -1,2 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTranslation as r}from"react-i18next";import{Link as a}from"react-router";import{Button as c}from"./index.js";import"@fortawesome/react-fontawesome";import"clsx";import"dayjs";import"react-beautiful-dnd";import"react-toastify";import"react";import"react-dom";import"react-calendar";import"react-select";import"react-select-async-paginate";import"react-select/async-creatable";const i=()=>{const{t:i}=r();return e("div",{className:"full-screen-page",children:[e("div",{id:"content",children:[t("h1",{children:i("NoAccessPage")}),t("p",{className:"subtitle",children:i("NoAccessPageInfo")})]}),t("p",{id:"img",className:"img-403",children:"403"}),t("div",{id:"actions",children:t(a,{to:"/",children:t(c,{label:i("ReturnToHomepage")})})})]})};export{i as default};
-//# sourceMappingURL=NoAccessPage-DBq5IzIf.js.map