@geneui/components 3.0.0-next-fa529af-03102024 → 3.0.0-next-77c6918-09102024

package/index.d.ts

@@ -26,6 +26,7 @@ export { default as Avatar } from './lib/atoms/Avatar/index';
 export { default as LinkButton } from './lib/atoms/LinkButton/index';
 export { default as HelperText } from './lib/atoms/HelperText';
 export { default as Loader } from './lib/atoms/Loader';
+export { default as Pill } from './lib/atoms/Pill';
 export { Row, Col } from './lib/molecules/Grid';
 export { Tab, Tabs } from './lib/molecules/Tabs';
 export { Step, Steps } from './lib/molecules/Steps';

package/index.js

@@ -14,7 +14,7 @@ export { default as Scrollbar } from './Scrollbar/index.js';
 export { default as Time } from './Time/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Popover } from './Popover/index.js';
-export { P as PopoverV2 } from './index-5a08e021.js';
+export { P as PopoverV2 } from './index-3e0ca61d.js';
 export { default as Title } from './Title/index.js';
 export { default as Image } from './Image/index.js';
 export { default as KeyValue } from './KeyValue/index.js';
@@ -26,6 +26,7 @@ export { default as Avatar } from './Avatar/index.js';
 export { default as LinkButton } from './LinkButton/index.js';
 export { default as HelperText } from './HelperText/index.js';
 export { default as Loader } from './Loader/index.js';
+export { default as Pill } from './Pill/index.js';
 export { Col, Row } from './Grid/index.js';
 export { Tab, Tabs } from './Tabs/index.js';
 export { Step, Steps } from './Steps/index.js';
@@ -35,7 +36,7 @@ export { default as Checkbox } from './Checkbox/index.js';
 export { default as Card } from './Card/index.js';
 export { default as Tag } from './Tag/index.js';
 export { default as Alert, alertTypes } from './Alert/index.js';
-export { T as Tooltip } from './index-0c18f902.js';
+export { T as Tooltip } from './index-c92894e2.js';
 export { default as Range } from './Range/index.js';
 export { default as Slider } from './Slider/index.js';
 export { default as Pagination } from './Pagination/index.js';
@@ -88,7 +89,7 @@ export { default as FormableUploader } from './FormableUploader/index.js';
 export { default as FormableSwitcher } from './FormableSwitcher/index.js';
 export { default as FormableEditor } from './FormableEditor/index.js';
 export { default as FormableRadio } from './FormableRadio/index.js';
-export { F as FormableHOC } from './FormableHOC-a4ebfd24.js';
+export { F as FormableHOC } from './FormableHOC-85f89a81.js';
 export { default as Toaster, toasterPositions } from './Toaster/index.js';
 export { default as SearchWithDropdown } from './SearchWithDropdown/index.js';
 export { default as CheckboxGroupWithSearch } from './CheckboxGroupWithSearch/index.js';
@@ -97,8 +98,8 @@ export { default as Overspread } from './Overspread/index.js';
 export { default as DatePicker } from './DatePicker/index.js';
 export { default as DateFilter } from './DateFilter/index.js';
 export { ComboTable, PaginationSelector, PaperWrapper, TableContainer, TableHeader, TablePagination, TableTitle, WithHeader, WithTitle } from './TableCompositions/index.js';
-export { D as Dropdown } from './index-24537904.js';
-export { T as Table } from './index-59637c99.js';
+export { D as Dropdown } from './index-79ed03c9.js';
+export { T as Table } from './index-abbcc5bb.js';
 export { CardList, WrappedCardList } from './CardList/index.js';
 import 'react';
 import 'prop-types';
@@ -126,7 +127,7 @@ export { default as useUpdatableRef } from './hooks/useUpdatableRef.js';
 export { default as useDidMount } from './hooks/useDidMount.js';
 export { default as useBodyScroll } from './hooks/useBodyScroll.js';
 export { default as useImgDownload } from './hooks/useImgDownload.js';
-export { u as useEllipsisDetection } from './useEllipsisDetection-4d997d5d.js';
+export { u as useEllipsisDetection } from './useEllipsisDetection-c1c9ad94.js';
 import './tslib.es6-f211516f.js';
 import './index-031ff73c.js';
 import './style-inject.es-746bb8ed.js';
@@ -134,7 +135,7 @@ import './ArrowLeft-b88e2ba8.js';
 import './dateValidation-67caec66.js';
 import './_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './configs-34847b77.js';
