@spaced-out/ui-design-system 0.5.13-beta.0 → 0.5.13

package/lib/components/Combobox/Combobox.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Combobox = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Dropdown = require("../Dropdown");
 var _Input = require("../Input");
 var _Text = require("../Text");
@@ -57,7 +58,8 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
     onDropdownContainerClick,
     dropdownName,
     dropdownPlaceholder,
-    dropdownBoxRef
+    dropdownBoxRef,
+    testId
   } = props;
   const inputRef = React.useRef(null);
   const dropdownRef = React.useRef(null);
@@ -104,15 +106,31 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _ComboboxModule.default.info,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _ComboboxModule.default.infoContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "secondary",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'label-text'
+          }),
           children: label ?? ''
         }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "danger",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'required'
+          }),
           children: "*"
         })]
       })
@@ -122,6 +140,10 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
       }, classNames?.box),
       onClick: !(disabled || locked) ? onContainerClick : undefined,
       ref: boxRef,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'box'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
         ref: dropdownRef,
         menu: menu,
@@ -147,7 +169,11 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
         onBlur: onDropdownBlur,
         onKeyDown: onDropdownKeyDown,
         onContainerClick: onDropdownContainerClick,
-        name: dropdownName
+        name: dropdownName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'dropdown'
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
         ref: inputRef,
         boxRef: inputBoxRef,
@@ -182,15 +208,31 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
         maxLength: maxLength,
         pattern: pattern,
         min: min,
-        max: max
+        max: max,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'input'
+        })
       })]
     }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _ComboboxModule.default.info,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'helper'
+      }),
       children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         color: "danger",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'error'
+        }),
         children: errorText
       }) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         color: disabled ? 'disabled' : 'secondary',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text'
+        }),
         children: helperText
       }) : helperText
     })]

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -16,7 +16,8 @@ interface CalendarProps {
     };
     today: string;
     t: ((key: string, fallback: string) => string) | null | undefined;
+    testId?: string;
 }
-export declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, }: CalendarProps) => React.JSX.Element;
+export declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Calendar.d.ts.map

package/lib/components/DateRangePicker/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAuB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACnE;AAED,eAAO,MAAM,QAAQ,GAAI,qFAUtB,aAAa,sBAgDf,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAwB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,GAAI,6FAWtB,aAAa,sBA4Df,CAAC"}

package/lib/components/DateRangePicker/Calendar.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
 var _dateRangePicker = require("../../utils/date-range-picker");
+var _qa = require("../../utils/qa");
 var _Day = require("./Day");
 var _Text = require("../Text");
 var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
@@ -24,19 +25,36 @@ const Calendar = _ref => {
     dateRange,
     inHoverRange,
     today,
-    t
+    t,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _CalendarModule.default.calendar,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: `calendar-${value}`
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _CalendarModule.default.calendarRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'weekdays'
+      }),
       children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         className: _CalendarModule.default.calendarRowItem,
         color: _Text.TEXT_COLORS.tertiary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: `weekday-${day}`
+        }),
         children: (0, _dateRangePicker.getTranslation)(t, day)
       }, day))
     }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _CalendarModule.default.calendarRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: `week-${index}`
+      }),
       children: week.map(date => {
         const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
         const isStart = (0, _utils.isStartOfRange)(dateRange, date);
@@ -58,7 +76,11 @@ const Calendar = _ref => {
           highlighted: highlighted && !isRangeValid,
           startOfRange: isStart && !isRangeValid,
           value: dateValue.date().toString(),
-          hoverDay: hoverDay
+          hoverDay: hoverDay,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: `day-${date}`
+          })
         }, date);
       })
     }, week[index]))]

package/lib/components/DateRangePicker/DateRangePicker.d.ts

@@ -16,6 +16,7 @@ export interface DateRangePickerProps {
     endDateLabel?: string;
     t?: ((key: string, fallback: string) => string) | null | undefined;
     locale?: string;
+    testId?: string;
 }
 export declare const DateRangePicker: Flow.AbstractComponent<DateRangePickerProps, HTMLDivElement>;
 export {};

