@cloudscape-design/components 3.0.971 → 3.0.973

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.
Files changed (41) hide show
  1. package/internal/components/drag-handle/button.d.ts.map +1 -1
  2. package/internal/components/drag-handle/button.js +2 -1
  3. package/internal/components/drag-handle/button.js.map +1 -1
  4. package/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.d.ts.map +1 -1
  5. package/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.js +5 -0
  6. package/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.js.map +1 -1
  7. package/internal/components/drag-handle/test-classes/styles.css.js +6 -0
  8. package/internal/components/drag-handle/test-classes/styles.scoped.css +7 -0
  9. package/internal/components/drag-handle/test-classes/styles.selectors.js +7 -0
  10. package/internal/components/drag-handle-wrapper/direction-button.d.ts.map +1 -1
  11. package/internal/components/drag-handle-wrapper/direction-button.js +2 -1
  12. package/internal/components/drag-handle-wrapper/direction-button.js.map +1 -1
  13. package/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  14. package/internal/components/drag-handle-wrapper/index.js +6 -3
  15. package/internal/components/drag-handle-wrapper/index.js.map +1 -1
  16. package/internal/components/drag-handle-wrapper/test-classes/styles.css.js +12 -0
  17. package/internal/components/drag-handle-wrapper/test-classes/styles.scoped.css +31 -0
  18. package/internal/components/drag-handle-wrapper/test-classes/styles.selectors.js +13 -0
  19. package/internal/context/table-component-context.d.ts +3 -1
  20. package/internal/context/table-component-context.d.ts.map +1 -1
  21. package/internal/context/table-component-context.js.map +1 -1
  22. package/internal/environment.js +1 -1
  23. package/internal/environment.json +1 -1
  24. package/internal/manifest.json +1 -1
  25. package/package.json +3 -1
  26. package/property-filter/internal.d.ts.map +1 -1
  27. package/property-filter/internal.js +29 -1
  28. package/property-filter/internal.js.map +1 -1
  29. package/table/internal.d.ts.map +1 -1
  30. package/table/internal.js +9 -7
  31. package/table/internal.js.map +1 -1
  32. package/test-utils/dom/internal/drag-handle.d.ts +9 -0
  33. package/test-utils/dom/internal/drag-handle.js +27 -0
  34. package/test-utils/dom/internal/drag-handle.js.map +1 -0
  35. package/test-utils/selectors/internal/drag-handle.d.ts +9 -0
  36. package/test-utils/selectors/internal/drag-handle.js +27 -0
  37. package/test-utils/selectors/internal/drag-handle.js.map +1 -0
  38. package/test-utils/tsconfig.tsbuildinfo +1 -1
  39. package/text-filter/internal.d.ts.map +1 -1
  40. package/text-filter/internal.js +22 -5
  41. package/text-filter/internal.js.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,QAAA,MAAM,gBAAgB,iFA+DrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,iFAgErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -6,6 +6,7 @@ import InternalIcon from '../../../icon/internal';
6
6
  import { useMergeRefs } from '../../hooks/use-merge-refs';
7
7
  import { ResizeIcon } from './resize-icon';
8
8
  import styles from './styles.css.js';
9
+ import testUtilsStyles from './test-classes/styles.css.js';
9
10
  const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'normal', className, ariaLabel, ariaLabelledBy, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown, }, ref) => {
10
11
  const dragHandleRefObject = useRef(null);
11
12
  const iconProps = (() => {
@@ -27,7 +28,7 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
27
28
  // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
28
29
  // Otherwise, we can't reliably catch keyboard events coming from the handle
29
30
  // when it is being dragged.
30
- React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
31
+ React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
31
32
  React.createElement(InternalIcon, Object.assign({}, iconProps))));
32
33
  });
