@qoretechnologies/reqore 0.40.3 → 0.40.5

package/src/components/Button/index.tsx

@@ -1,3 +1,4 @@
+import { size } from 'lodash';
 import { rgba } from 'polished';
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -73,6 +74,7 @@ export interface IReqoreButtonProps
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
   badge?: TReqoreBadge | TReqoreBadge[];
+
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
@@ -317,15 +319,51 @@ export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButton
 
   // If the content is a list
   if (Array.isArray(props.content)) {
+    const leftBadges = props.content.filter(
+      (badge) => typeof badge === 'string' || typeof badge === 'number' || !badge?.align
+    );
+    const rightBadges = props.content.filter(
+      (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+    );
+    const middleBadges = props.content.filter(
+      (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'center'
+    );
+
+    const buildContent = (badge: TReqoreBadge) => {
+      if (typeof badge === 'string' || typeof badge === 'number') {
+        return { label: badge, align: undefined };
+      }
+
+      return { ...badge, align: undefined };
+    };
+
     return (
       <>
         <ReqoreSpacer
           width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
           height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
         />
-        <ReqoreTagGroup wrap={wrapGroup}>
-          {props.content.map((badge, index) => renderTag({ ...props, content: badge, key: index }))}
-        </ReqoreTagGroup>
+        {size(leftBadges) ? (
+          <ReqoreTagGroup wrap={wrapGroup} align='left'>
+            {leftBadges.map((badge, index) =>
+              renderTag({ ...props, content: buildContent(badge), key: index })
+            )}
+          </ReqoreTagGroup>
+        ) : null}
+        {size(middleBadges) ? (
+          <ReqoreTagGroup wrap={wrapGroup} fluid align='center'>
+            {middleBadges.map((badge, index) =>
+              renderTag({ ...props, content: buildContent(badge), key: index })
+            )}
+          </ReqoreTagGroup>
+        ) : null}
+        {size(rightBadges) ? (
+          <ReqoreTagGroup wrap={wrapGroup} align='right'>
+            {rightBadges.map((badge, index) =>
+              renderTag({ ...props, content: buildContent(badge), key: index })
+            )}
+          </ReqoreTagGroup>
+        ) : null}
       </>
     );
   }
@@ -336,7 +374,7 @@ export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButton
         width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
         height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
       />
-      {renderTag({ ...props, key: 0 })}
+      <ReqoreTagGroup>{renderTag({ ...props, key: 0 })}</ReqoreTagGroup>
     </>
   );
 });
