@qoretechnologies/reqore 0.23.0 → 0.25.2

package/src/components/Collection/index.tsx

@@ -0,0 +1,189 @@
+import { size } from 'lodash';
+import { useMemo, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { ReqoreIntents } from '../../constants/theme';
+import { IReqoreColumnsProps, StyledColumns } from '../Columns';
+import ReqoreInput from '../Input';
+import ReqoreMessage from '../Message';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
+import { sortTableData } from '../Table/helpers';
+import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
+
+export interface IReqoreCollectionProps
+  extends Pick<
+      IReqorePanelProps,
+      'size' | 'intent' | 'customTheme' | 'actions' | 'bottomActions' | 'label'
+    >,
+    IReqoreColumnsProps {
+  items?: IReqoreCollectionItemProps[];
+  stacked?: boolean;
+  rounded?: boolean;
+  height?: string;
+  fill?: boolean;
+  maxItemHeight?: number;
+  filterable?: boolean;
+  sortable?: boolean;
+}
+
+export const StyledCollectionWrapper = styled(StyledColumns)`
+  height: ${({ height }) => (height ? `${height}px` : 'auto')};
+
+  ${({ rounded, stacked }: IReqoreCollectionProps) =>
+    (!rounded || stacked) &&
+    css`
+      border-radius: ${stacked && rounded ? '10px' : undefined};
+    `}
+
+  overflow: hidden;
+  position: relative;
+`;
+
+export const ReqoreCollection = ({
+  items,
+  columnsGap = '10px',
+  stacked,
+  rounded = true,
+  fill,
+  height,
+  maxItemHeight,
+  filterable,
+  sortable,
+  ...rest
+}: IReqoreCollectionProps) => {
+  const [showAs, setShowAs] = useState<'list' | 'grid'>('grid');
+  const [sort, setSort] = useState<'asc' | 'desc'>('asc');
+  const [query, setQuery] = useState<string>('');
+
+  const sortedItems: IReqoreCollectionItemProps[] = useMemo(
+    () => (sortable ? sortTableData(items, { by: 'label', direction: sort }) : items),
+    [items, sort]
+  );
+
+  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
+    if (!filterable || query === '') {
+      return sortedItems;
+    }
+
+    return sortedItems.filter((item) => {
+      const text = `${item.label}${item.content?.toString()}${item.expandedContent?.toString()}`;
+
+      if (!text) {
+        return false;
+      }
+
+      return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    });
+  }, [items, query, sortedItems]);
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  const finalItems = filteredItems;
+  const finalActions: (IReqorePanelAction[] | IReqorePanelAction)[] = useMemo(() => {
+    let actions = [];
+
+    if (filterable) {
+      actions = [
+        ...actions,
+        {
+          customContent: () => (
+            <ReqoreInput
+              placeholder={`Filter ${size(items)} items`}
+              onClearClick={() => setQuery('')}
+              onChange={handleQueryChange}
+              value={query}
+              icon='Search2Line'
+              minimal={false}
+            />
+          ),
+        },
+      ];
+    }
+
+    if (sortable) {
+      actions = [
+        ...actions,
+        [
+          {
+            icon: 'SortAsc',
+            intent: sort === 'asc' ? ReqoreIntents.INFO : undefined,
+            onClick: () => setSort('asc'),
+            active: sort === 'asc',
+            tooltip: 'Sort ascending',
+            disabled: !size(finalItems),
+          },
+          {
+            icon: 'SortDesc',
+            intent: sort === 'desc' ? ReqoreIntents.INFO : undefined,
+            onClick: () => setSort('desc'),
+            active: sort === 'desc',
+            tooltip: 'Sort descending',
+            disabled: !size(finalItems),
+          },
+        ],
+      ];
+    }
+
+    return [
+      ...actions,
+      [
+        {
+          icon: 'GridLine',
+          onClick: () => setShowAs('grid'),
+          intent: showAs === 'grid' ? ReqoreIntents.INFO : undefined,
+          active: showAs === 'grid',
+          tooltip: 'Show as grid',
+          disabled: !size(finalItems),
+        },
+        {
+          icon: 'ListOrdered',
+          onClick: () => setShowAs('list'),
+          intent: showAs === 'list' ? ReqoreIntents.INFO : undefined,
+          active: showAs === 'list',
+          tooltip: 'Show as list',
+          disabled: !size(finalItems),
+        },
+      ],
+      ...(rest.actions || []),
+    ];
+  }, [filterable, handleQueryChange, query, rest.actions, showAs, sort, sortable, finalItems]);
+
+  return (
+    <ReqorePanel
+      {...rest}
+      style={{
+        height: height ?? undefined,
+      }}
+      fill={fill}
+      headerSize={2}
+      padded
+      opacity={0}
+      actions={finalActions}
+      className={`reqore-collection ${rest.className || ''}`}
+    >
+      {!size(finalItems) ? (
+        <ReqoreMessage intent='muted' flat title='No items found'>
+          No data in this collection, try changing your search query or filters
+        </ReqoreMessage>
+      ) : (
+        <StyledCollectionWrapper
+          columns={showAs === 'grid' ? 'auto-fit' : 1}
+          columnsGap={stacked ? '0px' : columnsGap}
+          rounded={rounded}
+          stacked={stacked}
+          {...rest}
+        >
+          {finalItems?.map((item) => (
+            <ReqoreCollectionItem
+              {...item}
+              key={item.id || item.label.toString()}
+              rounded={!stacked}
+              maxContentHeight={maxItemHeight}
+            />
+          ))}
+        </StyledCollectionWrapper>
+      )}
+    </ReqorePanel>
+  );
+};