package/lib/components/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAyBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CA8Jf,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAyBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAgKf,CAAC"}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -28,7 +28,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     startDateLabel,
     endDateLabel,
     t,
-    locale
+    locale,
+    testId
   } = _ref;
   const localTimezone = _momentTimezone.default.tz.guess();
   const {
@@ -137,6 +138,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     startDateLabel: startDateLabel,
     endDateLabel: endDateLabel,
     t: t,
-    locale: locale
+    locale: locale,
+    testId: testId
   });
 });

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -27,6 +27,7 @@ interface DateRangeWrapperProps {
     endDateLabel?: string;
     t?: ((key: string, fallback: string) => string) | null | undefined;
     locale?: string;
+    testId?: string;
 }
 export declare const DateRangeWrapper: Flow.AbstractComponent<DateRangeWrapperProps, HTMLDivElement>;
 export {};

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AA8CnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyFD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CA8Mf,CAAC"}
+{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAgDnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoGD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CA4Pf,CAAC"}

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -9,6 +9,7 @@ var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _dateRangePicker = require("../../utils/date-range-picker");
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Card = require("../Card");
 var _Calendar = require("./Calendar");
@@ -33,7 +34,8 @@ const CalendarHeader = _ref => {
     onClickNext,
     nextDisabled,
     prevDisabled,
-    onClickPrevious
+    onClickPrevious,
+    testId
   } = _ref;
   const availableYears = (0, _utils.generateAvailableYears)({
     marker,
@@ -53,6 +55,10 @@ const CalendarHeader = _ref => {
   const MONTHS = (0, _utils.getMonths)(t);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _DateRangeWrapperModule.default.calendarHeader,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: `header-${marker}`
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
       size: "small",
@@ -61,7 +67,11 @@ const CalendarHeader = _ref => {
         [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
       }),
       onClick: () => !prevDisabled && onClickPrevious(),
-      color: prevDisabled ? 'disabled' : 'secondary'
+      color: prevDisabled ? 'disabled' : 'secondary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `prev-button-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       size: "small",
       disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
@@ -73,7 +83,11 @@ const CalendarHeader = _ref => {
         setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
       },
       dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
-      scrollMenuToBottom: true
+      scrollMenuToBottom: true,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `month-dropdown-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
       menu: {
@@ -85,7 +99,11 @@ const CalendarHeader = _ref => {
         setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', Number(event.key))));
       },
       dropdownInputText: _moment.default.utc(date).year().toString(),
-      scrollMenuToBottom: true
+      scrollMenuToBottom: true,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `year-dropdown-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       size: "small",
       ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
@@ -94,7 +112,11 @@ const CalendarHeader = _ref => {
         [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
       }),
       onClick: () => !nextDisabled && onClickNext(),
-      color: nextDisabled ? 'disabled' : 'secondary'
+      color: nextDisabled ? 'disabled' : 'secondary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `next-button-${marker}`
+      })
     })]
   });
 };
@@ -120,7 +142,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     startDateLabel,
     endDateLabel,
     t,
-    locale
+    locale,
+    testId
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -149,7 +172,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     minDate,
     maxDate,
     today,
-    t
+    t,
+    testId
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.FocusManager, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
@@ -157,24 +181,48 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
         wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
       },
       ref: ref,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'card'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
         className: _DateRangeWrapperModule.default.cardHeader,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'header'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
           className: _DateRangeWrapperModule.default.selectedDate,
           color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'start-date-label'
+          }),
           children: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: "minus",
           size: _Icon.ICON_SIZE.small,
           type: _Icon.ICON_TYPE.regular,
-          color: _Text.TEXT_COLORS.secondary
+          color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'separator-icon'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
           className: _DateRangeWrapperModule.default.selectedDate,
           color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'end-date-label'
