@qoretechnologies/reqore 0.29.9 → 0.30.1

package/src/components/MultiSelect/index.tsx

@@ -1,5 +1,5 @@
 import { omit, size } from 'lodash';
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ReqoreDropdown, ReqoreInput } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { IPopoverControls } from '../../hooks/usePopover';
@@ -74,217 +74,209 @@ export const ReqoreMultiSelectItem = memo(
   }
 );
 
-export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectProps>(
-  (
-    {
-      value = [],
-      onValueChange,
-      onItemClick,
-      canRemoveItems,
-      canCreateItems,
-      items = [],
-      selectedItemEffect,
-      selectedItemSize,
-      selectorProps,
-      openOnMount,
-      enterKeySelects,
-      onItemClickIcon,
-      ...rest
-    }: IReqoreMultiSelectProps,
-    ref
-  ) => {
-    const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
-    const [query, setQuery] = useState<string>('');
-    const popoverData = useRef<IPopoverControls>(undefined);
-    const [focused, setFocused] = useState<boolean>(false);
+export const ReqoreMultiSelect = ({
+  value = [],
+  onValueChange,
+  onItemClick,
+  canRemoveItems,
+  canCreateItems,
+  items = [],
+  selectedItemEffect,
+  selectedItemSize,
+  selectorProps,
+  openOnMount,
+  enterKeySelects,
+  onItemClickIcon,
+  ...rest
+}: IReqoreMultiSelectProps) => {
+  const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
+  const [query, setQuery] = useState<string>('');
+  const popoverData = useRef<IPopoverControls>(undefined);
+  const [focused, setFocused] = useState<boolean>(false);
 
-    useEffect(() => {
-      if (query && !popoverData.current?.isOpen()) {
-        popoverData.current?.open();
-      }
-    }, [query]);
+  useEffect(() => {
+    if (query && !popoverData.current?.isOpen()) {
+      popoverData.current?.open();
+    }
+  }, [query]);
 
-    useEffect(() => {
-      if (enterKeySelects) {
-        document.addEventListener('keydown', handleKeyDown);
-      }
+  useEffect(() => {
+    if (enterKeySelects) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
 
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    });
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
 
-    const addRemoveItem = useCallback(
-      (item: TReqoreMultiSelectItem): void => {
-        if (value.includes(item.value)) {
-          onValueChange(value.filter((v) => v !== item.value));
-        } else {
-          onValueChange([...value, item.value]);
-        }
-      },
-      [value]
-    );
+  const addRemoveItem = useCallback(
+    (item: TReqoreMultiSelectItem): void => {
+      if (value.includes(item.value)) {
+        onValueChange(value.filter((v) => v !== item.value));
+      } else {
+        onValueChange([...value, item.value]);
+      }
+    },
+    [value]
+  );
 
-    const handleItemSelect = useCallback(
-      (item: Partial<TReqoreMultiSelectItem>) => {
-        addRemoveItem(item);
+  const handleItemSelect = useCallback(
+    (item: Partial<TReqoreMultiSelectItem>) => {
+      addRemoveItem(item);
 
-        if (item.isNew) {
-          setCreatedItems([
-            ...createdItems,
-            {
-              value: item.value,
-            },
-          ]);
-        }
+      if (item.isNew) {
+        setCreatedItems([
+          ...createdItems,
+          {
+            value: item.value,
+          },
+        ]);
+      }
 
-        setQuery('');
-      },
-      [createdItems, value]
-    );
+      setQuery('');
+    },
+    [createdItems, value]
+  );
 
-    /*
+  /*
     This code creates a list of all items that are available
     for selection in the dropdown. It will include the items
     that are passed in as props, as well as any items that the
     user has created.
     */
-    const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
-      const customItems: TReqoreMultiSelectItem[] = size(createdItems)
-        ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
-        : [];
+  const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
+    const customItems: TReqoreMultiSelectItem[] = size(createdItems)
+      ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
+      : [];
 
-      let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
-        query
-          ? item.divider
-            ? false
-            : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !==
-              -1
-          : true
-      );
+    let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
+      query
+        ? item.divider
+          ? false
+          : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
+        : true
+    );
 
-      // Mark selected items as selected
-      filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
-        ...omit(item, ['actions', 'asBadge', 'rightIcon']),
-        selected: value.includes(item.value),
-      }));
+    // Mark selected items as selected
+    filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
+      ...omit(item, ['actions', 'asBadge', 'rightIcon']),
+      selected: value.includes(item.value),
+    }));
 
