@cloudscape-design/components 3.0.981 → 3.0.983

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,iFA+CvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,iFAmDvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -6,9 +6,9 @@ import { getBaseProps } from '../../base-component';
6
6
  import DragHandleWrapper from '../drag-handle-wrapper';
7
7
  import DragHandleButton from './button';
8
8
  const InternalDragHandle = forwardRef((_a, ref) => {
9
- var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick, triggerMode, initialShowButtons } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick", "triggerMode", "initialShowButtons"]);
9
+ var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick, triggerMode, initialShowButtons, hideButtonsOnDrag = false, clickDragThreshold = 3 } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick", "triggerMode", "initialShowButtons", "hideButtonsOnDrag", "clickDragThreshold"]);
10
10
  const baseProps = getBaseProps(rest);
11
- return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode, initialShowButtons: initialShowButtons },
11
+ return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode, initialShowButtons: initialShowButtons, hideButtonsOnDrag: hideButtonsOnDrag, clickDragThreshold: clickDragThreshold },
12
12
  React.createElement(DragHandleButton, { ref: ref, className: baseProps.className, variant: variant, size: size, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedby: ariaDescribedby, ariaValue: ariaValue, disabled: disabled, onPointerDown: onPointerDown, onKeyDown: onKeyDown })));
13
13
  });
14
14
  export default InternalDragHandle;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAgBkB,EAClB,GAAuB,EACvB,EAAE;QAlBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,kBAAkB,OAEF,EADb,IAAI,cAfT,kNAgBC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB;QAEtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n (\n {\n variant,\n size,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n tooltipText,\n ariaValue,\n disabled,\n directions = {},\n onPointerDown,\n onKeyDown,\n onDirectionClick,\n triggerMode,\n initialShowButtons,\n ...rest\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const baseProps = getBaseProps(rest);\n\n return (\n <DragHandleWrapper\n directions={!disabled ? directions : {}}\n tooltipText={tooltipText}\n onDirectionClick={onDirectionClick}\n triggerMode={triggerMode}\n initialShowButtons={initialShowButtons}\n >\n <DragHandleButton\n ref={ref}\n className={baseProps.className}\n variant={variant}\n size={size}\n ariaLabel={ariaLabel}\n ariaLabelledBy={ariaLabelledBy}\n ariaDescribedby={ariaDescribedby}\n ariaValue={ariaValue}\n disabled={disabled}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n />\n </DragHandleWrapper>\n );\n }\n);\n\nexport default InternalDragHandle;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAkBkB,EAClB,GAAuB,EACvB,EAAE;QApBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,GAAG,CAAC,OAEN,EADb,IAAI,cAjBT,6PAkBC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB;QAEtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n (\n {\n variant,\n size,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n tooltipText,\n ariaValue,\n disabled,\n directions = {},\n onPointerDown,\n onKeyDown,\n onDirectionClick,\n triggerMode,\n initialShowButtons,\n hideButtonsOnDrag = false,\n clickDragThreshold = 3,\n ...rest\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const baseProps = getBaseProps(rest);\n\n return (\n <DragHandleWrapper\n directions={!disabled ? directions : {}}\n tooltipText={tooltipText}\n onDirectionClick={onDirectionClick}\n triggerMode={triggerMode}\n initialShowButtons={initialShowButtons}\n hideButtonsOnDrag={hideButtonsOnDrag}\n clickDragThreshold={clickDragThreshold}\n >\n <DragHandleButton\n ref={ref}\n className={baseProps.className}\n variant={variant}\n size={size}\n ariaLabel={ariaLabel}\n ariaLabelledBy={ariaLabelledBy}\n ariaDescribedby={ariaDescribedby}\n ariaValue={ariaValue}\n disabled={disabled}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n />\n </DragHandleWrapper>\n );\n }\n);\n\nexport default InternalDragHandle;\n"]}