+          }),
           children: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _DateRangeWrapperModule.default.calendarMenuContainer,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'calendar-menu-container'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
           t: t,
           marker: _utils.MARKERS.DATE_RANGE_START,
@@ -187,7 +235,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
           minDate: minDate,
           maxDate: maxDate,
           onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV),
+          testId: testId
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
           t: t,
           marker: _utils.MARKERS.DATE_RANGE_END,
@@ -200,25 +249,50 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
           minDate: minDate,
           maxDate: maxDate,
           onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV),
+          testId: testId
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
         className: _DateRangeWrapperModule.default.dateRangeCalendars,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'calendars'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
           marker: _utils.MARKERS.DATE_RANGE_START,
           value: rangeStartMonth,
-          ...commonProps
+          ...commonProps,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'start-calendar'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _DateRangeWrapperModule.default.divider
+          className: _DateRangeWrapperModule.default.divider,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'divider'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
           marker: _utils.MARKERS.DATE_RANGE_END,
           value: rangeEndMonth,
-          ...commonProps
+          ...commonProps,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'end-calendar'
+          })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
         className: _DateRangeWrapperModule.default.cardFooter,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
           className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'timezone-container'
+          }),
           children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
             menu: {
               selectedKeys: [timezone],
@@ -239,18 +313,34 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
               box: _DateRangeWrapperModule.default.timezoneDropdown
             },
             onChange: event => setTimezone(event.key),
-            size: "small"
+            size: "small",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'timezone-dropdown'
+            })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'actions'
+          }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             type: "ghost",
             onClick: onCancel,
             size: "small",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'cancel-button'
+            }),
             children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onClick: handleApplyClick,
             size: "small",
             disabled: !(dateRange.startDate && dateRange.endDate),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'apply-button'
+            }),
             children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
           })]
         })]

package/lib/components/DateRangePicker/Day.d.ts

@@ -11,7 +11,8 @@ interface DayProps {
     startOfRange: boolean;
     onClick: () => void;
     onHover: () => void;
+    testId?: string;
 }
-export declare const Day: ({ date, value, filled, onHover, onClick, disabled, hoverDay, outlined, endOfRange, highlighted, startOfRange, }: DayProps) => React.JSX.Element;
+export declare const Day: ({ date, value, filled, onHover, onClick, disabled, hoverDay, outlined, endOfRange, highlighted, startOfRange, testId, }: DayProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Day.d.ts.map

package/lib/components/DateRangePicker/Day.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Day.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Day.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,eAAO,MAAM,GAAG,GAAI,iHAYjB,QAAQ,sBAwBV,CAAC"}
+{"version":3,"file":"Day.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Day.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAYD,eAAO,MAAM,GAAG,GAAI,yHAajB,QAAQ,sBA0BV,CAAC"}

package/lib/components/DateRangePicker/Day.js

@@ -7,6 +7,7 @@ exports.Day = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Text = require("../Text");
 var _DayModule = _interopRequireDefault(require("./Day.module.css"));
@@ -34,7 +35,8 @@ const Day = _ref => {
     outlined,
     endOfRange,
     highlighted,
-    startOfRange
+    startOfRange,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.UnstyledButton, {
     tabIndex: disabled ? -1 : 0,
@@ -45,6 +47,10 @@ const Day = _ref => {
     onMouseOver: onHover,
     onClick: onClick,
     onKeyUp: onHover,
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: `day-button-${date}`
+    }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
       color: getTextColor(disabled, filled),
       className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
@@ -52,6 +58,10 @@ const Day = _ref => {
         [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
         [_DayModule.default.calendarRowItemOutlined]: outlined
       }),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `day-text-${date}`
+      }),
       children: value
     })
   });

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts

@@ -24,6 +24,7 @@ export interface FilterButtonOverlayProps extends Omit<NewButtonProps, 'classNam
     buttonSize?: ButtonSize;
     elevation?: ElevationType;
     buttonIsFluid?: boolean;
