@qoretechnologies/reqore 0.25.8 → 0.25.10

package/src/components/Dropdown/index.tsx

@@ -1,33 +1,31 @@
 import { size } from 'lodash';
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { ReqorePopover } from '../..';
 import { IPopoverOptions } from '../../hooks/usePopover';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { IReqoreButtonProps } from '../Button';
-import { IReqoreDropdownItemProps } from './item';
-import ReqoreDropdownList from './list';
+import ReqoreDropdownList, { IReqoreDropdownItem, TDropdownItemOnClick } from './list';
 
-export interface IReqoreDropdownProps<T> extends IPopoverOptions {
-  items?: IReqoreDropdownItemProps[];
+export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
+  items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
   listStyle?: React.CSSProperties;
   component?: any;
-  componentProps?: T;
   filterable?: boolean;
   label?: any;
   children?: any;
-  width?: string;
+  listWidth?: string;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
   caretPosition?: 'left' | 'right';
   isDefaultOpen?: boolean;
+  onItemSelect?: TDropdownItemOnClick;
 }
 
-const ReqoreDropdown = <T extends unknown = IReqoreButtonProps>({
+function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   items,
   component,
-  componentProps,
   label,
   children,
   multiSelect,
@@ -40,43 +38,71 @@ const ReqoreDropdown = <T extends unknown = IReqoreButtonProps>({
   rightIcon,
   caretPosition = 'left',
   isDefaultOpen = false,
+  onItemSelect,
+  closeOnOutsideClick,
+  blur,
+  closeOnAnyClick,
+  content,
+  delay,
+  maxHeight,
+  maxWidth,
+  noArrow = true,
+  opaque,
+  openOnMount,
+  show,
+  targetElement,
+  useTargetWidth,
+  listWidth,
   ...rest
-}: IReqoreDropdownProps<T>) => {
+}: IReqoreDropdownProps & T) {
+  const componentProps = useMemo(
+    () =>
+      ({
+        ...rest,
+        icon: caretPosition === 'left' ? icon || 'ArrowDownSFill' : rightIcon,
+        rightIcon: caretPosition === 'right' ? icon || 'ArrowDownSFill' : rightIcon,
+        style: buttonStyle,
+        disabled: !size(items),
+        className: `${(rest as any)?.className || ''} reqore-dropdown-control`,
+      } as T),
+    [items, icon, rightIcon, buttonStyle, caretPosition, rest]
+  );
+
+  const popoverContent = useMemo(() => {
+    return size(items) ? (
+      <ReqoreDropdownList
+        multiSelect={multiSelect}
+        listStyle={listStyle}
+        width={useTargetWidth ? '100%' : listWidth}
+        items={items}
+        filterable={filterable}
+        onItemSelect={onItemSelect}
+      />
+    ) : undefined;
+  }, [items]);
+
   return (
     <ReqorePopover
-      {...rest}
+      closeOnOutsideClick={closeOnOutsideClick}
+      blur={blur}
+      closeOnAnyClick={closeOnAnyClick}
+      delay={delay}
+      maxHeight={maxHeight}
+      maxWidth={maxWidth}
+      noArrow={noArrow}
+      opaque={opaque}
+      useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
-      componentProps={
-        {
-          icon: caretPosition === 'left' ? icon || 'ArrowDownSFill' : rightIcon,
-          rightIcon: caretPosition === 'right' ? icon || 'ArrowDownSFill' : rightIcon,
-          style: buttonStyle,
-          disabled: !size(items),
-          ...rest,
-          ...((componentProps || {}) as Object),
-          className: `${(componentProps as any)?.className || ''} reqore-dropdown-control`,
-        } as T
-      }
+      componentProps={componentProps}
       noWrapper
       placement={placement || 'bottom-start'}
       handler={handler || 'click'}
       openOnMount={isDefaultOpen}
-      content={
-        size(items) ? (
-          <ReqoreDropdownList
-            multiSelect={multiSelect}
-            listStyle={listStyle}
-            width={rest.useTargetWidth ? '100%' : rest.width}
-            items={items}
-            filterable={filterable}
-          />
-        ) : undefined
-      }
-      noArrow
+      content={popoverContent}
     >
       {children || label}
     </ReqorePopover>
   );
-};
+}
 
-export default ReqoreDropdown;
+export default memo(ReqoreDropdown) as typeof ReqoreDropdown;

package/src/components/Dropdown/item.tsx

