@qoretechnologies/reqore 0.30.2 → 0.30.4

package/src/components/Drawer/index.tsx

@@ -170,6 +170,7 @@ export const ReqoreDrawer = ({
   _isModal,
   width,
   height,
+  actions = [],
   ...rest
 }: IReqoreDrawerProps) => {
   const { animations } = useContext(ReqoreContext);
@@ -199,12 +200,12 @@ export const ReqoreDrawer = ({
 
   const zIndex = useLatestZIndex();
   const wrapperZIndex = useLatestZIndex();
-  const actions: IReqorePanelAction[] = useMemo(() => {
-    const actions: IReqorePanelAction[] = [];
+  const _actions: IReqorePanelAction[] = useMemo(() => {
+    const builtActions: IReqorePanelAction[] = [...actions];
 
     /* Adding a hide/show button to the drawer. */
     if (hidable) {
-      actions.push({
+      builtActions.push({
         responsive: false,
         icon: getHideShowIcon(position, _isHidden),
         onClick: () => {
@@ -219,7 +220,7 @@ export const ReqoreDrawer = ({
 
     /* Adding a close button to the drawer. */
     if (onClose) {
-      actions.push({
+      builtActions.push({
         responsive: false,
         icon: 'CloseLine',
         onClick: onClose,
@@ -227,7 +228,7 @@ export const ReqoreDrawer = ({
       });
     }
 
-    return actions;
+    return builtActions;
   }, [hidable, position, onClose]);
 
   const positions = useMemo(() => {
@@ -265,7 +266,7 @@ export const ReqoreDrawer = ({
             />
           ) : null}
           <Resizable
-            className='reqore-drawer-resizable'
+            className={`${className || ''} reqore-drawer-resizable`}
             maxHeight={
               layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined
             }
@@ -344,21 +345,19 @@ export const ReqoreDrawer = ({
               <StyledCloseWrapper
                 className='reqore-drawer-controls'
                 position={position}
-                w={layout === 'vertical' && _isHidden ? 0 : _size.width}
-                h={layout === 'horizontal' && _isHidden ? 0 : _size.height}
+                w={layout === 'vertical' ? 0 : _size.width}
+                h={layout === 'horizontal' ? 0 : _size.height}
               >
-                {hidable && (
-                  <ReqoreButton
-                    flat
-                    customTheme={theme}
-                    className='reqore-drawer-control reqore-drawer-hide-button'
-                    icon={getHideShowIcon(position, _isHidden)}
-                    onClick={() => {
-                      setIsHidden(!_isHidden);
-                      onHideToggle && onHideToggle(!_isHidden);
-                    }}
-                  />
-                )}
+                <ReqoreButton
+                  flat
+                  customTheme={theme}
+                  className='reqore-drawer-control reqore-drawer-hide-button'
+                  icon={getHideShowIcon(position, _isHidden)}
+                  onClick={() => {
+                    setIsHidden(!_isHidden);
+                    onHideToggle && onHideToggle(!_isHidden);
+                  }}
+                />
               </StyledCloseWrapper>
             ) : null}
             {!_isHidden && (
@@ -366,12 +365,12 @@ export const ReqoreDrawer = ({
                 {...rest}
                 opacity={opacity}
                 blur={hasBackdrop ? 0 : blur}
-                actions={actions}
+                actions={_actions}
                 customTheme={customTheme}
                 intent={intent}
                 rounded={floating || _isModal ? true : false}
                 flat={flat}
-                className={`${className || ''} reqore-drawer`}
+                className={`reqore-drawer`}
                 style={{
                   width: '100%',
                   maxHeight: '100%',

package/src/components/Panel/index.tsx

@@ -19,6 +19,7 @@ import {
   getMainBackgroundColor,
   getReadableColor,
 } from '../../helpers/colors';
+import { isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -45,6 +46,7 @@ import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
+  group?: IReqorePanelAction[];
   actions?: Omit<IReqoreDropdownItem[], 'value'>;
   // Custom react element
   as?: React.ElementType;
@@ -60,6 +62,8 @@ export interface IReqorePanelBottomAction extends IReqorePanelAction {
 }
 
 export interface IReqorePanelContent {}
+export type TReqorePanelActions = IReqorePanelAction[];
+export type TReqorePanelBottomActions = IReqorePanelBottomAction[];
 
 export interface IReqorePanelProps
   extends IWithReqoreSize,
@@ -78,8 +82,8 @@ export interface IReqorePanelProps
   isCollapsed?: boolean;
   onClose?: () => void;
   rounded?: boolean;
-  actions?: (IReqorePanelAction | IReqorePanelAction[])[];
-  bottomActions?: IReqorePanelBottomAction[];
+  actions?: TReqorePanelActions;
+  bottomActions?: TReqorePanelBottomActions;
   unMountContentOnCollapse?: boolean;
   onCollapseChange?: (isCollapsed?: boolean) => void;
   fill?: boolean;
@@ -305,7 +309,13 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
-      () => !!label || collapsible || !!onClose || !!size(actions) || !!badge,
+      () =>
+        !!label ||
+        collapsible ||
+        !!onClose ||
+        !!size(actions.filter(isActionShown)) ||
+        !!badge ||
+        !!icon,
       [label, collapsible, onClose, actions, badge]
     );
 
@@ -332,60 +342,42 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     // Calculates whether or not the bottom actions should be displayed.
     const hasBottomActions: boolean = useMemo(
-      () => !!(size(leftBottomActions) || size(rightBottomActions)),
+      () =>
+        !!(
+          size(leftBottomActions.filter(isActionShown)) ||
+          size(rightBottomActions.filter(isActionShown))
+        ),
       [leftBottomActions, rightBottomActions]
     );
 
     const renderResponsiveActions = useCallback(
-      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        return renderActions(actionOrActions, index, true);
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, true);
       },
       [actions]
     );
 
     const hasNonResponsiveActions = useCallback(
-      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
-        data.some(
-          (action) => !Array.isArray(action) && action.responsive === false && action.show !== false
-        ),
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive === false && action.show !== false),
       [actions, bottomActions]
     );
 
     const hasResponsiveActions = useCallback(
-      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
-        data.some(
-          (action) =>
-            Array.isArray(action) || (action.responsive !== false && action.show !== false)
-        ),
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive !== false && action.show !== false),
       [actions, bottomActions]
     );
 
     const renderNonResponsiveActions = useCallback(
-      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        return renderActions(actionOrActions, index, false);
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, false);
       },
       [actions]
     );
 
     const renderActions = useCallback(
-      (
-        actionOrActions: IReqorePanelAction | IReqorePanelAction[],
-        index: number,
-        includeResponsive
-      ) => {
-        const action: IReqorePanelAction = Array.isArray(actionOrActions)
-          ? {
-              show: true,
-              responsive: true,
-              as: ReqoreControlGroup,
-              props: {
-                stack: true,
-                fluid: true,
-                children: actionOrActions.map(renderActions),
-              },
-            }
-          : actionOrActions;
-
+      (action: IReqorePanelAction, index: number, includeResponsive) => {
         if (
           action.show === false ||
           (includeResponsive && action.responsive === false) ||
@@ -402,9 +394,26 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           className,
           as: CustomElement,
           props = {},
+          group,
           ...rest
         }: IReqorePanelAction = action;
 
+        if (size(group)) {
+          return (
+            <ReqoreControlGroup
+              intent={intent}
+              stack
+              customTheme={rest.customTheme || theme}
+              size={rest.size}
+              fixed
+              fluid={rest.fluid}
+              key={index}
+            >
+              {group.map((action, index) => renderActions(action, index, true))}
+            </ReqoreControlGroup>
+          );
+        }
+
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>

package/src/components/Tag/index.tsx

@@ -26,6 +26,7 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreFixed,
   IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
@@ -46,7 +47,8 @@ export interface IReqoreTagProps
     IReqoreDisabled,
     IWithReqoreEffect,
     IWithReqoreMinimal,
-    IWithReqoreFluid {
+    IWithReqoreFluid,
+    IWithReqoreFixed {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;

package/src/containers/ReqoreProvider.tsx

@@ -120,6 +120,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobile,
           isTablet,
           isMobileOrTablet,
+          latestZIndex: latestZIndex.current,
           getAndIncreaseZIndex,
           animations: options.animations || { buttons: true, dialogs: true },
           tooltips: options.tooltips || { delay: 0 },
@@ -157,44 +158,47 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           </ReqoreNotificationsWrapper>
         ) : null}
         {children}
-        <ReqoreModal
-          isOpen={confirmationModal.isOpen}
-          flat
-          opacity={0.9}
-          blur={2}
-          width='500px'
-          intent={confirmationModal.intent}
-          label={confirmationModal.title || 'Confirm your action'}
-          icon='ErrorWarningFill'
-          bottomActions={[
-            {
-              label: confirmationModal.cancelLabel || 'Cancel',
-              icon: 'CloseLine',
-              onClick: () => {
-                confirmationModal?.onCancel?.();
-                closeConfirmationModal();
+        {confirmationModal.isOpen && (
+          <ReqoreModal
+            isOpen
+            flat
+            opacity={0.9}
+            blur={2}
+            width='500px'
+            intent={confirmationModal.intent}
+            label={confirmationModal.title || 'Confirm your action'}
+            icon='ErrorWarningFill'
+            className='reqore-confirmation-modal'
+            bottomActions={[
+              {
+                label: confirmationModal.cancelLabel || 'Cancel',
+                icon: 'CloseLine',
+                onClick: () => {
+                  confirmationModal?.onCancel?.();
+                  closeConfirmationModal();
+                },
+                position: 'left',
               },
-              position: 'left',
-            },
-            {
-              label: confirmationModal.confirmLabel || 'Confirm',
-              intent: confirmationModal.confirmButtonIntent || 'success',
-              icon: confirmationModal.confirmIcon || 'CheckLine',
-              onClick: () => {
-                confirmationModal?.onConfirm?.();
-                closeConfirmationModal();
+              {
+                label: confirmationModal.confirmLabel || 'Confirm',
+                intent: confirmationModal.confirmButtonIntent || 'success',
+                icon: confirmationModal.confirmIcon || 'CheckLine',
+                onClick: () => {
+                  confirmationModal?.onConfirm?.();
+                  closeConfirmationModal();
+                },
+                position: 'right',
               },
-              position: 'right',
-            },
-          ]}
-        >
-          <ReqoreTextEffect
-            as='p'
-            effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+            ]}
           >
-            {confirmationModal.description || 'Are you sure you want to proceed?'}
-          </ReqoreTextEffect>
-        </ReqoreModal>
+            <ReqoreTextEffect
+              as='p'
+              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+            >
+              {confirmationModal.description || 'Are you sure you want to proceed?'}
+            </ReqoreTextEffect>
+          </ReqoreModal>
+        )}
       </ReqoreContext.Provider>
     </>
   );

package/src/context/ReqoreContext.tsx

@@ -14,6 +14,7 @@ export interface IReqoreContext {
   readonly animations?: IReqoreOptions['animations'];
   readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
+  readonly latestZIndex?: number;
 }
 
 export default createContext<IReqoreContext>({

package/src/helpers/utils.ts

@@ -8,6 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
+import { IReqorePanelAction } from '../components/Panel';
 import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
@@ -88,3 +89,5 @@ export const getOneLessSize = (size: TSizes): TSizes => {
   // Get the size name from the number
   return NUMBER_TO_SIZE[oneLessSizeNumber];
 };
+
+export const isActionShown = (action: IReqorePanelAction) => action.show !== false;

package/src/hooks/useLatestZIndex.ts

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

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -35,6 +35,8 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
           effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
         />
         <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
+        <ReqoreCheckbox {...args} onText='yes' offText='no' />
+        <ReqoreCheckbox {...args} onText='yes' offText='no' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

package/src/stories/Drawer/Drawer.stories.tsx

@@ -2,9 +2,11 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import { useContext } from 'react';
 import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
+import { IReqoreInputProps } from '../../components/Input';
 import {
   ReqoreButton,
   ReqoreContext,
+  ReqoreInput,
   ReqorePanel,
   ReqoreTabs,
   ReqoreTabsContent,
@@ -124,7 +126,68 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
         attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
         judgment out opinions property the supplied.
       </ReqorePanel>
-      <ReqoreDrawer {...args} label='This is a test' icon='EmphasisCn' onClose={noop}>
+      <ReqoreDrawer
+        {...args}
+        label='This is a test'
+        icon='EmphasisCn'
+        onClose={noop}
+        actions={[
+          {
+            responsive: false,
+            group: [
+              {
+                label: 'Non responsive',
+                icon: '24HoursFill',
+                customTheme: { main: '#eb0e8c' },
+              },
+              {
+                icon: 'FullscreenExitLine',
+                customTheme: { main: '#a40a62' },
+              },
+            ],
+          },
+          {
+            group: [
+              { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+              { icon: 'CopperCoinFill', intent: 'danger' },
+            ],
+          },
+          {
+            as: ReqoreInput,
+            props: {
+              placeholder: 'Custom action!',
+              icon: 'Search2Line',
+              minimal: false,
+            } as IReqoreInputProps,
+          },
+          {
+            label: 'More actions',
+            actions: [
+              { value: 'Sub Test', icon: 'FileDownloadLine' },
+              { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+            ],
+            intent: 'info',
+          },
+        ]}
+        bottomActions={[
+          {
+            position: 'left',
+            intent: 'success',
+            group: [
+              { label: 'Test 1', icon: '24HoursFill' },
+              { label: 'Test 2', icon: '24HoursFill' },
+            ],
+          },
+          {
+            label: 'More actions',
+            position: 'right',
+            actions: [
+              { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+              { value: 'Sub Test 2', icon: 'FileDownloadLine' },
+            ],
+          },
+        ]}
+      >
         <ReqoreTabs
           flat
           intent={args.intent}
@@ -181,5 +244,5 @@ Transparent.args = {
 };
 export const WithSize = Template.bind({});
 WithSize.args = {
-  size: '350px',
+  size: '500px',
 };

package/src/stories/Panel/Panel.stories.tsx

@@ -124,7 +124,6 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
 
   return (
     <ReqorePanel
-      {...args}
       badge={[
         10,
         0,
@@ -144,15 +143,25 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
       ]}
       actions={[
         {
-          label: 'Non responsive',
-          icon: '24HoursFill',
-          customTheme: { main: '#eb0e8c' },
           responsive: false,
+          group: [
+            {
+              label: 'Non responsive',
+              icon: '24HoursFill',
+              customTheme: { main: '#eb0e8c' },
+            },
+            {
+              icon: 'FullscreenExitLine',
+              customTheme: { main: '#a40a62' },
+            },
+          ],
+        },
+        {
+          group: [
+            { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+            { icon: 'CopperCoinFill', intent: 'danger' },
+          ],
         },
-        [
-          { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-          { icon: 'CopperCoinFill', intent: 'danger' },
-        ],
         {
           as: ReqoreInput,
           props: {
@@ -171,7 +180,14 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       bottomActions={[
-        { label: 'Test', icon: '24HoursFill', position: 'left' },
+        {
+          position: 'left',
+          intent: 'success',
+          group: [
+            { label: 'Test 1', icon: '24HoursFill' },
+            { label: 'Test 2', icon: '24HoursFill' },
+          ],
+        },
         {
           label: 'More actions',
           position: 'right',
@@ -181,6 +197,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           ],
         },
       ]}
+      {...args}
     >
       Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
       of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
@@ -220,9 +237,33 @@ export const Flat = Template.bind({});
 Flat.args = {
   flat: true,
 };
-export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
-NoLabel.args = {
+export const NoBars: Story<IReqorePanelProps> = Template.bind({});
+NoBars.args = {
   label: undefined,
+  badge: undefined,
+  icon: undefined,
+  actions: [
+    { label: 'test', show: false },
+    {
+      show: false,
+      group: [
+        { label: 'test 2', show: true },
+        { label: 'test 3', show: true },
+      ],
+    },
+  ],
+  bottomActions: [
+    { label: 'test', show: false, position: 'left' },
+    {
+      position: 'right',
+      show: false,
+      group: [
+        { label: 'test 2', show: true },
+        { label: 'test 3', show: true },
+      ],
+    },
+  ],
+  collapsible: false,
 };
 
 export const Transparent: Story<IReqorePanelProps> = Template.bind({});

package/src/stories/Tag/Tag.stories.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import { IReqoreTagProps } from '../../components/Tag';
 import { IReqoreTagGroup } from '../../components/Tag/group';
 import { ReqoreTag, ReqoreTagGroup } from '../../index';
-import { argManager, SizeArg } from '../utils/args';
+import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
@@ -85,7 +85,7 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
       />
       <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
       <ReqoreTag labelKey='Key' label='value' {...args} />
-      <ReqoreTag icon='QuestionAnswerLine' {...args} />
+      <ReqoreTag icon='QuestionAnswerLine' {...args} fixed />
       <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
       <ReqoreTag
         label='300px Tag'

package/src/types/global.ts

@@ -140,6 +140,20 @@ export interface IWithReqoreFluid {
   fluid?: boolean;
 }
 
+export interface IWithReqoreFixed {
+  /**
+   * If true, the component will be fixed in fluid containers
+   * @default false
+   * @type boolean
+   * @example
+   * <ReqoreInput fixed />
+   * <ReqoreInput fixed={true} />
+   * <ReqoreInput fixed={false} />
+   *
+   */
+  fixed?: boolean;
+}
+
 export interface IWithReqoreMinimal {
   /**
    * If true, the component will be minimal