@@ -402,6 +440,17 @@ const ReqoreButton = memo(
       const hasLeftIcon = icon || leftIconProps?.image;
       const hasRightIcon = rightIcon || rightIconProps?.image;
 
+      const hasRightAlignedBadge = useMemo(() => {
+        if (Array.isArray(badge)) {
+          return badge.some(
+            (badge) =>
+              typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+          );
+        }
+
+        return typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right';
+      }, [badge]);
+
       return (
         <StyledButton
           {...rest}
@@ -515,7 +564,10 @@ const ReqoreButton = memo(
                   style={
                     textAlign !== 'right' || iconsAlign === 'center'
                       ? {
-                          marginLeft: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
+                          marginLeft:
+                            !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
+                              ? 'auto'
+                              : undefined,
                           marginRight:
                             iconsAlign === 'center' || (textAlign === 'center' && !_children)
                               ? 'auto'

package/src/components/Effect/index.tsx

@@ -28,6 +28,9 @@ export type TReqoreEffectColorManipulationAlpha =
   | 0.9
   | 1;
 export type TReqoreHexColor = `#${string}`;
+export type TReqoreRgbColor = `rgb(${number}, ${number}, ${number})`;
+export type TReqoreRgbaColor = `rgba(${number}, ${number}, ${number}, ${string})`;
+export type TReqoreMultiTypeColor = TReqoreHexColor | TReqoreRgbColor | TReqoreRgbaColor;
 export type TReqoreColor = TReqoreHexColor | 'transparent';
 export type TReqoreEffectColor =
   | (TReqoreColor | TReqoreHexColor | 'main' | TReqoreIntent)

package/src/components/Tag/group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -11,13 +11,32 @@ export interface IReqoreTagGroup
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   wrap?: boolean;
+  fluid?: boolean;
+  align?: 'left' | 'center' | 'right';
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: ${({ wrap }: IReqoreTagGroup) => (wrap ? 1 : 0)};
+  flex-grow: ${({ fluid }: IReqoreTagGroup) => (fluid ? 1 : undefined)};
   display: flex;
   flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
   gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
+
+  ${({ align }) => {
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+        justify-content: flex-end;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+        justify-content: center;
+      `;
+    }
+  }}
 `;
 
 const ReqoreTagGroup = ({

package/src/components/Tag/index.tsx

@@ -56,6 +56,7 @@ export interface IReqoreTagProps
     IWithReqoreEffect,
     IWithReqoreCustomTheme {
   fixed?: boolean | 'key' | 'label';
+  align?: 'left' | 'right' | 'center';
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -105,6 +106,26 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${({ align }) => {
+    if (align === 'left') {
+      return css`
+        margin-right: auto;
+      `;
+    }
+
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+      `;
+    }
+  }}
+
   ${InactiveIconScale};
 
   ${({ wrap, hasWidth }) =>

package/src/helpers/colors.ts

@@ -6,6 +6,8 @@ import {
   TReqoreEffectGradientColors,
   TReqoreEffectGradientColorsObject,
   TReqoreHexColor,
+  TReqoreMultiTypeColor,
+  TReqoreRgbaColor,
 } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -39,8 +41,9 @@ export const getReadableColorFrom = (
 ): TReqoreHexColor => {
   const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
   const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
+  const fixedColor = hexAToRGBA(from);
 
-  return readableColor(from, returnIfLight, returnIfDark, false) as TReqoreHexColor;
+  return readableColor(fixedColor, returnIfLight, returnIfDark, false) as TReqoreHexColor;
 };
 
 export const percentToHexAlpha = (p: number) => {
@@ -51,6 +54,22 @@ export const percentToHexAlpha = (p: number) => {
   return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
 };
 
+export const hexAToRGBA = (hex: TReqoreMultiTypeColor): TReqoreRgbaColor => {
+  // Check if this color is already in rgba format
+  if (hex.startsWith('rgb')) {
+    return hex as TReqoreRgbaColor;
+  }
+
+  const _hex = hex.length === 4 ? hex + hex.slice(1, 3) : hex;
+
+  const r = parseInt(_hex.slice(1, 3), 16);
+  const g = parseInt(_hex.slice(3, 5), 16);
+  const b = parseInt(_hex.slice(5, 7), 16);
+  const a = parseInt(_hex.slice(7, 9) || 'ff', 16) / 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+};
+
 export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
   if (isValidSixCharHex(rgba)) {
     return rgba as TReqoreHexColor;
@@ -68,8 +87,8 @@ export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
       .join('')) as TReqoreHexColor; // Puts the array to togehter to a string
 };
 
-export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
-  return getLuminance(mainColor) > 0.2;
+export const shouldDarken = (mainColor: TReqoreMultiTypeColor): boolean => {
+  return getLuminance(hexAToRGBA(mainColor)) > 0.2;
 };
 
 export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
@@ -80,19 +99,24 @@ export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHe
 //export const changeBasedOnContrast = (color: string, lightness?: number): string =>
 
 export const changeLightness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
   return lightness
-    ? shouldDarken(color)
-      ? (darken(lightness, color) as TReqoreHexColor)
-      : (lighten(lightness, color) as TReqoreHexColor)
+    ? shouldDarken(fixedColor)
+      ? (darken(lightness, fixedColor) as TReqoreHexColor)
+      : (lighten(lightness, fixedColor) as TReqoreHexColor)
     : color;
 };
 
-export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor =>
-  lightness
-    ? shouldDarken(color)
-      ? (lighten(lightness, color) as TReqoreHexColor)
-      : (darken(lightness, color) as TReqoreHexColor)
+export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
+  return lightness
+    ? shouldDarken(fixedColor)
+      ? (lighten(lightness, fixedColor) as TReqoreHexColor)
+      : (darken(lightness, fixedColor) as TReqoreHexColor)
     : color;
+};
 
 export const getColorByBgColor = (bgColor) => {
   if (!bgColor) {

package/src/hooks/usePopover.tsx

@@ -182,19 +182,21 @@ const usePopover = ({
       }
     }
 
+    if (!content) {
+      _removePopover();
+    }
+
     return () => {
-      if (targetElement && content) {
-        cancelTimeout();
+      cancelTimeout();
 
-        targetElement.removeEventListener(startEvent, _addPopover);
+      targetElement?.removeEventListener(startEvent, _addPopover);
 
-        if (endEvent) {
-          targetElement.removeEventListener(endEvent, _removePopover);
-        }
+      if (endEvent) {
+        targetElement?.removeEventListener(endEvent, _removePopover);
+      }
 
-        if (handler === 'hoverStay') {
-          targetElement.removeEventListener('mouseleave', cancelTimeout);
-        }
+      if (handler === 'hoverStay') {
+        targetElement?.removeEventListener('mouseleave', cancelTimeout);
       }
     };
   }, [targetElement?.toString(), content, current, currentPopover]);

package/src/hooks/useTooltip.ts

@@ -14,7 +14,7 @@ export const useTooltip = (
   );
 
   useEffect(() => {
-    if (targetElement && content) {
+    if (targetElement) {
       setElement(targetElement);
       setData(tooltip);
     }

package/src/stories/Button/Button.stories.tsx

@@ -111,17 +111,34 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid>
-          Fluid button
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[
+            1,
+            { label: 'in da middle', align: 'center' },
+            { label: 'right align', align: 'right' },
+            2,
+          ]}
+        >
+          Positioned badges
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[1, { label: 'right align', align: 'right' }, 2]}
+        >
+          Positioned badges
         </ReqoreButton>
       </ReqoreControlGroup>
+
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid textAlign='center'>
           Fluid button with centered text
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center'>
+        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center' badge='badge'>
           Fluid button with centered text & icons
         </ReqoreButton>
         <ReqoreButton
@@ -130,6 +147,7 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
           fluid
           textAlign='center'
           iconsAlign='center'
+          badge={[{ label: 'test', align: 'right' }, 2]}
         >
           Fluid button with centered text & icons
         </ReqoreButton>

package/src/stories/Message/Message.stories.tsx

@@ -107,6 +107,15 @@ export const Pending: Story = {
   },
 };
 
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    opaque: true,
+    intent: 'muted',
+  },
+};
+
 export const CustomTheme: Story = {
   render: Template,
 

package/src/stories/Popover/Popover.stories.tsx

@@ -1,6 +1,8 @@
+import { expect } from '@storybook/jest';
 import { StoryFn, StoryObj } from '@storybook/react';
 import { fireEvent } from '@storybook/testing-library';
 import { useState } from 'react';
+import { useMount } from 'react-use';
 import { IReqorePopoverProps } from '../../components/Popover';
 import { sleep } from '../../helpers/utils';
 import usePopover from '../../hooks/usePopover';
@@ -16,6 +18,7 @@ import {
   ReqoreSpacer,
   ReqoreTextarea,
 } from '../../index';
+import { IReqoreTooltip } from '../../types/global';
 import { StoryMeta } from '../utils';
 import { FlatArg, argManager } from '../utils/args';
 
@@ -434,3 +437,35 @@ export const ChangingElement: Story = {
     });
   },
 };
+
+export const TooltipIsRemovedWhenContentIsEmpty: Story = {
+  render: (args) => {
+    const [tooltip, setTooltip] = useState<IReqoreTooltip>({
+      content: 'test',
+      handler: 'focus',
+      noArrow: true,
+      noWrapper: true,
+      useTargetWidth: true,
+    });
+
+    useMount(() => {
+      setTimeout(() => {
+        setTooltip(undefined);
+      }, 1500);
+    });
+
+    return <ReqoreTextarea tooltip={tooltip} />;
+  },
+
+  play: async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('textarea');
+    await sleep(500);
+    fireEvent.focusIn(textarea);
+    await sleep(300);
+    await expect(document.querySelector('.reqore-popover-content')).toBeInTheDocument();
+    await sleep(1000);
+    fireEvent.focusIn(textarea);
+    await sleep(300);
+    await expect(document.querySelector('.reqore-popover-content')).not.toBeInTheDocument();
+  },
+};