@ringcentral/spring-ui 1.7.0

package/src/SwipeableDrawer/hooks/useSnapPoints.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import { useReady } from './useReady';
+export interface SnapPointProps {
+    /** Height of the header element in pixels */
+    headerHeight: number;
+    /** Height of the footer element in pixels */
+    footerHeight: number;
+    /** Current height of the drawer in pixels */
+    height: number;
+    /** Minimum height needed for content (content + header + footer) */
+    minHeight: number;
+    /**
+     * Maximum available height for the drawer.
+     *
+     * ✅ IMPORTANT: This is 100% of viewport height (window.innerHeight)!
+     *
+     * Examples:
+     * - maxHeight = 100% of viewport (full available height)
+     * - maxHeight * 0.5 = 50% of viewport (half available height)
+     * - maxHeight * 0.9 = 90% of viewport
+     *
+     */
+    maxHeight: number;
+}
+/**
+ * Function that returns snap points where the drawer can rest.
+ * Called with current drawer dimensions to calculate positions.
+ *
+ * **All snap points are in pixels.** Use the provided dimensions to calculate percentages:
+ * - `maxHeight * 0.5` = 50% of viewport height
+ * - `maxHeight * 0.75` = 75% of viewport height
+ * - `400` = 400 pixels absolute
+ * - `minHeight` = content height (auto-calculated)
+ *
+ * @param props Current drawer dimensions and measurements
+ * @returns Array of snap points in pixels, or single snap point
+ *
+ * @example
+ * ```tsx
+ * // Basic: Content height + full viewport
+ * snapPoints: ({ minHeight, maxHeight }) => [
+ *   minHeight,  // Auto-calculated content height
+ *   maxHeight   // Full viewport height
+ * ]
+ *
+ * // Responsive: Multiple viewport percentages
+ * snapPoints: ({ minHeight, maxHeight }) => [
+ *   minHeight,          // Content height
+ *   maxHeight * 0.4,    // 40% of viewport
+ *   maxHeight * 0.7,    // 70% of viewport
+ *   maxHeight * 0.95    // 95% of viewport
+ * ]
+ *
+ * // Fixed: Absolute pixel heights
+ * snapPoints: ({ minHeight }) => [
+ *   minHeight,  // Content height
+ *   300,        // 300px
+ *   500,        // 500px
+ *   700         // 700px
+ * ]
+ *
+ * // Mixed: Combine responsive and fixed
+ * snapPoints: ({ minHeight, maxHeight }) => [
+ *   minHeight,          // Content height
+ *   400,                // 400px fixed
+ *   maxHeight * 0.8     // 80% of viewport
+ * ]
+ * ```
+ */
+export declare type SnapPointsFunction = (props: SnapPointProps) => number[] | number;
+export interface DefaultSnapProps extends SnapPointProps {
+    snapPoints: number[];
+    lastSnap: number | null;
+}
+export declare function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, headerEnabled, headerRef, heightRef, lastSnapRef, ready, registerReady, resizeSourceRef, open, }: {
+    contentRef: React.RefObject<Element>;
+    footerEnabled: boolean;
+    footerRef: React.RefObject<Element>;
+    getSnapPoints: SnapPointsFunction;
+    headerEnabled: boolean;
+    headerRef: React.RefObject<Element>;
+    heightRef: React.RefObject<number>;
+    lastSnapRef: React.RefObject<number | null>;
+    ready: boolean;
+    registerReady: ReturnType<typeof useReady>['registerReady'];
+    resizeSourceRef?: React.MutableRefObject<'window' | 'element'>;
+    open: boolean;
+}): {
+    minSnap: number;
+    maxSnap: number;
+    findSnap: (numberOrCallback: number | ((state: DefaultSnapProps) => number)) => number;
+    maxHeight: number;
+    snapPoints: number[];
+};

package/src/SwipeableDrawer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SwipeableDrawer.classes';
+export * from './SwipeableDrawer';
+export * from './SwipeableDrawer.types';

package/src/Switch/Switch.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseSwitchClassesKey = 'root' | 'track' | 'dot' | 'input';
+export declare type SwitchClassesKey = CamelCase<BaseSwitchClassesKey>;
+export declare type SwitchClasses = {
+    name: 'switch';
+    classes: BaseSwitchClassesKey;
+};