33
34
  export default DragHandleButton;
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nconst DragHandleButton = forwardRef(\n (\n {\n variant = 'drag-indicator',\n size = 'normal',\n className,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n ariaValue,\n disabled,\n onPointerDown,\n onKeyDown,\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n const iconProps: IconProps = (() => {\n const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n switch (variant) {\n case 'drag-indicator':\n return { ...shared, name: 'drag-indicator' };\n case 'resize-area':\n return { ...shared, name: 'resize-area' };\n case 'resize-horizontal':\n return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n case 'resize-vertical':\n return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n }\n })();\n\n return (\n // We need to use a div with button role instead of a button\n // so that Safari will focus on it when clicking it.\n // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n // Otherwise, we can't reliably catch keyboard events coming from the handle\n // when it is being dragged.\n <div\n ref={useMergeRefs(ref, dragHandleRefObject)}\n role={ariaValue ? 'slider' : 'button'}\n tabIndex={0}\n className={clsx(\n className,\n styles.handle,\n styles[`handle-${variant}`],\n styles[`handle-size-${size}`],\n disabled && styles['handle-disabled']\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedby}\n aria-disabled={disabled}\n aria-valuemax={ariaValue?.valueMax}\n aria-valuemin={ariaValue?.valueMin}\n aria-valuenow={ariaValue?.valueNow}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n >\n <InternalIcon {...iconProps} />\n </div>\n );\n }\n);\n\nexport default DragHandleButton;\n"]}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n (\n {\n variant = 'drag-indicator',\n size = 'normal',\n className,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n ariaValue,\n disabled,\n onPointerDown,\n onKeyDown,\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n const iconProps: IconProps = (() => {\n const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n switch (variant) {\n case 'drag-indicator':\n return { ...shared, name: 'drag-indicator' };\n case 'resize-area':\n return { ...shared, name: 'resize-area' };\n case 'resize-horizontal':\n return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n case 'resize-vertical':\n return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n }\n })();\n\n return (\n // We need to use a div with button role instead of a button\n // so that Safari will focus on it when clicking it.\n // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n // Otherwise, we can't reliably catch keyboard events coming from the handle\n // when it is being dragged.\n <div\n ref={useMergeRefs(ref, dragHandleRefObject)}\n role={ariaValue ? 'slider' : 'button'}\n tabIndex={0}\n className={clsx(\n className,\n styles.handle,\n testUtilsStyles.root,\n styles[`handle-${variant}`],\n styles[`handle-size-${size}`],\n disabled && styles['handle-disabled']\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedby}\n aria-disabled={disabled}\n aria-valuemax={ariaValue?.valueMax}\n aria-valuemin={ariaValue?.valueMin}\n aria-valuenow={ariaValue?.valueNow}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n >\n <InternalIcon {...iconProps} />\n </div>\n );\n }\n);\n\nexport default DragHandleButton;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"use-drag-handle-interaction-state.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,MAAM,EACN,0BAA0B,EAC1B,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,kCAAkC,EAAE,CAAC;AAE9C,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,IAAI,EACzC,KAAK,EAAE,0BAA0B,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAChB,0BAA0B,CAAC,CAAC,CAAC,CA6F/B;AAED,wBAAgB,yBAAyB,CAAC,CAAC,GAAG,IAAI,EAChD,SAAS,EAAE,0BAA0B,CAAC,CAAC,CAAC,EACxC,SAAS,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACvC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CA2C/B;AAwFD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,6BAA6B,CAAC,CAAC,GAAG,IAAI,EAC5D,KAAK,GAAE,kCAAkC,CAAC,CAAC,CAAM,EACjD,OAAO;;CAAmB;;gCAUI,YAAY,aAAa,CAAC;gCAM1B,YAAY;8BAMd,YAAY;;4BAWd,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC;;;EAgBrE"}
1
+ {"version":3,"file":"use-drag-handle-interaction-state.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,MAAM,EACN,0BAA0B,EAC1B,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,kCAAkC,EAAE,CAAC;AAE9C,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,IAAI,EACzC,KAAK,EAAE,0BAA0B,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAChB,0BAA0B,CAAC,CAAC,CAAC,CA6F/B;AAED,wBAAgB,yBAAyB,CAAC,CAAC,GAAG,IAAI,EAChD,SAAS,EAAE,0BAA0B,CAAC,CAAC,CAAC,EACxC,SAAS,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACvC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CA2C/B;AAkGD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,6BAA6B,CAAC,CAAC,GAAG,IAAI,EAC5D,KAAK,GAAE,kCAAkC,CAAC,CAAC,CAAM,EACjD,OAAO;;CAAmB;;gCAUI,YAAY,aAAa,CAAC;gCAM1B,YAAY;8BAMd,YAAY;;4BAWd,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC;;;EAgBrE"}
@@ -124,6 +124,9 @@ export function getCallbacksForTransition(prevState, nextState) {
124
124
  return callbacks;
125
125
  }
126
126
  function interactionReducer(state, action) {
127
+ if (action.type === 'CLEAR_CALLBACKS') {
128
+ return Object.assign(Object.assign({}, state), { transitionCallbacks: undefined });
129
+ }
127
130
  const nextState = calculateNextState(state, action);
128
131
  // Special handling for POINTER_MOVE to always trigger onDndActive callback
129
132
  if (action.type === 'POINTER_MOVE' && action.payload.nativeEvent) {
@@ -189,6 +192,8 @@ function useCallbackHandler(pendingCallbacks, props, dispatch) {
189
192
  break;
190
193
  }
191
194
  });
195
+ // Clean up callbacks to prevent re-execution on subsequent re-renders.
196
+ dispatch({ type: 'CLEAR_CALLBACKS' });
192
197
  }, [pendingCallbacks, props, dispatch]);
193
198
  }
194
199
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"use-drag-handle-interaction-state.js","sourceRoot":"","sources":["../../../../../../src/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.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 from 'react';\nimport { useEffect, useReducer, useRef } from 'react';\n\nimport type {\n Action,\n DragHandleInteractionState,\n StateTransitionCallbacks,\n UseDragHandleInteractionStateProps,\n} from './interfaces';\n\nexport { UseDragHandleInteractionStateProps };\n\nexport function calculateNextState<T = void>(\n state: DragHandleInteractionState<T>,\n action: Action<T>\n): DragHandleInteractionState<T> {\n switch (action.type) {\n case 'POINTER_DOWN': {\n const { nativeEvent, metadata } = action.payload;\n return {\n value: 'dnd-start',\n eventData: nativeEvent,\n metadata,\n };\n }\n\n case 'POINTER_MOVE': {\n const { nativeEvent } = action.payload;\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n ...state,\n value: 'dnd-active',\n eventData: nativeEvent,\n };\n }\n return state;\n }\n\n case 'POINTER_UP': {\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n const dndSubStateBeforeUp = state.value;\n if (dndSubStateBeforeUp === 'dnd-start') {\n return {\n value: 'uap-action-start',\n metadata: state.metadata, // Preserve metadata when transitioning from dnd-start to uap-action-start\n };\n } else {\n return {\n value: 'dnd-end',\n eventData: state.eventData,\n };\n }\n }\n return state;\n }\n\n case 'POINTER_CANCEL': {\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n value: 'dnd-end',\n };\n }\n return state;\n }\n\n case 'KEY_DOWN': {\n const { key, metadata } = action.payload;\n\n if (key === 'Enter' || key === ' ') {\n if (state.value === null || state.value === 'uap-action-end' || state.value === 'dnd-end') {\n return {\n value: 'uap-action-start',\n metadata,\n };\n } else if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n } else if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n value: 'uap-action-start',\n metadata,\n };\n }\n } else if (key === 'Escape') {\n if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n }\n }\n return state;\n }\n\n case 'FOCUS':\n return state;\n\n case 'BLUR':\n if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n }\n return state;\n\n default:\n throw new Error(`The given action type [${action.type}] is not supported.`);\n }\n}\n\nexport function getCallbacksForTransition<T = void>(\n prevState: DragHandleInteractionState<T>,\n nextState: DragHandleInteractionState<T>\n): StateTransitionCallbacks<T>[] {\n const callbacks: StateTransitionCallbacks<T>[] = [];\n\n // Transitions from dnd-start or dnd-active to any other state\n if (\n (prevState.value === 'dnd-start' || prevState.value === 'dnd-active') &&\n nextState.value !== 'dnd-start' &&\n nextState.value !== 'dnd-active'\n ) {\n callbacks.push({ type: 'onDndEnd' });\n }\n\n // From uap-action-start to uap-action-end directly\n if (prevState.value === 'uap-action-start' && nextState.value === 'uap-action-end') {\n callbacks.push({ type: 'onUapActionEnd' });\n }\n\n // Transitions to dnd-start\n if (nextState.value === 'dnd-start') {\n callbacks.push({\n type: 'onDndStart',\n payload: nextState.eventData!,\n metadata: nextState.metadata,\n });\n }\n\n // Transitions to dnd-active\n if (nextState.value === 'dnd-active' && prevState.value === 'dnd-start') {\n callbacks.push({\n type: 'onDndActive',\n payload: nextState.eventData!,\n });\n }\n\n // Transitions to uap-action-start\n if (nextState.value === 'uap-action-start') {\n callbacks.push({\n type: 'onUapActionStart',\n metadata: nextState.metadata,\n });\n }\n\n return callbacks;\n}\n\nfunction interactionReducer<T = void>(\n state: DragHandleInteractionState<T>,\n action: Action<T>\n): DragHandleInteractionState<T> {\n const nextState = calculateNextState(state, action);\n\n // Special handling for POINTER_MOVE to always trigger onDndActive callback\n if (action.type === 'POINTER_MOVE' && action.payload.nativeEvent) {\n const transitionCallbacks = getCallbacksForTransition(state, nextState);\n // Check if there's already an onDndActive callback from the transition\n const hasOnDndActiveCallback = transitionCallbacks.some(callback => callback.type === 'onDndActive');\n const callbacks = hasOnDndActiveCallback\n ? transitionCallbacks\n : [...transitionCallbacks, { type: 'onDndActive' as const, payload: action.payload.nativeEvent }];\n\n return {\n ...nextState,\n transitionCallbacks: callbacks,\n };\n }\n\n // Return current state if state didn't change\n const isDndState = (state: DragHandleInteractionState<T>) => {\n return state.value === 'dnd-start' || state.value === 'dnd-active' || state.value === 'dnd-end';\n };\n if (nextState.value === state.value) {\n if (isDndState(nextState) && isDndState(state)) {\n if (nextState.eventData === state.eventData) {\n return state;\n }\n } else {\n return state;\n }\n }\n\n const callbacks = getCallbacksForTransition(state, nextState);\n return {\n ...nextState,\n transitionCallbacks: callbacks.length > 0 ? callbacks : undefined,\n };\n}\n\nfunction useStateLogger<T = void>(state: DragHandleInteractionState<T>, isEnabled: boolean) {\n const prevStateRef = useRef<DragHandleInteractionState<T>>(state);\n useEffect(() => {\n if (state.value !== prevStateRef.current.value && isEnabled) {\n console.log(`State transition: ${prevStateRef.current.value} -> ${state.value}`, {\n prevState: prevStateRef.current,\n nextState: state,\n });\n }\n prevStateRef.current = state;\n }, [state, isEnabled]);\n}\n\nfunction useCallbackHandler<T = void>(\n pendingCallbacks: StateTransitionCallbacks<T>[] | undefined,\n props: UseDragHandleInteractionStateProps<T>,\n dispatch: React.Dispatch<Action<T>>\n) {\n useEffect(() => {\n if (!pendingCallbacks?.length) {\n return;\n }\n pendingCallbacks.forEach(callback => {\n switch (callback.type) {\n case 'onDndStart':\n props.onDndStartAction?.(callback.payload, callback.metadata);\n break;\n case 'onDndActive':\n props.onDndActiveAction?.(callback.payload);\n break;\n case 'onDndEnd':\n props.onDndEndAction?.();\n break;\n case 'onUapActionStart':\n props.onUapActionStartAction?.(callback.metadata);\n break;\n case 'onUapActionEnd':\n props.onUapActionEndAction?.();\n break;\n }\n });\n }, [pendingCallbacks, props, dispatch]);\n}\n\n/**\n * Manages interaction states for drag handle components.\n *\n * The hook implements a state machine for drag handles that supports:\n * - Pointer-based drag-and-drop (DnD) interactions\n * - Keyboard-based universal access pattern (UAP) interactions\n * - State transitions with appropriate callbacks\n * - Metadata passing between states\n *\n * States:\n * - null: Idle state with no active interaction\n * - dnd-start: Initial pointer down, beginning of potential drag\n * - dnd-active: Active dragging with pointer movement\n * - dnd-end: Completed drag operation\n * - uap-action-start: Keyboard/accessibility action initiated\n * - uap-action-end: Keyboard/accessibility action completed\n */\nexport default function useDragHandleInteractionState<T = void>(\n props: UseDragHandleInteractionStateProps<T> = {},\n options = { debug: false }\n) {\n const propsRef = useRef<UseDragHandleInteractionStateProps<T>>(props);\n propsRef.current = props;\n\n const [interaction, dispatch] = useReducer(interactionReducer<T>, { value: null } as DragHandleInteractionState<T>);\n useStateLogger(interaction, options.debug);\n useCallbackHandler(interaction.transitionCallbacks, propsRef.current, dispatch);\n return {\n interaction,\n processPointerDown: (event: PointerEvent, metadata?: T) => {\n dispatch({\n type: 'POINTER_DOWN',\n payload: { nativeEvent: event, metadata },\n });\n },\n processPointerMove: (event: PointerEvent) => {\n dispatch({\n type: 'POINTER_MOVE',\n payload: { nativeEvent: event },\n });\n },\n processPointerUp: (event: PointerEvent) => {\n dispatch({\n type: 'POINTER_UP',\n payload: { nativeEvent: event },\n });\n },\n processPointerCancel: () => {\n dispatch({\n type: 'POINTER_CANCEL',\n });\n },\n processKeyDown: (event: React.KeyboardEvent<Element>, metadata?: T) => {\n const key = event.key;\n if (key === 'Enter' || key === 'Escape' || key === ' ') {\n dispatch({\n type: 'KEY_DOWN',\n payload: { key, metadata },\n });\n }\n },\n processFocus: () => {\n dispatch({ type: 'FOCUS' });\n },\n processBlur: () => {\n dispatch({ type: 'BLUR' });\n },\n };\n}\n"]}
1
+ {"version":3,"file":"use-drag-handle-interaction-state.js","sourceRoot":"","sources":["../../../../../../src/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.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 from 'react';\nimport { useEffect, useReducer, useRef } from 'react';\n\nimport type {\n Action,\n DragHandleInteractionState,\n StateTransitionCallbacks,\n UseDragHandleInteractionStateProps,\n} from './interfaces';\n\nexport { UseDragHandleInteractionStateProps };\n\nexport function calculateNextState<T = void>(\n state: DragHandleInteractionState<T>,\n action: Action<T>\n): DragHandleInteractionState<T> {\n switch (action.type) {\n case 'POINTER_DOWN': {\n const { nativeEvent, metadata } = action.payload;\n return {\n value: 'dnd-start',\n eventData: nativeEvent,\n metadata,\n };\n }\n\n case 'POINTER_MOVE': {\n const { nativeEvent } = action.payload;\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n ...state,\n value: 'dnd-active',\n eventData: nativeEvent,\n };\n }\n return state;\n }\n\n case 'POINTER_UP': {\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n const dndSubStateBeforeUp = state.value;\n if (dndSubStateBeforeUp === 'dnd-start') {\n return {\n value: 'uap-action-start',\n metadata: state.metadata, // Preserve metadata when transitioning from dnd-start to uap-action-start\n };\n } else {\n return {\n value: 'dnd-end',\n eventData: state.eventData,\n };\n }\n }\n return state;\n }\n\n case 'POINTER_CANCEL': {\n if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n value: 'dnd-end',\n };\n }\n return state;\n }\n\n case 'KEY_DOWN': {\n const { key, metadata } = action.payload;\n\n if (key === 'Enter' || key === ' ') {\n if (state.value === null || state.value === 'uap-action-end' || state.value === 'dnd-end') {\n return {\n value: 'uap-action-start',\n metadata,\n };\n } else if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n } else if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n return {\n value: 'uap-action-start',\n metadata,\n };\n }\n } else if (key === 'Escape') {\n if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n }\n }\n return state;\n }\n\n case 'FOCUS':\n return state;\n\n case 'BLUR':\n if (state.value === 'uap-action-start') {\n return {\n value: 'uap-action-end',\n };\n }\n return state;\n\n default:\n throw new Error(`The given action type [${action.type}] is not supported.`);\n }\n}\n\nexport function getCallbacksForTransition<T = void>(\n prevState: DragHandleInteractionState<T>,\n nextState: DragHandleInteractionState<T>\n): StateTransitionCallbacks<T>[] {\n const callbacks: StateTransitionCallbacks<T>[] = [];\n\n // Transitions from dnd-start or dnd-active to any other state\n if (\n (prevState.value === 'dnd-start' || prevState.value === 'dnd-active') &&\n nextState.value !== 'dnd-start' &&\n nextState.value !== 'dnd-active'\n ) {\n callbacks.push({ type: 'onDndEnd' });\n }\n\n // From uap-action-start to uap-action-end directly\n if (prevState.value === 'uap-action-start' && nextState.value === 'uap-action-end') {\n callbacks.push({ type: 'onUapActionEnd' });\n }\n\n // Transitions to dnd-start\n if (nextState.value === 'dnd-start') {\n callbacks.push({\n type: 'onDndStart',\n payload: nextState.eventData!,\n metadata: nextState.metadata,\n });\n }\n\n // Transitions to dnd-active\n if (nextState.value === 'dnd-active' && prevState.value === 'dnd-start') {\n callbacks.push({\n type: 'onDndActive',\n payload: nextState.eventData!,\n });\n }\n\n // Transitions to uap-action-start\n if (nextState.value === 'uap-action-start') {\n callbacks.push({\n type: 'onUapActionStart',\n metadata: nextState.metadata,\n });\n }\n\n return callbacks;\n}\n\nfunction interactionReducer<T = void>(\n state: DragHandleInteractionState<T>,\n action: Action<T>\n): DragHandleInteractionState<T> {\n if (action.type === 'CLEAR_CALLBACKS') {\n return {\n ...state,\n transitionCallbacks: undefined,\n };\n }\n\n const nextState = calculateNextState(state, action);\n\n // Special handling for POINTER_MOVE to always trigger onDndActive callback\n if (action.type === 'POINTER_MOVE' && action.payload.nativeEvent) {\n const transitionCallbacks = getCallbacksForTransition(state, nextState);\n // Check if there's already an onDndActive callback from the transition\n const hasOnDndActiveCallback = transitionCallbacks.some(callback => callback.type === 'onDndActive');\n const callbacks = hasOnDndActiveCallback\n ? transitionCallbacks\n : [...transitionCallbacks, { type: 'onDndActive' as const, payload: action.payload.nativeEvent }];\n\n return {\n ...nextState,\n transitionCallbacks: callbacks,\n };\n }\n\n // Return current state if state didn't change\n const isDndState = (state: DragHandleInteractionState<T>) => {\n return state.value === 'dnd-start' || state.value === 'dnd-active' || state.value === 'dnd-end';\n };\n if (nextState.value === state.value) {\n if (isDndState(nextState) && isDndState(state)) {\n if (nextState.eventData === state.eventData) {\n return state;\n }\n } else {\n return state;\n }\n }\n\n const callbacks = getCallbacksForTransition(state, nextState);\n return {\n ...nextState,\n transitionCallbacks: callbacks.length > 0 ? callbacks : undefined,\n };\n}\n\nfunction useStateLogger<T = void>(state: DragHandleInteractionState<T>, isEnabled: boolean) {\n const prevStateRef = useRef<DragHandleInteractionState<T>>(state);\n useEffect(() => {\n if (state.value !== prevStateRef.current.value && isEnabled) {\n console.log(`State transition: ${prevStateRef.current.value} -> ${state.value}`, {\n prevState: prevStateRef.current,\n nextState: state,\n });\n }\n prevStateRef.current = state;\n }, [state, isEnabled]);\n}\n\nfunction useCallbackHandler<T = void>(\n pendingCallbacks: StateTransitionCallbacks<T>[] | undefined,\n props: UseDragHandleInteractionStateProps<T>,\n dispatch: React.Dispatch<Action<T>>\n) {\n useEffect(() => {\n if (!pendingCallbacks?.length) {\n return;\n }\n pendingCallbacks.forEach(callback => {\n switch (callback.type) {\n case 'onDndStart':\n props.onDndStartAction?.(callback.payload, callback.metadata);\n break;\n case 'onDndActive':\n props.onDndActiveAction?.(callback.payload);\n break;\n case 'onDndEnd':\n props.onDndEndAction?.();\n break;\n case 'onUapActionStart':\n props.onUapActionStartAction?.(callback.metadata);\n break;\n case 'onUapActionEnd':\n props.onUapActionEndAction?.();\n break;\n }\n });\n\n // Clean up callbacks to prevent re-execution on subsequent re-renders.\n dispatch({ type: 'CLEAR_CALLBACKS' });\n }, [pendingCallbacks, props, dispatch]);\n}\n\n/**\n * Manages interaction states for drag handle components.\n *\n * The hook implements a state machine for drag handles that supports:\n * - Pointer-based drag-and-drop (DnD) interactions\n * - Keyboard-based universal access pattern (UAP) interactions\n * - State transitions with appropriate callbacks\n * - Metadata passing between states\n *\n * States:\n * - null: Idle state with no active interaction\n * - dnd-start: Initial pointer down, beginning of potential drag\n * - dnd-active: Active dragging with pointer movement\n * - dnd-end: Completed drag operation\n * - uap-action-start: Keyboard/accessibility action initiated\n * - uap-action-end: Keyboard/accessibility action completed\n */\nexport default function useDragHandleInteractionState<T = void>(\n props: UseDragHandleInteractionStateProps<T> = {},\n options = { debug: false }\n) {\n const propsRef = useRef<UseDragHandleInteractionStateProps<T>>(props);\n propsRef.current = props;\n\n const [interaction, dispatch] = useReducer(interactionReducer<T>, { value: null } as DragHandleInteractionState<T>);\n useStateLogger(interaction, options.debug);\n useCallbackHandler(interaction.transitionCallbacks, propsRef.current, dispatch);\n return {\n interaction,\n processPointerDown: (event: PointerEvent, metadata?: T) => {\n dispatch({\n type: 'POINTER_DOWN',\n payload: { nativeEvent: event, metadata },\n });\n },\n processPointerMove: (event: PointerEvent) => {\n dispatch({\n type: 'POINTER_MOVE',\n payload: { nativeEvent: event },\n });\n },\n processPointerUp: (event: PointerEvent) => {\n dispatch({\n type: 'POINTER_UP',\n payload: { nativeEvent: event },\n });\n },\n processPointerCancel: () => {\n dispatch({\n type: 'POINTER_CANCEL',\n });\n },\n processKeyDown: (event: React.KeyboardEvent<Element>, metadata?: T) => {\n const key = event.key;\n if (key === 'Enter' || key === 'Escape' || key === ' ') {\n dispatch({\n type: 'KEY_DOWN',\n payload: { key, metadata },\n });\n }\n },\n processFocus: () => {\n dispatch({ type: 'FOCUS' });\n },\n processBlur: () => {\n dispatch({ type: 'BLUR' });\n },\n };\n}\n"]}
@@ -0,0 +1,6 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "root": "awsui_root_1om0h_im8v7_5"
5
+ };
6
+
@@ -0,0 +1,7 @@
1
+ /*
2
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ SPDX-License-Identifier: Apache-2.0
4
+ */
5
+ .awsui_root_1om0h_im8v7_5:not(#\9) {
6
+ /* used in test-utils */
7
+ }
@@ -0,0 +1,7 @@
1
+
2
+ // es-module interop with Babel and Typescript
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ module.exports.default = {
5
+ "root": "awsui_root_1om0h_im8v7_5"
6
+ };
7
+
@@ -1 +1 @@
1
- {"version":3,"file":"direction-button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,oBAAoB,eA8BhG"}
1
+ {"version":3,"file":"direction-button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAezD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,oBAAoB,eAmChG"}
@@ -5,6 +5,7 @@ import clsx from 'clsx';
5
5
  import InternalIcon from '../../../icon/internal';
