@react-md/core 1.0.0-next.11 → 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 +12 -0
- package/.turbo/turbo-typecheck.log +1 -1
- package/CHANGELOG.md +6 -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.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.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 +11 -350
- 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/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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/overlay/overlayStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n box,\n type BoxAlignItems,\n type BoxJustifyContent,\n} from \"../box/styles.js\";\nimport {\n type CSSTransitionClassNamesObject,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-overlay-background-color\"?: string;\n \"--rmd-overlay-z-index\"?: number;\n }\n}\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface OverlayClassNameOptions {\n className?: string;\n\n visible: boolean;\n\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n clickable?: boolean;\n\n /** @defaultValue `false` */\n absolute?: boolean;\n /** @defaultValue `\"center\"` */\n align?: BoxAlignItems;\n\n /** @defaultValue `\"center\"` */\n justify?: BoxJustifyContent;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function overlay(\n options: OverlayClassNameOptions & { active?: boolean }\n): string {\n const {\n visible,\n active,\n absolute = false,\n clickable = false,\n align = \"center\",\n justify = \"center\",\n className,\n } = options;\n\n return cnb(\n styles({\n active,\n visible,\n clickable,\n absolute,\n }),\n box({\n align,\n justify,\n disablePadding: true,\n }),\n className\n );\n}\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appearActive: \"rmd-overlay--active\",\n appearDone: \"rmd-overlay--active\",\n enterActive: \"rmd-overlay--active\",\n enterDone: \"rmd-overlay--active\",\n };\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,GAAG,QAGE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,2BAA2B,GAC3B,OAAO,MAAME,0BAA6C,IAAI;AAE9D,2BAA2B,GAC3B,OAAO,MAAMC,6BACX;IACEC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../src/overlay/overlayStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n box,\n type BoxAlignItems,\n type BoxJustifyContent,\n} from \"../box/styles.js\";\nimport {\n type CSSTransitionClassNamesObject,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-overlay-background-color\"?: string;\n \"--rmd-overlay-z-index\"?: number;\n }\n}\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface OverlayClassNameOptions {\n className?: string;\n\n visible: boolean;\n\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n clickable?: boolean;\n\n /** @defaultValue `false` */\n absolute?: boolean;\n /** @defaultValue `\"center\"` */\n align?: BoxAlignItems;\n\n /** @defaultValue `\"center\"` */\n justify?: BoxJustifyContent;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function overlay(\n options: OverlayClassNameOptions & { active?: boolean }\n): string {\n const {\n visible,\n active,\n absolute = false,\n clickable = false,\n align = \"center\",\n justify = \"center\",\n className,\n } = options;\n\n return cnb(\n styles({\n active,\n visible,\n clickable,\n absolute,\n }),\n box({\n align,\n justify,\n disablePadding: true,\n }),\n className\n );\n}\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appearActive: \"rmd-overlay--active\",\n appearDone: \"rmd-overlay--active\",\n enterActive: \"rmd-overlay--active\",\n enterDone: \"rmd-overlay--active\",\n };\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,GAAG,QAGE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,2BAA2B,GAC3B,OAAO,MAAME,0BAA6C,IAAI;AAE9D,2BAA2B,GAC3B,OAAO,MAAMC,6BACX;IACEC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\nexport interface PortalProps {\n children: ReactNode;\n /**\n * Setting this to `true` will disable the portal behavior and just render\n * the `children` in the normal DOM tree.\n *\n * @defaultValue `false`\n */\n disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n * return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n const { children, disabled = false } = props;\n const container = usePortalContainer();\n if (!container || disabled) {\n return <>{disabled && children}</>;\n }\n\n return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAalE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}
|
|
1
|
+
{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\nexport interface PortalProps {\n children: ReactNode;\n /**\n * Setting this to `true` will disable the portal behavior and just render\n * the `children` in the normal DOM tree.\n *\n * @defaultValue `false`\n */\n disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n * return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n const { children, disabled = false } = props;\n const container = usePortalContainer();\n if (!container || disabled) {\n return <>{disabled && children}</>;\n }\n\n return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAalE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n type RefObject,\n} from \"react\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type PortalContainer = Element | DocumentFragment | null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function usePortalContainer(): PortalContainer {\n return useContext(context);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface PortalContainerProviderProps {\n /**\n * An optional container element to use. When this is `undefined`, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n */\n container?: PortalContainer | RefObject<PortalContainer>;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link Portal}\n * @remarks \\@since 6.0.0\n */\nexport function PortalContainerProvider(\n props: PortalContainerProviderProps\n): ReactElement {\n const { container, children } = props;\n const [value, setValue] = useState<PortalContainer>(portalContainer);\n useEffect(() => {\n if (container && \"current\" in container) {\n setValue(container.current);\n return;\n }\n\n if (typeof container !== \"undefined\") {\n return;\n }\n\n if (!portalContainer) {\n portalContainer = document.createElement(\"div\");\n portalContainer.id = PORTAL_CONTAINER_ID;\n }\n if (!document.body.contains(portalContainer)) {\n document.body.appendChild(portalContainer);\n }\n\n setValue(portalContainer);\n\n return () => {\n if (portalContainer && document.body.contains(portalContainer)) {\n document.body.removeChild(portalContainer);\n }\n };\n }, [container]);\n\n const containerValue =\n (container && \"current\" in container) || !container ? value : container;\n return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAIH,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}
|
|
1
|
+
{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n type RefObject,\n} from \"react\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type PortalContainer = Element | DocumentFragment | null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function usePortalContainer(): PortalContainer {\n return useContext(context);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface PortalContainerProviderProps {\n /**\n * An optional container element to use. When this is `undefined`, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n */\n container?: PortalContainer | RefObject<PortalContainer>;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link Portal}\n * @remarks \\@since 6.0.0\n */\nexport function PortalContainerProvider(\n props: PortalContainerProviderProps\n): ReactElement {\n const { container, children } = props;\n const [value, setValue] = useState<PortalContainer>(portalContainer);\n useEffect(() => {\n if (container && \"current\" in container) {\n setValue(container.current);\n return;\n }\n\n if (typeof container !== \"undefined\") {\n return;\n }\n\n if (!portalContainer) {\n portalContainer = document.createElement(\"div\");\n portalContainer.id = PORTAL_CONTAINER_ID;\n }\n if (!document.body.contains(portalContainer)) {\n document.body.appendChild(portalContainer);\n }\n\n setValue(portalContainer);\n\n return () => {\n if (portalContainer && document.body.contains(portalContainer)) {\n document.body.removeChild(portalContainer);\n }\n };\n }, [container]);\n\n const containerValue =\n (container && \"current\" in container) || !container ? value : container;\n return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAIH,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/constants.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\nexport const ABOVE_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"above\",\n};\n\nexport const ABOVE_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"above\",\n};\n\nexport const ABOVE_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"above\",\n};\n\nexport const ABOVE_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"above\",\n};\n\nexport const ABOVE_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"above\",\n};\n\nexport const TOP_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"top\",\n};\n\nexport const TOP_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"top\",\n};\n\nexport const TOP_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"top\",\n};\n\nexport const TOP_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"top\",\n};\n\nexport const TOP_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"top\",\n};\n\nexport const CENTER_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"center\",\n};\n\nexport const CENTER_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"center\",\n};\n\nexport const CENTER_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"center\",\n};\n\nexport const CENTER_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"center\",\n};\n\nexport const CENTER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"center\",\n};\n\nexport const BOTTOM_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"bottom\",\n};\n\nexport const BELOW_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"below\",\n};\n\nexport const BELOW_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"below\",\n};\n\nexport const BELOW_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"below\",\n};\n\nexport const BELOW_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"below\",\n};\n\nexport const BELOW_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"below\",\n};\n"],"names":["ABOVE_LEFT_ANCHOR","x","y","ABOVE_INNER_LEFT_ANCHOR","ABOVE_CENTER_ANCHOR","ABOVE_INNER_RIGHT_ANCHOR","ABOVE_RIGHT_ANCHOR","TOP_LEFT_ANCHOR","TOP_INNER_LEFT_ANCHOR","TOP_CENTER_ANCHOR","TOP_INNER_RIGHT_ANCHOR","TOP_RIGHT_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_INNER_LEFT_ANCHOR","CENTER_CENTER_ANCHOR","CENTER_INNER_RIGHT_ANCHOR","CENTER_RIGHT_ANCHOR","BOTTOM_LEFT_ANCHOR","BOTTOM_INNER_LEFT_ANCHOR","BOTTOM_CENTER_ANCHOR","BOTTOM_INNER_RIGHT_ANCHOR","BOTTOM_RIGHT_ANCHOR","BELOW_LEFT_ANCHOR","BELOW_INNER_LEFT_ANCHOR","BELOW_CENTER_ANCHOR","BELOW_INNER_RIGHT_ANCHOR","BELOW_RIGHT_ANCHOR"],"mappings":"AAEA,OAAO,MAAMA,oBAAoC;IAC/CC,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMC,0BAA0C;IACrDF,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAME,sBAAsC;IACjDH,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMG,2BAA2C;IACtDJ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMI,qBAAqC;IAChDL,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMK,kBAAkC;IAC7CN,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMM,wBAAwC;IACnDP,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMO,oBAAoC;IAC/CR,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMQ,yBAAyC;IACpDT,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMS,mBAAmC;IAC9CV,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMU,qBAAqC;IAChDX,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMW,2BAA2C;IACtDZ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMY,uBAAuC;IAClDb,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMa,4BAA4C;IACvDd,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMc,sBAAsC;IACjDf,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMe,qBAAqC;IAChDhB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMgB,2BAA2C;IACtDjB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMiB,uBAAuC;IAClDlB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMkB,4BAA4C;IACvDnB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMmB,sBAAsC;IACjDpB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMoB,oBAAoC;IAC/CrB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMqB,0BAA0C;IACrDtB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMsB,sBAAsC;IACjDvB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMuB,2BAA2C;IACtDxB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMwB,qBAAqC;IAChDzB,GAAG;IACHC,GAAG;AACL,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/constants.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\nexport const ABOVE_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"above\",\n};\n\nexport const ABOVE_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"above\",\n};\n\nexport const ABOVE_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"above\",\n};\n\nexport const ABOVE_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"above\",\n};\n\nexport const ABOVE_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"above\",\n};\n\nexport const TOP_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"top\",\n};\n\nexport const TOP_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"top\",\n};\n\nexport const TOP_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"top\",\n};\n\nexport const TOP_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"top\",\n};\n\nexport const TOP_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"top\",\n};\n\nexport const CENTER_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"center\",\n};\n\nexport const CENTER_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"center\",\n};\n\nexport const CENTER_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"center\",\n};\n\nexport const CENTER_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"center\",\n};\n\nexport const CENTER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"center\",\n};\n\nexport const BOTTOM_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"bottom\",\n};\n\nexport const BOTTOM_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"bottom\",\n};\n\nexport const BELOW_LEFT_ANCHOR: PositionAnchor = {\n x: \"left\",\n y: \"below\",\n};\n\nexport const BELOW_INNER_LEFT_ANCHOR: PositionAnchor = {\n x: \"inner-left\",\n y: \"below\",\n};\n\nexport const BELOW_CENTER_ANCHOR: PositionAnchor = {\n x: \"center\",\n y: \"below\",\n};\n\nexport const BELOW_INNER_RIGHT_ANCHOR: PositionAnchor = {\n x: \"inner-right\",\n y: \"below\",\n};\n\nexport const BELOW_RIGHT_ANCHOR: PositionAnchor = {\n x: \"right\",\n y: \"below\",\n};\n"],"names":["ABOVE_LEFT_ANCHOR","x","y","ABOVE_INNER_LEFT_ANCHOR","ABOVE_CENTER_ANCHOR","ABOVE_INNER_RIGHT_ANCHOR","ABOVE_RIGHT_ANCHOR","TOP_LEFT_ANCHOR","TOP_INNER_LEFT_ANCHOR","TOP_CENTER_ANCHOR","TOP_INNER_RIGHT_ANCHOR","TOP_RIGHT_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_INNER_LEFT_ANCHOR","CENTER_CENTER_ANCHOR","CENTER_INNER_RIGHT_ANCHOR","CENTER_RIGHT_ANCHOR","BOTTOM_LEFT_ANCHOR","BOTTOM_INNER_LEFT_ANCHOR","BOTTOM_CENTER_ANCHOR","BOTTOM_INNER_RIGHT_ANCHOR","BOTTOM_RIGHT_ANCHOR","BELOW_LEFT_ANCHOR","BELOW_INNER_LEFT_ANCHOR","BELOW_CENTER_ANCHOR","BELOW_INNER_RIGHT_ANCHOR","BELOW_RIGHT_ANCHOR"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,MAAMA,oBAAoC;IAC/CC,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMC,0BAA0C;IACrDF,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAME,sBAAsC;IACjDH,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMG,2BAA2C;IACtDJ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMI,qBAAqC;IAChDL,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMK,kBAAkC;IAC7CN,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMM,wBAAwC;IACnDP,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMO,oBAAoC;IAC/CR,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMQ,yBAAyC;IACpDT,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMS,mBAAmC;IAC9CV,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMU,qBAAqC;IAChDX,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMW,2BAA2C;IACtDZ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMY,uBAAuC;IAClDb,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMa,4BAA4C;IACvDd,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMc,sBAAsC;IACjDf,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMe,qBAAqC;IAChDhB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMgB,2BAA2C;IACtDjB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMiB,uBAAuC;IAClDlB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMkB,4BAA4C;IACvDnB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMmB,sBAAsC;IACjDpB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMoB,oBAAoC;IAC/CrB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMqB,0BAA0C;IACrDtB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMsB,sBAAsC;IACjDvB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMuB,2BAA2C;IACtDxB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMwB,qBAAqC;IAChDzB,GAAG;IACHC,GAAG;AACL,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import type { XCoordConfig } from \"./utils.js\";\nimport {\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\nimport type { FixedPositionOptions, HorizontalPosition } from \"./types.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface FixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n > {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredCenter(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(config: FixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: FixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions\n extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n > {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n if (elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n const config: FixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import type { XCoordConfig } from \"./utils.js\";\nimport {\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\nimport type { FixedPositionOptions, HorizontalPosition } from \"./types.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface FixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n > {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredCenter(config: FixConfig): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(config: FixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: FixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions\n extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n > {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n if (elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n const config: FixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import type { YCoordConfig } from \"./utils.js\";\nimport {\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\nimport type { FixedPositionOptions, VerticalPosition } from \"./types.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @remarks \\@since 6.0.0 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface FixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n > {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: FixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredCenter(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: FixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: FixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import type { YCoordConfig } from \"./utils.js\";\nimport {\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\nimport type { FixedPositionOptions, VerticalPosition } from \"./types.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @remarks \\@since 6.0.0 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface FixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n > {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: FixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredCenter(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: FixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: FixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: FixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/getFixedPosition.ts"],"sourcesContent":["import { getScrollbarWidth } from \"../scroll/getScrollbarWidth.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { createHorizontalPosition } from \"./createHorizontalPosition.js\";\nimport { createVerticalPosition } from \"./createVerticalPosition.js\";\nimport type { FixedPosition, FixedPositionOptions } from \"./types.js\";\nimport {\n findSizingContainer,\n getElementRect,\n getTransformOrigin,\n} from \"./utils.js\";\n\n/**\n * This is used when there is no `container` element so that some styles can\n * still be created. The main use-case for this is context menus and when the\n * `initialX` and `initialY` options have been provided.\n *\n * @internal\n * @remarks \\@since 5.0.0\n */\nconst FALLBACK_DOM_RECT: DOMRect = {\n x: 0,\n y: 0,\n height: 0,\n width: 0,\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n toJSON() {\n // do nothing\n },\n};\n\n/**\n * One of the most complicated functions in this project that will attempt to\n * position an element relative to another container element while still being\n * visible within the viewport. Below is the logical flow for attempting to fix\n * the element to the container:\n *\n * No Container: If there is no container element, return the provided x and y\n * positions and no styles since there's nothing we can use to calculate the\n * position.\n *\n * No Element: If the container was provided but the element to position does\n * not exist, return an style object containing the `left` and `top` values for\n * the container and apply as many of the positioning options as possible so\n * that the styles are \"as close as possible\" before the fixed element is added\n * to the DOM. This will also return the provided x and y positions since\n * nothing could be swapped around yet.\n *\n * Container and Element: If both the container and fixed element were provided,\n * apply all the positioning options to the `left` and `top` values of the\n * container based on the sizes of both elements.\n *\n * Now that the `left` and `top` values were applied, check to see if the\n * element is fully visible within the viewport with the provided positioning\n * options. If it is fully visible, do nothing else. If it isn't... follow the\n * next flow:\n *\n * First, check the horizontal sizes and make sure that the element is still\n * within the viewport with the provided view width margin. If it isn't, first\n * try to swap only to a `right` style instead of left to see if that fixes it,\n * otherwise keep both the `left` and `right` styles.\n */\nexport function getFixedPosition(options: FixedPositionOptions): FixedPosition {\n const {\n element,\n anchor = BELOW_CENTER_ANCHOR,\n initialX,\n vwMargin = 16,\n vhMargin = 16,\n xMargin = 0,\n yMargin = 0,\n width: widthType = \"auto\",\n preventOverlap = false,\n transformOrigin = false,\n disableSwapping = false,\n disableVHBounds = false,\n } = options;\n let { initialY } = options;\n const container = findSizingContainer(options.container);\n\n if (process.env.NODE_ENV !== \"production\") {\n if (preventOverlap && anchor.y !== \"above\" && anchor.y !== \"below\") {\n throw new Error(\n 'Unable to prevent overlap when the vertical anchor is not `\"above\"` or `\"below\"`'\n );\n }\n }\n\n if (!element) {\n return {\n actualX: anchor.x,\n actualY: anchor.y,\n style: {\n left: initialX,\n top: initialY,\n position: disableVHBounds ? \"absolute\" : \"fixed\",\n transformOrigin: transformOrigin\n ? getTransformOrigin({ x: anchor.x, y: anchor.y })\n : undefined,\n },\n };\n }\n\n const containerRect = container?.getBoundingClientRect() ?? FALLBACK_DOM_RECT;\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n\n const { minWidth: elMinWidth } = element.style;\n // Note: This makes it \"min-content\" or \"min-container-width\"\n if (widthType === \"min\") {\n element.style.overflow = \"visible\";\n element.style.minWidth = \"\";\n }\n const elementRect = getElementRect(element);\n const { height } = elementRect;\n let elWidth = elementRect.width;\n if (widthType === \"min\") {\n elWidth += getScrollbarWidth();\n element.style.overflow = \"\";\n element.style.minWidth = elMinWidth;\n }\n if (disableVHBounds) {\n const dialog = element.closest(\"[role='dialog']\");\n if (!dialog) {\n initialY = (initialY ?? 0) + window.scrollY;\n }\n }\n\n const { left, right, width, minWidth, actualX } = createHorizontalPosition({\n x: anchor.x,\n vw,\n vwMargin,\n xMargin,\n width: widthType,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n });\n const { top, bottom, actualY, transformOriginY } = createVerticalPosition({\n y: anchor.y,\n vh,\n vhMargin,\n yMargin,\n initialY,\n elHeight: height,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n });\n\n return {\n actualX,\n actualY,\n style: {\n left,\n top,\n right,\n bottom,\n width,\n minWidth,\n position: disableVHBounds ? \"absolute\" : \"fixed\",\n transformOrigin: transformOrigin\n ? getTransformOrigin({\n x: actualX,\n y: actualY,\n transformOriginY,\n })\n : undefined,\n },\n };\n}\n"],"names":["getScrollbarWidth","BELOW_CENTER_ANCHOR","createHorizontalPosition","createVerticalPosition","findSizingContainer","getElementRect","getTransformOrigin","FALLBACK_DOM_RECT","x","y","height","width","left","right","top","bottom","toJSON","getFixedPosition","options","element","anchor","initialX","vwMargin","vhMargin","xMargin","yMargin","widthType","preventOverlap","transformOrigin","disableSwapping","disableVHBounds","initialY","container","process","env","NODE_ENV","Error","actualX","actualY","style","position","undefined","containerRect","getBoundingClientRect","vh","window","innerHeight","vw","innerWidth","minWidth","elMinWidth","overflow","elementRect","elWidth","dialog","closest","scrollY","transformOriginY","elHeight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/getFixedPosition.ts"],"sourcesContent":["import { getScrollbarWidth } from \"../scroll/getScrollbarWidth.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { createHorizontalPosition } from \"./createHorizontalPosition.js\";\nimport { createVerticalPosition } from \"./createVerticalPosition.js\";\nimport type { FixedPosition, FixedPositionOptions } from \"./types.js\";\nimport {\n findSizingContainer,\n getElementRect,\n getTransformOrigin,\n} from \"./utils.js\";\n\n/**\n * This is used when there is no `container` element so that some styles can\n * still be created. The main use-case for this is context menus and when the\n * `initialX` and `initialY` options have been provided.\n *\n * @internal\n * @remarks \\@since 5.0.0\n */\nconst FALLBACK_DOM_RECT: DOMRect = {\n x: 0,\n y: 0,\n height: 0,\n width: 0,\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n toJSON() {\n // do nothing\n },\n};\n\n/**\n * One of the most complicated functions in this project that will attempt to\n * position an element relative to another container element while still being\n * visible within the viewport. Below is the logical flow for attempting to fix\n * the element to the container:\n *\n * No Container: If there is no container element, return the provided x and y\n * positions and no styles since there's nothing we can use to calculate the\n * position.\n *\n * No Element: If the container was provided but the element to position does\n * not exist, return an style object containing the `left` and `top` values for\n * the container and apply as many of the positioning options as possible so\n * that the styles are \"as close as possible\" before the fixed element is added\n * to the DOM. This will also return the provided x and y positions since\n * nothing could be swapped around yet.\n *\n * Container and Element: If both the container and fixed element were provided,\n * apply all the positioning options to the `left` and `top` values of the\n * container based on the sizes of both elements.\n *\n * Now that the `left` and `top` values were applied, check to see if the\n * element is fully visible within the viewport with the provided positioning\n * options. If it is fully visible, do nothing else. If it isn't... follow the\n * next flow:\n *\n * First, check the horizontal sizes and make sure that the element is still\n * within the viewport with the provided view width margin. If it isn't, first\n * try to swap only to a `right` style instead of left to see if that fixes it,\n * otherwise keep both the `left` and `right` styles.\n */\nexport function getFixedPosition(options: FixedPositionOptions): FixedPosition {\n const {\n element,\n anchor = BELOW_CENTER_ANCHOR,\n initialX,\n vwMargin = 16,\n vhMargin = 16,\n xMargin = 0,\n yMargin = 0,\n width: widthType = \"auto\",\n preventOverlap = false,\n transformOrigin = false,\n disableSwapping = false,\n disableVHBounds = false,\n } = options;\n let { initialY } = options;\n const container = findSizingContainer(options.container);\n\n if (process.env.NODE_ENV !== \"production\") {\n if (preventOverlap && anchor.y !== \"above\" && anchor.y !== \"below\") {\n throw new Error(\n 'Unable to prevent overlap when the vertical anchor is not `\"above\"` or `\"below\"`'\n );\n }\n }\n\n if (!element) {\n return {\n actualX: anchor.x,\n actualY: anchor.y,\n style: {\n left: initialX,\n top: initialY,\n position: disableVHBounds ? \"absolute\" : \"fixed\",\n transformOrigin: transformOrigin\n ? getTransformOrigin({ x: anchor.x, y: anchor.y })\n : undefined,\n },\n };\n }\n\n const containerRect = container?.getBoundingClientRect() ?? FALLBACK_DOM_RECT;\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n\n const { minWidth: elMinWidth } = element.style;\n // Note: This makes it \"min-content\" or \"min-container-width\"\n if (widthType === \"min\") {\n element.style.overflow = \"visible\";\n element.style.minWidth = \"\";\n }\n const elementRect = getElementRect(element);\n const { height } = elementRect;\n let elWidth = elementRect.width;\n if (widthType === \"min\") {\n elWidth += getScrollbarWidth();\n element.style.overflow = \"\";\n element.style.minWidth = elMinWidth;\n }\n if (disableVHBounds) {\n const dialog = element.closest(\"[role='dialog']\");\n if (!dialog) {\n initialY = (initialY ?? 0) + window.scrollY;\n }\n }\n\n const { left, right, width, minWidth, actualX } = createHorizontalPosition({\n x: anchor.x,\n vw,\n vwMargin,\n xMargin,\n width: widthType,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n });\n const { top, bottom, actualY, transformOriginY } = createVerticalPosition({\n y: anchor.y,\n vh,\n vhMargin,\n yMargin,\n initialY,\n elHeight: height,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n });\n\n return {\n actualX,\n actualY,\n style: {\n left,\n top,\n right,\n bottom,\n width,\n minWidth,\n position: disableVHBounds ? \"absolute\" : \"fixed\",\n transformOrigin: transformOrigin\n ? getTransformOrigin({\n x: actualX,\n y: actualY,\n transformOriginY,\n })\n : undefined,\n },\n };\n}\n"],"names":["getScrollbarWidth","BELOW_CENTER_ANCHOR","createHorizontalPosition","createVerticalPosition","findSizingContainer","getElementRect","getTransformOrigin","FALLBACK_DOM_RECT","x","y","height","width","left","right","top","bottom","toJSON","getFixedPosition","options","element","anchor","initialX","vwMargin","vhMargin","xMargin","yMargin","widthType","preventOverlap","transformOrigin","disableSwapping","disableVHBounds","initialY","container","process","env","NODE_ENV","Error","actualX","actualY","style","position","undefined","containerRect","getBoundingClientRect","vh","window","innerHeight","vw","innerWidth","minWidth","elMinWidth","overflow","elementRect","elWidth","dialog","closest","scrollY","transformOriginY","elHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/types.ts"],"sourcesContent":["/**\n * Above:\n * - the container top is in-line with the bottom of the element.\n *\n * Below:\n * - the container bottom is in-line with the top of the element\n *\n * Center:\n * - the container center is in-line with the top of the element\n *\n * Top:\n * - the container top is in-line with the top of the element\n *\n * Bottom:\n * - the container bottom is in-line with the bottom of the element\n */\nexport type VerticalPosition = \"above\" | \"below\" | \"center\" | \"top\" | \"bottom\";\n\n/**\n * Left:\n * - the container left is in-line with the right of the element\n *\n * Right:\n * - the container right is in-line with the left of the element\n *\n * Center:\n * - the container's horizontal center point will be aligned with the element's\n * horizontal center point\n *\n * Inner Left:\n * - the container's left is in-line with the left of the element\n *\n * Inner Right:\n * - the container's right is in-line with the right of the element\n */\nexport type HorizontalPosition =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"inner-left\"\n | \"inner-right\";\n\n/**\n * An object containing the x and y positions to anchor a fixed element to\n * another container element.\n */\nexport interface PositionAnchor {\n x: HorizontalPosition;\n y: VerticalPosition;\n}\n\n/**\n * A \"simple\" version of all the positioning options. These are generally used\n * across all of react-md as it'll use the \"center\" version of the opposite type\n * when creating a fixed position.\n */\nexport type SimplePosition = \"above\" | \"below\" | \"left\" | \"right\";\n\n/**\n * An optional configuration for calculating and setting the width of the\n * element relative to the width of the container. When this value is set to\n * `\"auto\"` (default), the width will be based on content width but still\n * ensuring it can fit within the viewport. Setting this to `\"equal\"` will just\n * apply the container's width to the fixed element. Finally, setting this to\n * `\"min\"` will set the container's width as the `minWidth` for the fixed\n * element so that it is at least the same width as the container.\n *\n * If this is set to `\"equal\"` or `\"min\"` and the horizontal anchor is not set\n * to `\"center\"`, an error will be thrown.\n *\n * @defaultValue `\"auto\"`\n */\nexport type PositionWidth = \"auto\" | \"equal\" | \"min\";\n\nexport interface InitialCoords {\n /**\n * The initial x value to use when calculating the position instead of\n * finding the container element to determine the the correct position. All\n * the other positioning logic will still be in effect to ensure the element\n * will be visible within the viewport.\n */\n initialX?: number;\n\n /**\n * The initial y value to use when calculating the position instead of\n * finding the container element to determine the the correct position. All\n * the other positioning logic will still be in effect to ensure the element\n * will be visible within the viewport.\n */\n initialY?: number;\n}\n\n/** @remarks \\@since 4.0.0 */\nexport interface CalculateFixedPositionOptions extends InitialCoords {\n /**\n * The configuration to anchor the fixed element to the container element.\n *\n * @defaultValue `BELOW_CENTER_ANCHOR`\n */\n anchor?: PositionAnchor;\n\n /**\n * The viewwidth margin to apply so that the element doesn't need to be\n * directly on the screen edge.\n *\n * @defaultValue `16`\n */\n vwMargin?: number;\n\n /**\n * The viewwidth margin to apply so that the element doesn't need to be\n * directly on the screen edge.\n *\n * @defaultValue `16`\n */\n vhMargin?: number;\n\n /**\n * The container width margin to apply so that the element doesn't need to be\n * directly on the container's edge.\n *\n * @defaultValue `0`\n */\n xMargin?: number;\n\n /**\n * The container height margin to apply so that the element doesn't need to be\n * directly on the container's edge\n *\n * @defaultValue `0`\n */\n yMargin?: number;\n\n /** {@inheritDoc PositionWidth} */\n width?: PositionWidth;\n\n /**\n * Boolean if the style object should include the `transformOrigin` value\n * based on the x and y positions.\n *\n * @defaultValue `false`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the fixed element should no longer be able to overlap the\n * container element. This is useful for autocomplete menus or other\n * components that retain focus on the container element while the fixed\n * element becomes visible.\n *\n * @defaultValue `false`\n */\n preventOverlap?: boolean;\n\n /**\n * Boolean if the auto-swapping behavior should be disabled. It's normally\n * recommended to not disable this since it'll allow elements to appear off\n * screen.\n *\n * @defaultValue `false`\n * @remarks \\@since 5.0.0 This will always be `true` if the\n * {@link FixedPositionOptions.container} is `null`.\n * \\@remarks \\@since 6.0.0 Allow this to be `false` while the `container` is\n * null. I can't figure out why I prevented that.\n */\n disableSwapping?: boolean;\n\n /**\n * Boolean if the fixed positioning should no longer prevent the fixed element\n * to be positioned within the viewport. This is nice if you want to allow for\n * full page scrolling instead and manually set a max-height on your element.\n *\n * @defaultValue `false`\n */\n disableVHBounds?: boolean;\n}\n\nexport interface FixedPositionOptions extends CalculateFixedPositionOptions {\n /**\n * The container element that the `element` should be fixed to.\n */\n container: HTMLElement | null;\n\n /**\n * The element that is fixed to a `container` element.\n */\n element: HTMLElement | null;\n}\n\n/**\n * This is more of a private interface that is used to help show how fixed\n * elements are placed within the viewport. Most of the time the `top` and\n * `left` values will be provided, but there are a few flows where the `right`\n * and `bottom` could be added or the `top` and `left` are removed.\n *\n * The `width` values will only be used when the `equalWidth` or `minEqualWidth`\n * options are enabled.\n *\n * @internal\n */\nexport interface Coords {\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n width?: number;\n minWidth?: number;\n}\n\n/**\n * The style object that should be applied to the fixed element so it will be\n * fixed to the container element. This will be `undefined` if the container\n * element doesn't exist within the DOM.\n *\n * Note: The fixed element styles **will not** contain styles for `z-index` or\n * `background-color` so you'll need to add that manually.\n *\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositionStyle extends Coords {\n /**\n * This will be `\"fixed\"` unless\n * {@link CalculateFixedPositionOptions.disableVHBounds} is set to `true`.\n */\n position: \"fixed\" | \"absolute\";\n\n /**\n * This will be `undefined` unless\n * {@link CalculateFixedPositionOptions.transformOrigin} is set to `true`\n */\n transformOrigin?: string;\n}\n\n/**\n * Since the position can be \"swapped\" to help fit the fixed element within the\n * viewport, this interface is used to contain the calculated positions as well\n * as an optional style object to apply.\n */\nexport interface FixedPosition {\n /**\n * The calculated horizontal position that can be used to compare to the\n * provided horizontal position anchor if additional manual updates should be\n * applied.\n */\n actualX: HorizontalPosition;\n\n /**\n * The calculated vertical position that can be used to compare to the\n * provided horizontal position anchor if additional manual updates should be\n * applied.\n */\n actualY: VerticalPosition;\n /** {@inheritDoc FixedPositionStyle} */\n style?: FixedPositionStyle;\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GA0ND;;;;CAIC,GACD,WAgBC"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/types.ts"],"sourcesContent":["/**\n * Above:\n * - the container top is in-line with the bottom of the element.\n *\n * Below:\n * - the container bottom is in-line with the top of the element\n *\n * Center:\n * - the container center is in-line with the top of the element\n *\n * Top:\n * - the container top is in-line with the top of the element\n *\n * Bottom:\n * - the container bottom is in-line with the bottom of the element\n */\nexport type VerticalPosition = \"above\" | \"below\" | \"center\" | \"top\" | \"bottom\";\n\n/**\n * Left:\n * - the container left is in-line with the right of the element\n *\n * Right:\n * - the container right is in-line with the left of the element\n *\n * Center:\n * - the container's horizontal center point will be aligned with the element's\n * horizontal center point\n *\n * Inner Left:\n * - the container's left is in-line with the left of the element\n *\n * Inner Right:\n * - the container's right is in-line with the right of the element\n */\nexport type HorizontalPosition =\n | \"left\"\n | \"right\"\n | \"center\"\n | \"inner-left\"\n | \"inner-right\";\n\n/**\n * An object containing the x and y positions to anchor a fixed element to\n * another container element.\n */\nexport interface PositionAnchor {\n x: HorizontalPosition;\n y: VerticalPosition;\n}\n\n/**\n * A \"simple\" version of all the positioning options. These are generally used\n * across all of react-md as it'll use the \"center\" version of the opposite type\n * when creating a fixed position.\n */\nexport type SimplePosition = \"above\" | \"below\" | \"left\" | \"right\";\n\n/**\n * An optional configuration for calculating and setting the width of the\n * element relative to the width of the container. When this value is set to\n * `\"auto\"` (default), the width will be based on content width but still\n * ensuring it can fit within the viewport. Setting this to `\"equal\"` will just\n * apply the container's width to the fixed element. Finally, setting this to\n * `\"min\"` will set the container's width as the `minWidth` for the fixed\n * element so that it is at least the same width as the container.\n *\n * If this is set to `\"equal\"` or `\"min\"` and the horizontal anchor is not set\n * to `\"center\"`, an error will be thrown.\n *\n * @defaultValue `\"auto\"`\n */\nexport type PositionWidth = \"auto\" | \"equal\" | \"min\";\n\nexport interface InitialCoords {\n /**\n * The initial x value to use when calculating the position instead of\n * finding the container element to determine the the correct position. All\n * the other positioning logic will still be in effect to ensure the element\n * will be visible within the viewport.\n */\n initialX?: number;\n\n /**\n * The initial y value to use when calculating the position instead of\n * finding the container element to determine the the correct position. All\n * the other positioning logic will still be in effect to ensure the element\n * will be visible within the viewport.\n */\n initialY?: number;\n}\n\n/** @remarks \\@since 4.0.0 */\nexport interface CalculateFixedPositionOptions extends InitialCoords {\n /**\n * The configuration to anchor the fixed element to the container element.\n *\n * @defaultValue `BELOW_CENTER_ANCHOR`\n */\n anchor?: PositionAnchor;\n\n /**\n * The viewwidth margin to apply so that the element doesn't need to be\n * directly on the screen edge.\n *\n * @defaultValue `16`\n */\n vwMargin?: number;\n\n /**\n * The viewwidth margin to apply so that the element doesn't need to be\n * directly on the screen edge.\n *\n * @defaultValue `16`\n */\n vhMargin?: number;\n\n /**\n * The container width margin to apply so that the element doesn't need to be\n * directly on the container's edge.\n *\n * @defaultValue `0`\n */\n xMargin?: number;\n\n /**\n * The container height margin to apply so that the element doesn't need to be\n * directly on the container's edge\n *\n * @defaultValue `0`\n */\n yMargin?: number;\n\n /** {@inheritDoc PositionWidth} */\n width?: PositionWidth;\n\n /**\n * Boolean if the style object should include the `transformOrigin` value\n * based on the x and y positions.\n *\n * @defaultValue `false`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the fixed element should no longer be able to overlap the\n * container element. This is useful for autocomplete menus or other\n * components that retain focus on the container element while the fixed\n * element becomes visible.\n *\n * @defaultValue `false`\n */\n preventOverlap?: boolean;\n\n /**\n * Boolean if the auto-swapping behavior should be disabled. It's normally\n * recommended to not disable this since it'll allow elements to appear off\n * screen.\n *\n * @defaultValue `false`\n * @remarks \\@since 5.0.0 This will always be `true` if the\n * {@link FixedPositionOptions.container} is `null`.\n * \\@remarks \\@since 6.0.0 Allow this to be `false` while the `container` is\n * null. I can't figure out why I prevented that.\n */\n disableSwapping?: boolean;\n\n /**\n * Boolean if the fixed positioning should no longer prevent the fixed element\n * to be positioned within the viewport. This is nice if you want to allow for\n * full page scrolling instead and manually set a max-height on your element.\n *\n * @defaultValue `false`\n */\n disableVHBounds?: boolean;\n}\n\nexport interface FixedPositionOptions extends CalculateFixedPositionOptions {\n /**\n * The container element that the `element` should be fixed to.\n */\n container: HTMLElement | null;\n\n /**\n * The element that is fixed to a `container` element.\n */\n element: HTMLElement | null;\n}\n\n/**\n * This is more of a private interface that is used to help show how fixed\n * elements are placed within the viewport. Most of the time the `top` and\n * `left` values will be provided, but there are a few flows where the `right`\n * and `bottom` could be added or the `top` and `left` are removed.\n *\n * The `width` values will only be used when the `equalWidth` or `minEqualWidth`\n * options are enabled.\n *\n * @internal\n */\nexport interface Coords {\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n width?: number;\n minWidth?: number;\n}\n\n/**\n * The style object that should be applied to the fixed element so it will be\n * fixed to the container element. This will be `undefined` if the container\n * element doesn't exist within the DOM.\n *\n * Note: The fixed element styles **will not** contain styles for `z-index` or\n * `background-color` so you'll need to add that manually.\n *\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositionStyle extends Coords {\n /**\n * This will be `\"fixed\"` unless\n * {@link CalculateFixedPositionOptions.disableVHBounds} is set to `true`.\n */\n position: \"fixed\" | \"absolute\";\n\n /**\n * This will be `undefined` unless\n * {@link CalculateFixedPositionOptions.transformOrigin} is set to `true`\n */\n transformOrigin?: string;\n}\n\n/**\n * Since the position can be \"swapped\" to help fit the fixed element within the\n * viewport, this interface is used to contain the calculated positions as well\n * as an optional style object to apply.\n */\nexport interface FixedPosition {\n /**\n * The calculated horizontal position that can be used to compare to the\n * provided horizontal position anchor if additional manual updates should be\n * applied.\n */\n actualX: HorizontalPosition;\n\n /**\n * The calculated vertical position that can be used to compare to the\n * provided horizontal position anchor if additional manual updates should be\n * applied.\n */\n actualY: VerticalPosition;\n /** {@inheritDoc FixedPositionStyle} */\n style?: FixedPositionStyle;\n}\n"],"names":[],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GA0ND;;;;CAIC,GACD,WAgBC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\nimport type { CSSProperties, Ref, RefCallback, RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport type { TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport type { CalculateFixedPositionOptions } from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\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 FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @remarks \\@since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningHookReturnValue<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * @see {@link FixedPositionStyle}\n */\n style: CSSProperties;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle(): void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useCSSTransition, useFixedPositioning } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button\n * ref={fixedTo}\n * onClick={() => setTransitionIn(!transitionIn)}\n * >\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningHookReturnValue<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX and initialY should cause the useEffect below\n // to trigger, which is why everything else is set in a ref.\n }, [initialX, initialY]);\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\nimport type { CSSProperties, Ref, RefCallback, RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport type { TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport type { CalculateFixedPositionOptions } from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\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 FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @remarks \\@since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport interface FixedPositioningHookReturnValue<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * @see {@link FixedPositionStyle}\n */\n style: CSSProperties;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle(): void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useCSSTransition, useFixedPositioning } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button\n * ref={fixedTo}\n * onClick={() => setTransitionIn(!transitionIn)}\n * >\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @remarks \\@since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningHookReturnValue<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX and initialY should cause the useEffect below\n // to trigger, which is why everything else is set in a ref.\n }, [initialX, initialY]);\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n default:\n x = \"0\";\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n default:\n y = \"0\";\n }\n }\n\n return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n el: HTMLElement | null\n): HTMLElement | null {\n if (!el) {\n return null;\n }\n\n if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.getAttribute(\"data-sizing-selector\");\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement || document.body;\n parent.appendChild(cloned);\n\n const rect = cloned.getBoundingClientRect();\n parent.removeChild(cloned);\n\n return rect;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n default:\n x = \"0\";\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n default:\n y = \"0\";\n }\n }\n\n return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n el: HTMLElement | null\n): HTMLElement | null {\n if (!el) {\n return null;\n }\n\n if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.getAttribute(\"data-sizing-selector\");\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement || document.body;\n parent.appendChild(cloned);\n\n const rect = cloned.getBoundingClientRect();\n parent.removeChild(cloned);\n\n return rect;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useMemo,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * Removed the `determinateRotateDegrees` prop since the determinate state no\n * longer rotates while increasing value.\n * Added the `disableShrink` prop.\n * Renamed the `small` prop to `dense` to match other components.\n */\nexport interface CircularProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps {\n /**\n * An optional style to apply to the svg within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n svgStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the svg within the circular progress.\n */\n svgClassName?: string;\n\n /**\n * An optional style to apply to the circle within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n circleStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the circle within the circular progress.\n */\n circleClassName?: string;\n\n /**\n * The radius for the circle. It is generally recommended to have the radius\n * be 1/2 of the viewbox and minus a few more pixels so that there is some\n * surrounding padding. You probably shouldn't really be changing this prop\n * though.\n *\n * @defaultValue `30`\n */\n radius?: number;\n\n /**\n * The center point for the circle. This should be half of the `viewBox` prop\n * 99% of the time and probably won't be changed.\n *\n * @defaultValue `33`\n */\n center?: number;\n\n /**\n * The viewbox for the child svg. I wouldn't recommend changing this value as\n * you will also need to update the `dashoffset` in both Sass and this prop to\n * get the animation to look nice again.\n *\n * @defaultValue `0 0 66 66`\n */\n viewBox?: string;\n\n /**\n * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n * be changing this value that much as it should match the\n * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n * to help to create the determinate progress animation.\n *\n * @defaultValue `187`\n */\n dashoffset?: number;\n\n /**\n * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n */\n disableCentered?: boolean;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to update the indeterminate behavior to only rotate\n * which will increase performance during CPU-intensive tasks or when many\n * loading spinners are displayed at once on the page.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n const {\n id: propId,\n className,\n svgStyle,\n svgClassName,\n circleStyle: propCircleStyle,\n circleClassName,\n value,\n min = 0,\n max = 100,\n radius = 30,\n center = 33,\n viewBox = \"0 0 66 66\",\n theme = \"primary\",\n dense = false,\n dashoffset = 187,\n disableShrink = false,\n disableCentered = false,\n disableTransition = false,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"circular-progress\");\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n\n const circleStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propCircleStyle;\n }\n\n return {\n ...propCircleStyle,\n strokeDashoffset: dashoffset - dashoffset * progress,\n };\n }, [progress, propCircleStyle, dashoffset]);\n\n const determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <svg\n style={svgStyle}\n className={cnb(\n styles(\"svg\", {\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n svgClassName\n )}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={cnb(\n styles(\"circle\", {\n animate: !disableTransition && determinate,\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n circleClassName\n )}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useMemo,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * Removed the `determinateRotateDegrees` prop since the determinate state no\n * longer rotates while increasing value.\n * Added the `disableShrink` prop.\n * Renamed the `small` prop to `dense` to match other components.\n */\nexport interface CircularProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps {\n /**\n * An optional style to apply to the svg within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n svgStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the svg within the circular progress.\n */\n svgClassName?: string;\n\n /**\n * An optional style to apply to the circle within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n circleStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the circle within the circular progress.\n */\n circleClassName?: string;\n\n /**\n * The radius for the circle. It is generally recommended to have the radius\n * be 1/2 of the viewbox and minus a few more pixels so that there is some\n * surrounding padding. You probably shouldn't really be changing this prop\n * though.\n *\n * @defaultValue `30`\n */\n radius?: number;\n\n /**\n * The center point for the circle. This should be half of the `viewBox` prop\n * 99% of the time and probably won't be changed.\n *\n * @defaultValue `33`\n */\n center?: number;\n\n /**\n * The viewbox for the child svg. I wouldn't recommend changing this value as\n * you will also need to update the `dashoffset` in both Sass and this prop to\n * get the animation to look nice again.\n *\n * @defaultValue `0 0 66 66`\n */\n viewBox?: string;\n\n /**\n * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n * be changing this value that much as it should match the\n * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n * to help to create the determinate progress animation.\n *\n * @defaultValue `187`\n */\n dashoffset?: number;\n\n /**\n * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n */\n disableCentered?: boolean;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to update the indeterminate behavior to only rotate\n * which will increase performance during CPU-intensive tasks or when many\n * loading spinners are displayed at once on the page.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n const {\n id: propId,\n className,\n svgStyle,\n svgClassName,\n circleStyle: propCircleStyle,\n circleClassName,\n value,\n min = 0,\n max = 100,\n radius = 30,\n center = 33,\n viewBox = \"0 0 66 66\",\n theme = \"primary\",\n dense = false,\n dashoffset = 187,\n disableShrink = false,\n disableCentered = false,\n disableTransition = false,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"circular-progress\");\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n\n const circleStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propCircleStyle;\n }\n\n return {\n ...propCircleStyle,\n strokeDashoffset: dashoffset - dashoffset * progress,\n };\n }, [progress, propCircleStyle, dashoffset]);\n\n const determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <svg\n style={svgStyle}\n className={cnb(\n styles(\"svg\", {\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n svgClassName\n )}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={cnb(\n styles(\"circle\", {\n animate: !disableTransition && determinate,\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n circleClassName\n )}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useMemo,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n min = 0,\n max = 100,\n value,\n reverse = false,\n theme = \"primary\",\n disableTransition = false,\n vertical = false,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <span\n style={barStyle}\n className={cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && determinate,\n determinate,\n indeterminate,\n \"determinate-reverse\": determinate && reverse && !vertical,\n \"determinate-vertical-reverse\": determinate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\":\n indeterminate && reverse && vertical,\n }),\n barClassName\n )}\n />\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,CAAC,EAAEF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useMemo,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n min = 0,\n max = 100,\n value,\n reverse = false,\n theme = \"primary\",\n disableTransition = false,\n vertical = false,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <span\n style={barStyle}\n className={cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && determinate,\n determinate,\n indeterminate,\n \"determinate-reverse\": determinate && reverse && !vertical,\n \"determinate-vertical-reverse\": determinate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\":\n indeterminate && reverse && vertical,\n }),\n barClassName\n )}\n />\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,CAAC,EAAEF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/getProgressA11y.ts"],"sourcesContent":["export interface ProgressA11y {\n \"aria-busy\": true;\n \"aria-describedby\": string;\n}\n\n/**\n * An extremely simple util that can be used to get the required a11y props for\n * another component that relies on a progress component.\n *\n * @param progressId - The id for the progress bar\n * @param progressing - Boolean if the progress bar is visible and progressing\n */\nexport function getProgressA11y(\n progressId: string,\n progressing: boolean\n): ProgressA11y | undefined {\n if (!progressing) {\n return undefined;\n }\n\n return {\n \"aria-busy\": true,\n \"aria-describedby\": progressId,\n };\n}\n"],"names":["getProgressA11y","progressId","progressing","undefined"],"mappings":"AAKA;;;;;;CAMC,GACD,OAAO,SAASA,gBACdC,UAAkB,EAClBC,WAAoB;IAEpB,IAAI,CAACA,aAAa;QAChB,OAAOC;IACT;IAEA,OAAO;QACL,aAAa;QACb,oBAAoBF;IACtB;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/progress/getProgressA11y.ts"],"sourcesContent":["export interface ProgressA11y {\n \"aria-busy\": true;\n \"aria-describedby\": string;\n}\n\n/**\n * An extremely simple util that can be used to get the required a11y props for\n * another component that relies on a progress component.\n *\n * @param progressId - The id for the progress bar\n * @param progressing - Boolean if the progress bar is visible and progressing\n */\nexport function getProgressA11y(\n progressId: string,\n progressing: boolean\n): ProgressA11y | undefined {\n if (!progressing) {\n return undefined;\n }\n\n return {\n \"aria-busy\": true,\n \"aria-describedby\": progressId,\n };\n}\n"],"names":["getProgressA11y","progressId","progressing","undefined"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAKA;;;;;;CAMC,GACD,OAAO,SAASA,gBACdC,UAAkB,EAClBC,WAAoB;IAEpB,IAAI,CAACA,aAAa;QAChB,OAAOC;IACT;IAEA,OAAO;QACL,aAAa;QACb,oBAAoBF;IACtB;AACF"}
|