@qoretechnologies/reqore 0.25.9 → 0.26.0

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/Effect/index.tsx

@@ -0,0 +1,134 @@
+import { reduce } from 'lodash';
+import styled, { css } from 'styled-components';
+import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
+
+export interface IReqoreEffect {
+  gradient?: {
+    type?: 'linear' | 'radial';
+    shape?: 'circle' | 'ellipse';
+    colors: { [key: number]: string };
+    direction?: string;
+  };
+  noWrap?: boolean;
+  color?: string;
+  spaced?: number;
+  weight?: number | 'thin' | 'light' | 'normal' | 'bold' | 'thick';
+  uppercase?: boolean;
+  textSize?: TSizes;
+  textAlign?: 'left' | 'center' | 'right';
+}
+
+export interface IReqoreTextEffectProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  effect: IReqoreEffect;
+  as?: React.ElementType;
+}
+
+export const StyledEffect = styled.span`
+  // If gradient was supplied
+  ${({ effect }: IReqoreTextEffectProps) => {
+    if (!effect || !effect.gradient) {
+      return undefined;
+    }
+
+    const gradientType: string = effect.gradient.type || 'linear';
+    const gradientColors = reduce(
+      effect.gradient.colors,
+      (colorsString, color, percentage) => `${colorsString}, ${color} ${percentage}%`,
+      ''
+    );
+    const gradientDirectionOrShape =
+      gradientType === 'linear'
+        ? effect.gradient.direction || 'to right'
+        : effect.gradient.shape || 'circle';
+    const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
+
+    return css`
+      background-image: ${gradient};
+    `;
+  }}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.spaced
+      ? css`
+          letter-spacing: ${effect.spaced}px;
+        `
+      : undefined}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.uppercase
+      ? css`
+          text-transform: uppercase;
+        `
+      : undefined}
+
+  ${({ effect }: IReqoreTextEffectProps) => {
+    if (!effect || !effect.weight) {
+      return undefined;
+    }
+
+    const weight =
+      typeof effect.weight === 'number' ? effect.weight : WEIGHT_TO_NUMBER[effect.weight];
+
+    return css`
+      font-weight: ${weight} !important;
+    `;
+  }}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.noWrap
+      ? css`
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        `
+      : undefined}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.color
+      ? css`
+          color: ${effect.color} !important;
+        `
+      : undefined}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.textSize
+      ? css`
+          font-size: ${TEXT_FROM_SIZE[effect.textSize]}px !important;
+        `
+      : undefined}
+
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.textAlign
+      ? css`
+          text-align: ${effect.textAlign};
+        `
+      : undefined}
+`;
+
+export const StyledTextEffect = styled(StyledEffect)`
+  ${({ effect }: IReqoreTextEffectProps) =>
+    effect && effect.gradient
+      ? css`
+          display: inline-block;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        `
+      : undefined}
+`;
+
+export const ReqoreEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
+  return (
+    <StyledEffect className='reqore-effect' {...rest}>
+      {children}
+    </StyledEffect>
+  );
+};
+
+export const ReqoreTextEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
+  return (
+    <StyledTextEffect className='reqore-text-effect' {...rest}>
+      {children}
+    </StyledTextEffect>
+  );
+};

package/src/components/Header/index.tsx

@@ -1,38 +1,43 @@
-import styled, { css } from 'styled-components';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { IWithReqoreEffect } from '../../types/global';
+import { StyledTextEffect } from '../Effect';
 
-export interface IReqoreHeaderStyle extends React.HTMLAttributes<HTMLHeadingElement> {
-  theme: IReqoreTheme;
+export interface IReqoreHeadingProps
+  extends IWithReqoreEffect,
+    React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
+  size?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface IReqoreHeadingStyle extends IReqoreHeadingProps {
+  theme: IReqoreTheme;
 }
 
-const style = ({ theme, intent }: IReqoreHeaderStyle) => css`
+export const StyledHeader = styled(StyledTextEffect)`
   margin: 0;
   padding: 0;
-  color: ${intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
-`;
-
-export const ReqoreH1: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h1<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH2: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h2<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
+  color: ${({ theme, intent }) =>
+    intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
 `;
 
-export const ReqoreH3: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h3<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH4: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h4<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH5: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h5<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH6: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h6<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
+export const ReqoreHeading = ({ size, children, ...props }: IReqoreHeadingProps) => {
+  const HTMLheaderElement = useMemo(() => {
+    return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }, [size]);
+
+  return (
+    <StyledHeader as={HTMLheaderElement} {...props}>
+      {children}
+    </StyledHeader>
+  );
+};
+
+export const ReqoreH1 = (props: IReqoreHeadingProps) => <ReqoreHeading size={1} {...props} />;
+export const ReqoreH2 = (props: IReqoreHeadingProps) => <ReqoreHeading size={2} {...props} />;
+export const ReqoreH3 = (props: IReqoreHeadingProps) => <ReqoreHeading size={3} {...props} />;
+export const ReqoreH4 = (props: IReqoreHeadingProps) => <ReqoreHeading size={4} {...props} />;
+export const ReqoreH5 = (props: IReqoreHeadingProps) => <ReqoreHeading size={5} {...props} />;
+export const ReqoreH6 = (props: IReqoreHeadingProps) => <ReqoreHeading size={6} {...props} />;

package/src/components/Input/index.tsx

@@ -13,8 +13,10 @@ import {
   IReqoreIntent,
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
+  IWithReqoreEffect,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -23,7 +25,8 @@ export interface IReqoreInputProps
     IReqoreDisabled,
     IReqoreReadOnly,
     IReqoreIntent,
-    IWithReqoreCustomTheme {
+    IWithReqoreCustomTheme,
+    IWithReqoreEffect {
   autoFocus?: boolean;
   tooltip?: string;
   width?: number;
@@ -37,6 +40,7 @@ export interface IReqoreInputProps
   icon?: IReqoreIconName;
   flat?: boolean;
   rounded?: boolean;
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -66,7 +70,7 @@ const StyledIconWrapper = styled.div<IReqoreInputStyle>`
   align-items: center;
 `;
 
-export const StyledInput = styled.input<IReqoreInputStyle>`
+export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   height: 100%;
   width: 100%;
   flex: 1;
@@ -96,25 +100,28 @@ export const StyledInput = styled.input<IReqoreInputStyle>`
       : undefined}
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : rgba(theme.main, 0.3)};
-  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
+    minimal ? 'transparent' : rgba(theme.main, 0.1)};
+  color: ${({ theme }: IReqoreInputStyle) =>
+    getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
 
   transition: all 0.2s ease-out;
 
   &:active,
   &:focus {
     background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : rgba(theme.main, 0.5)};
+      minimal ? 'transparent' : rgba(theme.main, 0.15)};
   }
 
   &::placeholder {
     transition: all 0.2s ease-out;
-    color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+    color: ${({ theme }) =>
+      rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.3)};
   }
 
   &:focus {
     &::placeholder {
-      color: ${({ theme }) => rgba(getReadableColor(theme), 0.5)};
+      color: ${({ theme }) =>
+        rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.5)};
     }
   }
 
@@ -174,6 +181,7 @@ const ReqoreInput = forwardRef(
         )}
         <StyledInput
           {...rest}
+          as='input'
           theme={theme}
           _size={size}
           minimal={minimal}

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/Menu/index.tsx

@@ -63,7 +63,7 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                   _insidePopover,
                   _popoverId,
                   customTheme: theme,
-                  wrapText,
+                  wrap: wrapText,
                 })
               : null
           )}