@geneui/components 3.0.0-next-f0c40b8-25112024 → 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

@@ -9,10 +9,10 @@ interface IHelperTextProps {
     size?: "medium" | "small";
     /**
      * Specifies the type of the helper text. <br>
-     * Possible values: `rest | danger | warning`.
-     * `rest` for default information, `danger` for error messages, or `warning` for cautions.
+     * Possible values: `rest | error | warning`.
+     * `rest` for default information, `error` for error messages, or `warning` for cautions.
      */
-    type?: "rest" | "danger" | "warning";
+    type?: "rest" | "error" | "warning";
     /**
      * The actual text content to be displayed as helper text.
      * This provides guidance or additional information related to the input field.
@@ -20,7 +20,7 @@ interface IHelperTextProps {
     text: string;
     /**
      * Optional. Icon to be displayed alongside the helper text.
-     * If the `type` prop is set to `danger` or `warning`, a default icon will be used (ErrorAlertFill for `danger` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
+     * If the `type` prop is set to `error` or `warning`, a default icon will be used (ErrorAlertFill for `error` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
      * If `type` is `rest`, the provided `Icon` will be used (if supplied), otherwise no icon will be displayed.
      * The size of the icon will automatically adjust based on the `size` prop (`small` or `medium`).
      */
@@ -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/Label/Label.d.ts

@@ -32,6 +32,11 @@ interface ILabelProps {
      * When set to `true` a `skeleton` indicator will be shown instead of the `label` text.
      */
     isLoading?: boolean;
+    /**
+     * Indicates whether the `label` should be read-only.
+     * This prop will not make visual changes but sets `pointer-events: auto` to prevent triggering label click events.
+     */
+    readOnly?: 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/components/molecules/Checkbox/Checkbox.d.ts

@@ -0,0 +1,80 @@
+import { ChangeEvent, FC, FocusEvent } from "react";
+import "./Checkbox.scss";
+interface ICheckboxProps {
+    /**
+     *  The text displayed as the label for the checkbox, describing its purpose or function.
+     */
+    label?: string;
+    /**
+     *  Toggles the label's and HelperText position between above or beside the checkbox.
+     */
+    vertical?: boolean;
+    /**
+     *  Specifies whether the checkbox is mandatory for completing a form.
+     */
+    required?: boolean;
+    /**
+     *  Disables the checkbox, preventing it from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     *  Displays the checkbox as read-only, where users cannot modify its value.
+     */
+    readOnly?: boolean;
+    /**
+     *  Activates a visual state indicating partial selection within a checkbox group.
+     */
+    indeterminate?: boolean;
+    /**
+     *  Manages the checked state of the checkbox in a controlled way.
+     */
+    checked?: boolean;
+    /**
+     *  Automatically focuses the checkbox when the component mounts.
+     */
+    autoFocus?: boolean;
+    /**
+     *  Extra information displayed with the label for clarity or guidance.
+     */
+    infoText?: string;
+    /**
+     *  Helper text to provide context or explain any errors, warnings related to the checkbox.
+     */
+    helperText?: string;
+    /**
+     *  The initial checked state of the checkbox before user interaction.
+     */
+    defaultChecked?: boolean;
+    /**
+     *  Determines the checkboxes appearance based on its status.<br>
+     *  Possible values: `rest | warning | error`
+     */
+    type?: "rest" | "warning" | "error";
+    /**
+     *  HTML name attribute for the input element.<br>
+     *  A unique identifier for the checkbox within a form.
+     */
+    name?: string;
+    /**
+     *  Fires when the user changes the checkbox state. Provides the change event as a callback's argument.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the checkbox input element loses focus. Provides the focus event as a callback's argument.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the checkbox input element receives focus. Provides the focus event as a callback's argument.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 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;
+}
+/**
+ * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
+ */
+declare const Checkbox: FC<ICheckboxProps>;
+export { ICheckboxProps, Checkbox as default };

package/components/molecules/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { ICheckboxProps, default } from "./Checkbox";

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-f0c40b8-25112024",
+    "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 };