@ringcentral/spring-ui 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Alert.js +3 -3
- package/Announcement.js +1 -1
- package/Autocomplete.js +174 -236
- package/Avatar.js +27 -13
- package/BottomNavigation.js +0 -3
- package/Checkbox.js +0 -2
- package/DatePicker.js +5 -13
- package/DateUtilsContext.js +0 -1
- package/Dialer.js +2 -50
- package/Dialog.js +4 -4
- package/Dropdown.js +0 -7
- package/FocusTrap.js +0 -32
- package/InlineEditable.js +0 -4
- package/Link.js +1 -1
- package/ListItem.js +1 -1
- package/ListNavigation.js +0 -6
- package/Menu.js +1 -1
- package/MenuDivider.js +2 -2
- package/MenuFooter.js +4 -4
- package/MenuHeader.js +4 -4
- package/MenuItem.js +1 -1
- package/MenuItemText.js +1 -1
- package/PageHeader.js +6 -4
- package/Popper.js +0 -1
- package/Rating.js +0 -5
- package/SingleFilter.js +0 -1
- package/Slider.js +1 -4
- package/Snackbar.js +0 -14
- package/SortableListItem.js +0 -1
- package/SplitButton.js +1 -3
- package/StatusIndicator.js +1 -1
- package/SubMenu.js +0 -4
- package/SwipeableDrawer.js +8 -146
- package/Switch.js +1 -4
- package/Tab.js +7 -8
- package/TabContext.js +0 -5
- package/TableBody.js +1 -1
- package/TableCell.js +0 -6
- package/TableRow.js +0 -1
- package/Tabs.js +20 -118
- package/Text.js +2 -4
- package/TimePicker.js +7 -46
- package/VirtualizedList.js +2 -30
- package/chunks/Alert.js +8 -7
- package/chunks/BottomNavigationItem.js +0 -1
- package/chunks/Button.js +0 -1
- package/chunks/Chip.js +0 -5
- package/chunks/Drawer.js +1 -30
- package/chunks/ListItem.js +3 -6
- package/chunks/Menu.js +3 -3
- package/chunks/MenuDivider.js +2 -3
- package/chunks/MenuItemText.js +3 -3
- package/chunks/MenuList.js +0 -3
- package/chunks/PickerTextField.js +0 -1
- package/chunks/Popover.js +0 -5
- package/chunks/Select.js +2 -39
- package/chunks/Squircle.js +0 -7
- package/chunks/StatusIndicator.js +1 -0
- package/chunks/StepIcon.js +1 -3
- package/chunks/StepperContext.js +0 -7
- package/chunks/Tooltip.js +0 -36
- package/chunks/VirtualizedMenu.js +2 -78
- package/chunks/getFade.js +2 -0
- package/chunks/useFocusTrapStack.js +0 -8
- package/chunks/useHelperTextId.js +0 -24
- package/chunks/useListNavigation.js +2 -17
- package/chunks/useMenuItemSelect.js +6 -19
- package/chunks/useMotionSafeTransition.js +0 -4
- package/chunks/useNestedParentMenu.js +0 -2
- package/chunks/usePrefersReducedMotion.js +0 -10
- package/chunks/useTooltipForceHide.js +0 -4
- package/chunks/useTrayNavigate.js +0 -1
- package/index.css +392 -120
- package/index.js +1 -1
- package/package.json +4 -4
- package/src/Accordion/Accordion.type.d.ts +0 -21
- package/src/AccordionHeader/AccordionHeader.type.d.ts +0 -14
- package/src/Alert/Alert.type.d.ts +0 -32
- package/src/Animation/components/ExpandCollapseCaret/ExpandCollapseCaret.d.ts +0 -4
- package/src/Animation/components/ShowHideEye/ShowHideEye.d.ts +0 -4
- package/src/Animation/hooks/useMotionSafeTransition/useMotionSafeTransition.d.ts +0 -4
- package/src/Autocomplete/Autocomplete.d.ts +0 -5
- package/src/Autocomplete/Autocomplete.type.d.ts +0 -84
- package/src/Autocomplete/SuggestionList/SuggestionList.d.ts +5 -89
- package/src/Autocomplete/SuggestionList/SuggestionListItem.d.ts +0 -2
- package/src/Autocomplete/SuggestionList/utils/SuggestionListItem.d.ts +1 -13
- package/src/Autocomplete/SuggestionList/utils/useDynamicHeight.d.ts +0 -6
- package/src/Autocomplete/SuggestionList/utils/useHighlightScroll.d.ts +0 -20
- package/src/Autocomplete/SuggestionList/utils/useSuggestionList.d.ts +3 -41
- package/src/Autocomplete/SuggestionList/utils/useSuggestionListGroup.d.ts +0 -49
- package/src/Autocomplete/useAutocomplete.d.ts +1 -62
- package/src/Autocomplete/useAutocompleteTag.d.ts +0 -33
- package/src/Avatar/Avatar.type.d.ts +0 -58
- package/src/AvatarGroup/AvatarGroup.type.d.ts +0 -3
- package/src/Backdrop/Backdrop.type.d.ts +0 -4
- package/src/Badge/Badge.type.d.ts +0 -33
- package/src/Block/Block.type.d.ts +0 -24
- package/src/BlockHeader/BlockHeader.type.d.ts +0 -5
- package/src/BottomNavigation/BottomNavigation.type.d.ts +0 -34
- package/src/BottomNavigationItem/BottomNavigationItem.type.d.ts +0 -39
- package/src/Button/Button.type.d.ts +0 -30
- package/src/CallButton/CallButton.type.d.ts +0 -4
- package/src/Checkbox/Checkbox.type.d.ts +0 -17
- package/src/Chip/Chip.type.d.ts +0 -41
- package/src/CircularProgressIndicator/CircularProgressIndicator.type.d.ts +0 -19
- package/src/DatePicker/Calendar.d.ts +1 -20
- package/src/DatePicker/DatePicker.type.d.ts +0 -18
- package/src/DatePicker/DatePickerHeader.d.ts +1 -12
- package/src/DatePicker/Day.d.ts +0 -7
- package/src/DatePicker/Year.d.ts +0 -6
- package/src/DatePicker/Years.d.ts +0 -7
- package/src/Dialer/DialDelete/DialDelete.d.ts +0 -3
- package/src/Dialer/DialPad/DialPad.d.ts +0 -106
- package/src/Dialer/DialPad/utils/types.d.ts +0 -5
- package/src/Dialer/DialPad/utils/useDialKeyboard.d.ts +0 -5
- package/src/Dialer/DialPad/utils/useKeyAudio.d.ts +0 -9
- package/src/Dialer/DialPadButton/DialPadButton.d.ts +0 -14
- package/src/Dialer/DialTextField/DialTextField.d.ts +0 -23
- package/src/Dialer/DialTextField/utils/getDialPadValueOnlyRegex.d.ts +0 -3
- package/src/Dialer/DialTextField/utils/useFixedEndSelection.d.ts +0 -3
- package/src/Dialog/Dialog.type.d.ts +0 -11
- package/src/Divider/Divider.type.d.ts +0 -17
- package/src/DragHandle/DragHandle.type.d.ts +0 -4
- package/src/Drawer/Drawer.d.ts +0 -28
- package/src/Drawer/Drawer.type.d.ts +0 -84
- package/src/Dropdown/Dropdown.type.d.ts +0 -64
- package/src/EmptyState/EmptyState.type.d.ts +0 -12
- package/src/FabButton/FabButton.type.d.ts +0 -5
- package/src/FocusTrap/FocusTrap.d.ts +0 -38
- package/src/FocusTrap/useFocusTrapStack.d.ts +0 -9
- package/src/FormField/FormField.type.d.ts +0 -26
- package/src/FormField/useHelperTextId.d.ts +0 -25
- package/src/FormLabel/FormLabel.type.d.ts +0 -14
- package/src/Icon/Icon.type.d.ts +0 -15
- package/src/IconButton/IconButton.type.d.ts +0 -30
- package/src/IconButton/IconButtonLabel.type.d.ts +0 -3
- package/src/IconButtonGroup/IconButtonGroup.type.d.ts +0 -8
- package/src/InlineEditable/InlineEditable.type.d.ts +0 -75
- package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts +0 -31
- package/src/Link/Link.classes.d.ts +1 -1
- package/src/Link/Link.type.d.ts +1 -10
- package/src/ListItem/ListItem.type.d.ts +0 -41
- package/src/ListItemText/ListItemText.type.d.ts +0 -21
- package/src/ListNavigation/useListNavigation.d.ts +0 -16
- package/src/Menu/Menu.type.d.ts +0 -10
- package/src/MenuFooter/MenuFooter.type.d.ts +0 -4
- package/src/MenuHeader/MenuHeader.type.d.ts +0 -10
- package/src/MenuItem/MenuItem.type.d.ts +0 -19
- package/src/MenuItem/MenuItemSelectContext.d.ts +0 -3
- package/src/MenuItem/useMenuItemSelect.d.ts +0 -21
- package/src/MenuItemText/MenuItemText.type.d.ts +0 -17
- package/src/MenuList/MenuList.type.d.ts +0 -4
- package/src/MenuList/MenuListContext.d.ts +0 -6
- package/src/Modal/InnerModal.type.d.ts +0 -5
- package/src/Modal/Modal.type.d.ts +0 -11
- package/src/Modal/ModalContext.d.ts +0 -4
- package/src/Option/Option.type.d.ts +0 -3
- package/src/Overlap/Overlap.type.d.ts +0 -11
- package/src/PageHeader/PageHeader.type.d.ts +0 -4
- package/src/PickerTextField/PickerTextField.type.d.ts +0 -10
- package/src/Popover/Popover.type.d.ts +0 -29
- package/src/Popper/Popper.type.d.ts +0 -61
- package/src/Radio/Radio.type.d.ts +0 -5
- package/src/RadioGroup/RadioGroup.type.d.ts +0 -4
- package/src/Rating/Rating.type.d.ts +0 -74
- package/src/Select/Select.type.d.ts +0 -84
- package/src/SingleFilter/FilterButton/FilterButton.type.d.ts +0 -16
- package/src/SingleFilter/SingleFilter.type.d.ts +0 -26
- package/src/Skeleton/Skeleton.type.d.ts +0 -1
- package/src/Skeleton/SkeletonContainer/SkeletonContainer.classes.d.ts +1 -1
- package/src/Slider/Slider.classes.d.ts +1 -5
- package/src/Slider/Slider.type.d.ts +0 -104
- package/src/Snackbar/Snackbar.type.d.ts +0 -18
- package/src/SplitButton/SplitButton.type.d.ts +0 -21
- package/src/Squircle/Squircle.type.d.ts +0 -3
- package/src/StatusIndicator/StatusIndicator.classes.d.ts +1 -1
- package/src/StatusIndicator/StatusIndicator.type.d.ts +1 -9
- package/src/Step/Step.type.d.ts +0 -29
- package/src/Step/StepContext.d.ts +0 -7
- package/src/StepButton/StepButton.type.d.ts +0 -15
- package/src/StepContent/StepContent.type.d.ts +0 -7
- package/src/StepIcon/StepIcon.type.d.ts +0 -26
- package/src/StepLabel/StepLabel.type.d.ts +0 -23
- package/src/Stepper/Stepper.type.d.ts +0 -27
- package/src/SwipeableDrawer/SwipeableDrawer.d.ts +0 -26
- package/src/SwipeableDrawer/SwipeableDrawer.types.d.ts +0 -67
- package/src/SwipeableDrawer/hooks/useDrawerGestures.d.ts +0 -110
- package/src/SwipeableDrawer/hooks/useElementSizeObserver.d.ts +0 -5
- package/src/SwipeableDrawer/hooks/useSnapPoints.d.ts +0 -60
- package/src/Switch/Switch.type.d.ts +0 -9
- package/src/Tab/Tab.classes.d.ts +3 -2
- package/src/Tab/Tab.type.d.ts +0 -29
- package/src/TabContext/TabContext.d.ts +0 -4
- package/src/TabContext/TabContext.type.d.ts +0 -7
- package/src/TabPanel/TabPanel.type.d.ts +0 -10
- package/src/Table/Table.type.d.ts +0 -19
- package/src/TableBody/TableBody.type.d.ts +0 -3
- package/src/TableCell/TableCell.d.ts +0 -4
- package/src/TableCell/TableCell.type.d.ts +0 -35
- package/src/TableContainer/TableContainer.type.d.ts +0 -7
- package/src/TableFooter/TableFooter.type.d.ts +0 -3
- package/src/TableHead/TableHead.type.d.ts +0 -6
- package/src/TablePagination/TablePagination.type.d.ts +0 -47
- package/src/TableRow/TableRow.type.d.ts +0 -17
- package/src/Tabs/TabMoreMenu.d.ts +0 -16
- package/src/Tabs/TabScrollButton.d.ts +0 -10
- package/src/Tabs/Tabs.classes.d.ts +1 -1
- package/src/Tabs/Tabs.d.ts +1 -1
- package/src/Tabs/Tabs.type.d.ts +2 -36
- package/src/Tabs/TabsContext.d.ts +2 -0
- package/src/Tabs/hooks/useTabsScroller.d.ts +0 -30
- package/src/Tag/Tag.type.d.ts +0 -12
- package/src/Text/Text.type.d.ts +0 -13
- package/src/TextField/TextField.type.d.ts +0 -64
- package/src/Textarea/Textarea.type.d.ts +0 -13
- package/src/TimePicker/NumberPicker.type.d.ts +0 -12
- package/src/TimePicker/SelectionView.d.ts +0 -6
- package/src/TimePicker/TimeButton.d.ts +0 -3
- package/src/TimePicker/TimePicker.type.d.ts +0 -11
- package/src/TimePicker/ToggleText.type.d.ts +0 -3
- package/src/TimePicker/utils/TimeBoundary.d.ts +0 -3
- package/src/TimePicker/utils/TimePickerHelper.d.ts +0 -19
- package/src/TimePicker/utils/getNumberPickerBoundary.d.ts +0 -3
- package/src/Tooltip/TooltipTrigger.a11y.d.ts +0 -9
- package/src/Tooltip/TooltipTrigger.type.d.ts +0 -44
- package/src/Tooltip/TooltipView.type.d.ts +0 -25
- package/src/Tooltip/useTooltipForceHide.d.ts +0 -4
- package/src/Tray/Tray.type.d.ts +0 -13
- package/src/Tray/TrayContext.d.ts +0 -4
- package/src/Tray/hooks/useTray.d.ts +0 -16
- package/src/Tray/hooks/useTrayPanel.d.ts +0 -3
- package/src/VirtualizedList/VirtualizedList.type.d.ts +0 -27
- package/src/VirtualizedMenu/VirtualizedMenu.type.d.ts +0 -17
|
@@ -1,31 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import swipeableDrawerStyles from './styles/SwipeableDrawer.css';
|
|
3
3
|
import type { SwipeableDrawerProps } from './SwipeableDrawer.types';
|
|
4
|
-
/**
|
|
5
|
-
* SwipeableDrawer Component - Gesture-enhanced drawer with swipe support
|
|
6
|
-
*
|
|
7
|
-
* Wraps the base Drawer component and adds touch/mouse gesture support for resizing and closing.
|
|
8
|
-
* Perfect for mobile bottom sheets and interactive panels.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* bottom sheet with gestures
|
|
13
|
-
* <SwipeableDrawer
|
|
14
|
-
* open={open}
|
|
15
|
-
* onClose={onClose}
|
|
16
|
-
* anchor="bottom"
|
|
17
|
-
* gestureControlsProps={{
|
|
18
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
19
|
-
* minHeight, // Content height
|
|
20
|
-
* maxHeight * 0.6, // 60% of screen
|
|
21
|
-
* maxHeight // Full screen
|
|
22
|
-
* ],
|
|
23
|
-
* initialSnap: 0 // Start at content height
|
|
24
|
-
* }}
|
|
25
|
-
* >
|
|
26
|
-
* <Content />
|
|
27
|
-
* </SwipeableDrawer>
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
4
|
declare const SwipeableDrawer: import("react").ForwardRefExoticComponent<Pick<SwipeableDrawerProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "footer" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "anchor" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "isEnabled" | "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}` | "variant" | "open" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "blocking" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps" | "measurementRefs" | "headerProps" | "gestureControlsProps"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
31
5
|
export { SwipeableDrawer, swipeableDrawerStyles };
|
|
@@ -2,42 +2,6 @@
|
|
|
2
2
|
import { DrawerProps, DrawerCloseReason } from '../Drawer';
|
|
3
3
|
import { UseDrawerGesturesOptions } from './hooks/useDrawerGestures';
|
|
4
4
|
export declare type SwipeableDrawerAction = {
|
|
5
|
-
/**
|
|
6
|
-
* Programmatically snap the drawer to a specific height or snap point.
|
|
7
|
-
*
|
|
8
|
-
* **Important**: Pixel values must exist in the snap points array, otherwise
|
|
9
|
-
* the drawer will snap to the closest available snap point instead.
|
|
10
|
-
*
|
|
11
|
-
* @param numberOrCallback - Can be:
|
|
12
|
-
* - **Index**: Small integer (0, 1, 2) to select snap point by index
|
|
13
|
-
* - **Pixels**: Absolute pixel value (300, 500) - must be in snap points array
|
|
14
|
-
* - **Function**: Dynamic calculation based on current drawer state
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```tsx
|
|
18
|
-
* // Setup snap points first
|
|
19
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
20
|
-
* minHeight, // 200px
|
|
21
|
-
* 500, // 500px
|
|
22
|
-
* maxHeight // 800px
|
|
23
|
-
* ]
|
|
24
|
-
*
|
|
25
|
-
* // Snap to first snap point (index-based) ✅
|
|
26
|
-
* drawerRef.current?.snapTo(0);
|
|
27
|
-
*
|
|
28
|
-
* // Snap to exact pixel height (must be in array) ✅
|
|
29
|
-
* drawerRef.current?.snapTo(500); // Works because 500 is in snap points
|
|
30
|
-
*
|
|
31
|
-
* // This would snap to closest point (200px or 800px) ❌
|
|
32
|
-
* drawerRef.current?.snapTo(600); // 600 not in array!
|
|
33
|
-
*
|
|
34
|
-
* // Dynamic: Calculate and ensure it's valid ✅
|
|
35
|
-
* drawerRef.current?.snapTo(({ maxHeight }) => maxHeight * 0.5);
|
|
36
|
-
*
|
|
37
|
-
* // Safe: Use index to avoid pixel matching issues ✅
|
|
38
|
-
* drawerRef.current?.snapTo(({ snapPoints }) => snapPoints[1]);
|
|
39
|
-
* ```
|
|
40
|
-
*/
|
|
41
5
|
snapTo: (numberOrCallback: number | ((params: {
|
|
42
6
|
snapPoints: number[];
|
|
43
7
|
minHeight: number;
|
|
@@ -46,37 +10,6 @@ export declare type SwipeableDrawerAction = {
|
|
|
46
10
|
};
|
|
47
11
|
export declare type SwipeableDrawerCloseReason = DrawerCloseReason | 'gestureSwipe';
|
|
48
12
|
export interface SwipeableDrawerProps extends DrawerProps {
|
|
49
|
-
/**
|
|
50
|
-
* Callback fired when the drawer is closed.
|
|
51
|
-
*
|
|
52
|
-
* @param event - The event source of the callback
|
|
53
|
-
* @param reason - The reason the drawer was closed
|
|
54
|
-
*/
|
|
55
13
|
onClose?: (event: React.SyntheticEvent<HTMLElement>, reason: SwipeableDrawerCloseReason) => void;
|
|
56
|
-
/**
|
|
57
|
-
* Configuration for gesture controls.
|
|
58
|
-
*
|
|
59
|
-
* @example
|
|
60
|
-
* ```tsx
|
|
61
|
-
* <SwipeableDrawer
|
|
62
|
-
* gestureControlsProps={{
|
|
63
|
-
* // Define where drawer can snap to
|
|
64
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
65
|
-
* minHeight, // Content height (minimum)
|
|
66
|
-
* maxHeight * 0.5, // 50% of screen
|
|
67
|
-
* maxHeight // Full screen
|
|
68
|
-
* ],
|
|
69
|
-
*
|
|
70
|
-
* // Start at first snap point (content height)
|
|
71
|
-
* initialSnap: 0,
|
|
72
|
-
*
|
|
73
|
-
* // Get reference to drawer actions
|
|
74
|
-
* action: (actions) => {
|
|
75
|
-
* drawerActionsRef.current = actions;
|
|
76
|
-
* }
|
|
77
|
-
* }}
|
|
78
|
-
* >
|
|
79
|
-
* ```
|
|
80
|
-
*/
|
|
81
14
|
gestureControlsProps?: Partial<Pick<UseDrawerGesturesOptions, 'snapPoints' | 'initialSnap' | 'action'>>;
|
|
82
15
|
}
|
|
@@ -4,78 +4,8 @@ import type { DrawerAnchor } from '../../Drawer/Drawer.type';
|
|
|
4
4
|
import type { SwipeableDrawerAction } from '../SwipeableDrawer.types';
|
|
5
5
|
import { type SnapPointsFunction } from './useSnapPoints';
|
|
6
6
|
export interface UseDrawerGesturesOptions {
|
|
7
|
-
/**
|
|
8
|
-
* Optional ref to receive drawer action methods.
|
|
9
|
-
* Provides programmatic control over drawer state.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```tsx
|
|
14
|
-
* const drawerRef = useRef<DrawerAction>(null);
|
|
15
|
-
*
|
|
16
|
-
* <Drawer
|
|
17
|
-
* gestureControlsProps={{ action: drawerRef }}
|
|
18
|
-
* >
|
|
19
|
-
*
|
|
20
|
-
* // Later: programmatically snap to position
|
|
21
|
-
* drawerRef.current?.snapTo(1); // Snap to second snap point
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
7
|
action?: React.RefObject<SwipeableDrawerAction>;
|
|
25
|
-
/**
|
|
26
|
-
* Function that returns snap points where the drawer can rest.
|
|
27
|
-
* Called with current drawer dimensions to calculate positions.
|
|
28
|
-
*
|
|
29
|
-
* **All snap points are in pixels.** Use the provided dimensions to calculate percentages:
|
|
30
|
-
* - `maxHeight * 0.5` = 50% of viewport (half available height)
|
|
31
|
-
* - `maxHeight * 0.9` = 90% of viewport
|
|
32
|
-
* - `400` = 400 pixels absolute
|
|
33
|
-
* - `minHeight` = content height (auto-calculated)
|
|
34
|
-
*
|
|
35
|
-
* @param props Current drawer dimensions and measurements
|
|
36
|
-
* @returns Array of snap points or single snap point
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* <Drawer
|
|
41
|
-
* gestureControlsProps={{
|
|
42
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
43
|
-
* minHeight, // Content height (minimum)
|
|
44
|
-
* maxHeight * 0.6, // 60% of screen
|
|
45
|
-
* maxHeight // Full screen
|
|
46
|
-
* ]
|
|
47
|
-
* }}
|
|
48
|
-
* >
|
|
49
|
-
* ```
|
|
50
|
-
*/
|
|
51
8
|
snapPoints?: SnapPointsFunction;
|
|
52
|
-
/**
|
|
53
|
-
* Initial snap point when drawer opens.
|
|
54
|
-
* **Options**:
|
|
55
|
-
* - **Number**: Index (0, 1, 2) or pixel value (300, 500)
|
|
56
|
-
* - **Function**: Dynamic calculation based on drawer state
|
|
57
|
-
*
|
|
58
|
-
* @example
|
|
59
|
-
* ```tsx
|
|
60
|
-
* <Drawer
|
|
61
|
-
* gestureControlsProps={{
|
|
62
|
-
* // Start at first snap point (index-based)
|
|
63
|
-
* initialSnap: 0,
|
|
64
|
-
*
|
|
65
|
-
* // Start at specific pixel height
|
|
66
|
-
* initialSnap: 400,
|
|
67
|
-
*
|
|
68
|
-
* // Dynamic: Start at 50% of viewport
|
|
69
|
-
* initialSnap: ({ maxHeight }) => maxHeight * 0.5,
|
|
70
|
-
*
|
|
71
|
-
* // Dynamic: Remember last position or use content height
|
|
72
|
-
* initialSnap: ({ snapPoints, lastSnap, minHeight }) => {
|
|
73
|
-
* return lastSnap ?? minHeight; // Remember or content height
|
|
74
|
-
* }
|
|
75
|
-
* }}
|
|
76
|
-
* >
|
|
77
|
-
* ```
|
|
78
|
-
*/
|
|
79
9
|
initialSnap?: number | ((params: {
|
|
80
10
|
snapPoints: number[];
|
|
81
11
|
minHeight: number;
|
|
@@ -84,53 +14,13 @@ export interface UseDrawerGesturesOptions {
|
|
|
84
14
|
footerHeight: number;
|
|
85
15
|
lastSnap: number | null;
|
|
86
16
|
}) => number);
|
|
87
|
-
/**
|
|
88
|
-
* @internal
|
|
89
|
-
* Side from which the drawer appears.
|
|
90
|
-
* @default bottom
|
|
91
|
-
*/
|
|
92
17
|
anchor: DrawerAnchor;
|
|
93
|
-
/**
|
|
94
|
-
* @internal
|
|
95
|
-
* Current open state of the drawer.
|
|
96
|
-
* Passed from `open` prop for gesture behavior.
|
|
97
|
-
*/
|
|
98
18
|
open: boolean;
|
|
99
|
-
/**
|
|
100
|
-
* @internal
|
|
101
|
-
* Callback fired when drawer is closed via gesture.
|
|
102
|
-
* Connected to main `onClose` prop.
|
|
103
|
-
*/
|
|
104
19
|
onClose: (event: React.SyntheticEvent<HTMLElement>, reason: 'gestureSwipe') => void;
|
|
105
|
-
/**
|
|
106
|
-
* @internal
|
|
107
|
-
* Ref to the main content element of the drawer.
|
|
108
|
-
* Used for measuring content height and scroll behavior.
|
|
109
|
-
*/
|
|
110
20
|
contentRef: React.RefObject<HTMLElement>;
|
|
111
|
-
/**
|
|
112
|
-
* @internal
|
|
113
|
-
* Ref to the header element of the drawer.
|
|
114
|
-
* Used for measuring header height and as drag handle.
|
|
115
|
-
*/
|
|
116
21
|
headerRef?: React.RefObject<HTMLElement>;
|
|
117
|
-
/**
|
|
118
|
-
* @internal
|
|
119
|
-
* Ref to the footer element of the drawer.
|
|
120
|
-
* Used for measuring footer height in calculations.
|
|
121
|
-
*/
|
|
122
22
|
footerRef?: React.RefObject<HTMLElement>;
|
|
123
|
-
/**
|
|
124
|
-
* @internal
|
|
125
|
-
* Automatically derived from presence of header prop.
|
|
126
|
-
* Used internally to optimize measurements and gesture binding.
|
|
127
|
-
*/
|
|
128
23
|
headerEnabled: boolean;
|
|
129
|
-
/**
|
|
130
|
-
* @internal
|
|
131
|
-
* Automatically derived from presence of footer prop.
|
|
132
|
-
* Used internally to optimize measurements and height calculations.
|
|
133
|
-
*/
|
|
134
24
|
footerEnabled: boolean;
|
|
135
25
|
}
|
|
136
26
|
export interface UseDrawerGesturesReturn {
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/**
|
|
3
|
-
* Hook for determining the size of an element using the Resize Observer API.
|
|
4
|
-
*
|
|
5
|
-
* @param ref - A React ref to an element
|
|
6
|
-
*/
|
|
7
2
|
export declare function useElementSizeObserver(ref: React.RefObject<Element>, { enabled, resizeSourceRef, }: {
|
|
8
3
|
enabled: boolean;
|
|
9
4
|
resizeSourceRef?: React.MutableRefObject<'window' | 'element'>;
|
|
@@ -1,72 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { useReady } from './useReady';
|
|
3
3
|
export interface SnapPointProps {
|
|
4
|
-
/** Height of the header element in pixels */
|
|
5
4
|
headerHeight: number;
|
|
6
|
-
/** Height of the footer element in pixels */
|
|
7
5
|
footerHeight: number;
|
|
8
|
-
/** Current height of the drawer in pixels */
|
|
9
6
|
height: number;
|
|
10
|
-
/** Minimum height needed for content (content + header + footer) */
|
|
11
7
|
minHeight: number;
|
|
12
|
-
/**
|
|
13
|
-
* Maximum available height for the drawer.
|
|
14
|
-
*
|
|
15
|
-
* ✅ IMPORTANT: This is 100% of viewport height (window.innerHeight)!
|
|
16
|
-
*
|
|
17
|
-
* Examples:
|
|
18
|
-
* - maxHeight = 100% of viewport (full available height)
|
|
19
|
-
* - maxHeight * 0.5 = 50% of viewport (half available height)
|
|
20
|
-
* - maxHeight * 0.9 = 90% of viewport
|
|
21
|
-
*
|
|
22
|
-
*/
|
|
23
8
|
maxHeight: number;
|
|
24
9
|
}
|
|
25
|
-
/**
|
|
26
|
-
* Function that returns snap points where the drawer can rest.
|
|
27
|
-
* Called with current drawer dimensions to calculate positions.
|
|
28
|
-
*
|
|
29
|
-
* **All snap points are in pixels.** Use the provided dimensions to calculate percentages:
|
|
30
|
-
* - `maxHeight * 0.5` = 50% of viewport height
|
|
31
|
-
* - `maxHeight * 0.75` = 75% of viewport height
|
|
32
|
-
* - `400` = 400 pixels absolute
|
|
33
|
-
* - `minHeight` = content height (auto-calculated)
|
|
34
|
-
*
|
|
35
|
-
* @param props Current drawer dimensions and measurements
|
|
36
|
-
* @returns Array of snap points in pixels, or single snap point
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* // Basic: Content height + full viewport
|
|
41
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
42
|
-
* minHeight, // Auto-calculated content height
|
|
43
|
-
* maxHeight // Full viewport height
|
|
44
|
-
* ]
|
|
45
|
-
*
|
|
46
|
-
* // Responsive: Multiple viewport percentages
|
|
47
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
48
|
-
* minHeight, // Content height
|
|
49
|
-
* maxHeight * 0.4, // 40% of viewport
|
|
50
|
-
* maxHeight * 0.7, // 70% of viewport
|
|
51
|
-
* maxHeight * 0.95 // 95% of viewport
|
|
52
|
-
* ]
|
|
53
|
-
*
|
|
54
|
-
* // Fixed: Absolute pixel heights
|
|
55
|
-
* snapPoints: ({ minHeight }) => [
|
|
56
|
-
* minHeight, // Content height
|
|
57
|
-
* 300, // 300px
|
|
58
|
-
* 500, // 500px
|
|
59
|
-
* 700 // 700px
|
|
60
|
-
* ]
|
|
61
|
-
*
|
|
62
|
-
* // Mixed: Combine responsive and fixed
|
|
63
|
-
* snapPoints: ({ minHeight, maxHeight }) => [
|
|
64
|
-
* minHeight, // Content height
|
|
65
|
-
* 400, // 400px fixed
|
|
66
|
-
* maxHeight * 0.8 // 80% of viewport
|
|
67
|
-
* ]
|
|
68
|
-
* ```
|
|
69
|
-
*/
|
|
70
10
|
export declare type SnapPointsFunction = (props: SnapPointProps) => number[] | number;
|
|
71
11
|
export interface DefaultSnapProps extends SnapPointProps {
|
|
72
12
|
snapPoints: number[];
|
|
@@ -3,17 +3,8 @@ import { StandardProps } from '@ringcentral/spring-base';
|
|
|
3
3
|
import { ComponentProps, Ref } from 'react';
|
|
4
4
|
import { SwitchClassesKey } from './Switch.classes';
|
|
5
5
|
export declare type SwitchProps = StandardProps<{
|
|
6
|
-
/**
|
|
7
|
-
* If `true`, the Switch will be automatically focused on mount.
|
|
8
|
-
* @default false
|
|
9
|
-
*/
|
|
10
6
|
autoFocus?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Pass a ref to the `input` element.
|
|
13
|
-
*/
|
|
14
7
|
inputRef?: Ref<HTMLInputElement>;
|
|
15
|
-
/** Attributes applied to `input` element */
|
|
16
8
|
inputProps?: Omit<ComponentProps<'input'>, 'ref' | 'className'>;
|
|
17
|
-
/** Attributes applied to root */
|
|
18
9
|
rootProps?: ComponentProps<'span'>;
|
|
19
10
|
} & Omit<UseSwitchParameters, 'readOnly'>, SwitchClassesKey>;
|
package/src/Tab/Tab.classes.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { CamelCase } from 'type-fest';
|
|
2
|
-
import type {
|
|
2
|
+
import type { TabsSize } from '../Tabs/Tabs.type';
|
|
3
|
+
import type { TabColor, TabVariant } from './Tab.type';
|
|
3
4
|
declare type TabSlot = 'container' | 'pill' | 'pill-badge' | 'badge-root' | 'badge' | 'text';
|
|
4
|
-
export declare type BaseTabClassesKey = 'root' | TabVariant | TabSlot | `${TabVariant}-${TabSlot}` | `${TabVariant}-pill-${TabColor}`;
|
|
5
|
+
export declare type BaseTabClassesKey = 'root' | TabVariant | TabSlot | TabsSize | `${TabVariant}-${TabSlot}` | `${TabVariant}-pill-${TabColor}` | `pill-${TabsSize}`;
|
|
5
6
|
export declare type TabClassesKey = CamelCase<BaseTabClassesKey>;
|
|
6
7
|
export declare type TabClasses = {
|
|
7
8
|
name: 'tab';
|
package/src/Tab/Tab.type.d.ts
CHANGED
|
@@ -7,42 +7,13 @@ import { TabClassesKey } from './Tab.classes';
|
|
|
7
7
|
export declare type TabVariant = 'label' | 'icon';
|
|
8
8
|
export declare type TabColor = 'default' | 'cobranding';
|
|
9
9
|
export declare type TabProps = StandardProps<{
|
|
10
|
-
/**
|
|
11
|
-
* The variant to use.
|
|
12
|
-
* @default 'label'
|
|
13
|
-
*/
|
|
14
10
|
variant?: TabVariant;
|
|
15
|
-
/**
|
|
16
|
-
* The color scheme to use for tabs. Overrides the color from Tabs component.
|
|
17
|
-
* - 'default': Uses cobranding colors for non-pill tabs, grey colors for pill tabs
|
|
18
|
-
* - 'cobranding': Uses cobranding colors for all tab types
|
|
19
|
-
* @default 'default'
|
|
20
|
-
*/
|
|
21
11
|
color?: 'default' | 'cobranding';
|
|
22
|
-
/**
|
|
23
|
-
* Text displayed when variant is 'label', also used as title if it is string.
|
|
24
|
-
*/
|
|
25
12
|
label?: ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
* title on Tab
|
|
28
|
-
* **Should pass this if label is not string.**
|
|
29
|
-
*/
|
|
30
13
|
title?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Icon symbol used when variant is 'icon'
|
|
33
|
-
*/
|
|
34
14
|
symbol?: ComponentType;
|
|
35
|
-
/**
|
|
36
|
-
* Props applied to Badge component
|
|
37
|
-
*/
|
|
38
15
|
BadgeProps?: BadgeProps;
|
|
39
|
-
/**
|
|
40
|
-
* Props applied to Tooltip component when variant is 'icon'
|
|
41
|
-
*/
|
|
42
16
|
TooltipProps?: Omit<TooltipProps, 'title' | 'children'> & HTMLDataAttribute;
|
|
43
|
-
/**
|
|
44
|
-
* A ref for imperative actions. It currently only supports `focusVisible()` action.
|
|
45
|
-
*/
|
|
46
17
|
action?: React.Ref<{
|
|
47
18
|
focusVisible(): void;
|
|
48
19
|
}>;
|
|
@@ -4,10 +4,6 @@ import { TabContextProps } from './TabContext.type';
|
|
|
4
4
|
export declare const useInternalTabsContext: () => {
|
|
5
5
|
tabsInstanceId: string | undefined;
|
|
6
6
|
};
|
|
7
|
-
/**
|
|
8
|
-
* Generate stable IDs for tab and tabpanel pairs
|
|
9
|
-
* This ensures consistent IDs regardless of whether the tab is visible or in more menu
|
|
10
|
-
*/
|
|
11
7
|
export declare const generateTabStableIds: (tabsInstanceId: string | undefined, identifier: string | number) => {
|
|
12
8
|
tabId: string;
|
|
13
9
|
panelId: string;
|
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
import { UseTabsParameters } from '@mui/base';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
export declare type TabContextProps = {
|
|
4
|
-
/**
|
|
5
|
-
* The content of the component.
|
|
6
|
-
*/
|
|
7
4
|
children: ReactNode;
|
|
8
|
-
/**
|
|
9
|
-
* The value of the currently selected `Tab`.
|
|
10
|
-
* If you don't want any selected `Tab`, you can set this prop to `null`.
|
|
11
|
-
*/
|
|
12
5
|
value?: string | number | null;
|
|
13
6
|
} & Omit<UseTabsParameters, 'orientation' | 'direction' | 'value'>;
|
|
@@ -2,17 +2,7 @@ import { StandardProps } from '@ringcentral/spring-base';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { TabPanelClassesKey } from './TabPanel.classes';
|
|
4
4
|
export declare type TabPanelProps = StandardProps<{
|
|
5
|
-
/**
|
|
6
|
-
* The content of the component.
|
|
7
|
-
*/
|
|
8
5
|
children: ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
|
|
11
|
-
*/
|
|
12
6
|
value: number | string;
|
|
13
|
-
/**
|
|
14
|
-
* false: will unmount children whenever hidden
|
|
15
|
-
* true: keep displayed children mounted when hidden
|
|
16
|
-
*/
|
|
17
7
|
keepMounted?: boolean;
|
|
18
8
|
}, TabPanelClassesKey, 'div'>;
|
|
@@ -4,28 +4,9 @@ import { TableClassesKey } from './Table.classes';
|
|
|
4
4
|
declare type DefaultElementType = 'table';
|
|
5
5
|
declare type ExtendElementType = ElementType;
|
|
6
6
|
declare type BaseTableProps = WithClassesProps<{
|
|
7
|
-
/**
|
|
8
|
-
* The content of the table, normally `TableHead` and `TableBody`.
|
|
9
|
-
*/
|
|
10
7
|
children?: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Set the header sticky.
|
|
13
|
-
*
|
|
14
|
-
* ⚠️ It doesn't work with IE11.
|
|
15
|
-
* @default false
|
|
16
|
-
*/
|
|
17
8
|
stickyHeader?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Set the footer sticky.
|
|
20
|
-
*
|
|
21
|
-
* ⚠️ It doesn't work with IE11.
|
|
22
|
-
* @default false
|
|
23
|
-
*/
|
|
24
9
|
stickyFooter?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Show vertical dividers between columns.
|
|
27
|
-
* @default false
|
|
28
|
-
*/
|
|
29
10
|
columnDivider?: boolean;
|
|
30
11
|
}, TableClassesKey>;
|
|
31
12
|
export declare type TableProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableProps, T>;
|
|
@@ -4,9 +4,6 @@ import { TableBodyClassesKey } from './TableBody.classes';
|
|
|
4
4
|
declare type DefaultElementType = 'tbody';
|
|
5
5
|
declare type ExtendElementType = ElementType;
|
|
6
6
|
declare type BaseTableBodyProps = WithClassesProps<{
|
|
7
|
-
/**
|
|
8
|
-
* The content of the component, normally `TableRow`.
|
|
9
|
-
*/
|
|
10
7
|
children?: ReactNode;
|
|
11
8
|
}, TableBodyClassesKey>;
|
|
12
9
|
export declare type TableBodyProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableBodyProps, T>;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import tableCellStyle from './styles/TableCell.css';
|
|
2
2
|
import { TableCellComponent } from './TableCell.type';
|
|
3
|
-
/**
|
|
4
|
-
* The component renders a `<th>` element when the parent context is a header
|
|
5
|
-
* or otherwise a `<td>` element.
|
|
6
|
-
*/
|
|
7
3
|
declare const TableCell: TableCellComponent;
|
|
8
4
|
export { TableCell, tableCellStyle };
|
|
@@ -7,51 +7,16 @@ declare type ExtendElementType = ElementType;
|
|
|
7
7
|
export declare type SortDirection = 'asc' | 'desc' | false;
|
|
8
8
|
export declare type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableCellElement> & React.TdHTMLAttributes<HTMLTableCellElement>;
|
|
9
9
|
declare type BaseTableCellProps = WithClassesProps<{
|
|
10
|
-
/**
|
|
11
|
-
* Set the text-align on the table cell content.
|
|
12
|
-
*
|
|
13
|
-
* Monetary or generally number fields **should be right aligned** as that allows
|
|
14
|
-
* you to add them up quickly in your head without having to worry about decimals.
|
|
15
|
-
* @default 'inherit'
|
|
16
|
-
*/
|
|
17
10
|
align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
|
|
18
|
-
/**
|
|
19
|
-
* Sets the padding applied to the cell.
|
|
20
|
-
*/
|
|
21
11
|
padding?: 'normal' | 'checkbox' | 'none';
|
|
22
|
-
/**
|
|
23
|
-
* Set scope attribute.
|
|
24
|
-
*/
|
|
25
12
|
scope?: TableCellBaseProps['scope'];
|
|
26
|
-
/**
|
|
27
|
-
* Set aria-sort direction.
|
|
28
|
-
*/
|
|
29
13
|
sortDirection?: SortDirection;
|
|
30
|
-
/**
|
|
31
|
-
* Set the initial sort icon direction.
|
|
32
|
-
* @default 'asc'
|
|
33
|
-
*/
|
|
34
14
|
initialSortIconDirection?: SortDirection;
|
|
35
|
-
/**
|
|
36
|
-
* If `true`, a sortable or non-sortable icon will be shown according to the column's sortable state.
|
|
37
|
-
* @default false
|
|
38
|
-
*/
|
|
39
15
|
showSortIndicator?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Props applied to the icon rendered when `sortDirection` is set.
|
|
42
|
-
*/
|
|
43
16
|
SortIconProps?: IconProps;
|
|
44
|
-
/**
|
|
45
|
-
* Specify the cell type.
|
|
46
|
-
* The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
|
|
47
|
-
*/
|
|
48
17
|
variant?: 'head' | 'body' | 'footer';
|
|
49
18
|
}, TableCellClassesKey>;
|
|
50
19
|
export declare type TableCellProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableCellProps, T>;
|
|
51
|
-
/**
|
|
52
|
-
* The component renders a `<th>` element when the parent context is a header
|
|
53
|
-
* or otherwise a `<td>` element.
|
|
54
|
-
*/
|
|
55
20
|
export declare type TableCellComponent = OverridableComponent<{
|
|
56
21
|
props: BaseTableCellProps;
|
|
57
22
|
defaultComponent: DefaultElementType;
|
|
@@ -5,14 +5,7 @@ declare type DefaultElementType = 'div';
|
|
|
5
5
|
declare type ExtendElementType = ElementType;
|
|
6
6
|
export declare type TableContainerBorder = 'standard' | 'none' | 'rounded';
|
|
7
7
|
declare type BaseTableContainerProps = WithClassesProps<{
|
|
8
|
-
/**
|
|
9
|
-
* The content of the component, normally `Table`.
|
|
10
|
-
*/
|
|
11
8
|
children?: React.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Specify the border type.
|
|
14
|
-
* @default 'standard'
|
|
15
|
-
*/
|
|
16
9
|
border?: TableContainerBorder;
|
|
17
10
|
}, TableContainerClassesKey>;
|
|
18
11
|
export declare type TableContainerProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableContainerProps, T>;
|
|
@@ -2,8 +2,5 @@ import { StandardProps } from '@ringcentral/spring-base';
|
|
|
2
2
|
import { TdHTMLAttributes } from 'react';
|
|
3
3
|
import { TableFooterClassesKey } from './TableFooter.classes';
|
|
4
4
|
export declare type TableFooterProps = StandardProps<{
|
|
5
|
-
/**
|
|
6
|
-
* Sets the padding applied to the cell.
|
|
7
|
-
*/
|
|
8
5
|
padding?: 'normal' | 'checkbox' | 'none';
|
|
9
6
|
} & Pick<TdHTMLAttributes<HTMLTableCellElement>, 'colSpan'>, TableFooterClassesKey, 'tfoot'>;
|
|
@@ -4,13 +4,7 @@ import { TableHeadClassesKey } from './TableHead.classes';
|
|
|
4
4
|
declare type DefaultElementType = 'thead';
|
|
5
5
|
declare type ExtendElementType = ElementType;
|
|
6
6
|
declare type BaseTableHeadProps = WithClassesProps<{
|
|
7
|
-
/**
|
|
8
|
-
* The content of the component, normally `TableRow`.
|
|
9
|
-
*/
|
|
10
7
|
children?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Use default table background color.
|
|
13
|
-
*/
|
|
14
8
|
useDefaultBgColor?: boolean;
|
|
15
9
|
}, TableHeadClassesKey>;
|
|
16
10
|
export declare type TableHeadProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableHeadProps, T>;
|
|
@@ -6,63 +6,16 @@ import { TablePaginationClassesKey } from './TablePagination.classes';
|
|
|
6
6
|
declare type DefaultElementType = 'td';
|
|
7
7
|
declare type ExtendElementType = ElementType;
|
|
8
8
|
export declare type BaseTablePaginationProps = WithClassesProps<{
|
|
9
|
-
/**
|
|
10
|
-
* The variant to use.
|
|
11
|
-
* `range` displays the current range of rows shown with no page size controls.
|
|
12
|
-
* `page` displays the current page with a control to select which page to show.
|
|
13
|
-
* `page-size` displays the current page with a control to change the page size.
|
|
14
|
-
* @default 'range'
|
|
15
|
-
*/
|
|
16
9
|
variant?: 'range' | 'select-page' | 'page-size';
|
|
17
|
-
/**
|
|
18
|
-
* The zero-based index of the current page.
|
|
19
|
-
*/
|
|
20
10
|
page: number;
|
|
21
|
-
/**
|
|
22
|
-
* The total number of rows.
|
|
23
|
-
* @default -1
|
|
24
|
-
*/
|
|
25
11
|
count?: number;
|
|
26
|
-
/**
|
|
27
|
-
* The total number of rows to show per page.
|
|
28
|
-
* @default 10
|
|
29
|
-
*/
|
|
30
12
|
rowsPerPage?: number;
|
|
31
|
-
/**
|
|
32
|
-
* The label to show to the left of the page size control that sets the number of rows per page.
|
|
33
|
-
* Only applies to variant `page-size`
|
|
34
|
-
* @default 'Rows per page'
|
|
35
|
-
*/
|
|
36
13
|
rowsPerPageLabel?: string;
|
|
37
|
-
/**
|
|
38
|
-
* The options to be shown in the Select input for the number of rows to show per page.
|
|
39
|
-
* Required for variants `page-size` and `select-page`
|
|
40
|
-
* @default '[10, 25, 50, 100]'
|
|
41
|
-
*/
|
|
42
14
|
rowsPerPageOptions?: number[];
|
|
43
|
-
/**
|
|
44
|
-
* Callback fires when the number of rows to show per page is changed.
|
|
45
|
-
* Required for variants `page-size` and `select-page`
|
|
46
|
-
*/
|
|
47
15
|
onRowsPerPageChange?: SelectProps['onChange'];
|
|
48
|
-
/**
|
|
49
|
-
* The label to use to separate the range of rows shown or page numbers.
|
|
50
|
-
* Used in `range` variant: `1-10 ${rangeSeparatorLabel} 147`
|
|
51
|
-
* Used in `select-page` variant: `1 ${rangeSeparatorLabel} 15`
|
|
52
|
-
* @default 'of'
|
|
53
|
-
*/
|
|
54
16
|
rangeSeparatorLabel?: string;
|
|
55
|
-
/**
|
|
56
|
-
* Props applied to the `IconButton` component for the previous page button.
|
|
57
|
-
*/
|
|
58
17
|
previousPageButtonProps?: IconButtonProps;
|
|
59
|
-
/**
|
|
60
|
-
* Props applied to the `IconButton` component for the next page button.
|
|
61
|
-
*/
|
|
62
18
|
nextPageButtonProps?: IconButtonProps;
|
|
63
|
-
/**
|
|
64
|
-
* Callback fired when the current page is changed.
|
|
65
|
-
*/
|
|
66
19
|
onPageChange?: (e: React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLInputElement>, page: number) => void;
|
|
67
20
|
}, TablePaginationClassesKey>;
|
|
68
21
|
export declare type TablePaginationProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTablePaginationProps, T>;
|