@qoretechnologies/reqore 0.43.0 → 0.45.0

package/src/components/Menu/index.tsx

@@ -1,141 +0,0 @@
-import { Resizable, ResizableProps } from 're-resizable';
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { HALF_PADDING_FROM_SIZE, RADIUS_FROM_SIZE } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { changeDarkness, changeLightness, getMainBackgroundColor } from '../../helpers/colors';
-import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import {
-  IReqoreComponent,
-  IWithReqoreMinimal,
-  IWithReqoreSize,
-  IWithReqoreTransparent,
-} from '../../types/global';
-import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
-
-export interface IReqoreMenuProps
-  extends IReqoreComponent,
-    IWithReqoreMinimal,
-    IWithReqoreTransparent,
-    IWithReqoreSize,
-    React.HTMLAttributes<HTMLDivElement> {
-  children: any;
-  position?: 'left' | 'right';
-  width?: string;
-  maxHeight?: string;
-  customTheme?: IReqoreCustomTheme;
-  intent?: TReqoreIntent;
-  wrapText?: boolean;
-  flat?: boolean;
-  rounded?: boolean;
-  padded?: boolean;
-  itemGap?: IReqoreControlGroupProps['gapSize'];
-  resizable?: Omit<ResizableProps, 'enable'> & {
-    enable?: Pick<ResizableProps['enable'], 'left' | 'right'>;
-  };
-  showResizableBorder?: boolean;
-}
-
-export interface IReqoreMenuStyle extends IReqoreMenuProps {
-  theme: IReqoreTheme;
-}
-
-const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
-  width: ${({ width }) => width || undefined};
-  min-width: ${({ width }) => (width ? undefined : '160px')};
-  padding: ${({ padded = true, _size }) =>
-    padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
-  max-height: ${({ maxHeight }) => maxHeight || undefined};
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  background-color: ${({ theme, transparent }) =>
-    transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
-  border-radius: ${({ rounded, _size }) => (rounded ? `${RADIUS_FROM_SIZE[_size]}px` : `0`)};
-
-  ${({ theme, position, _size, padded, isResizableLeft, showResizableBorder }) =>
-    position === 'right' || (isResizableLeft && showResizableBorder)
-      ? css`
-          border-left: 1px ${isResizableLeft && showResizableBorder ? 'dashed' : 'solid'}
-            ${changeLightness(theme.main, 0.05)};
-          padding-left: ${!padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
-        `
-      : undefined}
-
-  ${({ theme, position, _size, padded, isResizableRight, showResizableBorder }) =>
-    position === 'left' || (isResizableRight && showResizableBorder)
-      ? css`
-          border-right: 1px ${isResizableRight && showResizableBorder ? 'dashed' : 'solid'}
-            ${changeLightness(theme.main, 0.05)};
-          padding-right: ${!padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
-        `
-      : undefined}
-`;
-
-const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
-  (
-    {
-      children,
-      position,
-      _insidePopover,
-      _popoverId,
-      customTheme,
-      intent,
-      wrapText,
-      flat = true,
-      minimal,
-      size = 'normal',
-      itemGap,
-      resizable,
-      ...rest
-    }: IReqoreMenuProps,
-    ref
-  ) => {
-    const theme = useReqoreTheme('main', customTheme, intent);
-    const { targetRef } = useCombinedRefs(ref);
-    const { clone } = useCloneThroughFragments((props) => ({
-      _insidePopover: props?._insidePopover ?? _insidePopover,
-      _popoverId: props?._popoverId ?? _popoverId,
-      customTheme: props?.customTheme || theme,
-      wrap: 'wrap' in (props || {}) ? props.wrap : wrapText,
-      flat: 'flat' in (props || {}) ? props.flat : flat,
-      minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
-      size: 'size' in (props || {}) ? props.size : size,
-    }));
-
-    return (
-      <ReqoreThemeProvider theme={theme}>
-        <StyledReqoreMenu
-          {...rest}
-          {...resizable}
-          as={!!resizable ? Resizable : 'div'}
-          isResizableRight={resizable?.enable?.right}
-          isResizableLeft={resizable?.enable?.left}
-          flat={flat}
-          position={position}
-          _size={size}
-          className={`${rest.className || ''} reqore-menu`}
-          theme={theme}
-          ref={(curRef) => {
-            let _ref = curRef;
-
-            if (curRef?.resizable) {
-              _ref = curRef.resizable;
-            }
-
-            targetRef.current = _ref;
-          }}
-        >
-          <ReqoreControlGroup vertical gapSize={itemGap} fluid>
-            {clone(children)}
-          </ReqoreControlGroup>
-        </StyledReqoreMenu>
-      </ReqoreThemeProvider>
-    );
-  }
-);
-
-export default ReqoreMenu;

package/src/components/Menu/item.tsx

@@ -1,137 +0,0 @@
-import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
-import { useContext } from 'use-context-selector';
-import { ReqoreButton, ReqoreControlGroup } from '../..';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import PopoverContext from '../../context/PopoverContext';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { IReqoreComponent } from '../../types/global';
-import { IReqoreButtonProps } from '../Button';
-
-export interface IReqoreMenuItemProps extends IReqoreComponent, IReqoreButtonProps {
-  label?: string | number;
-  selected?: boolean;
-  itemId?: string;
-  onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
-  onClick?: (event: React.MouseEvent<HTMLElement>, itemId?: string) => void;
-  scrollIntoView?: boolean;
-}
-
-export interface IReqoreMenuItemStyle {
-  theme: IReqoreTheme;
-  selected: boolean;
-  disabled: boolean;
-  intent?: TReqoreIntent;
-}
-
-export interface IReqoreMenuItemRightIconStyle {
-  theme: IReqoreTheme;
-  interactive?: boolean;
-  intent?: TReqoreIntent;
-}
-
-const ReqoreMenuItem = memo(
-  forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
-    (
-      {
-        children,
-        label,
-        icon,
-        rightIcon,
-        as,
-        selected,
-        onClick,
-        onRightIconClick,
-        disabled,
-        itemId,
-        _insidePopover,
-        _popoverId,
-        tooltip,
-        intent,
-        flat = true,
-        scrollIntoView,
-        ...rest
-      }: IReqoreMenuItemProps,
-      ref
-    ) => {
-      const { removePopover } = useContext(PopoverContext);
-      const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
-      const [itemRef, setItemRef] = useState<HTMLButtonElement | null>(null);
-
-      const handleClick = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
-          event.persist();
-
-          onClick?.(event, itemId);
-
-          if (_insidePopover && _popoverId) {
-            removePopover!(_popoverId);
-          }
-        },
-        [itemId, _insidePopover, _popoverId, onClick, removePopover]
-      );
-
-      const handleRightIconClick = useCallback(
-        (event: React.MouseEvent<HTMLSpanElement>) => {
-          event.persist();
-          event.stopPropagation();
-
-          if (onRightIconClick) {
-            onRightIconClick(itemId, event);
-
-            if (_insidePopover && _popoverId) {
-              removePopover!(_popoverId);
-            }
-          }
-        },
-        [itemId, _insidePopover, _popoverId, onRightIconClick, removePopover]
-      );
-
-      useEffect(() => {
-        if (scrollIntoView && itemRef) {
-          itemRef.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'center' });
-        }
-      }, [itemRef, scrollIntoView]);
-
-      return (
-        <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
-          <ReqoreButton
-            as={as}
-            {...rest}
-            flat={flat}
-            className={`${rest.className || ''} reqore-menu-item`}
-            fluid
-            onClick={handleClick}
-            active={selected}
-            ref={(ref) => {
-              targetRef.current = ref || undefined;
-              setItemRef(ref);
-            }}
-            disabled={disabled}
-            intent={intent}
-            icon={icon}
-            rightIcon={onRightIconClick ? undefined : rightIcon}
-            tooltip={tooltip}
-          >
-            {label || children}
-          </ReqoreButton>
-          {rightIcon && onRightIconClick ? (
-            <ReqoreButton
-              icon={rightIcon}
-              flat={flat}
-              fixed
-              minimal={!onRightIconClick}
-              customTheme={rest.customTheme}
-              className='reqore-menu-item-right-icon'
-              onClick={handleRightIconClick}
-              readOnly={!onRightIconClick}
-              intent={intent}
-              active={selected && !!onRightIconClick}
-            />
-          ) : null}
-        </ReqoreControlGroup>
-      );
-    }
-  )
-);
-
-export default ReqoreMenuItem;

package/src/components/Menu/section.tsx

@@ -1,81 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { TReqoreIntent } from '../../constants/theme';
-import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
-import { IReqoreComponent } from '../../types/global';
-import ReqoreButton, { IReqoreButtonProps } from '../Button';
-import ReqoreControlGroup from '../ControlGroup';
-
-export interface IReqoreMenuSectionProps extends IReqoreComponent, IReqoreButtonProps {
-  children: any;
-  collapsible?: boolean;
-  isCollapsed?: boolean;
-  onCollapseChange?: (collapsed: boolean) => void;
-  activeIntent?: TReqoreIntent;
-}
-
-export const ReqoreMenuSection = ({
-  children,
-  _insidePopover,
-  _popoverId,
-  customTheme,
-  wrap,
-  flat,
-  minimal,
-  collapsible = true,
-  isCollapsed,
-  activeIntent,
-  onCollapseChange,
-  ...rest
-}: IReqoreMenuSectionProps) => {
-  const [_isCollapsed, setIsCollapsed] = useState(isCollapsed);
-
-  useEffect(() => {
-    setIsCollapsed(isCollapsed);
-  }, [isCollapsed]);
-
-  const handleCollapseChange = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      if (collapsible) {
-        setIsCollapsed(!_isCollapsed);
-        onCollapseChange?.(!_isCollapsed);
-      }
-
-      rest.onClick?.(event);
-    },
-    [_isCollapsed, onCollapseChange, collapsible, rest.onClick]
-  );
-
-  const { clone } = useCloneThroughFragments((props) => ({
-    _insidePopover: props?._insidePopover ?? _insidePopover,
-    _popoverId: props?._popoverId ?? _popoverId,
-    customTheme: props?.customTheme || customTheme,
-    wrap: 'wrap' in (props || {}) ? props.wrap : wrap,
-    flat: 'flat' in (props || {}) ? props.flat : flat,
-    minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
-  }));
-
-  return (
-    <ReqoreControlGroup vertical fluid className='reqore-menu-section'>
-      <ReqoreButton
-        wrap={wrap}
-        flat={flat}
-        minimal={minimal}
-        active={collapsible && !_isCollapsed}
-        {...rest}
-        className={`${rest.className || ''} reqore-menu-section-toggle`}
-        intent={collapsible && !_isCollapsed ? activeIntent : rest.intent}
-        fluid
-        onClick={handleCollapseChange}
-        rightIcon={rest.rightIcon || (collapsible ? 'ArrowRightSLine' : 'ArrowDownSLine')}
-        rightIconProps={{
-          rotation: collapsible && !_isCollapsed ? 90 : 0,
-        }}
-      />
-      {!_isCollapsed || !collapsible ? (
-        <ReqoreControlGroup vertical fluid style={{ paddingLeft: '10px' }}>
-          {clone(children)}
-        </ReqoreControlGroup>
-      ) : null}
-    </ReqoreControlGroup>
-  );
-};

package/src/components/Message/index.tsx

@@ -1,220 +0,0 @@
-import { animated } from '@react-spring/web';
-import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
-import { useMount, useUnmount } from 'react-use';
-import { IReqoreTheme } from '../../constants/theme';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { getColorFromMaybeString } from '../../helpers/colors';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { useTooltip } from '../../hooks/useTooltip';
-import {
-  IReqoreIntent,
-  IWithReqoreCustomTheme,
-  IWithReqoreEffect,
-  IWithReqoreFixed,
-  IWithReqoreFluid,
-  IWithReqoreMinimal,
-  IWithReqoreOpaque,
-  IWithReqoreSize,
-  IWithReqoreTooltip,
-} from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
-import { TReqoreEffectColor } from '../Effect';
-import { ReqoreHeading } from '../Header';
-import ReqoreIcon, { IReqoreIconProps } from '../Icon';
-import {
-  StyledIconWrapper,
-  StyledNotificationContent,
-  StyledNotificationContentWrapper,
-  StyledNotificationInnerContent,
-  StyledReqoreNotification,
-  typeToIcon,
-} from '../Notifications/notification';
-import { ReqoreSpinner } from '../Spinner';
-
-export interface IReqoreMessageProps
-  extends IWithReqoreCustomTheme,
-    IWithReqoreEffect,
-    IWithReqoreSize,
-    IReqoreIntent,
-    IWithReqoreMinimal,
-    IWithReqoreOpaque,
-    IWithReqoreTooltip,
-    IWithReqoreFixed,
-    IWithReqoreFluid,
-    React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  children: any;
-  icon?: IReqoreIconName;
-  iconColor?: TReqoreEffectColor;
-  iconProps?: IReqoreIconProps;
-  onClose?: () => any;
-  onClick?: () => any;
-  duration?: number;
-  onFinish?: () => any;
-  flat?: boolean;
-  hasShadow?: boolean;
-  margin?: 'top' | 'bottom' | 'both' | 'none';
-}
-
-export interface IReqoreNotificationStyle extends IReqoreMessageProps {
-  theme: IReqoreTheme;
-  clickable?: boolean;
-  timeout?: number;
-}
-
-const ReqoreMessage = memo(
-  forwardRef<HTMLDivElement, IReqoreMessageProps>(
-    (
-      {
-        intent,
-        icon,
-        title,
-        children,
-        onClose,
-        onClick,
-        duration,
-        onFinish,
-        flat,
-        minimal,
-        size = 'normal',
-        customTheme,
-        iconColor,
-        tooltip,
-        fixed,
-        fluid,
-        iconProps,
-        ...rest
-      },
-      ref
-    ) => {
-      const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
-      const theme = useReqoreTheme('main', customTheme, intent);
-      const { targetRef } = useCombinedRefs(ref);
-      const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
-
-      useTooltip(itemRef, tooltip);
-
-      useMount(() => {
-        if (duration) {
-          setInternalTimeout(
-            setTimeout(() => {
-              onFinish && onFinish();
-            }, duration)
-          );
-        }
-      });
-
-      useEffect(() => {
-        if (internalTimeout) {
-          clearTimeout(internalTimeout);
-          setInternalTimeout(
-            setTimeout(() => {
-              onFinish && onFinish();
-            }, duration)
-          );
-        }
-      }, [duration, intent, children, title]);
-
-      useUnmount(() => {
-        if (internalTimeout) {
-          clearTimeout(internalTimeout);
-        }
-      });
-
-      const leftIcon: IReqoreIconName | undefined = useMemo(
-        () => icon || (intent ? typeToIcon[intent] : undefined),
-        [icon, intent]
-      );
-
-      return (
-        <ReqoreThemeProvider>
-          <StyledReqoreNotification
-            {...rest}
-            effect={{
-              interactive: !!onClick,
-              ...rest?.effect,
-            }}
-            as={animated.div}
-            key={`${duration}${intent}${title}${children}`}
-            intent={intent}
-            timeout={duration}
-            clickable={!!onClick}
-            onClick={onClick}
-            flat={flat}
-            minimal={minimal}
-            asMessage
-            fluid={fluid}
-            fixed={fixed}
-            className={`${rest?.className || ''} reqore-message`}
-            ref={(ref) => {
-              targetRef.current = ref;
-              setItemRef(ref);
-            }}
-            size={size}
-            theme={theme}
-          >
-            <StyledNotificationContentWrapper size={size} theme={theme}>
-              {leftIcon ? (
-                <>
-                  {intent === 'pending' ? (
-                    <ReqoreSpinner
-                      size={size}
-                      iconColor={iconColor}
-                      type={5}
-                      iconMargin={'right'}
-                      iconProps={iconProps}
-                    />
-                  ) : (
-                    <ReqoreIcon
-                      icon={leftIcon}
-                      margin={'right'}
-                      size={size}
-                      color={iconColor}
-                      {...iconProps}
-                    />
-                  )}
-                </>
-              ) : null}
-              <StyledNotificationInnerContent>
-                {title && (
-                  <ReqoreHeading
-                    size={size}
-                    customTheme={
-                      rest.effect?.color
-                        ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
-                        : undefined
-                    }
-                  >
-                    {title}
-                  </ReqoreHeading>
-                )}
-
-                <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-                  {children}
-                </StyledNotificationContent>
-              </StyledNotificationInnerContent>
-            </StyledNotificationContentWrapper>
-            {onClose && (
-              <StyledIconWrapper
-                theme={theme}
-                size={size}
-                intent={intent}
-                clickable
-                className='reqore-message-close'
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onClose && onClose();
-                }}
-              >
-                <ReqoreIcon icon='CloseFill' margin='both' size={size} />
-              </StyledIconWrapper>
-            )}
-          </StyledReqoreNotification>
-        </ReqoreThemeProvider>
-      );
-    }
-  )
-);
-
-export default ReqoreMessage;

package/src/components/Modal/index.tsx

@@ -1,26 +0,0 @@
-import { IReqoreTheme } from '../../constants/theme';
-import { IReqoreDrawerProps, ReqoreDrawer } from '../Drawer';
-
-export interface IReqoreModalProps extends Omit<IReqoreDrawerProps, 'position'> {
-  position?: 'top' | 'center' | 'bottom';
-  width?: string;
-  height?: string;
-}
-
-export interface IReqoreModalStyle extends IReqoreModalProps {
-  theme: IReqoreTheme;
-  zIndex?: number;
-}
-
-export const ReqoreModal = ({ width = '80vw', height = 'auto', ...rest }: IReqoreModalProps) => {
-  return (
-    <ReqoreDrawer
-      {...rest}
-      width={width}
-      height={height}
-      position='left'
-      _isModal
-      className={`${rest.className || ''} reqore-modal`}
-    />
-  );
-};