@cloudscape-design/components 3.0.873 → 3.0.874
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/visual-refresh-toolbar/toolbar/trigger-button/index.js +4 -4
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map +1 -1
- package/button-group/item-element.js +4 -4
- package/button-group/item-element.js.map +1 -1
- package/code-editor/resizable-box/index.js +4 -4
- package/code-editor/resizable-box/index.js.map +1 -1
- package/container/use-sticky-header.js +4 -4
- package/container/use-sticky-header.js.map +1 -1
- package/file-dropzone/use-files-dragging.d.ts.map +1 -1
- package/file-dropzone/use-files-dragging.js +5 -6
- package/file-dropzone/use-files-dragging.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +4 -4
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/animate.js +1 -1
- package/internal/animate.js.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +4 -4
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/dropdown/index.js +4 -4
- package/internal/components/dropdown/index.js.map +1 -1
- package/internal/components/transition/index.js +4 -4
- package/internal/components/transition/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/focus-tracker.d.ts +1 -0
- package/internal/focus-tracker.d.ts.map +1 -1
- package/internal/focus-tracker.js +4 -4
- package/internal/focus-tracker.js.map +1 -1
- package/internal/hooks/use-mouse-down-target.js +4 -4
- package/internal/hooks/use-mouse-down-target.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/popover/container.d.ts.map +1 -1
- package/popover/container.js +5 -6
- package/popover/container.js.map +1 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +5 -6
- package/table/resizer/index.js.map +1 -1
- package/table/table-role/grid-navigation.js +5 -6
- package/table/table-role/grid-navigation.js.map +1 -1
- package/test-utils/dom/index.d.ts +78 -78
- package/test-utils/dom/index.js +9 -3
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/selectors/index.d.ts +78 -78
- package/test-utils/selectors/index.js +5 -1
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -244,11 +244,11 @@ const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, heade
|
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
246
|
updateDropdownPosition();
|
|
247
|
-
|
|
248
|
-
window.addEventListener('
|
|
247
|
+
const controller = new AbortController();
|
|
248
|
+
window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });
|
|
249
|
+
window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });
|
|
249
250
|
return () => {
|
|
250
|
-
|
|
251
|
-
window.removeEventListener('resize', updateDropdownPosition, true);
|
|
251
|
+
controller.abort();
|
|
252
252
|
};
|
|
253
253
|
}, [open, expandToViewport]);
|
|
254
254
|
const referrerId = useUniqueId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.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, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../../hooks/use-unique-id/index.js';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\nimport { DropdownContextProvider, DropdownContextProviderProps } from './context';\nimport {\n calculatePosition,\n defaultMaxDropdownWidth,\n DropdownPosition,\n hasEnoughSpaceToStretchBeyondTriggerWidth,\n InteriorDropdownPosition,\n} from './dropdown-fit-handler';\nimport { DropdownProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface DropdownContainerProps {\n triggerRef: React.RefObject<HTMLElement>;\n children?: React.ReactNode;\n renderWithPortal: boolean;\n id?: string;\n referrerId?: string;\n open?: boolean;\n}\n\nconst DropdownContainer = ({\n triggerRef,\n children,\n renderWithPortal,\n id,\n referrerId,\n open,\n}: DropdownContainerProps) => {\n if (!renderWithPortal) {\n return <>{children}</>;\n }\n if (!open) {\n return null;\n }\n const currentDocument = triggerRef.current?.ownerDocument ?? document;\n return createPortal(\n <div id={id} data-awsui-referrer-id={referrerId}>\n {children}\n </div>,\n currentDocument.body\n );\n};\n\ninterface TransitionContentProps {\n state: TransitionStatus;\n transitionRef: React.MutableRefObject<any>;\n dropdownClasses: string;\n stretchWidth: boolean;\n interior: boolean;\n isRefresh: boolean;\n dropdownRef: React.RefObject<HTMLDivElement>;\n verticalContainerRef: React.RefObject<HTMLDivElement>;\n expandToViewport?: boolean;\n stretchBeyondTriggerWidth?: boolean;\n header?: React.ReactNode;\n children?: React.ReactNode;\n footer?: React.ReactNode;\n position?: DropdownContextProviderProps['position'];\n open?: boolean;\n onMouseDown?: React.MouseEventHandler<Element>;\n id?: string;\n role?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nconst TransitionContent = ({\n state,\n transitionRef,\n dropdownClasses,\n stretchWidth,\n interior,\n isRefresh,\n dropdownRef,\n verticalContainerRef,\n expandToViewport,\n stretchBeyondTriggerWidth,\n header,\n children,\n footer,\n position,\n open,\n onMouseDown,\n id,\n role,\n ariaLabelledby,\n ariaDescribedby,\n}: TransitionContentProps) => {\n const contentRef = useMergeRefs(dropdownRef, transitionRef);\n return (\n <div\n className={clsx(styles.dropdown, dropdownClasses, {\n [styles.open]: open,\n [styles['with-limited-width']]: !stretchWidth,\n [styles['hide-block-border']]: stretchWidth,\n [styles.interior]: interior,\n [styles.refresh]: isRefresh,\n [styles['use-portal']]: expandToViewport && !interior,\n [styles['stretch-beyond-trigger-width']]: stretchBeyondTriggerWidth,\n })}\n ref={contentRef}\n id={id}\n role={role}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-open={open}\n data-animating={state !== 'exited'}\n aria-hidden={!open}\n style={\n stretchBeyondTriggerWidth ? { [customCssProps.dropdownDefaultMaxWidth]: `${defaultMaxDropdownWidth}px` } : {}\n }\n onMouseDown={onMouseDown}\n >\n <div\n className={clsx(\n styles['dropdown-content-wrapper'],\n !header && !children && styles['is-empty'],\n isRefresh && styles.refresh\n )}\n >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {children}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n children,\n trigger,\n open,\n onDropdownClose,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchWidth = true,\n stretchHeight = false,\n stretchToTriggerWidth = true,\n stretchBeyondTriggerWidth = false,\n expandToViewport = false,\n preferCenter = false,\n interior = false,\n minWidth,\n scrollable = true,\n loopFocus = expandToViewport,\n onFocus,\n onBlur,\n contentKey,\n dropdownContentId,\n dropdownContentRole,\n ariaLabelledby,\n ariaDescribedby,\n}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n const dropdownContainerRef = useRef<HTMLDivElement | null>(null);\n const verticalContainerRef = useRef<HTMLDivElement>(null);\n // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning\n const fixedPosition = useRef<DropdownPosition | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n const dropdownClasses = usePortalModeClasses(triggerRef);\n const [position, setPosition] = useState<DropdownContextProviderProps['position']>('bottom-right');\n\n const isMobile = useMobile();\n\n const setDropdownPosition = (\n position: DropdownPosition | InteriorDropdownPosition,\n triggerBox: DOMRect,\n target: HTMLDivElement,\n verticalContainer: HTMLDivElement\n ) => {\n const entireWidth = !interior && stretchWidth;\n if (!stretchWidth) {\n // 1px offset for dropdowns where the dropdown itself needs a border, rather than on the items\n verticalContainer.style.maxBlockSize = `${parseInt(position.blockSize) + 1}px`;\n } else {\n verticalContainer.style.maxBlockSize = position.blockSize;\n }\n\n if (entireWidth && !expandToViewport) {\n if (stretchToTriggerWidth) {\n target.classList.add(styles['occupy-entire-width']);\n }\n } else {\n target.style.inlineSize = position.inlineSize;\n }\n\n // Using styles for main dropdown to adjust its position as preferred alternative\n if (position.dropBlockStart && !interior) {\n target.classList.add(styles['dropdown-drop-up']);\n if (!expandToViewport) {\n target.style.insetBlockEnd = '100%';\n }\n } else {\n target.classList.remove(styles['dropdown-drop-up']);\n }\n target.classList.add(position.dropInlineStart ? styles['dropdown-drop-left'] : styles['dropdown-drop-right']);\n\n if (position.insetInlineStart && position.insetInlineStart !== 'auto') {\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n // Position normal overflow dropdowns with fixed positioning relative to viewport\n if (expandToViewport && !interior) {\n target.style.position = 'fixed';\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = `calc(100% - ${triggerBox.top}px)`;\n } else {\n target.style.insetBlockStart = `${triggerBox.bottom}px`;\n }\n if (position.dropInlineStart) {\n target.style.insetInlineStart = `calc(${triggerBox.right}px - ${position.inlineSize})`;\n } else {\n target.style.insetInlineStart = `${triggerBox.left}px`;\n }\n // Keep track of the initial dropdown position and direction.\n // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.\n fixedPosition.current = position;\n return;\n }\n\n // For an interior dropdown (the fly out) we need exact values for positioning\n // and classes are not enough\n // usage of relative position is impossible due to overwrite of overflow-x\n if (interior && isInteriorPosition(position)) {\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = position.insetBlockEnd;\n } else {\n target.style.insetBlockStart = position.insetBlockStart;\n }\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n if (position.dropBlockStart && position.dropInlineStart) {\n setPosition('top-left');\n } else if (position.dropBlockStart) {\n setPosition('top-right');\n } else if (position.dropInlineStart) {\n setPosition('bottom-left');\n } else {\n setPosition('bottom-right');\n }\n };\n\n const isOutsideDropdown = (element: Element) =>\n (!wrapperRef.current || !nodeBelongs(wrapperRef.current, element)) &&\n (!dropdownContainerRef.current || !nodeBelongs(dropdownContainerRef.current, element));\n\n const focusHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onFocus, event);\n }\n };\n\n const blurHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onBlur, event);\n }\n };\n\n // Prevent the dropdown width from stretching beyond the trigger width\n // if that is going to cause the dropdown to be cropped because of overflow\n const fixStretching = () => {\n const classNameToRemove = styles['stretch-beyond-trigger-width'];\n if (\n open &&\n stretchBeyondTriggerWidth &&\n dropdownRef.current &&\n triggerRef.current &&\n dropdownRef.current.classList.contains(classNameToRemove) &&\n !hasEnoughSpaceToStretchBeyondTriggerWidth({\n triggerElement: triggerRef.current,\n dropdownElement: dropdownRef.current,\n desiredMinWidth: minWidth,\n expandToViewport,\n stretchWidth,\n stretchHeight,\n isMobile,\n })\n ) {\n dropdownRef.current.classList.remove(classNameToRemove);\n }\n };\n\n useResizeObserver(() => dropdownRef.current, fixStretching);\n\n useLayoutEffect(() => {\n const onDropdownOpen = () => {\n if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {\n // calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components\n if (scrollable) {\n dropdownRef.current.classList.add(styles.nowrap);\n }\n setDropdownPosition(\n ...calculatePosition(\n dropdownRef.current,\n triggerRef.current,\n verticalContainerRef.current,\n interior,\n expandToViewport,\n preferCenter,\n stretchWidth,\n stretchHeight,\n isMobile,\n minWidth,\n stretchBeyondTriggerWidth\n ),\n dropdownRef.current,\n verticalContainerRef.current\n );\n if (scrollable) {\n dropdownRef.current.classList.remove(styles.nowrap);\n }\n }\n };\n onDropdownOpen();\n\n if (open) {\n // window may scroll when dropdown opens, for example when soft keyboard shows up\n window.addEventListener('scroll', onDropdownOpen);\n // only listen to window scroll within very short time after the dropdown opens\n // do not want to interfere dropdown position on scroll afterwards\n const timeoutId = setTimeout(() => {\n window.removeEventListener('scroll', onDropdownOpen);\n }, 500);\n\n return () => {\n clearTimeout(timeoutId);\n window.removeEventListener('scroll', onDropdownOpen);\n };\n }\n // See AWSUI-13040\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, stretchWidth, isMobile, contentKey]);\n\n // subscribe to outside click\n useEffect(() => {\n if (!open) {\n return;\n }\n const clickListener = (event: MouseEvent) => {\n // Since the listener is registered on the window, `event.target` will incorrectly point at the\n // shadow root if the component is rendered inside shadow DOM.\n const target = event.composedPath ? event.composedPath()[0] : event.target;\n if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onDropdownClose);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onDropdownClose]);\n\n // sync dropdown position on scroll and resize\n useLayoutEffect(() => {\n if (!expandToViewport || !open) {\n return;\n }\n const updateDropdownPosition = () => {\n if (triggerRef.current && dropdownRef.current && verticalContainerRef.current) {\n const triggerRect = getLogicalBoundingClientRect(triggerRef.current);\n const target = dropdownRef.current;\n if (fixedPosition.current) {\n if (fixedPosition.current.dropBlockStart) {\n dropdownRef.current.style.insetBlockEnd = `calc(100% - ${triggerRect.insetBlockStart}px)`;\n } else {\n target.style.insetBlockStart = `${triggerRect.insetBlockEnd}px`;\n }\n if (fixedPosition.current.dropInlineStart) {\n target.style.insetInlineStart = `calc(${triggerRect.insetInlineEnd}px - ${fixedPosition.current.inlineSize})`;\n } else {\n target.style.insetInlineStart = `${triggerRect.insetInlineStart}px`;\n }\n }\n }\n };\n\n updateDropdownPosition();\n\n window.addEventListener('scroll', updateDropdownPosition, true);\n window.addEventListener('resize', updateDropdownPosition, true);\n return () => {\n window.removeEventListener('scroll', updateDropdownPosition, true);\n window.removeEventListener('resize', updateDropdownPosition, true);\n };\n }, [open, expandToViewport]);\n\n const referrerId = useUniqueId();\n\n return (\n <div\n className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\n\n <TabTrap\n focusNextCallback={() => dropdownRef.current && getFirstFocusable(dropdownRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <DropdownContainer\n triggerRef={triggerRef}\n renderWithPortal={expandToViewport && !interior}\n id={dropdownId}\n referrerId={referrerId}\n open={open}\n >\n <Transition in={open ?? false} exit={false}>\n {(state, ref) => (\n <div ref={dropdownContainerRef}>\n <TabTrap\n focusNextCallback={() => triggerRef.current && getLastFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <TransitionContent\n state={state}\n transitionRef={ref}\n dropdownClasses={dropdownClasses}\n open={open}\n stretchWidth={stretchWidth}\n interior={interior}\n header={header}\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={stretchBeyondTriggerWidth}\n footer={footer}\n onMouseDown={onMouseDown}\n isRefresh={isRefresh}\n dropdownRef={dropdownRef}\n verticalContainerRef={verticalContainerRef}\n position={position}\n id={dropdownContentId}\n role={dropdownContentRole}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n >\n {children}\n </TransitionContent>\n\n <TabTrap\n focusNextCallback={() => triggerRef.current && getFirstFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n </div>\n )}\n </Transition>\n </DropdownContainer>\n </div>\n );\n};\n\nconst isInteriorPosition = (\n position: DropdownPosition | InteriorDropdownPosition\n): position is InteriorDropdownPosition => (position as InteriorDropdownPosition).insetBlockEnd !== undefined;\n\nexport default Dropdown;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.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, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../../hooks/use-unique-id/index.js';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\nimport { DropdownContextProvider, DropdownContextProviderProps } from './context';\nimport {\n calculatePosition,\n defaultMaxDropdownWidth,\n DropdownPosition,\n hasEnoughSpaceToStretchBeyondTriggerWidth,\n InteriorDropdownPosition,\n} from './dropdown-fit-handler';\nimport { DropdownProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface DropdownContainerProps {\n triggerRef: React.RefObject<HTMLElement>;\n children?: React.ReactNode;\n renderWithPortal: boolean;\n id?: string;\n referrerId?: string;\n open?: boolean;\n}\n\nconst DropdownContainer = ({\n triggerRef,\n children,\n renderWithPortal,\n id,\n referrerId,\n open,\n}: DropdownContainerProps) => {\n if (!renderWithPortal) {\n return <>{children}</>;\n }\n if (!open) {\n return null;\n }\n const currentDocument = triggerRef.current?.ownerDocument ?? document;\n return createPortal(\n <div id={id} data-awsui-referrer-id={referrerId}>\n {children}\n </div>,\n currentDocument.body\n );\n};\n\ninterface TransitionContentProps {\n state: TransitionStatus;\n transitionRef: React.MutableRefObject<any>;\n dropdownClasses: string;\n stretchWidth: boolean;\n interior: boolean;\n isRefresh: boolean;\n dropdownRef: React.RefObject<HTMLDivElement>;\n verticalContainerRef: React.RefObject<HTMLDivElement>;\n expandToViewport?: boolean;\n stretchBeyondTriggerWidth?: boolean;\n header?: React.ReactNode;\n children?: React.ReactNode;\n footer?: React.ReactNode;\n position?: DropdownContextProviderProps['position'];\n open?: boolean;\n onMouseDown?: React.MouseEventHandler<Element>;\n id?: string;\n role?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nconst TransitionContent = ({\n state,\n transitionRef,\n dropdownClasses,\n stretchWidth,\n interior,\n isRefresh,\n dropdownRef,\n verticalContainerRef,\n expandToViewport,\n stretchBeyondTriggerWidth,\n header,\n children,\n footer,\n position,\n open,\n onMouseDown,\n id,\n role,\n ariaLabelledby,\n ariaDescribedby,\n}: TransitionContentProps) => {\n const contentRef = useMergeRefs(dropdownRef, transitionRef);\n return (\n <div\n className={clsx(styles.dropdown, dropdownClasses, {\n [styles.open]: open,\n [styles['with-limited-width']]: !stretchWidth,\n [styles['hide-block-border']]: stretchWidth,\n [styles.interior]: interior,\n [styles.refresh]: isRefresh,\n [styles['use-portal']]: expandToViewport && !interior,\n [styles['stretch-beyond-trigger-width']]: stretchBeyondTriggerWidth,\n })}\n ref={contentRef}\n id={id}\n role={role}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-open={open}\n data-animating={state !== 'exited'}\n aria-hidden={!open}\n style={\n stretchBeyondTriggerWidth ? { [customCssProps.dropdownDefaultMaxWidth]: `${defaultMaxDropdownWidth}px` } : {}\n }\n onMouseDown={onMouseDown}\n >\n <div\n className={clsx(\n styles['dropdown-content-wrapper'],\n !header && !children && styles['is-empty'],\n isRefresh && styles.refresh\n )}\n >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {children}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n children,\n trigger,\n open,\n onDropdownClose,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchWidth = true,\n stretchHeight = false,\n stretchToTriggerWidth = true,\n stretchBeyondTriggerWidth = false,\n expandToViewport = false,\n preferCenter = false,\n interior = false,\n minWidth,\n scrollable = true,\n loopFocus = expandToViewport,\n onFocus,\n onBlur,\n contentKey,\n dropdownContentId,\n dropdownContentRole,\n ariaLabelledby,\n ariaDescribedby,\n}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n const dropdownContainerRef = useRef<HTMLDivElement | null>(null);\n const verticalContainerRef = useRef<HTMLDivElement>(null);\n // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning\n const fixedPosition = useRef<DropdownPosition | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n const dropdownClasses = usePortalModeClasses(triggerRef);\n const [position, setPosition] = useState<DropdownContextProviderProps['position']>('bottom-right');\n\n const isMobile = useMobile();\n\n const setDropdownPosition = (\n position: DropdownPosition | InteriorDropdownPosition,\n triggerBox: DOMRect,\n target: HTMLDivElement,\n verticalContainer: HTMLDivElement\n ) => {\n const entireWidth = !interior && stretchWidth;\n if (!stretchWidth) {\n // 1px offset for dropdowns where the dropdown itself needs a border, rather than on the items\n verticalContainer.style.maxBlockSize = `${parseInt(position.blockSize) + 1}px`;\n } else {\n verticalContainer.style.maxBlockSize = position.blockSize;\n }\n\n if (entireWidth && !expandToViewport) {\n if (stretchToTriggerWidth) {\n target.classList.add(styles['occupy-entire-width']);\n }\n } else {\n target.style.inlineSize = position.inlineSize;\n }\n\n // Using styles for main dropdown to adjust its position as preferred alternative\n if (position.dropBlockStart && !interior) {\n target.classList.add(styles['dropdown-drop-up']);\n if (!expandToViewport) {\n target.style.insetBlockEnd = '100%';\n }\n } else {\n target.classList.remove(styles['dropdown-drop-up']);\n }\n target.classList.add(position.dropInlineStart ? styles['dropdown-drop-left'] : styles['dropdown-drop-right']);\n\n if (position.insetInlineStart && position.insetInlineStart !== 'auto') {\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n // Position normal overflow dropdowns with fixed positioning relative to viewport\n if (expandToViewport && !interior) {\n target.style.position = 'fixed';\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = `calc(100% - ${triggerBox.top}px)`;\n } else {\n target.style.insetBlockStart = `${triggerBox.bottom}px`;\n }\n if (position.dropInlineStart) {\n target.style.insetInlineStart = `calc(${triggerBox.right}px - ${position.inlineSize})`;\n } else {\n target.style.insetInlineStart = `${triggerBox.left}px`;\n }\n // Keep track of the initial dropdown position and direction.\n // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.\n fixedPosition.current = position;\n return;\n }\n\n // For an interior dropdown (the fly out) we need exact values for positioning\n // and classes are not enough\n // usage of relative position is impossible due to overwrite of overflow-x\n if (interior && isInteriorPosition(position)) {\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = position.insetBlockEnd;\n } else {\n target.style.insetBlockStart = position.insetBlockStart;\n }\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n if (position.dropBlockStart && position.dropInlineStart) {\n setPosition('top-left');\n } else if (position.dropBlockStart) {\n setPosition('top-right');\n } else if (position.dropInlineStart) {\n setPosition('bottom-left');\n } else {\n setPosition('bottom-right');\n }\n };\n\n const isOutsideDropdown = (element: Element) =>\n (!wrapperRef.current || !nodeBelongs(wrapperRef.current, element)) &&\n (!dropdownContainerRef.current || !nodeBelongs(dropdownContainerRef.current, element));\n\n const focusHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onFocus, event);\n }\n };\n\n const blurHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onBlur, event);\n }\n };\n\n // Prevent the dropdown width from stretching beyond the trigger width\n // if that is going to cause the dropdown to be cropped because of overflow\n const fixStretching = () => {\n const classNameToRemove = styles['stretch-beyond-trigger-width'];\n if (\n open &&\n stretchBeyondTriggerWidth &&\n dropdownRef.current &&\n triggerRef.current &&\n dropdownRef.current.classList.contains(classNameToRemove) &&\n !hasEnoughSpaceToStretchBeyondTriggerWidth({\n triggerElement: triggerRef.current,\n dropdownElement: dropdownRef.current,\n desiredMinWidth: minWidth,\n expandToViewport,\n stretchWidth,\n stretchHeight,\n isMobile,\n })\n ) {\n dropdownRef.current.classList.remove(classNameToRemove);\n }\n };\n\n useResizeObserver(() => dropdownRef.current, fixStretching);\n\n useLayoutEffect(() => {\n const onDropdownOpen = () => {\n if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {\n // calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components\n if (scrollable) {\n dropdownRef.current.classList.add(styles.nowrap);\n }\n setDropdownPosition(\n ...calculatePosition(\n dropdownRef.current,\n triggerRef.current,\n verticalContainerRef.current,\n interior,\n expandToViewport,\n preferCenter,\n stretchWidth,\n stretchHeight,\n isMobile,\n minWidth,\n stretchBeyondTriggerWidth\n ),\n dropdownRef.current,\n verticalContainerRef.current\n );\n if (scrollable) {\n dropdownRef.current.classList.remove(styles.nowrap);\n }\n }\n };\n onDropdownOpen();\n\n if (open) {\n // window may scroll when dropdown opens, for example when soft keyboard shows up\n window.addEventListener('scroll', onDropdownOpen);\n // only listen to window scroll within very short time after the dropdown opens\n // do not want to interfere dropdown position on scroll afterwards\n const timeoutId = setTimeout(() => {\n window.removeEventListener('scroll', onDropdownOpen);\n }, 500);\n\n return () => {\n clearTimeout(timeoutId);\n window.removeEventListener('scroll', onDropdownOpen);\n };\n }\n // See AWSUI-13040\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, stretchWidth, isMobile, contentKey]);\n\n // subscribe to outside click\n useEffect(() => {\n if (!open) {\n return;\n }\n const clickListener = (event: MouseEvent) => {\n // Since the listener is registered on the window, `event.target` will incorrectly point at the\n // shadow root if the component is rendered inside shadow DOM.\n const target = event.composedPath ? event.composedPath()[0] : event.target;\n if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onDropdownClose);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onDropdownClose]);\n\n // sync dropdown position on scroll and resize\n useLayoutEffect(() => {\n if (!expandToViewport || !open) {\n return;\n }\n const updateDropdownPosition = () => {\n if (triggerRef.current && dropdownRef.current && verticalContainerRef.current) {\n const triggerRect = getLogicalBoundingClientRect(triggerRef.current);\n const target = dropdownRef.current;\n if (fixedPosition.current) {\n if (fixedPosition.current.dropBlockStart) {\n dropdownRef.current.style.insetBlockEnd = `calc(100% - ${triggerRect.insetBlockStart}px)`;\n } else {\n target.style.insetBlockStart = `${triggerRect.insetBlockEnd}px`;\n }\n if (fixedPosition.current.dropInlineStart) {\n target.style.insetInlineStart = `calc(${triggerRect.insetInlineEnd}px - ${fixedPosition.current.inlineSize})`;\n } else {\n target.style.insetInlineStart = `${triggerRect.insetInlineStart}px`;\n }\n }\n }\n };\n\n updateDropdownPosition();\n\n const controller = new AbortController();\n window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });\n window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });\n return () => {\n controller.abort();\n };\n }, [open, expandToViewport]);\n\n const referrerId = useUniqueId();\n\n return (\n <div\n className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\n\n <TabTrap\n focusNextCallback={() => dropdownRef.current && getFirstFocusable(dropdownRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <DropdownContainer\n triggerRef={triggerRef}\n renderWithPortal={expandToViewport && !interior}\n id={dropdownId}\n referrerId={referrerId}\n open={open}\n >\n <Transition in={open ?? false} exit={false}>\n {(state, ref) => (\n <div ref={dropdownContainerRef}>\n <TabTrap\n focusNextCallback={() => triggerRef.current && getLastFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <TransitionContent\n state={state}\n transitionRef={ref}\n dropdownClasses={dropdownClasses}\n open={open}\n stretchWidth={stretchWidth}\n interior={interior}\n header={header}\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={stretchBeyondTriggerWidth}\n footer={footer}\n onMouseDown={onMouseDown}\n isRefresh={isRefresh}\n dropdownRef={dropdownRef}\n verticalContainerRef={verticalContainerRef}\n position={position}\n id={dropdownContentId}\n role={dropdownContentRole}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n >\n {children}\n </TransitionContent>\n\n <TabTrap\n focusNextCallback={() => triggerRef.current && getFirstFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n </div>\n )}\n </Transition>\n </DropdownContainer>\n </div>\n );\n};\n\nconst isInteriorPosition = (\n position: DropdownPosition | InteriorDropdownPosition\n): position is InteriorDropdownPosition => (position as InteriorDropdownPosition).insetBlockEnd !== undefined;\n\nexport default Dropdown;\n"]}
|
|
@@ -24,15 +24,15 @@ export function Transition(_a) {
|
|
|
24
24
|
if (node === null) {
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
|
+
const controller = new AbortController();
|
|
27
28
|
const listener = (e) => {
|
|
28
29
|
if (e.target === node) {
|
|
29
|
-
|
|
30
|
-
node.removeEventListener('animationend', listener);
|
|
30
|
+
controller.abort();
|
|
31
31
|
done();
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
node.addEventListener('transitionend', listener);
|
|
35
|
-
node.addEventListener('animationend', listener);
|
|
34
|
+
node.addEventListener('transitionend', listener, { signal: controller.signal });
|
|
35
|
+
node.addEventListener('animationend', listener, { signal: controller.signal });
|
|
36
36
|
}, []);
|
|
37
37
|
return (React.createElement(ReactTransitionGroupTransition, Object.assign({ addEndListener: addTransitionEndListener, timeout: motionDisabled ? 0 : undefined, in: isIn, nodeRef: transitionRootElement, exit: exit, onEnter: isAppearing => {
|
|
38
38
|
if (!isAppearing) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAoB,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EACL,UAAU,IAAI,8BAA8B,GAE7C,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAejF;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EAQT;QARS,EACzB,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,cAAc,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,EAC7B,QAAQ,GAAG,KAAK,EAChB,qBAAqB,OAEL,EADb,IAAI,cAPkB,iFAQ1B,CADQ;IAEP,MAAM,qBAAqB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACxD,uFAAuF;IACvF,yFAAyF;IACzF,yHAAyH;IACzH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACtG,MAAM,cAAc,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,IAAI,QAAQ,CAAC;IAE3E,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,IAAgB,EAAE,EAAE;QAChE,MAAM,IAAI,GAAG,qBAAqB,CAAC,OAAO,CAAC;QAE3C,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,CAAC,CAAmC,EAAE,EAAE;YACvD,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE;gBACrB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.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, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n Transition as ReactTransitionGroupTransition,\n TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\ninterface TransitionProps {\n in: boolean;\n exit?: boolean;\n\n disabled?: boolean;\n\n children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n onStatusChange?: (status: TransitionStatus) => void;\n transitionChangeDelay?: { entering?: number };\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n in: isIn,\n children,\n exit = true,\n onStatusChange = () => void 0,\n disabled = false,\n transitionChangeDelay,\n ...rest\n}: TransitionProps) {\n const transitionRootElement = useRef<HTMLElement>(null);\n // the initial state of the transition should be either 'exited' or 'entered' depending\n // on the `in` property, this mimicks how internally the Transition component works here:\n // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n const addTransitionEndListener = useCallback((done: () => void) => {\n const node = transitionRootElement.current;\n\n if (node === null) {\n return;\n }\n const controller = new AbortController();\n const listener = (e: TransitionEvent | AnimationEvent) => {\n if (e.target === node) {\n controller.abort();\n done();\n }\n };\n node.addEventListener('transitionend', listener, { signal: controller.signal });\n node.addEventListener('animationend', listener, { signal: controller.signal });\n }, []);\n\n return (\n <ReactTransitionGroupTransition\n addEndListener={addTransitionEndListener}\n timeout={motionDisabled ? 0 : undefined}\n in={isIn}\n nodeRef={transitionRootElement}\n exit={exit}\n onEnter={isAppearing => {\n if (!isAppearing) {\n setTransitionState('enter');\n onStatusChange('enter');\n }\n }}\n onEntering={isAppearing => {\n if (!isAppearing) {\n // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n // to be applied before the animation starts.\n void transitionRootElement.current?.offsetHeight;\n\n if (transitionChangeDelay?.entering) {\n setTimeout(() => {\n setTransitionState('entering');\n onStatusChange('entering');\n }, transitionChangeDelay?.entering);\n } else {\n setTransitionState('entering');\n onStatusChange('entering');\n }\n }\n }}\n onEntered={isAppearing => {\n if (!isAppearing) {\n setTransitionState('entered');\n onStatusChange('entered');\n }\n }}\n onExit={() => {\n setTransitionState('exit');\n onStatusChange('exit');\n }}\n onExiting={() => {\n setTransitionState('exiting');\n onStatusChange('exiting');\n }}\n onExited={() => {\n setTransitionState('exited');\n onStatusChange('exited');\n }}\n {...rest}\n >\n {() => children(transitionState, transitionRootElement)}\n </ReactTransitionGroupTransition>\n );\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -6,6 +6,7 @@ export default class FocusTracker {
|
|
|
6
6
|
private node;
|
|
7
7
|
private readonly onFocusLeave;
|
|
8
8
|
private readonly onFocusEnter;
|
|
9
|
+
private readonly controller;
|
|
9
10
|
private currentlyFocused;
|
|
10
11
|
constructor(node: HTMLElement, { onFocusEnter, onFocusLeave }: FocusTrackerOptions);
|
|
11
12
|
initialize(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-tracker.d.ts","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,YAAY;
|
|
1
|
+
{"version":3,"file":"focus-tracker.d.ts","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,YAAY;IAQ7B,OAAO,CAAC,IAAI;IAPd,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAa;IAC1C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAa;IAC1C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkB;IAE7C,OAAO,CAAC,gBAAgB,CAAS;gBAGvB,IAAI,EAAE,WAAW,EACzB,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,mBAAmB;IAOrD,UAAU;IAMV,OAAO;IAIP,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;CAIrB"}
|
|
@@ -20,15 +20,15 @@ export default class FocusTracker {
|
|
|
20
20
|
};
|
|
21
21
|
this.onFocusEnter = onFocusEnter;
|
|
22
22
|
this.onFocusLeave = onFocusLeave;
|
|
23
|
+
this.controller = new AbortController();
|
|
23
24
|
}
|
|
24
25
|
initialize() {
|
|
25
26
|
this.currentlyFocused = nodeBelongs(this.node, document.activeElement);
|
|
26
|
-
document.addEventListener('focusin', this.focusInListener);
|
|
27
|
-
document.addEventListener('focusout', this.focusOutListener);
|
|
27
|
+
document.addEventListener('focusin', this.focusInListener, { signal: this.controller.signal });
|
|
28
|
+
document.addEventListener('focusout', this.focusOutListener, { signal: this.controller.signal });
|
|
28
29
|
}
|
|
29
30
|
destroy() {
|
|
30
|
-
|
|
31
|
-
document.removeEventListener('focusout', this.focusOutListener);
|
|
31
|
+
this.controller.abort();
|
|
32
32
|
}
|
|
33
33
|
triggerBlur() {
|
|
34
34
|
this.currentlyFocused = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-tracker.js","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD,MAAM,CAAC,OAAO,OAAO,YAAY;
|
|
1
|
+
{"version":3,"file":"focus-tracker.js","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD,MAAM,CAAC,OAAO,OAAO,YAAY;IAO/B,YACU,IAAiB,EACzB,EAAE,YAAY,EAAE,YAAY,EAAuB;QAD3C,SAAI,GAAJ,IAAI,CAAa;QAHnB,qBAAgB,GAAG,KAAK,CAAC;QAqBzB,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC9C,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,aAAa,EAAE;gBAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;YACxC,MAAM,qBAAqB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YACnE,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,qBAAqB,CAAC,EAAE;gBAC5E,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;QACH,CAAC,CAAC;QA5BA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IAC1C,CAAC;IAED,UAAU;QACR,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;QACvE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/F,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACnG,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;IAiBO,WAAW;QACjB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;CACF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { nodeBelongs } from './utils/node-belongs';\n\ninterface FocusTrackerOptions {\n onFocusEnter: () => void;\n onFocusLeave: () => void;\n}\n\nexport default class FocusTracker {\n private readonly onFocusLeave: () => void;\n private readonly onFocusEnter: () => void;\n private readonly controller: AbortController;\n\n private currentlyFocused = false;\n\n constructor(\n private node: HTMLElement,\n { onFocusEnter, onFocusLeave }: FocusTrackerOptions\n ) {\n this.onFocusEnter = onFocusEnter;\n this.onFocusLeave = onFocusLeave;\n this.controller = new AbortController();\n }\n\n initialize() {\n this.currentlyFocused = nodeBelongs(this.node, document.activeElement);\n document.addEventListener('focusin', this.focusInListener, { signal: this.controller.signal });\n document.addEventListener('focusout', this.focusOutListener, { signal: this.controller.signal });\n }\n\n destroy() {\n this.controller.abort();\n }\n\n private focusInListener = (event: FocusEvent) => {\n const focusIsInside = nodeBelongs(this.node, event.target);\n if (!this.currentlyFocused && focusIsInside) {\n this.triggerFocus();\n }\n };\n\n private focusOutListener = (event: FocusEvent) => {\n const nextFocused = event.relatedTarget;\n const isNextFocusedInParent = !nodeBelongs(this.node, nextFocused);\n if (this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {\n this.triggerBlur();\n }\n };\n\n private triggerBlur() {\n this.currentlyFocused = false;\n this.onFocusLeave();\n }\n\n private triggerFocus() {\n this.currentlyFocused = true;\n this.onFocusEnter();\n }\n}\n"]}
|
|
@@ -9,11 +9,11 @@ const useEventListenersSingleton = createSingletonHandler(setTarget => {
|
|
|
9
9
|
function handleKeyDown() {
|
|
10
10
|
setTarget(null);
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
window.addEventListener('
|
|
12
|
+
const controller = new AbortController();
|
|
13
|
+
window.addEventListener('mousedown', handleMouseDown, { signal: controller.signal });
|
|
14
|
+
window.addEventListener('keydown', handleKeyDown, { signal: controller.signal });
|
|
14
15
|
return () => {
|
|
15
|
-
|
|
16
|
-
window.removeEventListener('keydown', handleKeyDown);
|
|
16
|
+
controller.abort();
|
|
17
17
|
};
|
|
18
18
|
});
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,MAAM,0BAA0B,GAAG,sBAAsB,CAAc,SAAS,CAAC,EAAE;IACjF,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,MAAM,0BAA0B,GAAG,sBAAsB,CAAc,SAAS,CAAC,EAAE;IACjF,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACjF,OAAO,GAAG,EAAE;QACV,UAAU,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,0BAA0B,CAAC,MAAM,CAAC,EAAE;QAClC,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\n\nimport { createSingletonHandler } from '@cloudscape-design/component-toolkit/internal';\n\nconst useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget => {\n function handleMouseDown(event: MouseEvent) {\n setTarget(event.target as Node);\n }\n function handleKeyDown() {\n setTarget(null);\n }\n const controller = new AbortController();\n window.addEventListener('mousedown', handleMouseDown, { signal: controller.signal });\n window.addEventListener('keydown', handleKeyDown, { signal: controller.signal });\n return () => {\n controller.abort();\n };\n});\n\n/**\n * Captures last mouse down target and clears it on keydown.\n * @returns a callback to get the last detected mouse down target.\n */\nexport default function useMouseDownTarget() {\n const mouseDownTargetRef = useRef<null | Node>(null);\n useEventListenersSingleton(target => {\n mouseDownTargetRef.current = target;\n });\n return () => mouseDownTargetRef.current;\n}\n"]}
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -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,UAAU,qBAAqB;IAC7B,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,
|
|
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,UAAU,qBAAqB;IAC7B,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,sBAiGvB"}
|
package/popover/container.js
CHANGED
|
@@ -58,13 +58,12 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
|
|
|
58
58
|
};
|
|
59
59
|
const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());
|
|
60
60
|
const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());
|
|
61
|
-
|
|
62
|
-
window.addEventListener('
|
|
63
|
-
window.addEventListener('
|
|
61
|
+
const controller = new AbortController();
|
|
62
|
+
window.addEventListener('click', onClick, { signal: controller.signal });
|
|
63
|
+
window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });
|
|
64
|
+
window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });
|
|
64
65
|
return () => {
|
|
65
|
-
|
|
66
|
-
window.removeEventListener('resize', updatePositionOnResize);
|
|
67
|
-
window.removeEventListener('scroll', refreshPosition, true);
|
|
66
|
+
controller.abort();
|
|
68
67
|
};
|
|
69
68
|
}, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
|
|
70
69
|
return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
|
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;AAiCrC,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,GACM;IACtB,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,gCAAgC;IAChC,MAAM,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAClG,kBAAkB,CAAC;QACjB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB,EAAE,QAAQ;QAC3B,gBAAgB;QAChB,YAAY;QACZ,gBAAgB;KACjB,CAAC,CAAC;IAEL,+CAA+C;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,kDAAkD;IAClD,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE;QACjC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,sCAAsC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB;;;;;UAKE;QAEF,MAAM,OAAO,GAAG,CAAC,KAA8B,EAAE,EAAE;YACjD;YACE,kDAAkD;YAClD,YAAY;gBACZ,mFAAmF;gBACnF,yDAAyD;gBACzD,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C;gBACA,OAAO;aACR;YAED,qBAAqB,CAAC,GAAG,EAAE;gBACzB,qBAAqB,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC1F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;
|
|
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;AAiCrC,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,GACM;IACtB,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,gCAAgC;IAChC,MAAM,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAClG,kBAAkB,CAAC;QACjB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB,EAAE,QAAQ;QAC3B,gBAAgB;QAChB,YAAY;QACZ,gBAAgB;KACjB,CAAC,CAAC;IAEL,+CAA+C;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,kDAAkD;IAClD,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE;QACjC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,sCAAsC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB;;;;;UAKE;QAEF,MAAM,OAAO,GAAG,CAAC,KAA8B,EAAE,EAAE;YACjD;YACE,kDAAkD;YAClD,YAAY;gBACZ,mFAAmF;gBACnF,yDAAyD;gBACzD,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C;gBACA,OAAO;aACR;YAED,qBAAqB,CAAC,GAAG,EAAE;gBACzB,qBAAqB,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC1F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;QACxF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAEjG,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE1F,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,6BACE,GAAG,EAAE,UAAU,EACf,KAAK,kCAAO,YAAY,KAAE,MAAM,KAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC;QAE9D,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,4BAA4B,gBAAgB,EAAE,CAAC,CAAC,iBACrF,IAAI,IAEhB,KAAK,CAAC,gBAAgB,CAAC,CACpB;QAEN,6BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,uBAAuB,IAAI,EAAE,CAAC,EAAE;gBAC/E,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;gBACnC,CAAC,MAAM,CAAC,0BAA0B,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO;aACvD,CAAC;YAEF,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAClC,CACF,CACP,CAAC;AACJ,CAAC","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\ninterface 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 const controller = new AbortController();\n\n window.addEventListener('click', onClick, { signal: controller.signal });\n window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n return () => {\n controller.abort();\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/index.tsx"],"names":[],"mappings":";AAiBA,UAAU,YAAY;IACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAMD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,eAE5D;AAED,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,mBAAmB,EACnB,cAAc,EACd,QAA+B,EAC/B,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAe,GAChB,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/index.tsx"],"names":[],"mappings":";AAiBA,UAAU,YAAY;IACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAMD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,eAE5D;AAED,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,mBAAmB,EACnB,cAAc,EACd,QAA+B,EAC/B,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAe,GAChB,EAAE,YAAY,eAkNd;AAED,wBAAgB,aAAa,gBAE5B"}
|
package/table/resizer/index.js
CHANGED
|
@@ -123,14 +123,15 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
|
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
125
|
updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);
|
|
126
|
+
const controller = new AbortController();
|
|
126
127
|
if (isDragging) {
|
|
127
128
|
document.body.classList.add(styles['resize-active']);
|
|
128
|
-
document.addEventListener('mousemove', onMouseMove);
|
|
129
|
-
document.addEventListener('mouseup', onMouseUp);
|
|
129
|
+
document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
|
|
130
|
+
document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
|
|
130
131
|
}
|
|
131
132
|
if (resizerHasFocus) {
|
|
132
133
|
document.body.classList.add(styles['resize-active-with-focus']);
|
|
133
|
-
elements.header.addEventListener('keydown', onKeyDown);
|
|
134
|
+
elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });
|
|
134
135
|
}
|
|
135
136
|
if (isKeyboardDragging) {
|
|
136
137
|
document.body.classList.add(styles['resize-active']);
|
|
@@ -139,9 +140,7 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
|
|
|
139
140
|
clearTimeout(autoGrowTimeout.current);
|
|
140
141
|
document.body.classList.remove(styles['resize-active']);
|
|
141
142
|
document.body.classList.remove(styles['resize-active-with-focus']);
|
|
142
|
-
|
|
143
|
-
document.removeEventListener('mouseup', onMouseUp);
|
|
144
|
-
elements.header.removeEventListener('keydown', onKeyDown);
|
|
143
|
+
controller.abort();
|
|
145
144
|
};
|
|
146
145
|
}, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);
|
|
147
146
|
const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/index.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, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { KeyCode } from '../../internal/keycode';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { getHeaderWidth, getResizerElements } from './resizer-lookup';\n\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n onWidthUpdate: (newWidth: number) => void;\n onWidthUpdateCommit: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n focusId?: string;\n showFocusRing?: boolean;\n roleDescription?: string;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Divider({ className }: { className?: string }) {\n return <span className={clsx(styles.divider, styles['divider-disabled'], className)} />;\n}\n\nexport function Resizer({\n onWidthUpdate,\n onWidthUpdateCommit,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n focusId,\n roleDescription,\n}: ResizerProps) {\n onWidthUpdate = useStableCallback(onWidthUpdate);\n onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);\n\n const separatorId = useUniqueId();\n const resizerToggleRef = useRef<HTMLButtonElement>(null);\n const resizerSeparatorRef = useRef<HTMLSpanElement>(null);\n\n const [isDragging, setIsDragging] = useState(false);\n const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n // Read header width after mounting for it to be available in the element's ARIA label before it gets focused.\n useEffect(() => {\n setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n }, []);\n\n useEffect(() => {\n const elements = getResizerElements(resizerToggleRef.current);\n const document = resizerToggleRef.current?.ownerDocument ?? window.document;\n\n if ((!isDragging && !resizerHasFocus) || !elements) {\n return;\n }\n\n const { insetInlineStart: inlineStartEdge, insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(\n elements.scrollParent\n );\n\n const updateTrackerPosition = (newOffset: number) => {\n const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);\n elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';\n // minus one pixel to offset the cell border\n elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);\n if (newWidth >= minWidth) {\n setHeaderCellWidth(newWidth);\n }\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onWidthUpdate(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > inlineStartEdge) {\n const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const inlineSize = getLogicalBoundingClientRect(elements.header).inlineSize;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(inlineSize + AUTO_GROW_INCREMENT);\n elements.scrollParent.scrollLeft += AUTO_GROW_INCREMENT * (getIsRtl(elements.scrollParent) ? -1 : 1);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = getLogicalPageX(event);\n if (offset > inlineEndEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(getLogicalPageX(event));\n setIsDragging(false);\n onWidthUpdateCommit();\n clearTimeout(autoGrowTimeout.current);\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (isKeyboardDragging) {\n const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.right, KeyCode.space, KeyCode.escape];\n\n if (keys.indexOf(event.keyCode) !== -1) {\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onActivate: () => {\n setIsKeyboardDragging(false);\n resizerToggleRef.current?.focus();\n },\n onEscape: () => {\n setIsKeyboardDragging(false);\n resizerToggleRef.current?.focus();\n },\n onInlineStart: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10),\n onInlineEnd: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10),\n });\n }\n }\n // Enter keyboard dragging mode\n else if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onActivate: () => {\n setIsKeyboardDragging(true);\n resizerSeparatorRef.current?.focus();\n },\n });\n }\n };\n\n updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);\n\n if (isDragging) {\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n elements.header.addEventListener('keydown', onKeyDown);\n }\n if (isKeyboardDragging) {\n document.body.classList.add(styles['resize-active']);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n elements.header.removeEventListener('keydown', onKeyDown);\n };\n }, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);\n\n const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });\n\n return (\n <>\n <button\n ref={resizerToggleRef}\n className={clsx(\n styles.resizer,\n (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n setIsDragging(true);\n }}\n onClick={() => {\n // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.\n setIsDragging(false);\n setResizerHasFocus(true);\n setIsKeyboardDragging(true);\n resizerSeparatorRef.current?.focus();\n }}\n onFocus={() => {\n setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n setResizerHasFocus(true);\n }}\n onBlur={event => {\n // Ignoring blur event when focus moves to the resizer separator element.\n // (This focus transition is done programmatically when the resizer button is clicked).\n if (event.relatedTarget !== resizerSeparatorRef.current) {\n setResizerHasFocus(false);\n }\n }}\n // Using a custom role-description to make the element's purpose better clear.\n // The role-description must include the word \"button\" to imply the interaction model.\n // See https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription\n aria-roledescription={roleDescription}\n aria-labelledby={ariaLabelledby}\n tabIndex={resizerTabIndex}\n data-focus-id={focusId}\n />\n <span\n className={clsx(styles.divider, isDragging && styles['divider-active'])}\n data-awsui-table-suppress-navigation={true}\n ref={resizerSeparatorRef}\n id={separatorId}\n role=\"separator\"\n tabIndex={-1}\n aria-hidden={!isKeyboardDragging}\n aria-orientation=\"vertical\"\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toFixed(0)}\n aria-valuemin={minWidth}\n data-focus-id={focusId}\n onBlur={() => {\n setResizerHasFocus(false);\n if (isKeyboardDragging) {\n setIsKeyboardDragging(false);\n }\n onWidthUpdateCommit();\n }}\n />\n </>\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/index.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, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { KeyCode } from '../../internal/keycode';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { getHeaderWidth, getResizerElements } from './resizer-lookup';\n\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n onWidthUpdate: (newWidth: number) => void;\n onWidthUpdateCommit: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n tabIndex?: number;\n focusId?: string;\n showFocusRing?: boolean;\n roleDescription?: string;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Divider({ className }: { className?: string }) {\n return <span className={clsx(styles.divider, styles['divider-disabled'], className)} />;\n}\n\nexport function Resizer({\n onWidthUpdate,\n onWidthUpdateCommit,\n ariaLabelledby,\n minWidth = DEFAULT_COLUMN_WIDTH,\n tabIndex,\n showFocusRing,\n focusId,\n roleDescription,\n}: ResizerProps) {\n onWidthUpdate = useStableCallback(onWidthUpdate);\n onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);\n\n const separatorId = useUniqueId();\n const resizerToggleRef = useRef<HTMLButtonElement>(null);\n const resizerSeparatorRef = useRef<HTMLSpanElement>(null);\n\n const [isDragging, setIsDragging] = useState(false);\n const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n // Read header width after mounting for it to be available in the element's ARIA label before it gets focused.\n useEffect(() => {\n setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n }, []);\n\n useEffect(() => {\n const elements = getResizerElements(resizerToggleRef.current);\n const document = resizerToggleRef.current?.ownerDocument ?? window.document;\n\n if ((!isDragging && !resizerHasFocus) || !elements) {\n return;\n }\n\n const { insetInlineStart: inlineStartEdge, insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(\n elements.scrollParent\n );\n\n const updateTrackerPosition = (newOffset: number) => {\n const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);\n elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';\n // minus one pixel to offset the cell border\n elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);\n if (newWidth >= minWidth) {\n setHeaderCellWidth(newWidth);\n }\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onWidthUpdate(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > inlineStartEdge) {\n const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const inlineSize = getLogicalBoundingClientRect(elements.header).inlineSize;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(inlineSize + AUTO_GROW_INCREMENT);\n elements.scrollParent.scrollLeft += AUTO_GROW_INCREMENT * (getIsRtl(elements.scrollParent) ? -1 : 1);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = getLogicalPageX(event);\n if (offset > inlineEndEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(getLogicalPageX(event));\n setIsDragging(false);\n onWidthUpdateCommit();\n clearTimeout(autoGrowTimeout.current);\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (isKeyboardDragging) {\n const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.right, KeyCode.space, KeyCode.escape];\n\n if (keys.indexOf(event.keyCode) !== -1) {\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onActivate: () => {\n setIsKeyboardDragging(false);\n resizerToggleRef.current?.focus();\n },\n onEscape: () => {\n setIsKeyboardDragging(false);\n resizerToggleRef.current?.focus();\n },\n onInlineStart: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10),\n onInlineEnd: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10),\n });\n }\n }\n // Enter keyboard dragging mode\n else if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onActivate: () => {\n setIsKeyboardDragging(true);\n resizerSeparatorRef.current?.focus();\n },\n });\n }\n };\n\n updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);\n const controller = new AbortController();\n\n if (isDragging) {\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });\n document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });\n }\n if (isKeyboardDragging) {\n document.body.classList.add(styles['resize-active']);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n controller.abort();\n };\n }, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);\n\n const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });\n\n return (\n <>\n <button\n ref={resizerToggleRef}\n className={clsx(\n styles.resizer,\n (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus']\n )}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n setIsDragging(true);\n }}\n onClick={() => {\n // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.\n setIsDragging(false);\n setResizerHasFocus(true);\n setIsKeyboardDragging(true);\n resizerSeparatorRef.current?.focus();\n }}\n onFocus={() => {\n setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n setResizerHasFocus(true);\n }}\n onBlur={event => {\n // Ignoring blur event when focus moves to the resizer separator element.\n // (This focus transition is done programmatically when the resizer button is clicked).\n if (event.relatedTarget !== resizerSeparatorRef.current) {\n setResizerHasFocus(false);\n }\n }}\n // Using a custom role-description to make the element's purpose better clear.\n // The role-description must include the word \"button\" to imply the interaction model.\n // See https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription\n aria-roledescription={roleDescription}\n aria-labelledby={ariaLabelledby}\n tabIndex={resizerTabIndex}\n data-focus-id={focusId}\n />\n <span\n className={clsx(styles.divider, isDragging && styles['divider-active'])}\n data-awsui-table-suppress-navigation={true}\n ref={resizerSeparatorRef}\n id={separatorId}\n role=\"separator\"\n tabIndex={-1}\n aria-hidden={!isKeyboardDragging}\n aria-orientation=\"vertical\"\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toFixed(0)}\n aria-valuemin={minWidth}\n data-focus-id={focusId}\n onBlur={() => {\n setResizerHasFocus(false);\n if (isKeyboardDragging) {\n setIsKeyboardDragging(false);\n }\n onWidthUpdateCommit();\n }}\n />\n </>\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
@@ -166,13 +166,12 @@ class GridNavigationProcessor {
|
|
|
166
166
|
}
|
|
167
167
|
init(table) {
|
|
168
168
|
this._table = table;
|
|
169
|
-
|
|
170
|
-
this.table.addEventListener('
|
|
171
|
-
this.table.addEventListener('
|
|
169
|
+
const controller = new AbortController();
|
|
170
|
+
this.table.addEventListener('focusin', this.onFocusin, { signal: controller.signal });
|
|
171
|
+
this.table.addEventListener('focusout', this.onFocusout, { signal: controller.signal });
|
|
172
|
+
this.table.addEventListener('keydown', this.onKeydown, { signal: controller.signal });
|
|
172
173
|
this.cleanup = () => {
|
|
173
|
-
|
|
174
|
-
this.table.removeEventListener('focusout', this.onFocusout);
|
|
175
|
-
this.table.removeEventListener('keydown', this.onKeydown);
|
|
174
|
+
controller.abort();
|
|
176
175
|
};
|
|
177
176
|
}
|
|
178
177
|
cleanup() {
|