@@ -16,6 +16,15 @@ export interface DragHandleProps {
16
16
  onDirectionClick?: (direction: DragHandleProps.Direction) => void;
17
17
  triggerMode?: TriggerMode;
18
18
  initialShowButtons?: boolean;
19
+ /**
20
+ * Hide the UAP buttons when dragging is active.
21
+ */
22
+ hideButtonsOnDrag?: boolean;
23
+ /**
24
+ * Max cursor movement (in pixels) that still counts as a press rather than
25
+ * a drag. Small threshold needed for usability.
26
+ */
27
+ clickDragThreshold?: number;
19
28
  }
20
29
  export declare namespace DragHandleProps {
21
30
  type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IAEvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IAEvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n Direction as WrapperDirection,\n DirectionState as WrapperDirectionState,\n TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n variant?: DragHandleProps.Variant;\n size?: DragHandleProps.Size;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n ariaDescribedby?: string;\n ariaValue?: DragHandleProps.AriaValue;\n disabled?: boolean;\n className?: string;\n onPointerDown?: React.PointerEventHandler;\n onKeyDown?: React.KeyboardEventHandler;\n\n tooltipText?: string;\n directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n triggerMode?: TriggerMode;\n initialShowButtons?: boolean;\n}\n\nexport namespace DragHandleProps {\n export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n export type Direction = WrapperDirection;\n export type DirectionState = WrapperDirectionState;\n\n export type Size = 'small' | 'normal';\n\n export interface AriaValue {\n valueMin: number;\n valueMax: number;\n valueNow: number;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n Direction as WrapperDirection,\n DirectionState as WrapperDirectionState,\n TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n variant?: DragHandleProps.Variant;\n size?: DragHandleProps.Size;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n ariaDescribedby?: string;\n ariaValue?: DragHandleProps.AriaValue;\n disabled?: boolean;\n className?: string;\n onPointerDown?: React.PointerEventHandler;\n onKeyDown?: React.KeyboardEventHandler;\n\n tooltipText?: string;\n directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n triggerMode?: TriggerMode;\n initialShowButtons?: boolean;\n /**\n * Hide the UAP buttons when dragging is active.\n */\n hideButtonsOnDrag?: boolean;\n /**\n * Max cursor movement (in pixels) that still counts as a press rather than\n * a drag. Small threshold needed for usability.\n */\n clickDragThreshold?: number;\n}\n\nexport namespace DragHandleProps {\n export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n export type Direction = WrapperDirection;\n export type DirectionState = WrapperDirectionState;\n\n export type Size = 'small' | 'normal';\n\n export interface AriaValue {\n valueMin: number;\n valueMax: number;\n valueNow: number;\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DragHandleWrapperProps } from './interfaces';
3
- export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, initialShowButtons, }: DragHandleWrapperProps): JSX.Element;
3
+ export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, initialShowButtons, hideButtonsOnDrag, clickDragThreshold, }: DragHandleWrapperProps): JSX.Element;
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -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,eAmNxB"}
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;AAKjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAoNxB"}
@@ -8,12 +8,7 @@ import Tooltip from '../tooltip';
8
8
  import DirectionButton from './direction-button';
9
9
  import PortalOverlay from './portal-overlay';
10
10
  import styles from './styles.css.js';
11
- // The amount of distance after pointer down that the cursor is allowed to
12
- // jitter for a subsequent mouseup to still register as a "press" instead of
13
- // a drag. A little allowance is needed for usability reasons, but this number
14
- // isn't set in stone.
15
- const PRESS_DELTA_MAX = 3;
16
- export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, }) {
11
+ export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, hideButtonsOnDrag, clickDragThreshold, }) {
17
12
  const wrapperRef = useRef(null);
18
13
  const dragHandleRef = useRef(null);
19
14
  const [showTooltip, setShowTooltip] = useState(false);
@@ -49,21 +44,22 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
49
44
  };
