fix: lodash to esm, tooltip problems, utils for types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.6.0-rc.5",
+  "version": "5.7.0-rc.12",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -33,7 +33,7 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@optimize-lodash/rollup-plugin": "^4.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^7.6.11",
@@ -64,7 +64,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/events": "^3.0.0",
-    "@types/lodash": "^4.14.149",
+    "@types/lodash-es": "^4.17.12",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
@@ -117,15 +117,14 @@
   },
   "dependencies": {
     "@storybook/addon-controls": "^7.6.17",
-    "@tippyjs/react": "^4.2.5",
-    "dayjs": "^1.8.34",
+    "dayjs": "^2.0.0-alpha.4",
     "emotion-reset": "^3.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jscodeshift": "^0.15.1",
-    "lodash": "^4.17.19",
+    "lodash-es": "^4.17.21",
     "patch-package": "^8.0.0",
     "pluralize": "^8.0.0",
-    "polished": "^3.4.4",
+    "polished": "^4.3.1",
     "postinstall-postinstall": "^2.1.0",
     "react-aria": "^3.30.0",
     "react-aria-components": "^1.0.0-rc.0",
@@ -136,6 +135,7 @@
     "react-responsive": "^10.0.0",
     "react-stately": "^3.28.0",
     "react-textarea-autosize": "^8.5.3",
+    "react-tooltip": "^5.26.4",
     "react-window": "^1.8.6",
     "recharts": "^2.8.0",
     "tslib": "^2.4.1",

src/components/Box/Box.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@emotion/react';
 import { css } from '@emotion/react';
 import useTheme from 'hooks/useTheme';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import React, { forwardRef } from 'react';
 
 import { BoxWrapper } from './Box.style';

src/components/Box/Box.utilities.ts

@@ -1,4 +1,4 @@
-import { curry, omit, pick } from 'lodash';
+import { curry, omit, pick } from 'lodash-es';
 import type { Theme } from 'theme';
 import type { SemanticColorsKey } from 'theme/tokens/semantic/colors';
 

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { isEmpty, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash-es';
 import * as React from 'react';
 import { generateUniqueKey } from 'utils/helpers';
 

src/components/ButtonBase/ButtonBase.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@emotion/serialize';
 import type { ClickEvent } from 'hooks/useLoading';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import React from 'react';
 import type { CommonButtonProps } from 'utils/common';
 import { generateTestDataId } from 'utils/helpers';

src/components/ButtonBase/constants.ts

@@ -1,6 +1,6 @@
 import type { SemanticColorsKey } from 'theme/tokens/semantic/colors';
 import type { SemanticTypographyKey } from 'theme/tokens/semantic/typography';
-import type { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'utils/types';
 
 import type { ButtonTypes } from 'components/Button/Button.types';
 

src/components/Chart/BarChart/BarChart.tsx

@@ -1,5 +1,5 @@
 import useTheme from 'hooks/useTheme';
-import { max } from 'lodash';
+import { max } from 'lodash-es';
 import React, { useCallback, useMemo } from 'react';
 import {
   BarChart as RechartsBarChart,

src/components/Chart/LineChart/utils.ts

@@ -1,4 +1,4 @@
-import { flatten, keys, omit, sampleSize, uniq } from 'lodash';
+import { flatten, keys, omit, sampleSize, uniq } from 'lodash-es';
 import type { Theme } from 'theme';
 
 export type Data = {

src/components/DatePicker/Month/Month.tsx

@@ -1,5 +1,5 @@
 import isBetween from 'dayjs/plugin/isBetween';
-import { chunk, inRange } from 'lodash';
+import { chunk, inRange } from 'lodash-es';
 import { useCallback } from 'react';
 import * as React from 'react';
 import type { Dayjs } from 'utils/date';

src/components/DatePicker/OverlayComponent/components/MonthWrapper/MonthWrapper.tsx

@@ -1,5 +1,5 @@
 import useKeyboardEvents from 'hooks/useKeyboardEvents';
-import { head, range } from 'lodash';
+import { head, range } from 'lodash-es';
 import React, { useMemo, useRef, useState } from 'react';
 import type { Dayjs } from 'utils/date';
 

src/components/DropdownButton/DropdownButton.tsx

@@ -1,6 +1,6 @@
 import type { ClickEvent } from 'hooks/useLoading';
 import useTheme from 'hooks/useTheme';
-import { head } from 'lodash';
+import { head } from 'lodash-es';
 import React, { useCallback } from 'react';
 import { rem } from 'theme/utils';
 import { generateTestDataId } from 'utils/helpers';

src/components/Filter/Filter.tsx

@@ -1,6 +1,5 @@
 import useKeyboard from 'hooks/useKeyboardEvents';
-import head from 'lodash/head';
-import omit from 'lodash/omit';
+import { head, omit } from 'lodash-es';
 import React, { useRef, useState } from 'react';
 
 import FilterButton from './components/FilterButton';

src/components/Filter/components/FilterMenu/components/Options/Options.tsx

@@ -1,4 +1,4 @@
-import { flatMap, head } from 'lodash';
+import { flatMap, head } from 'lodash-es';
 import React, { useCallback } from 'react';
 
 import { emptyStyle, optionsStyles } from './Options.style';

src/components/Filter/hooks/useFilterWithSelectionUtils.ts

@@ -1,4 +1,4 @@
-import { debounce, differenceBy, isEqual } from 'lodash';
+import { debounce, differenceBy, isEqual } from 'lodash-es';
 import { useState } from 'react';
 import React from 'react';
 

src/components/Label/Label.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'utils/types';
 
 import { labelStyle } from './Label.style';
 

src/components/List/Window.tsx

@@ -1,5 +1,5 @@
 import useElementSize from 'hooks/useElementSize';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import React, { forwardRef } from 'react';
 
 import useCombinedRefs from '../../hooks/useCombinedRefs';

src/components/List/types.ts

@@ -1,5 +1,5 @@
 import type { Key } from 'react';
-import type { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'utils/types';
 
 import type { SelectOption } from 'components/Select';
 

src/components/List/utils.tsx

@@ -1,4 +1,4 @@
-import type { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'utils/types';
 
 // @TODO this needs to be used on Select/Filter level now to have such functionality
 // import Highlighter from 'react-highlight-words';

src/components/MultiTextFieldBase/MultiTextFieldBase.tsx

@@ -1,6 +1,5 @@
 import useTheme from 'hooks/useTheme';
-import { last, merge } from 'lodash';
-import omit from 'lodash/omit';
+import { last, merge, omit } from 'lodash-es';
 import React, { useMemo, useRef } from 'react';
 import { generateUniqueID, generateUniqueKey } from 'utils/helpers';
 import type { TestProps } from 'utils/types';

src/components/Navigation/Navigation.tsx

@@ -1,5 +1,5 @@
 import useBreakpoints from 'hooks/useBreakpoints';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import React from 'react';
 
 import Directory from './Directory';

src/components/NumberField/NumberField.tsx

@@ -1,5 +1,5 @@
 import useFieldUtils from 'hooks/useFieldUtils';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import React from 'react';
 import { NumberField as ReactAriaNumberField, Group, Input } from 'react-aria-components';
 import { generateUniqueID } from 'utils/helpers';

src/components/ProgressIndicator/components/ProgressBar/ProgressBar.style.ts

@@ -1,6 +1,6 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import { isUndefined } from 'lodash';
+import { isUndefined } from 'lodash-es';
 import type { Theme } from 'theme';
 import { rem } from 'theme/utils';
 

src/components/ProgressIndicator/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import { isUndefined } from 'lodash-es';
 import React from 'react';
 import { ProgressBar as AriaProgressBar } from 'react-aria-components';
 

src/components/ProgressIndicator/components/ProgressCircle/ProgressCircle.tsx

@@ -1,5 +1,5 @@
 import useTheme from 'hooks/useTheme';
-import { isUndefined } from 'lodash';
+import { isUndefined } from 'lodash-es';
 import React from 'react';
 import { ProgressBar as AriaProgressBar } from 'react-aria-components';
 import { convertRemToPixels } from 'theme/utils';

src/components/Select/Select.tsx

@@ -1,6 +1,5 @@
 import useKeyboard from 'hooks/useKeyboardEvents';
-import { differenceBy, head } from 'lodash';
-import debounce from 'lodash/debounce';
+import { differenceBy, head, debounce } from 'lodash-es';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import type { ChangeEvent } from 'utils/common';

src/components/Select/components/SelectMenu/SelectMenu.tsx

@@ -1,9 +1,8 @@
 import type { CSSObject } from '@emotion/react';
 import useCombinedRefs from 'hooks/useCombinedRefs';
-import { flatMap, head } from 'lodash';
-import uniqueId from 'lodash/uniqueId';
+import { flatMap, head, uniqueId } from 'lodash-es';
 import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
-import type { ComponentSizes } from 'types';
+import type { ComponentSizes } from 'utils/types';
 
 import { menuStyle, optionStyle } from './SelectMenu.style';
 import type { SelectOption } from '../../types';

src/components/Table/Table.tsx

@@ -1,5 +1,5 @@
 import useBreakpoints from 'hooks/useBreakpoints';
-import { head } from 'lodash';
+import { head } from 'lodash-es';
 import pluralize from 'pluralize';
 import React, { memo, useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';

src/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.style.ts

@@ -1,6 +1,6 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import rem from 'polished/lib/helpers/rem';
+import { rem } from 'polished';
 import type { Theme } from 'theme';
 
 import { getBorderColor } from 'components/Table/utils';

src/components/Tag/Tag.tsx

@@ -16,6 +16,7 @@ const Tag = React.forwardRef<HTMLDivElement, DivProps & TagProps>(
       isSelected = false,
       children,
       dataTestPrefixId,
+      dataTestId,
       ...rest
     },
     ref
@@ -30,7 +31,7 @@ const Tag = React.forwardRef<HTMLDivElement, DivProps & TagProps>(
         tabIndex={isInteractive ? 0 : -1}
         css={tagContainerStyles({ size, color, isSelectable, isClearable, isSelected })}
         ref={ref}
-        data-testid={`${dataTestPrefixId}_tag_container`}
+        data-testid={dataTestId ? dataTestId : `${dataTestPrefixId}_tag_container`}
         aria-label={children?.toString()}
         aria-selected={isSelected}
         {...rest}

src/components/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 import useFieldUtils from 'hooks/useFieldUtils';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import type { InputHTMLAttributes } from 'react';
 import React, { useRef } from 'react';
 import isEqual from 'react-fast-compare';

src/components/TextInputBase/TextInputBase.tsx

@@ -3,8 +3,8 @@ import useTheme from 'hooks/useTheme';
 import type { FCC } from 'react';
 import React from 'react';
 import isEqual from 'react-fast-compare';
-import type { ComponentSizes } from 'types';
 import { generateTestDataId } from 'utils/helpers';
+import type { ComponentSizes } from 'utils/types';
 import type { TestProps } from 'utils/types';
 
 import { hintMessageStyle, textFieldStyle, wrapperStyle } from './TextInputBase.style';

src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { Global } from '@emotion/react';
 import { ThemeSwitchProvider, useThemeSwitch } from 'hooks/useThemeSwitch';
-import { keys, merge, pick } from 'lodash';
+import { keys, merge, pick } from 'lodash-es';
 import * as React from 'react';
 import type { Theme, ThemeConfig } from 'theme';
 import theme from 'theme';

src/components/Tooltip/Tooltip.style.ts

@@ -3,10 +3,10 @@ import { css } from '@emotion/react';
 import { rem } from 'theme/utils';
 
 import type { TooltipProps } from './Tooltip.types';
-import type { Theme } from '../../theme';
-import 'tippy.js/dist/tippy.css';
 import { generateStylesFromTokens } from 'components/Typography/utils';
 
+import type { Theme } from '~/theme';
+
 export const tooltipStyle =
   ({
     isInverted = false,
@@ -17,22 +17,23 @@ export const tooltipStyle =
       isInverted ? 'backgroundColor.alt' : 'backgroundColor.inverted'
     );
 
-    const textWrap = {
-      'text-align': 'start',
-      'white-space': 'pre-wrap',
-      'word-break': 'break-word',
-    };
+    const textWrap: SerializedStyles = css`
+      text-align: start;
+      white-space: pre-wrap;
+      word-break: break-word;
+    `;
 
     return css`
-      background-color: ${backgroundColor};
-      border: ${theme.dimension.borderWidth.get('default')} solid
-        ${theme.tokens.colors.get(
-          isInverted ? 'borderColor.decorative.default' : 'borderColor.decorative.transparent'
-        )};
-      box-shadow: ${theme.tokens.boxShadow.get('2')};
-
-      .tippy-content {
+      .tooltip {
         background-color: ${backgroundColor};
+        border: ${theme.dimension.borderWidth.get('default')} solid
+          ${theme.tokens.colors.get(
+            isInverted ? 'borderColor.decorative.default' : 'borderColor.decorative.transparent'
+          )};
+        box-shadow: ${theme.tokens.boxShadow.get('2')};
+
+        z-index: 1000;
+
         max-width: ${!isInteractive && rem(256)};
         padding: ${theme.dimension.spacing.get(isInteractive ? 'lg' : 'sm')};
         border-radius: ${theme.dimension.borderRadius.get('md')};
@@ -45,9 +46,5 @@ export const tooltipStyle =
 
         ${!isInteractive && textWrap};
       }
-
-      .tippy-arrow::before {
-        color: ${backgroundColor};
-      }
     `;
   };