@geneui/components 3.0.0-next-65b0240-02122024 → 3.0.0-next-8abb102-14012025

package/TextLink.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
-var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}.textLink:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__text{color:inherit}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
+var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}.textLink:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__text{color:inherit}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{-webkit-margin-end:var(--guit-ref-spacing-3xsmall);margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{-webkit-margin-start:var(--guit-ref-spacing-3xsmall);margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
 styleInject(css_248z);
 
 /**

package/components/atoms/HelperText/HelperText.d.ts

@@ -30,11 +30,6 @@ interface IHelperTextProps {
      * If `true`, the helper text will appear dimmed and non-interactive.
      */
     isDisabled?: boolean;
-    /**
-     * Indicates whether the component is in a loading state.
-     * 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.

package/components/atoms/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,42 @@
+import { FC, UIEvent, ReactNode } from "react";
+import "./Scrollbar.scss";
+interface IScrollbarProps {
+    /**
+     * 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 content to be rendered inside the scrollable area.
+     */
+    children: ReactNode;
+    /**
+     * Automatically scrolls the container to a specific vertical position (in pixels).
+     */
+    autoScrollTopTo?: number;
+    /**
+     * Automatically scrolls the container to a specific horizontal position (in pixels).
+     */
+    autoScrollLeftTo?: number;
+    /**
+     * Callback function triggered during scroll events. Receives the scroll event as an argument.
+     */
+    onScroll?: (e: UIEvent<HTMLDivElement>) => void;
+    /**
+     * 	Custom height for the scrollable container.<br>
+     * 	Default is 100%.<br>
+     * 	Possible values: `any valid css value`
+     */
+    customHeight?: string;
+    /**
+     * 	Custom width for the scrollable container.<br>
+     * 	Default is 100%.<br>
+     * 	Possible values: `any valid css value`
+     */
+    customWidth?: string;
+}
+/**
+ * Scrollbar is a UI element that allows users to navigate through content that extends beyond the visible area of a container or window. It typically appears along the right side or bottom of the viewport, providing a draggable handle and directional arrows for vertical or horizontal scrolling, enabling users to access all available content.
+ */
+declare const Scrollbar: FC<IScrollbarProps>;
+export { IScrollbarProps, Scrollbar as default };

package/components/atoms/Scrollbar/index.d.ts

@@ -0,0 +1 @@
+export { IScrollbarProps, default } from "./Scrollbar";

package/hooks/useDebounceCallback/useDebounceCallback.d.ts

@@ -1,2 +1,5 @@
-declare const useDebouncedCallback: <T extends (...args: unknown[]) => void>(func: T, wait?: number) => (...args: unknown[]) => void;
+declare const useDebouncedCallback: <T extends (...args: unknown[]) => void>(func: T, wait?: number) => {
+    debouncedCallback: (...args: unknown[]) => void;
+    clearDebounce: () => void;
+};
 export default useDebouncedCallback;

package/index.d.ts

@@ -6,6 +6,7 @@ export { default as Pill, IPillProps } from "./components/atoms/Pill";
 export { default as Divider, IDividerProps } from "./components/atoms/Divider";
 export { default as Info, IInfoProps } from "./components/atoms/Info";
 export { default as Button, IButtonProps } from "./components/atoms/Button";
+export { default as Scrollbar } from "./components/atoms/Scrollbar";
 export { default as Tooltip } from "./components/molecules/Tooltip";
 export { default as ProgressBar } from "./components/molecules/ProgressBar";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";

package/index.js

@@ -6,12 +6,15 @@ export { default as Pill } from './Pill.js';
 export { default as Divider } from './Divider.js';
 export { default as Info } from './Info.js';
 export { default as Button } from './Button.js';
+export { default as Scrollbar } from './Scrollbar.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as ProgressBar } from './ProgressBar.js';
 export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
-export { u as useDebounce, a as useEllipsisDetection } from './useEllipsisDetection-46d712b6.js';
+export { u as useDebounce } from './useDebounceCallback-999deae7.js';
+export { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
 import 'react';
 import './index-ce02421b.js';
 import './ArrowLeft-b88e2ba8.js';
 import './style-inject.es-746bb8ed.js';
+import 'prop-types';
 import 'react-dom';

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-65b0240-02122024",
+    "version": "3.0.0-next-8abb102-14012025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {
@@ -168,7 +168,8 @@
         "@geneui/icons": "^1.0.4",
         "@geneui/tokens": "^1.8.0-beta",
         "classnames": "^2.3.2",
-        "react-is": "^17.0.2"
+        "react-is": "^17.0.2",
+        "react-scrollbars-custom": "^4.1.1"
     },
     "husky": {
         "hooks": {

package/useDebounceCallback-999deae7.js

@@ -0,0 +1,23 @@
+import { useRef, useCallback } from 'react';
+
+const useDebouncedCallback = (func, wait) => {
+    const timeout = useRef(undefined);
+    const waitTime = wait === undefined ? 0 : wait;
+    const debouncedCallback = useCallback((...args) => {
+        const later = () => {
+            clearTimeout(timeout.current);
+            func(...args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = window.setTimeout(later, waitTime);
+    }, [func, waitTime]);
+    const clearDebounce = useCallback(() => {
+        if (timeout.current !== undefined) {
+            clearTimeout(timeout.current);
+            timeout.current = undefined;
+        }
+    }, []);
+    return { debouncedCallback, clearDebounce };
+};
+
+export { useDebouncedCallback as u };

package/{useEllipsisDetection-46d712b6.js → useEllipsisDetection-e545ae62.js}

@@ -1,16 +1,5 @@
-import { useRef, useCallback, useState, useEffect } from 'react';
-
-const useDebouncedCallback = (func, wait) => {
-    const timeout = useRef(undefined);
-    return useCallback((...args) => {
-        const later = () => {
-            clearTimeout(timeout.current);
-            func(...args);
-        };
-        clearTimeout(timeout.current);
-        timeout.current = window.setTimeout(later, wait);
-    }, [func, wait]);
-};
+import { useState, useEffect } from 'react';
+import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
 
 const EQUAL_HEIGHT_DIFF = 3;
 const useEllipsisDetection = (ref, externalDependencies = []) => {
@@ -23,12 +12,12 @@ const useEllipsisDetection = (ref, externalDependencies = []) => {
         setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
     };
     useEffect(() => handleResize(), [...externalDependencies]);
-    const debounce = useDebouncedCallback(handleResize, 100);
+    const { debouncedCallback } = useDebouncedCallback(handleResize, 100);
     useEffect(() => {
-        window.addEventListener("resize", debounce);
-        return () => window.removeEventListener("resize", debounce);
+        window.addEventListener("resize", debouncedCallback);
+        return () => window.removeEventListener("resize", debouncedCallback);
     }, [(_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]);
     return isTruncated;
 };
 
-export { useEllipsisDetection as a, useDebouncedCallback as u };
+export { useEllipsisDetection as u };