npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1207 → 3.0.1209 - Mend

@cloudscape-design/components-themeable 3.0.1207 → 3.0.1209

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 (18) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "40696d3d8f9e73a2f28c21d3f11bcb9960e4877e"
+  "commit": "8c20e1c8debdd2cf0df0222ee1f5d07bb70b25d6"
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "40696d3d";
+    $awsui-commit-hash: "8c20e1c8";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-4hh3rt;
 $minContentWidth: --awsui-min-content-width-4hh3rt;

package/lib/internal/template/date-range-picker/calendar/range-inputs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"range-inputs.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAQ,EACR,eAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,gBAAgB,~~eAqFlB~~"}
1	+ {"version":3,"file":"range-inputs.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAQ,EACR,eAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,gBAAgB,eA0FlB"}

package/lib/internal/template/date-range-picker/calendar/range-inputs.js CHANGED Viewed

@@ -25,7 +25,12 @@ export default function RangeInputs({ startDate, onChangeStartDate, startTime, o
             ? i18nDatePlaceholder.split(separator).slice(0, 2).join(separator)
             : i18nDatePlaceholder
         : defaultDateInputPlaceholder;
-    const timePlaceholder = i18n('i18nStrings.timePlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.timePlaceholder) || timeInputFormat;
+    const i18nTimePlaceholder = i18n('i18nStrings.timePlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.timePlaceholder);
+    // Derive time placeholder based on timeInputFormat: hh:mm:ss → 3 parts, hh:mm → 2 parts, hh → 1 part
+    const timeFormatParts = timeInputFormat.split(':').length;
+    const timePlaceholder = i18nTimePlaceholder
+        ? i18nTimePlaceholder.split(':').slice(0, timeFormatParts).join(':')
+        : timeInputFormat;
     const i18nProvided = provideI18N(i18nStrings, isMonthPicker, dateOnly, isIso);
     const i18nKey = generateI18NKey(isMonthPicker, dateOnly, isIso);
     const i18nFallbackKey = generateI18NFallbackKey(isMonthPicker, dateOnly);

package/lib/internal/template/date-range-picker/calendar/range-inputs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"range-inputs.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAQ,EACR,eAAe,EACf,eAAe,EACf,WAAW,GACM;IACjB,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,WAAW,KAAK,OAAO,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC;IAClD,MAAM,KAAK,GAAG,eAAe,KAAK,KAAK,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACpC,MAAM,2BAA2B,GAAG,OAAO,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,EAAE,CAAC;IACjG,MAAM,mBAAmB,GAAG,KAAK;QAC/B,CAAC,CAAC,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC;QACzE,CAAC,CAAC,IAAI,CAAC,oCAAoC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sBAAsB,CAAC,CAAC;IACpF,oGAAoG;IACpG,MAAM,eAAe,GAAG,mBAAmB;QACzC,CAAC,CAAC,aAAa;YACb,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;YAClE,CAAC,CAAC,mBAAmB;QACvB,CAAC,CAAC,2BAA2B,CAAC;IAChC,MAAM,~~eAAe~~,GAAG,IAAI,CAAC,6BAA6B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,CAAC,IAAI,eAAe,CAAC;~~IAC7G~~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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 clsx from 'clsx';\n\nimport InternalDateInput from '../../date-input/internal';\nimport InternalFormField from '../../form-field/internal';\nimport { useInternalI18n } from '../../i18n/context.js';\nimport InternalTimeInput from '../../time-input/internal';\nimport { RangeInputsProps } from './interfaces';\nimport { generateI18NFallbackKey, generateI18NKey, provideI18N } from './utils';\n\nimport styles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function RangeInputs({\n startDate,\n onChangeStartDate,\n startTime,\n onChangeStartTime,\n endDate,\n onChangeEndDate,\n endTime,\n onChangeEndTime,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n dateInputFormat,\n granularity,\n}: RangeInputsProps) {\n const i18n = useInternalI18n('date-range-picker');\n const isMonthPicker = granularity === 'month';\n const showTimeInput = !dateOnly && !isMonthPicker;\n const isIso = dateInputFormat === 'iso';\n const separator = isIso ? '-' : '/';\n const defaultDateInputPlaceholder = `YYYY${separator}MM${isMonthPicker ? '' : `${separator}DD`}`;\n const i18nDatePlaceholder = isIso\n ? i18n('i18nStrings.isoDatePlaceholder', i18nStrings?.isoDatePlaceholder)\n : i18n('i18nStrings.slashedDatePlaceholder', i18nStrings?.slashedDatePlaceholder);\n // For month picker, derive the month placeholder by removing the day part from the date placeholder\n const datePlaceholder = i18nDatePlaceholder\n ? isMonthPicker\n ? i18nDatePlaceholder.split(separator).slice(0, 2).join(separator)\n : i18nDatePlaceholder\n : defaultDateInputPlaceholder;\n const ~~timePlaceholder~~ = i18n('i18nStrings.timePlaceholder', i18nStrings?.timePlaceholder) \|\| timeInputFormat;\n const i18nProvided = provideI18N(i18nStrings!, isMonthPicker, dateOnly, isIso);\n const i18nKey = generateI18NKey(isMonthPicker, dateOnly, isIso);\n const i18nFallbackKey = generateI18NFallbackKey(isMonthPicker, dateOnly);\n return (\n <InternalFormField constraintText={i18n(i18nKey, i18nProvided) \|\| i18n(i18nFallbackKey, i18nProvided)}>\n <div className={styles['date-and-time-container']}>\n <div className={styles['date-and-time-wrapper']}>\n <InternalFormField\n stretch={true}\n label={i18n(\n isMonthPicker ? 'i18nStrings.startMonthLabel' : 'i18nStrings.startDateLabel',\n isMonthPicker ? i18nStrings?.startMonthLabel : i18nStrings?.startDateLabel\n )}\n >\n <InternalDateInput\n value={startDate}\n className={clsx(testutilStyles['start-date-input'], isMonthPicker && testutilStyles['start-month-input'])}\n onChange={event => onChangeStartDate(event.detail.value)}\n format={dateInputFormat}\n placeholder={datePlaceholder}\n granularity={granularity}\n />\n </InternalFormField>\n {showTimeInput && (\n <InternalFormField stretch={true} label={i18n('i18nStrings.startTimeLabel', i18nStrings?.startTimeLabel)}>\n <InternalTimeInput\n value={startTime}\n onChange={event => onChangeStartTime(event.detail.value)}\n format={timeInputFormat}\n placeholder={timePlaceholder}\n className={testutilStyles['start-time-input']}\n />\n </InternalFormField>\n )}\n </div>\n\n <div className={styles['date-and-time-wrapper']}>\n <InternalFormField\n stretch={true}\n label={i18n(\n isMonthPicker ? 'i18nStrings.endMonthLabel' : 'i18nStrings.endDateLabel',\n isMonthPicker ? i18nStrings?.endMonthLabel : i18nStrings?.endDateLabel\n )}\n >\n <InternalDateInput\n value={endDate}\n className={clsx(testutilStyles['end-date-input'], isMonthPicker && testutilStyles['end-month-picker'])}\n onChange={event => onChangeEndDate(event.detail.value)}\n format={dateInputFormat}\n placeholder={datePlaceholder}\n granularity={granularity}\n />\n </InternalFormField>\n {showTimeInput && (\n <InternalFormField label={i18n('i18nStrings.endTimeLabel', i18nStrings?.endTimeLabel)} stretch={true}>\n <InternalTimeInput\n value={endTime}\n onChange={event => onChangeEndTime(event.detail.value)}\n format={timeInputFormat}\n placeholder={timePlaceholder}\n className={testutilStyles['end-time-input']}\n />\n </InternalFormField>\n )}\n </div>\n </div>\n </InternalFormField>\n );\n}\n"]}
1	+ {"version":3,"file":"range-inputs.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.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 from 'react';\nimport clsx from 'clsx';\n\nimport InternalDateInput from '../../date-input/internal';\nimport InternalFormField from '../../form-field/internal';\nimport { useInternalI18n } from '../../i18n/context.js';\nimport InternalTimeInput from '../../time-input/internal';\nimport { RangeInputsProps } from './interfaces';\nimport { generateI18NFallbackKey, generateI18NKey, provideI18N } from './utils';\n\nimport styles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function RangeInputs({\n startDate,\n onChangeStartDate,\n startTime,\n onChangeStartTime,\n endDate,\n onChangeEndDate,\n endTime,\n onChangeEndTime,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n dateInputFormat,\n granularity,\n}: RangeInputsProps) {\n const i18n = useInternalI18n('date-range-picker');\n const isMonthPicker = granularity === 'month';\n const showTimeInput = !dateOnly && !isMonthPicker;\n const isIso = dateInputFormat === 'iso';\n const separator = isIso ? '-' : '/';\n const defaultDateInputPlaceholder = `YYYY${separator}MM${isMonthPicker ? '' : `${separator}DD`}`;\n const i18nDatePlaceholder = isIso\n ? i18n('i18nStrings.isoDatePlaceholder', i18nStrings?.isoDatePlaceholder)\n : i18n('i18nStrings.slashedDatePlaceholder', i18nStrings?.slashedDatePlaceholder);\n // For month picker, derive the month placeholder by removing the day part from the date placeholder\n const datePlaceholder = i18nDatePlaceholder\n ? isMonthPicker\n ? i18nDatePlaceholder.split(separator).slice(0, 2).join(separator)\n : i18nDatePlaceholder\n : defaultDateInputPlaceholder;\n const i18nTimePlaceholder = i18n('i18nStrings.timePlaceholder', i18nStrings?.timePlaceholder);\n // Derive time placeholder based on timeInputFormat: hh:mm:ss → 3 parts, hh:mm → 2 parts, hh → 1 part\n const timeFormatParts = timeInputFormat.split(':').length;\n const timePlaceholder = i18nTimePlaceholder\n ? i18nTimePlaceholder.split(':').slice(0, timeFormatParts).join(':')\n : timeInputFormat;\n const i18nProvided = provideI18N(i18nStrings!, isMonthPicker, dateOnly, isIso);\n const i18nKey = generateI18NKey(isMonthPicker, dateOnly, isIso);\n const i18nFallbackKey = generateI18NFallbackKey(isMonthPicker, dateOnly);\n return (\n <InternalFormField constraintText={i18n(i18nKey, i18nProvided) \|\| i18n(i18nFallbackKey, i18nProvided)}>\n <div className={styles['date-and-time-container']}>\n <div className={styles['date-and-time-wrapper']}>\n <InternalFormField\n stretch={true}\n label={i18n(\n isMonthPicker ? 'i18nStrings.startMonthLabel' : 'i18nStrings.startDateLabel',\n isMonthPicker ? i18nStrings?.startMonthLabel : i18nStrings?.startDateLabel\n )}\n >\n <InternalDateInput\n value={startDate}\n className={clsx(testutilStyles['start-date-input'], isMonthPicker && testutilStyles['start-month-input'])}\n onChange={event => onChangeStartDate(event.detail.value)}\n format={dateInputFormat}\n placeholder={datePlaceholder}\n granularity={granularity}\n />\n </InternalFormField>\n {showTimeInput && (\n <InternalFormField stretch={true} label={i18n('i18nStrings.startTimeLabel', i18nStrings?.startTimeLabel)}>\n <InternalTimeInput\n value={startTime}\n onChange={event => onChangeStartTime(event.detail.value)}\n format={timeInputFormat}\n placeholder={timePlaceholder}\n className={testutilStyles['start-time-input']}\n />\n </InternalFormField>\n )}\n </div>\n\n <div className={styles['date-and-time-wrapper']}>\n <InternalFormField\n stretch={true}\n label={i18n(\n isMonthPicker ? 'i18nStrings.endMonthLabel' : 'i18nStrings.endDateLabel',\n isMonthPicker ? i18nStrings?.endMonthLabel : i18nStrings?.endDateLabel\n )}\n >\n <InternalDateInput\n value={endDate}\n className={clsx(testutilStyles['end-date-input'], isMonthPicker && testutilStyles['end-month-picker'])}\n onChange={event => onChangeEndDate(event.detail.value)}\n format={dateInputFormat}\n placeholder={datePlaceholder}\n granularity={granularity}\n />\n </InternalFormField>\n {showTimeInput && (\n <InternalFormField label={i18n('i18nStrings.endTimeLabel', i18nStrings?.endTimeLabel)} stretch={true}>\n <InternalTimeInput\n value={endTime}\n onChange={event => onChangeEndTime(event.detail.value)}\n format={timeInputFormat}\n placeholder={timePlaceholder}\n className={testutilStyles['end-time-input']}\n />\n </InternalFormField>\n )}\n </div>\n </div>\n </InternalFormField>\n );\n}\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED Viewed

@@ -3813,5 +3813,5 @@ body {
   }
 }
 :root {
-  --awsui-version-info-40696d3d: true;
+  --awsui-version-info-8c20e1c8: true;
 }

package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map CHANGED Viewed

	@@ -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;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,~~eA+NxB~~"}
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;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAkPxB"}

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
@@ -134,8 +134,18 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
     const [forcedPosition, setForcedPosition] = useState(null);
     const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;
     const visibleDirections = directionsOrder.filter(dir => directions[dir]);
-    useLayoutEffect(() => {
-        if (showButtons && dragHandleRef.current) {
+    // Continuously monitor position while buttons are shown to handle CSS transitions/animations.
+    // The position needs to be recalculated as the element may animate into its final position.
+    useEffect(() => {
+        if (!showButtons || !dragHandleRef.current) {
+            setForcedPosition(null);
+            return;
+        }
+        let frameId;
+        const checkPosition = () => {
+            if (!dragHandleRef.current) {
+                return;
+            }
             const rect = getLogicalBoundingClientRect(dragHandleRef.current);
             const conflicts = {
                 'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,
@@ -150,7 +160,12 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
             else {
                 setForcedPosition(null);
             }
-        }
+            frameId = requestAnimationFrame(checkPosition);
+        };
+        frameId = requestAnimationFrame(checkPosition);
+        return () => {
+            cancelAnimationFrame(frameId);
+        };
     }, [showButtons, visibleDirections]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: clsx(testUtilsStyles.root, styles.contents), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,+FAA+F;AAC/F,MAAM,4BAA4B,GAAG,EAAE,CAAC;AACxC,uEAAuE;AACvE,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,gBAAgB,GAAgB,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAEjG,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,GAAG,OAAO,EACrB,kBAAkB,GAAG,KAAK,EAC1B,qBAAqB,GAAG,KAAK,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACK;IACvB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAE3F,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,sBAAsB,GAAG,MAAM,EAAwC,CAAC;IAC9E,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAErC,2EAA2E;IAC3E,sCAAsC;IACtC,MAAM,UAAU,GACd,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAA4B,KAAK,CAAC,EAAE;QACxD,wEAAwE;QACxE,2EAA2E;QAC3E,qEAAqE;QACrE,6EAA6E;QAC7E,iFAAiF;QACjF,4EAA4E;QAC5E,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACtG,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;gBAC5B,0BAA0B,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA4B,KAAK,CAAC,EAAE;QACzD,uEAAuE;QACvE,0EAA0E;QAC1E,wEAAwE;QACxE,8CAA8C;QAC9C,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YAClF,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,kEAAkE;QAClE,mEAAmE;QACnE,uDAAuD;QACvD,sEAAsE;QACtE,sEAAsE;QACtE,wEAAwE;QACxE,uEAAuE;QACvE,QAAQ,CAAC,gBAAgB,CACvB,aAAa,EACb,KAAK,CAAC,EAAE;YACN,IACE,aAAa,CAAC,OAAO;gBACrB,sBAAsB,CAAC,OAAO;gBAC9B,CAAC,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACpE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACrE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACrE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB,CAAC,EACxE,CAAC;gBACD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9B,IAAI,iBAAiB,EAAE,CAAC;oBACtB,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC;QACH,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,wEAAwE;QACxE,iEAAiE;QACjE,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC7C,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,eAAe,EACf,GAAG,EAAE;YACH,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,WAAW,EACX,GAAG,EAAE;YACH,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;gBACrD,qEAAqE;gBACrE,gDAAgD;gBAChD,0BAA0B,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;YACD,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,MAAM,mBAAmB,GAA8B,KAAK,CAAC,EAAE;QAC7D,2EAA2E;QAC3E,uEAAuE;QACvE,wEAAwE;QACxE,0EAA0E;QAC1E,kCAAkC;QAElC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,sBAAsB,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACxE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,uEAAuE;IACvE,wEAAwE;IACxE,0EAA0E;IAC1E,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAA+B,KAAK,CAAC,EAAE;QAC9D,wFAAwF;QACxF,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;aAAM,IAAI,WAAW,KAAK,mBAAmB,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YAC/F,mFAAmF;YACnF,0BAA0B,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;QAClE,CAAC;aAAM,IACL,KAAK,CAAC,GAAG,KAAK,KAAK;YACnB,KAAK,CAAC,GAAG,KAAK,SAAS;YACvB,KAAK,CAAC,GAAG,KAAK,MAAM;YACpB,KAAK,CAAC,GAAG,KAAK,OAAO;YACrB,WAAW,KAAK,OAAO,EACvB,CAAC;YACD,wEAAwE;YACxE,wEAAwE;YACxE,0BAA0B,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAEnG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACpF,MAAM,eAAe,GAAG,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACzG,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;IAEzE,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACzC,MAAM,IAAI,GAAG,4BAA4B,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,SAAS,GAAG;gBAChB,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,4BAA4B;gBAClE,WAAW,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,4BAA4B;gBACnF,cAAc,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B;gBACpE,YAAY,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,GAAG,4BAA4B;aACrF,CAAC;YACF,IAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;gBAC9D,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,GAAG,iBAAiB,CAAC,MAAM,GAAG,kBAAkB,CAAC;gBACjG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,OAAO,CACL;QAGE,6BACE,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,EACtD,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,iBAAiB;YAGzB,6BACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,cAAc,EAAE,0BAA0B,EAC1C,cAAc,EAAE,0BAA0B;gBAI1C,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC,EACxD,GAAG,EAAE,aAAa,EAClB,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,mBAAmB,IAE7B,QAAQ,CACL;gBAEL,CAAC,UAAU,IAAI,CAAC,WAAW,IAAI,WAAW,IAAI,WAAW,IAAI;gBAC5D,4EAA4E;gBAC5E,0EAA0E;gBAC1E,oBAAC,OAAO,IAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GAAI,CACjG,CACG,CACF;QAEN,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,WAAW,IAC1D,iBAAiB,CAAC,GAAG,CACpB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CACnB,UAAU,CAAC,SAAS,CAAC,IAAI,CACvB,oBAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,SAAS,CAAC,EAC5C,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,KAAK,GAClB,CACH,CACJ,CACa,CACf,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\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';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n controlledShowButtons = false,\n wrapperClassName,\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 [uncontrolledShowButtons, setUncontrolledShowButtons] = 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 setUncontrolledShowButtons(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 switches to another 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 setUncontrolledShowButtons(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 if (hideButtonsOnDrag) {\n setUncontrolledShowButtons(false);\n }\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 setUncontrolledShowButtons(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 setUncontrolledShowButtons(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 setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n } else if (\n event.key !== 'Alt' &&\n event.key !== 'Control' &&\n event.key !== 'Meta' &&\n event.key !== 'Shift' &&\n triggerMode === 'focus'\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 setUncontrolledShowButtons(true);\n }\n };\n\n const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n const [forcedPosition, setForcedPosition] = useState<null \| 'top' \| 'bottom'>(null);\n const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n useLayoutEffect(() => {\n if (showButtons && dragHandleRef.current) {\n const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n const conflicts = {\n 'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n 'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n 'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n 'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n };\n if (visibleDirections.some(direction => conflicts[direction])) {\n const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n } else {\n setForcedPosition(null);\n }\n }\n }, [showButtons, visibleDirections]);\n\n return (\n <>\n {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. /}\n <div\n className={clsx(testUtilsStyles.root, styles.contents)}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n {/ Wrapper for pointer detection. Determines whether or not the tooltip should be shown. /}\n <div\n className={styles.contents}\n onPointerEnter={onTooltipGroupPointerEnter}\n onPointerLeave={onTooltipGroupPointerLeave}\n >\n {/ Position tracking wrapper used to position the tooltip and drag buttons accurately.\n Its dimensions must match the inner button's dimensions. */}\n <div\n className={clsx(styles['drag-handle'], wrapperClassName)}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n // Rendered in a portal but pointerenter/pointerleave events still propagate\n // up the React DOM tree, which is why it's placed in this nested context.\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {visibleDirections.map(\n (direction, index) =>\n directions[direction] && (\n <DirectionButton\n key={direction}\n show={!isDisabled && showButtons}\n direction={direction}\n state={directions[direction]}\n onClick={() => onDirectionClick?.(direction)}\n forcedPosition={forcedPosition}\n forcedIndex={index}\n />\n )\n )}\n </PortalOverlay>\n </>\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';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\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';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n controlledShowButtons = false,\n wrapperClassName,\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 [uncontrolledShowButtons, setUncontrolledShowButtons] = 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 setUncontrolledShowButtons(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 switches to another 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 setUncontrolledShowButtons(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 if (hideButtonsOnDrag) {\n setUncontrolledShowButtons(false);\n }\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 setUncontrolledShowButtons(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 setUncontrolledShowButtons(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 setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n } else if (\n event.key !== 'Alt' &&\n event.key !== 'Control' &&\n event.key !== 'Meta' &&\n event.key !== 'Shift' &&\n triggerMode === 'focus'\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 setUncontrolledShowButtons(true);\n }\n };\n\n const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n const [forcedPosition, setForcedPosition] = useState<null \| 'top' \| 'bottom'>(null);\n const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n // The position needs to be recalculated as the element may animate into its final position.\n useEffect(() => {\n if (!showButtons \|\| !dragHandleRef.current) {\n setForcedPosition(null);\n return;\n }\n\n let frameId: number;\n\n const checkPosition = () => {\n if (!dragHandleRef.current) {\n return;\n }\n const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n const conflicts = {\n 'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n 'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n 'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n 'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n };\n if (visibleDirections.some(direction => conflicts[direction])) {\n const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n } else {\n setForcedPosition(null);\n }\n frameId = requestAnimationFrame(checkPosition);\n };\n\n frameId = requestAnimationFrame(checkPosition);\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [showButtons, visibleDirections]);\n\n return (\n <>\n {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. /}\n <div\n className={clsx(testUtilsStyles.root, styles.contents)}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n {/ Wrapper for pointer detection. Determines whether or not the tooltip should be shown. /}\n <div\n className={styles.contents}\n onPointerEnter={onTooltipGroupPointerEnter}\n onPointerLeave={onTooltipGroupPointerLeave}\n >\n {/ Position tracking wrapper used to position the tooltip and drag buttons accurately.\n Its dimensions must match the inner button's dimensions. */}\n <div\n className={clsx(styles['drag-handle'], wrapperClassName)}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n // Rendered in a portal but pointerenter/pointerleave events still propagate\n // up the React DOM tree, which is why it's placed in this nested context.\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {visibleDirections.map(\n (direction, index) =>\n directions[direction] && (\n <DirectionButton\n key={direction}\n show={!isDisabled && showButtons}\n direction={direction}\n state={directions[direction]}\n onClick={() => onDirectionClick?.(direction)}\n forcedPosition={forcedPosition}\n forcedIndex={index}\n />\n )\n )}\n </PortalOverlay>\n </>\n );\n}\n"]}

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (40696d3d)";
-export var GIT_SHA = "40696d3d";
+export var PACKAGE_VERSION = "3.0.0 (8c20e1c8)";
+export var GIT_SHA = "8c20e1c8";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (40696d3d)",
-  "GIT_SHA": "40696d3d",
+  "PACKAGE_VERSION": "3.0.0 (8c20e1c8)",
+  "GIT_SHA": "8c20e1c8",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/test-utils/dom/button-dropdown/index.d.ts CHANGED Viewed

@@ -10,8 +10,13 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
      * Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find the disabled or non-disabled item.
      */
-    findItemById(id: string): ElementWrapper | null;
+    findItemById(id: string, options?: {
+        disabled?: boolean;
+    }): ElementWrapper | null;
     /**
      * Finds `checked` value of item in the open dropdown by item id. Returns null if there is no open dropdown or the item is not a checkbox item.
      *
@@ -34,8 +39,13 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
      * Finds all the items in the open dropdown. Returns empty array if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find all disabled or non-disabled items.
      */
-    findItems(): Array<ElementWrapper>;
+    findItems(options?: {
+        disabled?: boolean;
+    }): Array<ElementWrapper>;
     /**
      * Finds the disabled reason tooltip for a dropdown item. Returns null if no disabled item with `disabledReason` is highlighted.
      */

package/lib/internal/template/test-utils/dom/button-dropdown/index.js CHANGED Viewed

@@ -16,6 +16,16 @@ const styles_selectors_js_2 = require("../../../button-dropdown/category-element
 const styles_selectors_js_3 = require("../../../button-dropdown/item-element/styles.selectors.js");
 const styles_selectors_js_4 = require("../../../button-dropdown/styles.selectors.js");
 const styles_selectors_js_5 = require("../../../internal/components/dropdown/styles.selectors.js");
+function getItemSelector({ disabled }) {
+    let selector = `.${styles_selectors_js_3.default['item-element']}`;
+    if (disabled === true) {
+        selector += `.${styles_selectors_js_3.default.disabled}`;
+    }
+    else if (disabled === false) {
+        selector += `:not(.${styles_selectors_js_3.default.disabled})`;
+    }
+    return selector;
+}
 class ButtonDropdownWrapper extends dom_1.ComponentWrapper {
     findNativeButton() {
         return this.findByClassName(styles_selectors_js_4.default['dropdown-trigger']).findByClassName(styles_selectors_js_4.default['test-utils-button-trigger']);
@@ -35,10 +45,13 @@ class ButtonDropdownWrapper extends dom_1.ComponentWrapper {
      * Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find the disabled or non-disabled item.
      */
-    findItemById(id) {
+    findItemById(id, options = {}) {
         var _a;
-        const itemSelector = `.${styles_selectors_js_3.default['item-element']}[data-testid="${id}"]`;
+        const itemSelector = `${getItemSelector(options)}[data-testid="${id}"]`;
         return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.find(itemSelector)) || this.find(itemSelector);
     }
     /**
@@ -83,10 +96,14 @@ class ButtonDropdownWrapper extends dom_1.ComponentWrapper {
      * Finds all the items in the open dropdown. Returns empty array if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find all disabled or non-disabled items.
      */
-    findItems() {
+    findItems(options = {}) {
         var _a;
-        return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.findAll(`.${styles_selectors_js_3.default['item-element']}`)) || [];
+        const selector = getItemSelector(options);
+        return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.findAll(selector)) || [];
     }
     /**
      * Finds the disabled reason tooltip for a dropdown item. Returns null if no disabled item with `disabledReason` is highlighted.

package/lib/internal/template/test-utils/dom/button-dropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/button-dropdown/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAAkH;AAClH,4EAAmE;AAEnE,iDAA+C;AAE/C,6EAA+D;AAC/D,wGAA4F;AAC5F,mGAAmF;AACnF,sFAAkE;AAClE,mGAAuF;AAEvF,MAAqB,qBAAsB,SAAQ,sBAAgB;IAGjE,gBAAgB;QACd,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAE,CAAC,eAAe,CACtE,6BAAM,CAAC,2BAA2B,CAAC,CACnC,CAAC;IACL,CAAC;IAED,iBAAiB;;QACf,OAAO,CACL,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAClH,CAAC;IACJ,CAAC;IAED,cAAc;;QACZ,OAAO,CACL,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAC/G,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,IAAA,mBAAa,GAAE,CAAC,IAAI,CAAC,IAAI,6BAAc,CAAC,QAAQ,kBAAkB,CAAC,CAAC;IAC7E,CAAC;IAED~~;;;;OAIG~~;IACH,YAAY,CAAC,EAAU;;~~QACrB~~,MAAM,YAAY,GAAG,~~IAAI~~,~~6BAAU~~,CAAC,~~cAAc~~,CAAC,iBAAiB,EAAE,IAAI,CAAC;~~QAC3E~~,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,YAAY,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChF,CAAC;IAED;;;;OAIG;IACM,mBAAmB,CAAC,EAAU;;QACrC,MAAM,YAAY,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,iBAAiB,EAAE,IAAI,CAAC;QAC3E,MAAM,IAAI,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,YAAY,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACpF,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,QAAQ,CAAC,UAAU,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5D,CAAC;IAED;;;;OAIG;IACH,0BAA0B,CAAC,EAAU;;QACnC,MAAM,0BAA0B,GAAG,IAAI,6BAAc,CAAC,UAAU,iBAAiB,EAAE,IAAI,CAAC;QACxF,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,0BAA0B,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5G,CAAC;IAED;;;;OAIG;IACH,mBAAmB;;QACjB,MAAM,uBAAuB,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,IAAI,6BAAU,CAAC,WAAW,EAAE,CAAC;QAC3F,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,uBAAuB,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACtG,CAAC;IAED~~;;;;OAIG~~;IACH,SAAS;;~~QACP~~,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,OAAO,CAAC,~~IAAI~~,~~6BAAU,~~CAAC,~~cAAc,CAAC,EAAE,CAAC,~~KAAI,EAAE,CAAC;~~IAClF~~,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,OAAO,IAAA,mBAAa,GAAE,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;IACjF,CAAC;IAGD,YAAY;QACV,IAAA,eAAG,EAAC,GAAG,EAAE;YACP,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;;~~AA7FM~~,kCAAY,GAAW,6BAAM,CAAC,iBAAiB,CAAC,CAAC;kBADrC,qBAAqB;~~AAwC~~/B;IAAR,aAAO;gEAWP;~~AAuCD~~;IADC,aAAO;yDAKP"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/button-dropdown/index.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/test-utils/selectors/button-dropdown/index.d.ts CHANGED Viewed

@@ -10,8 +10,13 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
      * Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find the disabled or non-disabled item.
      */
-    findItemById(id: string): ElementWrapper;
+    findItemById(id: string, options?: {
+        disabled?: boolean;
+    }): ElementWrapper;
     /**
      * Finds `checked` value of item in the open dropdown by item id. Returns null if there is no open dropdown or the item is not a checkbox item.
      *
@@ -33,8 +38,13 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
      * Finds all the items in the open dropdown. Returns empty array if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find all disabled or non-disabled items.
      */
-    findItems(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<ElementWrapper>;
+    findItems(options?: {
+        disabled?: boolean;
+    }): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<ElementWrapper>;
     /**
      * Finds the disabled reason tooltip for a dropdown item. Returns null if no disabled item with `disabledReason` is highlighted.
      */

package/lib/internal/template/test-utils/selectors/button-dropdown/index.js CHANGED Viewed

@@ -9,6 +9,16 @@ const styles_selectors_js_2 = require("../../../button-dropdown/category-element
 const styles_selectors_js_3 = require("../../../button-dropdown/item-element/styles.selectors.js");
 const styles_selectors_js_4 = require("../../../button-dropdown/styles.selectors.js");
 const styles_selectors_js_5 = require("../../../internal/components/dropdown/styles.selectors.js");
+function getItemSelector({ disabled }) {
+    let selector = `.${styles_selectors_js_3.default['item-element']}`;
+    if (disabled === true) {
+        selector += `.${styles_selectors_js_3.default.disabled}`;
+    }
+    else if (disabled === false) {
+        selector += `:not(.${styles_selectors_js_3.default.disabled})`;
+    }
+    return selector;
+}
 class ButtonDropdownWrapper extends selectors_1.ComponentWrapper {
     findNativeButton() {
         return this.findByClassName(styles_selectors_js_4.default['dropdown-trigger']).findByClassName(styles_selectors_js_4.default['test-utils-button-trigger']);
@@ -28,10 +38,13 @@ class ButtonDropdownWrapper extends selectors_1.ComponentWrapper {
      * Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find the disabled or non-disabled item.
      */
-    findItemById(id) {
+    findItemById(id, options = {}) {
         var _a;
-        const itemSelector = `.${styles_selectors_js_3.default['item-element']}[data-testid="${id}"]`;
+        const itemSelector = `${getItemSelector(options)}[data-testid="${id}"]`;
         return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.find(itemSelector)) || this.find(itemSelector);
     }
     /**
@@ -63,10 +76,14 @@ class ButtonDropdownWrapper extends selectors_1.ComponentWrapper {
      * Finds all the items in the open dropdown. Returns empty array if there is no open dropdown.
      *
      * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+     *
+     * Supported options:
+     * * `disabled` (boolean) - Use it to find all disabled or non-disabled items.
      */
-    findItems() {
+    findItems(options = {}) {
         var _a;
-        return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.findAll(`.${styles_selectors_js_3.default['item-element']}`)) || [];
+        const selector = getItemSelector(options);
+        return ((_a = this.findOpenDropdown()) === null || _a === void 0 ? void 0 : _a.findAll(selector)) || [];
     }
     /**
      * Finds the disabled reason tooltip for a dropdown item. Returns null if no disabled item with `disabledReason` is highlighted.

package/lib/internal/template/test-utils/selectors/button-dropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/button-dropdown/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAA+G;AAC/G,iDAA+C;AAC/C,6EAA+D;AAC/D,wGAA4F;AAC5F,mGAAmF;AACnF,sFAAkE;AAClE,mGAAuF;AACvF,MAAqB,qBAAsB,SAAQ,4BAAgB;IAEjE,gBAAgB;QACd,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAE,CAAC,eAAe,CAAC,6BAAM,CAAC,2BAA2B,CAAC,CAAE,CAAC;IACjH,CAAC;IACD,iBAAiB;;QACf,OAAO,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,kBAAkB,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAAC;IAC3H,CAAC;IACD,cAAc;;QACZ,OAAO,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,0CAAE,aAAa,CAAC,IAAI,6BAAY,CAAC,MAAM,EAAE,EAAE,kBAAa,CAAC,mCAAI,IAAI,CAAC;IACxH,CAAC;IACD,gBAAgB;QACd,OAAO,IAAA,yBAAa,GAAE,CAAC,IAAI,CAAC,IAAI,6BAAc,CAAC,QAAQ,kBAAkB,CAAC,CAAC;IAC7E,CAAC;IAED~~;;;;OAIG~~;IACH,YAAY,CAAC,EAAU;;~~QACrB~~,MAAM,YAAY,GAAG,~~IAAI~~,~~6BAAU~~,CAAC,~~cAAc~~,CAAC,iBAAiB,EAAE,IAAI,CAAC;~~QAC3E~~,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,YAAY,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChF,CAAC;IAED;;;;OAIG;IAEH;;;;OAIG;IACH,0BAA0B,CAAC,EAAU;;QACnC,MAAM,0BAA0B,GAAG,IAAI,6BAAc,CAAC,UAAU,iBAAiB,EAAE,IAAI,CAAC;QACxF,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,0BAA0B,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5G,CAAC;IAED;;;;OAIG;IACH,mBAAmB;;QACjB,MAAM,uBAAuB,GAAG,IAAI,6BAAU,CAAC,cAAc,CAAC,IAAI,6BAAU,CAAC,WAAW,EAAE,CAAC;QAC3F,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,IAAI,CAAC,uBAAuB,CAAC,KAAI,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACtG,CAAC;IAED~~;;;;OAIG~~;IACH,SAAS;;~~QACP~~,OAAO,CAAA,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,OAAO,CAAC,~~IAAI~~,~~6BAAU,~~CAAC,~~cAAc,CAAC,EAAE,CAAC,~~KAAI,EAAE,CAAC;~~IAClF~~,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,OAAO,IAAA,yBAAa,GAAE,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;IACjF,CAAC;;~~AAhEM~~,kCAAY,GAAW,6BAAM,CAAC,iBAAiB,CAAC,CAAC;kBADrC,qBAAqB"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/button-dropdown/index.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1207",
+  "version": "3.0.1209",
   "files": [
     "lib"
   ],