@@ -1,13 +1,10 @@
 import { ReqoreMenuDivider, ReqoreMenuItem } from '../..';
 import { IReqoreMenuDividerProps } from '../Menu/divider';
-import { IReqoreMenuItemProps } from '../Menu/item';
+import { IReqoreDropdownItem } from './list';
 
-export interface IReqoreDropdownItemProps extends IReqoreMenuItemProps {}
+export interface IReqoreDropdownItemProps extends Omit<IReqoreDropdownItem, 'value' | 'onClick'> {}
 
-export const ReqoreDropdownItem = ({
-  children,
-  ...rest
-}: IReqoreDropdownItemProps) => (
+export const ReqoreDropdownItem = ({ children, ...rest }: IReqoreDropdownItemProps) => (
   <ReqoreMenuItem {...rest} rightIcon={rest.selected ? 'CheckLine' : undefined}>
     {children}
   </ReqoreMenuItem>

package/src/components/Dropdown/list.tsx

@@ -1,80 +1,106 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { IReqoreComponent } from '../../types/global';
 import ReqoreInput from '../Input';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { ReqoreSpacer } from '../Spacer';
 
+export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
+export interface IReqoreDropdownItem extends Omit<IReqoreMenuItemProps, 'onClick'> {
+  value: any;
+  label?: string;
+  onClick?: TDropdownItemOnClick;
+}
+
 export interface IReqoreDropdownListProps extends IReqoreComponent {
-  items?: IReqoreMenuItemProps[];
+  items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   listStyle?: React.CSSProperties;
   width?: string;
   height?: string;
   filterable?: boolean;
+  onItemSelect?: TDropdownItemOnClick;
 }
 
-const ReqoreDropdownList = ({
-  items,
-  multiSelect,
-  listStyle,
-  _popoverId,
-  filterable,
-  width,
-  height,
-}: IReqoreDropdownListProps) => {
-  const [_items, setItems] = useState<IReqoreMenuItemProps[]>(items);
-  const [query, setQuery] = useState<string>('');
+const ReqoreDropdownList = memo(
+  ({
+    items,
+    multiSelect,
+    listStyle,
+    _popoverId,
+    filterable,
+    width,
+    height,
+    onItemSelect,
+  }: IReqoreDropdownListProps) => {
+    const [_items, setItems] = useState<IReqoreDropdownItem[]>(items);
+    const [query, setQuery] = useState<string>('');
 
-  useEffect(() => {
-    setItems(items);
-  }, [items]);
+    useEffect(() => {
+      setItems(items);
+    }, [items]);
 
-  const filteredItems: IReqoreMenuItemProps[] = useMemo(() => {
-    if (!filterable || query === '') {
-      return _items;
-    }
+    const filteredItems: IReqoreDropdownItem[] = useMemo(() => {
+      if (!filterable || query === '') {
+        return _items;
+      }
 
-    return _items.filter((item) => {
-      const text = item.label || item.children;
+      return _items.filter((item) => {
+        const text = item.label || item.value || item.children;
 
-      if (!text) {
-        return false;
-      }
+        if (!text) {
+          return false;
+        }
 
-      return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
-    });
-  }, [items, query, _items]);
+        return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+      });
+    }, [items, query, _items]);
 
-  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
-  };
+    const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);
+    };
+
+    const handleItemClick = (item: IReqoreDropdownItem): void => {
+      if (item.onClick) {
+        item.onClick(item);
+      }
+
+      if (onItemSelect) {
+        onItemSelect(item);
+      }
+    };
 
-  return (
-    <ReqoreMenu
-      _insidePopover={!multiSelect}
-      _popoverId={_popoverId}
-      style={listStyle}
-      width={width}
-      maxHeight={height || '300px'}
-    >
-      {filterable && (
-        <>
-          <ReqoreInput
-            value={query}
-            onChange={handleQueryChange}
-            placeholder='Filter'
-            autoFocus
-            onClearClick={() => setQuery('')}
+    return (
+      <ReqoreMenu
+        _insidePopover={!multiSelect}
+        _popoverId={_popoverId}
+        style={listStyle}
+        width={width}
+        maxHeight={height || '300px'}
+      >
+        {filterable && (
+          <>
+            <ReqoreInput
+              value={query}
+              onChange={handleQueryChange}
+              placeholder='Filter'
+              onClearClick={() => setQuery('')}
+            />
+            <ReqoreSpacer height={10} />
+          </>
+        )}
+        {filteredItems.map((item: IReqoreDropdownItem, index: number) => (
+          <ReqoreMenuItem
+            key={index}
+            {...item}
+            label={item.label || item.value}
+            onClick={() => handleItemClick(item)}
+            rightIcon={item.selected ? 'CheckLine' : undefined}
           />
-          <ReqoreSpacer height={10} />
-        </>
-      )}
-      {filteredItems.map((item: IReqoreMenuItemProps, index: number) => (
-        <ReqoreMenuItem key={index} {...item} rightIcon={item.selected ? 'CheckLine' : undefined} />
-      ))}
-    </ReqoreMenu>
-  );
-};
+        ))}
+      </ReqoreMenu>
+    );
+  }
+);
 
 export default ReqoreDropdownList;

