sbwb-ds 3.0.18 → 3.0.21

package/dist/src/presentation/components/atoms/Icon/index.d.ts

@@ -9,7 +9,7 @@ export interface IconProps {
     hoverColor?: string;
     width?: string;
     height?: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
     customStyles?: React.CSSProperties;
     title?: string;
     ariaLabel?: string;

package/dist/src/presentation/components/atoms/Select/index.d.ts

@@ -32,6 +32,7 @@ export type SelectProps = {
     fontSize?: string;
     fontWeight?: string;
     successMessage?: string;
+    maxHeightMenu?: string;
     /** @deprecated Use `onSelect` instead */
     handleOption?: (value: SelectOption | undefined) => void;
 };

package/dist/src/presentation/components/molecules/DataTable/Components/ActionButtonCell/index.d.ts

@@ -12,6 +12,7 @@ export interface ActionButtonCellProps {
     selectedOption?: SelectOption | null;
     onOptionSelect: (option: SelectOption | any) => void;
     prioritizeButtons?: (buttons: ActionButtonProps[]) => ActionButtonProps[];
+    menuLateralPadding?: string;
 }
-declare const ActionButtonCell: ({ buttonsProps, size, density, disabled, editable, selectedOption, onOptionSelect, prioritizeButtons, }: ActionButtonCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionButtonCell: ({ buttonsProps, size, density, disabled, editable, selectedOption, onOptionSelect, prioritizeButtons, menuLateralPadding, }: ActionButtonCellProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionButtonCell;

package/dist/src/presentation/components/molecules/MenuSelect/index.d.ts

@@ -18,6 +18,10 @@ export interface MenuSelectProps {
     topOffset?: number;
     bottomOffset?: number;
     truncateText?: boolean;
+    menuJustifyContent?: 'center' | 'flex-start';
+    tableActionButton?: boolean;
+    menuLateralPadding?: string;
+    menuOptionFlexDirection?: 'row' | 'column';
 }
 declare const MenuSelect: React.FC<MenuSelectProps>;
 export default MenuSelect;

package/dist/src/presentation/components/molecules/MenuSelect/styles.d.ts

@@ -17,6 +17,9 @@ interface OptionProps {
     truncateText?: boolean;
     disabled?: boolean;
     iconName?: string;
+    menuJustifyContent: 'center' | 'flex-start';
+    tableActionButton?: boolean;
+    menuOptionFlexDirection?: 'row' | 'column';
 }
 export declare const Option: import("styled-components").StyledComponent<"li", any, OptionProps, never>;
 export declare const SectionOptions: import("styled-components").StyledComponent<"li", any, EmptyOptionProps, never>;
@@ -30,6 +33,7 @@ interface ContainerProps {
     highlightedIndex?: boolean;
     disabled?: boolean;
     size?: 'Small' | 'Medium';
+    menuLateralPadding?: string;
 }
 export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
 interface IconContainerProps {

package/dist/src/presentation/components/molecules/Tree/index.d.ts

@@ -24,6 +24,7 @@ export interface TreeProps {
     width?: string;
     height?: string;
     flex?: string;
+    toggleOnFolderClick?: boolean;
 }
 export interface TreeListProps {
     nodes: TreeItem[];
@@ -37,6 +38,7 @@ export interface TreeListProps {
     width?: string;
     height?: string;
     flex?: string;
+    toggleOnFolderClick?: boolean;
 }
 declare const TreeList: React.FC<TreeListProps>;
 export default TreeList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.0.18",
+  "version": "3.0.21",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/atoms/Button/styles.ts

@@ -34,6 +34,8 @@ export const Button = styled.button<ButtonProps>`
   padding: ${({ size }) => {
     if (size === 'Small') {
       return `0 ${sg.spacings.spacingInline.spacingInlineAnt}`;
+    } else if (size === 'Extra Small') {
+      return sg.spacings.spacingInline.spacingInlineAnt;
     } else {
       return `0 ${sg.spacings.spacingInline.spacingInlineSm}`;
     }
@@ -124,7 +126,12 @@ export const Button = styled.button<ButtonProps>`
       return sg.spacings.spacingStack.spacingStackXl;
     }
   }};
-  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+  border-radius: ${({ size }) => {
+    if (size !== 'Extra Small') {
+      return sg.borders.borderRadius.borderRadiusSm;
+    }
+    return sg.borders.borderRadius.borderRadiusXs;
+  }};
   & > svg {
     width: ${({ size }) => {
       if (size === 'Small') {

package/src/presentation/components/atoms/Icon/index.tsx

@@ -10,7 +10,7 @@ export interface IconProps {
   hoverColor?: string;
   width?: string;
   height?: string;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent) => void;
   customStyles?: React.CSSProperties;
   title?: string;
   ariaLabel?: string;

package/src/presentation/components/atoms/Input/styles.ts

@@ -213,12 +213,6 @@ export const InputShape = styled.label<InputShapeProps>`
           ${sg.colors.feedbackColors.colorFeedbackSuccess};
         background-color: ${sg.colors.brandColors.colorBrandSeSoft};
       `;
-    } else if (!success && !disabled) {
-      return css`
-        border: ${sg.borders.borderWidth.borderWidthThinner} solid
-          ${sg.colors.neutralColors.colorNeutralCleanest};
-        background-color: ${sg.colors.neutralColors.colorNeutralSnow};
-      `;
     }
   }}
 
@@ -318,9 +312,9 @@ export const Input = styled.input<InputProps>`
   font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
   font-size: ${({ size, variant }) => {
     if (variant === 'table') {
-      if (size === 'ExtraSmall') return '10px';
-      if (size === 'Small') return '10px';
-      return '12px';
+      if (size === 'ExtraSmall') return sg.fonts.fontSize.fontSizeBodySm;
+      if (size === 'Small') return sg.fonts.fontSize.fontSizeBodySm;
+      return sg.fonts.fontSize.fontSizeBodyMd;
     } else {
       if (size === 'ExtraSmall') return sg.fonts.fontSize.fontSizeBodyMd;
       if (size === 'Small') return sg.fonts.fontSize.fontSizeBodyMd;
@@ -338,9 +332,9 @@ export const Input = styled.input<InputProps>`
     font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
     font-size: ${({ size, variant }) => {
       if (variant === 'table') {
-        if (size === 'ExtraSmall') return '10px';
-        if (size === 'Small') return '12px';
-        return '14px';
+        if (size === 'ExtraSmall' || size === 'Small')
+          return sg.fonts.fontSize.fontSizeBodySm;
+        return sg.fonts.fontSize.fontSizeBodyMd;
       } else {
         if (size === 'ExtraSmall') return sg.fonts.fontSize.fontSizeBodyMd;
         if (size === 'Small') return sg.fonts.fontSize.fontSizeBodyMd;

package/src/presentation/components/atoms/Select/Select.stories.tsx

@@ -81,6 +81,9 @@ export default {
       description:
         'Bottom offset of the select. (A number, do not input sizes in (px, rem, etc)',
     },
+    maxHeightMenu: {
+      description: 'Max height of the menu.',
+    },
   },
 };
 

package/src/presentation/components/atoms/Select/index.tsx

@@ -47,6 +47,7 @@ export type SelectProps = {
   fontSize?: string;
   fontWeight?: string;
   successMessage?: string;
+  maxHeightMenu?: string;
 
   /** @deprecated Use `onSelect` instead */
   handleOption?: (value: SelectOption | undefined) => void;
@@ -88,6 +89,7 @@ const Select: React.FC<SelectProps> = forwardRef<
       fontSize,
       fontWeight = '400',
       successMessage,
+      maxHeightMenu,
     },
     ref
   ) => {
@@ -329,6 +331,7 @@ const Select: React.FC<SelectProps> = forwardRef<
                   .width.toString()}px`}
                 bottomOffset={bottomOffset}
                 topOffset={topOffset}
+                maxHeightMenu={maxHeightMenu}
               />
             )}
           </C.Container>

package/src/presentation/components/molecules/Autocomplete/index.tsx

@@ -2,7 +2,7 @@ import { Icons } from '../../../../main/helpers/functions/icons';
 import { SelectOption } from '../../../../models/select-option';
 import * as C from './styles';
 import { useAutocomplete } from './hooks/useAutocomplete';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import MenuSelect from '../MenuSelect';
 import MenuMultiSelect from '../../atoms/MenuMultiSelect';
 import Tag from '../../atoms/Tag';
@@ -144,6 +144,10 @@ const Autocomplete: React.FC<AutocompleteProps> = forwardRef<
 
     const hasError = !!errorMessage;
 
+    useEffect(() => {
+      setOptionAutocomplete(options);
+    }, [options]);
+
     return (
       <C.AutocompleteContainer
         ref={autocompleteContainerRef}

package/src/presentation/components/molecules/DataTable/Components/ActionButtonCell/index.tsx

@@ -5,6 +5,7 @@ import ActionButton, {
 import { DraggableHandle, MenuSelect } from '../../../../atoms';
 import { useRef, useState, useEffect } from 'react';
 import { SelectOption } from '../../../../../../models/select-option'; // Verifique o caminho de importação
+import { sg } from '../../../../../styles';
 
 interface ActionButtonProps extends ActionButtonElementProps {
   isDragHandle?: boolean;
@@ -19,6 +20,7 @@ export interface ActionButtonCellProps {
   selectedOption?: SelectOption | null;
   onOptionSelect: (option: SelectOption | any) => void;
   prioritizeButtons?: (buttons: ActionButtonProps[]) => ActionButtonProps[];
+  menuLateralPadding?: string;
 }
 
 const ActionButtonCell = ({
@@ -30,6 +32,7 @@ const ActionButtonCell = ({
   selectedOption,
   onOptionSelect,
   prioritizeButtons,
+  menuLateralPadding,
 }: ActionButtonCellProps) => {
   const divRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -77,18 +80,20 @@ const ActionButtonCell = ({
     label: button.tooltipProps?.label || `Action ${index + 3}`,
     value: button.iconName || `Action ${index + 3}`,
     render: () => (
-      <ActionButton
-        buttonType="secondary"
-        iconName={button.iconName}
-        selectedIconName={button.selectedIconName}
-        onClick={() => handleButtonClick(button.iconName)}
-        disabled={disabled}
-        size={size}
-        isSelected={button.isSelected}
-        data-icon-name={button.iconName}
-        // selectVariant={true}
-        // selectVariantLabel={button.selectVariantLabel || `Action ${index + 3}`}
-      />
+      <div style={{ paddingRight: sg.spacings.spacingStack.spacingStackNano }}>
+        <ActionButton
+          buttonType="secondary"
+          iconName={button.iconName}
+          selectedIconName={button.selectedIconName}
+          onClick={() => handleButtonClick(button.iconName)}
+          disabled={disabled}
+          size={size}
+          isSelected={button.isSelected}
+          data-icon-name={button.iconName}
+          // selectVariant={true}
+          // selectVariantLabel={button.selectVariantLabel || `Action ${index + 3}`}
+        />
+      </div>
     ),
   }));
 
@@ -141,6 +146,10 @@ const ActionButtonCell = ({
               selectOption={handleOptionSelected}
               optionsSelect={moreOptions}
               menuIsOpen={isOpen}
+              menuJustifyContent="center"
+              tableActionButton
+              menuLateralPadding={menuLateralPadding}
+              menuOptionFlexDirection="row"
             />
           )}
         </>

package/src/presentation/components/molecules/DataTable/Components/TableCell/TableCell.stories.tsx

@@ -7,6 +7,8 @@ import TableSelect from '../../../../atoms/Select';
 import TableMultiSelect from '../../../../molecules/MultiSelect';
 import TableRow from '../TableRow';
 import { error } from 'echarts/types/src/util/log.js';
+import { Container } from '../../../../atoms';
+import { sg } from '../../../../../styles';
 
 export default {
   title: 'Table/TableCell',
@@ -108,6 +110,10 @@ export default {
       control: 'text',
       description: 'Padding of the cell.',
     },
+    maxHeightMenu: {
+      control: 'text',
+      description: 'Max height of the menu.',
+    },
   },
 };
 
@@ -606,27 +612,36 @@ export const SuccessCell = SuccessCellTemplate.bind({});
 
 const DropdownCellTemplate = (args) => {
   const options = [
-    { label: 'IntegriDutos', value: '1' },
-    { label: 'Busca em estoque', value: '2' },
-    { label: 'Metocean', value: '3' },
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+    { label: 'Option 4', value: '4' },
+    { label: 'Option 5', value: '5' },
+    { label: 'Option 6', value: '6' },
+    { label: 'Option 7', value: '7' },
+    { label: 'Option 8', value: '8' },
+    { label: 'Option 9', value: '9' },
+    { label: 'Option 10', value: '10' },
   ];
   const [selectedOption, setSelectedOption] = useState<
     SelectOption | undefined
   >(undefined);
+
   return (
-    <div style={{ padding: '100px' }}>
+    <div style={{ padding: '100px', height: '100px' }}>
       <TableSelect
         options={options}
         value={selectedOption}
         onSelect={setSelectedOption}
         variant="table"
-        width="124px"
+        width="143px"
         disabled={args.disabled}
         placeholder="Text"
         errorMessage={args.errorMessage}
         successMessage={args.successMessage}
         size={args.size === 'large' ? 'Medium' : 'Small'}
         tableDensity={args.density}
+        {...args}
       />
     </div>
   );
@@ -637,4 +652,72 @@ export const DropdownCell = DropdownCellTemplate.bind({});
 DropdownCell.args = {
   errorMessage: '',
   successMessage: '',
+  maxHeightMenu: '180px',
+};
+
+const DropdownCellTemplateIcons = (args) => {
+  const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+    { label: 'Option 4', value: '4' },
+    { label: 'Option 5', value: '5' },
+    { label: 'Option 6', value: '6' },
+    { label: 'Option 7', value: '7' },
+    { label: 'Option 8', value: '8' },
+    { label: 'Option 9', value: '9' },
+    { label: 'Option 10', value: '10' },
+  ];
+  const [selectedOption, setSelectedOption] = useState<
+    SelectOption | undefined
+  >(undefined);
+
+  return (
+    <div style={{ padding: '100px', height: '100px' }}>
+      <Container direction="row" width="104px">
+        <ActionButtonCell
+          onOptionSelect={setSelectedOption}
+          size="Small"
+          buttonsProps={[
+            {
+              iconName: 'EditAnt',
+              iconColor: sg.colors.neutralColors.colorNeutralCloudy,
+              buttonType: 'secondary',
+            },
+            {
+              iconName: 'DownloadAnt',
+              iconColor: sg.colors.neutralColors.colorNeutralCloudy,
+              buttonType: 'secondary',
+            },
+            {
+              iconName: 'DeleteFILL0Sm',
+              iconColor: sg.colors.neutralColors.colorNeutralCloudy,
+              buttonType: 'secondary',
+              tooltipProps: { label: 'Excluir' },
+            },
+            {
+              iconName: 'AttachFileSm',
+              iconColor: sg.colors.neutralColors.colorNeutralCloudy,
+              buttonType: 'secondary',
+              tooltipProps: { label: 'Anexar' },
+            },
+            {
+              iconName: 'VisibilitySm',
+              iconColor: sg.colors.neutralColors.colorNeutralCloudy,
+              buttonType: 'secondary',
+              tooltipProps: { label: 'Visualizar' },
+            },
+          ]}
+          {...args}
+        />
+      </Container>
+    </div>
+  );
+};
+
+export const DropdownCellIcons = DropdownCellTemplateIcons.bind({});
+
+DropdownCellIcons.args = {
+  menuLateralPadding: '0',
+  menuJustifyContent: 'flex-start',
 };

package/src/presentation/components/molecules/MenuSelect/index.tsx

@@ -25,6 +25,10 @@ export interface MenuSelectProps {
   topOffset?: number;
   bottomOffset?: number;
   truncateText?: boolean;
+  menuJustifyContent?: 'center' | 'flex-start';
+  tableActionButton?: boolean;
+  menuLateralPadding?: string;
+  menuOptionFlexDirection?: 'row' | 'column';
 }
 
 const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
@@ -50,6 +54,10 @@ const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
       topOffset = 0,
       bottomOffset = 0,
       truncateText = true,
+      menuJustifyContent = 'flex-start',
+      tableActionButton,
+      menuLateralPadding = '8px',
+      menuOptionFlexDirection = 'column',
     },
     ref
   ) => {
@@ -135,6 +143,7 @@ const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
                   onMouseEnter={() => setHighlightedIndex(index)}
                   disabled={option.disabled}
                   size={size}
+                  menuLateralPadding={menuLateralPadding}
                 >
                   {iconPosition === 'left' && (
                     <C.IconContainer
@@ -154,6 +163,8 @@ const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
                     </C.IconContainer>
                   )}
                   <C.Option
+                    menuOptionFlexDirection={menuOptionFlexDirection}
+                    menuJustifyContent={menuJustifyContent}
                     iconName={iconName}
                     isOptionSelected={isOptionSelected(option)}
                     highlightedIndex={index === highlightedIndex}
@@ -163,6 +174,7 @@ const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
                     optionValue={option.value}
                     disabled={option.disabled}
                     truncateText={truncateText}
+                    tableActionButton={tableActionButton}
                   >
                     <C.ContentHighlightedText
                       truncateText={
@@ -173,13 +185,7 @@ const MenuSelect: React.FC<MenuSelectProps> = forwardRef<
                       {React.isValidElement(option.label) ? (
                         <p title={getLabelText(option.label)}>{option.label}</p>
                       ) : (
-                        <p
-                          title={labelText}
-                          style={{
-                            paddingLeft:
-                              sg.spacings.spacingStack.spacingStackNano,
-                          }}
-                        >
+                        <p title={labelText}>
                           {labelText.substring(0, indexMatch)}
                           <C.HighlightedText size={size}>
                             {labelText.substring(

package/src/presentation/components/molecules/MenuSelect/styles.ts

@@ -20,6 +20,7 @@ export const Options = styled.ul<OptionsProps>`
   border-radius: ${sg.borders.borderRadius.borderRadiusSm};
   box-shadow: ${sg.shadows.shadowLevelNear};
   width: ${({ width }) => width};
+  height: ${({ maxHeight }) => maxHeight};
   max-height: ${({ maxHeight }) => maxHeight};
   z-index: 1000;
   background-color: ${sg.colors.backgroundColors.colorBackgroundSnow};
@@ -65,14 +66,19 @@ interface OptionProps {
   truncateText?: boolean;
   disabled?: boolean;
   iconName?: string;
+  menuJustifyContent: 'center' | 'flex-start';
+  tableActionButton?: boolean;
+  menuOptionFlexDirection?: 'row' | 'column';
 }
 
 export const Option = styled.li<OptionProps>`
   ${resetStyles}
-  width: 100%;
   display: flex;
-  align-items: start;
-  justify-content: center;
+  flex: 2;
+  flex-direction: ${({ menuOptionFlexDirection }) => menuOptionFlexDirection};
+  align-items: ${({ menuJustifyContent }) => menuJustifyContent};
+  justify-content: ${({ tableActionButton }) =>
+    tableActionButton ? 'flex-start' : 'center'};
   font-size: ${({ size }) =>
     size === 'Small'
       ? sg.fonts.fontSize.fontSizeBodyMd
@@ -108,7 +114,6 @@ export const Option = styled.li<OptionProps>`
   ${({ hasDescription }) =>
     hasDescription &&
     css`
-      margin: ${sg.spacings.spacingStack.spacingStackXs};
       line-height: ${sg.fonts.lineHeight.lineHeightMd(
         sg.fonts.fontSize.fontSizeBodyMd
       )};
@@ -170,10 +175,7 @@ interface ContentHighlightedTextProps {
 export const ContentHighlightedText = styled.div<ContentHighlightedTextProps>`
   ${resetStyles}
   display: flex;
-  width: fit-content;
   font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
-  justify-content: center;
-  align-items: center;
 
   & > p {
     width: 100%;
@@ -195,16 +197,17 @@ interface ContainerProps {
   highlightedIndex?: boolean;
   disabled?: boolean;
   size?: 'Small' | 'Medium';
+  menuLateralPadding?: string;
 }
 
 export const Container = styled.div<ContainerProps>`
   ${resetStyles}
   display: flex;
-  width: calc(100% - 16px);
-  justify-content: center;
-  align-items: center;
   flex-direction: row;
-  padding: ${() => `0 ${sg.spacings.spacingInline.spacingInlineXs}`};
+  padding: ${({ menuLateralPadding }) =>
+    menuLateralPadding
+      ? `0 ${menuLateralPadding}`
+      : `0 ${sg.spacings.spacingInline.spacingInlineXs}`};
   margin: 0 ${sg.spacings.spacingInline.spacingInlineXs};
   cursor: ${({ isOptionSelected, disabled }) =>
     isOptionSelected || disabled ? 'default' : 'pointer'};

package/src/presentation/components/molecules/Tree/index.tsx

@@ -49,6 +49,7 @@ export interface TreeProps {
   width?: string;
   height?: string;
   flex?: string;
+  toggleOnFolderClick?: boolean;
 }
 
 const Tree: React.FC<TreeProps> = React.memo(
@@ -67,6 +68,7 @@ const Tree: React.FC<TreeProps> = React.memo(
     width,
     height,
     flex,
+    toggleOnFolderClick = true,
   }) => {
     const {
       id,
@@ -132,7 +134,7 @@ const Tree: React.FC<TreeProps> = React.memo(
           onClickNode?.(node);
         }
 
-        if (!isLeaf) {
+        if (!isLeaf && toggleOnFolderClick) {
           handleToggle();
         }
       }
@@ -146,6 +148,7 @@ const Tree: React.FC<TreeProps> = React.memo(
       onClickNode,
       handleToggle,
       onFocus,
+      toggleOnFolderClick, // Adicionada na lista de dependências
     ]);
 
     const getIconColor = useCallback(
@@ -170,6 +173,16 @@ const Tree: React.FC<TreeProps> = React.memo(
       []
     );
 
+    const handleArrowClick = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!disabled && !isLeaf) {
+          handleToggle();
+        }
+      },
+      [disabled, isLeaf, handleToggle]
+    );
+
     const getIconColorArrow = useCallback(
       (
         isSelected: boolean,
@@ -234,6 +247,7 @@ const Tree: React.FC<TreeProps> = React.memo(
               customStyles={disabled ? { cursor: 'default' } : {}}
               width="16px"
               height="16px"
+              onClick={handleArrowClick}
             />
             <Icon
               iconName={folderIconName()}
@@ -277,6 +291,7 @@ const Tree: React.FC<TreeProps> = React.memo(
       isFocused,
       childLeafSelected,
       iconProps,
+      handleArrowClick,
     ]);
 
     useEffect(() => {
@@ -364,6 +379,7 @@ const Tree: React.FC<TreeProps> = React.memo(
                 width={width}
                 height={height}
                 flex={flex}
+                toggleOnFolderClick={toggleOnFolderClick}
               />
             ))}
           </C.Content>
@@ -373,6 +389,8 @@ const Tree: React.FC<TreeProps> = React.memo(
   }
 );
 
+Tree.displayName = 'Tree';
+
 export interface TreeListProps {
   nodes: TreeItem[];
   checkboxActive: boolean;
@@ -385,6 +403,7 @@ export interface TreeListProps {
   width?: string;
   height?: string;
   flex?: string;
+  toggleOnFolderClick?: boolean;
 }
 
 const TreeList: React.FC<TreeListProps> = ({
@@ -399,6 +418,7 @@ const TreeList: React.FC<TreeListProps> = ({
   width = '152px',
   height = '100%',
   flex,
+  toggleOnFolderClick = true,
 }) => {
   const [focusedId, setFocusedId] = useState<string | null>(null);
 
@@ -425,10 +445,13 @@ const TreeList: React.FC<TreeListProps> = ({
           width={width}
           height={height}
           flex={flex}
+          toggleOnFolderClick={toggleOnFolderClick}
         />
       ))}
     </>
   );
 };
 
+TreeList.displayName = 'TreeList';
+
 export default TreeList;