50
45
  useEffect(() => {
51
46
  const controller = new AbortController();
52
- // See `PRESS_DELTA_MAX` above. We need to differentiate between a "click"
53
- // and a "drag" action. We can say a "click" happens when a "pointerdown"
54
- // is followed by a "pointerup" with no "pointermove" between the two.
47
+ // We need to differentiate between a "click" and a "drag" action.
48
+ // We can say a "click" happens when a "pointerdown" is followed by
49
+ // a "pointerup" with no "pointermove" between the two.
55
50
  // However, it would be a poor usability experience if a "click" isn't
56
51
  // registered because, while pressing my mouse, I moved it by just one
57
52
  // pixel, making it a "drag" instead. So we allow the pointer to move by
58
- // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.
53
+ // `clickDragThreshold` pixels before setting `didPointerDrag` to true.
59
54
  document.addEventListener('pointermove', event => {
60
55
  if (isPointerDown.current &&
61
56
  initialPointerPosition.current &&
62
- (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||
63
- event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||
64
- event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||
65
- event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)) {
57
+ (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||
58
+ event.clientX < initialPointerPosition.current.x - clickDragThreshold ||
59
+ event.clientY > initialPointerPosition.current.y + clickDragThreshold ||
60
+ event.clientY < initialPointerPosition.current.y - clickDragThreshold)) {
66
61
  didPointerDrag.current = true;
62
+ hideButtonsOnDrag && setShowButtons(false);
67
63
  }
68
64
  }, { signal: controller.signal });
69
65
  // Shared behavior when a "pointerdown" state ends. This is shared so it
@@ -84,7 +80,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
84
80
  resetPointerDownState();
85
81
  }, { signal: controller.signal });
86
82
  return () => controller.abort();
87
- }, []);
83
+ }, [clickDragThreshold, hideButtonsOnDrag]);
88
84
  const onHandlePointerDown = event => {
89
85
  // Tooltip behavior: the tooltip should appear on hover, but disappear when
90
86
  // the pointer starts dragging (having the tooltip get in the way while
@@ -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 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"]}
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\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n hideButtonsOnDrag,\n clickDragThreshold,\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 // We need to differentiate between a \"click\" and a \"drag\" action.\n // We can say a \"click\" happens when a \"pointerdown\" is followed by\n // 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 // `clickDragThreshold` 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 + clickDragThreshold ||\n event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n ) {\n didPointerDrag.current = true;\n hideButtonsOnDrag && setShowButtons(false);\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 }, [clickDragThreshold, hideButtonsOnDrag]);\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"]}
@@ -9,5 +9,7 @@ export interface DragHandleWrapperProps {
9
9
  children: React.ReactNode;
10
10
  triggerMode?: TriggerMode;
11
11
  initialShowButtons?: boolean;
12
+ hideButtonsOnDrag: boolean;
13
+ clickDragThreshold: number;
12
14
  }
13
15
  //# sourceMappingURL=interfaces.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;CAC5B"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate';\n\nexport interface DragHandleWrapperProps {\n directions: Partial<Record<Direction, DirectionState>>;\n onDirectionClick?: (direction: Direction) => void;\n tooltipText?: string;\n children: React.ReactNode;\n triggerMode?: TriggerMode;\n initialShowButtons?: boolean;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate';\n\nexport interface DragHandleWrapperProps {\n directions: Partial<Record<Direction, DirectionState>>;\n onDirectionClick?: (direction: Direction) => void;\n tooltipText?: string;\n children: React.ReactNode;\n triggerMode?: TriggerMode;\n initialShowButtons?: boolean;\n hideButtonsOnDrag: boolean;\n clickDragThreshold: number;\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (4efc6d54)";
2
+ export var PACKAGE_VERSION = "3.0.0 (4fcfe744)";
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 (4efc6d54)",
3
+ "PACKAGE_VERSION": "3.0.0 (4fcfe744)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "ALWAYS_VISUAL_REFRESH": true
6
6
  }
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "4efc6d5426431a9f95b76b31fe29e6f760edc71a"
2
+ "commit": "4fcfe74493cb4252e99e0493cf9d9dca9d813f3b"
3
3
  }
package/package.json CHANGED
@@ -149,7 +149,7 @@
149
149
  "./internal/base-component/index.js",
150
150
  "./internal/base-component/styles.css.js"
151
151
  ],
152
- "version": "3.0.981",
152
+ "version": "3.0.983",
153
153
  "repository": {
154
154
  "type": "git",
155
155
  "url": "https://github.com/cloudscape-design/components.git"