6
6
  import { Transition } from '../transition';
7
7
  import styles from './styles.css.js';
8
+ import testUtilsStyles from './test-classes/styles.css.js';
8
9
  // Mapping from CSS logical property direction to icon name. The icon component
9
10
  // already flips the left/right icons automatically based on RTL, so we don't
10
11
  // need to do anything special.
@@ -20,7 +21,7 @@ export default function DirectionButton({ direction, state, show, onClick }) {
20
21
  // prevents any accidental presses around the button from propagating to any
21
22
  // interactive elements behind the button.
22
23
  React.createElement("span", { ref: ref, className: clsx(styles['direction-button-wrapper'], styles[`direction-button-wrapper-${direction}`], transitionState === 'exited' && styles['direction-button-wrapper-hidden'], styles[`direction-button-wrapper-motion-${transitionState}`]) },
23
- React.createElement("span", { className: clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled']), onClick: state !== 'disabled' ? onClick : undefined,
24
+ React.createElement("span", { className: clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled'], testUtilsStyles[`direction-button-${direction}`], transitionState !== 'exited' && testUtilsStyles['direction-button-visible']), onClick: state !== 'disabled' ? onClick : undefined,
24
25
  // This prevents focus from being lost to `document.body` on
25
26
  // mouse/pointer press. This allows us to listen to onClick while
26
27
  // keeping this button pointer-accessible only.
@@ -1 +1 @@
1
- {"version":3,"file":"direction-button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,+EAA+E;AAC/E,6EAA6E;AAC7E,+BAA+B;AAC/B,MAAM,yBAAyB,GAAsC;IACnE,aAAa,EAAE,UAAU;IACzB,WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,aAAa;CAC5B,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAwB;IAC/F,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,CAAC,eAAe,EAAE,GAAG,EAAE,EAAE,CAAC;IACzB,4EAA4E;IAC5E,4EAA4E;IAC5E,0CAA0C;IAC1C,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,MAAM,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAC/C,eAAe,KAAK,QAAQ,IAAI,MAAM,CAAC,iCAAiC,CAAC,EACzE,MAAM,CAAC,mCAAmC,eAAe,EAAE,CAAC,CAC7D;QAED,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,KAAK,KAAK,UAAU,IAAI,MAAM,CAAC,2BAA2B,CAAC,CAAC,EACxG,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YACnD,4DAA4D;YAC5D,iEAAiE;YACjE,+CAA+C;YAC/C,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;YAE9C,oBAAC,YAAY,IAAC,IAAI,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CACpE,CACF,CACR,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { Transition } from '../transition';\nimport { Direction, DirectionState } from './interfaces';\n\nimport styles from './styles.css.js';\n\n// Mapping from CSS logical property direction to icon name. The icon component\n// already flips the left/right icons automatically based on RTL, so we don't\n// need to do anything special.\nconst ICON_LOGICAL_PROPERTY_MAP: Record<Direction, IconProps.Name> = {\n 'block-start': 'arrow-up',\n 'block-end': 'arrow-down',\n 'inline-start': 'arrow-left',\n 'inline-end': 'arrow-right',\n};\n\ninterface DirectionButtonProps {\n direction: Direction;\n state: DirectionState;\n onClick: React.MouseEventHandler;\n show: boolean;\n}\n\nexport default function DirectionButton({ direction, state, show, onClick }: DirectionButtonProps) {\n return (\n <Transition in={show}>\n {(transitionState, ref) => (\n // The wrapper exists to provide a padding around each direction button that\n // prevents any accidental presses around the button from propagating to any\n // interactive elements behind the button.\n <span\n ref={ref}\n className={clsx(\n styles['direction-button-wrapper'],\n styles[`direction-button-wrapper-${direction}`],\n transitionState === 'exited' && styles['direction-button-wrapper-hidden'],\n styles[`direction-button-wrapper-motion-${transitionState}`]\n )}\n >\n <span\n className={clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled'])}\n onClick={state !== 'disabled' ? onClick : undefined}\n // This prevents focus from being lost to `document.body` on\n // mouse/pointer press. This allows us to listen to onClick while\n // keeping this button pointer-accessible only.\n onPointerDown={event => event.preventDefault()}\n >\n <InternalIcon name={ICON_LOGICAL_PROPERTY_MAP[direction]} size=\"small\" />\n </span>\n </span>\n )}\n </Transition>\n );\n}\n"]}
1
+ {"version":3,"file":"direction-button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,+EAA+E;AAC/E,6EAA6E;AAC7E,+BAA+B;AAC/B,MAAM,yBAAyB,GAAsC;IACnE,aAAa,EAAE,UAAU;IACzB,WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,aAAa;CAC5B,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAwB;IAC/F,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,CAAC,eAAe,EAAE,GAAG,EAAE,EAAE,CAAC;IACzB,4EAA4E;IAC5E,4EAA4E;IAC5E,0CAA0C;IAC1C,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,MAAM,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAC/C,eAAe,KAAK,QAAQ,IAAI,MAAM,CAAC,iCAAiC,CAAC,EACzE,MAAM,CAAC,mCAAmC,eAAe,EAAE,CAAC,CAC7D;QAED,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,kBAAkB,CAAC,EAC1B,KAAK,KAAK,UAAU,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC3D,eAAe,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAChD,eAAe,KAAK,QAAQ,IAAI,eAAe,CAAC,0BAA0B,CAAC,CAC5E,EACD,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YACnD,4DAA4D;YAC5D,iEAAiE;YACjE,+CAA+C;YAC/C,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;YAE9C,oBAAC,YAAY,IAAC,IAAI,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CACpE,CACF,CACR,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { Transition } from '../transition';\nimport { Direction, DirectionState } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// Mapping from CSS logical property direction to icon name. The icon component\n// already flips the left/right icons automatically based on RTL, so we don't\n// need to do anything special.\nconst ICON_LOGICAL_PROPERTY_MAP: Record<Direction, IconProps.Name> = {\n 'block-start': 'arrow-up',\n 'block-end': 'arrow-down',\n 'inline-start': 'arrow-left',\n 'inline-end': 'arrow-right',\n};\n\ninterface DirectionButtonProps {\n direction: Direction;\n state: DirectionState;\n onClick: React.MouseEventHandler;\n show: boolean;\n}\n\nexport default function DirectionButton({ direction, state, show, onClick }: DirectionButtonProps) {\n return (\n <Transition in={show}>\n {(transitionState, ref) => (\n // The wrapper exists to provide a padding around each direction button that\n // prevents any accidental presses around the button from propagating to any\n // interactive elements behind the button.\n <span\n ref={ref}\n className={clsx(\n styles['direction-button-wrapper'],\n styles[`direction-button-wrapper-${direction}`],\n transitionState === 'exited' && styles['direction-button-wrapper-hidden'],\n styles[`direction-button-wrapper-motion-${transitionState}`]\n )}\n >\n <span\n className={clsx(\n styles['direction-button'],\n state === 'disabled' && styles['direction-button-disabled'],\n testUtilsStyles[`direction-button-${direction}`],\n transitionState !== 'exited' && testUtilsStyles['direction-button-visible']\n )}\n onClick={state !== 'disabled' ? onClick : undefined}\n // This prevents focus from being lost to `document.body` on\n // mouse/pointer press. This allows us to listen to onClick while\n // keeping this button pointer-accessible only.\n onPointerDown={event => event.preventDefault()}\n >\n <InternalIcon name={ICON_LOGICAL_PROPERTY_MAP[direction]} size=\"small\" />\n </span>\n </span>\n )}\n </Transition>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,GAC3B,EAAE,sBAAsB,eA8MxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,GAC3B,EAAE,sBAAsB,eAmNxB"}
@@ -108,8 +108,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
108
108
  setShowTooltip(false);
109
109
  };
110
110
  const onDragHandleKeyDown = event => {
111
- // For accessibility reasons, pressing escape should should always close
112
- // the floating controls.
111
+ // For accessibility reasons, pressing escape should always close the floating controls.
113
112
  if (event.key === 'Escape') {
114
113
  setShowButtons(false);
115
114
  }
@@ -117,7 +116,11 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
117
116
  // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode
118
117
  setShowButtons(prevshowButtons => !prevshowButtons);
119
118
  }
120
- else if (event.key !== 'Alt' && event.key !== 'Control' && event.key !== 'Meta' && event.key !== 'Shift') {
119
+ else if (event.key !== 'Alt' &&
120
+ event.key !== 'Control' &&
121
+ event.key !== 'Meta' &&
122
+ event.key !== 'Shift' &&
123
+ triggerMode !== 'keyboard-activate') {
121
124
  // Pressing any other key will display the focus-visible ring around the
122
125
  // drag handle if it's in focus, so we should also show the buttons now.
123
126
  setShowButtons(true);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\n\n// The amount of distance after pointer down that the cursor is allowed to\n// jitter for a subsequent mouseup to still register as a \"press\" instead of\n// a drag. A little allowance is needed for usability reasons, but this number\n// isn't set in stone.\nconst PRESS_DELTA_MAX = 3;\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n}: DragHandleWrapperProps) {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [showButtons, setShowButtons] = useState(initialShowButtons);\n\n const isPointerDown = useRef(false);\n const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n const didPointerDrag = useRef(false);\n\n // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n // on the handle wouldn't do anything.\n const isDisabled =\n !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n const onWrapperFocusIn: React.FocusEventHandler = event => {\n // The drag handle is focused when it's either tabbed to, or the pointer\n // is pressed on it. We exclude handling the pointer press in this handler,\n // since it could be the start of a drag event - the pointer stuff is\n // handled in the \"pointerup\" listener instead. In cases where focus is moved\n // to the button (by manually calling `.focus()`, the buttons should only appear)\n // if the action that triggered the focus move was the result of a keypress.\n if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowTooltip(false);\n if (triggerMode === 'focus') {\n setShowButtons(true);\n }\n }\n };\n\n const onWrapperFocusOut: React.FocusEventHandler = event => {\n // Close the directional buttons when the focus leaves the drag handle.\n // \"focusout\" is also triggered when the user leaves the current tab, but\n // since it'll be returned when they switch back anyway, we exclude that\n // case by checking for `document.hasFocus()`.\n if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowButtons(false);\n }\n };\n\n useEffect(() => {\n const controller = new AbortController();\n\n // See `PRESS_DELTA_MAX` above. We need to differentiate between a \"click\"\n // and a \"drag\" action. We can say a \"click\" happens when a \"pointerdown\"\n // is followed by a \"pointerup\" with no \"pointermove\" between the two.\n // However, it would be a poor usability experience if a \"click\" isn't\n // registered because, while pressing my mouse, I moved it by just one\n // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.\n document.addEventListener(\n 'pointermove',\n event => {\n if (\n isPointerDown.current &&\n initialPointerPosition.current &&\n (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||\n event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||\n event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||\n event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)\n ) {\n didPointerDrag.current = true;\n }\n },\n { signal: controller.signal }\n );\n\n // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n // can be called for both \"pointercancel\" and \"pointerup\" events.\n const resetPointerDownState = () => {\n isPointerDown.current = false;\n initialPointerPosition.current = undefined;\n };\n\n document.addEventListener(\n 'pointercancel',\n () => {\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n document.addEventListener(\n 'pointerup',\n () => {\n if (isPointerDown.current && !didPointerDrag.current) {\n // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n // Handle this as a \"click\" instead of a \"drag\".\n setShowButtons(true);\n }\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n return () => controller.abort();\n }, []);\n\n const onHandlePointerDown: React.PointerEventHandler = event => {\n // Tooltip behavior: the tooltip should appear on hover, but disappear when\n // the pointer starts dragging (having the tooltip get in the way while\n // you're trying to drag upwards is annoying). Additionally, the tooltip\n // shouldn't reappear when dragging ends, but only when the pointer leaves\n // the drag handle and comes back.\n\n isPointerDown.current = true;\n didPointerDrag.current = false;\n initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n setShowTooltip(false);\n };\n\n // Tooltip behavior: the tooltip should stay open when the cursor moves\n // from the drag handle into the tooltip content itself. This is why the\n // handler is set on the wrapper for both the drag handle and the tooltip.\n const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n if (!isPointerDown.current) {\n setShowTooltip(true);\n }\n };\n const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n setShowTooltip(false);\n };\n\n const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n // For accessibility reasons, pressing escape should should always close\n // the floating controls.\n if (event.key === 'Escape') {\n setShowButtons(false);\n } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n setShowButtons(prevshowButtons => !prevshowButtons);\n } else if (event.key !== 'Alt' && event.key !== 'Control' && event.key !== 'Meta' && event.key !== 'Shift') {\n // Pressing any other key will display the focus-visible ring around the\n // drag handle if it's in focus, so we should also show the buttons now.\n setShowButtons(true);\n }\n };\n\n const onInternalDirectionClick = (direction: Direction) => {\n // Move focus back to the wrapper on click. This prevents focus from staying\n // on an aria-hidden control, and allows future keyboard events to be handled\n // cleanly using the drag handle's own handlers.\n if (dragHandleRef.current) {\n getFirstFocusable(dragHandleRef.current)?.focus();\n }\n onDirectionClick?.(direction);\n };\n\n return (\n <div\n className={clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open'])}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n <div\n className={styles['drag-handle']}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {directions['block-start'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"block-start\"\n state={directions['block-start']}\n onClick={() => onInternalDirectionClick('block-start')}\n />\n )}\n {directions['block-end'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"block-end\"\n state={directions['block-end']}\n onClick={() => onInternalDirectionClick('block-end')}\n />\n )}\n {directions['inline-start'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"inline-start\"\n state={directions['inline-start']}\n onClick={() => onInternalDirectionClick('inline-start')}\n />\n )}\n {directions['inline-end'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"inline-end\"\n state={directions['inline-end']}\n onClick={() => onInternalDirectionClick('inline-end')}\n />\n )}\n </PortalOverlay>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\n\n// The amount of distance after pointer down that the cursor is allowed to\n// jitter for a subsequent mouseup to still register as a \"press\" instead of\n// a drag. A little allowance is needed for usability reasons, but this number\n// isn't set in stone.\nconst PRESS_DELTA_MAX = 3;\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n}: DragHandleWrapperProps) {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [showButtons, setShowButtons] = useState(initialShowButtons);\n\n const isPointerDown = useRef(false);\n const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n const didPointerDrag = useRef(false);\n\n // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n // on the handle wouldn't do anything.\n const isDisabled =\n !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n const onWrapperFocusIn: React.FocusEventHandler = event => {\n // The drag handle is focused when it's either tabbed to, or the pointer\n // is pressed on it. We exclude handling the pointer press in this handler,\n // since it could be the start of a drag event - the pointer stuff is\n // handled in the \"pointerup\" listener instead. In cases where focus is moved\n // to the button (by manually calling `.focus()`, the buttons should only appear)\n // if the action that triggered the focus move was the result of a keypress.\n if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowTooltip(false);\n if (triggerMode === 'focus') {\n setShowButtons(true);\n }\n }\n };\n\n const onWrapperFocusOut: React.FocusEventHandler = event => {\n // Close the directional buttons when the focus leaves the drag handle.\n // \"focusout\" is also triggered when the user leaves the current tab, but\n // since it'll be returned when they switch back anyway, we exclude that\n // case by checking for `document.hasFocus()`.\n if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowButtons(false);\n }\n };\n\n useEffect(() => {\n const controller = new AbortController();\n\n // See `PRESS_DELTA_MAX` above. We need to differentiate between a \"click\"\n // and a \"drag\" action. We can say a \"click\" happens when a \"pointerdown\"\n // is followed by a \"pointerup\" with no \"pointermove\" between the two.\n // However, it would be a poor usability experience if a \"click\" isn't\n // registered because, while pressing my mouse, I moved it by just one\n // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.\n document.addEventListener(\n 'pointermove',\n event => {\n if (\n isPointerDown.current &&\n initialPointerPosition.current &&\n (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||\n event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||\n event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||\n event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)\n ) {\n didPointerDrag.current = true;\n }\n },\n { signal: controller.signal }\n );\n\n // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n // can be called for both \"pointercancel\" and \"pointerup\" events.\n const resetPointerDownState = () => {\n isPointerDown.current = false;\n initialPointerPosition.current = undefined;\n };\n\n document.addEventListener(\n 'pointercancel',\n () => {\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n document.addEventListener(\n 'pointerup',\n () => {\n if (isPointerDown.current && !didPointerDrag.current) {\n // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n // Handle this as a \"click\" instead of a \"drag\".\n setShowButtons(true);\n }\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n return () => controller.abort();\n }, []);\n\n const onHandlePointerDown: React.PointerEventHandler = event => {\n // Tooltip behavior: the tooltip should appear on hover, but disappear when\n // the pointer starts dragging (having the tooltip get in the way while\n // you're trying to drag upwards is annoying). Additionally, the tooltip\n // shouldn't reappear when dragging ends, but only when the pointer leaves\n // the drag handle and comes back.\n\n isPointerDown.current = true;\n didPointerDrag.current = false;\n initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n setShowTooltip(false);\n };\n\n // Tooltip behavior: the tooltip should stay open when the cursor moves\n // from the drag handle into the tooltip content itself. This is why the\n // handler is set on the wrapper for both the drag handle and the tooltip.\n const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n if (!isPointerDown.current) {\n setShowTooltip(true);\n }\n };\n const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n setShowTooltip(false);\n };\n\n const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n // For accessibility reasons, pressing escape should always close the floating controls.\n if (event.key === 'Escape') {\n setShowButtons(false);\n } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n setShowButtons(prevshowButtons => !prevshowButtons);\n } else if (\n event.key !== 'Alt' &&\n event.key !== 'Control' &&\n event.key !== 'Meta' &&\n event.key !== 'Shift' &&\n triggerMode !== 'keyboard-activate'\n ) {\n // Pressing any other key will display the focus-visible ring around the\n // drag handle if it's in focus, so we should also show the buttons now.\n setShowButtons(true);\n }\n };\n\n const onInternalDirectionClick = (direction: Direction) => {\n // Move focus back to the wrapper on click. This prevents focus from staying\n // on an aria-hidden control, and allows future keyboard events to be handled\n // cleanly using the drag handle's own handlers.\n if (dragHandleRef.current) {\n getFirstFocusable(dragHandleRef.current)?.focus();\n }\n onDirectionClick?.(direction);\n };\n\n return (\n <div\n className={clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open'])}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n <div\n className={styles['drag-handle']}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {directions['block-start'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"block-start\"\n state={directions['block-start']}\n onClick={() => onInternalDirectionClick('block-start')}\n />\n )}\n {directions['block-end'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"block-end\"\n state={directions['block-end']}\n onClick={() => onInternalDirectionClick('block-end')}\n />\n )}\n {directions['inline-start'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"inline-start\"\n state={directions['inline-start']}\n onClick={() => onInternalDirectionClick('inline-start')}\n />\n )}\n {directions['inline-end'] && (\n <DirectionButton\n show={!isDisabled && showButtons}\n direction=\"inline-end\"\n state={directions['inline-end']}\n onClick={() => onInternalDirectionClick('inline-end')}\n />\n )}\n </PortalOverlay>\n </div>\n );\n}\n"]}
@@ -0,0 +1,12 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "root": "awsui_root_8k1rt_1i1h9_5",
5
+ "direction-button": "awsui_direction-button_8k1rt_1i1h9_9",
6
+ "direction-button-visible": "awsui_direction-button-visible_8k1rt_1i1h9_13",
7
+ "direction-button-block-start": "awsui_direction-button-block-start_8k1rt_1i1h9_17",
8
+ "direction-button-block-end": "awsui_direction-button-block-end_8k1rt_1i1h9_21",
9
+ "direction-button-inline-start": "awsui_direction-button-inline-start_8k1rt_1i1h9_25",
10
+ "direction-button-inline-end": "awsui_direction-button-inline-end_8k1rt_1i1h9_29"
11
+ };
12
+
@@ -0,0 +1,31 @@
1
+ /*
2
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ SPDX-License-Identifier: Apache-2.0
4
+ */
5
+ .awsui_root_8k1rt_1i1h9_5:not(#\9) {
6
+ /* used in test-utils */
7
+ }
8
+
9
+ .awsui_direction-button_8k1rt_1i1h9_9:not(#\9) {
10
+ /* used in test-utils */
11
+ }
12
+
13
+ .awsui_direction-button-visible_8k1rt_1i1h9_13:not(#\9) {
14
+ /* used in test-utils */
15
+ }
16
+
17
+ .awsui_direction-button-block-start_8k1rt_1i1h9_17:not(#\9) {
18
+ /* used in test-utils */
19
+ }
20
+
21
+ .awsui_direction-button-block-end_8k1rt_1i1h9_21:not(#\9) {
22
+ /* used in test-utils */
23
+ }
24
+
25
+ .awsui_direction-button-inline-start_8k1rt_1i1h9_25:not(#\9) {
26
+ /* used in test-utils */
27
+ }
28
+
29
+ .awsui_direction-button-inline-end_8k1rt_1i1h9_29:not(#\9) {
30
+ /* used in test-utils */
31
+ }
@@ -0,0 +1,13 @@
1
+
2
+ // es-module interop with Babel and Typescript
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ module.exports.default = {
5
+ "root": "awsui_root_8k1rt_1i1h9_5",
6
+ "direction-button": "awsui_direction-button_8k1rt_1i1h9_9",
7
+ "direction-button-visible": "awsui_direction-button-visible_8k1rt_1i1h9_13",
8
+ "direction-button-block-start": "awsui_direction-button-block-start_8k1rt_1i1h9_17",
9
+ "direction-button-block-end": "awsui_direction-button-block-end_8k1rt_1i1h9_21",
10
+ "direction-button-inline-start": "awsui_direction-button-inline-start_8k1rt_1i1h9_25",
11
+ "direction-button-inline-end": "awsui_direction-button-inline-end_8k1rt_1i1h9_29"
12
+ };
13
+
@@ -1,7 +1,9 @@
1
1
  import { RefObject } from 'react';
2
2
  export interface FilterRef {
3
+ filtered?: boolean;
3
4
  filterText?: string;
4
- countText?: string;
5
+ filteredBy?: string[];
6
+ filterCount?: number;
5
7
  }
6
8
  export interface PaginationRef {
7
9
  currentPageIndex?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"table-component-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/table-component-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC,cAAc,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3C;AAID,eAAO,MAAM,8BAA8B,8DAAkC,CAAC;AAE9E,eAAO,MAAM,yBAAyB,0CAGrC,CAAC"}
1
+ {"version":3,"file":"table-component-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/table-component-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC,cAAc,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3C;AAID,eAAO,MAAM,8BAA8B,8DAAkC,CAAC;AAE9E,eAAO,MAAM,yBAAyB,0CAGrC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"table-component-context.js","sourceRoot":"","sources":["../../../../src/internal/context/table-component-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAwB7D,MAAM,sBAAsB,GAAG,aAAa,CAAqC,IAAI,CAAC,CAAC;AAEvF,MAAM,CAAC,MAAM,8BAA8B,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAE9E,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,qBAAqB,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,OAAO,qBAAqB,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, RefObject, useContext } from 'react';\n\nexport interface FilterRef {\n filterText?: string;\n countText?: string;\n}\n\nexport interface PaginationRef {\n currentPageIndex?: number;\n totalPageCount?: number;\n openEnd?: boolean;\n}\n\nexport interface PreferencesRef {\n pageSize?: number;\n visibleColumns?: string[];\n}\n\ninterface TableComponentsContextProps {\n filterRef: RefObject<FilterRef>;\n paginationRef: RefObject<PaginationRef>;\n preferencesRef: RefObject<PreferencesRef>;\n}\n\nconst TableComponentsContext = createContext<TableComponentsContextProps | null>(null);\n\nexport const TableComponentsContextProvider = TableComponentsContext.Provider;\n\nexport const useTableComponentsContext = () => {\n const tableComponentContext = useContext(TableComponentsContext);\n return tableComponentContext;\n};\n"]}
1
+ {"version":3,"file":"table-component-context.js","sourceRoot":"","sources":["../../../../src/internal/context/table-component-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AA0B7D,MAAM,sBAAsB,GAAG,aAAa,CAAqC,IAAI,CAAC,CAAC;AAEvF,MAAM,CAAC,MAAM,8BAA8B,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAE9E,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,qBAAqB,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,OAAO,qBAAqB,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, RefObject, useContext } from 'react';\n\nexport interface FilterRef {\n filtered?: boolean;\n filterText?: string;\n filteredBy?: string[];\n filterCount?: number;\n}\n\nexport interface PaginationRef {\n currentPageIndex?: number;\n totalPageCount?: number;\n openEnd?: boolean;\n}\n\nexport interface PreferencesRef {\n pageSize?: number;\n visibleColumns?: string[];\n}\n\ninterface TableComponentsContextProps {\n filterRef: RefObject<FilterRef>;\n paginationRef: RefObject<PaginationRef>;\n preferencesRef: RefObject<PreferencesRef>;\n}\n\nconst TableComponentsContext = createContext<TableComponentsContextProps | null>(null);\n\nexport const TableComponentsContextProvider = TableComponentsContext.Provider;\n\nexport const useTableComponentsContext = () => {\n const tableComponentContext = useContext(TableComponentsContext);\n return tableComponentContext;\n};\n"]}
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (bb307484)";
2
+ export var PACKAGE_VERSION = "3.0.0 (11a30d39)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (bb307484)",
3
+ "PACKAGE_VERSION": "3.0.0 (11a30d39)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "ALWAYS_VISUAL_REFRESH": true
6
6
  }
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "bb307484e1d5ad91ebdcd1a5562b1e4efb1dcf89"
2
+ "commit": "11a30d391b00693816d85506f0cbf99555615076"
3
3
  }
package/package.json CHANGED
@@ -21,6 +21,8 @@
21
21
  "./internal/do-not-use/tooltip": "./internal/do-not-use/tooltip.js",
22
22
  "./internal/do-not-use/drag-handle": "./internal/do-not-use/drag-handle.js",
23
23
  "./internal/widget-exports": "./internal/widget-exports.js",
24
+ "./test-utils/dom/internal/drag-handle": "./test-utils/dom/internal/drag-handle.js",
25
+ "./test-utils/selectors/internal/drag-handle": "./test-utils/selectors/internal/drag-handle.js",
24
26
  "./test-utils/dom/internal/tooltip": "./test-utils/dom/internal/tooltip.js",
25
27
  "./test-utils/selectors/internal/tooltip": "./test-utils/selectors/internal/tooltip.js",
26
28
  "./test-utils/dom/internal/chart-tooltip": "./test-utils/dom/internal/chart-tooltip.js",
@@ -147,7 +149,7 @@
147
149
  "./internal/base-component/index.js",
148
150
  "./internal/base-component/styles.css.js"
149
151
  ],
150
- "version": "3.0.971",
152
+ "version": "3.0.973",
151
153
  "repository": {
152
154
  "type": "git",
153
155
  "url": "https://github.com/cloudscape-design/components.git"
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/property-filter/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAWrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,OAAO,EAWL,mBAAmB,EAIpB,MAAM,cAAc,CAAC;AAqBtB,QAAA,MAAM,sBAAsB;;;;;;;mFAgb3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/property-filter/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAYzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,OAAO,EAWL,mBAAmB,EAIpB,MAAM,cAAc,CAAC;AAsBtB,QAAA,MAAM,sBAAsB;;;;;;;mFA8c3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
@@ -1,12 +1,13 @@
1
1
  import { __rest } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
- import React, { useImperativeHandle, useRef, useState } from 'react';
4
+ import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
7
7
  import { InternalButton } from '../button/internal';
8
8
  import { getBaseProps } from '../internal/base-component';
9
9
  import TokenList from '../internal/components/token-list';
10
+ import { useTableComponentsContext } from '../internal/context/table-component-context';
10
11
  import { fireNonCancelableEvent } from '../internal/events';
11
12
  import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
12
13
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
@@ -21,6 +22,7 @@ import { PropertyEditorContentCustom, PropertyEditorContentEnum, PropertyEditorF
21
22
  import PropertyFilterAutosuggest from './property-filter-autosuggest';
22
23
  import { TokenButton } from './token';
23
24
  import { useLoadItems } from './use-load-items';
25
+ import { tokenGroupToTokens } from './utils';
24
26
  import tokenListStyles from '../internal/components/token-list/styles.css.js';
25
27
  import analyticsSelectors from './analytics-metadata/styles.css.js';
26
28
  import styles from './styles.css.js';
@@ -103,6 +105,32 @@ const PropertyFilterInternal = React.forwardRef((_a, ref) => {
103
105
  };
104
106
  return { internalProperties: [...propertyByKey.values()], internalOptions, internalQuery, internalFreeText };
105
107
  })();
108
+ const countValue = useMemo(() => {
109
+ if (!countText || typeof countText !== 'string') {
110
+ return undefined;
111
+ }
112
+ const m = countText.match(/\d+/);
113
+ return m ? parseInt(m[0]) : undefined;
114
+ }, [countText]);
115
+ const tableComponentContext = useTableComponentsContext();
116
+ useEffect(() => {
117
+ var _a;
118
+ if ((_a = tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.filterRef) === null || _a === void 0 ? void 0 : _a.current) {
119
+ const groupedTokens = tokenGroupToTokens(internalQuery.tokens);
120
+ const filteredBy = groupedTokens
121
+ .map(token => { var _a; return (_a = token.property) === null || _a === void 0 ? void 0 : _a.propertyKey; })
122
+ .filter((propertyKey) => typeof propertyKey === 'string');
123
+ tableComponentContext.filterRef.current.filterCount = countValue;
124
+ tableComponentContext.filterRef.current.filteredBy = filteredBy;
125
+ tableComponentContext.filterRef.current.filtered = groupedTokens.length > 0;
126
+ return () => {
127
+ var _a, _b, _c;
128
+ (_a = tableComponentContext.filterRef.current) === null || _a === void 0 ? true : delete _a.filterCount;
129
+ (_b = tableComponentContext.filterRef.current) === null || _b === void 0 ? true : delete _b.filteredBy;
130
+ (_c = tableComponentContext.filterRef.current) === null || _c === void 0 ? true : delete _c.filtered;
131
+ };
132
+ }
133
+ }, [tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.filterRef, countValue, internalQuery.tokens]);
106
134
  const { addToken, updateToken, updateOperation, removeToken, removeAllTokens } = getQueryActions({
107
135
  query: internalQuery,
108
136
  filteringOptions: internalOptions,