@cloudscape-design/components 3.0.775 → 3.0.777
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/app-layout/test-classes/styles.css.js +22 -20
- package/app-layout/test-classes/styles.scoped.css +28 -20
- package/app-layout/test-classes/styles.selectors.js +22 -20
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +5 -5
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.js +1 -0
- package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/styles.css.js +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/styles.scoped.css +2 -1
- package/app-layout/visual-refresh-toolbar/split-panel/styles.selectors.js +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js +7 -7
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js +7 -9
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scoped.css +19 -27
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js +7 -9
- package/area-chart/internal.d.ts.map +1 -1
- package/area-chart/internal.js +1 -0
- package/area-chart/internal.js.map +1 -1
- package/area-chart/model/use-chart-model.d.ts +2 -1
- package/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +2 -2
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/internal/components/tooltip/index.d.ts +2 -1
- package/internal/components/tooltip/index.d.ts.map +1 -1
- package/internal/components/tooltip/index.js +2 -2
- package/internal/components/tooltip/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/popover/container.d.ts +2 -1
- package/popover/container.d.ts.map +1 -1
- package/popover/container.js +5 -4
- package/popover/container.js.map +1 -1
- package/popover/interfaces.d.ts +4 -0
- package/popover/interfaces.d.ts.map +1 -1
- package/popover/interfaces.js.map +1 -1
- package/popover/use-popover-position.d.ts +3 -1
- package/popover/use-popover-position.d.ts.map +1 -1
- package/popover/use-popover-position.js +21 -5
- package/popover/use-popover-position.js.map +1 -1
- package/popover/utils/positions.d.ts +2 -1
- package/popover/utils/positions.d.ts.map +1 -1
- package/popover/utils/positions.js +6 -0
- package/popover/utils/positions.js.map +1 -1
- package/prompt-input/interfaces.d.ts +16 -0
- package/prompt-input/interfaces.d.ts.map +1 -1
- package/prompt-input/interfaces.js.map +1 -1
- package/prompt-input/internal.d.ts.map +1 -1
- package/prompt-input/internal.js +28 -11
- package/prompt-input/internal.js.map +1 -1
- package/prompt-input/styles.css.js +14 -8
- package/prompt-input/styles.scoped.css +264 -68
- package/prompt-input/styles.selectors.js +14 -8
- package/prompt-input/test-classes/styles.css.js +5 -3
- package/prompt-input/test-classes/styles.scoped.css +11 -3
- package/prompt-input/test-classes/styles.selectors.js +5 -3
- package/select/parts/item.d.ts.map +1 -1
- package/select/parts/item.js +1 -1
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.d.ts.map +1 -1
- package/select/parts/multiselect-item.js +1 -1
- package/select/parts/multiselect-item.js.map +1 -1
- package/split-panel/implementation.js +1 -1
- package/split-panel/implementation.js.map +1 -1
- package/split-panel/side.d.ts.map +1 -1
- package/split-panel/side.js +3 -1
- package/split-panel/side.js.map +1 -1
- package/split-panel/styles.css.js +26 -26
- package/split-panel/styles.scoped.css +46 -43
- package/split-panel/styles.selectors.js +26 -26
- package/test-utils/dom/app-layout/index.d.ts +2 -0
- package/test-utils/dom/app-layout/index.js +6 -0
- package/test-utils/dom/app-layout/index.js.map +1 -1
- package/test-utils/dom/prompt-input/index.d.ts +2 -0
- package/test-utils/dom/prompt-input/index.js +6 -0
- package/test-utils/dom/prompt-input/index.js.map +1 -1
- package/test-utils/selectors/app-layout/index.d.ts +2 -0
- package/test-utils/selectors/app-layout/index.js +6 -0
- package/test-utils/selectors/app-layout/index.js.map +1 -1
- package/test-utils/selectors/prompt-input/index.d.ts +2 -0
- package/test-utils/selectors/prompt-input/index.js +6 -0
- package/test-utils/selectors/prompt-input/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { MouseEvent, RefObject, useEffect, useMemo, useRef } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { useHeightMeasure } from '../../internal/hooks/container-queries/use-height-measure';\nimport { KeyCode } from '../../internal/keycode';\nimport { circleIndex } from '../../internal/utils/circle-index';\nimport handleKey from '../../internal/utils/handle-key';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { throttle } from '../../internal/utils/throttle';\nimport { useReaction } from '../async-store';\nimport { AreaChartProps } from '../interfaces';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport { ChartModel } from './index';\nimport InteractionsStore from './interactions-store';\nimport { findClosest } from './utils';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\nconst POPOVER_DEADZONE = 12;\n\nexport interface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n isRtl?: boolean;\n fitHeight?: boolean;\n externalSeries: readonly AreaChartProps.Series<T>[];\n visibleSeries: readonly AreaChartProps.Series<T>[];\n setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n highlightedSeries: null | AreaChartProps.Series<T>;\n setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n xDomain?: XDomain<T>;\n yDomain?: YDomain;\n xScaleType: XScaleType;\n yScaleType: YScaleType;\n height: number;\n width: number;\n popoverRef: RefObject<HTMLElement>;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n isRtl,\n fitHeight,\n externalSeries: allSeries,\n visibleSeries: series,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height: explicitHeight,\n width,\n popoverRef,\n}: UseChartModelProps<T>): ChartModel<T> {\n // Chart elements refs used in handlers.\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n const plotMeasureRef = useRef<SVGLineElement>(null);\n const hasVisibleSeries = series.length > 0;\n const height = useHeightMeasure(() => plotMeasureRef.current, !fitHeight, [hasVisibleSeries]) ?? explicitHeight;\n\n const stableSetVisibleSeries = useStableCallback(setVisibleSeries);\n\n const model = useMemo(() => {\n // Compute scales, ticks and two-dimensional plots.\n const computed = computeChartProps({\n isRtl,\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n });\n\n // A store for chart interactions that don't require plot recomputation.\n const interactions = new InteractionsStore(series, computed.plot);\n\n const containsMultipleSeries = interactions.series.length > 1;\n\n // A series decorator to provide extra props such as color and marker type.\n const getInternalSeries = createSeriesDecorator(allSeries);\n\n const isMouseOverPopover = (clientX: number, clientY: number) => {\n if (popoverRef.current?.firstChild) {\n const popoverPosition = (popoverRef.current.firstChild as HTMLElement).getBoundingClientRect();\n if (\n clientX > popoverPosition.x - POPOVER_DEADZONE &&\n clientX < popoverPosition.x + popoverPosition.width + POPOVER_DEADZONE &&\n clientY > popoverPosition.y - POPOVER_DEADZONE &&\n clientY < popoverPosition.y + popoverPosition.height + POPOVER_DEADZONE\n ) {\n return true;\n }\n }\n return false;\n };\n\n // A Callback for svg mouseover to hover the plot points.\n // Throttling is necessary for a substantially smoother customer experience.\n const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n // No hover logic when the popover is pinned or no data available.\n if (\n interactions.get().isPopoverPinned ||\n !plotRef.current ||\n interactions.plot.xy.length === 0 ||\n isMouseOverPopover(clientX, clientY)\n ) {\n return;\n }\n\n const svgRect = plotRef.current.svg.getBoundingClientRect();\n const offsetX = clientX - svgRect.left;\n const offsetY = clientY - svgRect.top;\n\n const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n // If close enough to the point - highlight the point and its column.\n // If not - only highlight the closest column.\n if (\n Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n ) {\n interactions.highlightPoint(closestPoint);\n } else {\n interactions.highlightX(closestX);\n }\n }, SVG_HOVER_THROTTLE);\n\n const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement>) =>\n onSVGMouseMoveThrottled(clientX, clientY);\n\n // A callback for svg mouseout to clear all highlights.\n const onSVGMouseOut = (event: React.MouseEvent<SVGElement>) => {\n // Because the mouseover is throttled, in can occur slightly after the mouseout,\n // neglecting its effect; cancelling the throttled function prevents that.\n onSVGMouseMoveThrottled.cancel();\n\n // No hover logic when the popover is pinned or mouse is over popover\n if (interactions.get().isPopoverPinned || isMouseOverPopover(event.clientX, event.clientY)) {\n return;\n }\n\n // Check if the target is contained within svg to allow hovering on the popover body.\n if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n interactions.clearHighlightedLegend();\n interactions.clearHighlight();\n }\n };\n\n // A callback for svg click to pin/unpin the popover.\n const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n interactions.togglePopoverPin();\n event.preventDefault();\n };\n\n const moveWithinXAxis = (direction: -1 | 1) => {\n if (interactions.get().highlightedPoint) {\n return moveWithinSeries(direction);\n } else if (containsMultipleSeries) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const currentXIndex = highlightedX[0].index.x;\n const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);\n interactions.highlightX(interactions.plot.xy[nextXIndex]);\n }\n }\n };\n\n // A helper function to highlight the next or previous point within selected series.\n const moveWithinSeries = (direction: -1 | 1) => {\n // Can only use motion when a particular point is highlighted.\n const point = interactions.get().highlightedPoint;\n if (!point) {\n return;\n }\n\n // Take the index of the currently highlighted series.\n const sIndex = point.index.s;\n // Take the incremented(circularly) x-index of the currently highlighted point.\n const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n // Highlight the next point using x:s grouped data.\n interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n };\n\n // A helper function to highlight the next or previous point within the selected column.\n const moveBetweenSeries = (direction: -1 | 1) => {\n const point = interactions.get().highlightedPoint;\n if (!point) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const xIndex = highlightedX[0].index.x;\n const points = interactions.plot.xy[xIndex];\n const yIndex = direction === 1 ? 0 : points.length - 1;\n interactions.highlightPoint(points[yIndex]);\n }\n return;\n }\n\n // Take the index of the currently highlighted column.\n const xIndex = point.index.x;\n const currentYIndex = point.index.y;\n\n if (\n containsMultipleSeries &&\n ((currentYIndex === 0 && direction === -1) ||\n (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))\n ) {\n interactions.highlightX(interactions.plot.xy[xIndex]);\n } else {\n // Take the incremented(circularly) y-index of the currently highlighted point.\n const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n // Highlight the next point using x:y grouped data.\n interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);\n }\n };\n\n // A callback for svg keydown to enable motions and popover pin with the keyboard.\n const onSVGKeyDown = (event: React.KeyboardEvent<HTMLElement | SVGElement>) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.up &&\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.down &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.space &&\n keyCode !== KeyCode.enter\n ) {\n return;\n }\n\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n // No keydown logic when the popover is pinned.\n if (interactions.get().isPopoverPinned) {\n return;\n }\n\n handleKey(event, {\n onBlockEnd: () => moveBetweenSeries(-1),\n onBlockStart: () => moveBetweenSeries(1),\n onInlineStart: () => moveWithinXAxis(-1),\n onInlineEnd: () => moveWithinXAxis(1),\n onActivate: () => interactions.pinPopover(),\n });\n };\n\n const highlightFirstX = () => {\n interactions.highlightX(interactions.plot.xy[0]);\n };\n\n // A callback for application focus to highlight series.\n const onApplicationFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n // When focus is caused by a click event nothing is expected as clicks are handled separately.\n if (trigger === 'keyboard') {\n const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();\n if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {\n highlightFirstX();\n } else if (!highlightedX) {\n interactions.highlightFirstPoint();\n }\n }\n };\n\n // A callback for application blur to clear all highlights unless the popover is pinned.\n const onApplicationBlur = (event: React.FocusEvent<Element>) => {\n // Pinned popover stays pinned even if the focus is lost.\n // If blur is not caused by the popover, forget the previously highlighted point.\n if (!nodeBelongs(containerRef.current, event.relatedTarget) && !interactions.get().isPopoverPinned) {\n interactions.clearHighlight();\n }\n };\n\n const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n stableSetVisibleSeries(series);\n };\n\n const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n interactions.highlightSeries(series);\n };\n\n const onPopoverDismiss = (outsideClick?: boolean) => {\n interactions.unpinPopover();\n\n // Return focus back to the application or plot (when no point is highlighted).\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n if (interactions.get().highlightedPoint || interactions.get().highlightedX) {\n plotRef.current!.focusApplication();\n } else {\n interactions.clearHighlight();\n plotRef.current!.focusPlot();\n }\n }, 0);\n }\n };\n\n const onContainerBlur = () => {\n interactions.clearState();\n };\n\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n }\n };\n\n const onPopoverLeave = (event: MouseEvent) => {\n if (nodeContains(plotRef.current!.svg, event.relatedTarget as Element) || interactions.get().isPopoverPinned) {\n return;\n }\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n };\n return {\n width,\n height,\n series,\n allSeries,\n getInternalSeries,\n computed,\n interactions,\n handlers: {\n onSVGMouseMove,\n onSVGMouseOut,\n onSVGMouseDown,\n onSVGKeyDown,\n onApplicationFocus,\n onApplicationBlur,\n onFilterSeries,\n onLegendHighlight,\n onPopoverDismiss,\n onContainerBlur,\n onDocumentKeyDown,\n onPopoverLeave,\n },\n refs: {\n plot: plotRef,\n plotMeasure: plotMeasureRef,\n container: containerRef,\n verticalMarker: verticalMarkerRef,\n popoverRef,\n },\n };\n }, [\n allSeries,\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n stableSetVisibleSeries,\n popoverRef,\n isRtl,\n ]);\n\n // Notify client when series highlight change.\n useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n // Update interactions store when series highlight in a controlled way.\n useEffect(() => {\n if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n model.interactions.highlightSeries(highlightedSeries);\n }\n }, [model, highlightedSeries]);\n\n return model;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAyB,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAIlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,qBAAqB,MAAM,2BAA2B,CAAC;AAE9D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAoB5B,6FAA6F;AAC7F,MAAM,CAAC,OAAO,UAAU,aAAa,CAAqC,EACxE,KAAK,EACL,SAAS,EACT,cAAc,EAAE,SAAS,EACzB,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,UAAU,EACV,UAAU,GACY;;IACtB,wCAAwC;IACxC,MAAM,OAAO,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,MAAM,MAAM,GACV,MAAA,gBAAgB,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,mCAAI,cAAc,CAAC;IAC/G,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,mDAAmD;QACnD,MAAM,QAAQ,GAAG,iBAAiB,CAAC;YACjC,KAAK;YACL,MAAM;YACN,OAAO;YACP,OAAO;YACP,UAAU;YACV,UAAU;YACV,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,wEAAwE;QACxE,MAAM,YAAY,GAAG,IAAI,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAElE,MAAM,sBAAsB,GAAG,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9D,2EAA2E;QAC3E,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;QAE3D,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,OAAe,EAAE,EAAE;;YAC9D,IAAI,MAAA,UAAU,CAAC,OAAO,0CAAE,UAAU,EAAE;gBAClC,MAAM,eAAe,GAAI,UAAU,CAAC,OAAO,CAAC,UAA0B,CAAC,qBAAqB,EAAE,CAAC;gBAC/F,IACE,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,gBAAgB;oBAC9C,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,KAAK,GAAG,gBAAgB;oBACtE,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,gBAAgB;oBAC9C,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,GAAG,gBAAgB,EACvE;oBACA,OAAO,IAAI,CAAC;iBACb;aACF;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEF,yDAAyD;QACzD,4EAA4E;QAC5E,MAAM,uBAAuB,GAAG,QAAQ,CAAC,CAAC,OAAe,EAAE,OAAe,EAAE,EAAE;YAC5E,kEAAkE;YAClE,IACE,YAAY,CAAC,GAAG,EAAE,CAAC,eAAe;gBAClC,CAAC,OAAO,CAAC,OAAO;gBAChB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC;gBACjC,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,EACpC;gBACA,OAAO;aACR;YAED,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC;YAC5D,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;YACvC,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC;YAEtC,MAAM,QAAQ,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC5F,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAE9E,qEAAqE;YACrE,8CAA8C;YAC9C,IACE,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,gBAAgB;gBAC5D,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,gBAAgB,EAC7D;gBACA,YAAY,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;aAC3C;iBAAM;gBACL,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aACnC;QACH,CAAC,EAAE,kBAAkB,CAAC,CAAC;QAEvB,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAgC,EAAE,EAAE,CAC5E,uBAAuB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5C,uDAAuD;QACvD,MAAM,aAAa,GAAG,CAAC,KAAmC,EAAE,EAAE;YAC5D,gFAAgF;YAChF,0EAA0E;YAC1E,uBAAuB,CAAC,MAAM,EAAE,CAAC;YAEjC,qEAAqE;YACrE,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,eAAe,IAAI,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;gBAC1F,OAAO;aACR;YAED,qFAAqF;YACrF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,aAAwB,CAAC,EAAE;gBACvE,YAAY,CAAC,sBAAsB,EAAE,CAAC;gBACtC,YAAY,CAAC,cAAc,EAAE,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,qDAAqD;QACrD,MAAM,cAAc,GAAG,CAAC,KAAsC,EAAE,EAAE;YAChE,YAAY,CAAC,gBAAgB,EAAE,CAAC;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5C,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,gBAAgB,EAAE;gBACvC,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;aACpC;iBAAM,IAAI,sBAAsB,EAAE;gBACjC,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC;gBAC5C,IAAI,YAAY,EAAE;oBAChB,MAAM,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;oBAC9C,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;oBAChG,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;iBAC3D;aACF;QACH,CAAC,CAAC;QAEF,oFAAoF;QACpF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC7C,8DAA8D;YAC9D,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO;aACR;YAED,sDAAsD;YACtD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7B,+EAA+E;YAC/E,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YAC5F,mDAAmD;YACnD,YAAY,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC;QAEF,wFAAwF;QACxF,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC9C,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC;gBAC5C,IAAI,YAAY,EAAE;oBAChB,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;oBACvC,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;oBAC5C,MAAM,MAAM,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;oBACvD,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7C;gBACD,OAAO;aACR;YAED,sDAAsD;YACtD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7B,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YAEpC,IACE,sBAAsB;gBACtB,CAAC,CAAC,aAAa,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC,CAAC;oBACxC,CAAC,aAAa,KAAK,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC,CAAC,EACjF;gBACA,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;aACvD;iBAAM;gBACL,+EAA+E;gBAC/E,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;gBACxG,mDAAmD;gBACnD,YAAY,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;aACvE;QACH,CAAC,CAAC;QAEF,kFAAkF;QAClF,MAAM,YAAY,GAAG,CAAC,KAAoD,EAAE,EAAE;YAC5E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC9B,IACE,OAAO,KAAK,OAAO,CAAC,EAAE;gBACtB,OAAO,KAAK,OAAO,CAAC,KAAK;gBACzB,OAAO,KAAK,OAAO,CAAC,IAAI;gBACxB,OAAO,KAAK,OAAO,CAAC,IAAI;gBACxB,OAAO,KAAK,OAAO,CAAC,KAAK;gBACzB,OAAO,KAAK,OAAO,CAAC,KAAK,EACzB;gBACA,OAAO;aACR;YAED,6GAA6G;YAC7G,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,+CAA+C;YAC/C,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE;gBACtC,OAAO;aACR;YAED,SAAS,CAAC,KAAK,EAAE;gBACf,UAAU,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBACvC,YAAY,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;gBACxC,aAAa,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;gBACxC,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;gBACrC,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE;aAC5C,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC;QAEF,wDAAwD;QACxD,MAAM,kBAAkB,GAAG,CAAC,MAAwB,EAAE,OAA6B,EAAE,EAAE;YACrF,8FAA8F;YAC9F,IAAI,OAAO,KAAK,UAAU,EAAE;gBAC1B,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC;gBAC/F,IAAI,sBAAsB,IAAI,CAAC,YAAY,IAAI,CAAC,gBAAgB,IAAI,CAAC,iBAAiB,IAAI,CAAC,YAAY,EAAE;oBACvG,eAAe,EAAE,CAAC;iBACnB;qBAAM,IAAI,CAAC,YAAY,EAAE;oBACxB,YAAY,CAAC,mBAAmB,EAAE,CAAC;iBACpC;aACF;QACH,CAAC,CAAC;QAEF,wFAAwF;QACxF,MAAM,iBAAiB,GAAG,CAAC,KAAgC,EAAE,EAAE;YAC7D,yDAAyD;YACzD,iFAAiF;YACjF,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE;gBAClG,YAAY,CAAC,cAAc,EAAE,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,MAA2C,EAAE,EAAE;YACrE,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,MAAuC,EAAE,EAAE;YACpE,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,YAAsB,EAAE,EAAE;YAClD,YAAY,CAAC,YAAY,EAAE,CAAC;YAE5B,+EAA+E;YAC/E,IAAI,CAAC,YAAY,EAAE;gBACjB,sGAAsG;gBACtG,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,gBAAgB,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE;wBAC1E,OAAO,CAAC,OAAQ,CAAC,gBAAgB,EAAE,CAAC;qBACrC;yBAAM;wBACL,YAAY,CAAC,cAAc,EAAE,CAAC;wBAC9B,OAAO,CAAC,OAAQ,CAAC,SAAS,EAAE,CAAC;qBAC9B;gBACH,CAAC,EAAE,CAAC,CAAC,CAAC;aACP;QACH,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,YAAY,CAAC,UAAU,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,YAAY,CAAC,cAAc,EAAE,CAAC;gBAC9B,YAAY,CAAC,sBAAsB,EAAE,CAAC;aACvC;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3C,IAAI,YAAY,CAAC,OAAO,CAAC,OAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,aAAwB,CAAC,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE;gBAC5G,OAAO;aACR;YACD,YAAY,CAAC,cAAc,EAAE,CAAC;YAC9B,YAAY,CAAC,sBAAsB,EAAE,CAAC;QACxC,CAAC,CAAC;QACF,OAAO;YACL,KAAK;YACL,MAAM;YACN,MAAM;YACN,SAAS;YACT,iBAAiB;YACjB,QAAQ;YACR,YAAY;YACZ,QAAQ,EAAE;gBACR,cAAc;gBACd,aAAa;gBACb,cAAc;gBACd,YAAY;gBACZ,kBAAkB;gBAClB,iBAAiB;gBACjB,cAAc;gBACd,iBAAiB;gBACjB,gBAAgB;gBAChB,eAAe;gBACf,iBAAiB;gBACjB,cAAc;aACf;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,cAAc;gBAC3B,SAAS,EAAE,YAAY;gBACvB,cAAc,EAAE,iBAAiB;gBACjC,UAAU;aACX;SACF,CAAC;IACJ,CAAC,EAAE;QACD,SAAS;QACT,MAAM;QACN,OAAO;QACP,OAAO;QACP,UAAU;QACV,UAAU;QACV,MAAM;QACN,KAAK;QACL,sBAAsB;QACtB,UAAU;QACV,KAAK;KACN,CAAC,CAAC;IAEH,8CAA8C;IAC9C,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;IAExF,uEAAuE;IACvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE;YACpE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;SACvD;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/B,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { MouseEvent, RefObject, useEffect, useMemo, useRef } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { useHeightMeasure } from '../../internal/hooks/container-queries/use-height-measure';\nimport { KeyCode } from '../../internal/keycode';\nimport { circleIndex } from '../../internal/utils/circle-index';\nimport handleKey from '../../internal/utils/handle-key';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { throttle } from '../../internal/utils/throttle';\nimport { useReaction } from '../async-store';\nimport { AreaChartProps } from '../interfaces';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport { ChartModel } from './index';\nimport InteractionsStore from './interactions-store';\nimport { findClosest } from './utils';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\nconst POPOVER_DEADZONE = 12;\n\nexport interface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n isRtl?: boolean;\n fitHeight?: boolean;\n externalSeries: readonly AreaChartProps.Series<T>[];\n visibleSeries: readonly AreaChartProps.Series<T>[];\n setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n highlightedSeries: null | AreaChartProps.Series<T>;\n setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n xDomain?: XDomain<T>;\n yDomain?: YDomain;\n xScaleType: XScaleType;\n yScaleType: YScaleType;\n height: number;\n width: number;\n popoverRef: RefObject<HTMLElement>;\n statusType: 'loading' | 'finished' | 'error';\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n isRtl,\n fitHeight,\n externalSeries: allSeries,\n visibleSeries: series,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height: explicitHeight,\n width,\n popoverRef,\n statusType,\n}: UseChartModelProps<T>): ChartModel<T> {\n // Chart elements refs used in handlers.\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n const plotMeasureRef = useRef<SVGLineElement>(null);\n const hasVisibleSeries = series.length > 0;\n const height =\n useHeightMeasure(() => plotMeasureRef.current, !fitHeight, [hasVisibleSeries, statusType]) ?? explicitHeight;\n const stableSetVisibleSeries = useStableCallback(setVisibleSeries);\n\n const model = useMemo(() => {\n // Compute scales, ticks and two-dimensional plots.\n const computed = computeChartProps({\n isRtl,\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n });\n\n // A store for chart interactions that don't require plot recomputation.\n const interactions = new InteractionsStore(series, computed.plot);\n\n const containsMultipleSeries = interactions.series.length > 1;\n\n // A series decorator to provide extra props such as color and marker type.\n const getInternalSeries = createSeriesDecorator(allSeries);\n\n const isMouseOverPopover = (clientX: number, clientY: number) => {\n if (popoverRef.current?.firstChild) {\n const popoverPosition = (popoverRef.current.firstChild as HTMLElement).getBoundingClientRect();\n if (\n clientX > popoverPosition.x - POPOVER_DEADZONE &&\n clientX < popoverPosition.x + popoverPosition.width + POPOVER_DEADZONE &&\n clientY > popoverPosition.y - POPOVER_DEADZONE &&\n clientY < popoverPosition.y + popoverPosition.height + POPOVER_DEADZONE\n ) {\n return true;\n }\n }\n return false;\n };\n\n // A Callback for svg mouseover to hover the plot points.\n // Throttling is necessary for a substantially smoother customer experience.\n const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n // No hover logic when the popover is pinned or no data available.\n if (\n interactions.get().isPopoverPinned ||\n !plotRef.current ||\n interactions.plot.xy.length === 0 ||\n isMouseOverPopover(clientX, clientY)\n ) {\n return;\n }\n\n const svgRect = plotRef.current.svg.getBoundingClientRect();\n const offsetX = clientX - svgRect.left;\n const offsetY = clientY - svgRect.top;\n\n const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n // If close enough to the point - highlight the point and its column.\n // If not - only highlight the closest column.\n if (\n Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n ) {\n interactions.highlightPoint(closestPoint);\n } else {\n interactions.highlightX(closestX);\n }\n }, SVG_HOVER_THROTTLE);\n\n const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement>) =>\n onSVGMouseMoveThrottled(clientX, clientY);\n\n // A callback for svg mouseout to clear all highlights.\n const onSVGMouseOut = (event: React.MouseEvent<SVGElement>) => {\n // Because the mouseover is throttled, in can occur slightly after the mouseout,\n // neglecting its effect; cancelling the throttled function prevents that.\n onSVGMouseMoveThrottled.cancel();\n\n // No hover logic when the popover is pinned or mouse is over popover\n if (interactions.get().isPopoverPinned || isMouseOverPopover(event.clientX, event.clientY)) {\n return;\n }\n\n // Check if the target is contained within svg to allow hovering on the popover body.\n if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n interactions.clearHighlightedLegend();\n interactions.clearHighlight();\n }\n };\n\n // A callback for svg click to pin/unpin the popover.\n const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n interactions.togglePopoverPin();\n event.preventDefault();\n };\n\n const moveWithinXAxis = (direction: -1 | 1) => {\n if (interactions.get().highlightedPoint) {\n return moveWithinSeries(direction);\n } else if (containsMultipleSeries) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const currentXIndex = highlightedX[0].index.x;\n const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);\n interactions.highlightX(interactions.plot.xy[nextXIndex]);\n }\n }\n };\n\n // A helper function to highlight the next or previous point within selected series.\n const moveWithinSeries = (direction: -1 | 1) => {\n // Can only use motion when a particular point is highlighted.\n const point = interactions.get().highlightedPoint;\n if (!point) {\n return;\n }\n\n // Take the index of the currently highlighted series.\n const sIndex = point.index.s;\n // Take the incremented(circularly) x-index of the currently highlighted point.\n const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n // Highlight the next point using x:s grouped data.\n interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n };\n\n // A helper function to highlight the next or previous point within the selected column.\n const moveBetweenSeries = (direction: -1 | 1) => {\n const point = interactions.get().highlightedPoint;\n if (!point) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const xIndex = highlightedX[0].index.x;\n const points = interactions.plot.xy[xIndex];\n const yIndex = direction === 1 ? 0 : points.length - 1;\n interactions.highlightPoint(points[yIndex]);\n }\n return;\n }\n\n // Take the index of the currently highlighted column.\n const xIndex = point.index.x;\n const currentYIndex = point.index.y;\n\n if (\n containsMultipleSeries &&\n ((currentYIndex === 0 && direction === -1) ||\n (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))\n ) {\n interactions.highlightX(interactions.plot.xy[xIndex]);\n } else {\n // Take the incremented(circularly) y-index of the currently highlighted point.\n const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n // Highlight the next point using x:y grouped data.\n interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);\n }\n };\n\n // A callback for svg keydown to enable motions and popover pin with the keyboard.\n const onSVGKeyDown = (event: React.KeyboardEvent<HTMLElement | SVGElement>) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.up &&\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.down &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.space &&\n keyCode !== KeyCode.enter\n ) {\n return;\n }\n\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n // No keydown logic when the popover is pinned.\n if (interactions.get().isPopoverPinned) {\n return;\n }\n\n handleKey(event, {\n onBlockEnd: () => moveBetweenSeries(-1),\n onBlockStart: () => moveBetweenSeries(1),\n onInlineStart: () => moveWithinXAxis(-1),\n onInlineEnd: () => moveWithinXAxis(1),\n onActivate: () => interactions.pinPopover(),\n });\n };\n\n const highlightFirstX = () => {\n interactions.highlightX(interactions.plot.xy[0]);\n };\n\n // A callback for application focus to highlight series.\n const onApplicationFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n // When focus is caused by a click event nothing is expected as clicks are handled separately.\n if (trigger === 'keyboard') {\n const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();\n if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {\n highlightFirstX();\n } else if (!highlightedX) {\n interactions.highlightFirstPoint();\n }\n }\n };\n\n // A callback for application blur to clear all highlights unless the popover is pinned.\n const onApplicationBlur = (event: React.FocusEvent<Element>) => {\n // Pinned popover stays pinned even if the focus is lost.\n // If blur is not caused by the popover, forget the previously highlighted point.\n if (!nodeBelongs(containerRef.current, event.relatedTarget) && !interactions.get().isPopoverPinned) {\n interactions.clearHighlight();\n }\n };\n\n const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n stableSetVisibleSeries(series);\n };\n\n const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n interactions.highlightSeries(series);\n };\n\n const onPopoverDismiss = (outsideClick?: boolean) => {\n interactions.unpinPopover();\n\n // Return focus back to the application or plot (when no point is highlighted).\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n if (interactions.get().highlightedPoint || interactions.get().highlightedX) {\n plotRef.current!.focusApplication();\n } else {\n interactions.clearHighlight();\n plotRef.current!.focusPlot();\n }\n }, 0);\n }\n };\n\n const onContainerBlur = () => {\n interactions.clearState();\n };\n\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n }\n };\n\n const onPopoverLeave = (event: MouseEvent) => {\n if (nodeContains(plotRef.current!.svg, event.relatedTarget as Element) || interactions.get().isPopoverPinned) {\n return;\n }\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n };\n return {\n width,\n height,\n series,\n allSeries,\n getInternalSeries,\n computed,\n interactions,\n handlers: {\n onSVGMouseMove,\n onSVGMouseOut,\n onSVGMouseDown,\n onSVGKeyDown,\n onApplicationFocus,\n onApplicationBlur,\n onFilterSeries,\n onLegendHighlight,\n onPopoverDismiss,\n onContainerBlur,\n onDocumentKeyDown,\n onPopoverLeave,\n },\n refs: {\n plot: plotRef,\n plotMeasure: plotMeasureRef,\n container: containerRef,\n verticalMarker: verticalMarkerRef,\n popoverRef,\n },\n };\n }, [\n allSeries,\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n stableSetVisibleSeries,\n popoverRef,\n isRtl,\n ]);\n\n // Notify client when series highlight change.\n useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n // Update interactions store when series highlight in a controlled way.\n useEffect(() => {\n if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n model.interactions.highlightSeries(highlightedSeries);\n }\n }, [model, highlightedSeries]);\n\n return model;\n}\n"]}
|
|
@@ -8,6 +8,7 @@ export interface TooltipProps {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
contentAttributes?: React.HTMLAttributes<HTMLDivElement>;
|
|
10
10
|
size?: PopoverProps['size'];
|
|
11
|
+
hideOnOverscroll?: boolean;
|
|
11
12
|
}
|
|
12
|
-
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes, position, size, }: TooltipProps): JSX.Element;
|
|
13
|
+
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes, position, size, hideOnOverscroll, }: TooltipProps): JSX.Element;
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,iBAAsB,EACtB,QAAgB,EAChB,IAAc,EACd,gBAAgB,GACjB,EAAE,YAAY,eA6Bd"}
|
|
@@ -8,13 +8,13 @@ import PopoverContainer from '../../../popover/container';
|
|
|
8
8
|
import Portal from '../portal';
|
|
9
9
|
import { Transition } from '../transition';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
|
-
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes = {}, position = 'top', size = 'small', }) {
|
|
11
|
+
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes = {}, position = 'top', size = 'small', hideOnOverscroll, }) {
|
|
12
12
|
if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {
|
|
13
13
|
trackKey = value;
|
|
14
14
|
}
|
|
15
15
|
return (React.createElement(Portal, null,
|
|
16
16
|
React.createElement("div", Object.assign({ className: clsx(styles.root, className) }, contentAttributes, { "data-testid": trackKey }),
|
|
17
|
-
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: trackKey, size: size, fixedWidth: false, position: position, zIndex: 7000, arrow: position => React.createElement(PopoverArrow, { position: position }) },
|
|
17
|
+
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: trackKey, size: size, fixedWidth: false, position: position, zIndex: 7000, arrow: position => React.createElement(PopoverArrow, { position: position }), hideOnOverscroll: hideOnOverscroll },
|
|
18
18
|
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, onDismiss: undefined, header: undefined }, value)))))));
|
|
19
19
|
}
|
|
20
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAarC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,iBAAiB,GAAG,EAAE,EACtB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,OAAO,EACd,gBAAgB,GACH;IACb,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,EAAE;QACzE,QAAQ,GAAG,KAAK,CAAC;KAClB;IAED,OAAO,CACL,oBAAC,MAAM;QACL,2CAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,iBAAiB,mBAAe,QAAQ;YACxF,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,GAAI,EACvD,gBAAgB,EAAE,gBAAgB;gBAElC,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,IACpG,KAAK,CACM,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport PopoverArrow from '../../../popover/arrow';\nimport PopoverBody from '../../../popover/body';\nimport PopoverContainer from '../../../popover/container';\nimport { PopoverProps } from '../../../popover/interfaces';\nimport Portal from '../portal';\nimport { Transition } from '../transition';\n\nimport styles from './styles.css.js';\n\nexport interface TooltipProps {\n value: React.ReactNode;\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n trackKey?: string | number;\n position?: 'top' | 'right' | 'bottom' | 'left';\n className?: string;\n contentAttributes?: React.HTMLAttributes<HTMLDivElement>;\n size?: PopoverProps['size'];\n hideOnOverscroll?: boolean;\n}\n\nexport default function Tooltip({\n value,\n trackRef,\n trackKey,\n className,\n contentAttributes = {},\n position = 'top',\n size = 'small',\n hideOnOverscroll,\n}: TooltipProps) {\n if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {\n trackKey = value;\n }\n\n return (\n <Portal>\n <div className={clsx(styles.root, className)} {...contentAttributes} data-testid={trackKey}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={trackRef}\n trackKey={trackKey}\n size={size}\n fixedWidth={false}\n position={position}\n zIndex={7000}\n arrow={position => <PopoverArrow position={position} />}\n hideOnOverscroll={hideOnOverscroll}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>\n {value}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
package/popover/container.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export interface PopoverContainerProps {
|
|
|
24
24
|
keepPosition?: boolean;
|
|
25
25
|
allowScrollToFit?: boolean;
|
|
26
26
|
allowVerticalOverflow?: boolean;
|
|
27
|
+
hideOnOverscroll?: boolean;
|
|
27
28
|
}
|
|
28
|
-
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, }: PopoverContainerProps): JSX.Element;
|
|
29
|
+
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, }: PopoverContainerProps): JSX.Element | null;
|
|
29
30
|
//# sourceMappingURL=container.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,EAAE,qBAAqB,sBAkGvB"}
|
package/popover/container.js
CHANGED
|
@@ -7,14 +7,14 @@ import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal
|
|
|
7
7
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
8
8
|
import usePopoverPosition from './use-popover-position.js';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
-
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, }) {
|
|
10
|
+
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, }) {
|
|
11
11
|
const bodyRef = useRef(null);
|
|
12
12
|
const contentRef = useRef(null);
|
|
13
13
|
const popoverRef = useRef(null);
|
|
14
14
|
const arrowRef = useRef(null);
|
|
15
15
|
const isRefresh = useVisualRefresh();
|
|
16
16
|
// Updates the position handler.
|
|
17
|
-
const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef } = usePopoverPosition({
|
|
17
|
+
const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } = usePopoverPosition({
|
|
18
18
|
popoverRef,
|
|
19
19
|
bodyRef,
|
|
20
20
|
arrowRef,
|
|
@@ -25,6 +25,7 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
|
|
|
25
25
|
preferredPosition: position,
|
|
26
26
|
renderWithPortal,
|
|
27
27
|
keepPosition,
|
|
28
|
+
hideOnOverscroll,
|
|
28
29
|
});
|
|
29
30
|
// Recalculate position when properties change.
|
|
30
31
|
useLayoutEffect(() => {
|
|
@@ -65,8 +66,8 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
|
|
|
65
66
|
window.removeEventListener('resize', updatePositionOnResize);
|
|
66
67
|
window.removeEventListener('scroll', refreshPosition, true);
|
|
67
68
|
};
|
|
68
|
-
}, [keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
|
|
69
|
-
return (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
|
|
69
|
+
}, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
|
|
70
|
+
return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
|
|
70
71
|
React.createElement("div", { ref: arrowRef, className: clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`]), "aria-hidden": true }, arrow(internalPosition)),
|
|
71
72
|
React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[`container-body-size-${size}`], {
|
|
72
73
|
[styles['fixed-width']]: fixedWidth,
|
package/popover/container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size | 'content';\n fixedWidth: boolean;\n variant?: 'annotation';\n // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n keepPosition?: boolean;\n // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n // Whether the popover should be hidden when the trigger is scrolled away.\n hideOnOverscroll?: boolean;\n}\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n keepPosition,\n allowScrollToFit,\n allowVerticalOverflow,\n hideOnOverscroll,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n // Updates the position handler.\n const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition: position,\n renderWithPortal,\n keepPosition,\n hideOnOverscroll,\n });\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => {\n updatePositionHandler(true);\n });\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n\n const onClick = (event: UIEvent | KeyboardEvent) => {\n if (\n // Do not update position if keepPosition is true.\n keepPosition ||\n // If the click was on the trigger, this will make the popover appear or disappear,\n // so no need to update its position either in this case.\n nodeContains(trackRef.current, event.target)\n ) {\n return;\n }\n\n requestAnimationFrame(() => {\n updatePositionHandler();\n });\n };\n\n const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n window.addEventListener('click', onClick);\n window.addEventListener('resize', updatePositionOnResize);\n window.addEventListener('scroll', refreshPosition, true);\n\n return () => {\n window.removeEventListener('click', onClick);\n window.removeEventListener('resize', updatePositionOnResize);\n window.removeEventListener('scroll', refreshPosition, true);\n };\n }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n return isOverscrolling ? null : (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n"]}
|
package/popover/interfaces.d.ts
CHANGED
|
@@ -78,6 +78,10 @@ export interface Dimensions {
|
|
|
78
78
|
blockSize: number;
|
|
79
79
|
}
|
|
80
80
|
export type BoundingBox = Dimensions & Offset;
|
|
81
|
+
export type Rect = BoundingBox & {
|
|
82
|
+
insetBlockEnd: number;
|
|
83
|
+
insetInlineEnd: number;
|
|
84
|
+
};
|
|
81
85
|
export declare namespace PopoverProps {
|
|
82
86
|
type Position = 'top' | 'right' | 'bottom' | 'left';
|
|
83
87
|
type Size = 'small' | 'medium' | 'large';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,cAAc,GACd,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9C,yBAAiB,YAAY,CAAC;IAC5B,KAAY,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3D,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,KAAY,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,cAAc,GACd,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,IAAI,GAAG,WAAW,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,yBAAiB,YAAY,CAAC;IAC5B,KAAY,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3D,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,KAAY,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface PopoverProps extends BaseComponentProps {\n /**\n * Determines where the popover is displayed when opened, relative to the trigger.\n * If the popover doesn't have enough space to open in this direction, it\n * automatically chooses a better direction based on available space.\n */\n position?: PopoverProps.Position;\n\n /**\n * Determines the maximum width for the popover.\n */\n size?: PopoverProps.Size;\n\n /**\n * Expands the popover body to its maximum width regardless of content.\n * For example, use it when you need to place a column layout in the popover content.\n */\n fixedWidth?: boolean;\n\n /**\n * Specifies the type of content inside the trigger region. The following types are available:\n * - `text` - Use for inline text triggers.\n * - `custom` - Use for the [button](/components/button/) component.\n */\n triggerType?: PopoverProps.TriggerType;\n\n /**\n * Adds `aria-label` to the text trigger button. Use this to provide an accessible name for triggers\n * that don't have visible text, and to distinguish between multiple triggers with identical visible text.\n */\n triggerAriaLabel?: string;\n\n /**\n * Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from\n * wrapping and truncates it with an ellipsis.\n */\n wrapTriggerText?: boolean;\n\n /**\n * Element that triggers the popover when selected by the user.\n * @displayname trigger\n */\n children?: React.ReactNode;\n\n /**\n * Specifies optional header text for the popover.\n */\n header?: string;\n\n /**\n * Content of the popover.\n */\n content?: React.ReactNode;\n\n /**\n * Determines whether the dismiss button is shown in the popover body.\n */\n dismissButton?: boolean;\n\n /**\n * Adds an `aria-label` to the dismiss button for accessibility.\n * @i18n\n */\n dismissAriaLabel?: string;\n\n /**\n * By default, the popover is constrained to fit inside its parent\n * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n * Enabling this property will allow the popover to be rendered in the root stack context using\n * [React Portals](https://reactjs.org/docs/portals.html).\n * Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.\n *\n * Note: Using popover rendered with portal within a Modal is not supported.\n */\n renderWithPortal?: boolean;\n}\n\n/**\n * The position the popover is actually in, given space constraints.\n */\nexport type InternalPosition =\n | 'right-top'\n | 'right-bottom'\n | 'left-top'\n | 'left-bottom'\n | 'top-center'\n | 'top-right'\n | 'top-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'bottom-left';\n\nexport interface Offset {\n insetInlineStart: number;\n insetBlockStart: number;\n}\n\nexport interface Dimensions {\n inlineSize: number;\n blockSize: number;\n}\n\nexport type BoundingBox = Dimensions & Offset;\n\nexport namespace PopoverProps {\n export type Position = 'top' | 'right' | 'bottom' | 'left';\n export type Size = 'small' | 'medium' | 'large';\n export type TriggerType = 'text' | 'custom';\n\n export interface Ref {\n /**\n * Sets focus on the popover's trigger.\n */\n focus(): void;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface PopoverProps extends BaseComponentProps {\n /**\n * Determines where the popover is displayed when opened, relative to the trigger.\n * If the popover doesn't have enough space to open in this direction, it\n * automatically chooses a better direction based on available space.\n */\n position?: PopoverProps.Position;\n\n /**\n * Determines the maximum width for the popover.\n */\n size?: PopoverProps.Size;\n\n /**\n * Expands the popover body to its maximum width regardless of content.\n * For example, use it when you need to place a column layout in the popover content.\n */\n fixedWidth?: boolean;\n\n /**\n * Specifies the type of content inside the trigger region. The following types are available:\n * - `text` - Use for inline text triggers.\n * - `custom` - Use for the [button](/components/button/) component.\n */\n triggerType?: PopoverProps.TriggerType;\n\n /**\n * Adds `aria-label` to the text trigger button. Use this to provide an accessible name for triggers\n * that don't have visible text, and to distinguish between multiple triggers with identical visible text.\n */\n triggerAriaLabel?: string;\n\n /**\n * Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from\n * wrapping and truncates it with an ellipsis.\n */\n wrapTriggerText?: boolean;\n\n /**\n * Element that triggers the popover when selected by the user.\n * @displayname trigger\n */\n children?: React.ReactNode;\n\n /**\n * Specifies optional header text for the popover.\n */\n header?: string;\n\n /**\n * Content of the popover.\n */\n content?: React.ReactNode;\n\n /**\n * Determines whether the dismiss button is shown in the popover body.\n */\n dismissButton?: boolean;\n\n /**\n * Adds an `aria-label` to the dismiss button for accessibility.\n * @i18n\n */\n dismissAriaLabel?: string;\n\n /**\n * By default, the popover is constrained to fit inside its parent\n * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n * Enabling this property will allow the popover to be rendered in the root stack context using\n * [React Portals](https://reactjs.org/docs/portals.html).\n * Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.\n *\n * Note: Using popover rendered with portal within a Modal is not supported.\n */\n renderWithPortal?: boolean;\n}\n\n/**\n * The position the popover is actually in, given space constraints.\n */\nexport type InternalPosition =\n | 'right-top'\n | 'right-bottom'\n | 'left-top'\n | 'left-bottom'\n | 'top-center'\n | 'top-right'\n | 'top-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'bottom-left';\n\nexport interface Offset {\n insetInlineStart: number;\n insetBlockStart: number;\n}\n\nexport interface Dimensions {\n inlineSize: number;\n blockSize: number;\n}\n\nexport type BoundingBox = Dimensions & Offset;\n\nexport type Rect = BoundingBox & {\n insetBlockEnd: number;\n insetInlineEnd: number;\n};\n\nexport namespace PopoverProps {\n export type Position = 'top' | 'right' | 'bottom' | 'left';\n export type Size = 'small' | 'medium' | 'large';\n export type TriggerType = 'text' | 'custom';\n\n export interface Ref {\n /**\n * Sets focus on the popover's trigger.\n */\n focus(): void;\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InternalPosition, Offset, PopoverProps } from './interfaces';
|
|
3
|
-
export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, }: {
|
|
3
|
+
export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, hideOnOverscroll, }: {
|
|
4
4
|
popoverRef: React.RefObject<HTMLDivElement | null>;
|
|
5
5
|
bodyRef: React.RefObject<HTMLDivElement | null>;
|
|
6
6
|
arrowRef: React.RefObject<HTMLDivElement | null>;
|
|
@@ -11,10 +11,12 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
|
|
|
11
11
|
preferredPosition: PopoverProps.Position;
|
|
12
12
|
renderWithPortal?: boolean;
|
|
13
13
|
keepPosition?: boolean;
|
|
14
|
+
hideOnOverscroll?: boolean;
|
|
14
15
|
}): {
|
|
15
16
|
updatePositionHandler: (onContentResize?: any) => void;
|
|
16
17
|
popoverStyle: Partial<Offset>;
|
|
17
18
|
internalPosition: InternalPosition | null;
|
|
18
19
|
positionHandlerRef: React.MutableRefObject<() => void>;
|
|
20
|
+
isOverscrolling: boolean;
|
|
19
21
|
};
|
|
20
22
|
//# sourceMappingURL=use-popover-position.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAQ,MAAM,cAAc,CAAC;AAGzF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;IAC3D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;qDAOyC,IAAI;;EA0J7C"}
|
|
@@ -5,13 +5,15 @@ import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
|
|
|
5
5
|
import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { getContainingBlock } from '../internal/utils/dom';
|
|
7
7
|
import { calculateScroll, getFirstScrollableParent, scrollRectangleIntoView, } from '../internal/utils/scrollable-containers';
|
|
8
|
-
import { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';
|
|
9
|
-
export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, }) {
|
|
8
|
+
import { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';
|
|
9
|
+
export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, hideOnOverscroll, }) {
|
|
10
10
|
const previousInternalPositionRef = useRef(null);
|
|
11
11
|
const [popoverStyle, setPopoverStyle] = useState({});
|
|
12
12
|
const [internalPosition, setInternalPosition] = useState(null);
|
|
13
|
+
const [isOverscrolling, setIsOverscrolling] = useState(false);
|
|
13
14
|
// Store the handler in a ref so that it can still be replaced from outside of the listener closure.
|
|
14
15
|
const positionHandlerRef = useRef(() => { });
|
|
16
|
+
const scrollableContainerRectRef = useRef(null);
|
|
15
17
|
const updatePositionHandler = useCallback((onContentResize = false) => {
|
|
16
18
|
var _a;
|
|
17
19
|
if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {
|
|
@@ -98,12 +100,25 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
|
|
|
98
100
|
const scrollableParent = getFirstScrollableParent(popover);
|
|
99
101
|
scrollRectangleIntoView(rect, scrollableParent);
|
|
100
102
|
}
|
|
103
|
+
if (hideOnOverscroll && trackRef.current instanceof HTMLElement) {
|
|
104
|
+
const scrollableContainer = getFirstScrollableParent(trackRef.current);
|
|
105
|
+
if (scrollableContainer) {
|
|
106
|
+
scrollableContainerRectRef.current = getLogicalBoundingClientRect(scrollableContainer);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
101
109
|
positionHandlerRef.current = () => {
|
|
102
|
-
const
|
|
110
|
+
const trackRect = getLogicalBoundingClientRect(track);
|
|
111
|
+
const newTrackOffset = toRelativePosition(trackRect, containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect);
|
|
103
112
|
setPopoverStyle({
|
|
104
113
|
insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,
|
|
105
114
|
insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,
|
|
106
115
|
});
|
|
116
|
+
if (hideOnOverscroll && scrollableContainerRectRef.current) {
|
|
117
|
+
// Assuming the arrow tip is at the vertical center of the popover trigger.
|
|
118
|
+
// This is good enough for disabled reason tooltip in select and multiselect.
|
|
119
|
+
// Can be further refined to take the exact arrow position into account if hideOnOverscroll is to be used in other cases.
|
|
120
|
+
setIsOverscrolling(isCenterOutside(trackRect, scrollableContainerRectRef.current));
|
|
121
|
+
}
|
|
107
122
|
};
|
|
108
123
|
}, [
|
|
109
124
|
trackRef,
|
|
@@ -112,12 +127,13 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
|
|
|
112
127
|
contentRef,
|
|
113
128
|
arrowRef,
|
|
114
129
|
keepPosition,
|
|
115
|
-
allowScrollToFit,
|
|
116
130
|
preferredPosition,
|
|
117
131
|
renderWithPortal,
|
|
118
132
|
allowVerticalOverflow,
|
|
133
|
+
allowScrollToFit,
|
|
134
|
+
hideOnOverscroll,
|
|
119
135
|
]);
|
|
120
|
-
return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };
|
|
136
|
+
return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };
|
|
121
137
|
}
|
|
122
138
|
function getBorderWidth(element) {
|
|
123
139
|
return parseInt(getComputedStyle(element).borderWidth) || 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getContainingBlock } from '../internal/utils/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: containingBlock ? containingBlockRect : getDocumentRect(document),\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n positionHandlerRef.current = () => {\n const newTrackOffset = toRelativePosition(\n getLogicalBoundingClientRect(track),\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n allowScrollToFit,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getContainingBlock } from '../internal/utils/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps, Rect } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n hideOnOverscroll,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n hideOnOverscroll?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n const [isOverscrolling, setIsOverscrolling] = useState(false);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const scrollableContainerRectRef = useRef<Rect | null>(null);\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: containingBlock ? containingBlockRect : getDocumentRect(document),\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n if (hideOnOverscroll && trackRef.current instanceof HTMLElement) {\n const scrollableContainer = getFirstScrollableParent(trackRef.current);\n if (scrollableContainer) {\n scrollableContainerRectRef.current = getLogicalBoundingClientRect(scrollableContainer);\n }\n }\n\n positionHandlerRef.current = () => {\n const trackRect = getLogicalBoundingClientRect(track);\n\n const newTrackOffset = toRelativePosition(\n trackRect,\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n\n if (hideOnOverscroll && scrollableContainerRectRef.current) {\n // Assuming the arrow tip is at the vertical center of the popover trigger.\n // This is good enough for disabled reason tooltip in select and multiselect.\n // Can be further refined to take the exact arrow position into account if hideOnOverscroll is to be used in other cases.\n setIsOverscrolling(isCenterOutside(trackRect, scrollableContainerRectRef.current));\n }\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n allowScrollToFit,\n hideOnOverscroll,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BoundingBox, Dimensions, InternalPosition, PopoverProps } from '../interfaces';
|
|
1
|
+
import { BoundingBox, Dimensions, InternalPosition, PopoverProps, Rect } from '../interfaces';
|
|
2
2
|
interface CalculatedPosition {
|
|
3
3
|
scrollable?: boolean;
|
|
4
4
|
internalPosition: InternalPosition;
|
|
@@ -31,5 +31,6 @@ export declare function getDimensions(element: HTMLElement): {
|
|
|
31
31
|
inlineSize: number;
|
|
32
32
|
blockSize: number;
|
|
33
33
|
};
|
|
34
|
+
export declare function isCenterOutside(child: Rect, parent: Rect): boolean;
|
|
34
35
|
export {};
|
|
35
36
|
//# sourceMappingURL=positions.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG9F,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,EAAE,WAAW,CAAC;CACnB;AAUD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,gBAAgB,EAAE,CAiD9E,CAAC;AAqJF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAG5E;AAID;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EAER,gBAAgB,EAChB,qBAAqB,GACtB,EAAE;IACD,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,GAAG,kBAAkB,CAoDrB;AAmBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW;;;EAEvD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW;;;EAMjD;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,WAKxD"}
|
|
@@ -260,4 +260,10 @@ export function getDimensions(element) {
|
|
|
260
260
|
function isTopOrBottom(internalPosition) {
|
|
261
261
|
return ['top', 'bottom'].includes(internalPosition.split('-')[0]);
|
|
262
262
|
}
|
|
263
|
+
export function isCenterOutside(child, parent) {
|
|
264
|
+
const childCenter = child.insetBlockStart + child.blockSize / 2;
|
|
265
|
+
const overflowsBlockStart = childCenter < parent.insetBlockStart;
|
|
266
|
+
const overflowsBlockEnd = childCenter > parent.insetBlockEnd;
|
|
267
|
+
return overflowsBlockStart || overflowsBlockEnd;
|
|
268
|
+
}
|
|
263
269
|
//# sourceMappingURL=positions.js.map
|