@react-md/core 1.0.0-next.10 → 1.0.0-next.12
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/.turbo/turbo-build.log +22 -22
- package/.turbo/turbo-lint.log +3 -3
- package/.turbo/turbo-typecheck.log +1 -1
- package/CHANGELOG.md +12 -0
- package/dist/CoreProviders.js.map +1 -1
- package/dist/NoSsr.js.map +1 -1
- package/dist/RootHtml.js.map +1 -1
- package/dist/SsrProvider.js.map +1 -1
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.d.ts +2 -1
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/styles.js.map +1 -1
- package/dist/badge/Badge.js.map +1 -1
- package/dist/box/Box.js.map +1 -1
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ButtonUnstyled.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/button/TooltippedButton.js.map +1 -1
- package/dist/button/buttonStyles.js.map +1 -1
- package/dist/button/buttonUnstyledStyles.js.map +1 -1
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/CardFooter.js.map +1 -1
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/CardSubtitle.js.map +1 -1
- package/dist/card/CardTitle.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/styles.js.map +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/styles.js.map +1 -1
- package/dist/cssUtils.js.map +1 -1
- package/dist/delegateEvent.js.map +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContainer.js.map +1 -1
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/DialogHeader.js.map +1 -1
- package/dist/dialog/DialogTitle.d.ts +2 -1
- package/dist/dialog/DialogTitle.js.map +1 -1
- package/dist/dialog/FixedDialog.js.map +1 -1
- package/dist/dialog/NestedDialogProvider.js.map +1 -1
- package/dist/dialog/styles.js.map +1 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/styles.js.map +1 -1
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionList.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.d.ts +2 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/useExpansionList.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/focus/utils.js.map +1 -1
- package/dist/form/Checkbox.js.map +1 -1
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/FileInput.js.map +1 -1
- package/dist/form/Form.js.map +1 -1
- package/dist/form/FormMessage.js.map +1 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/InputToggleIcon.js.map +1 -1
- package/dist/form/Label.js.map +1 -1
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/MenuItemCheckbox.js.map +1 -1
- package/dist/form/MenuItemFileInput.js.map +1 -1
- package/dist/form/MenuItemInputToggle.js.map +1 -1
- package/dist/form/MenuItemRadio.js.map +1 -1
- package/dist/form/MenuItemSwitch.js.map +1 -1
- package/dist/form/MenuItemTextField.js.map +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Option.js.map +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Radio.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.js.map +1 -1
- package/dist/form/SelectedOption.js.map +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderMark.js.map +1 -1
- package/dist/form/SliderMarkLabel.d.ts +2 -1
- package/dist/form/SliderMarkLabel.js.map +1 -1
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueMarks.js.map +1 -1
- package/dist/form/SliderValueTooltip.js.map +1 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldAddon.js.map +1 -1
- package/dist/form/TextFieldContainer.js +2 -2
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/fileUtils.js.map +1 -1
- package/dist/form/formConfig.js.map +1 -1
- package/dist/form/formMessageStyles.js.map +1 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/menuItemInputToggleStyles.js.map +1 -1
- package/dist/form/nativeSelectStyles.js.map +1 -1
- package/dist/form/optionStyles.js.map +1 -1
- package/dist/form/passwordStyles.js.map +1 -1
- package/dist/form/selectStyles.js.map +1 -1
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/sliderUtils.js.map +1 -1
- package/dist/form/switchStyles.js.map +1 -1
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/{TextFieldContainerStyles.js → textFieldContainerStyles.js} +1 -1
- package/dist/form/{TextFieldContainerStyles.js.map → textFieldContainerStyles.js.map} +1 -1
- package/dist/form/textFieldStyles.js.map +1 -1
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useEditableCombobox.js.map +1 -1
- package/dist/form/useFileUpload.js.map +1 -1
- package/dist/form/useFormReset.js.map +1 -1
- package/dist/form/useListboxProvider.js.map +1 -1
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRadioGroup.js.map +1 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useResizingTextArea.js.map +1 -1
- package/dist/form/useSelectCombobox.js.map +1 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/form/utils.js.map +1 -1
- package/dist/form/validation.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/hoverMode/useHoverModeProvider.js.map +1 -1
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/TextIconSpacing.js.map +1 -1
- package/dist/icon/iconConfig.js.map +1 -1
- package/dist/icon/material.js.map +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/interaction/Ripple.js.map +1 -1
- package/dist/interaction/RippleContainer.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/config.js.map +1 -1
- package/dist/interaction/types.js.map +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/interaction/useHigherContrastChildren.js.map +1 -1
- package/dist/interaction/utils.js.map +1 -1
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/layoutNavStyles.js.map +1 -1
- package/dist/layout/layoutWindowSplitterStyles.js.map +1 -1
- package/dist/layout/mainStyles.js.map +1 -1
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/layout/useTemporaryLayout.js.map +1 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/link/styles.js.map +1 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemChildren.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListItemText.js.map +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/appSize.js.map +1 -1
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuBar.js.map +1 -1
- package/dist/menu/MenuButton.js.map +1 -1
- package/dist/menu/MenuConfigurationProvider.js.map +1 -1
- package/dist/menu/MenuItem.js.map +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemCircularProgress.js.map +1 -1
- package/dist/menu/MenuItemGroup.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuSheet.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/MenuWidgetKeyboardProvider.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/menu/useMenuBarProvider.js.map +1 -1
- package/dist/menu/utils.js.map +1 -1
- package/dist/movement/constants.js.map +1 -1
- package/dist/movement/findMatchIndex.js.map +1 -1
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/movement/utils.js.map +1 -1
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/overlay/overlayStyles.js.map +1 -1
- package/dist/portal/Portal.js.map +1 -1
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/constants.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/getFixedPosition.js.map +1 -1
- package/dist/positioning/types.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/positioning/utils.js.map +1 -1
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/getProgressA11y.js.map +1 -1
- package/dist/progress/types.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemContainer.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/responsive-item/styles.js.map +1 -1
- package/dist/scroll/ScrollLock.js.map +1 -1
- package/dist/scroll/getScrollbarWidth.js.map +1 -1
- package/dist/scroll/useScrollLock.js.map +1 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/toSearchQuery.js.map +1 -1
- package/dist/searching/types.js.map +1 -1
- package/dist/searching/useFuzzyMatch.js.map +1 -1
- package/dist/searching/utils.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/segmentedButtonContainerStyles.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/sheet/styles.js.map +1 -1
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastActionButton.js.map +1 -1
- package/dist/snackbar/ToastCloseButton.js.map +1 -1
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/ToastManagerProvider.js.map +1 -1
- package/dist/snackbar/snackbarStyles.js.map +1 -1
- package/dist/snackbar/toastContentStyles.js.map +1 -1
- package/dist/snackbar/toastStyles.js.map +1 -1
- package/dist/snackbar/useCurrentToastActions.js.map +1 -1
- package/dist/suspense/CircularProgressSuspense.js.map +1 -1
- package/dist/suspense/NullSuspense.js.map +1 -1
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableConfigurationProvider.js.map +1 -1
- package/dist/table/TableContainer.js.map +1 -1
- package/dist/table/TableContainerProvider.js.map +1 -1
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/tableCellStyles.js.map +1 -1
- package/dist/table/tableContainerStyles.js.map +1 -1
- package/dist/table/tableFooterStyles.js.map +1 -1
- package/dist/table/tableHeaderStyles.js.map +1 -1
- package/dist/table/tableRowStyles.js.map +1 -1
- package/dist/table/tableStyles.js.map +1 -1
- package/dist/table/types.js.map +1 -1
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/tabIndicatorStyles.js.map +1 -1
- package/dist/tabs/tabListScrollButtonStyles.js.map +1 -1
- package/dist/tabs/tabListStyles.js.map +1 -1
- package/dist/tabs/tabStyles.js.map +1 -1
- package/dist/tabs/useTabList.js.map +1 -1
- package/dist/tabs/useTabs.js.map +1 -1
- package/dist/tabs/utils.js.map +1 -1
- package/dist/test-utils/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/ResizeObserver.js.map +1 -1
- package/dist/test-utils/data-testid.js.map +1 -1
- package/dist/test-utils/index.js.map +1 -1
- package/dist/test-utils/jest-setup.js.map +1 -1
- package/dist/test-utils/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/TextDecoder.js.map +1 -1
- package/dist/test-utils/polyfills/TextEncoder.js.map +1 -1
- package/dist/test-utils/polyfills/index.js.map +1 -1
- package/dist/test-utils/polyfills/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/offsetParent.js.map +1 -1
- package/dist/test-utils/polyfills/scrollIntoView.js.map +1 -1
- package/dist/test-utils/render.js.map +1 -1
- package/dist/test-utils/timers.js.map +1 -1
- package/dist/theme/LocalStorageColorSchemeProvider.js.map +1 -1
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/cssVars.js.map +1 -1
- package/dist/theme/types.js.map +1 -1
- package/dist/theme/useCSSVariables.js.map +1 -1
- package/dist/theme/useColorScheme.js.map +1 -1
- package/dist/theme/useColorSchemeMetaTag.js.map +1 -1
- package/dist/theme/useColorSchemeProvider.js.map +1 -1
- package/dist/theme/usePrefersColorScheme.js.map +1 -1
- package/dist/theme/utils.js.map +1 -1
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/constants.js.map +1 -1
- package/dist/tooltip/tooltipStyles.js.map +1 -1
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/tooltip/useTooltipPosition.js.map +1 -1
- package/dist/tooltip/utils.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/collapseStyles.js.map +1 -1
- package/dist/transition/config.js.map +1 -1
- package/dist/transition/maxWidthTransition.js.map +1 -1
- package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCSSTransition.js.map +1 -1
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useSlideTransition.js.map +1 -1
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/transition/utils.js.map +1 -1
- package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeGroup.js.map +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeItemExpander.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTree.js.map +1 -1
- package/dist/tree/useTreeExpansion.js.map +1 -1
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/tree/useTreeSelection.js.map +1 -1
- package/dist/tree/utils.js.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/typography/TextContainer.d.ts +1 -40
- package/dist/typography/TextContainer.js +1 -30
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.d.ts +1 -112
- package/dist/typography/Typography.js +1 -89
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/WritingDirectionProvider.js.map +1 -1
- package/dist/typography/textContainerStyles.d.ts +40 -0
- package/dist/typography/textContainerStyles.js +32 -0
- package/dist/typography/textContainerStyles.js.map +1 -0
- package/dist/typography/typographyStyles.d.ts +112 -0
- package/dist/typography/typographyStyles.js +91 -0
- package/dist/typography/typographyStyles.js.map +1 -0
- package/dist/useAsyncAction.js.map +1 -1
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.js.map +1 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useEnsuredId.js.map +1 -1
- package/dist/useEnsuredRef.js.map +1 -1
- package/dist/useEnsuredState.js.map +1 -1
- package/dist/useHtmlClassName.js.map +1 -1
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/useLocalStorage.js.map +1 -1
- package/dist/useOrientation.js.map +1 -1
- package/dist/usePageInactive.js.map +1 -1
- package/dist/useResizeListener.js.map +1 -1
- package/dist/useResizeObserver.js.map +1 -1
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useToggle.js.map +1 -1
- package/dist/useUnmounted.js.map +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/RenderRecursively.js.map +1 -1
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/applyRef.js.map +1 -1
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/getClientPosition.js.map +1 -1
- package/dist/utils/getMiddleOfRange.js.map +1 -1
- package/dist/utils/getPercentage.js.map +1 -1
- package/dist/utils/getRangeDefaultValue.js.map +1 -1
- package/dist/utils/getRangeSteps.js.map +1 -1
- package/dist/utils/identity.js.map +1 -1
- package/dist/utils/isElementVisible.js.map +1 -1
- package/dist/utils/loop.js.map +1 -1
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/dist/utils/randomInt.js.map +1 -1
- package/dist/utils/wait.js.map +1 -1
- package/dist/utils/withinRange.js.map +1 -1
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +21 -13
- package/src/app-bar/AppBarTitle.tsx +2 -5
- package/src/dialog/DialogTitle.tsx +1 -1
- package/src/expansion-panel/ExpansionPanelHeader.tsx +3 -6
- package/src/form/SliderMarkLabel.tsx +1 -1
- package/src/form/TextFieldContainer.tsx +2 -2
- package/src/index.ts +3 -1
- package/src/typography/TextContainer.tsx +4 -53
- package/src/typography/Typography.tsx +5 -145
- package/src/typography/__tests__/TextContainer.tsx +2 -1
- package/src/typography/__tests__/Typography.tsx +2 -1
- package/src/typography/textContainerStyles.ts +53 -0
- package/src/typography/typographyStyles.ts +145 -0
- package/tsconfig.types.json +1 -1
- package/.turbo/turbo-test.log +0 -5512
- /package/dist/form/{TextFieldContainerStyles.d.ts → textFieldContainerStyles.d.ts} +0 -0
- /package/src/form/{TextFieldContainerStyles.ts → textFieldContainerStyles.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n DEFAULT_TOOLTIP_CLASSNAMES,\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { tooltip } from \"./tooltipStyles.js\";\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @remarks\n * \\@since 2.8.0 Supports the `RenderConditionalPortalProps`\n * \\@since 6.0.0 No longer supports the `RenderConditionalPortalProps`.\n */\nexport interface TooltipProps\n extends HTMLAttributes<HTMLSpanElement>,\n CSSTransitionComponentProps,\n TransitionActions {\n visible: boolean;\n\n /**\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_POSITION`\n * @see {@link DEFAULT_TOOLTIP_POSITION}\n */\n position?: SimplePosition;\n\n /**\n * @see {@link CSSTransitionComponentProps.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n * tooltip no longer aligns to the center of the tooltipped element.\n *\n * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n * text and ellipsis once it has reached the max tooltip width.\n *\n * @defaultValue `\"allow\"`\n */\n textOverflow?: TextOverflow;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\n *\n * function Example() {\n * const { elementProps, tooltipProps } = useTooltip();\n *\n * return (\n * <>\n * <Button {...elementProps}>Button</Button>\n * <Tooltip {...tooltipProps}>\n * Tooltip Content\n * </Tooltip>\n * </>\n * );\n * }\n * ```\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n function Tooltip(props, nodeRef) {\n const {\n id: propId,\n dense,\n visible,\n children,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n timeout = DEFAULT_TOOLTIP_TIMEOUT,\n classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n className,\n position = DEFAULT_TOOLTIP_POSITION,\n temporary = true,\n exitedHidden = !temporary,\n textOverflow,\n disablePortal: propDisablePortal,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"tooltip\");\n\n const { rendered, elementProps, disablePortal } = useCSSTransition({\n nodeRef,\n appear,\n enter,\n exit,\n transitionIn: visible,\n timeout,\n classNames,\n className: tooltip({\n dense,\n position,\n className,\n textOverflow,\n }),\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAM7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAASC,OAAO,QAAQ,qBAAqB;AAmD7C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n DEFAULT_TOOLTIP_CLASSNAMES,\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { tooltip } from \"./tooltipStyles.js\";\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @remarks\n * \\@since 2.8.0 Supports the `RenderConditionalPortalProps`\n * \\@since 6.0.0 No longer supports the `RenderConditionalPortalProps`.\n */\nexport interface TooltipProps\n extends HTMLAttributes<HTMLSpanElement>,\n CSSTransitionComponentProps,\n TransitionActions {\n visible: boolean;\n\n /**\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_POSITION`\n * @see {@link DEFAULT_TOOLTIP_POSITION}\n */\n position?: SimplePosition;\n\n /**\n * @see {@link CSSTransitionComponentProps.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n * tooltip no longer aligns to the center of the tooltipped element.\n *\n * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n * text and ellipsis once it has reached the max tooltip width.\n *\n * @defaultValue `\"allow\"`\n */\n textOverflow?: TextOverflow;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\n *\n * function Example() {\n * const { elementProps, tooltipProps } = useTooltip();\n *\n * return (\n * <>\n * <Button {...elementProps}>Button</Button>\n * <Tooltip {...tooltipProps}>\n * Tooltip Content\n * </Tooltip>\n * </>\n * );\n * }\n * ```\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n function Tooltip(props, nodeRef) {\n const {\n id: propId,\n dense,\n visible,\n children,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n timeout = DEFAULT_TOOLTIP_TIMEOUT,\n classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n className,\n position = DEFAULT_TOOLTIP_POSITION,\n temporary = true,\n exitedHidden = !temporary,\n textOverflow,\n disablePortal: propDisablePortal,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"tooltip\");\n\n const { rendered, elementProps, disablePortal } = useCSSTransition({\n nodeRef,\n appear,\n enter,\n exit,\n transitionIn: visible,\n timeout,\n classNames,\n className: tooltip({\n dense,\n position,\n className,\n textOverflow,\n }),\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAM7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAASC,OAAO,QAAQ,qBAAqB;AAmD7C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/TooltipHoverModeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n createHoverModeContext,\n useHoverModeProvider,\n type HoverModeConfiguration,\n type HoverModeContext,\n} from \"../hoverMode/useHoverModeProvider.js\";\nimport { DEFAULT_TOOLTIP_DELAY } from \"./constants.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TooltipHoverModeContext = HoverModeContext;\n\nconst context = createContext<TooltipHoverModeContext>(\n createHoverModeContext({\n hoverTimeout: DEFAULT_TOOLTIP_DELAY,\n leaveTimeout: 0,\n })\n);\ncontext.displayName = \"TooltipHoverMode\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {\n return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltipHoverModeProviderProps\n extends Partial<HoverModeConfiguration> {\n children: ReactNode;\n\n /**\n * @see {@link HoverModeConfiguration.hoverTimeout}\n * @defaultValue `1000`\n */\n hoverTimeout?: number;\n\n /**\n * @see {@link HoverModeConfiguration.leaveTimeout}\n * @defaultValue `0`\n */\n leaveTimeout?: number;\n\n /**\n * @see {@link HoverModeConfiguration.disableTimeout}\n * @defaultValue `1000`\n */\n disableTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * Updates all tooltips that are rendered as a child anywhere in the React tree\n * to immediately appear for a short duration once a tooltip has become visible.\n * You can also use this provider to configure all tooltips' visibility delay to\n * a new value.\n *\n * @example\n * Configuration Example\n * ```tsx\n * <TooltipHoverModeProvider\n * // wait 3 seconds before displaying any tooltips\n * hoverTimeout={3000}\n *\n * // wait 1 second before hiding any tooltips\n * leaveTimeout={1000}\n *\n * // disable the hover mode functionality only if another tooltip has not\n * // been visible for 20 seconds\n * disableTimeout={20000}\n * >\n * <RestOfTheApp />\n * </TooltipHoverModeProvider>\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function TooltipHoverModeProvider(\n props: TooltipHoverModeProviderProps\n): ReactElement {\n const {\n hoverTimeout = DEFAULT_TOOLTIP_DELAY,\n leaveTimeout = 0,\n disableTimeout = DEFAULT_TOOLTIP_DELAY,\n defaultActiveId,\n children,\n } = props;\n const context = useHoverModeProvider({\n hoverTimeout,\n leaveTimeout,\n disableTimeout,\n defaultActiveId,\n });\n\n return <Provider value={context}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","createHoverModeContext","useHoverModeProvider","DEFAULT_TOOLTIP_DELAY","context","hoverTimeout","leaveTimeout","displayName","Provider","useTooltipHoverMode","TooltipHoverModeProvider","props","disableTimeout","defaultActiveId","children","value"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,QAGL,QAAQ;AACf,SACEC,sBAAsB,EACtBC,oBAAoB,QAGf,uCAAuC;AAC9C,SAASC,qBAAqB,QAAQ,iBAAiB;AAKvD,MAAMC,wBAAUL,cACdE,uBAAuB;IACrBI,cAAcF;IACdG,cAAc;AAChB;AAEFF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;;CAGC,GACD,OAAO,SAASK;IACd,OAAOT,WAAWI;AACpB;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASM,yBACdC,KAAoC;IAEpC,MAAM,EACJN,eAAeF,qBAAqB,EACpCG,eAAe,CAAC,EAChBM,iBAAiBT,qBAAqB,EACtCU,eAAe,EACfC,QAAQ,EACT,GAAGH;IACJ,MAAMP,UAAUF,qBAAqB;QACnCG;QACAC;QACAM;QACAC;IACF;IAEA,qBAAO,KAACL;QAASO,OAAOX;kBAAUU;;AACpC"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/TooltipHoverModeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n createHoverModeContext,\n useHoverModeProvider,\n type HoverModeConfiguration,\n type HoverModeContext,\n} from \"../hoverMode/useHoverModeProvider.js\";\nimport { DEFAULT_TOOLTIP_DELAY } from \"./constants.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TooltipHoverModeContext = HoverModeContext;\n\nconst context = createContext<TooltipHoverModeContext>(\n createHoverModeContext({\n hoverTimeout: DEFAULT_TOOLTIP_DELAY,\n leaveTimeout: 0,\n })\n);\ncontext.displayName = \"TooltipHoverMode\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {\n return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltipHoverModeProviderProps\n extends Partial<HoverModeConfiguration> {\n children: ReactNode;\n\n /**\n * @see {@link HoverModeConfiguration.hoverTimeout}\n * @defaultValue `1000`\n */\n hoverTimeout?: number;\n\n /**\n * @see {@link HoverModeConfiguration.leaveTimeout}\n * @defaultValue `0`\n */\n leaveTimeout?: number;\n\n /**\n * @see {@link HoverModeConfiguration.disableTimeout}\n * @defaultValue `1000`\n */\n disableTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * Updates all tooltips that are rendered as a child anywhere in the React tree\n * to immediately appear for a short duration once a tooltip has become visible.\n * You can also use this provider to configure all tooltips' visibility delay to\n * a new value.\n *\n * @example\n * Configuration Example\n * ```tsx\n * <TooltipHoverModeProvider\n * // wait 3 seconds before displaying any tooltips\n * hoverTimeout={3000}\n *\n * // wait 1 second before hiding any tooltips\n * leaveTimeout={1000}\n *\n * // disable the hover mode functionality only if another tooltip has not\n * // been visible for 20 seconds\n * disableTimeout={20000}\n * >\n * <RestOfTheApp />\n * </TooltipHoverModeProvider>\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function TooltipHoverModeProvider(\n props: TooltipHoverModeProviderProps\n): ReactElement {\n const {\n hoverTimeout = DEFAULT_TOOLTIP_DELAY,\n leaveTimeout = 0,\n disableTimeout = DEFAULT_TOOLTIP_DELAY,\n defaultActiveId,\n children,\n } = props;\n const context = useHoverModeProvider({\n hoverTimeout,\n leaveTimeout,\n disableTimeout,\n defaultActiveId,\n });\n\n return <Provider value={context}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","createHoverModeContext","useHoverModeProvider","DEFAULT_TOOLTIP_DELAY","context","hoverTimeout","leaveTimeout","displayName","Provider","useTooltipHoverMode","TooltipHoverModeProvider","props","disableTimeout","defaultActiveId","children","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,QAGL,QAAQ;AACf,SACEC,sBAAsB,EACtBC,oBAAoB,QAGf,uCAAuC;AAC9C,SAASC,qBAAqB,QAAQ,iBAAiB;AAKvD,MAAMC,wBAAUL,cACdE,uBAAuB;IACrBI,cAAcF;IACdG,cAAc;AAChB;AAEFF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;;CAGC,GACD,OAAO,SAASK;IACd,OAAOT,WAAWI;AACpB;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASM,yBACdC,KAAoC;IAEpC,MAAM,EACJN,eAAeF,qBAAqB,EACpCG,eAAe,CAAC,EAChBM,iBAAiBT,qBAAqB,EACtCU,eAAe,EACfC,QAAQ,EACT,GAAGH;IACJ,MAAMP,UAAUF,qBAAqB;QACnCG;QACAC;QACAM;QACAC;IACF;IAEA,qBAAO,KAACL;QAASO,OAAOX;kBAAUU;;AACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/constants.ts"],"sourcesContent":["import type {\n CSSTransitionClassNames,\n TransitionTimeout,\n} from \"../transition/types.js\";\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n appear: \"rmd-tooltip--enter\",\n appearActive: \"rmd-tooltip--visible\",\n enter: \"rmd-tooltip--enter\",\n enterActive: \"rmd-tooltip--visible\",\n enterDone: \"rmd-tooltip--visible\",\n exit: \"rmd-tooltip--visible rmd-tooltip--exit\",\n exitActive: \"rmd-tooltip--exit-active\",\n};\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = {\n enter: 200,\n exit: 150,\n};\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_DELAY = 1000;\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_THRESHOLD = 0.75;\n\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_SPACING = \"1.5rem\";\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_DENSE_SPACING = \"0.875rem\";\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_MARGIN = 16;\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_POSITION = \"below\";\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport const TOOLTIP_SPACING_VAR = \"--rmd-tooltip-spacing\";\n"],"names":["DEFAULT_TOOLTIP_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","DEFAULT_TOOLTIP_TIMEOUT","DEFAULT_TOOLTIP_DELAY","DEFAULT_TOOLTIP_THRESHOLD","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","TOOLTIP_SPACING_VAR"],"mappings":"AAKA,2BAA2B,GAC3B,OAAO,MAAMA,6BAAgE;IAC3EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMC,0BAAuD;IAClEL,OAAO;IACPG,MAAM;AACR,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMG,wBAAwB,KAAK;AAC1C,2BAA2B,GAC3B,OAAO,MAAMC,4BAA4B,KAAK;AAE9C,2BAA2B,GAC3B,OAAO,MAAMC,0BAA0B,SAAS;AAChD,2BAA2B,GAC3B,OAAO,MAAMC,gCAAgC,WAAW;AACxD,2BAA2B,GAC3B,OAAO,MAAMC,yBAAyB,GAAG;AACzC,2BAA2B,GAC3B,OAAO,MAAMC,2BAA2B,QAAQ;AAEhD;;;CAGC,GACD,OAAO,MAAMC,sBAAsB,wBAAwB"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/constants.ts"],"sourcesContent":["import type {\n CSSTransitionClassNames,\n TransitionTimeout,\n} from \"../transition/types.js\";\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n appear: \"rmd-tooltip--enter\",\n appearActive: \"rmd-tooltip--visible\",\n enter: \"rmd-tooltip--enter\",\n enterActive: \"rmd-tooltip--visible\",\n enterDone: \"rmd-tooltip--visible\",\n exit: \"rmd-tooltip--visible rmd-tooltip--exit\",\n exitActive: \"rmd-tooltip--exit-active\",\n};\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = {\n enter: 200,\n exit: 150,\n};\n\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_DELAY = 1000;\n/** @remarks \\@since 2.0.0 */\nexport const DEFAULT_TOOLTIP_THRESHOLD = 0.75;\n\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_SPACING = \"1.5rem\";\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_DENSE_SPACING = \"0.875rem\";\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_MARGIN = 16;\n/** @remarks \\@since 2.8.0 */\nexport const DEFAULT_TOOLTIP_POSITION = \"below\";\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport const TOOLTIP_SPACING_VAR = \"--rmd-tooltip-spacing\";\n"],"names":["DEFAULT_TOOLTIP_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","DEFAULT_TOOLTIP_TIMEOUT","DEFAULT_TOOLTIP_DELAY","DEFAULT_TOOLTIP_THRESHOLD","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","TOOLTIP_SPACING_VAR"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAKA,2BAA2B,GAC3B,OAAO,MAAMA,6BAAgE;IAC3EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMC,0BAAuD;IAClEL,OAAO;IACPG,MAAM;AACR,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMG,wBAAwB,KAAK;AAC1C,2BAA2B,GAC3B,OAAO,MAAMC,4BAA4B,KAAK;AAE9C,2BAA2B,GAC3B,OAAO,MAAMC,0BAA0B,SAAS;AAChD,2BAA2B,GAC3B,OAAO,MAAMC,gCAAgC,WAAW;AACxD,2BAA2B,GAC3B,OAAO,MAAMC,yBAAyB,GAAG;AACzC,2BAA2B,GAC3B,OAAO,MAAMC,2BAA2B,QAAQ;AAEhD;;;CAGC,GACD,OAAO,MAAMC,sBAAsB,wBAAwB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/tooltipStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextOverflow } from \"../cssUtils.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltipClassNameOptions {\n className?: string;\n dense?: boolean;\n position: SimplePosition;\n textOverflow?: TextOverflow;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n const { dense, position, className, textOverflow } = options;\n\n return cnb(\n styles({\n dense,\n [position]: true,\n }),\n cssUtils({ textOverflow }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAA2B,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAErD,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/tooltipStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextOverflow } from \"../cssUtils.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltipClassNameOptions {\n className?: string;\n dense?: boolean;\n position: SimplePosition;\n textOverflow?: TextOverflow;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n const { dense, position, className, textOverflow } = options;\n\n return cnb(\n styles({\n dense,\n [position]: true,\n }),\n cssUtils({ textOverflow }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAA2B,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAErD,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n CSSProperties,\n FocusEvent,\n MouseEvent,\n MutableRefObject,\n Ref,\n RefObject,\n TouchEvent,\n} from \"react\";\nimport { useCallback, useEffect, useId, useRef } from \"react\";\nimport {\n useHoverMode,\n type ControlledHoverModeImplementation,\n} from \"../hoverMode/useHoverMode.js\";\nimport type { UserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport type { FixedPositioningTransitionCallbacks } from \"../positioning/useFixedPositioning.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport type { UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n DEFAULT_TOOLTIP_DENSE_SPACING,\n DEFAULT_TOOLTIP_MARGIN,\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_SPACING,\n DEFAULT_TOOLTIP_THRESHOLD,\n TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport type { TooltipPositionHookOptions } from \"./useTooltipPosition.js\";\nimport { useTooltipPosition } from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tooltip-background-color\"?: string;\n \"--rmd-tooltip-color\"?: string;\n \"--rmd-tooltip-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @remarks \\@since 2.8.0 */\nexport interface TooltipPositioningOptions {\n style?: CSSProperties;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n * @see {@link DEFAULT_TOOLTIP_MARGIN}\n */\n vwMargin?: number;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n * @see {@link DEFAULT_TOOLTIP_MARGIN}\n */\n vhMargin?: number;\n\n /**\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_SPACING`\n * @see {@link DEFAULT_TOOLTIP_SPACING}\n */\n spacing?: number | string;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`\n * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}\n */\n denseSpacing?: number | string;\n\n /**\n * @defaultValue `false`\n */\n disableSwapping?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableAutoSpacing?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n E extends HTMLElement = HTMLButtonElement,\n> {\n onBlur?(event: FocusEvent<E>): void;\n onFocus?(event: FocusEvent<E>): void;\n onMouseEnter?(event: MouseEvent<E>): void;\n onMouseLeave?(event: MouseEvent<E>): void;\n onTouchStart?(event: TouchEvent<E>): void;\n onTouchEnd?(event: TouchEvent<E>): void;\n onContextMenu?(event: MouseEvent<E>): void;\n}\n\n/** @remarks \\@since 2.8.0 */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n extends Required<TooltippedElementEventHandlers<E>> {\n \"aria-describedby\": string | undefined;\n id: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n TooltippedElementEventHandlers<TooltippedElement>,\n TooltipPositioningOptions,\n TooltipPositionHookOptions {\n /**\n * @defaultValue `\"tooltip-\" + useId()`\n */\n id?: string;\n\n /**\n * An optional override for the `aria-describedby`\n */\n describedBy?: string;\n\n /**\n * Any styles to be merged with the fixed positioning styles for the tooltip.\n */\n style?: CSSProperties;\n\n /**\n * Boolean if the event handlers should no longer attempt to show a tooltip. This\n * should be set to `true` when your component might not have a tooltip associated\n * with it.\n *\n * @example\n * Real World Example\n * ```tsx\n * import { Button, ButtonProps, Tooltip, useTooltip } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * export interface TooltippedButtonProps extends ButtonProps {\n * tooltip?: ReactNode;\n * }\n *\n * export function TooltippedButton({\n * id,\n * tooltip,\n * children,\n * onBlur,\n * onFocus,\n * onMouseEnter,\n * onMouseLeave,\n * onTouchStart,\n * onTouchEnd,\n * onContextMenu,\n * ...props\n * }: TooltippedButtonProps): ReactElement {\n * const { elementProps, tooltipProps } = useTooltip({\n * id,\n * disabled: !tooltip,\n * onBlur,\n * onFocus,\n * onMouseEnter,\n * onMouseLeave,\n * onTouchStart,\n * onTouchEnd,\n * onContextMenu,\n * });\n *\n * return (\n * <>\n * <Button {...props} {...elementProps}>\n * {children}\n * </Button>\n * <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n * </>\n * );\n * }\n * ```\n *\n * @defaultValue `false`\n * @remarks \\@since 5.1.0\n */\n disabled?: boolean;\n\n /**\n * The amount of time (in ms) to hover an element before the tooltip becomes\n * visible.\n *\n * The default value is really the current hover timeout from the\n * `TooltipHoverModeProvider`.\n *\n * @defaultValue `DEFAULT_TOOLTIP_DELAY`\n */\n hoverTimeout?: number;\n\n /**\n * The amount of time to wait before triggering the exit animation for the\n * tooltip.\n *\n * The default value is really the current leaveTimeout timeout from the\n * `TooltipHoverModeProvider`.\n *\n * @defaultValue `0`\n */\n leaveTimeout?: number;\n\n /**\n * Set this to `true` to only allow the tooltip to become visible when the\n * `event .currentTarget` or `overflowRef` has text overflow.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n overflowOnly?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n extends Required<FixedPositioningTransitionCallbacks> {\n id: string;\n ref: Ref<E>;\n dense: boolean;\n style: CSSProperties;\n visible: boolean;\n position: SimplePosition;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n visible: boolean;\n setVisible: UseStateSetter<boolean>;\n animatedOnce: boolean;\n initiatedBy: MutableRefObject<UserInteractionMode | null>;\n elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n /**\n * This is a wrapper around the {@link setVisible} behavior that will also\n * clear any pending timeouts.\n */\n hideTooltip(): void;\n\n /**\n * @remarks \\@since 6.0.0\n */\n overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\n *\n * function Example() {\n * const { elementProps, tooltipProps } = useTooltip();\n *\n * return (\n * <>\n * <Button {...elementProps}>Button</Button>\n * <Tooltip {...tooltipProps}>\n * Tooltip Content\n * </Tooltip>\n * </>\n * );\n * }\n * ```\n *\n * @example\n * Overflow-only Tooltips\n * ```tsx\n * import {\n * cssUtils,\n * Link,\n * Tooltip,\n * useTooltip,\n * type LinkProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n * const { children, ...remaining } = props;\n *\n * // using the `overflowRef` is optional and will default to the\n * // `event.currentTarget` when `null`\n * const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n * // just to pass any event handlers\n * ...remaining,\n * overflowOnly: true,\n * });\n *\n * return (\n * <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n * <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n * {children}\n * </span>\n * <Tooltip {...tooltipProps}>\n * {children}\n * </Tooltip>\n * </Link>\n * );\n * }\n *\n * function Example(): ReactElement {\n * return (\n * <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n * <NavigationLink href=\"/\">Home</NavigationLink>\n * <NavigationLink href=\"/some-path\">\n * Super long text that will be truncated with ellipsis and\n * have a tooltip appear\n * </NavigationLink>\n * </div>\n * );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n const {\n id: propId,\n style: propStyle,\n disabled = false,\n describedBy,\n dense = false,\n hoverTimeout,\n leaveTimeout,\n vwMargin = DEFAULT_TOOLTIP_MARGIN,\n vhMargin = DEFAULT_TOOLTIP_MARGIN,\n spacing = DEFAULT_TOOLTIP_SPACING,\n denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n disableSwapping,\n disableAutoSpacing,\n position: determinedPosition,\n defaultPosition = DEFAULT_TOOLTIP_POSITION,\n threshold = DEFAULT_TOOLTIP_THRESHOLD,\n onBlur = noop,\n onFocus = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n onTouchStart = noop,\n onTouchEnd = noop,\n onContextMenu = noop,\n onEnter = noop,\n onEntering,\n onEntered = noop,\n onExited,\n overflowOnly,\n } = options;\n\n const fallbackId = useId();\n const id = propId || fallbackId;\n const tooltipId = `${id}-tooltip`;\n const {\n animatedOnceRef,\n hoverTimeoutRef,\n leaveTimeoutRef,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n clearDisableTimer,\n } = useTooltipHoverMode();\n const {\n visible,\n setVisible,\n startShowFlow,\n startHideFlow,\n clearVisibilityTimeout,\n } = useHoverMode({\n hoverTimeout,\n hoverTimeoutRef,\n leaveTimeout,\n leaveTimeoutRef,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n clearDisableTimer,\n });\n const [position, updatePosition] = useTooltipPosition({\n position: determinedPosition,\n defaultPosition,\n threshold,\n });\n\n const mode = useUserInteractionMode();\n const elementRef = useRef<HTMLElement | null>(null);\n const tooltipRef = useRef<TooltipElement>(null);\n const overflowRef = useRef<HTMLElement>(null);\n const initiatedBy = useRef<UserInteractionMode | null>(null);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef: tooltipRef,\n style: propStyle,\n fixedTo: elementRef,\n anchor: getAnchor(position),\n disableSwapping: disableSwapping ?? !!determinedPosition,\n getFixedPositionOptions() {\n let tooltipSpacing = dense ? denseSpacing : spacing;\n const tooltip = tooltipRef.current;\n if (!disableAutoSpacing && tooltip) {\n tooltipSpacing =\n window\n .getComputedStyle(tooltip)\n .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n }\n\n const currentSpacing = parseCssLengthUnit({\n value: tooltipSpacing,\n });\n const horizontal = position === \"left\" || position === \"right\";\n\n return {\n vwMargin,\n vhMargin,\n xMargin: horizontal ? currentSpacing : undefined,\n yMargin: horizontal ? undefined : currentSpacing,\n };\n },\n onEnter(appearing) {\n onEnter(appearing);\n\n // This allows you to inspect the tooltip styles through the element\n // inspector without first hovering or focusing the tooltipped element\n // beforehand by setting the `HoverMode` hook to `true`\n if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n elementRef.current = document.getElementById(id);\n }\n },\n onEntering,\n onEntered(appearing) {\n onEntered(appearing);\n\n animatedOnceRef.current = true;\n },\n onExited,\n });\n\n const hideTooltip = useCallback(() => {\n initiatedBy.current = null;\n disableHoverMode();\n clearVisibilityTimeout();\n setVisible(false);\n }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n hideTooltip();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n window.addEventListener(\"scroll\", hideTooltip, true);\n window.addEventListener(\"touchend\", hideTooltip, true);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"scroll\", hideTooltip, true);\n window.removeEventListener(\"touchend\", hideTooltip, true);\n };\n }, [hideTooltip, visible]);\n\n const refocusFrame = useRef(0);\n const pageInactive = useRef(false);\n usePageInactive({\n disabled,\n onDisabledCleanup: hideTooltip,\n onChange(active) {\n if (active) {\n refocusFrame.current = window.requestAnimationFrame(() => {\n pageInactive.current = false;\n });\n return;\n }\n\n pageInactive.current = true;\n hideTooltip();\n },\n });\n\n const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n if (!overflowOnly) {\n return false;\n }\n\n const element = overflowRef.current || currentTarget;\n return !element || element.offsetWidth >= element.scrollWidth;\n };\n\n return {\n visible,\n setVisible,\n hideTooltip,\n animatedOnce: animatedOnceRef.current,\n initiatedBy,\n overflowRef,\n startShowFlow,\n startHideFlow,\n clearVisibilityTimeout,\n tooltipProps: {\n id: tooltipId,\n ref,\n dense,\n style,\n visible,\n position,\n ...callbacks,\n },\n elementProps: {\n \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n id,\n onMouseEnter(event) {\n onMouseEnter(event);\n if (\n disabled ||\n mode === \"touch\" ||\n initiatedBy.current !== null ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n initiatedBy.current = \"mouse\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onMouseLeave(event) {\n onMouseLeave(event);\n if (disabled || initiatedBy.current !== \"mouse\") {\n return;\n }\n\n startHideFlow();\n initiatedBy.current = null;\n },\n onBlur(event) {\n onBlur(event);\n if (disabled) {\n return;\n }\n\n initiatedBy.current = null;\n startHideFlow();\n },\n onFocus(event) {\n onFocus(event);\n // skip the focus events when the browser is re-focused if the user\n // pressed alt-tab, minimized the browser, etc\n if (\n disabled ||\n mode !== \"keyboard\" ||\n initiatedBy.current !== null ||\n pageInactive.current ||\n isNotOverflown(event.currentTarget)\n ) {\n pageInactive.current = false;\n return;\n }\n\n initiatedBy.current = \"keyboard\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onTouchStart(event) {\n onTouchStart(event);\n if (\n disabled ||\n initiatedBy.current !== null ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n initiatedBy.current = \"touch\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onTouchEnd(event) {\n onTouchEnd(event);\n if (disabled) {\n return;\n }\n\n initiatedBy.current = null;\n startHideFlow();\n },\n onContextMenu(event) {\n onContextMenu(event);\n if (\n disabled ||\n initiatedBy.current !== \"touch\" ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n event.preventDefault();\n const selection = window.getSelection();\n const node = selection?.anchorNode?.parentElement;\n if (node && event.currentTarget.contains(node)) {\n selection.empty();\n }\n },\n },\n };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n CSSProperties,\n FocusEvent,\n MouseEvent,\n MutableRefObject,\n Ref,\n RefObject,\n TouchEvent,\n} from \"react\";\nimport { useCallback, useEffect, useId, useRef } from \"react\";\nimport {\n useHoverMode,\n type ControlledHoverModeImplementation,\n} from \"../hoverMode/useHoverMode.js\";\nimport type { UserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport type { FixedPositioningTransitionCallbacks } from \"../positioning/useFixedPositioning.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport type { UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n DEFAULT_TOOLTIP_DENSE_SPACING,\n DEFAULT_TOOLTIP_MARGIN,\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_SPACING,\n DEFAULT_TOOLTIP_THRESHOLD,\n TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport type { TooltipPositionHookOptions } from \"./useTooltipPosition.js\";\nimport { useTooltipPosition } from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tooltip-background-color\"?: string;\n \"--rmd-tooltip-color\"?: string;\n \"--rmd-tooltip-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @remarks \\@since 2.8.0 */\nexport interface TooltipPositioningOptions {\n style?: CSSProperties;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n * @see {@link DEFAULT_TOOLTIP_MARGIN}\n */\n vwMargin?: number;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n * @see {@link DEFAULT_TOOLTIP_MARGIN}\n */\n vhMargin?: number;\n\n /**\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_SPACING`\n * @see {@link DEFAULT_TOOLTIP_SPACING}\n */\n spacing?: number | string;\n\n /**\n * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`\n * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}\n */\n denseSpacing?: number | string;\n\n /**\n * @defaultValue `false`\n */\n disableSwapping?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableAutoSpacing?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n E extends HTMLElement = HTMLButtonElement,\n> {\n onBlur?(event: FocusEvent<E>): void;\n onFocus?(event: FocusEvent<E>): void;\n onMouseEnter?(event: MouseEvent<E>): void;\n onMouseLeave?(event: MouseEvent<E>): void;\n onTouchStart?(event: TouchEvent<E>): void;\n onTouchEnd?(event: TouchEvent<E>): void;\n onContextMenu?(event: MouseEvent<E>): void;\n}\n\n/** @remarks \\@since 2.8.0 */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n extends Required<TooltippedElementEventHandlers<E>> {\n \"aria-describedby\": string | undefined;\n id: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n TooltippedElementEventHandlers<TooltippedElement>,\n TooltipPositioningOptions,\n TooltipPositionHookOptions {\n /**\n * @defaultValue `\"tooltip-\" + useId()`\n */\n id?: string;\n\n /**\n * An optional override for the `aria-describedby`\n */\n describedBy?: string;\n\n /**\n * Any styles to be merged with the fixed positioning styles for the tooltip.\n */\n style?: CSSProperties;\n\n /**\n * Boolean if the event handlers should no longer attempt to show a tooltip. This\n * should be set to `true` when your component might not have a tooltip associated\n * with it.\n *\n * @example\n * Real World Example\n * ```tsx\n * import { Button, ButtonProps, Tooltip, useTooltip } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * export interface TooltippedButtonProps extends ButtonProps {\n * tooltip?: ReactNode;\n * }\n *\n * export function TooltippedButton({\n * id,\n * tooltip,\n * children,\n * onBlur,\n * onFocus,\n * onMouseEnter,\n * onMouseLeave,\n * onTouchStart,\n * onTouchEnd,\n * onContextMenu,\n * ...props\n * }: TooltippedButtonProps): ReactElement {\n * const { elementProps, tooltipProps } = useTooltip({\n * id,\n * disabled: !tooltip,\n * onBlur,\n * onFocus,\n * onMouseEnter,\n * onMouseLeave,\n * onTouchStart,\n * onTouchEnd,\n * onContextMenu,\n * });\n *\n * return (\n * <>\n * <Button {...props} {...elementProps}>\n * {children}\n * </Button>\n * <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n * </>\n * );\n * }\n * ```\n *\n * @defaultValue `false`\n * @remarks \\@since 5.1.0\n */\n disabled?: boolean;\n\n /**\n * The amount of time (in ms) to hover an element before the tooltip becomes\n * visible.\n *\n * The default value is really the current hover timeout from the\n * `TooltipHoverModeProvider`.\n *\n * @defaultValue `DEFAULT_TOOLTIP_DELAY`\n */\n hoverTimeout?: number;\n\n /**\n * The amount of time to wait before triggering the exit animation for the\n * tooltip.\n *\n * The default value is really the current leaveTimeout timeout from the\n * `TooltipHoverModeProvider`.\n *\n * @defaultValue `0`\n */\n leaveTimeout?: number;\n\n /**\n * Set this to `true` to only allow the tooltip to become visible when the\n * `event .currentTarget` or `overflowRef` has text overflow.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n overflowOnly?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n extends Required<FixedPositioningTransitionCallbacks> {\n id: string;\n ref: Ref<E>;\n dense: boolean;\n style: CSSProperties;\n visible: boolean;\n position: SimplePosition;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n visible: boolean;\n setVisible: UseStateSetter<boolean>;\n animatedOnce: boolean;\n initiatedBy: MutableRefObject<UserInteractionMode | null>;\n elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n /**\n * This is a wrapper around the {@link setVisible} behavior that will also\n * clear any pending timeouts.\n */\n hideTooltip(): void;\n\n /**\n * @remarks \\@since 6.0.0\n */\n overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\n *\n * function Example() {\n * const { elementProps, tooltipProps } = useTooltip();\n *\n * return (\n * <>\n * <Button {...elementProps}>Button</Button>\n * <Tooltip {...tooltipProps}>\n * Tooltip Content\n * </Tooltip>\n * </>\n * );\n * }\n * ```\n *\n * @example\n * Overflow-only Tooltips\n * ```tsx\n * import {\n * cssUtils,\n * Link,\n * Tooltip,\n * useTooltip,\n * type LinkProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n * const { children, ...remaining } = props;\n *\n * // using the `overflowRef` is optional and will default to the\n * // `event.currentTarget` when `null`\n * const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n * // just to pass any event handlers\n * ...remaining,\n * overflowOnly: true,\n * });\n *\n * return (\n * <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n * <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n * {children}\n * </span>\n * <Tooltip {...tooltipProps}>\n * {children}\n * </Tooltip>\n * </Link>\n * );\n * }\n *\n * function Example(): ReactElement {\n * return (\n * <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n * <NavigationLink href=\"/\">Home</NavigationLink>\n * <NavigationLink href=\"/some-path\">\n * Super long text that will be truncated with ellipsis and\n * have a tooltip appear\n * </NavigationLink>\n * </div>\n * );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n TooltippedElement extends HTMLElement = HTMLButtonElement,\n TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n const {\n id: propId,\n style: propStyle,\n disabled = false,\n describedBy,\n dense = false,\n hoverTimeout,\n leaveTimeout,\n vwMargin = DEFAULT_TOOLTIP_MARGIN,\n vhMargin = DEFAULT_TOOLTIP_MARGIN,\n spacing = DEFAULT_TOOLTIP_SPACING,\n denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n disableSwapping,\n disableAutoSpacing,\n position: determinedPosition,\n defaultPosition = DEFAULT_TOOLTIP_POSITION,\n threshold = DEFAULT_TOOLTIP_THRESHOLD,\n onBlur = noop,\n onFocus = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n onTouchStart = noop,\n onTouchEnd = noop,\n onContextMenu = noop,\n onEnter = noop,\n onEntering,\n onEntered = noop,\n onExited,\n overflowOnly,\n } = options;\n\n const fallbackId = useId();\n const id = propId || fallbackId;\n const tooltipId = `${id}-tooltip`;\n const {\n animatedOnceRef,\n hoverTimeoutRef,\n leaveTimeoutRef,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n clearDisableTimer,\n } = useTooltipHoverMode();\n const {\n visible,\n setVisible,\n startShowFlow,\n startHideFlow,\n clearVisibilityTimeout,\n } = useHoverMode({\n hoverTimeout,\n hoverTimeoutRef,\n leaveTimeout,\n leaveTimeoutRef,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n clearDisableTimer,\n });\n const [position, updatePosition] = useTooltipPosition({\n position: determinedPosition,\n defaultPosition,\n threshold,\n });\n\n const mode = useUserInteractionMode();\n const elementRef = useRef<HTMLElement | null>(null);\n const tooltipRef = useRef<TooltipElement>(null);\n const overflowRef = useRef<HTMLElement>(null);\n const initiatedBy = useRef<UserInteractionMode | null>(null);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef: tooltipRef,\n style: propStyle,\n fixedTo: elementRef,\n anchor: getAnchor(position),\n disableSwapping: disableSwapping ?? !!determinedPosition,\n getFixedPositionOptions() {\n let tooltipSpacing = dense ? denseSpacing : spacing;\n const tooltip = tooltipRef.current;\n if (!disableAutoSpacing && tooltip) {\n tooltipSpacing =\n window\n .getComputedStyle(tooltip)\n .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n }\n\n const currentSpacing = parseCssLengthUnit({\n value: tooltipSpacing,\n });\n const horizontal = position === \"left\" || position === \"right\";\n\n return {\n vwMargin,\n vhMargin,\n xMargin: horizontal ? currentSpacing : undefined,\n yMargin: horizontal ? undefined : currentSpacing,\n };\n },\n onEnter(appearing) {\n onEnter(appearing);\n\n // This allows you to inspect the tooltip styles through the element\n // inspector without first hovering or focusing the tooltipped element\n // beforehand by setting the `HoverMode` hook to `true`\n if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n elementRef.current = document.getElementById(id);\n }\n },\n onEntering,\n onEntered(appearing) {\n onEntered(appearing);\n\n animatedOnceRef.current = true;\n },\n onExited,\n });\n\n const hideTooltip = useCallback(() => {\n initiatedBy.current = null;\n disableHoverMode();\n clearVisibilityTimeout();\n setVisible(false);\n }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n hideTooltip();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n window.addEventListener(\"scroll\", hideTooltip, true);\n window.addEventListener(\"touchend\", hideTooltip, true);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"scroll\", hideTooltip, true);\n window.removeEventListener(\"touchend\", hideTooltip, true);\n };\n }, [hideTooltip, visible]);\n\n const refocusFrame = useRef(0);\n const pageInactive = useRef(false);\n usePageInactive({\n disabled,\n onDisabledCleanup: hideTooltip,\n onChange(active) {\n if (active) {\n refocusFrame.current = window.requestAnimationFrame(() => {\n pageInactive.current = false;\n });\n return;\n }\n\n pageInactive.current = true;\n hideTooltip();\n },\n });\n\n const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n if (!overflowOnly) {\n return false;\n }\n\n const element = overflowRef.current || currentTarget;\n return !element || element.offsetWidth >= element.scrollWidth;\n };\n\n return {\n visible,\n setVisible,\n hideTooltip,\n animatedOnce: animatedOnceRef.current,\n initiatedBy,\n overflowRef,\n startShowFlow,\n startHideFlow,\n clearVisibilityTimeout,\n tooltipProps: {\n id: tooltipId,\n ref,\n dense,\n style,\n visible,\n position,\n ...callbacks,\n },\n elementProps: {\n \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n id,\n onMouseEnter(event) {\n onMouseEnter(event);\n if (\n disabled ||\n mode === \"touch\" ||\n initiatedBy.current !== null ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n initiatedBy.current = \"mouse\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onMouseLeave(event) {\n onMouseLeave(event);\n if (disabled || initiatedBy.current !== \"mouse\") {\n return;\n }\n\n startHideFlow();\n initiatedBy.current = null;\n },\n onBlur(event) {\n onBlur(event);\n if (disabled) {\n return;\n }\n\n initiatedBy.current = null;\n startHideFlow();\n },\n onFocus(event) {\n onFocus(event);\n // skip the focus events when the browser is re-focused if the user\n // pressed alt-tab, minimized the browser, etc\n if (\n disabled ||\n mode !== \"keyboard\" ||\n initiatedBy.current !== null ||\n pageInactive.current ||\n isNotOverflown(event.currentTarget)\n ) {\n pageInactive.current = false;\n return;\n }\n\n initiatedBy.current = \"keyboard\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onTouchStart(event) {\n onTouchStart(event);\n if (\n disabled ||\n initiatedBy.current !== null ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n initiatedBy.current = \"touch\";\n elementRef.current = event.currentTarget;\n updatePosition(event.currentTarget);\n startShowFlow(id);\n },\n onTouchEnd(event) {\n onTouchEnd(event);\n if (disabled) {\n return;\n }\n\n initiatedBy.current = null;\n startHideFlow();\n },\n onContextMenu(event) {\n onContextMenu(event);\n if (\n disabled ||\n initiatedBy.current !== \"touch\" ||\n isNotOverflown(event.currentTarget)\n ) {\n return;\n }\n\n event.preventDefault();\n const selection = window.getSelection();\n const node = selection?.anchorNode?.parentElement;\n if (node && event.currentTarget.contains(node)) {\n selection.empty();\n }\n },\n },\n };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAUhC,SAASC,WAAW,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,QAAQ,QAAQ;AAC9D,SACEC,YAAY,QAEP,+BAA+B;AAEtC,SAASC,sBAAsB,QAAQ,gDAAgD;AAGvF,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SACEC,6BAA6B,EAC7BC,sBAAsB,EACtBC,wBAAwB,EACxBC,uBAAuB,EACvBC,yBAAyB,EACzBC,mBAAmB,QACd,iBAAiB;AAExB,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,aAAa;AAUvC,MAAMC,OAAO;AACX,aAAa;AACf;AA2OA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFC,GACD,OAAO,SAASC,WAIdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,WAAW,EACXC,QAAQ,KAAK,EACbC,YAAY,EACZC,YAAY,EACZC,WAAWnB,sBAAsB,EACjCoB,WAAWpB,sBAAsB,EACjCqB,UAAUnB,uBAAuB,EACjCoB,eAAevB,6BAA6B,EAC5CwB,eAAe,EACfC,kBAAkB,EAClBC,UAAUC,kBAAkB,EAC5BC,kBAAkB1B,wBAAwB,EAC1C2B,YAAYzB,yBAAyB,EACrC0B,SAAStB,IAAI,EACbuB,UAAUvB,IAAI,EACdwB,eAAexB,IAAI,EACnByB,eAAezB,IAAI,EACnB0B,eAAe1B,IAAI,EACnB2B,aAAa3B,IAAI,EACjB4B,gBAAgB5B,IAAI,EACpB6B,UAAU7B,IAAI,EACd8B,UAAU,EACVC,YAAY/B,IAAI,EAChBgC,QAAQ,EACRC,YAAY,EACb,GAAG/B;IAEJ,MAAMgC,aAAalD;IACnB,MAAMmB,KAAKC,UAAU8B;IACrB,MAAMC,YAAY,CAAC,EAAEhC,GAAG,QAAQ,CAAC;IACjC,MAAM,EACJiC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EAClB,GAAGnD;IACJ,MAAM,EACJoD,OAAO,EACPC,UAAU,EACVC,aAAa,EACbC,aAAa,EACbC,sBAAsB,EACvB,GAAG7D,aAAa;QACfwB;QACA2B;QACA1B;QACA2B;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAM,CAACxB,UAAU8B,eAAe,GAAGlD,mBAAmB;QACpDoB,UAAUC;QACVC;QACAC;IACF;IAEA,MAAM4B,OAAO9D;IACb,MAAM+D,aAAajE,OAA2B;IAC9C,MAAMkE,aAAalE,OAAuB;IAC1C,MAAMmE,cAAcnE,OAAoB;IACxC,MAAMoE,cAAcpE,OAAmC;IACvD,MAAM,EAAEqE,GAAG,EAAEjD,KAAK,EAAEkD,SAAS,EAAE,GAAGnE,oBAAoB;QACpDoE,SAASL;QACT9C,OAAOC;QACPmD,SAASP;QACTQ,QAAQ3D,UAAUmB;QAClBF,iBAAiBA,mBAAmB,CAAC,CAACG;QACtCwC;YACE,IAAIC,iBAAiBnD,QAAQM,eAAeD;YAC5C,MAAM+C,UAAUV,WAAWW,OAAO;YAClC,IAAI,CAAC7C,sBAAsB4C,SAAS;gBAClCD,iBACEG,OACGC,gBAAgB,CAACH,SACjBI,gBAAgB,CAACpE,wBAAwBiB;YAChD;YAEA,MAAMoD,iBAAiB5E,mBAAmB;gBACxC6E,OAAOP;YACT;YACA,MAAMQ,aAAalD,aAAa,UAAUA,aAAa;YAEvD,OAAO;gBACLN;gBACAC;gBACAwD,SAASD,aAAaF,iBAAiBI;gBACvCC,SAASH,aAAaE,YAAYJ;YACpC;QACF;QACArC,SAAQ2C,SAAS;YACf3C,QAAQ2C;YAER,oEAAoE;YACpE,sEAAsE;YACtE,uDAAuD;YACvD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACzB,WAAWY,OAAO,EAAE;gBAChEZ,WAAWY,OAAO,GAAGc,SAASC,cAAc,CAAC1E;YAC/C;QACF;QACA2B;QACAC,WAAUyC,SAAS;YACjBzC,UAAUyC;YAEVpC,gBAAgB0B,OAAO,GAAG;QAC5B;QACA9B;IACF;IAEA,MAAM8C,cAAchG,YAAY;QAC9BuE,YAAYS,OAAO,GAAG;QACtBtB;QACAO;QACAH,WAAW;IACb,GAAG;QAACG;QAAwBP;QAAkBI;KAAW;IAEzD7D,UAAU;QACR,IAAI,CAAC4D,SAAS;YACZ;QACF;QAEA,MAAMoC,gBAAgB,CAACC;YACrB,IAAIA,MAAMC,GAAG,KAAK,UAAU;gBAC1BH;YACF;QACF;QAEAf,OAAOmB,gBAAgB,CAAC,WAAWH;QACnChB,OAAOmB,gBAAgB,CAAC,UAAUJ,aAAa;QAC/Cf,OAAOmB,gBAAgB,CAAC,YAAYJ,aAAa;QACjD,OAAO;YACLf,OAAOoB,mBAAmB,CAAC,WAAWJ;YACtChB,OAAOoB,mBAAmB,CAAC,UAAUL,aAAa;YAClDf,OAAOoB,mBAAmB,CAAC,YAAYL,aAAa;QACtD;IACF,GAAG;QAACA;QAAanC;KAAQ;IAEzB,MAAMyC,eAAenG,OAAO;IAC5B,MAAMoG,eAAepG,OAAO;IAC5BI,gBAAgB;QACdkB;QACA+E,mBAAmBR;QACnBS,UAASC,MAAM;YACb,IAAIA,QAAQ;gBACVJ,aAAatB,OAAO,GAAGC,OAAO0B,qBAAqB,CAAC;oBAClDJ,aAAavB,OAAO,GAAG;gBACzB;gBACA;YACF;YAEAuB,aAAavB,OAAO,GAAG;YACvBgB;QACF;IACF;IAEA,MAAMY,iBAAiB,CAACC;QACtB,IAAI,CAAC1D,cAAc;YACjB,OAAO;QACT;QAEA,MAAM2D,UAAUxC,YAAYU,OAAO,IAAI6B;QACvC,OAAO,CAACC,WAAWA,QAAQC,WAAW,IAAID,QAAQE,WAAW;IAC/D;IAEA,OAAO;QACLnD;QACAC;QACAkC;QACAiB,cAAc3D,gBAAgB0B,OAAO;QACrCT;QACAD;QACAP;QACAC;QACAC;QACAiD,cAAc;YACZ7F,IAAIgC;YACJmB;YACA7C;YACAJ;YACAsC;YACAzB;YACA,GAAGqC,SAAS;QACd;QACA0C,cAAc;YACZ,oBAAoBpH,IAAI8D,WAAWR,WAAW3B,gBAAgB8D;YAC9DnE;YACAqB,cAAawD,KAAK;gBAChBxD,aAAawD;gBACb,IACEzE,YACA0C,SAAS,WACTI,YAAYS,OAAO,KAAK,QACxB4B,eAAeV,MAAMW,aAAa,GAClC;oBACA;gBACF;gBAEAtC,YAAYS,OAAO,GAAG;gBACtBZ,WAAWY,OAAO,GAAGkB,MAAMW,aAAa;gBACxC3C,eAAegC,MAAMW,aAAa;gBAClC9C,cAAc1C;YAChB;YACAsB,cAAauD,KAAK;gBAChBvD,aAAauD;gBACb,IAAIzE,YAAY8C,YAAYS,OAAO,KAAK,SAAS;oBAC/C;gBACF;gBAEAhB;gBACAO,YAAYS,OAAO,GAAG;YACxB;YACAxC,QAAO0D,KAAK;gBACV1D,OAAO0D;gBACP,IAAIzE,UAAU;oBACZ;gBACF;gBAEA8C,YAAYS,OAAO,GAAG;gBACtBhB;YACF;YACAvB,SAAQyD,KAAK;gBACXzD,QAAQyD;gBACR,mEAAmE;gBACnE,8CAA8C;gBAC9C,IACEzE,YACA0C,SAAS,cACTI,YAAYS,OAAO,KAAK,QACxBuB,aAAavB,OAAO,IACpB4B,eAAeV,MAAMW,aAAa,GAClC;oBACAN,aAAavB,OAAO,GAAG;oBACvB;gBACF;gBAEAT,YAAYS,OAAO,GAAG;gBACtBZ,WAAWY,OAAO,GAAGkB,MAAMW,aAAa;gBACxC3C,eAAegC,MAAMW,aAAa;gBAClC9C,cAAc1C;YAChB;YACAuB,cAAasD,KAAK;gBAChBtD,aAAasD;gBACb,IACEzE,YACA8C,YAAYS,OAAO,KAAK,QACxB4B,eAAeV,MAAMW,aAAa,GAClC;oBACA;gBACF;gBAEAtC,YAAYS,OAAO,GAAG;gBACtBZ,WAAWY,OAAO,GAAGkB,MAAMW,aAAa;gBACxC3C,eAAegC,MAAMW,aAAa;gBAClC9C,cAAc1C;YAChB;YACAwB,YAAWqD,KAAK;gBACdrD,WAAWqD;gBACX,IAAIzE,UAAU;oBACZ;gBACF;gBAEA8C,YAAYS,OAAO,GAAG;gBACtBhB;YACF;YACAlB,eAAcoD,KAAK;gBACjBpD,cAAcoD;gBACd,IACEzE,YACA8C,YAAYS,OAAO,KAAK,WACxB4B,eAAeV,MAAMW,aAAa,GAClC;oBACA;gBACF;gBAEAX,MAAMkB,cAAc;gBACpB,MAAMC,YAAYpC,OAAOqC,YAAY;gBACrC,MAAMC,OAAOF,WAAWG,YAAYC;gBACpC,IAAIF,QAAQrB,MAAMW,aAAa,CAACa,QAAQ,CAACH,OAAO;oBAC9CF,UAAUM,KAAK;gBACjB;YACF;QACF;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n /**\n * An optional controlled position to use that will disable the functionality\n * to determine the \"best\" position to render the tooltip within the viewport.\n */\n position?: SimplePosition;\n\n /**\n * An optional position to use before the positioning calculation has\n * occurred. This is also used to determine if the position should be\n * horizontal vs vertical.\n *\n * Vertical - `\"below\"` or `\"above\"`\n * Horizontal - `\"left\"` or `\"right\"`\n *\n * @defaultValue `DEFAULT_TOOLTIP_POSITION`\n * @see {@link DEFAULT_TOOLTIP_POSITION}\n */\n defaultPosition?: SimplePosition;\n\n /**\n * This value should be between 0 and 1 and will be multiplied by either the\n * viewport height or viewport width to determine the best position to render\n * the tooltip based on available space within the viewport.\n *\n * You _probably_ won't ever really need to update this value.\n *\n * @defaultValue `DEFAULT_TOOLTIP_THRESHOLD`\n * @see {@link DEFAULT_TOOLTIP_THRESHOLD}\n */\n threshold?: number;\n}\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n SimplePosition,\n UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport function useTooltipPosition(\n options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n const {\n position: determinedPosition,\n threshold = DEFAULT_TOOLTIP_THRESHOLD,\n defaultPosition = DEFAULT_TOOLTIP_POSITION,\n } = options;\n\n const [position, setPosition] = useState(defaultPosition);\n const updatePosition = useCallback<UpdateTooltipPosition>(\n (container) => {\n setPosition(\n getPosition({\n container,\n threshold,\n defaultPosition,\n })\n );\n },\n [defaultPosition, threshold]\n );\n\n if (typeof determinedPosition !== \"undefined\") {\n return [determinedPosition, noop];\n }\n\n return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAqDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAI,OAAOD,uBAAuB,aAAa;QAC7C,OAAO;YAACA;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n DEFAULT_TOOLTIP_POSITION,\n DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n /**\n * An optional controlled position to use that will disable the functionality\n * to determine the \"best\" position to render the tooltip within the viewport.\n */\n position?: SimplePosition;\n\n /**\n * An optional position to use before the positioning calculation has\n * occurred. This is also used to determine if the position should be\n * horizontal vs vertical.\n *\n * Vertical - `\"below\"` or `\"above\"`\n * Horizontal - `\"left\"` or `\"right\"`\n *\n * @defaultValue `DEFAULT_TOOLTIP_POSITION`\n * @see {@link DEFAULT_TOOLTIP_POSITION}\n */\n defaultPosition?: SimplePosition;\n\n /**\n * This value should be between 0 and 1 and will be multiplied by either the\n * viewport height or viewport width to determine the best position to render\n * the tooltip based on available space within the viewport.\n *\n * You _probably_ won't ever really need to update this value.\n *\n * @defaultValue `DEFAULT_TOOLTIP_THRESHOLD`\n * @see {@link DEFAULT_TOOLTIP_THRESHOLD}\n */\n threshold?: number;\n}\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n SimplePosition,\n UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @remarks \\@since 2.8.0\n */\nexport function useTooltipPosition(\n options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n const {\n position: determinedPosition,\n threshold = DEFAULT_TOOLTIP_THRESHOLD,\n defaultPosition = DEFAULT_TOOLTIP_POSITION,\n } = options;\n\n const [position, setPosition] = useState(defaultPosition);\n const updatePosition = useCallback<UpdateTooltipPosition>(\n (container) => {\n setPosition(\n getPosition({\n container,\n threshold,\n defaultPosition,\n })\n );\n },\n [defaultPosition, threshold]\n );\n\n if (typeof determinedPosition !== \"undefined\") {\n return [determinedPosition, noop];\n }\n\n return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAqDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAI,OAAOD,uBAAuB,aAAa;QAC7C,OAAO;YAACA;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tooltip/utils.ts"],"sourcesContent":["import {\n ABOVE_CENTER_ANCHOR,\n BELOW_CENTER_ANCHOR,\n CENTER_LEFT_ANCHOR,\n CENTER_RIGHT_ANCHOR,\n} from \"../positioning/constants.js\";\nimport type { PositionAnchor, SimplePosition } from \"../positioning/types.js\";\n\n/** @internal */\nexport function getAnchor(position: SimplePosition): PositionAnchor {\n switch (position) {\n case \"above\":\n return ABOVE_CENTER_ANCHOR;\n case \"below\":\n return BELOW_CENTER_ANCHOR;\n case \"left\":\n return CENTER_LEFT_ANCHOR;\n case \"right\":\n return CENTER_RIGHT_ANCHOR;\n default:\n throw new Error(`Invalid tooltip position: \"${position}\"`);\n }\n}\n\n/** @internal */\nexport interface GetPositionOptions {\n container: HTMLElement;\n threshold: number;\n defaultPosition: SimplePosition;\n}\n\n/** @internal */\nexport function getPosition(options: GetPositionOptions): SimplePosition {\n const { container, defaultPosition, threshold } = options;\n\n const { top, left } = container.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n let nextPosition = defaultPosition;\n if (defaultPosition === \"above\" && top < vh - vh * threshold) {\n nextPosition = \"below\";\n } else if (defaultPosition === \"below\" && top > vh * threshold) {\n nextPosition = \"above\";\n } else if (defaultPosition === \"left\" && left < vw - vw * threshold) {\n nextPosition = \"right\";\n } else if (defaultPosition === \"right\" && left > vw * threshold) {\n nextPosition = \"left\";\n }\n\n return nextPosition;\n}\n"],"names":["ABOVE_CENTER_ANCHOR","BELOW_CENTER_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_RIGHT_ANCHOR","getAnchor","position","Error","getPosition","options","container","defaultPosition","threshold","top","left","getBoundingClientRect","vh","window","innerHeight","vw","innerWidth","nextPosition"],"mappings":"AAAA,SACEA,mBAAmB,EACnBC,mBAAmB,EACnBC,kBAAkB,EAClBC,mBAAmB,QACd,8BAA8B;AAGrC,cAAc,GACd,OAAO,SAASC,UAAUC,QAAwB;IAChD,OAAQA;QACN,KAAK;YACH,OAAOL;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT;YACE,MAAM,IAAIG,MAAM,CAAC,2BAA2B,EAAED,SAAS,CAAC,CAAC;IAC7D;AACF;AASA,cAAc,GACd,OAAO,SAASE,YAAYC,OAA2B;IACrD,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGH;IAElD,MAAM,EAAEI,GAAG,EAAEC,IAAI,EAAE,GAAGJ,UAAUK,qBAAqB;IACrD,MAAMC,KAAKC,OAAOC,WAAW;IAC7B,MAAMC,KAAKF,OAAOG,UAAU;IAC5B,IAAIC,eAAeV;IACnB,IAAIA,oBAAoB,WAAWE,MAAMG,KAAKA,KAAKJ,WAAW;QAC5DS,eAAe;IACjB,OAAO,IAAIV,oBAAoB,WAAWE,MAAMG,KAAKJ,WAAW;QAC9DS,eAAe;IACjB,OAAO,IAAIV,oBAAoB,UAAUG,OAAOK,KAAKA,KAAKP,WAAW;QACnES,eAAe;IACjB,OAAO,IAAIV,oBAAoB,WAAWG,OAAOK,KAAKP,WAAW;QAC/DS,eAAe;IACjB;IAEA,OAAOA;AACT"}
|
|
1
|
+
{"version":3,"sources":["../../src/tooltip/utils.ts"],"sourcesContent":["import {\n ABOVE_CENTER_ANCHOR,\n BELOW_CENTER_ANCHOR,\n CENTER_LEFT_ANCHOR,\n CENTER_RIGHT_ANCHOR,\n} from \"../positioning/constants.js\";\nimport type { PositionAnchor, SimplePosition } from \"../positioning/types.js\";\n\n/** @internal */\nexport function getAnchor(position: SimplePosition): PositionAnchor {\n switch (position) {\n case \"above\":\n return ABOVE_CENTER_ANCHOR;\n case \"below\":\n return BELOW_CENTER_ANCHOR;\n case \"left\":\n return CENTER_LEFT_ANCHOR;\n case \"right\":\n return CENTER_RIGHT_ANCHOR;\n default:\n throw new Error(`Invalid tooltip position: \"${position}\"`);\n }\n}\n\n/** @internal */\nexport interface GetPositionOptions {\n container: HTMLElement;\n threshold: number;\n defaultPosition: SimplePosition;\n}\n\n/** @internal */\nexport function getPosition(options: GetPositionOptions): SimplePosition {\n const { container, defaultPosition, threshold } = options;\n\n const { top, left } = container.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n let nextPosition = defaultPosition;\n if (defaultPosition === \"above\" && top < vh - vh * threshold) {\n nextPosition = \"below\";\n } else if (defaultPosition === \"below\" && top > vh * threshold) {\n nextPosition = \"above\";\n } else if (defaultPosition === \"left\" && left < vw - vw * threshold) {\n nextPosition = \"right\";\n } else if (defaultPosition === \"right\" && left > vw * threshold) {\n nextPosition = \"left\";\n }\n\n return nextPosition;\n}\n"],"names":["ABOVE_CENTER_ANCHOR","BELOW_CENTER_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_RIGHT_ANCHOR","getAnchor","position","Error","getPosition","options","container","defaultPosition","threshold","top","left","getBoundingClientRect","vh","window","innerHeight","vw","innerWidth","nextPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,mBAAmB,EACnBC,mBAAmB,EACnBC,kBAAkB,EAClBC,mBAAmB,QACd,8BAA8B;AAGrC,cAAc,GACd,OAAO,SAASC,UAAUC,QAAwB;IAChD,OAAQA;QACN,KAAK;YACH,OAAOL;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT;YACE,MAAM,IAAIG,MAAM,CAAC,2BAA2B,EAAED,SAAS,CAAC,CAAC;IAC7D;AACF;AASA,cAAc,GACd,OAAO,SAASE,YAAYC,OAA2B;IACrD,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGH;IAElD,MAAM,EAAEI,GAAG,EAAEC,IAAI,EAAE,GAAGJ,UAAUK,qBAAqB;IACrD,MAAMC,KAAKC,OAAOC,WAAW;IAC7B,MAAMC,KAAKF,OAAOG,UAAU;IAC5B,IAAIC,eAAeV;IACnB,IAAIA,oBAAoB,WAAWE,MAAMG,KAAKA,KAAKJ,WAAW;QAC5DS,eAAe;IACjB,OAAO,IAAIV,oBAAoB,WAAWE,MAAMG,KAAKJ,WAAW;QAC9DS,eAAe;IACjB,OAAO,IAAIV,oBAAoB,UAAUG,OAAOK,KAAKA,KAAKP,WAAW;QACnES,eAAe;IACjB,OAAO,IAAIV,oBAAoB,WAAWG,OAAOK,KAAKP,WAAW;QAC/DS,eAAe;IACjB;IAEA,OAAOA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport {\n type CSSTransitionComponentImplementation,\n type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionProps<E extends HTMLElement>\n extends CSSTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, CSSTransition } from \"@react-md/core\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * // opacity: 0;\n * // transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * // opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * // opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * // opacity: 0;\n * // transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n * const [transitionIn, setTransitionIn] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * <CSSTransition\n * timeout={300}\n * className=\"opacity\"\n * temporary\n * transitionIn={transitionIn}\n * >\n * <div>\n * This is some content that will animate!\n * </div>\n * </CSSTransition>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n props: CSSTransitionProps<E>\n): ReactElement | null {\n const { children, className, ...options } = props;\n const child = Children.only(children);\n const { elementProps, rendered } = useCSSTransition({\n ...options,\n className: cnb(child.props.className, className),\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAKlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAWzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport {\n type CSSTransitionComponentImplementation,\n type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionProps<E extends HTMLElement>\n extends CSSTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, CSSTransition } from \"@react-md/core\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * // opacity: 0;\n * // transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * // opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * // opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * // opacity: 0;\n * // transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n * const [transitionIn, setTransitionIn] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * <CSSTransition\n * timeout={300}\n * className=\"opacity\"\n * temporary\n * transitionIn={transitionIn}\n * >\n * <div>\n * This is some content that will animate!\n * </div>\n * </CSSTransition>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n props: CSSTransitionProps<E>\n): ReactElement | null {\n const { children, className, ...options } = props;\n const child = Children.only(children);\n const { elementProps, rendered } = useCSSTransition({\n ...options,\n className: cnb(child.props.className, className),\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAKlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAWzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/Collapse.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport {\n useCollapseTransition,\n type CollapseElementProps,\n type CollapseTransitionHookOptions,\n} from \"./useCollapseTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n *\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API.\n */\nexport interface CollapseProps<E extends HTMLElement>\n extends Omit<CollapseTransitionHookOptions<E>, \"transitionIn\"> {\n /**\n * The child element that should have a `ref` and the `style`/`className`\n * props cloned into using the `cloneElement` API. If the child is a custom\n * component, you **must** use `React.forwardRef` and pass the `ref` and the\n * other props for the transition to work correctly.\n */\n children: ReactElement<CollapseElementProps<E>>;\n\n /**\n * Boolean if the element should be collapsed.\n *\n * @see {@link CollapseTransitionHookOptions.transitionIn}\n */\n collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCollapseTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * function Example(): ReactElement {\n * const [collapsed, setCollapsed] = useState(true);\n *\n * return (\n * <>\n * <Button onClick={() => setCollapsed(!collapsed)}>\n * Toggle\n * </Button>\n * <Collapse collapsed={collapsed}>\n * <div>\n * Some content that should only be visible while not collapsed.\n * </div>\n * </Collapse>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link useCollapseTransition} for additional examples\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API.\n */\nexport function Collapse<E extends HTMLElement>(\n props: CollapseProps<E>\n): ReactElement {\n const { children, collapsed, className, ...options } = props;\n const child = Children.only(children);\n const { elementProps, rendered } = useCollapseTransition({\n ...options,\n className: cnb(child.props.className, className),\n transitionIn: !collapsed,\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCollapseTransition","Collapse","props","children","collapsed","className","options","child","only","elementProps","rendered","transitionIn"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAClE,SACEC,qBAAqB,QAGhB,6BAA6B;AA4BpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,SACdC,KAAuB;IAEvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGJ;IACvD,MAAMK,QAAQT,SAASU,IAAI,CAACL;IAC5B,MAAM,EAAEM,YAAY,EAAEC,QAAQ,EAAE,GAAGV,sBAAsB;QACvD,GAAGM,OAAO;QACVD,WAAWR,IAAIU,MAAML,KAAK,CAACG,SAAS,EAAEA;QACtCM,cAAc,CAACP;IACjB;IAEA,qBAAO;kBAAGM,0BAAYX,aAAaI,UAAUM;;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/Collapse.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport {\n useCollapseTransition,\n type CollapseElementProps,\n type CollapseTransitionHookOptions,\n} from \"./useCollapseTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n *\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API.\n */\nexport interface CollapseProps<E extends HTMLElement>\n extends Omit<CollapseTransitionHookOptions<E>, \"transitionIn\"> {\n /**\n * The child element that should have a `ref` and the `style`/`className`\n * props cloned into using the `cloneElement` API. If the child is a custom\n * component, you **must** use `React.forwardRef` and pass the `ref` and the\n * other props for the transition to work correctly.\n */\n children: ReactElement<CollapseElementProps<E>>;\n\n /**\n * Boolean if the element should be collapsed.\n *\n * @see {@link CollapseTransitionHookOptions.transitionIn}\n */\n collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCollapseTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * function Example(): ReactElement {\n * const [collapsed, setCollapsed] = useState(true);\n *\n * return (\n * <>\n * <Button onClick={() => setCollapsed(!collapsed)}>\n * Toggle\n * </Button>\n * <Collapse collapsed={collapsed}>\n * <div>\n * Some content that should only be visible while not collapsed.\n * </div>\n * </Collapse>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link useCollapseTransition} for additional examples\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API.\n */\nexport function Collapse<E extends HTMLElement>(\n props: CollapseProps<E>\n): ReactElement {\n const { children, collapsed, className, ...options } = props;\n const child = Children.only(children);\n const { elementProps, rendered } = useCollapseTransition({\n ...options,\n className: cnb(child.props.className, className),\n transitionIn: !collapsed,\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCollapseTransition","Collapse","props","children","collapsed","className","options","child","only","elementProps","rendered","transitionIn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAClE,SACEC,qBAAqB,QAGhB,6BAA6B;AA4BpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,SACdC,KAAuB;IAEvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGJ;IACvD,MAAMK,QAAQT,SAASU,IAAI,CAACL;IAC5B,MAAM,EAAEM,YAAY,EAAEC,QAAQ,EAAE,GAAGV,sBAAsB;QACvD,GAAGM,OAAO;QACVD,WAAWR,IAAIU,MAAML,KAAK,CAACG,SAAS,EAAEA;QACtCM,cAAc,CAACP;IACjB;IAEA,qBAAO;kBAAGM,0BAAYX,aAAaI,UAAUM;;AAC/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useCrossFadeTransition,\n type CrossFadeTransitionHookOptions,\n} from \"./useCrossFadeTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API\n */\nexport interface CrossFadeProps<E extends HTMLElement>\n extends CrossFadeTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {\n /**\n * Unlike the {@link useCrossFadeTransition}, the `appear` value is defaulted\n * to `true` so that the transition can occur when the `key` changes.\n *\n * @see {@link CrossFadeTransitionHookOptions.appear}\n * @defaultValue `true`\n */\n appear?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCrossFadeTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Appear transitions with a React `key`\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { CrossFade } from \"@react-md/transition\";\n *\n * import Page1 from \"./Page1\";\n * import Page2 from \"./Page2\";\n * import Page3 from \"./Page3\";\n *\n * function Example(): ReactElement {\n * const [page, setPage] = useState(0):\n *\n * let content: ReactNode;\n * switch (page) {\n * case 0:\n * content = <Page1 />\n * break:\n * case 1:\n * content = <Page2 />\n * break;\n * case 2:\n * content = <Page3 />\n * break;\n * default:\n * content = null;\n * }\n *\n * return (\n * <>\n * <Button\n * onClick={() => {\n * setPage(prevPage => {\n * const nextPage = prevPage + 1;\n * if (nextPage > 2) {\n * return 0;\n * }\n *\n * return nextPage;\n * })\n * }}\n * >\n * Change Page\n * </Button>\n * <CrossFade key={page}>\n * <div>{content}</div>\n * </CrossFade>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API and no longer supports\n * wrapping children in a `<div>`.\n */\nexport function CrossFade<E extends HTMLElement>(\n props: CrossFadeProps<E>\n): ReactElement {\n const {\n appear = true,\n transitionIn = appear,\n children,\n className,\n ...options\n } = props;\n\n const child = Children.only(children);\n const { elementProps, rendered } = useCrossFadeTransition({\n ...options,\n appear,\n className: cnb(child.props.className, className),\n transitionIn,\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCrossFadeTransition","CrossFade","props","appear","transitionIn","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,sBAAsB,QAEjB,8BAA8B;AAsBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,SAASC,UACdC,KAAwB;IAExB,MAAM,EACJC,SAAS,IAAI,EACbC,eAAeD,MAAM,EACrBE,QAAQ,EACRC,SAAS,EACT,GAAGC,SACJ,GAAGL;IAEJ,MAAMM,QAAQV,SAASW,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGX,uBAAuB;QACxD,GAAGO,OAAO;QACVJ;QACAG,WAAWT,IAAIW,MAAMN,KAAK,CAACI,SAAS,EAAEA;QACtCF;IACF;IAEA,qBAAO;kBAAGO,0BAAYZ,aAAaM,UAAUK;;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useCrossFadeTransition,\n type CrossFadeTransitionHookOptions,\n} from \"./useCrossFadeTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API\n */\nexport interface CrossFadeProps<E extends HTMLElement>\n extends CrossFadeTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {\n /**\n * Unlike the {@link useCrossFadeTransition}, the `appear` value is defaulted\n * to `true` so that the transition can occur when the `key` changes.\n *\n * @see {@link CrossFadeTransitionHookOptions.appear}\n * @defaultValue `true`\n */\n appear?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCrossFadeTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example\n * Appear transitions with a React `key`\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { CrossFade } from \"@react-md/transition\";\n *\n * import Page1 from \"./Page1\";\n * import Page2 from \"./Page2\";\n * import Page3 from \"./Page3\";\n *\n * function Example(): ReactElement {\n * const [page, setPage] = useState(0):\n *\n * let content: ReactNode;\n * switch (page) {\n * case 0:\n * content = <Page1 />\n * break:\n * case 1:\n * content = <Page2 />\n * break;\n * case 2:\n * content = <Page3 />\n * break;\n * default:\n * content = null;\n * }\n *\n * return (\n * <>\n * <Button\n * onClick={() => {\n * setPage(prevPage => {\n * const nextPage = prevPage + 1;\n * if (nextPage > 2) {\n * return 0;\n * }\n *\n * return nextPage;\n * })\n * }}\n * >\n * Change Page\n * </Button>\n * <CrossFade key={page}>\n * <div>{content}</div>\n * </CrossFade>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 Updated for the new CSS Transition API and no longer supports\n * wrapping children in a `<div>`.\n */\nexport function CrossFade<E extends HTMLElement>(\n props: CrossFadeProps<E>\n): ReactElement {\n const {\n appear = true,\n transitionIn = appear,\n children,\n className,\n ...options\n } = props;\n\n const child = Children.only(children);\n const { elementProps, rendered } = useCrossFadeTransition({\n ...options,\n appear,\n className: cnb(child.props.className, className),\n transitionIn,\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCrossFadeTransition","CrossFade","props","appear","transitionIn","children","className","options","child","only","elementProps","rendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,sBAAsB,QAEjB,8BAA8B;AAsBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,SAASC,UACdC,KAAwB;IAExB,MAAM,EACJC,SAAS,IAAI,EACbC,eAAeD,MAAM,EACrBE,QAAQ,EACRC,SAAS,EACT,GAAGC,SACJ,GAAGL;IAEJ,MAAMM,QAAQV,SAASW,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGX,uBAAuB;QACxD,GAAGO,OAAO;QACVJ;QACAG,WAAWT,IAAIW,MAAMN,KAAK,CAACI,SAAS,EAAEA;QACtCF;IACF;IAEA,qBAAO;kBAAGO,0BAAYZ,aAAaM,UAAUK;;AAC/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/ScaleTransition.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useScaleTransition,\n type ScaleTransitionHookOptions,\n} from \"./useScaleTransition.js\";\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 The typeParam was added\n * \\@since 6.0.0 Removed portal props\n */\nexport interface ScaleTransitionProps<E extends HTMLElement>\n extends CSSTransitionComponentImplementation<E>,\n ScaleTransitionHookOptions<E> {}\n\n/**\n * **Client Component**\n *\n * A component implementation of the {@link useScaleTransition} hook that just\n * has some reasonable defaults and supports portalling the children. Since this\n * component uses the `React.cloneElement` to inject the `ref` and `className`\n * into the `children`, it is recommended to use the hook instead.\n *\n * @example\n * Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo: buttonRef,\n * });\n *\n * return (\n * <>\n * <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * <ScaleTransition\n * {...transitionOptions}\n * vertical\n * transitionIn={transitionIn}\n * >\n * <div style={style}>\n * Some content within a menu\n * </div>\n * </ScaleTransition>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 The typeParam was added and the API was updated.\n * \\@since 6.0.0 Removed the built-in support for portalling.\n */\nexport function ScaleTransition<E extends HTMLElement>(\n props: ScaleTransitionProps<E>\n): ReactElement {\n const { children, className, ...options } = props;\n const child = Children.only(children);\n\n const { elementProps, rendered } = useScaleTransition({\n ...options,\n className: cnb(child.props.className, className),\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useScaleTransition","ScaleTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,kBAAkB,QAEb,0BAA0B;AAcjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASC,gBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAE5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,mBAAmB;QACpD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/ScaleTransition.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useScaleTransition,\n type ScaleTransitionHookOptions,\n} from \"./useScaleTransition.js\";\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 The typeParam was added\n * \\@since 6.0.0 Removed portal props\n */\nexport interface ScaleTransitionProps<E extends HTMLElement>\n extends CSSTransitionComponentImplementation<E>,\n ScaleTransitionHookOptions<E> {}\n\n/**\n * **Client Component**\n *\n * A component implementation of the {@link useScaleTransition} hook that just\n * has some reasonable defaults and supports portalling the children. Since this\n * component uses the `React.cloneElement` to inject the `ref` and `className`\n * into the `children`, it is recommended to use the hook instead.\n *\n * @example\n * Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo: buttonRef,\n * });\n *\n * return (\n * <>\n * <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * <ScaleTransition\n * {...transitionOptions}\n * vertical\n * transitionIn={transitionIn}\n * >\n * <div style={style}>\n * Some content within a menu\n * </div>\n * </ScaleTransition>\n * </>\n * );\n * }\n * ```\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks\n * \\@since 2.0.0\n * \\@since 4.0.0 The typeParam was added and the API was updated.\n * \\@since 6.0.0 Removed the built-in support for portalling.\n */\nexport function ScaleTransition<E extends HTMLElement>(\n props: ScaleTransitionProps<E>\n): ReactElement {\n const { children, className, ...options } = props;\n const child = Children.only(children);\n\n const { elementProps, rendered } = useScaleTransition({\n ...options,\n className: cnb(child.props.className, className),\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useScaleTransition","ScaleTransition","props","children","className","options","child","only","elementProps","rendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,kBAAkB,QAEb,0BAA0B;AAcjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASC,gBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAE5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,mBAAmB;QACpD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n useSkeletonPlaceholder,\n type SkeletonPlaceholderOptions,\n} from \"./useSkeletonPlaceholder.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-skeleton-placeholder-background-color\"?: string;\n \"--rmd-skeleton-placeholder-height\"?: string | number;\n \"--rmd-skeleton-placeholder-width\"?: string | number;\n }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n extends HTMLAttributes<HTMLDivElement>,\n SkeletonPlaceholderOptions {\n /**\n * @defaultValue `!!children`\n * @see {@link SkeletonPlaceholderOptions.disabled}\n */\n disabled?: boolean;\n\n /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core\";\n *\n * interface ExampleProps {\n * loading: boolean;\n * children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n * if (loading) {\n * return <SkeletonPlaceholder />;\n * }\n *\n * return <>{children}</>;\n * }\n * ```\n *\n * @example\n * Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core\";\n *\n * interface Data {\n * id: string;\n * name: string;\n * createdBy: string\n * createdOn: string;\n * modifiedBy: string;\n * modifiedOn: string;\n * }\n *\n * function ShowData({\n * id,\n * name,\n * createdBy,\n * createdOn,\n * modifiedBy,\n * modifiedOn,\n * }: Partial<Data>:: ReactElement {\n * const loading =\n * !name &&\n * !createdBy &&\n * !createdOn &&\n * !modifiedBy &&\n * !modifiedOn;\n *\n * return (\n * <Box grid gridName=\"custom-class-name\">\n * <SkeletonPlaceholder disabled={!loading}>\n * {id}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {name}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {createdOn}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {createdBy}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {modifiedOn}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {modifiedBy}\n * </SkeletonPlaceholder>\n * </Box>\n * );\n * }\n *\n * export function Example(): ReactElement {\n * const { data } = useLoadSomeDataQuery();\n *\n * const items = useMemo(() => {\n * // if the data has been fetched, just return the data\n * if (data) {\n * return data;\n * }\n *\n * // if the data does not exist, set up a skeleton of your layout by\n * // rendering a random number of items.\n * //\n * // NOTE: This is memoized so you don't create a random length each\n * // render\n * const length = randomInt({ min: 3, max: 10 })\n * return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n * }, [data])\n *\n * return (\n * <List>\n * {items.map((item) => <ShowData {...item} />)}\n * </List>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n HTMLDivElement,\n SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n const {\n style,\n className,\n height,\n width,\n children,\n disabled = !!children,\n delay,\n minDelay,\n maxDelay,\n minPercentage,\n maxPercentage,\n ...remaining\n } = props;\n const skeleton = useSkeletonPlaceholder({\n disabled,\n style,\n className,\n height,\n width,\n delay,\n minDelay,\n maxDelay,\n minPercentage,\n maxPercentage,\n });\n\n return (\n <div {...remaining} ref={ref} {...skeleton}>\n {children}\n </div>\n );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAIL,QAAQ;AACf,SACEC,sBAAsB,QAEjB,8BAA8B;AAwBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n useSkeletonPlaceholder,\n type SkeletonPlaceholderOptions,\n} from \"./useSkeletonPlaceholder.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-skeleton-placeholder-background-color\"?: string;\n \"--rmd-skeleton-placeholder-height\"?: string | number;\n \"--rmd-skeleton-placeholder-width\"?: string | number;\n }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n extends HTMLAttributes<HTMLDivElement>,\n SkeletonPlaceholderOptions {\n /**\n * @defaultValue `!!children`\n * @see {@link SkeletonPlaceholderOptions.disabled}\n */\n disabled?: boolean;\n\n /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core\";\n *\n * interface ExampleProps {\n * loading: boolean;\n * children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n * if (loading) {\n * return <SkeletonPlaceholder />;\n * }\n *\n * return <>{children}</>;\n * }\n * ```\n *\n * @example\n * Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core\";\n *\n * interface Data {\n * id: string;\n * name: string;\n * createdBy: string\n * createdOn: string;\n * modifiedBy: string;\n * modifiedOn: string;\n * }\n *\n * function ShowData({\n * id,\n * name,\n * createdBy,\n * createdOn,\n * modifiedBy,\n * modifiedOn,\n * }: Partial<Data>:: ReactElement {\n * const loading =\n * !name &&\n * !createdBy &&\n * !createdOn &&\n * !modifiedBy &&\n * !modifiedOn;\n *\n * return (\n * <Box grid gridName=\"custom-class-name\">\n * <SkeletonPlaceholder disabled={!loading}>\n * {id}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {name}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {createdOn}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {createdBy}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {modifiedOn}\n * </SkeletonPlaceholder>\n * <SkeletonPlaceholder disabled={!loading}>\n * {modifiedBy}\n * </SkeletonPlaceholder>\n * </Box>\n * );\n * }\n *\n * export function Example(): ReactElement {\n * const { data } = useLoadSomeDataQuery();\n *\n * const items = useMemo(() => {\n * // if the data has been fetched, just return the data\n * if (data) {\n * return data;\n * }\n *\n * // if the data does not exist, set up a skeleton of your layout by\n * // rendering a random number of items.\n * //\n * // NOTE: This is memoized so you don't create a random length each\n * // render\n * const length = randomInt({ min: 3, max: 10 })\n * return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n * }, [data])\n *\n * return (\n * <List>\n * {items.map((item) => <ShowData {...item} />)}\n * </List>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n HTMLDivElement,\n SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n const {\n style,\n className,\n height,\n width,\n children,\n disabled = !!children,\n delay,\n minDelay,\n maxDelay,\n minPercentage,\n maxPercentage,\n ...remaining\n } = props;\n const skeleton = useSkeletonPlaceholder({\n disabled,\n style,\n className,\n height,\n width,\n delay,\n minDelay,\n maxDelay,\n minPercentage,\n maxPercentage,\n });\n\n return (\n <div {...remaining} ref={ref} {...skeleton}>\n {children}\n </div>\n );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,UAAU,QAIL,QAAQ;AACf,SACEC,sBAAsB,QAEjB,8BAA8B;AAwBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n type TransitionTimeout,\n} from \"./types.js\";\nimport {\n DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n useSlideTransition,\n} from \"./useSlideTransition.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-slide-duration\"?: string | number;\n }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideProps\n extends HTMLAttributes<HTMLDivElement>,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * Set this to `true` to animate this slide into view within a\n * `SlideContainer`. When this switches from `true` to `false`, it will\n * animate out.\n */\n active: boolean;\n\n /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n timeout?: TransitionTimeout;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link SlideContainer} for example usage.\n * @remarks \\@since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n function Slide(props, nodeRef) {\n const {\n active,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n className,\n children,\n timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n temporary = false,\n exitedHidden = true,\n ...remaining\n } = props;\n\n const { rendered, elementProps } = useSlideTransition({\n nodeRef,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n className,\n timeout,\n temporary,\n transitionIn: active,\n exitedHidden,\n });\n\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps}>\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6C,QAAQ;AAMxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AAyBjC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n type TransitionTimeout,\n} from \"./types.js\";\nimport {\n DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n useSlideTransition,\n} from \"./useSlideTransition.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-slide-duration\"?: string | number;\n }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideProps\n extends HTMLAttributes<HTMLDivElement>,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * Set this to `true` to animate this slide into view within a\n * `SlideContainer`. When this switches from `true` to `false`, it will\n * animate out.\n */\n active: boolean;\n\n /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n timeout?: TransitionTimeout;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link SlideContainer} for example usage.\n * @remarks \\@since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n function Slide(props, nodeRef) {\n const {\n active,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n className,\n children,\n timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n temporary = false,\n exitedHidden = true,\n ...remaining\n } = props;\n\n const { rendered, elementProps } = useSlideTransition({\n nodeRef,\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n className,\n timeout,\n temporary,\n transitionIn: active,\n exitedHidden,\n });\n\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps}>\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAA6C,QAAQ;AAMxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AAyBjC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example\n * Direction \"left\"\n * ```\n * -------------\n * | |\n * | Slide 1 | Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 | Slide 2 |\n * | |\n * -------------\n * ```\n *\n * @example\n * Direction \"right\"\n * ```\n * -------------\n * | |\n * Slide 1 | Slide 2 |\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * | Slide 1 | Slide 2\n * | |\n * -------------\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport type SlideDirection = \"left\" | \"right\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n className?: string;\n\n /** @see {@link SlideDirection} */\n direction: SlideDirection;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @remarks \\@since 6.0.0\n */\nexport function slideContainer(\n options: SlideContainerClassNameOptions\n): string {\n const { className, direction } = options;\n\n return cnb(styles({ [direction]: true }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerProps\n extends HTMLAttributes<HTMLDivElement>,\n SlideContainerClassNameOptions {}\n\n/**\n * **Server Component**\n * This is a server component, but generally relies on state so probably a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n * direction: SlideDirection;\n * activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n * const [state, setState] = useState<State>({\n * direction: \"left\",\n * activeIndex: 0,\n * });\n * const { direction, activeIndex } = state;\n *\n * // when changing a slide, `direction` should be set to \"left\" if the\n * // previous `activeIndex` is less than the next index\n * //\n * // i.e.\n * // setState((prevState) => ({\n * // direction: prevState.activeIndex < index ? \"left\" : \"right\",\n * // activeIndex: index,\n * // }))\n *\n * return (\n * <SlideContainer direction={direction}>\n * <Slide active={activeIndex === 0}>\n * Slide 1\n * </Slide>\n * <Slide active={activeIndex === 1}>\n * Slide 2\n * </Slide>\n * <Slide active={activeIndex === 2}>\n * Slide 3\n * </Slide>\n * </SlideContainer>\n * );\n * }\n * ```\n *\n * @example\n * Persistent Slides\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n * direction: SlideDirection;\n * activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n * const [state, setState] = useState<State>({\n * direction: \"left\",\n * activeIndex: 0,\n * });\n * const { direction, activeIndex } = state;\n *\n * // when changing a slide, `direction` should be set to \"left\" if the\n * // previous `activeIndex` is less than the next index\n * //\n * // i.e.\n * // setState((prevState) => ({\n * // direction: prevState.activeIndex < index ? \"left\" : \"right\",\n * // activeIndex: index,\n * // }))\n *\n * // enabling `persistent` makes it so that the `<Slide>` never unmounts so\n * // that state can be maintained while it is not active.\n * return (\n * <SlideContainer direction={direction}>\n * <Slide active={activeIndex === 0} persistent>\n * Slide 1\n * </Slide>\n * <Slide active={activeIndex === 1} persistent>\n * Slide 2\n * </Slide>\n * <Slide active={activeIndex === 2} persistent>\n * Slide 3\n * </Slide>\n * </SlideContainer>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n function SlideContainer(props, ref) {\n const { className, direction, children, ...remaining } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={slideContainer({ className, direction })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;IAAK,IAAID;AAC5C;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGC,GACD,OAAO,MAAME,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEJ,SAAS,EAAEC,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEzD,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLJ,WAAWF,eAAe;YAAEE;YAAWC;QAAU;kBAEhDI;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example\n * Direction \"left\"\n * ```\n * -------------\n * | |\n * | Slide 1 | Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 | Slide 2 |\n * | |\n * -------------\n * ```\n *\n * @example\n * Direction \"right\"\n * ```\n * -------------\n * | |\n * Slide 1 | Slide 2 |\n * | |\n * -------------\n * -------------\n * | |\n * Slide 1 Slide 2\n * | |\n * -------------\n * -------------\n * | |\n * | Slide 1 | Slide 2\n * | |\n * -------------\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport type SlideDirection = \"left\" | \"right\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n className?: string;\n\n /** @see {@link SlideDirection} */\n direction: SlideDirection;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @remarks \\@since 6.0.0\n */\nexport function slideContainer(\n options: SlideContainerClassNameOptions\n): string {\n const { className, direction } = options;\n\n return cnb(styles({ [direction]: true }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerProps\n extends HTMLAttributes<HTMLDivElement>,\n SlideContainerClassNameOptions {}\n\n/**\n * **Server Component**\n * This is a server component, but generally relies on state so probably a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n * direction: SlideDirection;\n * activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n * const [state, setState] = useState<State>({\n * direction: \"left\",\n * activeIndex: 0,\n * });\n * const { direction, activeIndex } = state;\n *\n * // when changing a slide, `direction` should be set to \"left\" if the\n * // previous `activeIndex` is less than the next index\n * //\n * // i.e.\n * // setState((prevState) => ({\n * // direction: prevState.activeIndex < index ? \"left\" : \"right\",\n * // activeIndex: index,\n * // }))\n *\n * return (\n * <SlideContainer direction={direction}>\n * <Slide active={activeIndex === 0}>\n * Slide 1\n * </Slide>\n * <Slide active={activeIndex === 1}>\n * Slide 2\n * </Slide>\n * <Slide active={activeIndex === 2}>\n * Slide 3\n * </Slide>\n * </SlideContainer>\n * );\n * }\n * ```\n *\n * @example\n * Persistent Slides\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n * direction: SlideDirection;\n * activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n * const [state, setState] = useState<State>({\n * direction: \"left\",\n * activeIndex: 0,\n * });\n * const { direction, activeIndex } = state;\n *\n * // when changing a slide, `direction` should be set to \"left\" if the\n * // previous `activeIndex` is less than the next index\n * //\n * // i.e.\n * // setState((prevState) => ({\n * // direction: prevState.activeIndex < index ? \"left\" : \"right\",\n * // activeIndex: index,\n * // }))\n *\n * // enabling `persistent` makes it so that the `<Slide>` never unmounts so\n * // that state can be maintained while it is not active.\n * return (\n * <SlideContainer direction={direction}>\n * <Slide active={activeIndex === 0} persistent>\n * Slide 1\n * </Slide>\n * <Slide active={activeIndex === 1} persistent>\n * Slide 2\n * </Slide>\n * <Slide active={activeIndex === 2} persistent>\n * Slide 3\n * </Slide>\n * </SlideContainer>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n function SlideContainer(props, ref) {\n const { className, direction, children, ...remaining } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={slideContainer({ className, direction })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","SlideContainer","props","ref","children","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;IAAK,IAAID;AAC5C;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGC,GACD,OAAO,MAAME,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEJ,SAAS,EAAEC,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEzD,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLJ,WAAWF,eAAe;YAAEE;YAAWC;QAAU;kBAEhDI;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n className?: string;\n enter?: boolean;\n leave?: boolean;\n exited?: boolean;\n disableOverflow?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n const { enter, leave, exited, disableOverflow, className } = options;\n\n return cnb(\n styles({\n enter,\n leave,\n \"no-overflow\": disableOverflow,\n }),\n exited && DISPLAY_NONE_CLASS,\n className\n );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n className?: string;\n enter?: boolean;\n leave?: boolean;\n exited?: boolean;\n disableOverflow?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n const { enter, leave, exited, disableOverflow, className } = options;\n\n return cnb(\n styles({\n enter,\n leave,\n \"no-overflow\": disableOverflow,\n }),\n exited && DISPLAY_NONE_CLASS,\n className\n );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/config.ts"],"sourcesContent":["/**\n * @remarks \\@since 6.0.0\n */\nexport interface TransitionConfig {\n /**\n * Set this to `true` to disable all transitions from `react-md`.\n *\n * Note: It is recommended to set this to `true` in testing to keep things\n * simple and will automatically be set when using:\n *\n * ```ts\n * import \"@react-md/core/test-utils/jest-setup.js\";\n * ```\n *\n * @defaultValue `false`\n */\n disabled: boolean;\n}\n\n// NOTE: Uses get/set for test mocking\n\nlet disabled = false;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const TRANSITION_CONFIG: TransitionConfig = {\n get disabled() {\n return disabled;\n },\n set disabled(nextDisabled: boolean) {\n disabled = nextDisabled;\n },\n};\n"],"names":["disabled","TRANSITION_CONFIG","nextDisabled"],"mappings":"AAAA;;CAEC,GAiBD,sCAAsC;AAEtC,IAAIA,WAAW;AAEf;;CAEC,GACD,OAAO,MAAMC,oBAAsC;IACjD,IAAID,YAAW;QACb,OAAOA;IACT;IACA,IAAIA,UAASE,aAAuB;QAClCF,WAAWE;IACb;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/config.ts"],"sourcesContent":["/**\n * @remarks \\@since 6.0.0\n */\nexport interface TransitionConfig {\n /**\n * Set this to `true` to disable all transitions from `react-md`.\n *\n * Note: It is recommended to set this to `true` in testing to keep things\n * simple and will automatically be set when using:\n *\n * ```ts\n * import \"@react-md/core/test-utils/jest-setup.js\";\n * ```\n *\n * @defaultValue `false`\n */\n disabled: boolean;\n}\n\n// NOTE: Uses get/set for test mocking\n\nlet disabled = false;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const TRANSITION_CONFIG: TransitionConfig = {\n get disabled() {\n return disabled;\n },\n set disabled(nextDisabled: boolean) {\n disabled = nextDisabled;\n },\n};\n"],"names":["disabled","TRANSITION_CONFIG","nextDisabled"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA;;CAEC,GAiBD,sCAAsC;AAEtC,IAAIA,WAAW;AAEf;;CAEC,GACD,OAAO,MAAMC,oBAAsC;IACjD,IAAID,YAAW;QACb,OAAOA;IACT;IACA,IAAIA,UAASE,aAAuB;QAClCF,WAAWE;IACb;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\nexport interface MaxWidthTransitionClassNameOptions {\n className?: string;\n\n disabled?: boolean;\n transitionIn: boolean;\n}\n\nexport function maxWidthTransition(\n options: MaxWidthTransitionClassNameOptions\n): string {\n const { disabled, className, transitionIn } = options;\n\n return cnb(\n !disabled && styles({ visible: transitionIn }),\n disabled && !transitionIn && DISPLAY_NONE_CLASS,\n className\n );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AASnB,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\nexport interface MaxWidthTransitionClassNameOptions {\n className?: string;\n\n disabled?: boolean;\n transitionIn: boolean;\n}\n\nexport function maxWidthTransition(\n options: MaxWidthTransitionClassNameOptions\n): string {\n const { disabled, className, transitionIn } = options;\n\n return cnb(\n !disabled && styles({ visible: transitionIn }),\n disabled && !transitionIn && DISPLAY_NONE_CLASS,\n className\n );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AASnB,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n /**\n * The minimum `animation-delay` milliseconds allowed in the random generator.\n * This value should be: `0 <= minDelay < maxDelay`.\n *\n * The `animation-delay` will be generated by:\n * ```ts\n * const delay = randomInt({\n * min: minDelay,\n * max: maxDelay,\n * });\n *\n * return {\n * animationDelay: `-${delay}ms`,\n * };\n * ```\n *\n * @defaultValue `0`\n */\n minDelay?: number;\n\n /**\n * @see {@link minDelay}\n * @defaultValue `400`\n */\n maxDelay?: number;\n\n /**\n * The minimum width percentage allowed in the random generator. This value\n * should be: `0 >= minPercentage < maxPercentage`.\n *\n * The `width` will be generated by:\n * ```ts\n * const width = randomInt({\n * min: minPercentage,\n * max: maxPercentage,\n * });\n *\n * return {\n * width: `${width}%`,\n * };\n * ```\n * @defaultValue `40`\n */\n minPercentage?: number;\n\n /**\n * @see {@link minPercentage}\n * @defaultValue `85`\n */\n maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import { skeletonPlaceholder, randomSkeletonPlaceholder } from \"@react-md/core\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n * return\n * <div\n * style={randomSkeletonPlaceholder()}\n * className={skeletonPlaceholder()}\n * />\n * );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n const {\n minDelay = 0,\n maxDelay = 400,\n minPercentage = 40,\n maxPercentage = 85,\n } = options;\n\n return {\n animationDelay: `-${randomInt({\n min: minDelay,\n max: maxDelay,\n })}ms`,\n width: `${randomInt({\n min: minPercentage,\n max: maxPercentage,\n })}%`,\n };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AACA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,CAAC,EAAEX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n /**\n * The minimum `animation-delay` milliseconds allowed in the random generator.\n * This value should be: `0 <= minDelay < maxDelay`.\n *\n * The `animation-delay` will be generated by:\n * ```ts\n * const delay = randomInt({\n * min: minDelay,\n * max: maxDelay,\n * });\n *\n * return {\n * animationDelay: `-${delay}ms`,\n * };\n * ```\n *\n * @defaultValue `0`\n */\n minDelay?: number;\n\n /**\n * @see {@link minDelay}\n * @defaultValue `400`\n */\n maxDelay?: number;\n\n /**\n * The minimum width percentage allowed in the random generator. This value\n * should be: `0 >= minPercentage < maxPercentage`.\n *\n * The `width` will be generated by:\n * ```ts\n * const width = randomInt({\n * min: minPercentage,\n * max: maxPercentage,\n * });\n *\n * return {\n * width: `${width}%`,\n * };\n * ```\n * @defaultValue `40`\n */\n minPercentage?: number;\n\n /**\n * @see {@link minPercentage}\n * @defaultValue `85`\n */\n maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import { skeletonPlaceholder, randomSkeletonPlaceholder } from \"@react-md/core\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n * return\n * <div\n * style={randomSkeletonPlaceholder()}\n * className={skeletonPlaceholder()}\n * />\n * );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n const {\n minDelay = 0,\n maxDelay = 400,\n minPercentage = 40,\n maxPercentage = 85,\n } = options;\n\n return {\n animationDelay: `-${randomInt({\n min: minDelay,\n max: maxDelay,\n })}ms`,\n width: `${randomInt({\n min: minPercentage,\n max: maxPercentage,\n })}%`,\n };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,CAAC,EAAEX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\n\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionActions {\n /**\n * Boolean if the transition should occur immediately once the component\n * mounts if the {@link TransitionOptions.transitionIn} is `true`\n *\n * @defaultValue `false`\n */\n appear?: boolean;\n\n /**\n * Boolean if the transition should occur whenever the\n * {@link TransitionOptions.transitionIn} is switch to `true` after the\n * component has been rendered in the DOM.\n *\n * @defaultValue `true`\n */\n enter?: boolean;\n\n /**\n * Boolean if the transition should occur whenever the\n * {@link TransitionOptions.transitionIn} is switch to `false` after the\n * component has been rendered in the DOM.\n *\n * @defaultValue `true`\n */\n exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @see {@link TransitionTimeout}\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionStage =\n | \"enter\"\n | \"entering\"\n | \"entered\"\n | \"exit\"\n | \"exiting\"\n | \"exited\";\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @remarks \\@since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * THis function is called at each `\"exit\"` {@link TransitionStage}. If a {@link\n * TransitionOptions.nodeRef} was provided, the DOM node should be available in\n * `nodeRef.current` by this point if the transition requires DOM calculations.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionCallbacks {\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"enter\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEnter?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"enter\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEntering?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"entering\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEntered?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"entered\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onExit?: TransitionExitHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"exiting\"`.\n *\n * @see {@link TransitionExitHandler}\n */\n onExiting?: TransitionExitHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"exited\"`.\n *\n * @see {@link TransitionExitHandler}\n */\n onExited?: TransitionExitHandler;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionInDefaultedOptions<\n E extends HTMLElement,\n> extends TransitionActions,\n TransitionCallbacks {\n /**\n * An optional ref that will be merged with the\n * {@link TransitionHookReturnValue.ref}\n */\n nodeRef?: Ref<E>;\n\n /**\n * Boolean if the element should mount and unmount based on the\n * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n *\n * @defaultValue `false`\n */\n temporary?: boolean;\n\n /**\n * This boolean controls the transition by activating flowing through the\n * {@link TransitionStage}.\n *\n * @see {@link TransitionActions} for a description around the transitions.\n */\n transitionIn?: boolean;\n\n /** {@inheritDoc TransitionTimeout} */\n timeout?: TransitionTimeout;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionOptions<E extends HTMLElement>\n extends PreconfiguredTransitionInDefaultedOptions<E> {\n /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionOptions<E extends HTMLElement>\n extends PreconfiguredTransitionOptions<E> {\n /** {@inheritDoc TransitionTimeout} */\n timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example\n * Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n * appear: true,\n * enter: true,\n * exit: true,\n * timeout: 300,\n * classNames: {\n * appear: \"appear\",\n * appearEnter: \"appear--enter\",\n * appearDone: \"appear--done appear--complete\",\n * enter: \"enter\",\n * enterEnter: \"\",\n * enterDone: \"enter--done enter--complete\",\n * exit: \"\",\n * exitEnter: \"\",\n * exitDone: \"exit--done exit--complete\",\n * }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n /**\n * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appear?: string;\n\n /**\n * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appearActive?: string;\n\n /**\n * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appearDone?: string;\n\n /**\n * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enter?: string;\n\n /**\n * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enterActive?: string;\n\n /**\n * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enterDone?: string;\n\n /**\n * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exit?: string;\n\n /**\n * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exitActive?: string;\n\n /**\n * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exitDone?: string;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport type CSSTransitionClassNames =\n | string\n | Readonly<CSSTransitionClassNamesObject>;\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionInDefaultedOptions<\n E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n /**\n * An optional className to be merged with the transition classes.\n */\n className?: string;\n\n /**\n * When this is `true` and the {@link temporary} option is `false`, the\n * element will gain a class name to hide it with `display: none` instead of\n * conditionally rendering the element.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookOptions<E extends HTMLElement>\n extends TransitionOptions<E> {\n /**\n * Boolean if the DOM should forcefully be reflow each time a transition\n * change occurs. This is generally required for any CSS transition and is\n * set to `true` for the {@link useCSSTransition} hook.\n *\n * @defaultValue `false`\n */\n reflow?: boolean;\n\n /**\n * @remarks \\@since 6.0.0\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionState {\n /** {@inheritDoc TransitionStage} */\n stage: TransitionStage;\n\n /**\n * Boolean if the element should be rendered or not. This will always be\n * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n */\n rendered: boolean;\n\n /**\n * Boolean if this is the first {@link TransitionActions.appear} transition.\n * This will be `true` during the first transition if\n * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n * `false`.\n */\n appearing: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookReturnValue<E extends HTMLElement>\n extends TransitionState {\n /**\n * A ref that is required for the transition to occur and should be passed to\n * the element affected by the transition.\n */\n ref: RefCallback<E>;\n\n /**\n * A function that can be used to specifically set the transition to a\n * specific stage. This shouldn't really be used too much and is really just\n * useful for \"appear only transitions\" that do not unmount the child\n * elements.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useEffect, useRef } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n * import { useRouter } from \"react-router-dom\";\n *\n * function Example(): ReactElement {\n * const { pathname } = useRouter();\n * const { elementProps, transitionTo } = useCSSTransition({\n * transitionIn: true,\n * timeout: 1000,\n * classNames: \"some-enter-transition\",\n * });\n *\n * useEffect(() => {\n * // Do not trigger transition on first load.\n * if (prevPathname.current === pathname) {\n * return;\n * }\n *\n * prevPathname.current = pathname;\n * transitionTo(\"enter\");\n * }, [pathname, transitionTo]);\n *\n * return <div {...elementProps}>{content}</div>;\n * }\n * ```\n *\n * @param stage - The {@link TransitionStage} to set to\n */\n transitionTo(stage: TransitionStage): void;\n\n /**\n * This is mostly used internally to make it so that you can render portalled\n * elements inline with content if SSR is enabled in your app. To enable this\n * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n *\n * This value will be `true` if a portalled element was rendered by default\n * from the server and remain true until it unmounts from the DOM.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disablePortal: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionOptions<E> {\n /** {@inheritDoc TransitionTimeout} */\n timeout: TransitionTimeout;\n /** {@inheritDoc CSSTransitionClassNames} */\n classNames: CSSTransitionClassNames;\n\n /**\n * @remarks \\@since 6.0.0\n */\n disablePortal?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionElementProps<E extends HTMLElement> {\n /** @see {@link TransitionHookReturnValue.ref} */\n ref: RefCallback<E>;\n\n /**\n * The current transition class name or `undefined`.\n */\n className: string | undefined;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookReturnValue<E extends HTMLElement>\n extends TransitionHookReturnValue<E>,\n CSSTransitionElementProps<E> {\n /**\n * This can be used so that you don't need to destructure multiple props from\n * the hook return value to pass to the transitioning component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * interface ExampleProps {\n * transitionIn: boolean;\n * children: ReactNode;\n * }\n *\n * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n * const { elementProps, rendered } = useCSSTransition({\n * timeout: 150,\n * classNames: \"example\",\n * transitionIn,\n * });\n *\n * if (!rendered) {\n * return null;\n * }\n *\n * return <div {...elementProps}>{children}</div>\n * }\n * ```\n *\n * @example\n * Verbose Version\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * interface ExampleProps {\n * transitionIn: boolean;\n * children: ReactNode;\n * }\n *\n * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n * const { ref, className, rendered } = useCSSTransition({\n * timeout: 150,\n * classNames: \"example\",\n * transitionIn,\n * });\n *\n * if (!rendered) {\n * return null;\n * }\n *\n * return <div ref={ref} className={className}>{children}</div>\n * }\n * ```\n */\n elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n /** @see {@link CSSTransitionHookOptions.temporary} */\n temporary?: boolean;\n /** @see {@link TransitionTimeout} */\n timeout?: TransitionTimeout;\n /** @see {@link CSSTransitionClassNames} */\n classNames?: CSSTransitionClassNames;\n /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentImplementation<E extends HTMLElement> {\n /**\n * The child element that should have a `ref` and `className` cloned into\n * using the `cloneElement` API. If the child is a custom component, you\n * **must** use `React.forwardRef` and pass both of these to a DOM element for\n * the transition to work.\n */\n children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAslBR;;;;CAIC,GACD,WAQC"}
|
|
1
|
+
{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\n\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionActions {\n /**\n * Boolean if the transition should occur immediately once the component\n * mounts if the {@link TransitionOptions.transitionIn} is `true`\n *\n * @defaultValue `false`\n */\n appear?: boolean;\n\n /**\n * Boolean if the transition should occur whenever the\n * {@link TransitionOptions.transitionIn} is switch to `true` after the\n * component has been rendered in the DOM.\n *\n * @defaultValue `true`\n */\n enter?: boolean;\n\n /**\n * Boolean if the transition should occur whenever the\n * {@link TransitionOptions.transitionIn} is switch to `false` after the\n * component has been rendered in the DOM.\n *\n * @defaultValue `true`\n */\n exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @see {@link TransitionTimeout}\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionStage =\n | \"enter\"\n | \"entering\"\n | \"entered\"\n | \"exit\"\n | \"exiting\"\n | \"exited\";\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @remarks \\@since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * THis function is called at each `\"exit\"` {@link TransitionStage}. If a {@link\n * TransitionOptions.nodeRef} was provided, the DOM node should be available in\n * `nodeRef.current` by this point if the transition requires DOM calculations.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionCallbacks {\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"enter\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEnter?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"enter\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEntering?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"entering\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onEntered?: TransitionEnterHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"entered\"`.\n *\n * @see {@link TransitionEnterHandler}\n */\n onExit?: TransitionExitHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"exiting\"`.\n *\n * @see {@link TransitionExitHandler}\n */\n onExiting?: TransitionExitHandler;\n\n /**\n * This function will be called once the {@link TransitionStage} has been set\n * to `\"exited\"`.\n *\n * @see {@link TransitionExitHandler}\n */\n onExited?: TransitionExitHandler;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionInDefaultedOptions<\n E extends HTMLElement,\n> extends TransitionActions,\n TransitionCallbacks {\n /**\n * An optional ref that will be merged with the\n * {@link TransitionHookReturnValue.ref}\n */\n nodeRef?: Ref<E>;\n\n /**\n * Boolean if the element should mount and unmount based on the\n * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n *\n * @defaultValue `false`\n */\n temporary?: boolean;\n\n /**\n * This boolean controls the transition by activating flowing through the\n * {@link TransitionStage}.\n *\n * @see {@link TransitionActions} for a description around the transitions.\n */\n transitionIn?: boolean;\n\n /** {@inheritDoc TransitionTimeout} */\n timeout?: TransitionTimeout;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionOptions<E extends HTMLElement>\n extends PreconfiguredTransitionInDefaultedOptions<E> {\n /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionOptions<E extends HTMLElement>\n extends PreconfiguredTransitionOptions<E> {\n /** {@inheritDoc TransitionTimeout} */\n timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example\n * Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n * appear: true,\n * enter: true,\n * exit: true,\n * timeout: 300,\n * classNames: {\n * appear: \"appear\",\n * appearEnter: \"appear--enter\",\n * appearDone: \"appear--done appear--complete\",\n * enter: \"enter\",\n * enterEnter: \"\",\n * enterDone: \"enter--done enter--complete\",\n * exit: \"\",\n * exitEnter: \"\",\n * exitDone: \"exit--done exit--complete\",\n * }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n /**\n * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appear?: string;\n\n /**\n * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appearActive?: string;\n\n /**\n * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n * while {@link TransitionState.appearing}.\n *\n * @defaultValue `\"\"`\n */\n appearDone?: string;\n\n /**\n * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enter?: string;\n\n /**\n * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enterActive?: string;\n\n /**\n * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n enterDone?: string;\n\n /**\n * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exit?: string;\n\n /**\n * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exitActive?: string;\n\n /**\n * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n *\n * @defaultValue `\"\"`\n */\n exitDone?: string;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport type CSSTransitionClassNames =\n | string\n | Readonly<CSSTransitionClassNamesObject>;\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionInDefaultedOptions<\n E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n /**\n * An optional className to be merged with the transition classes.\n */\n className?: string;\n\n /**\n * When this is `true` and the {@link temporary} option is `false`, the\n * element will gain a class name to hide it with `display: none` instead of\n * conditionally rendering the element.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookOptions<E extends HTMLElement>\n extends TransitionOptions<E> {\n /**\n * Boolean if the DOM should forcefully be reflow each time a transition\n * change occurs. This is generally required for any CSS transition and is\n * set to `true` for the {@link useCSSTransition} hook.\n *\n * @defaultValue `false`\n */\n reflow?: boolean;\n\n /**\n * @remarks \\@since 6.0.0\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionState {\n /** {@inheritDoc TransitionStage} */\n stage: TransitionStage;\n\n /**\n * Boolean if the element should be rendered or not. This will always be\n * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n */\n rendered: boolean;\n\n /**\n * Boolean if this is the first {@link TransitionActions.appear} transition.\n * This will be `true` during the first transition if\n * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n * `false`.\n */\n appearing: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookReturnValue<E extends HTMLElement>\n extends TransitionState {\n /**\n * A ref that is required for the transition to occur and should be passed to\n * the element affected by the transition.\n */\n ref: RefCallback<E>;\n\n /**\n * A function that can be used to specifically set the transition to a\n * specific stage. This shouldn't really be used too much and is really just\n * useful for \"appear only transitions\" that do not unmount the child\n * elements.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useEffect, useRef } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n * import { useRouter } from \"react-router-dom\";\n *\n * function Example(): ReactElement {\n * const { pathname } = useRouter();\n * const { elementProps, transitionTo } = useCSSTransition({\n * transitionIn: true,\n * timeout: 1000,\n * classNames: \"some-enter-transition\",\n * });\n *\n * useEffect(() => {\n * // Do not trigger transition on first load.\n * if (prevPathname.current === pathname) {\n * return;\n * }\n *\n * prevPathname.current = pathname;\n * transitionTo(\"enter\");\n * }, [pathname, transitionTo]);\n *\n * return <div {...elementProps}>{content}</div>;\n * }\n * ```\n *\n * @param stage - The {@link TransitionStage} to set to\n */\n transitionTo(stage: TransitionStage): void;\n\n /**\n * This is mostly used internally to make it so that you can render portalled\n * elements inline with content if SSR is enabled in your app. To enable this\n * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n *\n * This value will be `true` if a portalled element was rendered by default\n * from the server and remain true until it unmounts from the DOM.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disablePortal: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionOptions<E> {\n /** {@inheritDoc TransitionTimeout} */\n timeout: TransitionTimeout;\n /** {@inheritDoc CSSTransitionClassNames} */\n classNames: CSSTransitionClassNames;\n\n /**\n * @remarks \\@since 6.0.0\n */\n disablePortal?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionElementProps<E extends HTMLElement> {\n /** @see {@link TransitionHookReturnValue.ref} */\n ref: RefCallback<E>;\n\n /**\n * The current transition class name or `undefined`.\n */\n className: string | undefined;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookReturnValue<E extends HTMLElement>\n extends TransitionHookReturnValue<E>,\n CSSTransitionElementProps<E> {\n /**\n * This can be used so that you don't need to destructure multiple props from\n * the hook return value to pass to the transitioning component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * interface ExampleProps {\n * transitionIn: boolean;\n * children: ReactNode;\n * }\n *\n * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n * const { elementProps, rendered } = useCSSTransition({\n * timeout: 150,\n * classNames: \"example\",\n * transitionIn,\n * });\n *\n * if (!rendered) {\n * return null;\n * }\n *\n * return <div {...elementProps}>{children}</div>\n * }\n * ```\n *\n * @example\n * Verbose Version\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * interface ExampleProps {\n * transitionIn: boolean;\n * children: ReactNode;\n * }\n *\n * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n * const { ref, className, rendered } = useCSSTransition({\n * timeout: 150,\n * classNames: \"example\",\n * transitionIn,\n * });\n *\n * if (!rendered) {\n * return null;\n * }\n *\n * return <div ref={ref} className={className}>{children}</div>\n * }\n * ```\n */\n elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n /** @see {@link CSSTransitionHookOptions.temporary} */\n temporary?: boolean;\n /** @see {@link TransitionTimeout} */\n timeout?: TransitionTimeout;\n /** @see {@link CSSTransitionClassNames} */\n classNames?: CSSTransitionClassNames;\n /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentImplementation<E extends HTMLElement> {\n /**\n * The child element that should have a `ref` and `className` cloned into\n * using the `cloneElement` API. If the child is a custom component, you\n * **must** use `React.forwardRef` and pass both of these to a DOM element for\n * the transition to work.\n */\n children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"rangeMappings":";;;;;;;;","mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAslBR;;;;CAIC,GACD,WAQC"}
|