+    testId?: string;
 }
 export declare const FilterButtonOverlay: Flow.AbstractComponent<FilterButtonOverlayProps, HTMLDivElement>;
 export {};

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAIhD,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,+BAA+B,CAAC;AAKxE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CACpC,WAAW,EACX;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,IAAI,CACV,cAAc,EACZ,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,MAAM,GACN,aAAa,GACb,YAAY,GACZ,WAAW,GACX,eAAe,CAClB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,4BAA4B,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CACtD,wBAAwB,EACxB,cAAc,CA6Gf,CAAC"}
+{"version":3,"file":"FilterButtonOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAKhD,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,+BAA+B,CAAC;AAKxE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CACpC,WAAW,EACX;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,IAAI,CACV,cAAc,EACZ,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,MAAM,GACN,aAAa,GACb,YAAY,GACZ,WAAW,GACX,eAAe,CAClB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,4BAA4B,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CACtD,wBAAwB,EACxB,cAAc,CAuHf,CAAC"}

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -10,6 +10,7 @@ var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
 var _Tooltip = require("../Tooltip");
@@ -30,6 +31,7 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     buttonIsFluid,
     buttonSize,
     elevation = 'modal',
+    testId,
     ...restProps
   } = _ref;
   const {
@@ -58,7 +60,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
         triggerRef
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        "data-testid": "FilterButtonOverlay",
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'root'
+        }),
         className: (0, _classify.default)({
           [_FilterButtonOverlayModule.default.isFluid]: buttonIsFluid
         }, classNames?.wrapper),
@@ -72,6 +77,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
           },
           isFluid: buttonIsFluid,
           size: buttonSize,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'button'
+          }),
           children: buttonLabel
         }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
@@ -81,6 +90,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
               className: _FilterButtonOverlayModule.default.overlayContainer,
+              "data-testid": (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'overlay'
+              }),
               style: {
                 display: 'flex',
                 position: strategy,
@@ -102,6 +115,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
                   [_FilterButtonOverlayModule.default.small]: size === 'small',
                   [_FilterButtonOverlayModule.default.medium]: size === 'medium'
                 }, classNames?.overlayContainer),
+                "data-testid": (0, _qa.generateTestId)({
+                  base: testId,
+                  slot: 'content'
+                }),
                 children: children
               })
             })

package/lib/components/FocusManager/FocusManager.d.ts

@@ -1,7 +1,17 @@
 import * as React from 'react';
+import type { FloatingFocusManagerProps } from '@floating-ui/react';
+import { FloatingPortal } from '@floating-ui/react';
 type ClassNames = Readonly<{
     wrapper?: string;
 }>;
+interface FloatingPortalProps {
+    children?: React.ReactNode;
+    id?: string;
+    root?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+    preserveTabOrder?: boolean;
+}
+export declare const GenesisFloatingPortal: (props: FloatingPortalProps) => React.JSX.Element;
+export declare const GenesisFloatingFocusManager: (props: FloatingFocusManagerProps) => React.JSX.Element;
 export interface FocusManagerProps {
     classNames?: ClassNames;
     children?: React.ReactNode;
@@ -11,6 +21,6 @@ export interface FocusManagerProps {
     modal?: boolean;
     testId?: string;
 }
+export { FloatingPortal };
 export declare const FocusManager: (props: FocusManagerProps) => React.JSX.Element;
-export {};
 //# sourceMappingURL=FocusManager.d.ts.map

package/lib/components/FocusManager/FocusManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusManager.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA+BpD,CAAC"}
+{"version":3,"file":"FocusManager.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAEL,cAAc,EAEf,MAAM,oBAAoB,CAAC;AAQ5B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,GAAI,OAAO,mBAAmB,sBAE/D,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,yBAAyB,sBACM,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAGD,OAAO,EAAC,cAAc,EAAC,CAAC;AAExB,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA+BpD,CAAC"}