@devtron-labs/devtron-fe-common-lib 1.10.0 → 1.10.1-beta-2

package/dist/{@common-rjsf-B1NZSY87.js → @common-rjsf-B71oS2-A.js}

@@ -1,7 +1,7 @@
 import { j as n, aq as y, as as k, ar as W } from "./@vendor-DXbFZ041.js";
 import V, { forwardRef as J, useMemo as P } from "react";
 import K, { getDefaultRegistry as q } from "@rjsf/core";
-import { T as F, j as N, c as v, b as S, a as Y, i as z, d as w, e as E, S as G } from "./@code-editor-Dd-Rsu69.js";
+import { T as F, j as N, c as v, b as S, a as Y, i as z, d as w, e as E, S as G } from "./@code-editor-CPKQ3C33.js";
 import Q, { components as D } from "react-select";
 import { ReactComponent as X } from "./assets/ic-chevron-down.fc70d7a7.svg";
 import { getUiOptions as B, getTemplate as $, getSubmitButtonOptions as Z, ADDITIONAL_PROPERTY_FLAG as L, errorId as ee, englishStringTranslator as te, TranslatableString as ne, titleId as re, canExpand as se, deepEquals as ae } from "@rjsf/utils";

package/dist/Common/Hooks/UseRegisterShortcut/types.d.ts

