@qoretechnologies/reqore 0.30.3 → 0.30.5

package/src/components/ControlGroup/index.tsx

@@ -47,6 +47,7 @@ export interface IReqoreControlGroupProps
   isChild?: boolean;
   isFirstGroup?: boolean;
   isLastGroup?: boolean;
+  fill?: boolean;
 }
 
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
@@ -55,7 +56,7 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
 
 export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   display: flex;
-  flex: 0 auto;
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   justify-content: ${({ fluid, vertical }) => (vertical && fluid ? 'stretch' : undefined)};
   align-items: ${({ vertical, fluid, horizontalAlign }) =>
@@ -64,11 +65,29 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
   flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
+  // If the group has the fill prop,
+  // we need to make sure that the children are vertically stretched
+  // kind of like 'fluid' but vertically
+  // ! Only works when the group is horizontal & wrap is false
+  ${({ fill, vertical }) => {
+    if (fill && !vertical) {
+      return css`
+        > * {
+          max-height: 100%;
+          height: unset !important;
+          align-self: stretch;
+        }
+      `;
+    }
+
+    return undefined;
+  }}
+
   > * {
-    margin-top: ${({ verticalAlign }) =>
-      verticalAlign === 'flex-end' || verticalAlign === 'center' ? 'auto' : undefined};
-    margin-bottom: ${({ verticalAlign }) =>
-      verticalAlign === 'flex-start' || verticalAlign === 'center' ? 'auto' : undefined};
+    margin-top: ${({ fill, verticalAlign }) =>
+      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
+    margin-bottom: ${({ fill, verticalAlign }) =>
+      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center') ? 'auto' : undefined};
     margin-right: ${({ horizontalAlign }) => (horizontalAlign === 'center' ? 'auto' : undefined)};
 
     ${({ vertical }) =>
@@ -103,6 +122,7 @@ const ReqoreControlGroup = memo(
     fluid,
     flat,
     fixed,
+    fill,
     rounded = true,
     wrap,
     stack,
@@ -324,6 +344,7 @@ const ReqoreControlGroup = memo(
               flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
               fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
               fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
+              fill,
               stack:
                 child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
               intent: child.props?.intent || intent,
@@ -454,6 +475,7 @@ const ReqoreControlGroup = memo(
           rounded={rounded}
           fluid={fluid}
           fixed={fixed}
+          fill={fill}
           wrap={wrap}
           stack={isStack}
           verticalAlign={verticalAlign}

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

@@ -114,10 +114,16 @@ export const StyledEffect = styled.span`
     const gradientColors = createEffectGradient(
       theme,
       effect.gradient.colors,
-      0,
+      minimal ? 0.05 : 0,
       !isText && minimal && !active
     );
-    const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
+    const gradientColorsActive = createEffectGradient(
+      theme,
+      effect.gradient.colors,
+      0.05,
+      minimal,
+      true
+    );
 
     const gradientDirectionOrShape =
       gradientType === 'linear'
@@ -167,16 +173,17 @@ export const StyledEffect = styled.span`
       background: ${active ? gradientActive : gradient};
       border-color: ${borderColor} !important;
 
-      ${color &&
-      css`
-        color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
-        &::placeholder {
-          color: ${rgba(
-            getReadableColorFrom(getColorFromMaybeString(theme, color), false),
-            0.7
-          )} !important;
-        }
-      `}
+      ${color && !minimal
+        ? css`
+            color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
+            &::placeholder {
+              color: ${rgba(
+                getReadableColorFrom(getColorFromMaybeString(theme, color), false),
+                0.7
+              )} !important;
+            }
+          `
+        : undefined}
 
       ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
         ? css`
@@ -365,9 +372,9 @@ export const ReqoreEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
   );
 };
 
-export const ReqoreTextEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
+export const ReqoreTextEffect = ({ children, className, ...rest }: IReqoreTextEffectProps) => {
   return (
-    <StyledTextEffect className='reqore-text-effect' {...rest}>
+    <StyledTextEffect className={`${className || ''} reqore-text-effect`} {...rest}>
       {children}
     </StyledTextEffect>
   );

package/src/components/Input/index.tsx

@@ -60,10 +60,11 @@ export interface IReqoreInputStyle extends IReqoreInputProps {
 
 export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ width, fluid, fixed }) => (width ? `${width}px` : fluid && !fixed ? '100%' : 'auto')};
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
   max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   min-width: 60px;
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;

package/src/components/Table/header.tsx

@@ -2,9 +2,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
-import { alignToFlex } from './row';
 
 export interface IReqoreTableSectionProps {
   columns: IReqoreTableColumn[];
@@ -46,7 +46,7 @@ export interface IReqoreTableHeaderStyle {
 export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.035)};
-    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
   `}
 `;
 

package/src/components/Table/headerCell.tsx

@@ -4,9 +4,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { useTooltip } from '../../hooks/useTooltip';
 import ReqoreIcon from '../Icon';
-import { alignToFlex } from './row';
 
 export interface IReqoreTableHeaderCellProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -32,7 +32,7 @@ export const StyledTableHeader = styled.div<IReqoreTableHeaderStyle>`
 
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.03)};
-    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
   `}
 
   ${({ interactive, theme }) =>

package/src/components/Table/row.tsx

@@ -13,6 +13,7 @@ import { ReqorePopover } from '../..';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { TReqoreColor, TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
@@ -75,12 +76,6 @@ export interface IReqoreTableCellStyle {
   striped?: boolean;
 }
 
-export const alignToFlex = {
-  center: 'center',
-  left: 'flex-start',
-  right: 'flex-end',
-};
-
 export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   ${({ width, grow }) =>
     css`
@@ -137,7 +132,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     return css`
       display: flex;
       align-items: center;
-      justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
       flex-shrink: 0;
       border-bottom: ${!flat ? '1px solid ' : undefined};
 

package/src/components/Tabs/list.tsx

@@ -204,10 +204,10 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
+                    intent: !!isTabHidden(item, activeTab) ? activeTabData?.intent : undefined,
+                    effect: !!isTabHidden(item, activeTab) ? activeTabData?.effect : undefined,
                     customTheme: !!isTabHidden(item, activeTab)
-                      ? {
-                          main: currentTabColor,
-                        }
+                      ? activeTabData?.customTheme
                       : theme,
                     vertical,
                     flat,

package/src/components/Tag/index.tsx

@@ -86,8 +86,9 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
@@ -274,6 +275,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         {...rest}
         effect={{
           ...rest.effect,
+          gradient: intent ? undefined : rest.effect?.gradient,
           interactive: !!onClick && !rest.disabled,
         }}
         width={width}

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/colors.ts

@@ -96,6 +96,9 @@ export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
     newTheme.main = '#333333';
   }
 
+  // Add the original theme main color to the theme
+  newTheme.originalMain = newTheme.main;
+
   if (!newTheme.notifications?.info) {
     newTheme.notifications.info = newTheme.intents.info || DEFAULT_INTENTS.info;
   }
@@ -200,7 +203,8 @@ export const createEffectGradient = (
   theme: IReqoreTheme,
   colors: TReqoreEffectGradientColors,
   lighten: number = 0,
-  minimal?: boolean
+  minimal?: boolean,
+  active?: boolean
 ): string => {
   let _colors: TReqoreEffectGradientColorsObject;
   // Check if the colors are valid
@@ -219,7 +223,9 @@ export const createEffectGradient = (
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
         minimal
-          ? theme.originalMain
+          ? active
+            ? theme.originalMain
+            : changeLightness(theme.originalMain, lighten)
           : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },

package/src/helpers/utils.ts

@@ -91,3 +91,18 @@ export const getOneLessSize = (size: TSizes): TSizes => {
 };
 
 export const isActionShown = (action: IReqorePanelAction) => action.show !== false;
+
+export const alignToFlexAlign = (
+  align: 'left' | 'right' | 'center'
+): 'flex-start' | 'center' | 'flex-end' => {
+  switch (align) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+    default:
+      return 'flex-start';
+  }
+};

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/Button/Button.stories.tsx

@@ -72,6 +72,38 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='250px'
+          badge='10'
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='200px'
+          badge="I'm a badge, baby"
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center text with a longer text
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='right'
+          badge="I'm a badge"
+          description='I am a button with a right aligned text and description'
+        >
+          Right text
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
@@ -95,8 +127,22 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}
+          minimal
           description='This is a very interesting description for a button, I like it very much'
           maxWidth='200px'
+          labelEffect={{
+            gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
+          }}
+          descriptionEffect={{
+            gradient: { colors: { 0: '#fd7600', 90: '#c997ff' }, type: 'radial' },
+          }}
+          effect={{
+            gradient: {
+              colors: { 0: '#be00fd', 130: '#e70eeb' },
+              direction: 'to left bottom',
+              animate: 'hover',
+            },
+          }}
           badge={{
             effect: {
               gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
@@ -121,7 +167,18 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          badge={20}
+          onClick={alert}
+          effect={{
+            gradient: { colors: { 90: '#ffe69c', 0: '#ff7818' }, type: 'radial' },
+          }}
+          labelEffect={{
+            gradient: { colors: { 0: '#ffe69c', 90: '#ff7818' }, type: 'radial' },
+          }}
+        >
           Minimal with badge
         </ReqoreButton>
         <ReqoreButton