@qoretechnologies/reqore 0.31.2 → 0.32.2

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -21,6 +21,7 @@ import {
 } from '../../helpers/colors';
 import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
@@ -101,6 +102,7 @@ export interface IReqorePanelProps
   transparent?: boolean;
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
+  responsiveTitle?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -186,6 +188,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
+  flex-flow: ${({ responsive, isMobile }) => (responsive ? (isMobile ? 'column' : 'row') : 'row')};
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
@@ -293,6 +296,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       iconProps = {},
       fluid,
       responsiveActions = true,
+      responsiveTitle = true,
       size: panelSize = 'normal',
       ...rest
     }: IReqorePanelProps,
@@ -306,9 +310,11 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
+    const isMobile = useReqoreProperty('isMobile');
     const { targetRef } = useCombinedRefs(ref);
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     useUpdateEffect(() => {
       setIsCollapsed(!!isCollapsed);
@@ -418,7 +424,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               stack
               customTheme={rest.customTheme || theme}
               size={rest.size}
-              fixed
+              fixed={rest.fixed}
               fluid={rest.fluid}
               key={index}
             >
@@ -430,9 +436,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
+              fixed
               {...rest}
               key={index}
-              fixed
               label={label}
               items={actions}
               intent={intent}
@@ -449,7 +455,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             <CustomElement
               fixed
               {...props}
-              key={index}
+              key={props.key || index}
+              reactKey={props.key || index}
               customTheme={props.customTheme || theme}
               onClick={(e: React.MouseEvent<any>) => {
                 e.stopPropagation();
@@ -461,9 +468,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
         return (
           <ReqoreButton
+            fixed
             {...rest}
             id={id}
-            fixed
             key={index}
             className={className}
             customTheme={rest.customTheme || theme}
@@ -513,7 +520,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       <StyledPanel
         {...rest}
         as={rest.as || 'div'}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         isCollapsed={_isCollapsed}
         rounded={rounded}
         flat={flat}
@@ -536,6 +546,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
+            responsive={responsiveTitle}
+            isMobile={isMobile}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
@@ -579,7 +591,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             {hasResponsiveActions(actions) && (
               <ReqoreControlGroup
                 responsive={responsiveActions}
-                fluid={responsiveActions}
+                fluid={responsiveActions || isMobile}
                 horizontalAlign='flex-end'
                 customTheme={theme}
                 size={panelSize}
@@ -589,7 +601,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
-                <ReqoreControlGroup fixed horizontalAlign='flex-end' size={panelSize}>
+                <ReqoreControlGroup
+                  fixed={!isMobile}
+                  fluid={isMobile}
+                  horizontalAlign='flex-end'
+                  size={panelSize}
+                >
                   {actions.map(renderNonResponsiveActions)}
                   {collapsible && (
                     <ReqoreButton

package/src/components/Sidebar/item.tsx

@@ -1,11 +1,9 @@
 import classnames from 'classnames';
 import map from 'lodash/map';
-import { useContext } from 'react';
 import { useMount } from 'react-use';
 import { IQorusSidebarItem } from '.';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import { getMainColor, getReadableColor } from '../../helpers/colors';
 import { isActiveMulti } from '../../helpers/sidebar';
 import ReqoreIcon from '../Icon';
@@ -202,7 +200,7 @@ const SidebarItemWrapper = ({
   useNativeTitle,
   onClick,
 }: SidebarItemProps) => {
-  const theme: IReqoreTheme = useContext(ThemeContext);
+  const theme: IReqoreTheme = useReqoreTheme();
 
   useMount(() => {
     if (

package/src/components/Tag/index.tsx

@@ -1,8 +1,8 @@
 import _size from 'lodash/size';
 import { rgba } from 'polished';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import {
   BADGE_SIZE_TO_PX,
   PADDING_FROM_SIZE,
@@ -12,7 +12,6 @@ import {
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import {
   changeLightness,
   getColorFromMaybeString,
@@ -264,9 +263,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+    const theme: IReqoreTheme = useReqoreTheme();
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     // If color or intent was specified, set the color
     const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
@@ -292,7 +292,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}

package/src/components/Textarea/index.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { IReqoreAutoFocusRules, useAutoFocus } from '../../hooks/useAutoFocus';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import useAutosizeTextArea from '../../hooks/useTextareaAutoSize';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -44,6 +45,7 @@ export interface IReqoreTextareaProps
   fixed?: boolean;
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
+  focusRules?: IReqoreAutoFocusRules;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -138,11 +140,13 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       value,
       onChange,
       fixed,
+      focusRules,
       ...rest
     }: IReqoreTextareaProps,
     ref
   ) => {
     const { targetRef }: any = useCombinedRefs(ref);
+    const [inputRef, setInputRef] = useState<HTMLTextAreaElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
     const [_value, setValue] = useState(value || '');
 
@@ -150,8 +154,9 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       setValue(value || '');
     }, [value]);
 
-    useTooltip(targetRef?.current, tooltip);
-    useAutosizeTextArea(targetRef?.current, _value, scaleWithContent);
+    useTooltip(inputRef, tooltip);
+    useAutosizeTextArea(inputRef, _value, scaleWithContent);
+    useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
 
     return (
       <StyledTextareaWrapper
@@ -163,6 +168,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         _size={size}
         theme={theme}
         style={wrapperStyle}
+        ref={targetRef}
       >
         <StyledTextarea
           {...rest}
@@ -177,20 +183,19 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
           as='textarea'
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={targetRef}
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           rounded={rounded}
           rows={1}
           value={_value}
+          readonly={rest?.readOnly}
+        />
+        <ReqoreInputClearButton
+          enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
+          show={_value && _value !== ''}
+          onClick={onClearClick}
+          size={size}
         />
-        {!rest.readOnly && (
-          <ReqoreInputClearButton
-            enabled={!rest?.disabled && !!(onClearClick && onChange)}
-            show={_value && _value !== ''}
-            onClick={onClearClick}
-            size={size}
-          />
-        )}
       </StyledTextareaWrapper>
     );
   }

package/src/components/Tree/index.tsx

@@ -1,10 +1,9 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreTextarea } from '../..';
+import { ReqoreMessage, ReqorePanel, ReqoreTextarea, useReqoreProperty } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ReqoreContext from '../../context/ReqoreContext';
-import { getLineCount, getTypeFromValue } from '../../helpers/utils';
+import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
@@ -45,7 +44,7 @@ export const ReqoreTree = ({
   const [items, setItems] = useState({});
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
-  const { addNotification } = useContext(ReqoreContext);
+  const addNotification = useReqoreProperty('addNotification');
 
   const handleCopyClick = () => {
     setMode('copy');
@@ -173,7 +172,6 @@ export const ReqoreTree = ({
   }
 
   const textData: string = renderText(data);
-  const lineCount: number = getLineCount(textData);
 
   return (
     <ReqorePanel
@@ -224,12 +222,11 @@ export const ReqoreTree = ({
         <ReqoreTextarea
           className='reqore-tree-textarea'
           id='tree-content'
-          defaultValue={textData}
+          value={textData}
           scaleWithContent
           size={size}
           fluid
           readOnly
-          rows={lineCount > 20 ? 20 : lineCount}
         />
       )}
     </ReqorePanel>

package/src/containers/PopoverProvider.tsx

@@ -1,9 +1,9 @@
 import { size } from 'lodash';
 import React, { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import { useReqoreProperty } from '..';
 import Popover from '../components/InternalPopover';
 import PopoverContext from '../context/PopoverContext';
 import { IPopoverOptions } from '../hooks/usePopover';
-import { useReqore } from '../hooks/useReqore';
 
 export interface IReqorePopoverProviderProps {
   children: any;
@@ -17,7 +17,7 @@ export interface IPopoverData extends IPopoverOptions {
 
 const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
   const [popovers, setPopovers] = useState<IPopoverData[]>([]);
-  const { closePopoversOnEscPress } = useReqore();
+  const closePopoversOnEscPress = useReqoreProperty('closePopoversOnEscPress');
 
   const handleClick = useCallback(
     (event: MouseEvent) => {

package/src/containers/ReqoreProvider.tsx

@@ -2,14 +2,16 @@ import { size } from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
 import { ReqoreModal, ReqoreTextEffect } from '..';
 import ReqoreNotificationsWrapper from '../components/Notifications';
 import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { TReqoreIntent } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
+import ThemeContext from '../context/ThemeContext';
 import { IReqoreIconName } from '../types/icons';
 import { IReqoreOptions } from './UIProvider';
 
@@ -50,6 +52,7 @@ export interface IReqoreConfirmationModal {
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
+  const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   const latestZIndex = useRef<number>(9000);
 
   const isMobile = process.env.NODE_ENV === 'test' ? false : useMedia('(max-width: 480px)');
@@ -114,6 +117,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
       <ReqoreContext.Provider
         value={{
           notifications,
+          theme,
           addNotification,
           removeNotification,
           confirmAction,

package/src/containers/ThemeProvider.tsx

@@ -1,22 +1,12 @@
-import { useContext } from 'react';
 import { ThemeProvider } from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 
-const ReqoreThemeProvider = ({
-  children,
-  theme,
-}: {
-  children: any;
-  theme?: IReqoreTheme;
-}) => {
+const ReqoreThemeProvider = ({ children, theme }: { children: any; theme?: IReqoreTheme }) => {
   const _theme: IReqoreTheme = useContext(ThemeContext);
 
-  return (
-    <ThemeProvider theme={theme || _theme}>
-      <>{children}</>
-    </ThemeProvider>
-  );
+  return <ThemeProvider theme={theme || _theme}>{children}</ThemeProvider>;
 };
 
 export default ReqoreThemeProvider;

package/src/context/PopoverContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { IPopoverData } from '../containers/PopoverProvider';
 
 export default createContext<{

package/src/context/ReqoreContext.tsx

@@ -1,4 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
+import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
 import { IReqoreOptions } from '../containers/UIProvider';
 
@@ -15,6 +16,7 @@ export interface IReqoreContext {
   readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
   readonly latestZIndex?: number;
+  theme: IReqoreTheme;
 }
 
 export default createContext<IReqoreContext>({
@@ -27,4 +29,5 @@ export default createContext<IReqoreContext>({
     dialogs: true,
   },
   closePopoversOnEscPress: true,
+  theme: DEFAULT_THEME,
 });

package/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 
 export default createContext<IReqoreTheme>(DEFAULT_THEME);

package/src/hooks/useAutoFocus.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
+
+export type TReqoreAutoFocusType = 'auto' | 'keypress';
+
+export interface IReqoreAutoFocusRules {
+  type: TReqoreAutoFocusType;
+  viewportOnly?: boolean;
+  viewport?: HTMLElement;
+  viewportMargin?: string;
+  shortcut?: 'letters' | 'numbers' | string | ('letters' | 'numbers' | string)[];
+  clearOnFocus?: boolean;
+}
+
+export const useAutoFocus = (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  rules?: IReqoreAutoFocusRules,
+  onChange?: (e: unknown) => void
+) => {
+  const isInViewport = useRef<boolean>(false);
+  const observer = useRef<IntersectionObserver>(null);
+
+  const focus = useCallback(() => {
+    if (!rules.viewportOnly || isInViewport.current) {
+      if (rules.clearOnFocus) {
+        onChange?.({ target: { value: '' } } as any);
+      }
+
+      element.setSelectionRange(-1, -1);
+      element.focus();
+    }
+  }, [element, rules, isInViewport.current]);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Check if this event came from another html input
+    if (
+      e.target &&
+      ((e.target as HTMLElement).tagName === 'INPUT' ||
+        (e.target as HTMLElement).tagName === 'TEXTAREA')
+    ) {
+      return;
+    }
+
+    const shortcut = Array.isArray(rules?.shortcut) ? rules?.shortcut : [rules?.shortcut];
+
+    if (shortcut.includes('letters') && e.key.length === 1 && e.key.match(/[a-z]/i)) {
+      focus();
+    }
+
+    if (shortcut.includes('numbers') && e.key.length === 1 && e.key.match(/[0-9]/i)) {
+      focus();
+    }
+
+    if (shortcut.includes(e.key)) {
+      focus();
+    }
+  };
+
+  useUpdateEffect(() => {
+    if (element && rules) {
+      if (rules.viewportOnly) {
+        observer.current = new IntersectionObserver(
+          (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                isInViewport.current = true;
+              } else {
+                isInViewport.current = false;
+              }
+              // If the focus type is auto, we focus the element now if its in the viewport
+              // and set the observer to null so it doesn't run again
+              if (rules.type === 'auto' && isInViewport.current) {
+                element.focus();
+                observer.current?.disconnect();
+                observer.current = null;
+              }
+            });
+          },
+          {
+            root: rules?.viewport,
+            rootMargin: rules?.viewportMargin,
+            threshold: 0.8,
+          }
+        );
+
+        observer.current.observe(element);
+      } else if (rules.type === 'auto') {
+        focus();
+      }
+    }
+  }, [element]);
+
+  useUnmount(() => {
+    observer.current?.disconnect();
+  });
+
+  useEffect(() => {
+    if (element && rules && rules.type === 'keypress') {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [element, rules]);
+};

package/src/hooks/useLatestZIndex.ts

@@ -1,8 +1,10 @@
-import { useContext, useMemo } from 'react';
-import { ReqoreContext } from '..';
+import { useMemo } from 'react';
+import { useReqoreProperty } from './useReqoreContext';
 
 const useLatestZIndex = (): number => {
-  const { getAndIncreaseZIndex, latestZIndex } = useContext(ReqoreContext);
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+  const latestZIndex = useReqoreProperty('latestZIndex');
+
   const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
 
   return zIndex;

package/src/hooks/usePopover.tsx

@@ -1,7 +1,9 @@
 import { Placement } from '@popperjs/core';
-import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
+import { useReqoreProperty } from '..';
 import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
@@ -11,7 +13,6 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
-import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -78,7 +79,7 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
-  const { tooltips } = useReqore();
+  const tooltips = useReqoreProperty('tooltips');
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 

package/src/hooks/useReqore.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext } from 'use-context-selector';
 import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
 
 export const useReqore = (): IReqoreContext => {

package/src/hooks/useReqoreContext.ts

@@ -0,0 +1,16 @@
+import { useContextSelector } from 'use-context-selector';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqoreProperty = <T extends keyof IReqoreContext>(
+  property: T
+): IReqoreContext[T] => {
+  const contextProperty = useContextSelector(ReqoreContext, (value) => {
+    if (!(property in value)) {
+      throw new Error(`Reqore context property ${property} not found`);
+    }
+
+    return value[property];
+  });
+
+  return contextProperty;
+};

package/src/hooks/useReqoreEffect.ts

@@ -1,18 +1,18 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   IReqoreEffect,
   TReqoreEffectGradientAnimationTrigger,
   TReqoreHexColor,
 } from '../components/Effect';
 import { IReqoreTheme } from '../constants/theme';
-import ThemeContext from '../context/ThemeContext';
+import { useReqoreTheme } from './useTheme';
 
 export const useReqoreEffect = (
   component: 'buttons',
   theme: IReqoreTheme,
   effect?: IReqoreEffect
 ): IReqoreEffect => {
-  let _theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+  let _theme: IReqoreTheme = useReqoreTheme();
 
   // Return the effect if the component is not defined in the theme
   if (!theme[component]) {