@@ -7,8 +7,22 @@ export declare const KEYBOARD_KEYS_MAP: {
     readonly E: "E";
     readonly R: "R";
     readonly K: "K";
+    readonly X: "X";
+    readonly A: "A";
     readonly Escape: "Esc";
     readonly Enter: "↩";
+    readonly ArrowLeft: "←";
+    readonly ArrowRight: "→";
+    readonly ArrowUp: "↑";
+    readonly ArrowDown: "↓";
+    readonly PageUp: "PgUp";
+    readonly PageDown: "PgDn";
+    readonly Home: "Home";
+    readonly End: "End";
+    readonly Backspace: "⌫";
+    readonly Delete: "⌦";
+    readonly '.': ".";
+    readonly Space: "Space";
 };
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP;
 export interface ShortcutType {

package/dist/Common/Hooks/UseRegisterShortcut/utils.d.ts

@@ -1,6 +1,6 @@
 import { ShortcutType } from './types';
 export declare const preprocessKeys: (keys: ShortcutType["keys"]) => {
-    keys: ("Escape" | "Control" | "Alt" | "F" | "E" | "R" | "K" | "Shift" | "Meta" | "Enter")[];
+    keys: ("Escape" | "Control" | "Alt" | "F" | "E" | "R" | "K" | "X" | "A" | "Home" | "End" | "." | "Space" | "Shift" | "Meta" | "Enter" | "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown" | "PageUp" | "PageDown" | "Backspace" | "Delete")[];
     id: string;
 };
 export declare const verifyCallbackStack: (stack: ShortcutType["callbackStack"]) => void;

package/dist/Common/Hooks/useStateFilters/types.d.ts

@@ -1,7 +1,7 @@
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters';
 export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {
 }
-export interface UseStateFiltersReturnType<T> extends Pick<UseUrlFiltersReturnType<T>, 'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters' | 'changePage' | 'changePageSize' | 'offset' | 'pageSize' | 'searchKey' | 'handleSearch'> {
+export interface UseStateFiltersReturnType<T> extends Pick<UseUrlFiltersReturnType<T>, 'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters' | 'changePage' | 'changePageSize' | 'offset' | 'pageSize' | 'searchKey' | 'handleSearch' | 'isFilterApplied'> {
 }
 export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {
     pageNumber: number;

package/dist/Common/Hooks/useUrlFilters/types.d.ts

@@ -1,5 +1,5 @@
 import { SortingOrder } from '../../Constants';
-export interface UseUrlFiltersProps<T, K> {
+export interface UseUrlFiltersProps<T, K extends {}> {
     /**
      * The key on which the sorting should be applied
      */
@@ -19,8 +19,8 @@ export interface UseUrlFiltersProps<T, K> {
      */
     redirectionMethod?: 'replace' | 'push';
 }
-export type UpdateSearchParamsOptionsType<T, K = unknown> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>;
-export type UseUrlFiltersReturnType<T, K = unknown> = K & {
+export type UpdateSearchParamsOptionsType<T, K = {}> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>;
+export type UseUrlFiltersReturnType<T, K = {}> = K & {
     /**
      * Currently applied page size
      */
@@ -67,4 +67,5 @@ export type UseUrlFiltersReturnType<T, K = unknown> = K & {
      * Update the search params with the passed object
      */
     updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void;
+    isFilterApplied: boolean;
 };

package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts

@@ -16,5 +16,5 @@ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
  * ```
  *
  */
-declare const useUrlFilters: <T = string, K = unknown>({ initialSortKey, parseSearchParams, localStorageKey, redirectionMethod, }?: UseUrlFiltersProps<T, K>) => UseUrlFiltersReturnType<T, K>;
+declare const useUrlFilters: <T = string, K = {}>({ initialSortKey, parseSearchParams, localStorageKey, redirectionMethod, }?: UseUrlFiltersProps<T, K>) => UseUrlFiltersReturnType<T, K>;
 export default useUrlFilters;

package/dist/Common/Hooks/useUrlFilters/utils.d.ts

@@ -1 +1,2 @@
 export declare const setItemInLocalStorageIfKeyExists: (localStorageKey: string, value: string) => void;
+export declare const areAnyAdditionalFiltersApplied: (parsedParams: Record<string | number, any>) => boolean;

package/dist/Common/SegmentedControl/Segment.d.ts

@@ -0,0 +1,3 @@
+import { SegmentProps } from './types';
+declare const Segment: ({ segment, isSelected, name, selectedSegmentRef, onChange, fullWidth, size, disabled, }: SegmentProps) => JSX.Element;
+export default Segment;

package/dist/Common/SegmentedControl/SegmentedControl.component.d.ts

@@ -1,3 +1,3 @@
 import { SegmentedControlProps } from './types';
-declare const SegmentedControl: ({ tabs, initialTab, onChange, tooltips, disabled, rootClassName, name, variant, size, isControlled, }: SegmentedControlProps) => JSX.Element;
+declare const SegmentedControl: ({ segments, onChange, name, size, value: controlledValue, fullWidth, disabled, }: SegmentedControlProps) => JSX.Element;
 export default SegmentedControl;

package/dist/Common/SegmentedControl/constants.d.ts

@@ -1,2 +1,3 @@
 import { SegmentedControlProps } from './types';
-export declare const SEGMENTED_CONTROL_SIZE_TO_CLASS_MAP: Record<SegmentedControlProps['size'], string>;
+export declare const COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP: Record<SegmentedControlProps['size'], string>;
+export declare const COMPONENT_SIZE_TO_ICON_CLASS_MAP: Record<SegmentedControlProps['size'], string>;

package/dist/Common/SegmentedControl/index.d.ts

@@ -1,2 +1,2 @@
-export { type SegmentedControlProps, SegmentedControlVariant } from './types';
 export { default as SegmentedControl } from './SegmentedControl.component';
+export { type SegmentedControlProps } from './types';

package/dist/Common/SegmentedControl/types.d.ts

@@ -1,25 +1,67 @@
-import { OptionType } from '../Types';
+import { TooltipProps } from '../Tooltip';
+import { IconsProps, SelectPickerOptionType } from '../../Shared/Components';
 import { ComponentSizeType } from '../../Shared/constants';
-import { ReactNode } from 'react';
-export declare enum SegmentedControlVariant {
-    GRAY_ON_WHITE = "gui-yaml-switch",
-    WHITE_ON_GRAY = "gui-yaml-switch-window-bg"
-}
-export interface SegmentedControlProps {
-    tabs: OptionType<string, ReactNode>[];
-    initialTab: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+import { RefObject } from 'react';
+type SegmentTooltipProps = Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement'>;
+export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
+    /**
+     * If true, the segment will be in error state with error icon
+     */
+    isError?: boolean;
+} & (({
+    /**
+     * Label for the segment
+     *
+     * Note: Either of label or icon is required
+     */
+    label: SelectPickerOptionType['label'];
+    /**
+     * Icon for the segment
+     *
+     * Note: Either of label or icon is required
+     */
+    icon?: IconsProps['name'];
+    /**
+     * Tooltip props for the segment
+     *
+     * Note: Required if only icon is provided
+     */
+    tooltipProps?: SegmentTooltipProps;
+    ariaLabel?: never;
+} & Pick<SelectPickerOptionType, 'label'>) | {
+    label?: never;
+    tooltipProps: SegmentTooltipProps;
+    icon: IconsProps['name'];
+    /**
+     * Aria label for the segment
+     */
+    ariaLabel: string;
+});
+export type SegmentedControlProps = {
+    /**
+     * List of segments to be displayed
+     */
+    segments: SegmentType[];
     name: string;
-    tooltips?: string[];
+    size?: Extract<ComponentSizeType, ComponentSizeType.xs | ComponentSizeType.small | ComponentSizeType.medium>;
+    fullWidth?: boolean;
     disabled?: boolean;
-    rootClassName?: string;
-    variant?: SegmentedControlVariant;
+} & ({
+    value?: never;
     /**
-     * @default ComponentSizeType.medium
+     * On change handler for the component
      */
-    size?: ComponentSizeType.medium | ComponentSizeType.large;
+    onChange?: (selectedSegment: SegmentType) => void;
+} | {
     /**
-     * @default false
+     * If defined, the component is controlled and onChange needs to be handled by the parent
      */
-    isControlled?: boolean;
+    value: SegmentType['value'];
+    onChange: (selectedSegment: SegmentType) => void;
+});
+export interface SegmentProps extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
+    isSelected: boolean;
+    segment: SegmentType;
+    selectedSegmentRef: RefObject<HTMLDivElement> | undefined;
 }
+export {};

package/dist/Shared/Components/Button/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './Button.component';
+export { default as useTriggerAutoClickTimestamp } from './useTriggerAutoClickTimestamp';
 export * from './types';

package/dist/Shared/Components/Button/types.d.ts

@@ -88,6 +88,8 @@ export type ButtonProps<ComponentType extends ButtonComponentType = ButtonCompon
     isOpacityHoverChild?: boolean;
     /**
      * If provided, the button is clicked automatically after the pre-defined time
+     *
+     * Use from useTriggerAutoClickTimestamp hook
      */
     triggerAutoClickTimestamp?: number | null;
 } & ({

package/dist/Shared/Components/Button/useTriggerAutoClickTimestamp.d.ts

@@ -0,0 +1,6 @@
+declare const useTriggerAutoClickTimestamp: () => {
+    triggerAutoClickTimestamp: number;
+    setTriggerAutoClickTimestampToNow: () => void;
+    resetTriggerAutoClickTimestamp: () => void;
+};
+export default useTriggerAutoClickTimestamp;

package/dist/Shared/Components/SelectPicker/SelectPicker.component.d.ts

@@ -37,16 +37,15 @@ import { SelectPickerProps } from './type';
  * <SelectPicker ... helperText="Help information" />
  * ```
  *
- * @example Menu list footer
+ * @example Menu list footer config
  * The footer is sticky by default
  * ```tsx
  * <SelectPicker
  *      ...
- *      renderMenuListFooter={() => (
- *          <div className="px-8 py-6 dc__border-top bg__secondary cn-6">
- *              <div>Foot note</div>
- *          </div>
- *      )}
+ *      menuListFooterConfig={{
+ *          type: 'text',
+ *          value: 'Info text',
+ *      }}
  * />
  * ```
  *
@@ -134,5 +133,5 @@ import { SelectPickerProps } from './type';
  * />
  * ```
  */
-declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, renderMenuListFooter, isCreatable, onCreateOption, closeMenuOnSelect, shouldShowNoOptionsMessage, shouldRenderTextArea, onKeyDown, shouldHideMenu, warningText, layout, ariaLabel, borderConfig, borderRadiusConfig, labelTippyCustomizedConfig, labelTooltipConfig, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
+declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef: refFromConsumer, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, menuListFooterConfig, isCreatable, onCreateOption, closeMenuOnSelect, shouldShowNoOptionsMessage, shouldRenderTextArea, onKeyDown, shouldHideMenu, warningText, layout, ariaLabel, borderConfig, borderRadiusConfig, labelTippyCustomizedConfig, labelTooltipConfig, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
 export default SelectPicker;

package/dist/Shared/Components/SelectPicker/common.d.ts

@@ -5,7 +5,6 @@ export declare const SelectPickerClearIndicator: <OptionValue>(props: ClearIndic
 export declare const SelectPickerControl: <OptionValue>(props: ControlProps<SelectPickerOptionType<OptionValue>>) => JSX.Element;
 export declare const SelectPickerInput: <OptionValue>(props: InputProps<SelectPickerOptionType<OptionValue>>) => JSX.Element;
 export declare const SelectPickerValueContainer: <OptionValue, IsMulti extends boolean>({ showSelectedOptionsCount, customSelectedOptionsCount, ...props }: ValueContainerProps<SelectPickerOptionType<OptionValue>> & Pick<SelectPickerProps<OptionValue, IsMulti>, "showSelectedOptionsCount" | "customSelectedOptionsCount">) => JSX.Element;
-export declare const SelectPickerLoadingIndicator: () => JSX.Element;
 export declare const SelectPickerOption: <OptionValue, IsMulti extends boolean>({ disableDescriptionEllipsis, ...props }: OptionProps<SelectPickerOptionType<OptionValue>> & Pick<SelectPickerProps<OptionValue, IsMulti>, "disableDescriptionEllipsis">) => JSX.Element;
 export declare const SelectPickerMenuList: <OptionValue>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => JSX.Element;
 export declare const SelectPickerMultiValueLabel: <OptionValue, IsMulti extends boolean>({ getIsOptionValid, ...props }: MultiValueProps<SelectPickerOptionType<OptionValue>, true> & Pick<SelectPickerProps<OptionValue, IsMulti>["multiSelectProps"], "getIsOptionValid">) => JSX.Element;

package/dist/Shared/Components/SelectPicker/type.d.ts

@@ -7,6 +7,7 @@ import { CreatableProps } from 'react-select/creatable';
 import { TooltipProps } from '@Common/Tooltip/types';
 import { ResizableTagTextAreaProps } from '../../../Common/CustomTagSelector';
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types';
+import { ButtonComponentType, ButtonProps, ButtonVariantType } from '../Button';
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
      * Description to be displayed for the option
@@ -26,16 +27,30 @@ export interface SelectPickerOptionType<OptionValue = string | number> extends O
     tooltipProps?: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo'> | (Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'content'> & Required<Pick<TooltipProps, 'shortcutKeyCombo'>>);
 }
 type SelectProps<OptionValue, IsMulti extends boolean> = ReactSelectProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>;
+type MenuListFooterConfigType = {
+    type: 'text';
+    /**
+     * String is preferred for text type
+     */
+    value: ReactNode;
+    buttonProps?: never;
+} | {
+    type: 'button';
+    value?: never;
+    buttonProps: {
+        variant: ButtonVariantType.primary | ButtonVariantType.borderLess;
+    } & Omit<ButtonProps<ButtonComponentType>, 'size' | 'fullWidth' | 'icon' | 'endIcon' | 'variant' | 'style'>;
+};
 declare module 'react-select/base' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
         /**
-         * Render function for the footer at the bottom of menu list. It is sticky by default
+         * Config for the footer at the bottom of menu list. It is sticky by default
          */
-        renderMenuListFooter?: () => ReactNode;
+        menuListFooterConfig?: MenuListFooterConfigType;
         /**
          * If true, custom options are rendered in the menuList component of react select
          *
-         * Note: renderCustomOptions is required to be passed; renderMenuListFooter is also not called
+         * Note: renderCustomOptions is required to be passed; menuListFooterConfig is also not used
          *
          * @default false
          */
@@ -80,7 +95,13 @@ export declare enum SelectPickerVariantType {
     DEFAULT = "default",
     BORDER_LESS = "border-less"
 }
-export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'renderMenuListFooter' | 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
+export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
+    /**
+     * Config for the footer at the bottom of menu list. It is sticky by default
+     *
+     * Note: Re-declaring here since dynamic typing doesn't work with module augmentation
+     */
+    menuListFooterConfig?: MenuListFooterConfigType;
     /**
      * Custom selected options count for use cases like filters
      */

package/dist/Shared/Components/Table/BulkSelectionActionWidget.d.ts

@@ -0,0 +1,3 @@
+import { BulkSelectionActionWidgetProps } from './types';
+declare const BulkSelectionActionWidget: ({ count, handleClearBulkSelection, parentRef, BulkActionsComponent, }: BulkSelectionActionWidgetProps) => JSX.Element;
+export default BulkSelectionActionWidget;

package/dist/Shared/Components/Table/InternalTable.d.ts

@@ -0,0 +1,3 @@
+import { InternalTableProps } from './types';
+declare const InternalTable: ({ filtersVariant, filterData, rows, getRows, columns, ViewWrapper, resizableConfig, emptyStateConfig, additionalProps, areColumnsConfigurable, filter, setVisibleColumns, visibleColumns, stylesConfig, loading, bulkSelectionConfig, bulkSelectionReturnValue, handleClearBulkSelection, handleToggleBulkSelectionOnRow, paginationVariant, RowActionsOnHoverComponent, }: InternalTableProps) => JSX.Element;
+export default InternalTable;

package/dist/Shared/Components/Table/Table.component.d.ts

@@ -0,0 +1,3 @@
+import { TableProps } from './types';
+declare const TableWrapper: (tableProps: TableProps) => JSX.Element;
+export default TableWrapper;

package/dist/Shared/Components/Table/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const SEARCH_SORT_CHANGE_DEBOUNCE_TIME = 350; /** in ms */
+export declare const LOCAL_STORAGE_EXISTS: boolean;
+export declare const LOCAL_STORAGE_KEY_FOR_VISIBLE_COLUMNS = "generic-table-configurable-columns";
+export declare const BULK_ACTION_GUTTER_LABEL = "bulk-action-gutter";
+export declare const EVENT_TARGET: EventTarget;
+export declare const DRAG_SELECTOR_IDENTIFIER = "table-drag-selector";
+export declare const TABLE_ID_MAP: {
+    readonly STORYBOOK: "storybook-table";
+};
+export declare const SHIMMER_DUMMY_ARRAY: number[];

package/dist/Shared/Components/Table/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Table } from './Table.component';
+export { FiltersTypeEnum, PaginationEnum, SignalEnum as TableSignalEnum } from './types';
+export type { ViewWrapperProps as TableViewWrapperProps, Column as TableColumnType, TableProps, CellComponentProps as TableCellComponentProps, } from './types';
+export { TABLE_ID_MAP } from './constants';

package/dist/Shared/Components/Table/types.d.ts

@@ -0,0 +1,194 @@
+import { Dispatch, FunctionComponent, PropsWithChildren, SetStateAction } from 'react';
+import { SortableTableHeaderCellProps, useResizableTableConfig } from '../../../Common/SortableTableHeaderCell';
+import { UseStateFiltersProps, UseStateFiltersReturnType, UseUrlFiltersProps } from '../../../Common/Hooks';
+import { GenericEmptyStateType } from '../../../Common/index';
+import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types';
+import { TABLE_ID_MAP } from './constants';
+import { useBulkSelection, UseBulkSelectionProps } from '../BulkSelection';
+export interface UseFiltersReturnType extends UseStateFiltersReturnType<string> {
+}
+export declare enum SignalEnum {
+    ENTER_PRESSED = "enter-pressed",
+    DELETE_PRESSED = "delete-pressed",
+    ESCAPE_PRESSED = "escape-pressed",
+    OPEN_CONTEXT_MENU = "open-context-menu",
+    ROW_CLICKED = "row-clicked"
+}
+export interface SignalsType<T extends string = SignalEnum> extends Pick<EventTarget, 'addEventListener' | 'removeEventListener'> {
+    addEventListener: (type: T, callback: (event: CustomEvent) => void, options?: Parameters<EventTarget['addEventListener']>[2]) => ReturnType<EventTarget['addEventListener']>;
+    removeEventListener: (type: T, callback: (event: CustomEvent) => void, options?: Parameters<EventTarget['removeEventListener']>[2]) => ReturnType<EventTarget['removeEventListener']>;
+}
+type SizeType = {
+    /** This signifies this column is resizable */
+    range: {
+        startWidth: number;
+        minWidth: number;
+        maxWidth: number | 'infinite';
+    };
+    /** If we want a fixed width */
+    fixed?: never;
+} | {
+    range?: never;
+    fixed: number;
+} | null;
+type BaseColumnType = {
+    /** This is the key using which we will fetch the data of  */
+    field: string;
+    /** This is the string that will be displayed to the user as header text */
+    label?: string;
+    /**
+     * If we want resizable columns, then every column has to have a fixed height
+     * If we specify size to be null then the size be will set to 1fr
+     */
+    size: SizeType;
+    horizontallySticky?: boolean;
+};
+interface AdditionalProps {
+    [key: string]: unknown;
+}
+export type RowType = {
+    id: string;
+    data: Record<string, unknown>;
+};
+export type RowsType = RowType[];
+export interface CellComponentProps extends Pick<BaseColumnType, 'field'>, AdditionalProps {
+    signals: SignalsType;
+    value: unknown;
+    row: RowType;
+    filterData: UseFiltersReturnType;
+    isRowActive: boolean;
+}
+export type Column = Pick<SortableTableHeaderCellProps, 'showTippyOnTruncate'> & BaseColumnType & {
+    CellComponent?: FunctionComponent<CellComponentProps>;
+} & ({
+    isSortable: true;
+    /**
+     * Compare two rows when sorting is triggered on this column
+     * Values fed are from the field key in the row's data object
+     * @returns -1 if a < b, 0 if a === b, 1 if a > b
+     */
+    comparator?: (a: unknown, b: unknown) => number;
+} | {
+    isSortable?: false;
+    comparator?: never;
+});
+type BulkSelectionConfigType = Pick<UseBulkSelectionProps<unknown>, 'getSelectAllDialogStatus'> & {
+    /** Make sure to wrap it in useCallback */
+    onBulkSelectionChanged: (selectedRows: RowsType) => void;
+    BulkActionsComponent: FunctionComponent<{}>;
+};
+export declare enum PaginationEnum {
+    PAGINATED = "paginated",
+    INFINITE = "infinite",
+    NOT_PAGINATED = "not-paginated"
+}
+export declare enum FiltersTypeEnum {
+    STATE = "state",
+    URL = "url",
+    NONE = "none"
+}
+export interface ConfigurableColumnsType {
+    allColumns: Column[];
+    visibleColumns: Column[];
+    setVisibleColumns: Dispatch<SetStateAction<ConfigurableColumnsType['visibleColumns']>>;
+}
+interface GetRowsProps extends Pick<UseFiltersReturnType, 'offset' | 'pageSize' | 'searchKey' | 'sortBy' | 'sortOrder'> {
+}
+type AdditionalFilterPropsType<T extends Exclude<FiltersTypeEnum, FiltersTypeEnum.NONE>> = T extends FiltersTypeEnum.URL ? Pick<UseUrlFiltersProps<string, unknown>, 'parseSearchParams' | 'localStorageKey' | 'redirectionMethod' | 'initialSortKey'> : Pick<UseStateFiltersProps<string>, 'initialSortKey'>;
+export type ViewWrapperProps = PropsWithChildren<Pick<UseFiltersReturnType, 'offset' | 'handleSearch' | 'searchKey' | 'sortBy' | 'sortOrder' | 'clearFilters'> & AdditionalProps & Partial<ConfigurableColumnsType> & {
+    areRowsLoading: boolean;
+}>;
+export type InternalTableProps = Required<Pick<ConfigurableColumnsType, 'visibleColumns' | 'setVisibleColumns'>> & {
+    id: (typeof TABLE_ID_MAP)[keyof typeof TABLE_ID_MAP];
+    loading?: boolean;
+    paginationVariant: PaginationEnum;
+    /**
+     * Memoize columns before passing as props.
+     *
+     * For columns from backend: initialize as empty array and set loading
+     * to true until API call completes.
+     */
+    columns: Column[];
+    /** If bulk selections are not a concern omit this prop */
+    bulkSelectionConfig?: BulkSelectionConfigType;
+    emptyStateConfig: {
+        noRowsConfig: Omit<GenericEmptyStateType, 'children'>;
+        noRowsForFilterConfig?: Pick<GenericFilterEmptyStateProps, 'title' | 'subTitle'> & {
+            clearFilters: () => void;
+        };
+    };
+    filterData: UseFiltersReturnType | null;
+    resizableConfig: ReturnType<typeof useResizableTableConfig> | null;
+    /**
+     * Enable this to let users choose which columns to display.
+     * Example: Resource Browser > Node Listing
+     *
+     * Using the provided id for this table, we will store the user's preference in localStorage
+     */
+    areColumnsConfigurable?: boolean;
+    additionalProps?: AdditionalProps;
+    /** Control the look of the table using this prop */
+    stylesConfig?: {
+        showSeparatorBetweenRows: boolean;
+    };
+    /**
+     * Use this component to display additional content at the end of a row when it is hovered over.
+     */
+    RowActionsOnHoverComponent?: FunctionComponent<{
+        row: RowType;
+    }>;
+    bulkSelectionReturnValue: ReturnType<typeof useBulkSelection> | null;
+    handleClearBulkSelection: () => void;
+    handleToggleBulkSelectionOnRow: (row: RowType) => void;
+    ViewWrapper?: FunctionComponent<ViewWrapperProps>;
+} & ({
+    /**
+     * Direct rows data for frontend-only datasets like resource browser.
+     */
+    rows: RowsType;
+    /**
+     * Use `getRows` function instead for data that needs to be fetched from backend with pagination/sorting/filtering.
+     */
+    getRows?: never;
+} | {
+    rows?: never;
+    /** NOTE: Sorting on frontend is only handled if rows is provided instead of getRows */
+    getRows: (props: GetRowsProps) => Promise<RowsType>;
+}) & ({
+    filtersVariant: FiltersTypeEnum.URL;
+    /**
+     * props for useUrlFilters/useStateFilters hooks
+     */
+    additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.URL>;
+    /**
+     * This func is used to filter the rows based on filter data.
+     * Only applicable if filtersVariant is NOT set to NONE
+     *
+     * If filter is only being used for sorting, then send `noop` in this prop
+     */
+    filter: (row: RowType, filterData: UseFiltersReturnType) => boolean;
+} | {
+    filtersVariant: FiltersTypeEnum.STATE;
+    additionalFilterProps?: AdditionalFilterPropsType<FiltersTypeEnum.STATE>;
+    filter: (row: RowType, filterData: UseFiltersReturnType) => boolean;
+} | {
+    filtersVariant: FiltersTypeEnum.NONE;
+    additionalFilterProps?: never;
+    filter?: never;
+});
+export type UseResizableTableConfigWrapperProps = Omit<InternalTableProps, 'resizableConfig'>;
+export type TableWithBulkSelectionProps = Omit<UseResizableTableConfigWrapperProps, 'bulkSelectionReturnValue' | 'handleClearBulkSelection' | 'handleToggleBulkSelectionOnRow'>;
+export type VisibleColumnsWrapperProps = Omit<TableWithBulkSelectionProps, 'visibleColumns' | 'setVisibleColumns'>;
+export type FilterWrapperProps = Omit<VisibleColumnsWrapperProps, 'filterData'>;
+export type TableProps = Pick<FilterWrapperProps, 'additionalFilterProps' | 'bulkSelectionConfig' | 'areColumnsConfigurable' | 'emptyStateConfig' | 'filtersVariant' | 'filter' | 'additionalProps' | 'columns' | 'getRows' | 'rows' | 'paginationVariant' | 'stylesConfig' | 'id' | 'RowActionsOnHoverComponent' | 'loading' | 'ViewWrapper'>;
+export interface BulkSelectionActionWidgetProps extends Pick<BulkSelectionConfigType, 'BulkActionsComponent'> {
+    count: number;
+    handleClearBulkSelection: () => void;
+    parentRef: React.RefObject<HTMLDivElement>;
+}
+export type ConfigurableColumnsConfigType = Record<string, ConfigurableColumnsType['visibleColumns']>;
+export interface GetFilteringPromiseProps {
+    searchSortTimeoutRef: React.MutableRefObject<number>;
+    callback: () => Promise<RowsType> | RowsType;
+}
+export {};

package/dist/Shared/Components/Table/useTableWithKeyboardShortcuts.d.ts

@@ -0,0 +1,6 @@
+import { InternalTableProps, RowsType } from './types';
+declare const useTableWithKeyboardShortcuts: ({ bulkSelectionConfig, handleToggleBulkSelectionOnRow, bulkSelectionReturnValue, }: Pick<InternalTableProps, "bulkSelectionConfig" | "bulkSelectionReturnValue" | "handleToggleBulkSelectionOnRow">, visibleRows: RowsType) => {
+    activeRowIndex: number;
+    setActiveRowIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
+};
+export default useTableWithKeyboardShortcuts;

package/dist/Shared/Components/Table/utils.d.ts

@@ -0,0 +1,6 @@
+import { Column, ConfigurableColumnsType, GetFilteringPromiseProps, RowsType, TableProps, UseFiltersReturnType } from './types';
+export declare const searchAndSortRows: (rows: TableProps["rows"], filter: TableProps["filter"], filterData: UseFiltersReturnType, comparator?: Column["comparator"]) => RowsType;
+export declare const getVisibleColumnsFromLocalStorage: ({ allColumns, id, }: Pick<ConfigurableColumnsType, "allColumns"> & Pick<TableProps, "id">) => Column[];
+export declare const setVisibleColumnsToLocalStorage: ({ id, visibleColumns, }: Pick<ConfigurableColumnsType, "visibleColumns"> & Pick<TableProps, "id">) => void;
+export declare const getVisibleColumns: ({ areColumnsConfigurable, columns, id, }: Pick<TableProps, "areColumnsConfigurable" | "columns" | "id">) => Column[];
+export declare const getFilteringPromise: ({ searchSortTimeoutRef, callback }: GetFilteringPromiseProps) => Promise<RowsType>;

package/dist/Shared/Components/index.d.ts

@@ -69,4 +69,5 @@ export * from './CustomInput';
 export * from './InfoBlock';
 export * from './CodeEditorWrapper';
 export * from './SSOProviderIcon';
+export * from './Table';
 export * from './Confetti';

package/dist/Shared/types.d.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 import { APIOptions, ApprovalConfigDataType } from '../Common/Types';
-import { OptionType, CommonNodeAttr, VulnerabilityType, DeploymentAppTypes, ServerErrors, SortingParams, TriggerBlockType, ValueConstraintType, VariableType, RefVariableType, PluginType } from '../Common';
+import { OptionType, CommonNodeAttr, VulnerabilityType, DeploymentAppTypes, ServerErrors, SortingParams, TriggerBlockType, ValueConstraintType, VariableType, RefVariableType, PluginType, SegmentedControlProps } from '../Common';
 import { BASE_CONFIGURATION_ENV_ID, EnvironmentTypeEnum, PatchOperationType } from './constants';
 import { SelectPickerOptionType } from './Components';
 export declare enum EnvType {
@@ -598,7 +598,7 @@ export declare enum ConfigurationType {
     GUI = "GUI",
     YAML = "YAML"
 }
-export declare const CONFIGURATION_TYPE_OPTIONS: OptionType<ConfigurationType, ConfigurationType>[];
+export declare const CONFIGURATION_TYPE_OPTIONS: SegmentedControlProps['segments'];
 export interface BaseURLParams {
     appId: string;
     envId: string;