package/src/components/Collection/item.tsx

@@ -0,0 +1,239 @@
+import { map, size } from 'lodash';
+import { rgba } from 'polished';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useDebounce, useMeasure } from 'react-use';
+import styled, { css } from 'styled-components';
+import ReqoreContext from '../../context/ReqoreContext';
+import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { StyledBackdrop } from '../Drawer';
+import { IReqoreDropdownItemProps } from '../Dropdown/item';
+import {
+  IReqorePanelAction,
+  IReqorePanelBottomAction,
+  IReqorePanelProps,
+  ReqorePanel,
+} from '../Panel';
+import { ReqoreSpacer } from '../Spacer';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
+import ReqoreTagGroup from '../Tag/group';
+
+export interface IReqoreCollectionItemProps
+  extends Omit<
+    IReqorePanelProps,
+    | 'children'
+    | 'actions'
+    | 'collapsible'
+    | 'onCollapseChange'
+    | 'isCollapsed'
+    | 'unMountContentOnCollapse'
+    | 'bottomActions'
+  > {
+  subHeader?: string;
+  content?: string | React.ReactNode;
+  expandable?: boolean;
+  expandedContent?: string | React.ReactNode;
+  expandedActions?: IReqorePanelBottomAction[];
+  image?: string;
+  actions?: IReqoreDropdownItemProps[];
+  tags?: IReqoreTagProps[];
+  maxContentHeight?: number;
+}
+
+export const StyledCollectionItemContent = styled.div`
+  max-height: ${({ providedHeight }) => (providedHeight ? `${providedHeight}px` : 'auto')};
+  overflow: hidden;
+  position: relative;
+  transition: 0.3s ease-in-out;
+
+  ${({ contentOverflows, theme, opacity = 1 }) =>
+    contentOverflows &&
+    css`
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 100px;
+        transition: 0.3s ease-in-out;
+        background: linear-gradient(
+          to top,
+          ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)} 0%,
+          transparent 100%
+        );
+      }
+    `}
+`;
+
+export const ReqoreCollectionItem = ({
+  flat = true,
+  minimal = true,
+  style,
+  content,
+  actions,
+  tags,
+  expandable,
+  expandedContent,
+  expandedActions,
+  maxContentHeight,
+  ...rest
+}: IReqoreCollectionItemProps) => {
+  const [isSelected, setIsSelected] = useState(false);
+  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const ref = useRef<HTMLDivElement>(null);
+  const [contentRef, sizes] = useMeasure();
+  const originalDimensions = useRef(null);
+  const [position, setPosition] = useState(undefined);
+  const theme = useReqoreTheme('main', rest.customTheme, rest.intent);
+  const [dimensions, setDimensions] = useState<any>({
+    minWidth: undefined,
+    minHeight: undefined,
+    maxWidth: undefined,
+    maxHeight: undefined,
+    width: undefined,
+    height: undefined,
+    left: undefined,
+    top: undefined,
+    transform: undefined,
+  });
+
+  useEffect(() => {
+    if (isSelected) {
+      setPosition('fixed');
+    }
+  }, [isSelected]);
+
+  useDebounce(
+    () => {
+      if (isSelected) {
+        setDimensions({
+          ...dimensions,
+          width: undefined,
+          height: undefined,
+          left: '50%',
+          minWidth: '500px',
+          minHeight: '300px',
+          maxWidth: '90vw',
+          maxHeight: '90vh',
+          top: '50%',
+          transform: 'translateX(-50%) translateY(-50%)',
+        });
+      }
+    },
+    100,
+    [isSelected]
+  );
+
+  useDebounce(
+    () => {
+      if (!isSelected) {
+        setPosition(undefined);
+        setDimensions({
+          minHeight: undefined,
+          minWidth: undefined,
+          maxWidth: undefined,
+          maxHeight: undefined,
+          left: undefined,
+          top: undefined,
+          transform: 'translateX(0) translateY(0)',
+        });
+      }
+    },
+    220,
+    [isSelected]
+  );
+
+  const renderContent = () => {
+    const handleItemClick = (event) => {
+      if (expandable) {
+        if (isSelected) {
+          setDimensions(originalDimensions.current);
+        } else {
+          originalDimensions.current = {
+            left: ref.current.getBoundingClientRect()?.left,
+            top: ref.current.getBoundingClientRect()?.top,
+            width: ref.current.getBoundingClientRect()?.width,
+            height: ref.current.getBoundingClientRect()?.height,
+            transform: 'translateX(0) translateY(0)',
+          };
+
+          setDimensions({
+            left: ref.current.getBoundingClientRect()?.left,
+            top: ref.current.getBoundingClientRect()?.top,
+            width: ref.current.getBoundingClientRect()?.width,
+            height: ref.current.getBoundingClientRect()?.height,
+            transform: 'translateX(0) translateY(0)',
+          });
+        }
+        setIsSelected(!isSelected);
+      }
+
+      rest?.onClick?.(event);
+    };
+
+    const actualContent: string | React.ReactNode =
+      expandedContent && isSelected ? expandedContent : content;
+
+    const actualActions: IReqorePanelAction[] | undefined = isSelected
+      ? [...(actions || []), { icon: 'CloseLine', onClick: handleItemClick }]
+      : size(actions)
+      ? [{ icon: 'More2Fill', actions }]
+      : undefined;
+
+    return (
+      <>
+        {position && (
+          <>
+            <div style={{ ...originalDimensions.current }} />
+            <StyledBackdrop
+              zIndex={getAndIncreaseZIndex()}
+              blur={5}
+              closable
+              onClick={handleItemClick}
+            />
+          </>
+        )}
+        <ReqorePanel
+          {...rest}
+          flat={flat}
+          headerSize={3}
+          ref={ref}
+          minimal={minimal}
+          bottomActions={isSelected ? expandedActions : undefined}
+          style={{
+            ...style,
+            position,
+            zIndex: isSelected ? getAndIncreaseZIndex() : undefined,
+            ...dimensions,
+            transformOrigin: 'center',
+          }}
+          onClick={(expandable && !isSelected) || rest.onClick ? handleItemClick : undefined}
+          actions={actualActions}
+          className={`reqore-collection-item ${rest.className || ''}`}
+        >
+          <StyledCollectionItemContent
+            theme={theme}
+            opacity={rest.opacity}
+            providedHeight={isSelected ? undefined : maxContentHeight}
+            contentOverflows={!isSelected && sizes?.height > maxContentHeight}
+          >
+            <div ref={contentRef}>{actualContent}</div>
+          </StyledCollectionItemContent>
+          {size(tags) ? (
+            <>
+              <ReqoreSpacer height={10} />
+              <ReqoreTagGroup size={isSelected ? 'normal' : 'small'}>
+                {map(tags, (tagProps, index) => (
+                  <ReqoreTag key={index} {...tagProps} />
+                ))}
+              </ReqoreTagGroup>
+            </>
+          ) : null}
+        </ReqorePanel>
+      </>
+    );
+  };
+
+  return isSelected ? renderContent() : renderContent();
+};

