@qoretechnologies/reqore 0.25.9 → 0.25.10

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;
 }
 
@@ -267,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';

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;

package/src/hooks/usePopover.tsx

@@ -63,30 +63,38 @@ const usePopover = ({
     [popovers, current]
   );
 
+  const openPopover = () => {
+    addPopover?.({
+      id: current,
+      content,
+      targetElement,
+      placement,
+      noArrow,
+      useTargetWidth,
+      closeOnOutsideClick,
+      closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+      ...rest,
+    });
+
+    if (rest?.blur > 0) {
+      targetElement.style.position = 'relative';
+      targetElement.style.zIndex = '999999';
+    }
+  };
+
   const _addPopover = () => {
     if (currentPopover) {
       if (handler !== 'hoverStay') {
         _removePopover?.();
       }
     } else if (show) {
-      timeout = setTimeout(() => {
-        addPopover?.({
-          id: current,
-          content,
-          targetElement,
-          placement,
-          noArrow,
-          useTargetWidth,
-          closeOnOutsideClick,
-          closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
-          ...rest,
-        });
-
-        if (rest?.blur > 0) {
-          targetElement.style.position = 'relative';
-          targetElement.style.zIndex = '999999';
-        }
-      }, delay || 0);
+      if (delay) {
+        timeout = setTimeout(() => {
+          openPopover();
+        }, delay);
+      } else {
+        openPopover();
+      }
     }
   };
 
@@ -119,7 +127,7 @@ const usePopover = ({
         ...rest,
       });
     }
-  }, [content?.toString()]);
+  }, [content]);
 
   useEffect(() => {
     if (openOnMount && targetElement) {
@@ -155,7 +163,13 @@ const usePopover = ({
         }
       }
     };
-  }, [targetElement?.toString(), content?.toString(), current, currentPopover]);
+  }, [
+    targetElement?.toString(),
+    //@ts-ignore
+    content,
+    current,
+    currentPopover,
+  ]);
 
   useUnmount(() => {
     cancelTimeout();

package/src/hooks/useWhyDidYouUpdate.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+export function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  const previousProps: any = useRef();
+  useEffect(() => {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      const allKeys = Object.keys({ ...previousProps.current, ...props });
+      // Use this object to keep track of changed props
+      const changesObj = {};
+      // Iterate through keys
+      allKeys.forEach((key) => {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key],
+          };
+        }
+      });
+      // If changesObj not empty then output to console
+      if (Object.keys(changesObj).length) {
+        console.log('[why-did-you-update]', name, changesObj);
+      }
+    }
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props;
+  });
+}

package/src/stories/Collection/Collection.stories.tsx

@@ -72,7 +72,7 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
-      actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ label: 'Test' }] }]}
+      actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
 };

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,26 +1,27 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
 import ReqoreButton from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
-import { IReqoreInputProps } from '../../components/Input';
-import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
+import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput, ReqoreTag } from '../../index';
 import { argManager } from '../utils/args';
 
-const { createArg } = argManager<IReqoreDropdownProps<IReqoreInputProps>>();
+const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
 
 export default {
   title: 'Components/Dropdown',
+  parameters: {
+    chromatic: {
+      delay: 500,
+    },
+  },
   argTypes: {
+    ...disableArg('multiSelect'),
     ...createArg('component', {
       defaultValue: ReqoreButton,
       table: {
         disable: true,
       },
     }),
-    ...createArg('componentProps', {
-      table: {
-        disable: true,
-      },
-    }),
     ...createArg('filterable', {
       defaultValue: true,
       name: 'Filterable',
@@ -34,96 +35,121 @@ export default {
       defaultValue: [
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya, I am super long item and I am not going to fit in the dropdown',
+          value: 'How are ya, I am super long item and I am not going to fit in the dropdown',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya',
+          value: 'How are ya',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya',
+          value: 'How are ya',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya',
+          value: 'How are ya',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya',
+          value: 'How are ya',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
         {
           selected: true,
-          label: 'Hello',
+          value: 'Hello',
           icon: 'SunCloudyLine',
         },
         {
-          label: 'How are ya',
+          value: 'How are ya',
           icon: 'BatteryChargeFill',
         },
         {
           disabled: true,
-          label: 'i aM diSAblEd',
+          value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
       ],
     }),
   },
-} as Meta<IReqoreDropdownProps<IReqoreInputProps>>;
+} as Meta<IReqoreDropdownProps>;
+
+const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
+  const [selected, setSelected] = useState<string[]>(['Item 3', 'Item 6']);
+
+  if (args.multiSelect) {
+    return (
+      <>
+        <ReqoreControlGroup>
+          <ReqoreDropdown
+            label='Multi Select'
+            multiSelect
+            isDefaultOpen
+            onItemSelect={({ label }) => setSelected([...selected, label])}
+            items={Array(13)
+              .fill(null)
+              .map((_, i) => ({
+                label: `Item ${i}`,
+                value: `item-${i}`,
+                selected: selected.includes(`Item ${i}`),
+              }))}
+          />
+          {selected.map((item, index) => (
+            <ReqoreTag label={item} key={index} />
+          ))}
+        </ReqoreControlGroup>
+      </>
+    );
+  }
 
-const Template: Story<IReqoreDropdownProps<IReqoreInputProps>> = (
-  args: IReqoreDropdownProps<IReqoreInputProps>
-) => {
   return (
     <>
       <ReqoreControlGroup>
@@ -141,7 +167,7 @@ const Template: Story<IReqoreDropdownProps<IReqoreInputProps>> = (
           caretPosition='right'
           label='Open By Default'
           {...args}
-          componentProps={{ placeholder: 'Fluid component' }}
+          placeholder='Fluid component'
           isDefaultOpen
           useTargetWidth
         />
@@ -154,7 +180,9 @@ export const Basic = Template.bind({});
 export const CustomComponent = Template.bind({});
 CustomComponent.args = {
   component: ReqoreInput,
-  componentProps: {
-    placeholder: 'Custom component',
-  },
+  placeholder: 'Custom component',
+};
+export const MultiSelect = Template.bind({});
+MultiSelect.args = {
+  multiSelect: true,
 };

package/src/stories/Panel/Panel.stories.tsx

@@ -68,8 +68,8 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         {
           label: 'More actions',
           actions: [
-            { label: 'Sub Test', icon: 'FileDownloadLine' },
-            { label: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+            { value: 'Sub Test', icon: 'FileDownloadLine' },
+            { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
           ],
           intent: 'info',
         },
@@ -80,8 +80,8 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           label: 'More actions',
           position: 'right',
           actions: [
-            { label: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
-            { label: 'Sub Test 2', icon: 'FileDownloadLine' },
+            { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+            { value: 'Sub Test 2', icon: 'FileDownloadLine' },
           ],
         },
       ]}