package/src/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import switchStyle from './styles/Switch.css';
+declare const Switch: import("react").ForwardRefExoticComponent<import("@ringcentral/spring-base").ClassesProp<import("./Switch.classes").SwitchClassesKey> & {
+    autoFocus?: boolean | undefined;
+    inputRef?: import("react").Ref<HTMLInputElement> | undefined;
+    inputProps?: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "ref"> | undefined;
+    rootProps?: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+} & Omit<import("@mui/base").UseSwitchParameters, "readOnly"> & {
+    className?: string | undefined;
+} & import("@ringcentral/spring-base").HTMLDataAttribute & import("react").RefAttributes<HTMLSpanElement>>;
+export { Switch, switchStyle };

package/src/Switch/Switch.type.d.ts

@@ -0,0 +1,19 @@
+import { UseSwitchParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { ComponentProps, Ref } from 'react';
+import { SwitchClassesKey } from './Switch.classes';
+export declare type SwitchProps = StandardProps<{
+    /**
+     * If `true`, the Switch will be automatically focused on mount.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Attributes applied to `input` element */
+    inputProps?: Omit<ComponentProps<'input'>, 'ref' | 'className'>;
+    /** Attributes applied to root */
+    rootProps?: ComponentProps<'span'>;
+} & Omit<UseSwitchParameters, 'readOnly'>, SwitchClassesKey>;

package/src/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Switch.classes';
+export * from './Switch';
+export * from './Switch.type';

package/src/Tab/Tab.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase } from 'type-fest';
+import type { TabVariant, TabColor } from './Tab.type';
+declare type TabSlot = 'container' | 'pill' | 'pill-badge' | 'badge-root' | 'badge' | 'text';
+export declare type BaseTabClassesKey = 'root' | TabVariant | TabSlot | `${TabVariant}-${TabSlot}` | `${TabVariant}-pill-${TabColor}`;
+export declare type TabClassesKey = CamelCase<BaseTabClassesKey>;
+export declare type TabClasses = {
+    name: 'tab';
+    classes: BaseTabClassesKey;
+};
+export {};

package/src/Tab/Tab.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import tabStyle from './styles/Tab.css';
+import { TabProps } from './Tab.type';
+declare const Tab: import("react").ForwardRefExoticComponent<Pick<TabProps, "symbol" | "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "label" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | `data-${string}` | "variant" | "autoFocus" | "formEncType" | "TooltipProps" | "BadgeProps"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Tab, tabStyle };

package/src/Tab/Tab.type.d.ts

