@grasp-labs/ds-react-components 1.7.0 → 1.9.0

package/dist/components/baseTextBox/BaseTextBox.d.ts

@@ -1,4 +1,5 @@
-import { InputHTMLAttributes, JSX, ReactNode } from 'react';
+import { InputHTMLAttributes, JSX, ReactNode, Ref } from 'react';
+import { IconComponent } from '../../types/IconComponent';
 export type AcceptOnlyPattern = "number" | "integer" | "alphanumeric" | "alpha" | "decimal";
 export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "prefix" | "suffix"> & {
     /** Optional prefix element (e.g. icon, button) */
@@ -15,18 +16,26 @@ export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "chil
     name?: string;
     /** Additional class names for the container */
     className?: string;
-    /** Additional class names for the root element */
-    rootClassName?: string;
     /** Placeholder text */
     placeholder?: string;
     /** Ref for the input element */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
+    /** Ref for the container element */
+    containerRef?: Ref<HTMLDivElement>;
     /**
      * Restricts input to only accept specified values.
      * Can be a predefined pattern ("number", "integer", "alphanumeric", "alpha", "decimal")
      * or a custom filter function that returns the filtered/corrected string.
      */
     acceptOnly?: AcceptOnlyPattern | ((value: string) => string);
+    /**
+     * Puts the textbox in a highlighted mode with the icon and
+     * an optional toolip that explains the cause of the state.
+     */
+    highlight?: {
+        icon: IconComponent;
+        tooltip?: ReactNode;
+    };
 };
 /**
  * BaseTextBox is a customizable text input component that supports optional prefix and suffix elements,
@@ -37,4 +46,4 @@ export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "chil
  * @param ref - Ref forwarded to the native input element.
  * @returns {JSX.Element} The rendered BaseTextBox component.
  */
-export declare const BaseTextBox: ({ className, prefix, suffix, error, onChange, disabled, ref, id, name, rootClassName, type, acceptOnly, ...rest }: BaseTextBoxProps) => JSX.Element;
+export declare const BaseTextBox: ({ className, prefix, suffix, onChange, disabled, id, name, type, acceptOnly, highlight, containerRef, onClick, ...rest }: BaseTextBoxProps) => JSX.Element;

package/dist/components/datePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
 import { DayPicker, Locale } from 'react-day-picker';