-      if (query && !size(filteredItems)) {
-        filteredItems = [
-          { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
-        ];
-      }
+    if (query && !size(filteredItems)) {
+      filteredItems = [
+        { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
+      ];
+    }
 
-      // If there is a query and there are filtered items
-      // and there is no item that exactly matches the query, add it to the list
-      if (
-        query &&
-        !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
-        canCreateItems
-      ) {
-        filteredItems = [
-          {
-            label: `Create new "${query}"`,
-            value: query,
-            isNew: true,
-            icon: 'AddCircleLine',
-            minimal: true,
-            flat: false,
-            effect: {
-              gradient: {
-                colors: {
-                  0: 'success',
-                  100: 'success:darken:1',
-                },
+    // If there is a query and there are filtered items
+    // and there is no item that exactly matches the query, add it to the list
+    if (
+      query &&
+      !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
+      canCreateItems
+    ) {
+      filteredItems = [
+        {
+          label: `Create new "${query}"`,
+          value: query,
+          isNew: true,
+          icon: 'AddCircleLine',
+          minimal: true,
+          flat: false,
+          effect: {
+            gradient: {
+              colors: {
+                0: 'success',
+                100: 'success:darken:1',
               },
             },
           },
-          { divider: true, label: 'Items matching your query' },
-          ...filteredItems,
-        ];
-      }
+        },
+        { divider: true, label: 'Items matching your query' },
+        ...filteredItems,
+      ];
+    }
 
-      return filteredItems;
-    }, [items, createdItems, query, value]);
+    return filteredItems;
+  }, [items, createdItems, query, value]);
 
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === 'Enter' && focused) {
-          const item = [...items, ...createdItems].find((item) => item.value === query);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && focused) {
+        const item = [...items, ...createdItems].find((item) => item.value === query);
 
-          if (item) {
-            handleItemSelect(item);
-          } else if (canCreateItems && query) {
-            handleItemSelect({
-              value: query,
-              isNew: true,
-            });
-          }
+        if (item) {
+          handleItemSelect(item);
+        } else if (canCreateItems && query) {
+          handleItemSelect({
+            value: query,
+            isNew: true,
+          });
         }
-      },
-      [items, createdItems, query, canCreateItems, focused]
-    );
+      }
+    },
+    [items, createdItems, query, canCreateItems, focused]
+  );
 
-    const getItemByValue = useCallback(
-      (value: string): TReqoreMultiSelectItem => {
-        return [...items, ...createdItems].find((item) => item.value === value);
-      },
-      [items, createdItems, value]
-    );
+  const getItemByValue = useCallback(
+    (value: string): TReqoreMultiSelectItem => {
+      return [...items, ...createdItems].find((item) => item.value === value);
+    },
+    [items, createdItems, value]
+  );
 