package/src/components/Columns/index.tsx

@@ -26,6 +26,7 @@ export const StyledColumns = styled.div<IStyledColumns>`
     alignItems = 'normal',
   }: IStyledColumns) => css`
     grid-template-columns: repeat(${columns}, minmax(${minColumnWidth}, ${maxColumnWidth}));
+    grid-auto-rows: max-content;
     grid-gap: ${columnsGap};
     align-items: ${alignItems};
   `}

package/src/components/ControlGroup/index.tsx

@@ -69,8 +69,11 @@ const ReqoreControlGroup = ({
     {React.Children.map(children, (child) =>
       child
         ? React.cloneElement(child, {
-            minimal: minimal || child.props?.minimal,
-            size,
+            minimal:
+              child.props?.minimal || child.props?.minimal === false
+                ? child.props.minimal
+                : minimal,
+            size: child.props?.size || size,
             fluid,
           })
         : null

package/src/components/Drawer/index.tsx

@@ -16,7 +16,7 @@ import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
 
 export type TPosition = 'top' | 'bottom' | 'left' | 'right';
 
-export interface IReqoreDrawerProps extends IReqorePanelProps {
+export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size'> {
   children?: any;
   isOpen?: boolean;
   isHidden?: boolean;

package/src/components/Dropdown/index.tsx

@@ -54,6 +54,7 @@ const ReqoreDropdown = <T extends unknown = IReqoreButtonProps>({
           disabled: !size(items),
           ...rest,
           ...((componentProps || {}) as Object),
+          className: `${(componentProps as any)?.className || ''} reqore-dropdown-control`,
         } as T
       }
       noWrapper

package/src/components/Dropdown/list.tsx

@@ -3,6 +3,7 @@ import { IReqoreComponent } from '../../types/global';
 import ReqoreInput from '../Input';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
+import { ReqoreSpacer } from '../Spacer';
 
 export interface IReqoreDropdownListProps extends IReqoreComponent {
   items?: IReqoreMenuItemProps[];
@@ -58,13 +59,16 @@ const ReqoreDropdownList = ({
       maxHeight={height || '300px'}
     >
       {filterable && (
-        <ReqoreInput
-          value={query}
-          onChange={handleQueryChange}
-          placeholder='Filter'
-          autoFocus
-          onClearClick={() => setQuery('')}
-        />
+        <>
+          <ReqoreInput
+            value={query}
+            onChange={handleQueryChange}
+            placeholder='Filter'
+            autoFocus
+            onClearClick={() => setQuery('')}
+          />
+          <ReqoreSpacer height={10} />
+        </>
       )}
       {filteredItems.map((item: IReqoreMenuItemProps, index: number) => (
         <ReqoreMenuItem key={index} {...item} rightIcon={item.selected ? 'CheckLine' : undefined} />

package/src/components/InternalPopover/index.tsx

@@ -40,7 +40,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
       z-index: 999999;
       background-color: ${defaultColor};
       color: ${getReadableColor(theme, undefined, undefined, false, defaultColor)};
-      border-radius: 3.5px;
+      border-radius: 5.5px;
       box-shadow: rgba(31, 26, 34, 0.6) 0px 0px 4px;
     `;
   }}

package/src/components/Menu/index.tsx

@@ -22,7 +22,8 @@ export interface IReqoreMenuStyle extends IReqoreMenuProps {
 }
 
 const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
-  width: ${({ width }) => width || '160px'};
+  width: ${({ width }) => width || undefined};
+  min-width: ${({ width }) => (width ? undefined : '160px')};
   padding: 5px;
   max-height: ${({ maxHeight }) => maxHeight || undefined};
   overflow-y: auto;

package/src/components/Menu/item.tsx

@@ -90,7 +90,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
     useTooltip(targetRef.current, tooltip);
 
     return (
-      <ReqoreControlGroup stack fluid>
+      <ReqoreControlGroup stack={!!onRightIconClick} fluid>
         <ReqoreButton
           //@ts-ignore
           as={as}
@@ -113,11 +113,13 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
             icon={rightIcon}
             flat
             fixed
+            minimal={!onRightIconClick}
             customTheme={rest.customTheme}
             className='reqore-menu-item-right-icon'
             onClick={handleRightIconClick}
+            readOnly={!onRightIconClick}
             intent={intent}
-            active={selected}
+            active={selected && !!onRightIconClick}
             wrap={wrapText}
           />
         )}