@devtron-labs/devtron-fe-common-lib 0.2.17-beta-2 → 0.2.17-beta-5

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

@@ -34,5 +34,5 @@ import { SearchBarProps } from './types';
  * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
  * ```
  */
-declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, dataTestId, noBackgroundAndBorder, size, inputClassName, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, dataTestId, noBackgroundAndBorder, size, }: SearchBarProps) => JSX.Element;
 export default SearchBar;

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

@@ -47,8 +47,4 @@ export interface SearchBarProps {
      * @default 'ComponentSizeType.medium'
      */
     size?: ComponentSizeType.medium | ComponentSizeType.large;
-    /**
-     * Input Class Name
-     */
-    inputClassName?: string;
 }

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

@@ -0,0 +1,3 @@
+import { TabGroupProps } from './TabGroup.types';
+
+export declare const TabGroup: ({ tabs, size, rightComponent, alignActiveBorderWithContainer, hideTopPadding, }: TabGroupProps) => JSX.Element;

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

@@ -0,0 +1,112 @@
+import { LinkProps, NavLinkProps } from 'react-router-dom';
+import { ComponentSizeType } from '../../constants';
+import { DataAttributes } from '../../types';
+
+type TabComponentProps<TabTypeProps> = TabTypeProps & DataAttributes;
+type ConditionalTabType = {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'button';
+    /**
+     * Props passed to button component.
+     */
+    props?: TabComponentProps<Omit<React.ComponentProps<'button'>, 'className' | 'style'>>;
+    /**
+     * Indicates if the tab is currently active.
+     */
+    active?: boolean;
+} | {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'navLink';
+    /**
+     * Props passed to nav link component.
+     */
+    props: TabComponentProps<Omit<NavLinkProps, 'className' | 'style' | 'activeClassName'>>;
+    /**
+     * Active state is determined by matching the URL.
+     */
+    active?: false;
+} | {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'link';
+    /**
+     * Props passed to link component.
+     */
+    props: TabComponentProps<Omit<LinkProps, 'className' | 'style'>>;
+    /**
+     * Indicates if the tab is currently active.
+     */
+    active?: boolean;
+};
+export type TabProps = {
+    /**
+     * Unique identifier for the tab.
+     */
+    id: string | number;
+    /**
+     * Text label for the tab.
+     */
+    label: string;
+    /**
+     * Icon component to be displayed in the tab.
+     * This should be a functional component that renders an SVG.
+     */
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Type of the icon, determining whether it uses a stroke or fill style.
+     */
+    iconType?: 'stroke' | 'fill';
+    /**
+     * Badge number to be displayed on the tab, typically for notifications.
+     */
+    badge?: number;
+    /**
+     * Indicates if an indicator should be shown on the tab.
+     */
+    showIndicator?: boolean;
+    /**
+     * Indicates if a warning state should be displayed on the tab.
+     * @note error state will take precedence over warning state.
+     */
+    showWarning?: boolean;
+    /**
+     * Indicates if an error state should be displayed on the tab.
+     * @note error state will take precedence over warning state.
+     */
+    showError?: boolean;
+    /**
+     * Disables the tab, preventing interaction and indicating an inactive state.
+     */
+    disabled?: boolean;
+} & ConditionalTabType;
+export interface TabGroupProps {
+    /**
+     * Array of tabs to be rendered.
+     */
+    tabs: TabProps[];
+    /**
+     * Size of the tabs.
+     * @default ComponentSizeType.large
+     */
+    size?: ComponentSizeType.large | ComponentSizeType.medium;
+    /**
+     * Optional component to be rendered on the right side of the tab list.
+     */
+    rightComponent?: React.ReactElement;
+    /**
+     * Set to `true` to align the active tab's border with the bottom border of the parent container.
+     * @default false
+     */
+    alignActiveBorderWithContainer?: boolean;
+    /**
+     * Determines if the top padding of the tab group should be hidden.
+     * @default false
+     */
+    hideTopPadding?: boolean;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export * from './TabGroup.component';
+export * from './TabGroup.types';

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

@@ -36,5 +36,6 @@ export * from './ShowMoreText';
 export * from './CollapsibleList';
 export * from './DeploymentConfigDiff';
 export * from './DetectBottom';
+export * from './TabGroup';
 export * from './Collapse';
 export * from './FilterButton';

package/dist/Shared/types.d.ts

@@ -566,4 +566,5 @@ export type BaseFilterQueryParams<T> = {
      */
     showAll?: boolean;
 } & SortingParams<T>;
+export type DataAttributes = Record<`data-${string}`, unknown>;
 export {};