-    return (
-      <ReqoreControlGroup vertical fluid {...rest} ref={ref}>
-        <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
-          {size(value) ? (
-            value.map((v) => (
-              <ReqoreMultiSelectItem
-                key={v}
-                item={getItemByValue(v)}
-                onItemClickIcon={onItemClickIcon}
-                onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
-                onClick={
-                  onItemClick
-                    ? () => {
-                        onItemClick(getItemByValue(v));
-                      }
-                    : undefined
-                }
-                selectedItemEffect={selectedItemEffect}
-                selectedItemSize={selectedItemSize}
-              />
-            ))
-          ) : (
-            <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
-          )}
-        </ReqoreTagGroup>
-        <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
-          <ReqoreDropdown<IReqoreInputProps>
-            {...selectorProps}
-            multiSelect
-            handler='focus'
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            passPopoverData={(data) => (popoverData.current = data)}
-            component={ReqoreInput}
-            onClearClick={() => setQuery('')}
-            value={query}
-            isDefaultOpen={openOnMount}
-            onItemSelect={handleItemSelect}
-            placeholder={
-              canCreateItems ? 'Type to search or create an item...' : 'Type to search...'
-            }
-            onChange={(e: any) => setQuery(e.target.value)}
-            items={
-              size(allItems)
-                ? allItems
-                : canCreateItems
-                ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
-                : []
-            }
-            useTargetWidth
-          />
-        </ReqoreControlGroup>
+  return (
+    <ReqoreControlGroup vertical fluid {...rest}>
+      <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
+        {size(value) ? (
+          value.map((v) => (
+            <ReqoreMultiSelectItem
+              key={v}
+              item={getItemByValue(v)}
+              onItemClickIcon={onItemClickIcon}
+              onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
+              onClick={
+                onItemClick
+                  ? () => {
+                      onItemClick(getItemByValue(v));
+                    }
+                  : undefined
+              }
+              selectedItemEffect={selectedItemEffect}
+              selectedItemSize={selectedItemSize}
+            />
+          ))
+        ) : (
+          <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
+        )}
+      </ReqoreTagGroup>
+      <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
+        <ReqoreDropdown<IReqoreInputProps>
+          {...selectorProps}
+          multiSelect
+          handler='focus'
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          passPopoverData={(data) => (popoverData.current = data)}
+          component={ReqoreInput}
+          onClearClick={() => setQuery('')}
+          value={query}
+          isDefaultOpen={openOnMount}
+          onItemSelect={handleItemSelect}
+          placeholder={canCreateItems ? 'Type to search or create an item...' : 'Type to search...'}
+          onChange={(e: any) => setQuery(e.target.value)}
+          items={
+            size(allItems)
+              ? allItems
+              : canCreateItems
+              ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
+              : []
+          }
+          useTargetWidth
+        />
       </ReqoreControlGroup>
-    );
-  }
-);
+    </ReqoreControlGroup>
+  );
+};

package/src/components/Panel/index.tsx

@@ -1,9 +1,10 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
+  GAP_FROM_SIZE,
   ICON_FROM_HEADER_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
@@ -38,7 +39,7 @@ import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon, { StyledIconWrapper } from '../Icon';
-import { ReqoreSpacer } from '../Spacer';
+import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
@@ -46,9 +47,11 @@ export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreToolt
   actions?: Omit<IReqoreDropdownItem[], 'value'>;
   // Custom react element
   as?: React.ElementType;
-  props?: any;
+  props?: { [key: string | number]: any } | undefined;
   // Hide the action if the condition is false
   show?: boolean;
