@qoretechnologies/reqore 0.30.14 → 0.30.16

package/src/components/ControlGroup/index.tsx

@@ -1,5 +1,12 @@
 import { debounce } from 'lodash';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css } from 'styled-components';
 import { ReqoreButton, ReqoreDrawer } from '../..';
@@ -56,13 +63,16 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
 
 export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   display: flex;
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto')};
+  flex: ${({ fluid, fixed }) =>
+    fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto'};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  justify-content: ${({ fluid, vertical }) => (vertical && fluid ? 'stretch' : undefined)};
+  justify-content: ${({ fluid, vertical }) =>
+    vertical && fluid ? 'stretch' : undefined};
   align-items: ${({ vertical, fluid, horizontalAlign }) =>
     vertical ? (fluid ? 'stretch' : horizontalAlign) : undefined};
   flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
-  gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
+  gap: ${({ gapSize, stack }) =>
+    !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
   flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
   // If the group has the fill prop,
@@ -85,16 +95,23 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
 
   > * {
     margin-top: ${({ fill, verticalAlign }) =>
-      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
+      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center')
+        ? 'auto'
+        : undefined};
     margin-bottom: ${({ fill, verticalAlign }) =>
-      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center') ? 'auto' : undefined};
-    margin-right: ${({ horizontalAlign }) => (horizontalAlign === 'center' ? 'auto' : undefined)};
+      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center')
+        ? 'auto'
+        : undefined};
+    margin-right: ${({ horizontalAlign }) =>
+      horizontalAlign === 'center' ? 'auto' : undefined};
 
     ${({ vertical }) =>
       vertical &&
       css`
         margin-left: ${({ horizontalAlign }) =>
-          horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
+          horizontalAlign === 'flex-end' || horizontalAlign === 'center'
+            ? 'auto'
+            : undefined};
       `}
   }
 
@@ -103,7 +120,9 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
     css`
       > *:first-child {
         margin-left: ${({ horizontalAlign }) =>
-          horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
+          horizontalAlign === 'flex-end' || horizontalAlign === 'center'
+            ? 'auto'
+            : undefined};
       }
     `}
 
@@ -149,9 +168,12 @@ const ReqoreControlGroup = memo(
     const isStack = stack || isInsideStackGroup;
     const isVertical = vertical || isInsideVerticalGroup;
 
-    const [overflowingChildren, setOverflowingChildren] = useState<number | undefined>(0);
+    const [overflowingChildren, setOverflowingChildren] = useState<
+      number | undefined
+    >(0);
     const [lastReSize, setLastReSize] = useState<number>(0);
-    const [isOverflownDialogOpen, setIsOverflownDialogOpen] = useState<boolean>(false);
+    const [isOverflownDialogOpen, setIsOverflownDialogOpen] =
+      useState<boolean>(false);
     const observer = useRef<ResizeObserver | null>(null);
     const ref = useRef<HTMLDivElement>(null);
 
@@ -210,7 +232,10 @@ const ReqoreControlGroup = memo(
 
     useEffect(() => {
       // Is the control group still overflowing?
-      if ((overflowingChildren || overflowingChildren === 0) && checkIfOverflowing()) {
+      if (
+        (overflowingChildren || overflowingChildren === 0) &&
+        checkIfOverflowing()
+      ) {
         setOverflowingChildren(overflowingChildren + 1);
       }
 
@@ -233,22 +258,33 @@ const ReqoreControlGroup = memo(
     const getIsLastInFirstGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === 0
-        : isFirstGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+        : isFirstGroup &&
+            (isLast || isLast !== false) &&
+            index === realChildCount - 1;
     };
     const getIsFirstInLastGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === realChildCount - 1
-        : isLastGroup && (isFirst || isFirst !== false) && childId === 1 && index === 0;
+        : isLastGroup &&
+            (isFirst || isFirst !== false) &&
+            childId === 1 &&
+            index === 0;
     };
     const getIsLastInLastGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === realChildCount - 1
-        : isLastGroup && (isLast || isLast !== false) && index === realChildCount - 1;
+        : isLastGroup &&
+            (isLast || isLast !== false) &&
+            index === realChildCount - 1;
     };
 
     const getBorderTopLeftRadius = (index: number): number | undefined => {
       const _isFirstGroup =
-        !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
+        !isInsideStackGroup || childrenCount === 1
+          ? true
+          : isChild
+          ? isFirstGroup
+          : index === 0;
 
       // If this is the first item
       if (_isFirstGroup && getIsFirst(index)) {
@@ -288,7 +324,11 @@ const ReqoreControlGroup = memo(
       // If this group is not vertical we need to style the very first item
       if (!isVertical || !isStack) {
         const _isFirstGroup =
-          !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
+          !isInsideStackGroup || childrenCount === 1
+            ? true
+            : isChild
+            ? isFirstGroup
+            : index === 0;
 
         if (_isFirstGroup && getIsFirst(index)) {
           return RADIUS_FROM_SIZE[size];
@@ -341,12 +381,26 @@ const ReqoreControlGroup = memo(
                   ? child.props.minimal
                   : minimal,
               size: child.props?.size || size,
-              flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
-              fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
-              fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
-              fill: child.props?.fill || child.props?.fill === false ? child.props.fixed : fill,
+              flat:
+                child.props?.flat || child.props?.flat === false
+                  ? child.props.flat
+                  : flat,
+              fluid:
+                child.props?.fluid || child.props?.fluid === false
+                  ? child.props.fluid
+                  : fluid,
+              fixed:
+                child.props?.fixed || child.props?.fixed === false
+                  ? child.props.fixed
+                  : fixed,
+              fill:
+                child.props?.fill || child.props?.fill === false
+                  ? child.props.fill
+                  : fill,
               stack:
-                child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
+                child.props?.stack || child.props?.stack === false
+                  ? child.props.stack
+                  : isStack,
               intent: child.props?.intent || intent,
               customTheme: child.props?.customTheme || customTheme,
             };
@@ -374,7 +428,9 @@ const ReqoreControlGroup = memo(
                 childId: index + 1,
 
                 isFirstGroup: isChild ? isFirstGroup : index === 0,
-                isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
+                isLastGroup: isChild
+                  ? isLastGroup
+                  : index === realChildCount - 1,
               };
             }
 
@@ -413,7 +469,9 @@ const ReqoreControlGroup = memo(
     // Get the overflown children
     const overflownChildren = useMemo(
       () =>
-        overflowingChildren ? React.Children.toArray(children).slice(0, overflowingChildren) : [],
+        overflowingChildren
+          ? React.Children.toArray(children).slice(0, overflowingChildren)
+          : [],
       [children, overflowingChildren]
     );
 
@@ -427,7 +485,9 @@ const ReqoreControlGroup = memo(
                 icon='MenuLine'
                 customTheme={customTheme}
                 tooltip={{
-                  content: `Show ${React.Children.count(overflownChildren)} hidden items`,
+                  content: `Show ${React.Children.count(
+                    overflownChildren
+                  )} hidden items`,
                 }}
                 fixed
                 active={isOverflownDialogOpen}

package/src/components/Dropdown/list.tsx

@@ -79,8 +79,6 @@ const ReqoreDropdownList = memo(
       }
     };
 
-    console.log('Filtered Items', filteredItems);
-
     return (
       <ReqoreMenu
         _insidePopover={!multiSelect}

package/src/components/Message/index.tsx

@@ -11,6 +11,8 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
+  IWithReqoreFixed,
+  IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreOpaque,
   IWithReqoreSize,
@@ -36,6 +38,8 @@ export interface IReqoreMessageProps
     IWithReqoreMinimal,
     IWithReqoreOpaque,
     IWithReqoreTooltip,
+    IWithReqoreFixed,
+    IWithReqoreFluid,
     React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   children: any;
@@ -73,6 +77,8 @@ const ReqoreMessage = memo(
         customTheme,
         iconColor,
         tooltip,
+        fixed,
+        fluid,
         ...rest
       },
       ref
@@ -132,7 +138,8 @@ const ReqoreMessage = memo(
             flat={flat}
             minimal={minimal}
             asMessage
-            fluid
+            fluid={fluid}
+            fixed={fixed}
             className={`${rest?.className || ''} reqore-message`}
             ref={targetRef}
             size={size}

package/src/components/MultiSelect/index.tsx

@@ -21,6 +21,8 @@ export interface IReqoreMultiSelectProps
   items?: TReqoreMultiSelectItem[];
   onItemClick?: (item: IReqoreDropdownItem) => void;
   onItemClickIcon?: IReqoreTagProps['rightIcon'];
+  onItemAdded?: (item: TReqoreMultiSelectItem) => void;
+  onItemRemoved?: (item: TReqoreMultiSelectItem) => void;
   canRemoveItems?: boolean;
   canCreateItems?: boolean;
   selectedItemEffect?: IReqoreEffect;
@@ -87,6 +89,8 @@ export const ReqoreMultiSelect = ({
   openOnMount,
   enterKeySelects,
   onItemClickIcon,
+  onItemAdded,
+  onItemRemoved,
   ...rest
 }: IReqoreMultiSelectProps) => {
   const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
@@ -114,8 +118,10 @@ export const ReqoreMultiSelect = ({
     (item: TReqoreMultiSelectItem): void => {
       if (value.includes(item.value)) {
         onValueChange(value.filter((v) => v !== item.value));
+        onItemRemoved?.(item.value);
       } else {
         onValueChange([...value, item.value]);
+        onItemAdded?.(item.value);
       }
     },
     [value]

package/src/components/Notifications/notification.tsx

@@ -15,7 +15,13 @@ import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
 import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
-import { IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque } from '../../types/global';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import {
+  IWithReqoreCustomTheme,
+  IWithReqoreEffect,
+  IWithReqoreMinimal,
+  IWithReqoreOpaque,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
@@ -26,7 +32,8 @@ export type IReqoreNotificationType = TReqoreIntent;
 export interface IReqoreNotificationProps
   extends IWithReqoreEffect,
     IWithReqoreMinimal,
-    IWithReqoreOpaque {
+    IWithReqoreOpaque,
+    IWithReqoreCustomTheme {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
@@ -65,13 +72,14 @@ const timeoutAnimation = keyframes`
 `;
 
 export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotificationStyle>`
-  min-width: ${({ fluid }) => (!fluid ? '200px' : undefined)};
-  max-width: ${({ fluid }) => (!fluid ? '450px' : undefined)};
+  min-width: ${({ fluid }) => (!fluid ? '30px' : undefined)};
+  max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
   border-radius: 5px;
   min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
-  flex: 0 0 auto;
-  overflow: auto;
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
+  overflow: hidden;
   position: relative;
   transition: all 0.2s ease-out;
 
@@ -229,10 +237,14 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       minimal,
       opaque,
       size = 'normal',
+      customTheme,
     },
     ref: any
   ) => {
     const [internalTimeout, setInternalTimeout] = useState(null);
+    const theme = useReqoreTheme('main', customTheme, type || intent, 'notifications');
+
+    console.log(theme, customTheme, intent);
 
     const transitions = useTransition(true, {
       from: { opacity: 0, transform: 'scale(0.9)' },
@@ -284,15 +296,17 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             style={styles}
             size={size}
             opaque={opaque}
+            theme={theme}
+            maxWidth='450px'
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>
                 <ReqoreIcon icon={icon || typeToIcon[type || intent]} margin={'both'} size={size} />
               </StyledIconWrapper>
             ) : null}
-            <StyledNotificationContentWrapper size={size}>
+            <StyledNotificationContentWrapper size={size} theme={theme}>
               {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
-              <StyledNotificationContent hasTitle={!!title} size={size}>
+              <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
                 {content}
               </StyledNotificationContent>
             </StyledNotificationContentWrapper>

package/src/components/Tag/index.tsx

@@ -32,7 +32,13 @@ import {
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect, TReqoreEffectColor, TReqoreHexColor } from '../Effect';
+import {
+  IReqoreEffect,
+  StyledEffect,
+  StyledTextEffect,
+  TReqoreEffectColor,
+  TReqoreHexColor,
+} from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
@@ -45,10 +51,10 @@ export interface IReqoreTagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
     IWithReqoreTooltip,
     IReqoreDisabled,
-    IWithReqoreEffect,
     IWithReqoreMinimal,
     IWithReqoreFluid,
-    IWithReqoreFixed {
+    IWithReqoreFixed,
+    IWithReqoreEffect {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -65,6 +71,8 @@ export interface IReqoreTagProps
   asBadge?: boolean;
   intent?: TReqoreIntent;
   wrap?: boolean;
+  labelEffect?: IReqoreEffect;
+  labelKeyEffect?: IReqoreEffect;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
@@ -170,7 +178,7 @@ const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
   min-height: 100%;
 `;
 
-const StyledTagContent = styled.span<{ size: TSizes }>`
+const StyledTagContent = styled(StyledTextEffect)<{ size: TSizes }>`
   padding: 4px ${({ size }) => PADDING_FROM_SIZE[size]}px;
   min-height: 100%;
   display: flex;
@@ -190,7 +198,6 @@ const StyledTagContent = styled.span<{ size: TSizes }>`
 `;
 
 const StyledTagContentKey = styled(StyledTagContent)`
-  font-weight: 800;
   flex: 1;
 
   ${({ wrap, hasWidth }) =>
@@ -250,6 +257,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       leftIconColor,
       rightIconColor,
       iconColor,
+      labelEffect,
+      labelKeyEffect,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -309,7 +318,17 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               />
             )}
             {labelKey && (
-              <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
+              <StyledTagContentKey
+                wrap={wrap}
+                hasWidth={!!width}
+                size={size}
+                effect={
+                  {
+                    weight: 'thick',
+                    ...labelKeyEffect,
+                  } as IReqoreEffect
+                }
+              >
                 {labelKey}
               </StyledTagContentKey>
             )}
@@ -325,7 +344,14 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasKey={!!labelKey}
           >
             {label || label === 0 ? (
-              <StyledTagContent size={size} wrap={wrap} hasWidth={!!width}>
+              <StyledTagContent
+                size={size}
+                wrap={wrap}
+                hasWidth={!!width}
+                effect={{
+                  ...labelEffect,
+                }}
+              >
                 {label}
               </StyledTagContent>
             ) : null}

package/src/components/Textarea/index.tsx

@@ -1,7 +1,7 @@
 import { rgba } from 'polished';
 import React, { forwardRef, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { RADIUS_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
@@ -41,6 +41,7 @@ export interface IReqoreTextareaProps
   cols?: number;
   rounded?: boolean;
   flat?: boolean;
+  fixed?: boolean;
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
 }
@@ -52,17 +53,23 @@ export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
 
 export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
   height: ${({ height }) => (height ? `${height}px` : undefined)};
+  min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
+  max-height: 100%;
   width: ${({ width, fluid }) => (fluid ? '100%' : width ? `${width}px` : 'auto')};
-  flex: ${({ fluid }) => (fluid ? '1' : undefined)};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   position: relative;
   overflow: hidden;
 `;
 
 export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   width: 100%;
+  max-width: 100%;
+  max-height: 100%;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   margin: 0;
   padding: 5px 7px;
+  min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
     minimal ? 'transparent' : rgba(theme.main, 0.1)};
@@ -130,6 +137,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       wrapperStyle,
       value,
       onChange,
+      fixed,
       ...rest
     }: IReqoreTextareaProps,
     ref
@@ -151,6 +159,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         width={width}
         height={height}
         fluid={fluid}
+        fixed={fixed}
         _size={size}
         theme={theme}
         style={wrapperStyle}

package/src/components/Tree/index.tsx

@@ -1,16 +1,17 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
 import { useContext, useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqoreTextarea } from '../..';
+import { ReqoreMessage, ReqorePanel, ReqoreTextarea } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { getLineCount, getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
+import { IReqorePanelProps } from '../Panel';
 import ReqoreTag from '../Tag';
 
-export interface IReqoreTreeProps extends IWithReqoreSize {
+export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   data: Object | Array<any>;
   mode?: 'tree' | 'copy';
   expanded?: boolean;
@@ -20,11 +21,6 @@ export interface IReqoreTreeProps extends IWithReqoreSize {
   showControls?: boolean;
 }
 
-const StyledTreeWrapper = styled.div`
-  display: flex;
-  flex-flow: column;
-`;
-
 export interface ITreeStyle {
   interactive?: boolean;
   theme: IReqoreTheme;
@@ -43,6 +39,7 @@ export const ReqoreTree = ({
   onItemClick,
   withLabelCopy,
   showControls = true,
+  ...rest
 }: IReqoreTreeProps) => {
   const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
   const [items, setItems] = useState({});
@@ -179,74 +176,62 @@ export const ReqoreTree = ({
   const lineCount: number = getLineCount(textData);
 
   return (
-    <StyledTreeWrapper className='reqore-tree'>
-      {showControls && (
-        <ReqoreControlGroup stack size={size} responsive>
-          {isDeep() && !allExpanded ? (
-            <ReqoreButton
-              flat
-              className='reqore-tree-expand-all'
-              icon='ArrowDownFill'
-              onClick={handleExpandClick}
-              key='expand-button'
-            >
-              Expand all
-            </ReqoreButton>
-          ) : null}
-          {isDeep() &&
-            (allExpanded || lodashSize(items) > 0 ? (
-              <ReqoreButton
-                flat
-                className='reqore-tree-collapse-all'
-                icon='ArrowUpFill'
-                onClick={handleCollapseClick}
-                key='collapse-button'
-              >
-                {' '}
-                Collapse all{' '}
-              </ReqoreButton>
-            ) : null)}
-          <ReqoreButton
-            flat
-            className='reqore-tree-show-types'
-            icon='CodeBoxFill'
-            active={_showTypes}
-            onClick={handleTypesClick}
-          >
-            Show types
-          </ReqoreButton>
-          <ReqoreButton
-            flat
-            className='reqore-tree-as-tree'
-            active={_mode === 'tree'}
-            onClick={handleTreeClick}
-            icon='Menu2Fill'
-          >
-            Tree View
-          </ReqoreButton>
-          <ReqoreButton
-            flat
-            className='reqore-tree-as-text'
-            onClick={handleCopyClick}
-            active={_mode === 'copy'}
-            icon='ClipboardFill'
-          >
-            Text View
-          </ReqoreButton>
-        </ReqoreControlGroup>
-      )}
-
-      {_mode === 'tree' && <div>{renderTree(data, true)}</div>}
+    <ReqorePanel
+      className='reqore-tree'
+      minimal
+      flat
+      transparent
+      size={size}
+      {...rest}
+      actions={
+        showControls
+          ? [
+              {
+                className: 'reqore-tree-expand-all',
+                icon: 'ArrowDownFill',
+                onClick: handleExpandClick,
+                show: !!(isDeep() && !allExpanded),
+                label: 'Expand all',
+              },
+              {
+                show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
+                className: 'reqore-tree-collapse-all',
+                icon: 'ArrowUpFill',
+                onClick: handleCollapseClick,
+
+                label: 'Collapse all',
+              },
+              {
+                className: 'reqore-tree-show-types',
+                icon: 'CodeBoxFill',
+                active: _showTypes,
+                onClick: handleTypesClick,
+                label: 'Show types',
+              },
+              {
+                className: _mode === 'tree' ? 'reqore-tree-as-text' : 'reqore-tree-as-tree',
+                onClick: _mode === 'tree' ? handleCopyClick : handleTreeClick,
+                icon: _mode === 'tree' ? 'Menu2Fill' : 'ClipboardFill',
+                label: _mode === 'tree' ? 'Text View' : 'Tree View',
+              },
+            ]
+          : undefined
+      }
+    >
+      {_mode === 'tree' && renderTree(data, true)}
 
       {_mode === 'copy' && (
         <ReqoreTextarea
           className='reqore-tree-textarea'
           id='tree-content'
           defaultValue={textData}
+          scaleWithContent
           size={size}
+          fluid
+          readOnly
           rows={lineCount > 20 ? 20 : lineCount}
         />
       )}
-    </StyledTreeWrapper>
+    </ReqorePanel>
   );
 };