@@ -0,0 +1,50 @@
+import { UseTabParameters } from '@mui/base';
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { ComponentType, ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import { TooltipProps } from '../Tooltip';
+import { TabClassesKey } from './Tab.classes';
+export declare type TabVariant = 'label' | 'icon';
+export declare type TabColor = 'default' | 'cobranding';
+export declare type TabProps = StandardProps<{
+    /**
+     * The variant to use.
+     * @default 'label'
+     */
+    variant?: TabVariant;
+    /**
+     * The color scheme to use for tabs. Overrides the color from Tabs component.
+     * - 'default': Uses cobranding colors for non-pill tabs, grey colors for pill tabs
+     * - 'cobranding': Uses cobranding colors for all tab types
+     * @default 'default'
+     */
+    color?: 'default' | 'cobranding';
+    /**
+     * Text displayed when variant is 'label', also used as title if it is string.
+     */
+    label?: ReactNode;
+    /**
+     * title on Tab
+     * **Should pass this if label is not string.**
+     */
+    title?: string;
+    /**
+     * Icon symbol used when variant is 'icon'
+     */
+    symbol?: ComponentType;
+    /**
+     * Props applied to Badge component
+     */
+    BadgeProps?: BadgeProps;
+    /**
+     * Props applied to Tooltip component when variant is 'icon'
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'children'> & HTMLDataAttribute;
+    /**
+     * A ref for imperative actions. It currently only supports `focusVisible()` action.
+     */
+    action?: React.Ref<{
+        focusVisible(): void;
+    }>;
+} & Omit<UseTabParameters, 'disabled' | 'rootRef' | 'onChange'>, TabClassesKey, 'button'>;
+export declare type ExternalProps = Record<string, unknown>;

package/src/Tab/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tab.classes';
+export * from './Tab';
+export * from './Tab.type';

package/src/TabContext/TabContext.d.ts

@@ -0,0 +1,20 @@
+import { useTabsContext } from '@mui/base';
+import { FunctionComponent } from 'react';
+import { TabContextProps } from './TabContext.type';
+export declare const useInternalTabsContext: () => {
+    tabsInstanceId: string | undefined;
+};
+/**
+ * Generate stable IDs for tab and tabpanel pairs
+ * This ensures consistent IDs regardless of whether the tab is visible or in more menu
+ */
+export declare const generateTabStableIds: (tabsInstanceId: string | undefined, identifier: string | number) => {
+    tabId: string;
+    panelId: string;
+};
+export declare const useTabStableIds: (identifier: string | number) => {
+    tabId: string;
+    panelId: string;
+};
+declare const TabContext: FunctionComponent<TabContextProps>;
+export { TabContext, useTabsContext as useTabContext };

package/src/TabContext/TabContext.type.d.ts

@@ -0,0 +1,13 @@
+import { UseTabsParameters } from '@mui/base';
+import { ReactNode } from 'react';
+export declare type TabContextProps = {
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `null`.
+     */
+    value?: string | number | null;
+} & Omit<UseTabsParameters, 'orientation' | 'direction' | 'value'>;

package/src/TabContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TabContext';
+export * from './TabContext.type';

package/src/TabPanel/TabPanel.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTabPanelClassesKey = 'root';
+export declare type TabPanelClassesKey = CamelCase<BaseTabPanelClassesKey>;
+export declare type TabPanelClasses = {
+    name: 'tab-panel';
+    classes: BaseTabPanelClassesKey;
+};

package/src/TabPanel/TabPanel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import tabPanelStyle from './styles/TabPanel.css';
+import { TabPanelProps } from './TabPanel.type';
+declare const TabPanel: import("react").ForwardRefExoticComponent<Pick<TabPanelProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "keepMounted"> & import("react").RefAttributes<HTMLDivElement>>;
+export { TabPanel, tabPanelStyle };

package/src/TabPanel/TabPanel.type.d.ts

@@ -0,0 +1,18 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { ReactNode } from 'react';
+import { TabPanelClassesKey } from './TabPanel.classes';
+export declare type TabPanelProps = StandardProps<{
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     */
+    value: number | string;
+    /**
+     * false: will unmount children whenever hidden
+     * true: keep displayed children mounted when hidden
+     */
+    keepMounted?: boolean;
+}, TabPanelClassesKey, 'div'>;

package/src/TabPanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TabPanel.classes';
+export * from './TabPanel';
+export * from './TabPanel.type';

package/src/Table/Table.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTableClassesKey = 'root' | 'sticky-header' | 'sticky-footer';
+export declare type TableClassesKey = CamelCase<BaseTableClassesKey>;
+export declare type TableClasses = {
+    name: 'table';
+    classes: BaseTableClassesKey;
+};

package/src/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import tableStyle from './styles/Table.css';
+import { TableComponent } from './Table.type';
+declare const Table: TableComponent;
+export { Table, tableStyle };

package/src/Table/Table.type.d.ts

@@ -0,0 +1,36 @@
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { ElementType, ReactNode } from 'react';
+import { TableClassesKey } from './Table.classes';
+declare type DefaultElementType = 'table';
+declare type ExtendElementType = ElementType;
+declare type BaseTableProps = WithClassesProps<{
+    /**
+     * The content of the table, normally `TableHead` and `TableBody`.
+     */
+    children?: ReactNode;
+    /**
+     * Set the header sticky.
+     *
+     * ⚠️ It doesn't work with IE11.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Set the footer sticky.
+     *
+     * ⚠️ It doesn't work with IE11.
+     * @default false
+     */
+    stickyFooter?: boolean;
+    /**
+     * Show vertical dividers between columns.
+     * @default false
+     */
+    columnDivider?: boolean;
+}, TableClassesKey>;
+export declare type TableProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableProps, T>;
+export declare type TableComponent = OverridableComponent<{
+    props: BaseTableProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Table/TableContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type TableContextValue = {
+    stickyHeader?: boolean;
+    stickyFooter?: boolean;
+    columnDivider?: boolean;
+};
+export declare const TableContext: import("react").Context<TableContextValue>;
+export declare const useTableContext: () => TableContextValue;

package/src/Table/Tablelvl2Context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type Tablelvl2ContextValue = {
+    variant?: 'head' | 'body' | 'footer';
+    useDefaultBgColor?: boolean;
+};
+export declare const Tablelvl2Context: import("react").Context<Tablelvl2ContextValue | undefined>;
+export declare const useTablelvl2Context: () => Tablelvl2ContextValue | undefined;

package/src/Table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Table.classes';
+export * from './Table';
+export * from './Table.type';
+export * from './TableContext';
+export * from './Tablelvl2Context';

package/src/TableBody/TableBody.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTableBodyClassesKey = 'root';
+export declare type TableBodyClassesKey = CamelCase<BaseTableBodyClassesKey>;
+export declare type TableBodyClasses = {
+    name: 'table-body';
+    classes: BaseTableBodyClassesKey;
+};

package/src/TableBody/TableBody.d.ts

@@ -0,0 +1,4 @@
+import tableBodyStyle from './styles/TableBody.css';
+import { TableBodyComponent } from './TableBody.type';
+declare const TableBody: TableBodyComponent;
+export { TableBody, tableBodyStyle };

package/src/TableBody/TableBody.type.d.ts

@@ -0,0 +1,17 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ElementType, ReactNode } from 'react';
+import { TableBodyClassesKey } from './TableBody.classes';
+declare type DefaultElementType = 'tbody';
+declare type ExtendElementType = ElementType;
+declare type BaseTableBodyProps = WithClassesProps<{
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: ReactNode;
+}, TableBodyClassesKey>;
+export declare type TableBodyProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableBodyProps, T>;
+export declare type TableBodyComponent = OverridableComponent<{
+    props: BaseTableBodyProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TableBody/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableBody.classes';
+export * from './TableBody';
+export * from './TableBody.type';

package/src/TableCell/TableCell.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTableCellClassesKey = 'root' | 'head' | 'body' | 'sortable' | 'sorted' | 'footer' | 'padding-checkbox' | 'padding-none' | 'align-left' | 'align-center' | 'align-right' | 'align-justify' | 'sticky-header-default-bg' | 'content' | 'content-padding-checkbox' | 'content-align-right' | 'content-align-center' | 'content-align-justify' | 'content-sortable' | 'sort-icon' | 'sort-icon-sorted' | 'sort-indicator' | 'column-divider';
+export declare type TableCellClassesKey = CamelCase<BaseTableCellClassesKey>;
+export declare type TableCellClasses = {
+    name: 'table-cell';
+    classes: BaseTableCellClassesKey;
+};

package/src/TableCell/TableCell.d.ts

@@ -0,0 +1,8 @@
+import tableCellStyle from './styles/TableCell.css';
+import { TableCellComponent } from './TableCell.type';
+/**
+ * The component renders a `<th>` element when the parent context is a header
+ * or otherwise a `<td>` element.
+ */
+declare const TableCell: TableCellComponent;
+export { TableCell, tableCellStyle };

package/src/TableCell/TableCell.type.d.ts

@@ -0,0 +1,59 @@
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { ElementType } from 'react';
+import { IconProps } from '../Icon';
+import { TableCellClassesKey } from './TableCell.classes';
+declare type DefaultElementType = 'td';
+declare type ExtendElementType = ElementType;
+export declare type SortDirection = 'asc' | 'desc' | false;
+export declare type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableCellElement> & React.TdHTMLAttributes<HTMLTableCellElement>;
+declare type BaseTableCellProps = WithClassesProps<{
+    /**
+     * Set the text-align on the table cell content.
+     *
+     * Monetary or generally number fields **should be right aligned** as that allows
+     * you to add them up quickly in your head without having to worry about decimals.
+     * @default 'inherit'
+     */
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Sets the padding applied to the cell.
+     */
+    padding?: 'normal' | 'checkbox' | 'none';
+    /**
+     * Set scope attribute.
+     */
+    scope?: TableCellBaseProps['scope'];
+    /**
+     * Set aria-sort direction.
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Set the initial sort icon direction.
+     * @default 'asc'
+     */
+    initialSortIconDirection?: SortDirection;
+    /**
+     * If `true`, a sortable or non-sortable icon will be shown according to the column's sortable state.
+     * @default false
+     */
+    showSortIndicator?: boolean;
+    /**
+     * Props applied to the icon rendered when `sortDirection` is set.
+     */
+    SortIconProps?: IconProps;
+    /**
+     * Specify the cell type.
+     * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
+     */
+    variant?: 'head' | 'body' | 'footer';
+}, TableCellClassesKey>;
+export declare type TableCellProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableCellProps, T>;
+/**
+ * The component renders a `<th>` element when the parent context is a header
+ * or otherwise a `<td>` element.
+ */
+export declare type TableCellComponent = OverridableComponent<{
+    props: BaseTableCellProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TableCell/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableCell.classes';
+export * from './TableCell';
+export * from './TableCell.type';

package/src/TableContainer/TableContainer.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import type { TableContainerBorder } from './TableContainer.type';
+export declare type BaseTableContainerClassesKey = 'root' | TableContainerBorder | `${TableContainerBorder}-border`;
+export declare type TableContainerClassesKey = CamelCase<BaseTableContainerClassesKey>;
+export declare type TableContainerClasses = {
+    name: 'table-container';
+    classes: BaseTableContainerClassesKey;
+};

package/src/TableContainer/TableContainer.d.ts

@@ -0,0 +1,4 @@
+import tableContainerStyle from './styles/TableContainer.css';
+import { TableContainerComponent } from './TableContainer.type';
+declare const TableContainer: TableContainerComponent;
+export { TableContainer, tableContainerStyle };

package/src/TableContainer/TableContainer.type.d.ts

@@ -0,0 +1,23 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ElementType } from 'react';
+import { TableContainerClassesKey } from './TableContainer.classes';
+declare type DefaultElementType = 'div';
+declare type ExtendElementType = ElementType;
+export declare type TableContainerBorder = 'standard' | 'none' | 'rounded';
+declare type BaseTableContainerProps = WithClassesProps<{
+    /**
+     * The content of the component, normally `Table`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the border type.
+     * @default 'standard'
+     */
+    border?: TableContainerBorder;
+}, TableContainerClassesKey>;
+export declare type TableContainerProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableContainerProps, T>;
+export declare type TableContainerComponent = OverridableComponent<{
+    props: BaseTableContainerProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TableContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableContainer.classes';
+export * from './TableContainer';
+export * from './TableContainer.type';

package/src/TableFooter/TableFooter.classes.d.ts

@@ -0,0 +1,8 @@
+import { CamelCase } from 'type-fest';
+declare type BaseTableFooterClassesKey = 'root' | 'content' | 'padding-checkbox' | 'padding-none' | 'sticky';
+export declare type TableFooterClassesKey = CamelCase<BaseTableFooterClassesKey>;
+export declare type TableFooterClasses = {
+    name: 'table-footer';
+    classes: BaseTableFooterClassesKey;
+};
+export {};

package/src/TableFooter/TableFooter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TableFooterProps } from './TableFooter.type';
+import tableFooterStyles from './styles/TableFooter.css';
+declare const TableFooter: import("react").ForwardRefExoticComponent<Pick<TableFooterProps, "classes" | "key" | "padding" | `data-${string}` | "colSpan" | keyof import("react").HTMLAttributes<HTMLTableSectionElement>> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export { TableFooter, tableFooterStyles };

package/src/TableFooter/TableFooter.type.d.ts

@@ -0,0 +1,9 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { TdHTMLAttributes } from 'react';
+import { TableFooterClassesKey } from './TableFooter.classes';
+export declare type TableFooterProps = StandardProps<{
+    /**
+     * Sets the padding applied to the cell.
+     */
+    padding?: 'normal' | 'checkbox' | 'none';
+} & Pick<TdHTMLAttributes<HTMLTableCellElement>, 'colSpan'>, TableFooterClassesKey, 'tfoot'>;

package/src/TableFooter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TableFooter';
+export * from './TableFooter.type';

package/src/TableHead/TableHead.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTableHeadClassesKey = 'root' | 'background' | 'title' | 'end-slot' | 'sticky' | 'divider';
+export declare type TableHeadClassesKey = CamelCase<BaseTableHeadClassesKey>;
+export declare type TableHeadClasses = {
+    name: 'table-head';
+    classes: BaseTableHeadClassesKey;
+};

package/src/TableHead/TableHead.d.ts

@@ -0,0 +1,4 @@
+import tableHeadStyle from './styles/TableHead.css';
+import { TableHeadComponent } from './TableHead.type';
+declare const TableHead: TableHeadComponent;
+export { TableHead, tableHeadStyle };