pixel-react 1.10.3 → 1.10.5

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
     </div>
   );
 };
+export const NormalModalWithLoop = () => {
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const modelItems = ['one', 'two', 'three', 'four'];
+  const structuredArray = modelItems.map((value, index) => ({
+    id: `${index + 1}`,
+    value: value,
+  }));
+
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const getButtonPosition = (index: number) => {
+    const button = buttonRefs.current[index];
+    if (button) {
+      const { top, left, height } = button.getBoundingClientRect();
+      return { top: top + height, left };
+    }
+    return { top: 0, left: 0 };
+  };
 
+  return (
+    <div className="ff-mini-modal-loop">
+      {structuredArray.map((data, index) => (
+        <div key={data.id} className="ff-mini-modal-loop-div">
+          <p>{data.value}</p>
+          <Button
+            variant="primary"
+            ref={(el) => (buttonRefs.current[index] = el)}
+            onClick={() => openModal(Number(data.id))}
+            id={data.id}
+            label={data.id}
+          />
+
+          {currentModal === Number(data.id) && (
+            <MiniModal
+              id={data.id}
+              modalProperties={{
+                width: 168,
+                height: 108,
+                top: getButtonPosition(index).top,
+                left: getButtonPosition(index).left,
+              }}
+              overlay={{
+                isOverlay: true,
+                zIndexOverlay: 99,
+              }}
+              childContent={
+                <Typography as="p">
+                  This is some content inside the modal for {data.value}.
+                </Typography>
+              }
+              isIconModel={true}
+              isAnimated={true}
+              outSideClick={closeModal}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
 export default meta;

package/src/components/MiniModal/types.ts

@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
   /**
    * A reference to the button element that triggers the modal.
    */
-  anchorRef: RefObject<HTMLButtonElement> | string;
+  anchorRef?: RefObject<HTMLButtonElement> | string;
+  id?: string | number;
   /**
    * Optional properties for configuring the modal header.
    */

package/src/components/Table/Table.stories.tsx

@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
     tableDataTextColor: 'var(--brand-color)',
   },
   render: () => {
-    // important prerequisite tableData should have unique IDs
+    //! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
     const [tableData, setTableData] = useState(
       sampleData.map((data) => data.project)
     );

package/src/components/Table/Table.tsx

@@ -43,7 +43,7 @@ const SortableRow = ({
     <tr
       ref={setNodeRef}
       style={style}
-      key={row.id}
+      key={row._id || row.id}
       className={classNames(tableBodyRowClass, {
         'disabled-row': row.disabled,
       })}
@@ -133,8 +133,12 @@ const Table = ({
     const { active, over } = event;
     if (!over || active.id === over.id) return;
 
-    const oldIndex = data.findIndex((item: any) => item.id === active.id);
-    const newIndex = data.findIndex((item: any) => item.id === over.id);
+    const oldIndex = data.findIndex(
+      (item: any) => item._id === active.id || item.id === active.id
+    );
+    const newIndex = data.findIndex(
+      (item: any) => item._id === over.id || item.id === over.id
+    );
 
     if (oldIndex === -1 || newIndex === -1) return;
     if (onDragEnd) onDragEnd(oldIndex, newIndex);
@@ -144,7 +148,7 @@ const Table = ({
     <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
       <SortableContext
         disabled={!draggable}
-        items={data?.map((row: any) => row.id)}
+        items={data?.map((row: any) => row._id || row.id)}
         strategy={verticalListSortingStrategy}
       >
         <div

package/src/components/TableTree/Components/TableCell.tsx

@@ -10,7 +10,8 @@ import { AddModule } from './AddModule/AddModule';
 const renderSpaces = (
   level: number,
   parentSiblings: boolean[] = [],
-  isLast?: boolean | undefined
+  isLast?: boolean | undefined,
+  isContainer?: boolean | undefined
 ) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -27,8 +28,10 @@ const renderSpaces = (
       {siblingsArray?.reverse()?.map((line, i) => (
         <span
           key={i}
-          className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-            isLastNode && i === level - 1 ? 'last-node' : ''
+          className={`tree-table-space-block tree-table-space-block-${i} ${
+            !line ? 'no-lines' : ''
+          } ${isLastNode && i === level - 1 ? 'last-node' : ''} ${
+            isContainer ? 'folder' : ''
           }`}
         />
       ))}
@@ -38,19 +41,28 @@ const renderSpaces = (
 
 const TableCell = React.memo(
   ({
+    treeRowRef,
     col,
     node,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-    index,
     onAddConfirm,
     onAddCancel,
   }: TableCellProps) => (
-    <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
+    <td
+      className={`ff-table-tree-td ${
+        col.isTree && node.container ? 'folder' : ''
+      }`}
+    >
       {col.isTree &&
-        renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
+        renderSpaces(
+          node.hierarchy + 1,
+          node.parentSiblings,
+          node.lastResource,
+          node.container
+        )}
       <div className="tree-title-container">
         {col.isTree && (
           <span
@@ -70,7 +82,7 @@ const TableCell = React.memo(
         )}
         <span
           className={`tree-table-td-content ${
-            col.isTree && node.folder ? 'folder' : ''
+            col.isTree && node.container ? 'folder' : ''
           }`}
         >
           {!node?.isNewNode && (
@@ -106,9 +118,12 @@ const TableCell = React.memo(
           )}
         </span>
       </div>
-
-      {col.actions && !node?.isNewNode && (
-        <div className="table-tree-row-action">{col.actions(node, index)}</div>
+      {col.actions && (
+        <div className={`table-tree-row-action`}>
+          {(() => {
+            return col.actions(node, treeRowRef);
+          })()}
+        </div>
       )}
     </td>
   )

package/src/components/TableTree/Components/TableHead.tsx

@@ -8,18 +8,18 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   );
 
   return (
-    <thead>
-      <tr>
+    <thead className="ff-table-tree-head">
+      <tr className="ff-table-tree-row">
         {columnsData.map(({ name, width }) => (
-          <th key={name} style={{ width: width }}>
+          <th className="ff-table-tree-th" key={name} style={{ width: width }}>
             {name}
           </th>
         ))}
       </tr>
       {hasDefaultValues && (
-        <tr>
+        <tr className="ff-table-tree-row">
           {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
+            <td className="ff-table-tree-td" key={index}>
               {defaultValue && (
                 <span className="tree-table-default-content">
                   {defaultValue}

package/src/components/TableTree/Components/TableRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { TableRowProps } from '../types';
 import TableCell from './TableCell';
 
@@ -11,31 +11,34 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-    index,
     onAddConfirm,
     onAddCancel,
-  }: TableRowProps) => (
-    <tr
-      data-level={node.hierarchy}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-          index={index}
-          onAddConfirm={onAddConfirm}
-          onAddCancel={onAddCancel}
-        />
-      ))}
-    </tr>
-  )
+  }: TableRowProps) => {
+    const treeRowRef = useRef<HTMLTableRowElement | null>(null);
+    return (
+      <tr
+        data-level={node.hierarchy}
+        ref={treeRowRef}
+        className="ff-table-tree-row show"
+        onClick={(e) => onRowClick(e, node)}
+      >
+        {columnsData.map((col) => (
+          <TableCell
+            treeRowRef={treeRowRef}
+            key={col.name}
+            col={col}
+            node={node}
+            selected={selected}
+            select={select}
+            onCheckBoxChange={onCheckBoxChange}
+            onToggleExpand={onToggleExpand}
+            onAddConfirm={onAddConfirm}
+            onAddCancel={onAddCancel}
+          />
+        ))}
+      </tr>
+    );
+  }
 );
 
 export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -45,7 +45,7 @@
     width: 8px;
 
     &::after {
-      width: 18px;
+      width: 22px;
       left: -10px;
     }
   }
@@ -71,6 +71,18 @@
     top: -4px;
     z-index: -1;
   }
+
+  &.folder {
+    &.last-node::before {
+      height: 13px;
+    }
+  }
+}
+
+.tree-title-container {
+  .tree-table-space-block {
+    width: 16px;
+  }
 }
 
 .hidden {
@@ -105,7 +117,8 @@
 }
 
 .table-scrollable {
-  height: var(--table-height); /* Adjust height as needed */
+  height: var(--table-height);
+  /* Adjust height as needed */
   overflow-y: auto;
   position: relative;
 }
@@ -114,12 +127,6 @@
   overflow: scroll;
 }
 
-tr {
-  &:hover {
-    background-color: var(--hover-color);
-  }
-}
-
 .tree-table {
   // border: 1px solid #f1f1f1;
   table-layout: fixed;
@@ -127,92 +134,105 @@ tr {
   border-collapse: collapse;
   overflow: scroll;
 
-  thead {
+  .ff-table-tree-head {
     position: sticky;
     top: 0;
     z-index: 2;
   }
 
-  tr {
+  .ff-table-tree-row {
     background-color: var(--base-bg-color);
+
     .table-tree-row-action {
       display: none;
     }
 
-    // &:hover {
-    //   background-color: var(--hover-color);
-    //   td {
-    //     &:first-child {
-    //       background-color: var(--hover-color);
-    //     }
-    //   }
-
-    .table-tree-row-action {
+    .table-row-add-button {
       display: inline-flex;
-      align-items: center;
+      z-index: 9999;
     }
-  }
+    &:hover {
+      background-color: var(--hover-color);
 
-  &::after {
-    content: '';
-    display: block;
-    visibility: hidden;
-    clear: both;
-  }
-}
+      .ff-table-tree-td {
+        &:first-child {
+          background-color: var(--hover-color);
+        }
+      }
 
-th,
-td {
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
 
-th {
-  color: var(--brand-color);
-  background: var(--slider-table-color);
-  font-size: 13px;
-  width: 400px;
-  height: 32px;
-  box-sizing: border-box;
+    &::after {
+      content: '';
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+  }
 
-  &:first-child {
-    width: 400px !important;
-    position: sticky;
-    left: 0;
+  .ff-table-tree-th,
+  .ff-table-tree-td {
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
-}
 
-td {
-  font-size: 14px;
-  color: var(--brand-color);
-  height: 18px;
+  .ff-table-tree-th {
+    color: var(--table-header-text-color);
+    background: var(--border-color);
+    font-size: 12px;
+    font-weight: 600;
+    width: 400px;
+    height: 32px;
+    box-sizing: border-box;
+
+    &:first-child {
+      width: 400px !important;
+      position: sticky;
+      left: 0;
+      padding-left: 8px;
+    }
+  }
 
-  &:first-child {
-    overflow: initial;
-    position: sticky;
-    left: 0;
-    background-color: white;
+  .ff-table-tree-td {
+    font-size: 12px;
+    color: var(--nlp-color);
+    height: 18px;
 
-    &:hover {
-      background-color: var(--hover-color);
-    }
+    &:first-child {
+      overflow: initial;
+      position: sticky;
+      left: 0;
+      background-color: white;
 
-    .tree-table-default-content {
-      margin-left: 8px;
-    }
+      // &:hover {
+      //   background-color: var(--hover-color);
+      // }
+
+      .tree-table-default-content {
+        margin-left: 8px;
+      }
 
-    .tree-table-td-content {
-      padding-left: 4px;
+      .tree-table-td-content {
+        padding-left: 4px;
 
-      .tree-table-td-content-text {
-        margin-left: 4px;
+        .tree-table-td-content-text {
+          margin-left: 4px;
+        }
+      }
+      .tree-table-default-content {
+        font-weight: 700;
       }
     }
-  }
-  &.folder {
-    height: 28px;
+
+    &.folder {
+      height: 28px;
+    }
   }
 }
 

package/src/components/TableTree/TableTree.stories.tsx

@@ -5,6 +5,7 @@ import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
 import React, { useState } from 'react';
+import AddResourceButton from '../AddResourceButton/AddResourceButton';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -20,13 +21,76 @@ const colData = [
     accessor: 'name',
     width: '400px',
     isClickable: true,
-    actions: (row) => {
-      console.log('🚀 ~ row:', row);
+    actions: (row, treeRowRef) => {
+      console.log('🚀 ~ row:', row, treeRowRef);
+
       return [
         <Icon hoverEffect name="file" />,
         <Icon hoverEffect name="manage_apps" />,
         <Icon hoverEffect name="dropzone_icon" />,
         <Icon hoverEffect name="more" />,
+        <AddResourceButton
+          treeRowRef={treeRowRef}
+          directionalArrow={[
+            {
+              direction: 'top',
+              menuOptions: [
+                {
+                  label: 'Module',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+            {
+              direction: 'right',
+              menuOptions: [
+                {
+                  label: 'Sub Module',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Automation Script',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Manual Test Case',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Pre / Post Condition',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Authorization',
+                  value: 'add_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+            {
+              direction: 'down',
+              menuOptions: [
+                {
+                  label: 'Sub Module',
+                  value: 'sub_module',
+                  icon: 'module_icon',
+                  disable: false,
+                },
+              ],
+            },
+          ]}
+        />,
       ];
     },
     isTree: true,

package/src/components/TableTree/types.ts

@@ -4,13 +4,14 @@ import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
 declare type JSX = ReactNode | JSX.Element[] | string | null;
 
 export interface TableCellProps {
+  treeRowRef?: React.RefObject<any | null>;
   col: any;
   node: any;
   selected: string[];
   select: string | null;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
-  index: number;
+  index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
 }
@@ -45,7 +46,7 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: TreeNode) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
-  index: number;
+  index?: number;
   onAddConfirm?: (_name: string) => void;
   onAddCancel?: () => void;
 }
@@ -56,7 +57,7 @@ export interface Column {
   width: string;
   isClickable?: boolean;
   cell?: (row: any) => JSX;
-  actions?: (row: any) => JSX;
+  actions?: (row: any, treeRowRef?: React.RefObject<any | null>) => JSX;
   isTree?: boolean;
   defaultValue?: string;
   defaultActions?: () => JSX;

package/src/index.ts

@@ -32,6 +32,7 @@ import RadioGroup from './components/RadioGroup';
 import MiniModal from './components/MiniModal';
 import TableTree from './components/TableTree';
 import Tabs from './components/Tabs';
+import BrowserTabs from './components/BrowserTabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
@@ -211,6 +212,7 @@ export {
   HighlightText,
   TableTree,
   Tabs,
+  BrowserTabs,
   Checkbox,
   Search,
   DatePicker,

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -28,7 +28,7 @@ export const getTreeDetails = (
     case 'expand':
     case 'collapse':
       if (typeof index === 'number') {
-        treeDataList = [...oldData.slice(0, index + 1), ...newData];
+        treeDataList = [...oldData.slice(0, index), ...newData];
       } else {
         throw new Error(
           "Index is required for 'expand' or 'collapse' actions."