+  // Hide the action if the group is too small
+  responsive?: boolean;
 }
 
 export interface IReqorePanelBottomAction extends IReqorePanelAction {
@@ -116,6 +119,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
   transition: 0.2s ease-in-out;
   width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+  max-width: 100%;
   flex: ${({ fluid }) => (fluid ? '1 auto' : '0 0 auto')};
 
   ${({ interactive, theme, opacity = 1, flat, intent }) =>
@@ -240,10 +244,13 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
 
 export const StyledPanelTitleHeader = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  overflow: hidden;
   padding-right: 5px;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: hidden;
+  min-width: 100px;
 `;
 
 export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
@@ -328,17 +335,56 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = useCallback(
+    const renderResponsiveActions = useCallback(
       (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        if (Array.isArray(actionOrActions)) {
-          return (
-            <ReqoreControlGroup key={index} stack>
-              {actionOrActions.map(renderActions)}
-            </ReqoreControlGroup>
-          );
-        }
+        return renderActions(actionOrActions, index, true);
+      },
+      [actions]
+    );
+
+    const hasNonResponsiveActions = useCallback(
+      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
+        data.some((action) => !Array.isArray(action) && action.responsive === false),
+      [actions, bottomActions]
+    );
 
-        if (actionOrActions.show === false) {
+    const hasResponsiveActions = useCallback(
+      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
+        data.some((action) => Array.isArray(action) || action.responsive !== false),
+      [actions, bottomActions]
+    );
+
+    const renderNonResponsiveActions = useCallback(
+      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
+        return renderActions(actionOrActions, index, false);
+      },
+      [actions]
+    );
+
+    const renderActions = useCallback(
+      (
+        actionOrActions: IReqorePanelAction | IReqorePanelAction[],
+        index: number,
+        includeResponsive
+      ) => {
+        const action: IReqorePanelAction = Array.isArray(actionOrActions)
+          ? {
+              show: true,
+              responsive: true,
+              as: ReqoreControlGroup,
+              props: {
+                stack: true,
+                fluid: true,
+                children: actionOrActions.map(renderActions),
+              },
+            }
+          : actionOrActions;
+
+        if (
+          action.show === false ||
+          (includeResponsive && action.responsive === false) ||
+          (!includeResponsive && (action.responsive === true || !('responsive' in action)))
+        ) {
           return null;
         }
 
@@ -349,20 +395,21 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           intent,
           className,
           as: CustomElement,
-          props,
+          props = {},
           ...rest
-        }: IReqorePanelAction = actionOrActions;
+        }: IReqorePanelAction = action;
 
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
               {...rest}
               key={index}
+              fixed
               label={label}
               items={actions}
               intent={intent}
               className={className}
-              customTheme={theme}
+              customTheme={rest.customTheme || theme}
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
               id={id}
             />
@@ -372,9 +419,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (CustomElement) {
           return (
             <CustomElement
+              fixed
               {...props}
               key={index}
-              customTheme={theme}
+              customTheme={props.customTheme || theme}
               onClick={(e: React.MouseEvent<any>) => {
                 e.stopPropagation();
                 props?.onClick?.(e);
@@ -387,9 +435,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           <ReqoreButton
             {...rest}
             id={id}
+            fixed
             key={index}
             className={className}
-            customTheme={theme}
+            customTheme={rest.customTheme || theme}
             intent={intent}
             onClick={
               rest.onClick
@@ -494,27 +543,39 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 </>
               ) : null}
             </StyledPanelTitleHeader>
-            <ReqoreControlGroup>
-              {actions.map(renderActions)}
-              {collapsible && (
-                <ReqoreButton
-                  customTheme={theme}
-                  icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
-                  onClick={handleCollapseClick}
-                  tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
-                />
-              )}
-              {onClose && (
-                <ReqoreButton
-                  customTheme={theme}
-                  icon='CloseLine'
-                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    onClose?.();
-                  }}
-                />
-              )}
-            </ReqoreControlGroup>
+            {hasResponsiveActions(actions) && (
+              <ReqoreControlGroup responsive fluid horizontalAlign='flex-end' customTheme={theme}>
+                {actions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {collapsible || onClose || hasNonResponsiveActions(actions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup fixed horizontalAlign='flex-end'>
+                  {actions.map(renderNonResponsiveActions)}
+                  {collapsible && (
+                    <ReqoreButton
+                      customTheme={theme}
+                      icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
+                      onClick={handleCollapseClick}
+                      tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
+                      fixed
+                    />
+                  )}
+                  {onClose && (
+                    <ReqoreButton
+                      fixed
+                      customTheme={theme}
+                      icon='CloseLine'
+                      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                        e.stopPropagation();
+                        onClose?.();
+                      }}
+                    />
+                  )}
+                </ReqoreControlGroup>
+              </>
+            ) : null}
           </StyledPanelTitle>
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
@@ -540,8 +601,32 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
           >
-            <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
-            <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
+            {hasNonResponsiveActions(leftBottomActions) ? (
+              <>
+                <ReqoreControlGroup>
+                  {leftBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+              </>
+            ) : null}
+            {hasResponsiveActions(leftBottomActions) && (
+              <ReqoreControlGroup fluid responsive customTheme={theme}>
+                {leftBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasResponsiveActions(rightBottomActions) && (
+              <ReqoreControlGroup fluid horizontalAlign='flex-end' responsive customTheme={theme}>
+                {rightBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasNonResponsiveActions(rightBottomActions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup horizontalAlign='flex-end'>
+                  {rightBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+              </>
+            ) : null}
           </StyledPanelBottomActions>
         ) : null}
       </StyledPanel>