+import './configs-00612ce0.js';
 import './_rollupPluginBabelHelpers-a83240e1.js';
 import './index-5f37f281.js';
 import './checkboxRadioSwitcher-5b69d7bd.js';
@@ -154,6 +155,6 @@ import './index-262edd7a.js';
 import './index-b3a30cb9.js';
 import './objectWithoutPropertiesLoose-e1596bdb.js';
 import './clsx.m-2bb6df4b.js';
-import './CellMeasurerCache-0b14f9d9.js';
+import './CellMeasurerCache-f5f86ede.js';
 import './redux-e591c1b8.js';
-import './react-beautiful-dnd.esm-1cdf39df.js';
+import './react-beautiful-dnd.esm-fa2b11a1.js';

package/lib/atoms/HelperText/HelperText.d.ts

@@ -34,6 +34,11 @@ interface IHelperTextProps {
      * When `true`, a loading skeleton is displayed instead of the actual helper text.
      */
     isLoading?: boolean;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
 }
 /**
  * The Helper Text provides users with additional information or guidance related to a specific input field in a form. This text helps users understand the expected format, requirements, or purpose of the input, thereby improving form completion accuracy and user confidence.

package/lib/atoms/Pill/Pill.d.ts

@@ -0,0 +1,50 @@
+import { FC, JSX } from 'react';
+import './Pill.scss';
+interface IPillProps {
+    /**
+     * The actual text content to be displayed as pill text.
+     */
+    text?: string;
+    /**
+     * Determines the position of the `Icon` relative to the `text`. <br/>
+     * **Note:** If `withDot` is `true` and no custom `Icon` is provided, the dot icon will always be displayed before the text, regardless of the `iconAlignment` value.<br/>
+     * Possible values: `before` or `after`.
+     */
+    iconAlignment?: 'before' | 'after';
+    /**
+     * Pill visual appearance
+     * When `isFill` prop set to `true`, the `pill` will have a solid fill, providing a more prominent visual appearance. If `false`, the `pill` will be displayed with an outlined style.
+     */
+    isFill?: boolean;
+    /**
+     * Pill size
+     * Possible values: `smallNudge | small | medium`
+     */
+    size?: 'smallNudge' | 'small' | 'medium';
+    /**
+     * Pill icon <br/>
+     * The `Icon` prop accepts a JSX element that will be displayed alongside the `text`
+     */
+    Icon?: JSX.Element;
+    /**
+     * Displays a dot `Icon` when no custom `Icon` is provided. <br/>
+     * If `true`, a dot icon will be shown unless a custom `Icon` is specified. <br/>
+     * If `false`, the dot will be hidden, even if no custom `Icon` is provided.
+     */
+    withDot?: boolean;
+    /**
+     * Pill color <br/>
+     * Possible values: `informative | neutral | error | success | warning | purple | lagoon | magenta | slate | inverse`
+     */
+    color?: 'informative' | 'neutral' | 'error' | 'success' | 'warning' | 'purple' | 'lagoon' | 'magenta' | 'slate' | 'inverse';
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+}
+/**
+ * A Pill component used to display concise information or categorize content. Often used for labels or status indicators, Pill components are visually distinct and can convey different meanings through text and color coding.
+ */
+declare const Pill: FC<IPillProps>;
+export { IPillProps, Pill as default };

package/lib/atoms/Pill/index.d.ts

@@ -0,0 +1 @@
+export { IPillProps, default as default } from './Pill';

package/lib/molecules/Tooltip/Tooltip.d.ts

@@ -1,26 +1,24 @@
-import { CSSProperties, JSX, FC } from 'react';
+import { JSX, FC, ReactNode } from 'react';
 import './Tooltip.scss';
