@lumx/react 3.18.2-alpha.4 → 3.19.1-alpha.0

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -6,11 +6,10 @@ import isEmpty from 'lodash/isEmpty';
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
-import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 /**
  * Defines the props of the component.
@@ -113,17 +112,15 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         >
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {renderLink(
-                        {
-                            linkAs,
-                            ...linkProps,
-                            className: `${CLASSNAME}__link`,
-                            onClick,
-                            tabIndex: 0,
-                        },
-                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                        <span>{label}</span>,
-                    )}
+                    <RawClickable
+                        as={linkAs || linkProps?.href ? 'a' : 'button'}
+                        {...(linkProps as any)}
+                        className={`${CLASSNAME}__link`}
+                        onClick={onClick}
+                    >
+                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                        <span>{label}</span>
+                    </RawClickable>
 
                     <IconButton
                         {...toggleButtonProps}
@@ -136,25 +133,23 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                     />
                 </div>
             ) : (
-                renderButtonOrLink(
-                    {
-                        linkAs,
-                        ...linkProps,
-                        className: `${CLASSNAME}__link`,
-                        tabIndex: 0,
-                        onClick,
-                        ...ariaProps,
-                    },
-                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                    <span>{label}</span>,
-                    hasContent && (
+                <RawClickable
+                    as={linkAs || linkProps?.href ? 'a' : 'button'}
+                    {...linkProps}
+                    className={`${CLASSNAME}__link`}
+                    onClick={onClick}
+                    {...ariaProps}
+                >
+                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                    <span>{label}</span>
+                    {hasContent && (
                         <Icon
                             className={`${CLASSNAME}__chevron`}
                             icon={isOpen ? mdiChevronUp : mdiChevronDown}
                             size={Size.xs}
                         />
-                    ),
-                )
+                    )}
+                </RawClickable>
             )}
 
             {(closeMode === 'hide' || showChildren) && (

package/src/components/skeleton/SkeletonCircle.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/skeleton/SkeletonTypography.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/slider/Slider.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { clamp } from '@lumx/react/utils/number/clamp';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/slideshow/Slides.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/slideshow/SlideshowControls.tsx

@@ -6,7 +6,7 @@ import range from 'lodash/range';
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';

package/src/components/slideshow/SlideshowItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 

package/src/components/switch/Switch.tsx

@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/table/Table.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/table/TableBody.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableCell.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 import { Icon, Size } from '@lumx/react';
 import { GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableRow.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 

package/src/components/tabs/Tab.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Icon, IconProps, Size, Text } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';

package/src/components/tabs/TabList.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/tabs/TabPanel.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/text/Text.stories.tsx

@@ -6,7 +6,7 @@ import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
+import { Button, ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
 import { mdiEarth, mdiHeart } from '@lumx/icons';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
@@ -107,6 +107,28 @@ export const Truncate = {
     },
 };
 
+/**
+ * Test the update of the `title` attribute when text overflows
+ */
+export const TestUpdateTruncateTitleLabel = {
+    render(args: any) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [content, setContent] = React.useState<string>('Some text');
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const lengthen = React.useCallback(() => setContent((prevContent) => `${prevContent} ${prevContent}`), []);
+        return (
+            <>
+                <Button onClick={lengthen}>Lengthen text</Button>
+                <Text as="p" truncate style={{ maxWidth: 300 }} {...args}>
+                    {content}
+                </Text>
+            </>
+        );
+    },
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};
+
 /**
  * Long text with multi line truncate ellipsis
  */

package/src/components/text/Text.tsx

@@ -9,7 +9,7 @@ import {
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
-} from '@lumx/react/utils/className';
+} from '@lumx/core/js/utils/className';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -112,7 +112,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
         !(isTruncated && !isTruncatedMultiline) &&
         whiteSpace && { '--lumx-text-white-space': whiteSpace };
 
