pixel-react 1.10.10-4 → 1.10.12

package/lib/components/NLPInput/type.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+export interface SelectProps {
+    label?: string;
+    showLabel?: boolean;
+    optionsList: any[];
+    selectedOption?: Option;
+    onChange: (option: Option) => void;
+    errorMsg?: string;
+    className?: string;
+    optionZIndex?: number;
+    disabled?: boolean;
+    borderRadius?: boolean;
+    showBorder?: boolean;
+    required?: boolean;
+}
+export interface DrowdownPosition {
+    positionX: number;
+    positionY: number;
+    width: number;
+    fromBottom: number;
+}
+export interface SelectState {
+    isInputFocused: boolean;
+    iconColor: string;
+    isIconClick: boolean;
+    showOptions: boolean;
+    options: any[];
+    option: string;
+    dropdownPosition: DrowdownPosition;
+}
+export type SelectAction = {
+    type: 'FOCUS_INPUT';
+} | {
+    type: 'BLUR_INPUT';
+    payload: {
+        optionsList: Option[];
+        option: Option['projectId'];
+    };
+} | {
+    type: 'MOUSE_ENTER';
+} | {
+    type: 'MOUSE_LEAVE';
+} | {
+    type: 'UPDATE_DROPDOWN_POSITION';
+    payload: {
+        positionX: number;
+        positionY: number;
+        width: number;
+        fromBottom: number;
+    };
+} | {
+    type: 'UPDATE_OPTION';
+    payload: string;
+} | {
+    type: 'UPDATE_OPTION_LIST';
+    payload: any[];
+} | {
+    type: 'SHOW_ERROR';
+    payload: {
+        optionsList: any[];
+        option: Option['projectId'];
+    };
+};
+export interface Option {
+    displayName: string | ReactNode;
+    projectId: string;
+    nlpType: string;
+    platform: string;
+    disabled?: boolean;
+}

package/lib/components/Paper/Paper.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import './Paper.scss';
+declare const meta: Meta<typeof Paper>;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const PrimaryPaper: Story;
+export declare const PaperWithLowShadow: Story;
+export declare const PaperWithHighShadow: Story;
+export declare const PaperWithRounded: Story;
+export default meta;

package/lib/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+declare const meta: Meta<typeof RadioButton>;
+type Story = StoryObj<typeof RadioButton>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const UncheckedDisabled: Story;
+export declare const CheckedDisabled: Story;
+export declare const WithoutLabel: Story;
+export default meta;

package/lib/components/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+declare const meta: Meta<typeof RadioGroup>;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Controlled: Story;
+export declare const WithDisabledOption: Story;
+export declare const DisabledSelected: Story;
+export declare const WithToolTipIcon: Story;
+export default meta;

package/lib/components/Search/Search.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+declare const meta: Meta<typeof Search>;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;
+export default meta;

package/lib/components/Select/Select.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+declare const meta: Meta<typeof Select>;
+type Story = StoryObj<typeof Select>;
+export declare const Primary: Story;
+export declare const WithError: Story;
+export declare const WithoutLabel: Story;
+export declare const EmptyOptions: Story;
+export declare const Disable: Story;
+export declare const WithInitialValue: Story;
+export declare const OptionSelection: Story;
+export declare const CustomJSX: Story;
+export default meta;

package/lib/components/Select/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import { DropDownListProps } from './dropdownTypes';
+import './Dropdown.scss';
+declare const Dropdown: ({ onSelectBlur, onSelectOptionSelector, dropdownPosition, options, optionZIndex, inputRef, labelAccessor, }: DropDownListProps) => import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts

@@ -0,0 +1,17 @@
+import { DrowdownPosition, Option } from '../../types';
+export interface DropDownListProps {
+    onSelectBlur: () => void;
+    onSelectOptionSelector: (option: Option) => void;
+    dropdownPosition: DrowdownPosition;
+    options?: Option[];
+    optionZIndex?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    labelAccessor?: string;
+    valueAccessor?: string;
+}
+export declare const dropdownDefaultCSSData: {
+    margin: number;
+    optionHeight: number;
+    selectInputHeight: number;
+    dropDownWrapperPadding: number;
+};

package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SequentialConnectingBranch from './SequentialConnectingBranch';
+declare const meta: Meta<typeof SequentialConnectingBranch>;
+type Story = StoryObj<typeof SequentialConnectingBranch>;
+export declare const Primary: Story;
+export default meta;

package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts

@@ -0,0 +1,4 @@
+import './AddBrowserModal.scss';
+import { AddBrowserModalProps } from './types';
+declare const AddBrowserModal: import("react").ForwardRefExoticComponent<AddBrowserModalProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default AddBrowserModal;

package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts

@@ -0,0 +1,3 @@
+export interface AddBrowserModalProps {
+    onUpdateAddBrowser: () => void;
+}

package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts

@@ -0,0 +1,4 @@
+import './DatasetListModal.scss';
+import { DatasetListModalProps } from './types';
+declare const DatasetListModal: import("react").ForwardRefExoticComponent<DatasetListModalProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default DatasetListModal;

package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts

@@ -0,0 +1,3 @@
+export interface DatasetListModalProps {
+    onUpdateDatasetList: () => void;
+}

package/lib/components/StateDropdown/StateDropdown.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StateDropdown from './StateDropdown';
+declare const meta: Meta<typeof StateDropdown>;
+type Story = StoryObj<typeof StateDropdown>;
+export declare const Disable: Story;
+export declare const Review: Story;
+export declare const Reject: Story;
+export declare const Approved: Story;
+export declare const NewState: Story;
+export default meta;

package/lib/components/StatusButton/StatusButton.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StatusButton from './StatusButton';
+declare const meta: Meta<typeof StatusButton>;
+type Story = StoryObj<typeof StatusButton>;
+export declare const Passed: Story;
+export declare const Failed: Story;
+export declare const Running: Story;
+export declare const Terminated: Story;
+export declare const Skipped: Story;
+export declare const Warning: Story;
+export declare const PartiallyExecuted: Story;
+export declare const Aborted: Story;
+export declare const NotExecuted: Story;
+export default meta;

package/lib/components/Table/Table.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj, Meta } from '@storybook/react';
+import Table from './Table';
+declare const meta: Meta<typeof Table>;
+type Story = StoryObj<typeof Table>;
+export declare const Default: Story;
+export declare const PrimaryHeaderTextColor: Story;
+export declare const TableDataTextColor: Story;
+export declare const PageTable: Story;
+export declare const PrimaryHeader: Story;
+export declare const FixedHeaderWithBorder: Story;
+export declare const WithCheckBox: Story;
+export declare const TableWithNoData: Story;
+export default meta;

package/lib/components/TableTree/TableTree.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TableTree from './TableTree';
+import './TableTreeStories.scss';
+declare const meta: Meta<typeof TableTree>;
+type Story = StoryObj<typeof TableTree>;
+export declare const Default: Story;
+export default meta;

package/lib/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+type Story = StoryObj<typeof Tabs>;
+export declare const DefaultTabs: Story;
+export declare const CapsuleTabs: Story;
+export declare const TabsWithDisabledTab: Story;
+export declare const WithoutBorder: Story;
+export default meta;

package/lib/components/TextArea/Textarea.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Textarea from './Textarea';
+declare const meta: Meta<typeof Textarea>;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Toaster from './Toast';
+declare const meta: Meta<typeof Toaster>;
+type Story = StoryObj<typeof Toaster>;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/Toastify/Toastify.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toastify } from './Toastify';
+declare const meta: Meta<typeof Toastify>;
+type Story = StoryObj<typeof Toastify>;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Toggle from './Toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Checked: Story;
+export declare const SmallSize: Story;
+export declare const MediumSize: Story;
+export declare const DynamicIconAndSize: Story;
+export declare const Controlled: Story;

package/lib/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tooltip from './Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const Top: Story;
+export declare const Left: Story;
+export declare const Right: Story;
+export declare const TopStart: Story;
+export declare const TopEnd: Story;
+export declare const BottomStart: Story;
+export declare const BottomEnd: Story;
+export declare const TooltipWithIcon: Story;
+export default meta;

package/lib/components/Typography/Typography.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from './Typography';
+declare const meta: Meta<typeof Typography>;
+type Story = StoryObj<typeof Typography>;
+export declare const Docs: Story;
+export declare const Regular12px: Story;
+export declare const Medium12px: Story;
+export declare const SemiBold14px: Story;
+export declare const Bold14px: Story;
+export default meta;

package/lib/components/VariableInput/VariableInput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import VariableInput from './VariableInput';
+declare const meta: Meta<typeof VariableInput>;
+type Story = StoryObj<typeof VariableInput>;
+export declare const Default: Story;
+export default meta;

package/lib/index.esm.js

@@ -14567,7 +14567,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   }), document.body);
 });
 
-var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
+var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-tree-row-action .ff-icon-container {\n  height: 14px !important;\n  width: 14px !important;\n  padding: 2px 4px;\n}\n.tree-table .ff-table-tree-row .table-tree-row-action .ff-add-button-container {\n  height: 20px;\n  width: 22px;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n  cursor: pointer;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
 styleInject(css_248z$R);
 
 const TableHead = /*#__PURE__*/React__default.memo(({
@@ -14676,7 +14676,7 @@ const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   if (checkEmpty(parentSiblings)) {
     isLastNode = false;
     if (!isNaN(level)) {
-      siblingsArray = Array(level - 1).fill(true);
+      siblingsArray = Array(level).fill(true);
     }
   }
   return jsx("div", {
@@ -15012,15 +15012,15 @@ const TreeTable = ({
     if (expanding) return;
     setExpanding(node.key);
     onExpand?.(node, index);
-  }, [onExpand]);
+  }, [onExpand, expanding]);
   const handleCheckBoxChange = useCallback((e, node) => {
     if (expanding) return;
     onChange?.(e, node);
-  }, [onChange]);
+  }, [onChange, expanding]);
   const handleRowClick = useCallback((e, node) => {
     if (expanding) return;
     onClick?.(e, node);
-  }, [onClick]);
+  }, [onClick, expanding]);
   return jsx("div", {
     className: "tree-table-wrap",
     children: jsx("div", {