@qoretechnologies/reqore 0.26.1 → 0.27.1

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -10,6 +10,7 @@ import {
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -28,8 +29,10 @@ import {
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
 
 export interface IReqoreButtonProps
   extends React.HTMLAttributes<HTMLButtonElement>,
@@ -48,6 +51,10 @@ export interface IReqoreButtonProps
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
+  badge?: string | number | IReqoreTagProps;
+  description?: string | number;
+  maxWidth?: string;
+  textAlign?: 'left' | 'center' | 'right';
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -67,6 +74,7 @@ export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
   padding: 4px 0;
+  text-align: left;
 `;
 
 export const StyledActiveContent = styled.span`
@@ -77,7 +85,7 @@ export const StyledActiveContent = styled.span`
   filter: blur(10px);
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -92,7 +100,7 @@ export const StyledInActiveContent = styled.span`
   transition: all 0.2s ease-out;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -107,7 +115,7 @@ export const StyledInvisibleContent = styled.span`
   overflow: hidden;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       white-space: nowrap;
     `}
@@ -115,8 +123,8 @@ export const StyledInvisibleContent = styled.span`
 
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   display: flex;
-  text-align: left;
-  align-items: center;
+  flex-flow: column;
+  justify-content: center;
   margin: 0;
   font-weight: 600;
   position: relative;
@@ -129,13 +137,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
 
-  ${({ wrap }) =>
-    wrap &&
-    css`
-      max-height: ${({ size }) => SIZE_TO_PX[size]}px;
-    `}
-
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+  max-width: ${({ maxWidth }) => maxWidth || undefined};
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
 
@@ -233,82 +236,149 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
     border-color: ${({ minimal, theme, color }) =>
       minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
   }
+
+  ${StyledTextEffect} {
+    padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
+  }
 `;
 
-const ReqoreButton = forwardRef(
-  (
-    {
-      icon,
-      size = 'normal',
-      minimal,
-      children,
-      tooltip,
-      className,
-      fluid,
-      fixed,
-      intent,
-      active,
-      flat,
-      rightIcon,
-      customTheme,
-      wrap = true,
-      readOnly,
-      ...rest
-    }: IReqoreButtonProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const { animations } = useContext(ReqoreContext);
-    const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
-
-    /* A custom hook that is used to add a tooltip to the button. */
-    useTooltip(targetRef.current, tooltip);
-
-    // If color or intent was specified, set the color
-    const customColor = theme.main;
-    const _flat = minimal ? flat : flat !== false;
-
-    return (
-      <StyledButton
-        {...rest}
-        as='button'
-        theme={theme}
-        ref={targetRef}
-        fluid={fluid}
-        fixed={fixed}
-        minimal={minimal}
-        size={size}
-        color={customColor}
-        animate={animations.buttons}
-        flat={_flat}
-        active={active}
-        readOnly={readOnly}
-        className={`${className || ''} reqore-control reqore-button`}
-      >
-        {icon && (
-          <ReqoreIcon
-            icon={icon}
-            margin={children || rightIcon ? 'right' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
-          />
-        )}
-        {children && (
-          <StyledAnimatedTextWrapper>
-            <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
-            <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
-            <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
-          </StyledAnimatedTextWrapper>
-        )}
-        {rightIcon && (
-          <ReqoreIcon
-            icon={rightIcon}
-            margin={children ? 'left' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
+export const StyledButtonContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  flex-shrink: 0;
+  min-height: ${({ size }) => SIZE_TO_PX[size]}px;
+  ${({ wrap, description }) =>
+    !wrap && !description
+      ? css`
+          max-height: ${({ size }) => SIZE_TO_PX[size]}px;
+        `
+      : null}
+`;
+
+const ReqoreButton = memo(
+  forwardRef(
+    (
+      {
+        icon,
+        size = 'normal',
+        minimal,
+        children,
+        tooltip,
+        className,
+        fluid,
+        fixed,
+        intent,
+        active,
+        flat,
+        rightIcon,
+        customTheme,
+        wrap,
+        readOnly,
+        badge,
+        description,
+        maxWidth,
+        textAlign = 'left',
+        ...rest
+      }: IReqoreButtonProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const { animations } = useContext(ReqoreContext);
+      const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
+
+      /* A custom hook that is used to add a tooltip to the button. */
+      useTooltip(targetRef.current, tooltip);
+
+      // If color or intent was specified, set the color
+      const customColor = theme.main;
+      const _flat = minimal ? flat : flat !== false;
+      const color = customColor
+        ? minimal
+          ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+          : getReadableColorFrom(customColor, true)
+        : getReadableColor(theme, undefined, undefined, true);
+
+      const renderBadge = () => (
+        <>
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+          <ReqoreTag
+            size={getOneLessSize(size)}
+            badge
+            color={`${color}70`}
+            {...(typeof badge === 'string' || typeof badge === 'number' ? { label: badge } : badge)}
           />
-        )}
-      </StyledButton>
-    );
-  }
+        </>
+      );
+
+      return (
+        <StyledButton
+          {...rest}
+          as='button'
+          theme={theme}
+          ref={targetRef}
+          fluid={fluid}
+          fixed={fixed}
+          maxWidth={maxWidth}
+          minimal={minimal}
+          size={size}
+          color={customColor}
+          animate={animations.buttons}
+          flat={_flat}
+          active={active}
+          readOnly={readOnly}
+          wrap={wrap}
+          description={description}
+          className={`${className || ''} reqore-control reqore-button`}
+        >
+          <StyledButtonContent size={size} wrap={wrap} description={description}>
+            {icon && (
+              <>
+                <ReqoreIcon icon={icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                {children || badge || rightIcon ? (
+                  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+                ) : null}
+              </>
+            )}
+            {children && (
+              <StyledAnimatedTextWrapper textAlign={textAlign}>
+                <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
+                <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
+                <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
+                {badge && wrap ? renderBadge() : null}
+              </StyledAnimatedTextWrapper>
+            )}
+            {badge && !wrap ? renderBadge() : null}
+            {rightIcon && (
+              <>
+                {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
+                <ReqoreIcon
+                  icon={rightIcon}
+                  size={`${TEXT_FROM_SIZE[size]}px`}
+                  style={{ marginLeft: 'auto' }}
+                />
+              </>
+            )}
+          </StyledButtonContent>
+
+          {description && (
+            <ReqoreTextEffect
+              effect={{
+                textSize: getOneLessSize(size),
+                weight: 'light',
+                color: `${color}90`,
+                textAlign,
+              }}
+            >
+              {description}
+            </ReqoreTextEffect>
+          )}
+        </StyledButton>
+      );
+    }
+  )
 );
 
 export default ReqoreButton;

package/src/components/Collection/index.tsx

@@ -82,22 +82,21 @@ export const ReqoreCollection = ({
 
   const finalItems = filteredItems;
   const finalActions: (IReqorePanelAction[] | IReqorePanelAction)[] = useMemo(() => {
-    let actions = [];
+    let actions: (IReqorePanelAction[] | IReqorePanelAction)[] = [];
 
     if (filterable) {
       actions = [
         ...actions,
         {
-          customContent: () => (
-            <ReqoreInput
-              placeholder={`Filter ${size(items)} items`}
-              onClearClick={() => setQuery('')}
-              onChange={handleQueryChange}
-              value={query}
-              icon='Search2Line'
-              minimal={false}
-            />
-          ),
+          as: ReqoreInput,
+          props: {
+            placeholder: `Filter ${size(items)} items`,
+            onClearClick: () => setQuery(''),
+            onChange: handleQueryChange,
+            value: query,
+            icon: 'Search2Line',
+            minimal: false,
+          },
         },
       ];
     }

package/src/components/Collection/item.tsx

@@ -86,7 +86,7 @@ export const ReqoreCollectionItem = ({
   const [contentRef, sizes] = useMeasure();
   const originalDimensions = useRef(null);
   const [position, setPosition] = useState(undefined);
-  const theme = useReqoreTheme('main', rest.customTheme, rest.intent);
+  const theme = useReqoreTheme('main', rest.customTheme);
   const [dimensions, setDimensions] = useState<any>({
     minWidth: undefined,
     minHeight: undefined,

package/src/components/Drawer/index.tsx

@@ -1,10 +1,11 @@
 import { animated, useTransition } from '@react-spring/web';
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { SPRING_CONFIG } from '../../constants/animations';
+import { ReqoreContext } from '../..';
+import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { getMainBackgroundColor } from '../../helpers/colors';
@@ -171,6 +172,7 @@ export const ReqoreDrawer = ({
   height,
   ...rest
 }: IReqoreDrawerProps) => {
+  const { animations } = useContext(ReqoreContext);
   const theme = useReqoreTheme('main', customTheme, intent);
   const layout = useMemo(
     () =>
@@ -192,7 +194,7 @@ export const ReqoreDrawer = ({
 
   const transitions = useTransition(isOpen, {
     ...getSpringConfig(_isModal, position, floating),
-    config: SPRING_CONFIG,
+    config: animations.dialogs ? SPRING_CONFIG : SPRING_CONFIG_NO_ANIMATIONS,
   });
 
   const zIndex = useLatestZIndex();

package/src/components/Effect/index.tsx

@@ -1,7 +1,9 @@
 import { reduce } from 'lodash';
+import { HTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
-import { changeDarkness } from '../../helpers/colors';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import { changeDarkness, getColorFromMaybeIntentOrString } from '../../helpers/colors';
 
 export interface IReqoreEffect {
   gradient?: {
@@ -17,15 +19,24 @@ export interface IReqoreEffect {
   uppercase?: boolean;
   textSize?: TSizes;
   textAlign?: 'left' | 'center' | 'right';
+  glow?: {
+    size?: number;
+    color: TReqoreIntent | string;
+    inset?: boolean;
+    useBorder?: boolean;
+  };
 }
 
-export interface IReqoreTextEffectProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface IReqoreTextEffectProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
   effect: IReqoreEffect;
   as?: React.ElementType;
+  theme?: IReqoreTheme;
 }
 
 export const StyledEffect = styled.span`
+  transition: all 0.2s ease-in-out;
+
   // If gradient was supplied
   ${({ effect }: IReqoreTextEffectProps) => {
     if (!effect || !effect.gradient) {
@@ -51,6 +62,24 @@ export const StyledEffect = styled.span`
     `;
   }}
 
+  ${({ effect, theme }: IReqoreTextEffectProps) => {
+    if (!effect || !effect.glow) {
+      return undefined;
+    }
+
+    if (effect.glow.useBorder) {
+      return css`
+        border: ${effect.glow.size || 2}px solid
+          ${getColorFromMaybeIntentOrString(theme, effect.glow.color)} !important;
+      `;
+    }
+
+    return css`
+      box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 0 ${effect.glow.size || 2}px
+        ${getColorFromMaybeIntentOrString(theme, effect.glow.color)};
+    `;
+  }}
+
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.spaced
       ? css`
@@ -104,16 +133,18 @@ export const StyledEffect = styled.span`
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.textAlign
       ? css`
+          width: 100%;
           text-align: ${effect.textAlign};
         `
       : undefined}
 `;
 
 export const StyledTextEffect = styled(StyledEffect)`
+  display: inline-block;
+
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.gradient
       ? css`
-          display: inline-block;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         `

package/src/components/Header/index.tsx

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import styled from 'styled-components';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreEffect } from '../../types/global';
 import { StyledTextEffect } from '../Effect';
 
@@ -10,6 +11,7 @@ export interface IReqoreHeadingProps
     React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
   size?: 1 | 2 | 3 | 4 | 5 | 6;
+  customTheme?: Partial<IReqoreTheme>;
 }
 
 export interface IReqoreHeadingStyle extends IReqoreHeadingProps {
@@ -23,17 +25,20 @@ export const StyledHeader = styled(StyledTextEffect)`
     intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
 `;
 
-export const ReqoreHeading = ({ size, children, ...props }: IReqoreHeadingProps) => {
-  const HTMLheaderElement = useMemo(() => {
-    return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  }, [size]);
+export const ReqoreHeading = memo(
+  ({ size, children, customTheme, intent, ...props }: IReqoreHeadingProps) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+    const HTMLheaderElement = useMemo(() => {
+      return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }, [size]);
 
-  return (
-    <StyledHeader as={HTMLheaderElement} {...props}>
-      {children}
-    </StyledHeader>
-  );
-};
+    return (
+      <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props}>
+        {children}
+      </StyledHeader>
+    );
+  }
+);
 
 export const ReqoreH1 = (props: IReqoreHeadingProps) => <ReqoreHeading size={1} {...props} />;
 export const ReqoreH2 = (props: IReqoreHeadingProps) => <ReqoreHeading size={2} {...props} />;

package/src/components/Menu/divider.tsx

@@ -1,32 +1,40 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { IReqoreTheme } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { IWithReqoreEffect } from '../../types/global';
+import { IReqoreEffect, StyledTextEffect } from '../Effect';
 
 export interface IReqoreMenuDividerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreEffect {
   label?: string;
 }
 
-const StyledMenuDivider = styled.div<{ theme: IReqoreTheme }>`
+const StyledMenuDivider = styled(StyledTextEffect)`
   width: 100%;
   padding: 8px 0;
   background-color: ${({ theme }) => theme.main};
-  font-size: 11px;
-  text-transform: uppercase;
-  text-align: center;
-  letter-spacing: 2px;
-  font-weight: 600;
 
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined)};
 `;
 
 const ReqoreMenuDivider = forwardRef(
-  ({ label, className, ...rest }: IReqoreMenuDividerProps, ref: any) => (
+  ({ label, className, effect, ...rest }: IReqoreMenuDividerProps, ref: any) => (
     <StyledMenuDivider
+      as='div'
       {...rest}
       className={`${className || ''} reqore-menu-divider`}
       ref={ref}
+      effect={
+        {
+          uppercase: true,
+          spaced: 2,
+          textAlign: 'center',
+          textSize: 'small',
+          weight: 'bold',
+          ...effect,
+        } as IReqoreEffect
+      }
     >
       {label}
     </StyledMenuDivider>

package/src/components/Menu/index.tsx

@@ -15,6 +15,7 @@ export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes
   customTheme?: IReqoreCustomTheme;
   intent?: TReqoreIntent;
   wrapText?: boolean;
+  flat?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -48,7 +49,17 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
 
 const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
   (
-    { children, position, _insidePopover, _popoverId, customTheme, intent, wrapText, ...rest },
+    {
+      children,
+      position,
+      _insidePopover,
+      _popoverId,
+      customTheme,
+      intent,
+      wrapText,
+      flat = true,
+      ...rest
+    },
     ref: any
   ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
@@ -64,6 +75,7 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                   _popoverId,
                   customTheme: theme,
                   wrap: wrapText,
+                  flat,
                 })
               : null
           )}

package/src/components/Menu/item.tsx

@@ -50,6 +50,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       _popoverId,
       tooltip,
       intent,
+      flat = true,
       ...rest
     },
     ref: any
@@ -88,7 +89,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
           //@ts-ignore
           as={as}
           {...rest}
-          flat
+          flat={flat}
           className='reqore-menu-item'
           fluid
           onClick={handleClick}
@@ -103,7 +104,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
         {rightIcon && (
           <ReqoreButton
             icon={rightIcon}
-            flat
+            flat={flat}
             fixed
             minimal={!onRightIconClick}
             customTheme={rest.customTheme}