-interface ICustomPosition {
-    left?: number;
-    top?: number;
-}
+export declare const correctPosition: {
+    'bottom-center': string;
+    'bottom-left': string;
+    'bottom-right': string;
+    'left-bottom': string;
+    'left-center': string;
+    'left-top': string;
+    'right-bottom': string;
+    'right-center': string;
+    'right-top': string;
+    'top-center': string;
+    'top-left': string;
+    'top-right': string;
+};
 export interface ITooltipProps {
-    /**
-     * The Tooltip component size<br> Possible values: `default | small`
-     */
-    size?: 'default' | 'small';
     /**
      * Main content for the component.
      */
     text?: string;
-    /**
-     * Title for the component.
-     */
-    title?: string;
-    /**
-     * Style object, to have extra styles.
-     */
-    style?: CSSProperties;
     /**
      * If `true` the  component will be visible without any action.
      */
@@ -28,7 +26,10 @@ export interface ITooltipProps {
     /**
      * Will display the component in the specified location.
      */
-    customPosition?: ICustomPosition;
+    customPosition?: {
+        left?: number;
+        top?: number;
+    };
     /**
      * Any valid React node.
      */
@@ -36,19 +37,25 @@ export interface ITooltipProps {
     /**
      * Positions where will be displayed the Tooltip relates the child component.<br> Possible values: `top | right | bottom | left`
      */
-    position?: 'top' | 'right' | 'bottom' | 'left';
+    position?: 'top-center' | 'top-left' | 'top-right' | 'right-center' | 'right-bottom' | 'right-top' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-center' | 'left-bottom' | 'left-top' | 'left-bottom';
     /**
      * Tooltip padding related to the target element
      */
     padding?: number;
-    /**
-     * Control with screenType  appearance of component
-     */
-    screenType?: 'desktop' | 'mobile';
     /**
      * In case of `false` value, the children component will rendered without Tooltip.
      */
     isVisible?: boolean;
+    /**
+     * Available style varieties of Empty atom to display <br/>
+     * Possible values: `inverse | default`
+     */
+    appearance?: 'inverse' | 'default';
+    Icon?: ReactNode;
 }
+/**
+A tooltip is a small, elevated surface that appears to provide contextual information when a user hovers over or focuses on a UI element.
+Tooltips should be used to offer helpful plaintext information, not to communicate system feedback. Use a popover instead if you need to deliver structured information or enable interactions.
+*/
 declare const Tooltip: FC<ITooltipProps>;
 export default Tooltip;

package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts

@@ -1,5 +1,6 @@
 import React, { JSX } from 'react';
 import 'src/assets/styles/globalStyling.scss';
+import 'src/assets/styles/utils.scss';
 type ThemesTypes = 'light' | 'dark';
 type TokensType = {
     [key: string]: string | number;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-fa529af-03102024",
+    "version": "3.0.0-next-77c6918-09102024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {

package/{react-beautiful-dnd.esm-1cdf39df.js → react-beautiful-dnd.esm-fa2b11a1.js}

@@ -2,7 +2,7 @@ import React__default, { useLayoutEffect, useEffect, useMemo as useMemo$1, useCo
 import { a as _setPrototypeOf, b as _objectWithoutPropertiesLoose, c as _extends } from './objectWithoutPropertiesLoose-e1596bdb.js';
 import { c as compose, b as bindActionCreators$1, a as createStore$1, d as applyMiddleware } from './redux-e591c1b8.js';
 import PropTypes from 'prop-types';
-import { r as reactIsExports$1 } from './index-0c18f902.js';
+import { r as reactIsExports$1 } from './index-c92894e2.js';
 import ReactDOM__default, { unstable_batchedUpdates } from 'react-dom';
 
 function _inheritsLoose(t, o) {

package/{useEllipsisDetection-4d997d5d.js → useEllipsisDetection-c1c9ad94.js}

@@ -12,7 +12,12 @@ const useEllipsisDetection = (ref, externalDependencies = []) => {
         const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
         setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
     };
-    useEffect(() => handleResize(), []);
+    useEffect(() => {
+        if (!ref.current || !('classList' in ref.current) || ref.current.classList.contains('ellipsis-text'))
+            return;
+        ref.current.classList.add('ellipsis-text');
+    }, [ref]);
+    useEffect(() => handleResize(), [...externalDependencies]);
     useEffect(() => {
         const debounce = () => debounceCallback(handleResize, 100);
         window.addEventListener('resize', debounce);
@@ -25,8 +30,7 @@ const useEllipsisDetection = (ref, externalDependencies = []) => {
         (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollWidth,
         (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
         (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.scrollHeight,
-        (_d = ref === null || ref === void 0 ? void 0 : ref.current) === null || _d === void 0 ? void 0 : _d.clientHeight,
-        ...externalDependencies
+        (_d = ref === null || ref === void 0 ? void 0 : ref.current) === null || _d === void 0 ? void 0 : _d.clientHeight
     ]);
     return isTruncated;
 };