@lidofinance/lido-ui 3.32.0 → 3.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/accordion/Accordion.js +6 -3
- package/dist/cjs/accordion/Accordion.js.map +1 -1
- package/dist/cjs/accordion/AccordionStyles.js +8 -8
- package/dist/cjs/accordion/AccordionStyles.js.map +1 -1
- package/dist/cjs/accordion/useExpanded.js.map +1 -1
- package/dist/cjs/address/Address.js +2 -1
- package/dist/cjs/address/Address.js.map +1 -1
- package/dist/cjs/address/AddressStyles.js.map +1 -1
- package/dist/cjs/address/trimAddress.js.map +1 -1
- package/dist/cjs/addressBadge/AddressBadge.js.map +1 -1
- package/dist/cjs/addressBadge/AddressBadgeStyles.js.map +1 -1
- package/dist/cjs/block/Block.js.map +1 -1
- package/dist/cjs/block/BlockStyles.js.map +1 -1
- package/dist/cjs/block/types.js.map +1 -1
- package/dist/cjs/box/Box.js.map +1 -1
- package/dist/cjs/button/Button.js.map +1 -1
- package/dist/cjs/button/ButtonIcon.js.map +1 -1
- package/dist/cjs/button/ButtonIconStyles.js.map +1 -1
- package/dist/cjs/button/ButtonStyles.js +42 -46
- package/dist/cjs/button/ButtonStyles.js.map +1 -1
- package/dist/cjs/button/types.js.map +1 -1
- package/dist/cjs/button/useRipple.js +1 -1
- package/dist/cjs/button/useRipple.js.map +1 -1
- package/dist/cjs/chart-line/ChartLine.js +0 -3
- package/dist/cjs/chart-line/ChartLine.js.map +1 -1
- package/dist/cjs/chart-line/ChartLineLabel.js +0 -1
- package/dist/cjs/chart-line/ChartLineLabel.js.map +1 -1
- package/dist/cjs/chart-line/ChartLineStyles.js +16 -28
- package/dist/cjs/chart-line/ChartLineStyles.js.map +1 -1
- package/dist/cjs/chart-line/types.js.map +1 -1
- package/dist/cjs/chart-line/utils/checkViewport.js +1 -0
- package/dist/cjs/chart-line/utils/checkViewport.js.map +1 -1
- package/dist/cjs/chart-line/utils/constants.js.map +1 -1
- package/dist/cjs/chart-line/utils/getContainerSize.js +0 -2
- package/dist/cjs/chart-line/utils/getContainerSize.js.map +1 -1
- package/dist/cjs/chart-line/utils/handlePositioning.js +30 -32
- package/dist/cjs/chart-line/utils/handlePositioning.js.map +1 -1
- package/dist/cjs/chart-line/utils/processData.js +2 -1
- package/dist/cjs/chart-line/utils/processData.js.map +1 -1
- package/dist/cjs/chart-proportion/ChartProportion.js +0 -2
- package/dist/cjs/chart-proportion/ChartProportion.js.map +1 -1
- package/dist/cjs/chart-proportion/ChartProportionStyles.js +0 -5
- package/dist/cjs/chart-proportion/ChartProportionStyles.js.map +1 -1
- package/dist/cjs/chart-proportion/types.js.map +1 -1
- package/dist/cjs/checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/checkbox/CheckboxStyles.js.map +1 -1
- package/dist/cjs/chip/Chip.js.map +1 -1
- package/dist/cjs/chip/ChipStyles.js.map +1 -1
- package/dist/cjs/chip/types.js.map +1 -1
- package/dist/cjs/container/Container.js.map +1 -1
- package/dist/cjs/container/ContainerStyles.js.map +1 -1
- package/dist/cjs/container/types.js.map +1 -1
- package/dist/cjs/content-theme/content-theme.js +4 -2
- package/dist/cjs/content-theme/content-theme.js.map +1 -1
- package/dist/cjs/content-theme/styles.js.map +1 -1
- package/dist/cjs/cookie-theme-toggler/cookie-theme-toggler.js.map +1 -1
- package/dist/cjs/cookie-theme-toggler/styles.js.map +1 -1
- package/dist/cjs/cookies-tooltip/constants.js.map +1 -1
- package/dist/cjs/cookies-tooltip/cookies-tooltip.js +4 -3
- package/dist/cjs/cookies-tooltip/cookies-tooltip.js.map +1 -1
- package/dist/cjs/cookies-tooltip/styles.js.map +1 -1
- package/dist/cjs/cookies-tooltip/utils.js +2 -7
- package/dist/cjs/cookies-tooltip/utils.js.map +1 -1
- package/dist/cjs/data-table/DataTable.js.map +1 -1
- package/dist/cjs/data-table/DataTableStyles.js.map +1 -1
- package/dist/cjs/divider/Divider.js.map +1 -1
- package/dist/cjs/divider/DividerStyles.js +0 -1
- package/dist/cjs/divider/DividerStyles.js.map +1 -1
- package/dist/cjs/divider/types.js.map +1 -1
- package/dist/cjs/heading/Heading.js.map +1 -1
- package/dist/cjs/heading/HeadingStyles.js +0 -2
- package/dist/cjs/heading/HeadingStyles.js.map +1 -1
- package/dist/cjs/heading/types.js.map +1 -1
- package/dist/cjs/hooks/useBreakpoint.js +0 -2
- package/dist/cjs/hooks/useBreakpoint.js.map +1 -1
- package/dist/cjs/hooks/useEscape.js.map +1 -1
- package/dist/cjs/hooks/useInterceptFocus.js.map +1 -1
- package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +1 -0
- package/dist/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/cjs/hooks/useLockScroll.js +0 -6
- package/dist/cjs/hooks/useLockScroll.js.map +1 -1
- package/dist/cjs/hooks/useMergeRefs.js.map +1 -1
- package/dist/cjs/hooks/useOutsideClick.js.map +1 -1
- package/dist/cjs/hooks/useSystemTheme.js +0 -2
- package/dist/cjs/hooks/useSystemTheme.js.map +1 -1
- package/dist/cjs/hooks/useWindowSize.js +0 -1
- package/dist/cjs/hooks/useWindowSize.js.map +1 -1
- package/dist/cjs/icons/index.js +1 -0
- package/dist/cjs/icons/index.js.map +1 -1
- package/dist/cjs/identicon/Identicon.js +4 -3
- package/dist/cjs/identicon/Identicon.js.map +1 -1
- package/dist/cjs/identicon/IdenticonBadge.js.map +1 -1
- package/dist/cjs/identicon/IdenticonStyles.js.map +1 -1
- package/dist/cjs/identicon/types.js.map +1 -1
- package/dist/cjs/input/Input.js +0 -1
- package/dist/cjs/input/Input.js.map +1 -1
- package/dist/cjs/input/InputGroup.js.map +1 -1
- package/dist/cjs/input/InputGroupStyles.js.map +1 -1
- package/dist/cjs/input/InputStyles.js +36 -36
- package/dist/cjs/input/InputStyles.js.map +1 -1
- package/dist/cjs/input/LabelStyles.js.map +1 -1
- package/dist/cjs/input/OptionsSlider.js +0 -5
- package/dist/cjs/input/OptionsSlider.js.map +1 -1
- package/dist/cjs/input/SliderInput.js +0 -2
- package/dist/cjs/input/SliderInput.js.map +1 -1
- package/dist/cjs/input/SliderInputStyles.js.map +1 -1
- package/dist/cjs/input/Textarea.js +0 -1
- package/dist/cjs/input/Textarea.js.map +1 -1
- package/dist/cjs/input/types.js.map +1 -1
- package/dist/cjs/lido-logo/LidoLogo.js +2 -1
- package/dist/cjs/lido-logo/LidoLogo.js.map +1 -1
- package/dist/cjs/lido-logo/LidoLogoStyles.js.map +1 -1
- package/dist/cjs/link/Link.js.map +1 -1
- package/dist/cjs/link/LinkStyles.js.map +1 -1
- package/dist/cjs/loaders/InlineLoader.js +0 -2
- package/dist/cjs/loaders/InlineLoader.js.map +1 -1
- package/dist/cjs/loaders/InlineLoaderStyles.js.map +1 -1
- package/dist/cjs/loaders/Loader.js.map +1 -1
- package/dist/cjs/loaders/LoaderStyles.js.map +1 -1
- package/dist/cjs/loaders/types.js.map +1 -1
- package/dist/cjs/main-menu/MainMenu.js.map +1 -1
- package/dist/cjs/main-menu/MainMenuItem.js.map +1 -1
- package/dist/cjs/main-menu/MainMenuItemStyles.js.map +1 -1
- package/dist/cjs/main-menu/MainMenuStyles.js.map +1 -1
- package/dist/cjs/modal/Modal.js +0 -2
- package/dist/cjs/modal/Modal.js.map +1 -1
- package/dist/cjs/modal/ModalButton.js +2 -1
- package/dist/cjs/modal/ModalButton.js.map +1 -1
- package/dist/cjs/modal/ModalButtonStyles.js.map +1 -1
- package/dist/cjs/modal/ModalExtra.js +2 -1
- package/dist/cjs/modal/ModalExtra.js.map +1 -1
- package/dist/cjs/modal/ModalExtraStyles.js.map +1 -1
- package/dist/cjs/modal/ModalOverlay.js +1 -1
- package/dist/cjs/modal/ModalOverlay.js.map +1 -1
- package/dist/cjs/modal/ModalOverlayStyles.js +0 -3
- package/dist/cjs/modal/ModalOverlayStyles.js.map +1 -1
- package/dist/cjs/modal/ModalStyles.js.map +1 -1
- package/dist/cjs/modal/constants.js.map +1 -1
- package/dist/cjs/modal/types.js.map +1 -1
- package/dist/cjs/modal/useModalClose.js.map +1 -1
- package/dist/cjs/modal/useModalFocus.js +0 -3
- package/dist/cjs/modal/useModalFocus.js.map +1 -1
- package/dist/cjs/pagination/Pagination.js +2 -11
- package/dist/cjs/pagination/Pagination.js.map +1 -1
- package/dist/cjs/pagination/PaginationItem.js.map +1 -1
- package/dist/cjs/pagination/PaginationItemStyles.js.map +1 -1
- package/dist/cjs/pagination/getShowingPages.js +2 -29
- package/dist/cjs/pagination/getShowingPages.js.map +1 -1
- package/dist/cjs/pagination/types.js.map +1 -1
- package/dist/cjs/popover/Popover.js.map +1 -1
- package/dist/cjs/popover/PopoverRoot.js +3 -2
- package/dist/cjs/popover/PopoverRoot.js.map +1 -1
- package/dist/cjs/popover/PopoverRootStyles.js +0 -2
- package/dist/cjs/popover/PopoverRootStyles.js.map +1 -1
- package/dist/cjs/popover/PopoverStyles.js +0 -1
- package/dist/cjs/popover/PopoverStyles.js.map +1 -1
- package/dist/cjs/popover/calculatePosition.js +0 -11
- package/dist/cjs/popover/calculatePosition.js.map +1 -1
- package/dist/cjs/popover/constants.js.map +1 -1
- package/dist/cjs/popover/types.js.map +1 -1
- package/dist/cjs/popover/usePopoverPosition.js +2 -1
- package/dist/cjs/popover/usePopoverPosition.js.map +1 -1
- package/dist/cjs/popup-menu/PopupMenu.js.map +1 -1
- package/dist/cjs/popup-menu/PopupMenuItem.js.map +1 -1
- package/dist/cjs/popup-menu/PopupMenuItemStyles.js.map +1 -1
- package/dist/cjs/popup-menu/PopupMenuProvider.js.map +1 -1
- package/dist/cjs/popup-menu/PopupMenuStyles.js.map +1 -1
- package/dist/cjs/popup-menu/constants.js.map +1 -1
- package/dist/cjs/popup-menu/types.js.map +1 -1
- package/dist/cjs/popup-menu/usePopupFocus.js.map +1 -1
- package/dist/cjs/section/Section.js +2 -1
- package/dist/cjs/section/Section.js.map +1 -1
- package/dist/cjs/section/SectionStyles.js.map +1 -1
- package/dist/cjs/select/Option.js.map +1 -1
- package/dist/cjs/select/Select.js.map +1 -1
- package/dist/cjs/select/SelectArrow.js +4 -2
- package/dist/cjs/select/SelectArrow.js.map +1 -1
- package/dist/cjs/select/SelectArrowStyles.js.map +1 -1
- package/dist/cjs/select/SelectIcon.js +2 -1
- package/dist/cjs/select/SelectIcon.js.map +1 -1
- package/dist/cjs/select/SelectIconStyles.js +1 -2
- package/dist/cjs/select/SelectIconStyles.js.map +1 -1
- package/dist/cjs/select/SelectStyles.js.map +1 -1
- package/dist/cjs/select/types.js.map +1 -1
- package/dist/cjs/select/useSelect.js +0 -3
- package/dist/cjs/select/useSelect.js.map +1 -1
- package/dist/cjs/select/useSelectWidth.js.map +1 -1
- package/dist/cjs/service-page/ServicePage.js +2 -1
- package/dist/cjs/service-page/ServicePage.js.map +1 -1
- package/dist/cjs/service-page/ServicePageStyles.js.map +1 -1
- package/dist/cjs/stack/HStack.js.map +1 -1
- package/dist/cjs/stack/Stack.js.map +1 -1
- package/dist/cjs/stack/StackItem.js.map +1 -1
- package/dist/cjs/stack/StackItemStyles.js.map +1 -1
- package/dist/cjs/stack/StackProvider.js.map +1 -1
- package/dist/cjs/stack/StackStyles.js.map +1 -1
- package/dist/cjs/stack/VStack.js.map +1 -1
- package/dist/cjs/stack/types.js.map +1 -1
- package/dist/cjs/styled-system/withStyledSystem.js +3 -2
- package/dist/cjs/styled-system/withStyledSystem.js.map +1 -1
- package/dist/cjs/table/Table.js.map +1 -1
- package/dist/cjs/table/Tbody.js.map +1 -1
- package/dist/cjs/table/Td.js.map +1 -1
- package/dist/cjs/table/Tfoot.js.map +1 -1
- package/dist/cjs/table/Th.js.map +1 -1
- package/dist/cjs/table/Thead.js.map +1 -1
- package/dist/cjs/table/Tr.js.map +1 -1
- package/dist/cjs/table/styles.js +0 -1
- package/dist/cjs/table/styles.js.map +1 -1
- package/dist/cjs/table/types.js.map +1 -1
- package/dist/cjs/text/Text.js.map +1 -1
- package/dist/cjs/text/TextStyles.js +0 -6
- package/dist/cjs/text/TextStyles.js.map +1 -1
- package/dist/cjs/text/types.js.map +1 -1
- package/dist/cjs/theme/base/borders.js.map +1 -1
- package/dist/cjs/theme/base/breakpoints.js.map +1 -1
- package/dist/cjs/theme/base/colors.js.map +1 -1
- package/dist/cjs/theme/base/index.js +2 -1
- package/dist/cjs/theme/base/index.js.map +1 -1
- package/dist/cjs/theme/base/shadows.js.map +1 -1
- package/dist/cjs/theme/base/spacing.js.map +1 -1
- package/dist/cjs/theme/base/transitions.js.map +1 -1
- package/dist/cjs/theme/base/typography.js.map +1 -1
- package/dist/cjs/theme/constants.js.map +1 -1
- package/dist/cjs/theme/cookie-theme-provider.js +34 -30
- package/dist/cjs/theme/cookie-theme-provider.js.map +1 -1
- package/dist/cjs/theme/document-head-contents/element-fonts.js.map +1 -1
- package/dist/cjs/theme/document-head-contents/element-theme-colors.js +2 -4
- package/dist/cjs/theme/document-head-contents/element-theme-colors.js.map +1 -1
- package/dist/cjs/theme/document-head-contents/element-theme-script.js +5 -13
- package/dist/cjs/theme/document-head-contents/element-theme-script.js.map +1 -1
- package/dist/cjs/theme/document-head-contents/index.js.map +1 -1
- package/dist/cjs/theme/hooks.js.map +1 -1
- package/dist/cjs/theme/theme-provider.js +6 -3
- package/dist/cjs/theme/theme-provider.js.map +1 -1
- package/dist/cjs/theme/themes.js +8 -4
- package/dist/cjs/theme/themes.js.map +1 -1
- package/dist/cjs/theme/utils/cookies-migration.js +0 -4
- package/dist/cjs/theme/utils/cookies-migration.js.map +1 -1
- package/dist/cjs/theme/utils/cookies.js +3 -2
- package/dist/cjs/theme/utils/cookies.js.map +1 -1
- package/dist/cjs/theme/utils/generate-css-color-variables.js +0 -4
- package/dist/cjs/theme/utils/generate-css-color-variables.js.map +1 -1
- package/dist/cjs/theme/utils/set-theme-cookie.js +2 -5
- package/dist/cjs/theme/utils/set-theme-cookie.js.map +1 -1
- package/dist/cjs/toast/ToastContainer.js +38 -38
- package/dist/cjs/toast/ToastContainer.js.map +1 -1
- package/dist/cjs/toast/ToastDefault.js +2 -1
- package/dist/cjs/toast/ToastDefault.js.map +1 -1
- package/dist/cjs/toast/ToastError.js +2 -1
- package/dist/cjs/toast/ToastError.js.map +1 -1
- package/dist/cjs/toast/ToastInfo.js +2 -1
- package/dist/cjs/toast/ToastInfo.js.map +1 -1
- package/dist/cjs/toast/ToastPending.js +3 -2
- package/dist/cjs/toast/ToastPending.js.map +1 -1
- package/dist/cjs/toast/ToastPendingStyles.js.map +1 -1
- package/dist/cjs/toast/ToastSuccess.js +2 -1
- package/dist/cjs/toast/ToastSuccess.js.map +1 -1
- package/dist/cjs/toast/toastsDefaultOptions.js +8 -4
- package/dist/cjs/toast/toastsDefaultOptions.js.map +1 -1
- package/dist/cjs/tooltip/Tooltip.js +2 -8
- package/dist/cjs/tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/tooltip/TooltipStyles.js.map +1 -1
- package/dist/cjs/transition/withTransition.js +4 -3
- package/dist/cjs/transition/withTransition.js.map +1 -1
- package/dist/cjs/utils/cookies-client-side.js +2 -10
- package/dist/cjs/utils/cookies-client-side.js.map +1 -1
- package/dist/cjs/utils/get-top-level-domain.js.map +1 -1
- package/dist/cjs/utils/index.js +1 -0
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/cjs/utils/modalRoot.js +0 -3
- package/dist/cjs/utils/modalRoot.js.map +1 -1
- package/dist/cjs/utils/styled-components-wrapper.js +2 -0
- package/dist/cjs/utils/styled-components-wrapper.js.map +1 -1
- package/dist/esm/accordion/Accordion.mjs +6 -3
- package/dist/esm/accordion/Accordion.mjs.map +1 -1
- package/dist/esm/accordion/AccordionStyles.mjs +8 -8
- package/dist/esm/accordion/AccordionStyles.mjs.map +1 -1
- package/dist/esm/accordion/useExpanded.mjs.map +1 -1
- package/dist/esm/address/Address.mjs +2 -1
- package/dist/esm/address/Address.mjs.map +1 -1
- package/dist/esm/address/AddressStyles.mjs.map +1 -1
- package/dist/esm/address/trimAddress.mjs.map +1 -1
- package/dist/esm/addressBadge/AddressBadge.mjs.map +1 -1
- package/dist/esm/addressBadge/AddressBadgeStyles.mjs.map +1 -1
- package/dist/esm/block/Block.mjs.map +1 -1
- package/dist/esm/block/BlockStyles.mjs.map +1 -1
- package/dist/esm/block/types.mjs.map +1 -1
- package/dist/esm/box/Box.mjs.map +1 -1
- package/dist/esm/button/Button.mjs.map +1 -1
- package/dist/esm/button/ButtonIcon.mjs.map +1 -1
- package/dist/esm/button/ButtonIconStyles.mjs.map +1 -1
- package/dist/esm/button/ButtonStyles.mjs +42 -46
- package/dist/esm/button/ButtonStyles.mjs.map +1 -1
- package/dist/esm/button/types.mjs.map +1 -1
- package/dist/esm/button/useRipple.mjs +1 -1
- package/dist/esm/button/useRipple.mjs.map +1 -1
- package/dist/esm/chart-line/ChartLine.mjs +0 -3
- package/dist/esm/chart-line/ChartLine.mjs.map +1 -1
- package/dist/esm/chart-line/ChartLineLabel.mjs +0 -1
- package/dist/esm/chart-line/ChartLineLabel.mjs.map +1 -1
- package/dist/esm/chart-line/ChartLineStyles.mjs +16 -28
- package/dist/esm/chart-line/ChartLineStyles.mjs.map +1 -1
- package/dist/esm/chart-line/types.mjs.map +1 -1
- package/dist/esm/chart-line/utils/checkViewport.mjs +1 -0
- package/dist/esm/chart-line/utils/checkViewport.mjs.map +1 -1
- package/dist/esm/chart-line/utils/constants.mjs.map +1 -1
- package/dist/esm/chart-line/utils/getContainerSize.mjs +0 -2
- package/dist/esm/chart-line/utils/getContainerSize.mjs.map +1 -1
- package/dist/esm/chart-line/utils/handlePositioning.mjs +30 -32
- package/dist/esm/chart-line/utils/handlePositioning.mjs.map +1 -1
- package/dist/esm/chart-line/utils/processData.mjs +2 -1
- package/dist/esm/chart-line/utils/processData.mjs.map +1 -1
- package/dist/esm/chart-proportion/ChartProportion.mjs +0 -2
- package/dist/esm/chart-proportion/ChartProportion.mjs.map +1 -1
- package/dist/esm/chart-proportion/ChartProportionStyles.mjs +0 -5
- package/dist/esm/chart-proportion/ChartProportionStyles.mjs.map +1 -1
- package/dist/esm/chart-proportion/types.mjs.map +1 -1
- package/dist/esm/checkbox/Checkbox.mjs.map +1 -1
- package/dist/esm/checkbox/CheckboxStyles.mjs.map +1 -1
- package/dist/esm/chip/Chip.mjs.map +1 -1
- package/dist/esm/chip/ChipStyles.mjs.map +1 -1
- package/dist/esm/chip/types.mjs.map +1 -1
- package/dist/esm/container/Container.mjs.map +1 -1
- package/dist/esm/container/ContainerStyles.mjs.map +1 -1
- package/dist/esm/container/types.mjs.map +1 -1
- package/dist/esm/content-theme/content-theme.mjs +4 -2
- package/dist/esm/content-theme/content-theme.mjs.map +1 -1
- package/dist/esm/content-theme/styles.mjs.map +1 -1
- package/dist/esm/cookie-theme-toggler/cookie-theme-toggler.mjs.map +1 -1
- package/dist/esm/cookie-theme-toggler/styles.mjs.map +1 -1
- package/dist/esm/cookies-tooltip/constants.mjs.map +1 -1
- package/dist/esm/cookies-tooltip/cookies-tooltip.mjs +4 -3
- package/dist/esm/cookies-tooltip/cookies-tooltip.mjs.map +1 -1
- package/dist/esm/cookies-tooltip/styles.mjs.map +1 -1
- package/dist/esm/cookies-tooltip/utils.mjs +2 -7
- package/dist/esm/cookies-tooltip/utils.mjs.map +1 -1
- package/dist/esm/data-table/DataTable.mjs.map +1 -1
- package/dist/esm/data-table/DataTableStyles.mjs.map +1 -1
- package/dist/esm/divider/Divider.mjs.map +1 -1
- package/dist/esm/divider/DividerStyles.mjs +0 -1
- package/dist/esm/divider/DividerStyles.mjs.map +1 -1
- package/dist/esm/divider/types.mjs.map +1 -1
- package/dist/esm/heading/Heading.mjs.map +1 -1
- package/dist/esm/heading/HeadingStyles.mjs +0 -2
- package/dist/esm/heading/HeadingStyles.mjs.map +1 -1
- package/dist/esm/heading/types.mjs.map +1 -1
- package/dist/esm/hooks/useBreakpoint.mjs +0 -2
- package/dist/esm/hooks/useBreakpoint.mjs.map +1 -1
- package/dist/esm/hooks/useEscape.mjs.map +1 -1
- package/dist/esm/hooks/useInterceptFocus.mjs.map +1 -1
- package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs +1 -0
- package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map +1 -1
- package/dist/esm/hooks/useLockScroll.mjs +0 -6
- package/dist/esm/hooks/useLockScroll.mjs.map +1 -1
- package/dist/esm/hooks/useMergeRefs.mjs.map +1 -1
- package/dist/esm/hooks/useOutsideClick.mjs.map +1 -1
- package/dist/esm/hooks/useSystemTheme.mjs +0 -2
- package/dist/esm/hooks/useSystemTheme.mjs.map +1 -1
- package/dist/esm/hooks/useWindowSize.mjs +0 -1
- package/dist/esm/hooks/useWindowSize.mjs.map +1 -1
- package/dist/esm/icons/index.mjs +1 -0
- package/dist/esm/icons/index.mjs.map +1 -1
- package/dist/esm/identicon/Identicon.mjs +4 -3
- package/dist/esm/identicon/Identicon.mjs.map +1 -1
- package/dist/esm/identicon/IdenticonBadge.mjs.map +1 -1
- package/dist/esm/identicon/IdenticonStyles.mjs.map +1 -1
- package/dist/esm/identicon/types.mjs.map +1 -1
- package/dist/esm/input/Input.mjs +0 -1
- package/dist/esm/input/Input.mjs.map +1 -1
- package/dist/esm/input/InputGroup.mjs.map +1 -1
- package/dist/esm/input/InputGroupStyles.mjs.map +1 -1
- package/dist/esm/input/InputStyles.mjs +36 -36
- package/dist/esm/input/InputStyles.mjs.map +1 -1
- package/dist/esm/input/LabelStyles.mjs.map +1 -1
- package/dist/esm/input/OptionsSlider.mjs +0 -5
- package/dist/esm/input/OptionsSlider.mjs.map +1 -1
- package/dist/esm/input/SliderInput.mjs +0 -2
- package/dist/esm/input/SliderInput.mjs.map +1 -1
- package/dist/esm/input/SliderInputStyles.mjs.map +1 -1
- package/dist/esm/input/Textarea.mjs +0 -1
- package/dist/esm/input/Textarea.mjs.map +1 -1
- package/dist/esm/input/types.mjs.map +1 -1
- package/dist/esm/lido-logo/LidoLogo.mjs +2 -1
- package/dist/esm/lido-logo/LidoLogo.mjs.map +1 -1
- package/dist/esm/lido-logo/LidoLogoStyles.mjs.map +1 -1
- package/dist/esm/link/Link.mjs.map +1 -1
- package/dist/esm/link/LinkStyles.mjs.map +1 -1
- package/dist/esm/loaders/InlineLoader.mjs +0 -2
- package/dist/esm/loaders/InlineLoader.mjs.map +1 -1
- package/dist/esm/loaders/InlineLoaderStyles.mjs.map +1 -1
- package/dist/esm/loaders/Loader.mjs.map +1 -1
- package/dist/esm/loaders/LoaderStyles.mjs.map +1 -1
- package/dist/esm/loaders/types.mjs.map +1 -1
- package/dist/esm/main-menu/MainMenu.mjs.map +1 -1
- package/dist/esm/main-menu/MainMenuItem.mjs.map +1 -1
- package/dist/esm/main-menu/MainMenuItemStyles.mjs.map +1 -1
- package/dist/esm/main-menu/MainMenuStyles.mjs.map +1 -1
- package/dist/esm/modal/Modal.mjs +0 -2
- package/dist/esm/modal/Modal.mjs.map +1 -1
- package/dist/esm/modal/ModalButton.mjs +2 -1
- package/dist/esm/modal/ModalButton.mjs.map +1 -1
- package/dist/esm/modal/ModalButtonStyles.mjs.map +1 -1
- package/dist/esm/modal/ModalExtra.mjs +2 -1
- package/dist/esm/modal/ModalExtra.mjs.map +1 -1
- package/dist/esm/modal/ModalExtraStyles.mjs.map +1 -1
- package/dist/esm/modal/ModalOverlay.mjs +1 -1
- package/dist/esm/modal/ModalOverlay.mjs.map +1 -1
- package/dist/esm/modal/ModalOverlayStyles.mjs +0 -3
- package/dist/esm/modal/ModalOverlayStyles.mjs.map +1 -1
- package/dist/esm/modal/ModalStyles.mjs.map +1 -1
- package/dist/esm/modal/constants.mjs.map +1 -1
- package/dist/esm/modal/types.mjs.map +1 -1
- package/dist/esm/modal/useModalClose.mjs.map +1 -1
- package/dist/esm/modal/useModalFocus.mjs +0 -3
- package/dist/esm/modal/useModalFocus.mjs.map +1 -1
- package/dist/esm/pagination/Pagination.mjs +2 -11
- package/dist/esm/pagination/Pagination.mjs.map +1 -1
- package/dist/esm/pagination/PaginationItem.mjs.map +1 -1
- package/dist/esm/pagination/PaginationItemStyles.mjs.map +1 -1
- package/dist/esm/pagination/getShowingPages.mjs +2 -29
- package/dist/esm/pagination/getShowingPages.mjs.map +1 -1
- package/dist/esm/pagination/types.mjs.map +1 -1
- package/dist/esm/popover/Popover.mjs.map +1 -1
- package/dist/esm/popover/PopoverRoot.mjs +3 -2
- package/dist/esm/popover/PopoverRoot.mjs.map +1 -1
- package/dist/esm/popover/PopoverRootStyles.mjs +0 -2
- package/dist/esm/popover/PopoverRootStyles.mjs.map +1 -1
- package/dist/esm/popover/PopoverStyles.mjs +0 -1
- package/dist/esm/popover/PopoverStyles.mjs.map +1 -1
- package/dist/esm/popover/calculatePosition.mjs +0 -11
- package/dist/esm/popover/calculatePosition.mjs.map +1 -1
- package/dist/esm/popover/constants.mjs.map +1 -1
- package/dist/esm/popover/types.mjs.map +1 -1
- package/dist/esm/popover/usePopoverPosition.mjs +2 -1
- package/dist/esm/popover/usePopoverPosition.mjs.map +1 -1
- package/dist/esm/popup-menu/PopupMenu.mjs.map +1 -1
- package/dist/esm/popup-menu/PopupMenuItem.mjs.map +1 -1
- package/dist/esm/popup-menu/PopupMenuItemStyles.mjs.map +1 -1
- package/dist/esm/popup-menu/PopupMenuProvider.mjs.map +1 -1
- package/dist/esm/popup-menu/PopupMenuStyles.mjs.map +1 -1
- package/dist/esm/popup-menu/constants.mjs.map +1 -1
- package/dist/esm/popup-menu/types.mjs.map +1 -1
- package/dist/esm/popup-menu/usePopupFocus.mjs.map +1 -1
- package/dist/esm/section/Section.mjs +2 -1
- package/dist/esm/section/Section.mjs.map +1 -1
- package/dist/esm/section/SectionStyles.mjs.map +1 -1
- package/dist/esm/select/Option.mjs.map +1 -1
- package/dist/esm/select/Select.mjs.map +1 -1
- package/dist/esm/select/SelectArrow.mjs +4 -2
- package/dist/esm/select/SelectArrow.mjs.map +1 -1
- package/dist/esm/select/SelectArrowStyles.mjs.map +1 -1
- package/dist/esm/select/SelectIcon.mjs +2 -1
- package/dist/esm/select/SelectIcon.mjs.map +1 -1
- package/dist/esm/select/SelectIconStyles.mjs +1 -2
- package/dist/esm/select/SelectIconStyles.mjs.map +1 -1
- package/dist/esm/select/SelectStyles.mjs.map +1 -1
- package/dist/esm/select/types.mjs.map +1 -1
- package/dist/esm/select/useSelect.mjs +0 -3
- package/dist/esm/select/useSelect.mjs.map +1 -1
- package/dist/esm/select/useSelectWidth.mjs.map +1 -1
- package/dist/esm/service-page/ServicePage.mjs +2 -1
- package/dist/esm/service-page/ServicePage.mjs.map +1 -1
- package/dist/esm/service-page/ServicePageStyles.mjs.map +1 -1
- package/dist/esm/stack/HStack.mjs.map +1 -1
- package/dist/esm/stack/Stack.mjs.map +1 -1
- package/dist/esm/stack/StackItem.mjs.map +1 -1
- package/dist/esm/stack/StackItemStyles.mjs.map +1 -1
- package/dist/esm/stack/StackProvider.mjs.map +1 -1
- package/dist/esm/stack/StackStyles.mjs.map +1 -1
- package/dist/esm/stack/VStack.mjs.map +1 -1
- package/dist/esm/stack/types.mjs.map +1 -1
- package/dist/esm/styled-system/withStyledSystem.mjs +3 -2
- package/dist/esm/styled-system/withStyledSystem.mjs.map +1 -1
- package/dist/esm/table/Table.mjs.map +1 -1
- package/dist/esm/table/Tbody.mjs.map +1 -1
- package/dist/esm/table/Td.mjs.map +1 -1
- package/dist/esm/table/Tfoot.mjs.map +1 -1
- package/dist/esm/table/Th.mjs.map +1 -1
- package/dist/esm/table/Thead.mjs.map +1 -1
- package/dist/esm/table/Tr.mjs.map +1 -1
- package/dist/esm/table/styles.mjs +0 -1
- package/dist/esm/table/styles.mjs.map +1 -1
- package/dist/esm/table/types.mjs.map +1 -1
- package/dist/esm/text/Text.mjs.map +1 -1
- package/dist/esm/text/TextStyles.mjs +0 -6
- package/dist/esm/text/TextStyles.mjs.map +1 -1
- package/dist/esm/text/types.mjs.map +1 -1
- package/dist/esm/theme/base/borders.mjs.map +1 -1
- package/dist/esm/theme/base/breakpoints.mjs.map +1 -1
- package/dist/esm/theme/base/colors.mjs.map +1 -1
- package/dist/esm/theme/base/index.mjs +2 -1
- package/dist/esm/theme/base/index.mjs.map +1 -1
- package/dist/esm/theme/base/shadows.mjs.map +1 -1
- package/dist/esm/theme/base/spacing.mjs.map +1 -1
- package/dist/esm/theme/base/transitions.mjs.map +1 -1
- package/dist/esm/theme/base/typography.mjs.map +1 -1
- package/dist/esm/theme/constants.mjs.map +1 -1
- package/dist/esm/theme/cookie-theme-provider.mjs +34 -30
- package/dist/esm/theme/cookie-theme-provider.mjs.map +1 -1
- package/dist/esm/theme/document-head-contents/element-fonts.mjs.map +1 -1
- package/dist/esm/theme/document-head-contents/element-theme-colors.mjs +2 -4
- package/dist/esm/theme/document-head-contents/element-theme-colors.mjs.map +1 -1
- package/dist/esm/theme/document-head-contents/element-theme-script.mjs +5 -13
- package/dist/esm/theme/document-head-contents/element-theme-script.mjs.map +1 -1
- package/dist/esm/theme/document-head-contents/index.mjs.map +1 -1
- package/dist/esm/theme/hooks.mjs.map +1 -1
- package/dist/esm/theme/theme-provider.mjs +6 -3
- package/dist/esm/theme/theme-provider.mjs.map +1 -1
- package/dist/esm/theme/themes.mjs +8 -4
- package/dist/esm/theme/themes.mjs.map +1 -1
- package/dist/esm/theme/utils/cookies-migration.mjs +0 -4
- package/dist/esm/theme/utils/cookies-migration.mjs.map +1 -1
- package/dist/esm/theme/utils/cookies.mjs +3 -2
- package/dist/esm/theme/utils/cookies.mjs.map +1 -1
- package/dist/esm/theme/utils/generate-css-color-variables.mjs +0 -4
- package/dist/esm/theme/utils/generate-css-color-variables.mjs.map +1 -1
- package/dist/esm/theme/utils/set-theme-cookie.mjs +2 -5
- package/dist/esm/theme/utils/set-theme-cookie.mjs.map +1 -1
- package/dist/esm/toast/ToastContainer.mjs +38 -38
- package/dist/esm/toast/ToastContainer.mjs.map +1 -1
- package/dist/esm/toast/ToastDefault.mjs +2 -1
- package/dist/esm/toast/ToastDefault.mjs.map +1 -1
- package/dist/esm/toast/ToastError.mjs +2 -1
- package/dist/esm/toast/ToastError.mjs.map +1 -1
- package/dist/esm/toast/ToastInfo.mjs +2 -1
- package/dist/esm/toast/ToastInfo.mjs.map +1 -1
- package/dist/esm/toast/ToastPending.mjs +3 -2
- package/dist/esm/toast/ToastPending.mjs.map +1 -1
- package/dist/esm/toast/ToastPendingStyles.mjs.map +1 -1
- package/dist/esm/toast/ToastSuccess.mjs +2 -1
- package/dist/esm/toast/ToastSuccess.mjs.map +1 -1
- package/dist/esm/toast/toastsDefaultOptions.mjs +8 -4
- package/dist/esm/toast/toastsDefaultOptions.mjs.map +1 -1
- package/dist/esm/tooltip/Tooltip.mjs +2 -8
- package/dist/esm/tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/tooltip/TooltipStyles.mjs.map +1 -1
- package/dist/esm/transition/withTransition.mjs +4 -3
- package/dist/esm/transition/withTransition.mjs.map +1 -1
- package/dist/esm/utils/cookies-client-side.mjs +2 -10
- package/dist/esm/utils/cookies-client-side.mjs.map +1 -1
- package/dist/esm/utils/get-top-level-domain.mjs.map +1 -1
- package/dist/esm/utils/index.mjs +1 -0
- package/dist/esm/utils/index.mjs.map +1 -1
- package/dist/esm/utils/modalRoot.mjs +0 -3
- package/dist/esm/utils/modalRoot.mjs.map +1 -1
- package/dist/esm/utils/styled-components-wrapper.mjs +2 -0
- package/dist/esm/utils/styled-components-wrapper.mjs.map +1 -1
- package/dist/types/accordion/AccordionStyles.d.ts +1 -1
- package/dist/types/checkbox/CheckboxStyles.d.ts +1 -1
- package/dist/types/checkbox/CheckboxStyles.d.ts.map +1 -1
- package/dist/types/cookie-theme-toggler/styles.d.ts +2 -2
- package/dist/types/cookie-theme-toggler/styles.d.ts.map +1 -1
- package/dist/types/data-table/DataTableStyles.d.ts +1 -1
- package/dist/types/data-table/DataTableStyles.d.ts.map +1 -1
- package/dist/types/icons/index.d.ts +83 -83
- package/dist/types/icons/index.d.ts.map +1 -1
- package/dist/types/input/Input.d.ts +1 -1
- package/dist/types/input/OptionsSlider.d.ts +1 -2
- package/dist/types/input/OptionsSlider.d.ts.map +1 -1
- package/dist/types/input/SliderInput.d.ts +1 -2
- package/dist/types/input/SliderInput.d.ts.map +1 -1
- package/dist/types/modal/ModalOverlay.d.ts +2 -2
- package/dist/types/modal/ModalOverlay.d.ts.map +1 -1
- package/dist/types/modal/ModalStyles.d.ts +2 -2
- package/dist/types/popover/PopoverRoot.d.ts +2 -2
- package/dist/types/popover/PopoverRoot.d.ts.map +1 -1
- package/dist/types/popover/PopoverStyles.d.ts +2 -2
- package/dist/types/popover/PopoverStyles.d.ts.map +1 -1
- package/dist/types/popover/usePopoverPosition.d.ts +1 -1
- package/dist/types/popover/usePopoverPosition.d.ts.map +1 -1
- package/dist/types/select/SelectArrowStyles.d.ts +1 -1
- package/dist/types/select/SelectArrowStyles.d.ts.map +1 -1
- package/dist/types/select/SelectIconStyles.d.ts.map +1 -1
- package/dist/types/select/SelectStyles.d.ts +1 -1
- package/dist/types/stack/Stack.d.ts +2 -2
- package/dist/types/table/Td.d.ts +1 -1
- package/dist/types/table/Th.d.ts +1 -1
- package/dist/types/table/styles.d.ts +2 -2
- package/dist/types/table/styles.d.ts.map +1 -1
- package/dist/types/theme/document-head-contents/element-theme-colors.d.ts +1 -2
- package/dist/types/theme/document-head-contents/element-theme-colors.d.ts.map +1 -1
- package/dist/types/theme/document-head-contents/element-theme-script.d.ts +1 -2
- package/dist/types/theme/document-head-contents/element-theme-script.d.ts.map +1 -1
- package/package.json +15 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRipple.mjs","sources":["../../../packages/button/useRipple.tsx"],"sourcesContent":["import { MouseEvent, ReactNode, useCallback, useState } from 'react'\nimport { ButtonProps } from './types.js'\nimport { ButtonRippleStyle } from './ButtonStyles.js'\n\ntype UseRipple = (props: Pick<ButtonProps, 'onClick'>) => {\n ripple: ReactNode\n handleClick: (event: MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const useRipple: UseRipple = ({ onClick }) => {\n const [ripple, setRipple] = useState<ReactNode | null>(null)\n\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const button = event.currentTarget\n const rect = button.getBoundingClientRect()\n const diameter = Math.max(button.clientWidth, button.clientHeight)\n const radius = diameter / 2\n const isMouseClick = event.clientX > 0 && event.clientY > 0\n\n const x = isMouseClick\n ? event.clientX - rect.left\n : button.clientWidth / 2\n\n const y = isMouseClick\n ? event.clientY - rect.top\n : button.clientHeight / 2\n\n const style = {\n width: diameter,\n height: diameter,\n left: x - radius,\n top: y - radius,\n }\n\n setRipple(<ButtonRippleStyle style={style} key={event.timeStamp} />)\n onClick?.(event)\n },\n [onClick],\n )\n\n return {\n ripple,\n handleClick,\n }\n}\n"],"names":["useRipple","onClick","ripple","setRipple","useState","handleClick","useCallback","event","button","currentTarget","rect","getBoundingClientRect","diameter","Math","max","clientWidth","clientHeight","radius","isMouseClick","clientX","clientY","x","left","y","top","style","width","height","_jsx","timeStamp"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useRipple.mjs","sources":["../../../packages/button/useRipple.tsx"],"sourcesContent":["import { MouseEvent, ReactNode, useCallback, useState } from 'react'\nimport { ButtonProps } from './types.js'\nimport { ButtonRippleStyle } from './ButtonStyles.js'\n\ntype UseRipple = (props: Pick<ButtonProps, 'onClick'>) => {\n ripple: ReactNode\n handleClick: (event: MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const useRipple: UseRipple = ({ onClick }) => {\n const [ripple, setRipple] = useState<ReactNode | null>(null)\n\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const button = event.currentTarget\n const rect = button.getBoundingClientRect()\n const diameter = Math.max(button.clientWidth, button.clientHeight)\n const radius = diameter / 2\n const isMouseClick = event.clientX > 0 && event.clientY > 0\n\n const x = isMouseClick\n ? event.clientX - rect.left\n : button.clientWidth / 2\n\n const y = isMouseClick\n ? event.clientY - rect.top\n : button.clientHeight / 2\n\n const style = {\n width: diameter,\n height: diameter,\n left: x - radius,\n top: y - radius,\n }\n\n setRipple(<ButtonRippleStyle style={style} key={event.timeStamp} />)\n onClick?.(event)\n },\n [onClick],\n )\n\n return {\n ripple,\n handleClick,\n }\n}\n"],"names":["useRipple","_ref","onClick","ripple","setRipple","useState","handleClick","useCallback","event","button","currentTarget","rect","getBoundingClientRect","diameter","Math","max","clientWidth","clientHeight","radius","isMouseClick","clientX","clientY","x","left","y","top","style","width","height","_jsx","ButtonRippleStyle","timeStamp"],"mappings":";;;;AASaA,MAAAA,SAAoB,GAAGC,IAAA,IAAiB;EAAA,IAAhB;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;EAC9C,MAAM,CAACE,MAAM,EAAEC,SAAS,CAAC,GAAGC,QAAQ,CAAmB,IAAI,CAAC,CAAA;AAE5D,EAAA,MAAMC,WAAW,GAAGC,WAAW,CAC5BC,KAAoC,IAAK;AACxC,IAAA,MAAMC,MAAM,GAAGD,KAAK,CAACE,aAAa,CAAA;AAClC,IAAA,MAAMC,IAAI,GAAGF,MAAM,CAACG,qBAAqB,EAAE,CAAA;AAC3C,IAAA,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACN,MAAM,CAACO,WAAW,EAAEP,MAAM,CAACQ,YAAY,CAAC,CAAA;AAClE,IAAA,MAAMC,MAAM,GAAGL,QAAQ,GAAG,CAAC,CAAA;AAC3B,IAAA,MAAMM,YAAY,GAAGX,KAAK,CAACY,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACa,OAAO,GAAG,CAAC,CAAA;AAE3D,IAAA,MAAMC,CAAC,GAAGH,YAAY,GAClBX,KAAK,CAACY,OAAO,GAAGT,IAAI,CAACY,IAAI,GACzBd,MAAM,CAACO,WAAW,GAAG,CAAC,CAAA;AAE1B,IAAA,MAAMQ,CAAC,GAAGL,YAAY,GAClBX,KAAK,CAACa,OAAO,GAAGV,IAAI,CAACc,GAAG,GACxBhB,MAAM,CAACQ,YAAY,GAAG,CAAC,CAAA;AAE3B,IAAA,MAAMS,KAAK,GAAG;AACZC,MAAAA,KAAK,EAAEd,QAAQ;AACfe,MAAAA,MAAM,EAAEf,QAAQ;MAChBU,IAAI,EAAED,CAAC,GAAGJ,MAAM;MAChBO,GAAG,EAAED,CAAC,GAAGN,MAAAA;KACV,CAAA;IAEDd,SAAS,cAACyB,GAAA,CAACC,iBAAiB,EAAA;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EAAMlB,KAAK,CAACuB,SAAY,CAAC,CAAC,CAAA;IACpE7B,OAAO,GAAGM,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACN,OAAO,CACV,CAAC,CAAA;EAED,OAAO;IACLC,MAAM;AACNG,IAAAA,WAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -32,11 +32,9 @@ const ChartLine = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
32
32
|
setContainerSize(null);
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
|
|
36
35
|
const containerSize = getContainerSize(ids);
|
|
37
36
|
setContainerSize(containerSize);
|
|
38
37
|
}, [ids, showLabels]);
|
|
39
|
-
|
|
40
38
|
if (loading) {
|
|
41
39
|
return /*#__PURE__*/jsx(WrapperStyle, {
|
|
42
40
|
$border: border,
|
|
@@ -46,7 +44,6 @@ const ChartLine = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
46
44
|
children: /*#__PURE__*/jsx(InlineLoader, {})
|
|
47
45
|
});
|
|
48
46
|
}
|
|
49
|
-
|
|
50
47
|
return /*#__PURE__*/jsx(ContainerStyle, {
|
|
51
48
|
id: containerId,
|
|
52
49
|
$alignItems: containerSize?.isCenterAlign ? 'center' : 'flex-start',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartLine.mjs","sources":["../../../packages/chart-line/ChartLine.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n useMemo,\n useLayoutEffect,\n useState,\n useId,\n} from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport { ChartLineLabel } from './ChartLineLabel.js'\nimport { getContainerSize, processData } from './utils/index.js'\nimport { ContainerStyle, LineStyle, WrapperStyle } from './ChartLineStyles.js'\nimport { ChartLineProps } from './types.js'\n\nexport const ChartLine = forwardRef(\n (props: ChartLineProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n maxValue,\n thresholdType,\n ...rest\n } = props\n\n const [containerSize, setContainerSize] = useState<{\n size: number\n isCenterAlign: boolean\n } | null>(null)\n const containerId = useId()\n\n const { data: processedData, ids } = useMemo(\n () => processData(data, containerId, maxValue),\n [data, maxValue, containerId],\n )\n\n const allPreviousIds = useMemo(\n () => ids.map((_, index) => ids.slice(0, index)),\n [ids],\n )\n\n useLayoutEffect(() => {\n if (!showLabels) {\n setContainerSize(null)\n return\n }\n const containerSize = getContainerSize(ids)\n setContainerSize(containerSize)\n }, [ids, showLabels])\n\n if (loading) {\n return (\n <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <ContainerStyle\n id={containerId}\n $alignItems={containerSize?.isCenterAlign ? 'center' : 'flex-start'}\n $height={containerSize?.size ?? 0}\n >\n <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n {processedData.map((item, index) => {\n const { color, id, width } = item\n const previousIds = allPreviousIds[index]\n\n return (\n <LineStyle\n key={id}\n $width={`${width}%`}\n $backgroundColor={color}\n $zIndex={processedData.length - index}\n $border={border}\n $isFullWidth={width === 100}\n >\n <ChartLineLabel\n zIndex={processedData.length - index}\n show={showLabels}\n previousIds={previousIds}\n height={height}\n thresholdType={thresholdType}\n containerId={containerId}\n {...item}\n />\n </LineStyle>\n )\n })}\n </WrapperStyle>\n </ContainerStyle>\n )\n },\n)\nChartLine.displayName = 'ChartLine'\n"],"names":["ChartLine","forwardRef","props","ref","loading","onClick","children","height","border","data","showLabels","maxValue","thresholdType","rest","containerSize","setContainerSize","useState","containerId","useId","processedData","ids","useMemo","processData","allPreviousIds","map","_","index","slice","useLayoutEffect","getContainerSize","_jsx","isCenterAlign","size","item","color","
|
|
1
|
+
{"version":3,"file":"ChartLine.mjs","sources":["../../../packages/chart-line/ChartLine.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n useMemo,\n useLayoutEffect,\n useState,\n useId,\n} from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport { ChartLineLabel } from './ChartLineLabel.js'\nimport { getContainerSize, processData } from './utils/index.js'\nimport { ContainerStyle, LineStyle, WrapperStyle } from './ChartLineStyles.js'\nimport { ChartLineProps } from './types.js'\n\nexport const ChartLine = forwardRef(\n (props: ChartLineProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n maxValue,\n thresholdType,\n ...rest\n } = props\n\n const [containerSize, setContainerSize] = useState<{\n size: number\n isCenterAlign: boolean\n } | null>(null)\n const containerId = useId()\n\n const { data: processedData, ids } = useMemo(\n () => processData(data, containerId, maxValue),\n [data, maxValue, containerId],\n )\n\n const allPreviousIds = useMemo(\n () => ids.map((_, index) => ids.slice(0, index)),\n [ids],\n )\n\n useLayoutEffect(() => {\n if (!showLabels) {\n setContainerSize(null)\n return\n }\n const containerSize = getContainerSize(ids)\n setContainerSize(containerSize)\n }, [ids, showLabels])\n\n if (loading) {\n return (\n <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <ContainerStyle\n id={containerId}\n $alignItems={containerSize?.isCenterAlign ? 'center' : 'flex-start'}\n $height={containerSize?.size ?? 0}\n >\n <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n {processedData.map((item, index) => {\n const { color, id, width } = item\n const previousIds = allPreviousIds[index]\n\n return (\n <LineStyle\n key={id}\n $width={`${width}%`}\n $backgroundColor={color}\n $zIndex={processedData.length - index}\n $border={border}\n $isFullWidth={width === 100}\n >\n <ChartLineLabel\n zIndex={processedData.length - index}\n show={showLabels}\n previousIds={previousIds}\n height={height}\n thresholdType={thresholdType}\n containerId={containerId}\n {...item}\n />\n </LineStyle>\n )\n })}\n </WrapperStyle>\n </ContainerStyle>\n )\n },\n)\nChartLine.displayName = 'ChartLine'\n"],"names":["ChartLine","forwardRef","props","ref","loading","onClick","children","height","border","data","showLabels","maxValue","thresholdType","rest","containerSize","setContainerSize","useState","containerId","useId","processedData","ids","useMemo","processData","allPreviousIds","map","_","index","slice","useLayoutEffect","getContainerSize","_jsx","WrapperStyle","$border","$height","InlineLoader","ContainerStyle","id","$alignItems","isCenterAlign","size","item","color","width","previousIds","LineStyle","$width","$backgroundColor","$zIndex","length","$isFullWidth","ChartLineLabel","zIndex","show","displayName"],"mappings":";;;;;;;;;AAgBO,MAAMA,SAAS,gBAAGC,UAAU,CACjC,CAACC,KAAqB,EAAEC,GAAkC,KAAK;EAC7D,MAAM;AACJC,IAAAA,OAAO,GAAG,KAAK;IACfC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACRC,aAAa;IACb,GAAGC,IAAAA;AACL,GAAC,GAAGX,KAAK,CAAA;EAET,MAAM,CAACY,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAGxC,IAAI,CAAC,CAAA;AACf,EAAA,MAAMC,WAAW,GAAGC,KAAK,EAAE,CAAA;EAE3B,MAAM;AAAET,IAAAA,IAAI,EAAEU,aAAa;AAAEC,IAAAA,GAAAA;GAAK,GAAGC,OAAO,CAC1C,MAAMC,WAAW,CAACb,IAAI,EAAEQ,WAAW,EAAEN,QAAQ,CAAC,EAC9C,CAACF,IAAI,EAAEE,QAAQ,EAAEM,WAAW,CAC9B,CAAC,CAAA;EAED,MAAMM,cAAc,GAAGF,OAAO,CAC5B,MAAMD,GAAG,CAACI,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAKN,GAAG,CAACO,KAAK,CAAC,CAAC,EAAED,KAAK,CAAC,CAAC,EAChD,CAACN,GAAG,CACN,CAAC,CAAA;AAEDQ,EAAAA,eAAe,CAAC,MAAM;IACpB,IAAI,CAAClB,UAAU,EAAE;MACfK,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACtB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,MAAMD,aAAa,GAAGe,gBAAgB,CAACT,GAAG,CAAC,CAAA;IAC3CL,gBAAgB,CAACD,aAAa,CAAC,CAAA;AACjC,GAAC,EAAE,CAACM,GAAG,EAAEV,UAAU,CAAC,CAAC,CAAA;AAErB,EAAA,IAAIN,OAAO,EAAE;IACX,oBACE0B,GAAA,CAACC,YAAY,EAAA;AAACC,MAAAA,OAAO,EAAExB,MAAO;AAACyB,MAAAA,OAAO,EAAE1B,MAAO;AAACJ,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKU,IAAI;AAAAP,MAAAA,QAAA,eAChEwB,GAAA,CAACI,YAAY,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,CAAA;AAEnB,GAAA;EAEA,oBACEJ,GAAA,CAACK,cAAc,EAAA;AACbC,IAAAA,EAAE,EAAEnB,WAAY;AAChBoB,IAAAA,WAAW,EAAEvB,aAAa,EAAEwB,aAAa,GAAG,QAAQ,GAAG,YAAa;AACpEL,IAAAA,OAAO,EAAEnB,aAAa,EAAEyB,IAAI,IAAI,CAAE;IAAAjC,QAAA,eAElCwB,GAAA,CAACC,YAAY,EAAA;AAACC,MAAAA,OAAO,EAAExB,MAAO;AAACyB,MAAAA,OAAO,EAAE1B,MAAO;AAACJ,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKU,IAAI;MAAAP,QAAA,EAC/Da,aAAa,CAACK,GAAG,CAAC,CAACgB,IAAI,EAAEd,KAAK,KAAK;QAClC,MAAM;UAAEe,KAAK;UAAEL,EAAE;AAAEM,UAAAA,KAAAA;AAAM,SAAC,GAAGF,IAAI,CAAA;AACjC,QAAA,MAAMG,WAAW,GAAGpB,cAAc,CAACG,KAAK,CAAC,CAAA;QAEzC,oBACEI,GAAA,CAACc,SAAS,EAAA;UAERC,MAAM,EAAE,CAAGH,EAAAA,KAAK,CAAI,CAAA,CAAA;AACpBI,UAAAA,gBAAgB,EAAEL,KAAM;AACxBM,UAAAA,OAAO,EAAE5B,aAAa,CAAC6B,MAAM,GAAGtB,KAAM;AACtCM,UAAAA,OAAO,EAAExB,MAAO;UAChByC,YAAY,EAAEP,KAAK,KAAK,GAAI;UAAApC,QAAA,eAE5BwB,GAAA,CAACoB,cAAc,EAAA;AACbC,YAAAA,MAAM,EAAEhC,aAAa,CAAC6B,MAAM,GAAGtB,KAAM;AACrC0B,YAAAA,IAAI,EAAE1C,UAAW;AACjBiC,YAAAA,WAAW,EAAEA,WAAY;AACzBpC,YAAAA,MAAM,EAAEA,MAAO;AACfK,YAAAA,aAAa,EAAEA,aAAc;AAC7BK,YAAAA,WAAW,EAAEA,WAAY;YAAA,GACrBuB,IAAAA;WACL,CAAA;AAAC,SAAA,EAfGJ,EAgBI,CAAC,CAAA;OAEf,CAAA;KACW,CAAA;AAAC,GACD,CAAC,CAAA;AAErB,CACF,EAAC;AACDpC,SAAS,CAACqD,WAAW,GAAG,WAAW;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartLineLabel.mjs","sources":["../../../packages/chart-line/ChartLineLabel.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { ChartLineLabelProps, ChartLineThresholdType } from './types.js'\nimport { ThresholdLabelStyle, ThresholdStyle } from './ChartLineStyles.js'\nimport { handlePositioning } from './utils/index.js'\n\nexport const ChartLineLabel = forwardRef(\n (props: ChartLineLabelProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n previousIds,\n id,\n color,\n zIndex,\n show,\n labelPosition,\n thresholdType,\n height,\n threshold,\n containerId,\n ...rest\n } = props\n\n useLayoutEffect(() => {\n if (!show) return\n if (thresholdType !== ChartLineThresholdType.flag) {\n handlePositioning({ previousIds, id, containerId, reset: true })\n } else {\n handlePositioning({ previousIds, id, containerId })\n }\n }, [previousIds, id, show, thresholdType, containerId])\n\n if (!show) return null\n\n const backgroundColor = threshold.color || color\n const content = threshold.descriptionElement || threshold.description\n\n return (\n <ThresholdStyle\n ref={ref}\n id={id}\n data-label-position={labelPosition}\n $labelPosition={labelPosition}\n $thresholdType={thresholdType}\n $height={height}\n $backgroundColor={backgroundColor}\n $zIndex={zIndex}\n {...rest}\n >\n {thresholdType === ChartLineThresholdType.flag && (\n <ThresholdLabelStyle\n style={{ backgroundColor }}\n id={`${id}-description`}\n $labelPosition={labelPosition}\n >\n {content}\n </ThresholdLabelStyle>\n )}\n </ThresholdStyle>\n )\n },\n)\nChartLineLabel.displayName = 'ChartLineLabel'\n"],"names":["ChartLineLabel","forwardRef","props","ref","previousIds","id","color","zIndex","show","labelPosition","thresholdType","height","threshold","containerId","rest","useLayoutEffect","ChartLineThresholdType","flag","handlePositioning","reset","backgroundColor","content","descriptionElement","description","_jsx","displayName"],"mappings":";;;;;;AAMO,MAAMA,cAAc,gBAAGC,UAAU,CACtC,CAACC,
|
|
1
|
+
{"version":3,"file":"ChartLineLabel.mjs","sources":["../../../packages/chart-line/ChartLineLabel.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { ChartLineLabelProps, ChartLineThresholdType } from './types.js'\nimport { ThresholdLabelStyle, ThresholdStyle } from './ChartLineStyles.js'\nimport { handlePositioning } from './utils/index.js'\n\nexport const ChartLineLabel = forwardRef(\n (props: ChartLineLabelProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n previousIds,\n id,\n color,\n zIndex,\n show,\n labelPosition,\n thresholdType,\n height,\n threshold,\n containerId,\n ...rest\n } = props\n\n useLayoutEffect(() => {\n if (!show) return\n if (thresholdType !== ChartLineThresholdType.flag) {\n handlePositioning({ previousIds, id, containerId, reset: true })\n } else {\n handlePositioning({ previousIds, id, containerId })\n }\n }, [previousIds, id, show, thresholdType, containerId])\n\n if (!show) return null\n\n const backgroundColor = threshold.color || color\n const content = threshold.descriptionElement || threshold.description\n\n return (\n <ThresholdStyle\n ref={ref}\n id={id}\n data-label-position={labelPosition}\n $labelPosition={labelPosition}\n $thresholdType={thresholdType}\n $height={height}\n $backgroundColor={backgroundColor}\n $zIndex={zIndex}\n {...rest}\n >\n {thresholdType === ChartLineThresholdType.flag && (\n <ThresholdLabelStyle\n style={{ backgroundColor }}\n id={`${id}-description`}\n $labelPosition={labelPosition}\n >\n {content}\n </ThresholdLabelStyle>\n )}\n </ThresholdStyle>\n )\n },\n)\nChartLineLabel.displayName = 'ChartLineLabel'\n"],"names":["ChartLineLabel","forwardRef","props","ref","previousIds","id","color","zIndex","show","labelPosition","thresholdType","height","threshold","containerId","rest","useLayoutEffect","ChartLineThresholdType","flag","handlePositioning","reset","backgroundColor","content","descriptionElement","description","_jsx","ThresholdStyle","$labelPosition","$thresholdType","$height","$backgroundColor","$zIndex","children","ThresholdLabelStyle","style","displayName"],"mappings":";;;;;;AAMO,MAAMA,cAAc,gBAAGC,UAAU,CACtC,CAACC,KAA0B,EAAEC,GAAkC,KAAK;EAClE,MAAM;IACJC,WAAW;IACXC,EAAE;IACFC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,aAAa;IACbC,aAAa;IACbC,MAAM;IACNC,SAAS;IACTC,WAAW;IACX,GAAGC,IAAAA;AACL,GAAC,GAAGZ,KAAK,CAAA;AAETa,EAAAA,eAAe,CAAC,MAAM;IACpB,IAAI,CAACP,IAAI,EAAE,OAAA;AACX,IAAA,IAAIE,aAAa,KAAKM,sBAAsB,CAACC,IAAI,EAAE;AACjDC,MAAAA,iBAAiB,CAAC;QAAEd,WAAW;QAAEC,EAAE;QAAEQ,WAAW;AAAEM,QAAAA,KAAK,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;AAClE,KAAC,MAAM;AACLD,MAAAA,iBAAiB,CAAC;QAAEd,WAAW;QAAEC,EAAE;AAAEQ,QAAAA,WAAAA;AAAY,OAAC,CAAC,CAAA;AACrD,KAAA;AACF,GAAC,EAAE,CAACT,WAAW,EAAEC,EAAE,EAAEG,IAAI,EAAEE,aAAa,EAAEG,WAAW,CAAC,CAAC,CAAA;AAEvD,EAAA,IAAI,CAACL,IAAI,EAAE,OAAO,IAAI,CAAA;AAEtB,EAAA,MAAMY,eAAe,GAAGR,SAAS,CAACN,KAAK,IAAIA,KAAK,CAAA;EAChD,MAAMe,OAAO,GAAGT,SAAS,CAACU,kBAAkB,IAAIV,SAAS,CAACW,WAAW,CAAA;EAErE,oBACEC,GAAA,CAACC,cAAc,EAAA;AACbtB,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,qBAAA,EAAqBI,aAAc;AACnCiB,IAAAA,cAAc,EAAEjB,aAAc;AAC9BkB,IAAAA,cAAc,EAAEjB,aAAc;AAC9BkB,IAAAA,OAAO,EAAEjB,MAAO;AAChBkB,IAAAA,gBAAgB,EAAET,eAAgB;AAClCU,IAAAA,OAAO,EAAEvB,MAAO;AAAA,IAAA,GACZO,IAAI;IAAAiB,QAAA,EAEPrB,aAAa,KAAKM,sBAAsB,CAACC,IAAI,iBAC5CO,GAAA,CAACQ,mBAAmB,EAAA;AAClBC,MAAAA,KAAK,EAAE;AAAEb,QAAAA,eAAAA;OAAkB;MAC3Bf,EAAE,EAAE,CAAGA,EAAAA,EAAE,CAAe,YAAA,CAAA;AACxBqB,MAAAA,cAAc,EAAEjB,aAAc;AAAAsB,MAAAA,QAAA,EAE7BV,OAAAA;KACkB,CAAA;AACtB,GACa,CAAC,CAAA;AAErB,CACF,EAAC;AACDrB,cAAc,CAACkC,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -34,13 +34,11 @@ const WrapperStyle = styled.div`
|
|
|
34
34
|
let {
|
|
35
35
|
$border
|
|
36
36
|
} = _ref4;
|
|
37
|
-
|
|
38
37
|
if ($border === ChartLineBorderType.rounded) {
|
|
39
38
|
return css`
|
|
40
39
|
border-radius: 4px;
|
|
41
40
|
`;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
42
|
return css``;
|
|
45
43
|
}}
|
|
46
44
|
`;
|
|
@@ -73,14 +71,12 @@ const ThresholdStyle = styled.div`
|
|
|
73
71
|
let {
|
|
74
72
|
$labelPosition
|
|
75
73
|
} = _ref8;
|
|
76
|
-
|
|
77
74
|
if ($labelPosition === 'top') {
|
|
78
75
|
return css`
|
|
79
76
|
bottom: -2px;
|
|
80
77
|
top: unset;
|
|
81
78
|
`;
|
|
82
79
|
}
|
|
83
|
-
|
|
84
80
|
return css``;
|
|
85
81
|
}}
|
|
86
82
|
|
|
@@ -89,22 +85,20 @@ const ThresholdStyle = styled.div`
|
|
|
89
85
|
$thresholdType,
|
|
90
86
|
$height
|
|
91
87
|
} = _ref9;
|
|
92
|
-
|
|
93
88
|
if ($thresholdType === ChartLineThresholdType.dash) {
|
|
94
89
|
return css`
|
|
95
90
|
height: ${$height + 4}px;
|
|
96
91
|
top: -2px;
|
|
97
92
|
`;
|
|
98
93
|
}
|
|
99
|
-
|
|
100
94
|
return css``;
|
|
101
95
|
}}
|
|
102
96
|
`;
|
|
103
97
|
const ThresholdLabelStyle = styled.div`
|
|
104
|
-
color: ${
|
|
98
|
+
color: ${_ref0 => {
|
|
105
99
|
let {
|
|
106
100
|
theme
|
|
107
|
-
} =
|
|
101
|
+
} = _ref0;
|
|
108
102
|
return theme.colors.foreground;
|
|
109
103
|
}};
|
|
110
104
|
font-size: 12px;
|
|
@@ -119,38 +113,36 @@ const ThresholdLabelStyle = styled.div`
|
|
|
119
113
|
box-sizing: border-box;
|
|
120
114
|
max-height: 28px;
|
|
121
115
|
|
|
122
|
-
${
|
|
116
|
+
${_ref1 => {
|
|
123
117
|
let {
|
|
124
118
|
$labelPosition
|
|
125
|
-
} =
|
|
126
|
-
|
|
119
|
+
} = _ref1;
|
|
127
120
|
if ($labelPosition === 'top') {
|
|
128
121
|
return css`
|
|
129
122
|
top: -2px;
|
|
130
123
|
bottom: unset;
|
|
131
124
|
`;
|
|
132
125
|
}
|
|
133
|
-
|
|
134
126
|
return css``;
|
|
135
127
|
}};
|
|
136
128
|
`;
|
|
137
129
|
const LineStyle = styled.div`
|
|
138
|
-
background-color: ${
|
|
130
|
+
background-color: ${_ref10 => {
|
|
139
131
|
let {
|
|
140
132
|
$backgroundColor
|
|
141
|
-
} =
|
|
133
|
+
} = _ref10;
|
|
142
134
|
return $backgroundColor ? $backgroundColor : 'transparent';
|
|
143
135
|
}};
|
|
144
|
-
z-index: ${
|
|
136
|
+
z-index: ${_ref11 => {
|
|
145
137
|
let {
|
|
146
138
|
$zIndex
|
|
147
|
-
} =
|
|
139
|
+
} = _ref11;
|
|
148
140
|
return $zIndex;
|
|
149
141
|
}};
|
|
150
|
-
width: ${
|
|
142
|
+
width: ${_ref12 => {
|
|
151
143
|
let {
|
|
152
144
|
$width
|
|
153
|
-
} =
|
|
145
|
+
} = _ref12;
|
|
154
146
|
return $width;
|
|
155
147
|
}};
|
|
156
148
|
height: 100%;
|
|
@@ -158,40 +150,36 @@ const LineStyle = styled.div`
|
|
|
158
150
|
top: 0;
|
|
159
151
|
left: 0;
|
|
160
152
|
bottom: 0;
|
|
161
|
-
border-right: 1px solid ${
|
|
153
|
+
border-right: 1px solid ${_ref13 => {
|
|
162
154
|
let {
|
|
163
155
|
theme
|
|
164
|
-
} =
|
|
156
|
+
} = _ref13;
|
|
165
157
|
return theme.colors.background;
|
|
166
158
|
}};
|
|
167
159
|
|
|
168
|
-
${
|
|
160
|
+
${_ref14 => {
|
|
169
161
|
let {
|
|
170
162
|
$border
|
|
171
|
-
} =
|
|
172
|
-
|
|
163
|
+
} = _ref14;
|
|
173
164
|
if ($border === ChartLineBorderType.rounded) {
|
|
174
165
|
return css`
|
|
175
166
|
border-radius: 4px 0 0 4px;
|
|
176
167
|
`;
|
|
177
168
|
}
|
|
178
|
-
|
|
179
169
|
return css``;
|
|
180
170
|
}}
|
|
181
171
|
|
|
182
172
|
&:last-child {
|
|
183
|
-
${
|
|
173
|
+
${_ref15 => {
|
|
184
174
|
let {
|
|
185
175
|
$border,
|
|
186
176
|
$isFullWidth
|
|
187
|
-
} =
|
|
188
|
-
|
|
177
|
+
} = _ref15;
|
|
189
178
|
if ($border === ChartLineBorderType.rounded && $isFullWidth) {
|
|
190
179
|
return css`
|
|
191
180
|
border-radius: 4px;
|
|
192
181
|
`;
|
|
193
182
|
}
|
|
194
|
-
|
|
195
183
|
return css``;
|
|
196
184
|
}}
|
|
197
185
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartLineStyles.mjs","sources":["../../../packages/chart-line/ChartLineStyles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { ChartLineBorderType, ChartLineThresholdType } from './types.js'\n\nexport const ContainerStyle = styled.div<{\n $alignItems: 'center' | 'flex-start'\n $height: number\n}>`\n display: flex;\n width: 100%;\n align-items: ${({ $alignItems }) => $alignItems};\n height: ${({ $height }) => $height}px;\n`\n\nexport const WrapperStyle = styled.div<{\n $border: ChartLineBorderType\n $height: number\n}>`\n display: flex;\n width: 100%;\n height: ${({ $height }) => $height}px;\n background: rgb(19 18 23 / 8%);\n position: relative;\n\n ${({ $border }) => {\n if ($border === ChartLineBorderType.rounded) {\n return css`\n border-radius: 4px;\n `\n }\n return css``\n }}\n`\n\nexport const ThresholdStyle = styled.div<{\n $labelPosition?: 'top' | 'bottom'\n $thresholdType: ChartLineThresholdType\n $height: number\n $backgroundColor?: string\n $zIndex: number\n}>`\n height: ${({ $height }) => $height + 38}px;\n width: 5px;\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n z-index: ${({ $zIndex }) => $zIndex};\n position: absolute;\n border-radius: 3px;\n top: -2px;\n right: -2px;\n\n ${({ $labelPosition }) => {\n if ($labelPosition === 'top') {\n return css`\n bottom: -2px;\n top: unset;\n `\n }\n return css``\n }}\n\n ${({ $thresholdType, $height }) => {\n if ($thresholdType === ChartLineThresholdType.dash) {\n return css`\n height: ${$height + 4}px;\n top: -2px;\n `\n }\n return css``\n }}\n`\n\nexport const ThresholdLabelStyle = styled.div<{\n $labelPosition?: 'top' | 'bottom'\n}>`\n color: ${({ theme }) => theme.colors.foreground};\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n padding: 4px 8px;\n position: absolute;\n bottom: -2px;\n right: 0;\n border-radius: 4px;\n white-space: nowrap;\n box-sizing: border-box;\n max-height: 28px;\n\n ${({ $labelPosition }) => {\n if ($labelPosition === 'top') {\n return css`\n top: -2px;\n bottom: unset;\n `\n }\n return css``\n }};\n`\n\nexport const LineStyle = styled.div<{\n $border: ChartLineBorderType\n $isFullWidth: boolean\n $width: string\n $backgroundColor?: string\n $zIndex: number\n}>`\n background-color: ${({ $backgroundColor }) =>\n $backgroundColor ? $backgroundColor : 'transparent'};\n z-index: ${({ $zIndex }) => $zIndex};\n width: ${({ $width }) => $width};\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n border-right: 1px solid ${({ theme }) => theme.colors.background};\n\n ${({ $border }) => {\n if ($border === ChartLineBorderType.rounded) {\n return css`\n border-radius: 4px 0 0 4px;\n `\n }\n return css``\n }}\n\n &:last-child {\n ${({ $border, $isFullWidth }) => {\n if ($border === ChartLineBorderType.rounded && $isFullWidth) {\n return css`\n border-radius: 4px;\n `\n }\n return css``\n }}\n }\n`\n"],"names":["ContainerStyle","styled","div","$alignItems","$height","WrapperStyle","$border","ChartLineBorderType","rounded","css","ThresholdStyle","$backgroundColor","$zIndex","$labelPosition","$thresholdType","ChartLineThresholdType","dash","ThresholdLabelStyle","theme","colors","foreground","LineStyle","$width","background","$isFullWidth"],"mappings":";;;;AAGaA,MAAAA,cAAc,GAAGC,MAAM,CAACC,
|
|
1
|
+
{"version":3,"file":"ChartLineStyles.mjs","sources":["../../../packages/chart-line/ChartLineStyles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { ChartLineBorderType, ChartLineThresholdType } from './types.js'\n\nexport const ContainerStyle = styled.div<{\n $alignItems: 'center' | 'flex-start'\n $height: number\n}>`\n display: flex;\n width: 100%;\n align-items: ${({ $alignItems }) => $alignItems};\n height: ${({ $height }) => $height}px;\n`\n\nexport const WrapperStyle = styled.div<{\n $border: ChartLineBorderType\n $height: number\n}>`\n display: flex;\n width: 100%;\n height: ${({ $height }) => $height}px;\n background: rgb(19 18 23 / 8%);\n position: relative;\n\n ${({ $border }) => {\n if ($border === ChartLineBorderType.rounded) {\n return css`\n border-radius: 4px;\n `\n }\n return css``\n }}\n`\n\nexport const ThresholdStyle = styled.div<{\n $labelPosition?: 'top' | 'bottom'\n $thresholdType: ChartLineThresholdType\n $height: number\n $backgroundColor?: string\n $zIndex: number\n}>`\n height: ${({ $height }) => $height + 38}px;\n width: 5px;\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n z-index: ${({ $zIndex }) => $zIndex};\n position: absolute;\n border-radius: 3px;\n top: -2px;\n right: -2px;\n\n ${({ $labelPosition }) => {\n if ($labelPosition === 'top') {\n return css`\n bottom: -2px;\n top: unset;\n `\n }\n return css``\n }}\n\n ${({ $thresholdType, $height }) => {\n if ($thresholdType === ChartLineThresholdType.dash) {\n return css`\n height: ${$height + 4}px;\n top: -2px;\n `\n }\n return css``\n }}\n`\n\nexport const ThresholdLabelStyle = styled.div<{\n $labelPosition?: 'top' | 'bottom'\n}>`\n color: ${({ theme }) => theme.colors.foreground};\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n padding: 4px 8px;\n position: absolute;\n bottom: -2px;\n right: 0;\n border-radius: 4px;\n white-space: nowrap;\n box-sizing: border-box;\n max-height: 28px;\n\n ${({ $labelPosition }) => {\n if ($labelPosition === 'top') {\n return css`\n top: -2px;\n bottom: unset;\n `\n }\n return css``\n }};\n`\n\nexport const LineStyle = styled.div<{\n $border: ChartLineBorderType\n $isFullWidth: boolean\n $width: string\n $backgroundColor?: string\n $zIndex: number\n}>`\n background-color: ${({ $backgroundColor }) =>\n $backgroundColor ? $backgroundColor : 'transparent'};\n z-index: ${({ $zIndex }) => $zIndex};\n width: ${({ $width }) => $width};\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n border-right: 1px solid ${({ theme }) => theme.colors.background};\n\n ${({ $border }) => {\n if ($border === ChartLineBorderType.rounded) {\n return css`\n border-radius: 4px 0 0 4px;\n `\n }\n return css``\n }}\n\n &:last-child {\n ${({ $border, $isFullWidth }) => {\n if ($border === ChartLineBorderType.rounded && $isFullWidth) {\n return css`\n border-radius: 4px;\n `\n }\n return css``\n }}\n }\n`\n"],"names":["ContainerStyle","styled","div","_ref","$alignItems","_ref2","$height","WrapperStyle","_ref3","_ref4","$border","ChartLineBorderType","rounded","css","ThresholdStyle","_ref5","_ref6","$backgroundColor","_ref7","$zIndex","_ref8","$labelPosition","_ref9","$thresholdType","ChartLineThresholdType","dash","ThresholdLabelStyle","_ref0","theme","colors","foreground","_ref1","LineStyle","_ref10","_ref11","_ref12","$width","_ref13","background","_ref14","_ref15","$isFullWidth"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.mjs","sources":["../../../packages/chart-line/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '../utils/index.js'\nexport type { Theme } from '../theme/index.js'\n\nexport enum ChartLineThresholdType {\n dash = 'dash',\n flag = 'flag',\n}\nexport type ChartLineThresholdTypes = keyof typeof ChartLineThresholdType\nexport enum ChartLineBorderType {\n rounded = 'rounded',\n square = 'square',\n}\nexport type ChartLineBorderTypes = keyof typeof ChartLineBorderType\n\nexport type ChartLineConfig = {\n loading?: boolean\n data: LineData[]\n thresholdType: ChartLineThresholdType\n height: number\n border: ChartLineBorderType\n maxValue?: number\n showLabels?: boolean\n}\n\nexport type LineData = {\n color?: string\n labelPosition?: 'top' | 'bottom'\n threshold: {\n value: number\n color?: string\n label: string\n description: string\n descriptionElement?: React.ReactNode\n }\n}\n\nexport type ChartLineProps = LidoComponentProps<'div', ChartLineConfig>\n\nexport type ChartLineLabelProps = LidoComponentProps<\n 'div',\n {\n id: string\n previousIds?: string[]\n zIndex: number\n show?: boolean\n height: number\n thresholdType: ChartLineThresholdType\n containerId: string\n } & LineData\n>\n"],"names":["ChartLineThresholdType","ChartLineBorderType"],"mappings":"AAGYA,IAAAA,
|
|
1
|
+
{"version":3,"file":"types.mjs","sources":["../../../packages/chart-line/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '../utils/index.js'\nexport type { Theme } from '../theme/index.js'\n\nexport enum ChartLineThresholdType {\n dash = 'dash',\n flag = 'flag',\n}\nexport type ChartLineThresholdTypes = keyof typeof ChartLineThresholdType\nexport enum ChartLineBorderType {\n rounded = 'rounded',\n square = 'square',\n}\nexport type ChartLineBorderTypes = keyof typeof ChartLineBorderType\n\nexport type ChartLineConfig = {\n loading?: boolean\n data: LineData[]\n thresholdType: ChartLineThresholdType\n height: number\n border: ChartLineBorderType\n maxValue?: number\n showLabels?: boolean\n}\n\nexport type LineData = {\n color?: string\n labelPosition?: 'top' | 'bottom'\n threshold: {\n value: number\n color?: string\n label: string\n description: string\n descriptionElement?: React.ReactNode\n }\n}\n\nexport type ChartLineProps = LidoComponentProps<'div', ChartLineConfig>\n\nexport type ChartLineLabelProps = LidoComponentProps<\n 'div',\n {\n id: string\n previousIds?: string[]\n zIndex: number\n show?: boolean\n height: number\n thresholdType: ChartLineThresholdType\n containerId: string\n } & LineData\n>\n"],"names":["ChartLineThresholdType","ChartLineBorderType"],"mappings":"AAGYA,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;AAAA,EAAA,OAAtBA,sBAAsB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKtBC,IAAAA,mBAAmB,0BAAnBA,mBAAmB,EAAA;EAAnBA,mBAAmB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAnBA,mBAAmB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AAAA,EAAA,OAAnBA,mBAAmB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { VIEWPORT_MARGIN } from './constants.mjs';
|
|
2
2
|
|
|
3
|
+
// Check if element overflows viewport and should be inverted
|
|
3
4
|
const checkViewportOverflow = (position, elemSize, viewportSize) => {
|
|
4
5
|
const invertPosition = viewportSize - position;
|
|
5
6
|
return position + elemSize + VIEWPORT_MARGIN > viewportSize && invertPosition + elemSize + VIEWPORT_MARGIN < viewportSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkViewport.mjs","sources":["../../../../packages/chart-line/utils/checkViewport.ts"],"sourcesContent":["import { VIEWPORT_MARGIN } from './constants.js'\n\n// Check if element overflows viewport and should be inverted\nexport const checkViewportOverflow = (\n position: number,\n elemSize: number,\n viewportSize: number,\n) => {\n const invertPosition = viewportSize - position\n return (\n position + elemSize + VIEWPORT_MARGIN > viewportSize &&\n invertPosition + elemSize + VIEWPORT_MARGIN < viewportSize\n )\n}\n"],"names":["checkViewportOverflow","position","elemSize","viewportSize","invertPosition","VIEWPORT_MARGIN"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"checkViewport.mjs","sources":["../../../../packages/chart-line/utils/checkViewport.ts"],"sourcesContent":["import { VIEWPORT_MARGIN } from './constants.js'\n\n// Check if element overflows viewport and should be inverted\nexport const checkViewportOverflow = (\n position: number,\n elemSize: number,\n viewportSize: number,\n) => {\n const invertPosition = viewportSize - position\n return (\n position + elemSize + VIEWPORT_MARGIN > viewportSize &&\n invertPosition + elemSize + VIEWPORT_MARGIN < viewportSize\n )\n}\n"],"names":["checkViewportOverflow","position","elemSize","viewportSize","invertPosition","VIEWPORT_MARGIN"],"mappings":";;AAEA;AACO,MAAMA,qBAAqB,GAAGA,CACnCC,QAAgB,EAChBC,QAAgB,EAChBC,YAAoB,KACjB;AACH,EAAA,MAAMC,cAAc,GAAGD,YAAY,GAAGF,QAAQ,CAAA;AAC9C,EAAA,OACEA,QAAQ,GAAGC,QAAQ,GAAGG,eAAe,GAAGF,YAAY,IACpDC,cAAc,GAAGF,QAAQ,GAAGG,eAAe,GAAGF,YAAY,CAAA;AAE9D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.mjs","sources":["../../../../packages/chart-line/utils/constants.ts"],"sourcesContent":["export const VIEWPORT_MARGIN = 8\nexport const CHART_LINE_LABEL_ID = 'chart-line-label'\nexport const LABEL_HEIGHT_INCREASE = 36\n"],"names":["VIEWPORT_MARGIN","CHART_LINE_LABEL_ID","LABEL_HEIGHT_INCREASE"],"mappings":"AAAO,MAAMA,eAAe,GAAG,
|
|
1
|
+
{"version":3,"file":"constants.mjs","sources":["../../../../packages/chart-line/utils/constants.ts"],"sourcesContent":["export const VIEWPORT_MARGIN = 8\nexport const CHART_LINE_LABEL_ID = 'chart-line-label'\nexport const LABEL_HEIGHT_INCREASE = 36\n"],"names":["VIEWPORT_MARGIN","CHART_LINE_LABEL_ID","LABEL_HEIGHT_INCREASE"],"mappings":"AAAO,MAAMA,eAAe,GAAG,EAAC;AACzB,MAAMC,mBAAmB,GAAG,mBAAkB;AAC9C,MAAMC,qBAAqB,GAAG;;;;"}
|
|
@@ -7,11 +7,9 @@ const getContainerSize = elementIds => {
|
|
|
7
7
|
});
|
|
8
8
|
const size = elementIds.reduce((acc, id) => {
|
|
9
9
|
const element = document.getElementById(id);
|
|
10
|
-
|
|
11
10
|
if (element && element.offsetHeight > 0) {
|
|
12
11
|
return Math.max(acc, element.offsetHeight);
|
|
13
12
|
}
|
|
14
|
-
|
|
15
13
|
return acc;
|
|
16
14
|
}, 0);
|
|
17
15
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getContainerSize.mjs","sources":["../../../../packages/chart-line/utils/getContainerSize.ts"],"sourcesContent":["// get max height between all elements\nexport const getContainerSize = (elementIds: string[]) => {\n if (!elementIds.length) return null\n\n const isCenterAlign = elementIds.every((id) => {\n const element = document.getElementById(id)\n return (\n element?.dataset.labelPosition === 'top' ||\n element?.dataset.labelPosition === 'bottom'\n )\n })\n\n const size = elementIds.reduce((acc, id) => {\n const element = document.getElementById(id)\n if (element && element.offsetHeight > 0) {\n return Math.max(acc, element.offsetHeight)\n }\n return acc\n }, 0)\n\n return {\n size: isCenterAlign ? size * 2 : size,\n isCenterAlign,\n }\n}\n"],"names":["getContainerSize","elementIds","length","isCenterAlign","every","id","element","document","getElementById","dataset","labelPosition","size","reduce","acc","offsetHeight","Math","max"],"mappings":"AAAA;AACaA,MAAAA,gBAAgB,GAAIC,
|
|
1
|
+
{"version":3,"file":"getContainerSize.mjs","sources":["../../../../packages/chart-line/utils/getContainerSize.ts"],"sourcesContent":["// get max height between all elements\nexport const getContainerSize = (elementIds: string[]) => {\n if (!elementIds.length) return null\n\n const isCenterAlign = elementIds.every((id) => {\n const element = document.getElementById(id)\n return (\n element?.dataset.labelPosition === 'top' ||\n element?.dataset.labelPosition === 'bottom'\n )\n })\n\n const size = elementIds.reduce((acc, id) => {\n const element = document.getElementById(id)\n if (element && element.offsetHeight > 0) {\n return Math.max(acc, element.offsetHeight)\n }\n return acc\n }, 0)\n\n return {\n size: isCenterAlign ? size * 2 : size,\n isCenterAlign,\n }\n}\n"],"names":["getContainerSize","elementIds","length","isCenterAlign","every","id","element","document","getElementById","dataset","labelPosition","size","reduce","acc","offsetHeight","Math","max"],"mappings":"AAAA;AACaA,MAAAA,gBAAgB,GAAIC,UAAoB,IAAK;AACxD,EAAA,IAAI,CAACA,UAAU,CAACC,MAAM,EAAE,OAAO,IAAI,CAAA;AAEnC,EAAA,MAAMC,aAAa,GAAGF,UAAU,CAACG,KAAK,CAAEC,EAAE,IAAK;AAC7C,IAAA,MAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAACH,EAAE,CAAC,CAAA;AAC3C,IAAA,OACEC,OAAO,EAAEG,OAAO,CAACC,aAAa,KAAK,KAAK,IACxCJ,OAAO,EAAEG,OAAO,CAACC,aAAa,KAAK,QAAQ,CAAA;AAE/C,GAAC,CAAC,CAAA;EAEF,MAAMC,IAAI,GAAGV,UAAU,CAACW,MAAM,CAAC,CAACC,GAAG,EAAER,EAAE,KAAK;AAC1C,IAAA,MAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAACH,EAAE,CAAC,CAAA;AAC3C,IAAA,IAAIC,OAAO,IAAIA,OAAO,CAACQ,YAAY,GAAG,CAAC,EAAE;MACvC,OAAOC,IAAI,CAACC,GAAG,CAACH,GAAG,EAAEP,OAAO,CAACQ,YAAY,CAAC,CAAA;AAC5C,KAAA;AACA,IAAA,OAAOD,GAAG,CAAA;GACX,EAAE,CAAC,CAAC,CAAA;EAEL,OAAO;AACLF,IAAAA,IAAI,EAAER,aAAa,GAAGQ,IAAI,GAAG,CAAC,GAAGA,IAAI;AACrCR,IAAAA,aAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -7,18 +7,19 @@ const getElementData = (id, containerId) => {
|
|
|
7
7
|
const label = document.getElementById(`${id}-description`);
|
|
8
8
|
if (!threshold || !label) return null;
|
|
9
9
|
const container = document.getElementById(containerId);
|
|
10
|
-
if (!container) return null;
|
|
10
|
+
if (!container) return null;
|
|
11
11
|
|
|
12
|
+
// Temporarily reset transform to get original positions
|
|
12
13
|
const originalTransform = label.style.transform;
|
|
13
14
|
label.style.removeProperty('transform');
|
|
14
15
|
const thresholdRect = threshold.getBoundingClientRect();
|
|
15
16
|
const labelRect = label.getBoundingClientRect();
|
|
16
|
-
const containerRect = container.getBoundingClientRect();
|
|
17
|
+
const containerRect = container.getBoundingClientRect();
|
|
17
18
|
|
|
19
|
+
// Restore transform if it existed
|
|
18
20
|
if (originalTransform) {
|
|
19
21
|
label.style.setProperty('transform', originalTransform);
|
|
20
22
|
}
|
|
21
|
-
|
|
22
23
|
return {
|
|
23
24
|
elements: {
|
|
24
25
|
threshold,
|
|
@@ -30,16 +31,15 @@ const getElementData = (id, containerId) => {
|
|
|
30
31
|
},
|
|
31
32
|
containerRect
|
|
32
33
|
};
|
|
33
|
-
};
|
|
34
|
-
|
|
34
|
+
};
|
|
35
35
|
|
|
36
|
+
// Calculate offset needed to keep label within viewport bounds
|
|
36
37
|
const calculateLabelOffset = (thresholdRect, labelRect, containerRect, isInverted) => {
|
|
37
38
|
if (isInverted) {
|
|
38
39
|
// Label positioned with left: 0 (extends right from threshold)
|
|
39
40
|
// Check if label extends beyond container right boundary
|
|
40
41
|
const labelRightEdge = thresholdRect.left + labelRect.width;
|
|
41
42
|
const containerRightEdge = containerRect.right - VIEWPORT_MARGIN;
|
|
42
|
-
|
|
43
43
|
if (labelRightEdge > containerRightEdge) {
|
|
44
44
|
return labelRightEdge - containerRightEdge;
|
|
45
45
|
}
|
|
@@ -48,27 +48,25 @@ const calculateLabelOffset = (thresholdRect, labelRect, containerRect, isInverte
|
|
|
48
48
|
// Check if label left edge goes beyond container left boundary
|
|
49
49
|
const labelLeftEdge = thresholdRect.right - labelRect.width;
|
|
50
50
|
const containerLeftEdge = containerRect.left + VIEWPORT_MARGIN;
|
|
51
|
-
|
|
52
51
|
if (labelLeftEdge < containerLeftEdge) {
|
|
53
52
|
return containerLeftEdge - labelLeftEdge;
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
|
-
|
|
57
55
|
return 0;
|
|
58
|
-
};
|
|
59
|
-
|
|
56
|
+
};
|
|
60
57
|
|
|
58
|
+
// Calculate if flag should be inverted based on viewport overflow
|
|
61
59
|
const shouldInvertLabel = (thresholdRect, labelRect, containerRect, viewportWidth) => {
|
|
62
60
|
const position = containerRect.right - thresholdRect.right;
|
|
63
61
|
const isInverted = checkViewportOverflow(position, labelRect.width, viewportWidth);
|
|
64
62
|
return isInverted;
|
|
65
63
|
};
|
|
66
|
-
|
|
67
64
|
const resetThresholdHeight = threshold => {
|
|
68
65
|
if (!threshold) return;
|
|
69
66
|
threshold.style.removeProperty('height');
|
|
70
|
-
};
|
|
67
|
+
};
|
|
71
68
|
|
|
69
|
+
// Apply label positioning based on inversion
|
|
72
70
|
const applyLabelPosition = (label, isInverted) => {
|
|
73
71
|
if (isInverted) {
|
|
74
72
|
label.style.setProperty('left', '0px');
|
|
@@ -79,68 +77,67 @@ const applyLabelPosition = (label, isInverted) => {
|
|
|
79
77
|
label.style.setProperty('left', 'auto');
|
|
80
78
|
label.dataset.isInverted = 'false';
|
|
81
79
|
}
|
|
82
|
-
};
|
|
83
|
-
|
|
80
|
+
};
|
|
84
81
|
|
|
82
|
+
// Calculate distance between two thresholds considering label inversion
|
|
85
83
|
const calculateFlagDistance = (currentRect, previousRect, currentLabelRect, isPreviousInverted) => {
|
|
86
84
|
return isPreviousInverted ? currentRect.left - previousRect.left - currentLabelRect.width : currentRect.left - previousRect.left;
|
|
87
|
-
};
|
|
88
|
-
|
|
85
|
+
};
|
|
89
86
|
|
|
87
|
+
// Get first previous threshold on the same position as the current threshold
|
|
90
88
|
const getPreviousThreshold = (previousIds, currentId) => {
|
|
91
89
|
const currentElement = document.getElementById(currentId);
|
|
92
90
|
if (!currentElement) return null;
|
|
93
91
|
const currentLabelPosition = currentElement.dataset.labelPosition;
|
|
94
|
-
|
|
95
92
|
for (let i = previousIds.length - 1; i >= 0; i--) {
|
|
96
93
|
const id = previousIds[i];
|
|
97
94
|
const element = document.getElementById(id);
|
|
98
|
-
|
|
99
95
|
if (element?.dataset.labelPosition === currentLabelPosition) {
|
|
100
96
|
return id;
|
|
101
97
|
}
|
|
102
98
|
}
|
|
103
|
-
|
|
104
99
|
return null;
|
|
105
100
|
};
|
|
106
|
-
|
|
107
101
|
const handlePositioning = props => {
|
|
108
102
|
const {
|
|
109
103
|
previousIds = [],
|
|
110
104
|
id,
|
|
111
105
|
reset,
|
|
112
106
|
containerId
|
|
113
|
-
} = props;
|
|
107
|
+
} = props;
|
|
114
108
|
|
|
109
|
+
// Check if we are in browser (not SSR)
|
|
115
110
|
if (typeof window === 'undefined') return;
|
|
116
|
-
|
|
117
111
|
if (reset) {
|
|
118
112
|
resetThresholdHeight(document.getElementById(id));
|
|
119
113
|
return;
|
|
120
114
|
}
|
|
121
|
-
|
|
122
115
|
const currentData = getElementData(id, containerId);
|
|
123
116
|
if (!currentData) return;
|
|
124
117
|
const {
|
|
125
118
|
elements: currentElements,
|
|
126
119
|
rects: currentRects,
|
|
127
120
|
containerRect
|
|
128
|
-
} = currentData;
|
|
121
|
+
} = currentData;
|
|
129
122
|
|
|
130
|
-
|
|
123
|
+
// Calculate inversion for current label using container width
|
|
124
|
+
const currentIsInverted = shouldInvertLabel(currentRects.threshold, currentRects.label, containerRect, containerRect.width);
|
|
131
125
|
|
|
132
|
-
|
|
126
|
+
// Apply positioning for current label
|
|
127
|
+
applyLabelPosition(currentElements.label, currentIsInverted);
|
|
133
128
|
|
|
134
|
-
|
|
129
|
+
// Calculate offset needed to keep label within bounds
|
|
130
|
+
const currentOffset = calculateLabelOffset(currentRects.threshold, currentRects.label, containerRect, currentIsInverted);
|
|
135
131
|
|
|
132
|
+
// Apply offset if needed
|
|
136
133
|
if (currentOffset > 0) {
|
|
137
134
|
const direction = currentIsInverted ? -currentOffset : currentOffset;
|
|
138
135
|
currentElements.label.style.setProperty('transform', `translateX(${direction}px)`);
|
|
139
136
|
} else {
|
|
140
137
|
currentElements.label.style.removeProperty('transform');
|
|
141
|
-
}
|
|
142
|
-
|
|
138
|
+
}
|
|
143
139
|
|
|
140
|
+
// Handle previous threshold positioning if exists
|
|
144
141
|
const previousId = getPreviousThreshold(previousIds, id);
|
|
145
142
|
if (!previousId) return;
|
|
146
143
|
const previousData = getElementData(previousId, containerId);
|
|
@@ -148,12 +145,13 @@ const handlePositioning = props => {
|
|
|
148
145
|
const {
|
|
149
146
|
rects: previousRects,
|
|
150
147
|
elements: previousElements
|
|
151
|
-
} = previousData;
|
|
148
|
+
} = previousData;
|
|
152
149
|
|
|
153
|
-
|
|
150
|
+
// Calculate inversion for previous flag using window width (as in original)
|
|
151
|
+
const previousIsInverted = previousElements.label.dataset.isInverted === 'true';
|
|
154
152
|
|
|
153
|
+
// Calculate distance and adjust height if needed
|
|
155
154
|
const distance = calculateFlagDistance(currentRects.threshold, previousRects.threshold, currentRects.label, previousIsInverted);
|
|
156
|
-
|
|
157
155
|
if (distance < currentRects.label.width) {
|
|
158
156
|
const newHeight = previousRects.threshold.height + LABEL_HEIGHT_INCREASE;
|
|
159
157
|
currentElements.threshold.style.setProperty('height', `${newHeight}px`);
|