package/src/components/InternalPopover/index.tsx

@@ -133,8 +133,6 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
     ],
   });
 
-  console.log(opaque);
-
   useEffect(() => {
     if (popperRef.current) {
       updatePopover?.(id, { popperRef });

package/src/components/Panel/index.tsx

@@ -31,13 +31,13 @@ import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
-import { IReqoreDropdownItemProps } from '../Dropdown/item';
+import { IReqoreDropdownItem } from '../Dropdown/list';
 import ReqoreIcon from '../Icon';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
-  actions?: IReqoreDropdownItemProps[];
+  actions?: IReqoreDropdownItem[];
   customContent?: () => string | React.ReactNode;
 }
 
@@ -78,6 +78,7 @@ export interface IReqorePanelProps
 
 export interface IStyledPanel extends IReqorePanelProps {
   theme: IReqoreTheme;
+  noHorizontalPadding?: boolean;
 }
 
 export const StyledPanel = styled.div<IStyledPanel>`
@@ -135,7 +136,8 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   justify-content: space-between;
   height: 40px;
   align-items: center;
-  padding: 0 5px 0 15px;
+  padding: ${({ noHorizontalPadding }: IStyledPanel) =>
+    `0 5px 0 ${noHorizontalPadding ? 0 : '15px'}`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
@@ -167,7 +169,12 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
   min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
-  padding: ${({ padded, contentSize }) => (!padded ? undefined : TEXT_FROM_SIZE[contentSize])}px;
+  padding: ${({ padded, contentSize, noHorizontalPadding }) =>
+    !padded
+      ? undefined
+      : noHorizontalPadding
+      ? `${TEXT_FROM_SIZE[contentSize]}px 0`
+      : `${TEXT_FROM_SIZE[contentSize]}px`};
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
   padding-top: ${({ minimal, hasLabel }) => (minimal && hasLabel ? '0px' : undefined)};
@@ -260,66 +267,68 @@ export const ReqorePanel = forwardRef(
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = (
-      actionOrActions: IReqorePanelAction | IReqorePanelAction[],
-      index: number
-    ) => {
-      if (Array.isArray(actionOrActions)) {
-        return (
-          <ReqoreControlGroup stack minimal>
-            {actionOrActions.map(renderActions)}
-          </ReqoreControlGroup>
-        );
-      }
-
-      const { id, actions, label, intent, className, customContent, ...rest }: IReqorePanelAction =
-        actionOrActions;
+    const renderActions = useCallback(
+      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
+        if (Array.isArray(actionOrActions)) {
+          return (
+            <ReqoreControlGroup stack minimal>
+              {actionOrActions.map(renderActions)}
+            </ReqoreControlGroup>
+          );
+        }
+
+        const {
+          id,
+          actions,
+          label,
+          intent,
+          className,
+          customContent,
+          ...rest
+        }: IReqorePanelAction = actionOrActions;
+
+        if (size(actions)) {
+          return (
+            <ReqoreDropdown<IReqoreButtonProps>
+              {...rest}
+              key={index}
+              label={label}
+              items={actions}
+              intent={intent}
+              className={className}
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
+              id={id}
+            />
+          );
+        }
+
+        if (customContent) {
+          return customContent();
+        }
 
-      if (size(actions)) {
         return (
-          <ReqoreDropdown
+          <ReqoreButton
             {...rest}
+            id={id}
             key={index}
-            label={label}
-            componentProps={{
-              intent,
-              id,
-              minimal: true,
-              className,
-              onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-                e.stopPropagation();
-              },
-            }}
-            items={actions}
-          />
+            className={className}
+            customTheme={theme}
+            intent={intent}
+            onClick={
+              rest.onClick
+                ? (e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    rest.onClick?.();
+                  }
+                : undefined
+            }
+          >
+            {label}
+          </ReqoreButton>
         );
-      }
-
-      if (customContent) {
-        return customContent();
-      }
-
-      return (
-        <ReqoreButton
-          {...rest}
-          id={id}
-          key={index}
-          className={className}
-          customTheme={theme}
-          intent={intent}
-          onClick={
-            rest.onClick
-              ? (e: React.MouseEvent<HTMLButtonElement>) => {
-                  e.stopPropagation();
-                  rest.onClick?.();
-                }
-              : undefined
-          }
-        >
-          {label}
-        </ReqoreButton>
-      );
-    };
+      },
+      [actions, theme]
+    );
 
     const HTMLheaderElement = useMemo(() => {
       return `h${headerSize}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -354,6 +363,7 @@ export const ReqorePanel = forwardRef(
             onClick={handleCollapseClick}
             theme={theme}
             opacity={rest.opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={rest.opacity === 0}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -401,6 +411,7 @@ export const ReqorePanel = forwardRef(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
+            noHorizontalPadding={rest.opacity === 0}
           >
             {children}
           </StyledPanelContent>
@@ -411,6 +422,7 @@ export const ReqorePanel = forwardRef(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={rest.opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={rest.opacity === 0}
           >
             <ReqoreControlGroup minimal>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
             <ReqoreControlGroup minimal>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>

package/src/components/Popover/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import styled from 'styled-components';
 import usePopover, { IPopoverOptions } from '../../hooks/usePopover';
+import { useWhyDidYouUpdate } from '../../hooks/useWhyDidYouUpdate';
 import { IReqoreComponent } from '../../types/global';
 
 export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
@@ -17,49 +18,63 @@ export const StyledPopover = styled.span`
   overflow: hidden;
 `;
 
-const Popover = ({
-  component: Component,
-  componentProps,
-  children,
-  isReqoreComponent,
-  noWrapper,
-  wrapperTag = 'span',
-  wrapperStyle = {},
-  _insidePopover,
-  _popoverId,
-  ...rest
-}: IReqorePopoverProps) => {
-  const [ref, setRef] = useState(undefined);
+const Popover = memo(
+  ({
+    component: Component,
+    componentProps,
+    children,
+    isReqoreComponent,
+    noWrapper,
+    wrapperTag = 'span',
+    wrapperStyle = {},
+    _insidePopover,
+    _popoverId,
+    ...rest
+  }: IReqorePopoverProps) => {
+    const [ref, setRef] = useState(undefined);
 
-  usePopover({ targetElement: ref, ...rest });
+    useWhyDidYouUpdate('popover', {
+      component: Component,
+      componentProps,
+      children,
+      isReqoreComponent,
+      noWrapper,
+      wrapperTag,
+      wrapperStyle,
+      _insidePopover,
+      _popoverId,
+      ...rest,
+    });
+    usePopover({ targetElement: ref, ...rest });
+
+    if (isReqoreComponent || noWrapper) {
+      return (
+        <Component
+          {...componentProps}
+          _insidePopover={_insidePopover}
+          _popoverId={_popoverId}
+          ref={setRef}
+        >
+          {children}
+        </Component>
+      );
+    }
 
-  if (isReqoreComponent || noWrapper) {
     return (
-      <Component
-        {...componentProps}
-        _insidePopover={_insidePopover}
-        _popoverId={_popoverId}
+      // @ts-ignore
+      <StyledPopover
+        // @ts-ignore
+        as={wrapperTag}
+        className='reqore-popover-wrapper'
         ref={setRef}
+        style={wrapperStyle}
       >
-        {children}
-      </Component>
+        <Component {...componentProps} _insidePopover={_insidePopover} _popoverId={_popoverId}>
+          {children}
+        </Component>
+      </StyledPopover>
     );
   }
-
-  return (
-    // @ts-ignore
-    <StyledPopover
-      // @ts-ignore
-      as={wrapperTag}
-      className='reqore-popover-wrapper'
-      ref={setRef}
-      style={wrapperStyle}
-    >
-      <Component {...componentProps} _insidePopover={_insidePopover} _popoverId={_popoverId}>
-        {children}
-      </Component>
-    </StyledPopover>
-  );
-};
+);
 
 export default Popover;