+import { BaseTextBoxProps } from '../baseTextBox';
 type DayPickerClassNamesConfig = Pick<ComponentProps<typeof DayPicker>, "classNames" | "modifiersClassNames">;
 export type DatePickerProps = {
     /** Optional id (auto-generated if not provided) */
@@ -22,6 +23,13 @@ export type DatePickerProps = {
     className?: string;
     /** Config for class names used to override default styles of calendar */
     dayPickerClassNames?: DayPickerClassNamesConfig;
+    /** Whether the datepicker is in an error state */
+    error?: boolean;
+    /**
+     * Puts the textbox in a highlighted mode with the icon and
+     * an optional toolip that explains the cause of the state.
+     */
+    highlight?: BaseTextBoxProps["highlight"];
     /** Determines if input is invalid */
     "aria-invalid"?: boolean;
     /** Callback function called when the date is changed */
@@ -33,5 +41,5 @@ export type DatePickerProps = {
  * @param props - The props for the DatePicker component
  * @returns The rendered date-picker
  */
-export declare const DatePicker: ({ id, name, disabled, selectedDate, locale, minDate, maxDate, defaultMonth, className, dayPickerClassNames, onSelectedDateChange, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ id, name, disabled, selectedDate, locale, minDate, maxDate, defaultMonth, className, dayPickerClassNames, error, highlight, onSelectedDateChange, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/multiSelect/MultiSelect.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { BaseOption } from '../../types/BaseOption';
+import { BaseTextBoxProps } from '../baseTextBox';
 export type MultiSelectProps<Option extends BaseOption> = {
     value: Option[];
     setValue: (value: Option[] | ((prevState: Option[]) => Option[])) => void;
@@ -16,6 +17,8 @@ export type MultiSelectProps<Option extends BaseOption> = {
     ref?: React.Ref<HTMLInputElement>;
     maxHeight?: number;
     listClassName?: string;
+    className?: string;
+    highlight?: BaseTextBoxProps["highlight"];
 };
 /**
  * A multi-selection dropdown component with tag-based display of selected items.
@@ -25,4 +28,4 @@ export type MultiSelectProps<Option extends BaseOption> = {
  * @param props - The props for the MultiSelect component.
  * @returns The rendered multi-select dropdown with tag list.
  */
-export declare const MultiSelect: <Option extends BaseOption>({ value, setValue, options, id, error, prefix, suffix, disabled, emptyPlaceholder, addMorePlaceholder, toggleAriaLabel, noOptionsText, ref, maxHeight, listClassName, }: MultiSelectProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: <Option extends BaseOption>({ value, setValue, options, id, error, prefix, suffix, disabled, emptyPlaceholder, addMorePlaceholder, toggleAriaLabel, noOptionsText, ref, maxHeight, listClassName, className, highlight, }: MultiSelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/Select.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+import { ReactElement, Ref } from 'react';
 import { BaseOption, OptionNode } from '../../types';
+import { BaseTextBoxProps } from '../baseTextBox';
 import { NoneOf } from '../../types/NoneOf';
 export type BaseSelectProps<Option extends BaseOption> = {
     value: Option | null;
@@ -13,11 +14,11 @@ export type BaseSelectProps<Option extends BaseOption> = {
     placeholder?: string;
     toggleAriaLabel?: string;
     noOptionsText?: string;
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
     className?: string;
-    containerClassName?: string;
     listClassName?: string;
     maxHeight?: number;
+    highlight?: BaseTextBoxProps["highlight"];
     onListScrollEnd?: () => void;
 };
 export type ClientSelectProps = {
@@ -38,4 +39,4 @@ export type SelectProps<Option extends BaseOption> = (BaseSelectProps<Option> &
  * @param props - The props for the Select component.
  * @returns The rendered select dropdown component.
  */
-export declare const Select: <Option extends BaseOption>({ value, setValue, options, id, prefix, suffix, error, disabled, placeholder, toggleAriaLabel, noOptionsText, ref, disableSearch, className, containerClassName, listClassName, maxHeight, onSearch, debounce, isLoading, loadingText, onListScrollEnd, }: SelectProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <Option extends BaseOption>({ value, setValue, options, id, prefix, suffix, error, disabled, placeholder, toggleAriaLabel, noOptionsText, ref, disableSearch, className, listClassName, maxHeight, onSearch, debounce, isLoading, loadingText, highlight, onListScrollEnd, }: SelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/Table.d.ts

@@ -2,5 +2,5 @@ import { JSX } from 'react';
 import { TableProps } from './types';
 declare function Table<T extends {
     id?: string | number;
-}>({ data, columns, rootClassName, className, scrollWrapperClassName, isLoading, loadingText, getCoreRowModel, enableRowSelection, enableMultiRowSelection, enablePagination, paginationProps, ...options }: TableProps<T>): JSX.Element;
+}>({ data, columns, rootClassName, className, scrollWrapperClassName, isLoading, loadingText, getCoreRowModel, enableRowSelection, enableMultiRowSelection, enablePagination, emptyStateText, paginationProps, ...options }: TableProps<T>): JSX.Element;
 export default Table;

package/dist/components/table/types.d.ts

@@ -38,6 +38,7 @@ export type TableProps<T> = Omit<TableOptions<T>, "getCoreRowModel" | "getSorted
     loadingText?: string;
     getCoreRowModel?: TableOptions<T>["getCoreRowModel"];
     enablePagination?: boolean;
+    emptyStateText?: string;
     paginationProps?: {
         mode?: "client";
         itemsPerPageOptions?: number[];

package/dist/components/textBox/TextBox.d.ts

@@ -5,4 +5,4 @@ import { BaseTextBoxProps } from '../baseTextBox';
  * @param props - Props to customize the textbox behavior and styling.
  * @param ref - Ref forwarded to the underlying input element.
  */
-export declare const TextBox: ({ value, error, disabled, className, id, name, ref, type, ...props }: BaseTextBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextBox: ({ value, error, disabled, className, id, name, ref, type, highlight, ...props }: BaseTextBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/toast/Toast.d.ts

@@ -1,2 +1,2 @@
 import { ToastProps } from './types';
-export declare const Toast: ({ id, message, variant, onDismiss, className, index, visibleToasts, dismissLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ id, message, title, variant, onDismiss, className, index, visibleToasts, dismissLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/toast/types.d.ts

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react';
 export type ToastVariant = "success" | "error" | "warning" | "info";
 export type ToastItem = {
     id: string;
-    message: string;
+    message: ReactNode;
+    title?: string;
     variant?: ToastVariant;
     dismissLabel?: string;
 };

package/dist/components/tooltip/Tooltip.d.ts

@@ -19,4 +19,4 @@ export type TooltipProps = {
  * @param props - The props for the Tooltip component.
  * @returns The rendered tooltip with trigger element.
  */
-export declare const Tooltip: ({ children, content, placement, openDelay, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, content, placement, openDelay, className, }: TooltipProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/icons/iconsComponents.d.ts

@@ -23,6 +23,7 @@ export declare const DashboardIcon: IconComponent;
 export declare const DatabaseIcon: IconComponent;
 export declare const DeleteIcon: IconComponent;
 export declare const DetailsIcon: IconComponent;
+export declare const DiamondIcon: IconComponent;
 export declare const DownIcon: IconComponent;
 export declare const DownloadIcon: IconComponent;
 export declare const EarthIcon: IconComponent;
@@ -50,6 +51,7 @@ export declare const ReloadIcon: IconComponent;
 export declare const RightIcon: IconComponent;
 export declare const SaveIcon: IconComponent;
 export declare const SearchIcon: IconComponent;
+export declare const SendOneIcon: IconComponent;
 export declare const ServerIcon: IconComponent;
 export declare const SuccessIcon: IconComponent;
 export declare const TableIcon: IconComponent;

package/dist/icons/iconsLazy.d.ts

@@ -25,6 +25,7 @@ declare const iconImporters: {
     readonly database: () => Promise<typeof import("*.svg?react")>;
     readonly delete: () => Promise<typeof import("*.svg?react")>;
     readonly details: () => Promise<typeof import("*.svg?react")>;
+    readonly diamond: () => Promise<typeof import("*.svg?react")>;
     readonly down: () => Promise<typeof import("*.svg?react")>;
     readonly download: () => Promise<typeof import("*.svg?react")>;
     readonly earth: () => Promise<typeof import("*.svg?react")>;
@@ -52,6 +53,7 @@ declare const iconImporters: {
     readonly right: () => Promise<typeof import("*.svg?react")>;
     readonly save: () => Promise<typeof import("*.svg?react")>;
     readonly search: () => Promise<typeof import("*.svg?react")>;
+    readonly sendOne: () => Promise<typeof import("*.svg?react")>;
     readonly server: () => Promise<typeof import("*.svg?react")>;
     readonly success: () => Promise<typeof import("*.svg?react")>;
     readonly table: () => Promise<typeof import("*.svg?react")>;