-    const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
 
     return (
         <Component

package/src/components/text-field/TextField.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { getBasicClass } from '@lumx/core/js/utils/className';
 import { render } from '@testing-library/react';
 import {
     getByClassName,

package/src/components/text-field/TextField.tsx

@@ -17,7 +17,7 @@ import {
     Theme,
 } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
 import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
@@ -22,6 +22,7 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -100,7 +101,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
-    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -150,18 +151,12 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         imageErrorStyle.display = 'none';
     }
 
-    const isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = !isAnyDisabled && (isButton || isLink);
+    const isClickable = !isAnyDisabled && (linkProps?.href || linkAs || forwardedProps.onClick);
 
-    let Wrapper: any = 'div';
+    const Wrapper: any = isClickable ? RawClickable : 'div';
     const wrapperProps = { ...forwardedProps };
-    if (!isAnyDisabled && isLink) {
-        Wrapper = linkAs || 'a';
-        Object.assign(wrapperProps, linkProps);
-    } else if (!isAnyDisabled && isButton) {
-        Wrapper = 'button';
-        wrapperProps.type = forwardedProps.type || 'button';
+    if (isClickable) {
+        Object.assign(wrapperProps, linkProps, { as: linkAs || linkProps?.href ? 'a' : 'button' }, disabledStateProps);
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react';
-import { AspectRatio } from '@lumx/react/components';
+import { AspectRatio } from '@lumx/core/js/constants';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
 import { RectSize } from '@lumx/react/utils/type';
 

package/src/components/toolbar/Toolbar.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';

package/src/components/uploader/Uploader.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/user-block/UserBlock.tsx

@@ -6,7 +6,7 @@ import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/hooks/useCallbackOnEscape.ts

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@lumx/react/constants';
 import { Callback } from '@lumx/react/utils/type';
-import { onEscapePressed } from '@lumx/react/utils/browser/event';
+import { onEscapePressed } from '@lumx/core/js/utils';
 import { useEffect } from 'react';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 

package/src/hooks/useOverflowTooltipLabel.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
 import { useTooltipContext } from '@lumx/react/components/tooltip/context';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 /**
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
- *
- * Warning: only works on first render, does not update on label element resize.
+ * Updates dynamically on content changes (but not on resize!)
  */
-export const useOverflowTooltipLabel = () => {
+export const useOverflowTooltipLabel = (content: React.ReactNode) => {
     const parentTooltip = useTooltipContext();
     const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);
-    const labelRef = React.useCallback(
-        (labelElement: HTMLElement | null) => {
-            if (!labelElement || !!parentTooltip) {
-                // Skip if label element is unknown
-                // Skip if the parent has a tooltip
-                return;
-            }
+    const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);
 
-            // Label overflowing
-            if (labelElement.offsetWidth < labelElement.scrollWidth) {
-                setTooltipLabel(labelElement.innerText);
-            }
-        },
-        [parentTooltip],
-    );
+    React.useLayoutEffect(() => {
+        if (
+            // Not inside a tooltip
+            !parentTooltip &&
+            labelElement &&
+            // Not inside a visually hidden
+            !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
+            // Text overflows
+            labelElement.offsetWidth < labelElement.scrollWidth
+        ) {
+            // Set tooltip label
+            setTooltipLabel(labelElement.innerText);
+        } else {
+            setTooltipLabel(undefined);
+        }
+    }, [labelElement, parentTooltip, content]);
 
-    return { labelRef, tooltipLabel };
+    return { labelRef: setLabelElement, tooltipLabel };
 };

package/src/index.ts

@@ -2,7 +2,9 @@
  * Components listed here will be exposed to NPM in '@lumx/react'.
  */
 
-export * from './components';
+export * from '@lumx/core/js/constants';
+export * from '@lumx/core/js/types';
+
 export * from './components/alert-dialog';
 export * from './components/autocomplete';
 export * from './components/avatar';

package/src/utils/partitionMulti.ts

@@ -3,7 +3,8 @@ import dropRight from 'lodash/dropRight';
 import last from 'lodash/last';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { Predicate } from './type';
+
+import { Predicate } from '@lumx/core/js/types';
 
 /**
  * Similar to lodash `partition` function but working with multiple predicates.