@atlaskit/datetime-picker 11.1.11 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/datetime-picker
 
+## 12.0.0
+
+### Major Changes
+
+- [`27d4f1e7121`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27d4f1e7121) - [ux] Updating tokens
+- [`d7542d1a7c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7542d1a7c2) - [ux] Update Tokens in the code with those that are a better fit. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+- [`c19fb116172`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c19fb116172) - [ux] Update Tokens in the code with those that are a better fit. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Minor Changes
+
+- [`6f7a4353204`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f7a4353204) - Added ability to provide custom aria-labels for next- and previous-month buttons using `nextMonthLabel` and `previousMonthLabel`
+
+### Patch Changes
+
+- [`3ec9ed2c4d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ec9ed2c4d0) - Fixed handling of custom times that included whitespace characters
+- Updated dependencies
+
 ## 11.1.11
 
 ### Patch Changes

package/dist/cjs/components/DatePicker.js

@@ -68,7 +68,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -104,8 +104,10 @@ var Menu = function Menu(_ref) {
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
       maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       locale: selectProps.calendarLocale,
@@ -477,6 +479,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           minDate = _this$props3.minDate,
           isInvalid = _this$props3.isInvalid,
           name = _this$props3.name,
+          nextMonthLabel = _this$props3.nextMonthLabel,
+          previousMonthLabel = _this$props3.previousMonthLabel,
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
           locale = _this$props3.locale,
@@ -521,7 +525,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
-        calendarWeekStartDay: weekStartDay
+        calendarWeekStartDay: weekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        previousMonthLabel: previousMonthLabel
       };
       return (0, _core.jsx)("div", (0, _extends2.default)({}, innerProps, {
         role: "presentation",

package/dist/cjs/components/DateTimePicker.js

@@ -58,7 +58,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({
@@ -76,13 +76,13 @@ var subtleBgStyles = (0, _core.css)({
 });
 var hoverStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(_colors.N30, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
     borderColor: "var(--ds-border, ".concat(_colors.N30, ")")
   }
 });
 var isInvalidHoverStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),
     borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
   }
 });
@@ -258,9 +258,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       });
 
       if (dateValue && timeValue) {
-        var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
+        var _value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
 
-        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+        var _this$parseValue = this.parseValue(_value, dateValue, timeValue, zoneValue),
             parsedZone = _this$parseValue.zoneValue;
 
         var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);

package/dist/cjs/components/TimePicker.js

@@ -67,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/parseTime.js

@@ -95,9 +95,9 @@ function checkMinute(minute) {
 }
 
 function convertTo24hrTime(time) {
-  var timeArray = time.split(/(p|a)/);
+  var timeArray = time.toLowerCase().split(/(p|a)/i);
   var meridiem = timeArray[1];
-  var semi24 = formatSemi24(timeArray[0]);
+  var semi24 = formatSemi24(timeArray[0].trim());
   var hour = checkHour(semi24.substring(0, 2), meridiem);
   var minute = checkMinute(semi24.substring(2, 4));
 
@@ -120,11 +120,13 @@ function assignToDate(time) {
 }
 
 function _default(time) {
-  if (!isValid(time.toString())) {
+  var trimmedTime = time.toString().trim();
+
+  if (!isValid(trimmedTime)) {
     return 'invalid time format';
   }
 
-  var time1 = removeSpacer(time.toString());
+  var time1 = removeSpacer(trimmedTime);
   var time2 = convertTo24hrTime(time1);
 
   if (!time2) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "11.1.11",
+	"version": "12.0.0",
 	"sideEffects": false
 }

package/dist/es2019/components/DatePicker.js

@@ -18,7 +18,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.11";
+const packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -54,8 +54,10 @@ const Menu = ({
     disabledDateFilter: selectProps.calendarDisabledDateFilter,
     minDate: selectProps.calendarMinDate,
     maxDate: selectProps.calendarMaxDate,
+    nextMonthLabel: selectProps.nextMonthLabel,
     onChange: selectProps.onCalendarChange,
     onSelect: selectProps.onCalendarSelect,
+    previousMonthLabel: selectProps.previousMonthLabel,
     calendarRef: selectProps.calendarRef,
     selected: [selectProps.calendarValue],
     locale: selectProps.calendarLocale,
@@ -427,6 +429,8 @@ class DatePicker extends Component {
       minDate,
       isInvalid,
       name,
+      nextMonthLabel,
+      previousMonthLabel,
       selectProps,
       spacing,
       locale,
@@ -472,7 +476,9 @@ class DatePicker extends Component {
       onCalendarChange: this.onCalendarChange,
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
-      calendarWeekStartDay: weekStartDay
+      calendarWeekStartDay: weekStartDay,
+      nextMonthLabel,
+      previousMonthLabel
     };
     return jsx("div", _extends({}, innerProps, {
       role: "presentation",

package/dist/es2019/components/DateTimePicker.js

@@ -17,7 +17,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.11";
+const packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -35,13 +35,13 @@ const subtleBgStyles = css({
 });
 const hoverStyles = css({
   '&:hover': {
-    backgroundColor: `var(--ds-surface, ${N30})`,
+    backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
     borderColor: `var(--ds-border, ${N30})`
   }
 });
 const isInvalidHoverStyles = css({
   '&:hover': {
-    backgroundColor: `var(--ds-surface, ${N0})`,
+    backgroundColor: `var(--ds-background-input-hovered, ${N0})`,
     borderColor: `var(--ds-border-danger, ${R400})`
   }
 });

package/dist/es2019/components/TimePicker.js

@@ -14,7 +14,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.1.11";
+const packageVersion = "12.0.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/parseTime.js

@@ -76,9 +76,9 @@ export function checkMinute(minute) {
   return minute;
 }
 export function convertTo24hrTime(time) {
-  const timeArray = time.split(/(p|a)/);
+  const timeArray = time.toLowerCase().split(/(p|a)/i);
   const meridiem = timeArray[1];
-  const semi24 = formatSemi24(timeArray[0]);
+  const semi24 = formatSemi24(timeArray[0].trim());
   const hour = checkHour(semi24.substring(0, 2), meridiem);
   const minute = checkMinute(semi24.substring(2, 4));
 
@@ -99,11 +99,13 @@ export function assignToDate(time) {
   return dateTime;
 }
 export default function (time) {
-  if (!isValid(time.toString())) {
+  const trimmedTime = time.toString().trim();
+
+  if (!isValid(trimmedTime)) {
     return 'invalid time format';
   }
 
-  const time1 = removeSpacer(time.toString());
+  const time1 = removeSpacer(trimmedTime);
   const time2 = convertTo24hrTime(time1);
 
   if (!time2) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "11.1.11",
+	"version": "12.0.0",
 	"sideEffects": false
 }

package/dist/esm/components/DatePicker.js

@@ -33,7 +33,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -69,8 +69,10 @@ var Menu = function Menu(_ref) {
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
       maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
       calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       locale: selectProps.calendarLocale,
@@ -463,6 +465,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           minDate = _this$props3.minDate,
           isInvalid = _this$props3.isInvalid,
           name = _this$props3.name,
+          nextMonthLabel = _this$props3.nextMonthLabel,
+          previousMonthLabel = _this$props3.previousMonthLabel,
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
           locale = _this$props3.locale,
@@ -507,7 +511,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
-        calendarWeekStartDay: weekStartDay
+        calendarWeekStartDay: weekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        previousMonthLabel: previousMonthLabel
       };
       return jsx("div", _extends({}, innerProps, {
         role: "presentation",

package/dist/esm/components/DateTimePicker.js

@@ -31,7 +31,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({
@@ -49,13 +49,13 @@ var subtleBgStyles = css({
 });
 var hoverStyles = css({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(N30, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")"),
     borderColor: "var(--ds-border, ".concat(N30, ")")
   }
 });
 var isInvalidHoverStyles = css({
   '&:hover': {
-    backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(N0, ")"),
     borderColor: "var(--ds-border-danger, ".concat(R400, ")")
   }
 });
@@ -239,9 +239,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       });
 
       if (dateValue && timeValue) {
-        var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
+        var _value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
 
-        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+        var _this$parseValue = this.parseValue(_value, dateValue, timeValue, zoneValue),
             parsedZone = _this$parseValue.zoneValue;
 
         var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);

package/dist/esm/components/TimePicker.js

@@ -32,7 +32,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.1.11";
+var packageVersion = "12.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/parseTime.js

@@ -76,9 +76,9 @@ export function checkMinute(minute) {
   return minute;
 }
 export function convertTo24hrTime(time) {
-  var timeArray = time.split(/(p|a)/);
+  var timeArray = time.toLowerCase().split(/(p|a)/i);
   var meridiem = timeArray[1];
-  var semi24 = formatSemi24(timeArray[0]);
+  var semi24 = formatSemi24(timeArray[0].trim());
   var hour = checkHour(semi24.substring(0, 2), meridiem);
   var minute = checkMinute(semi24.substring(2, 4));
 
@@ -99,11 +99,13 @@ export function assignToDate(time) {
   return dateTime;
 }
 export default function (time) {
-  if (!isValid(time.toString())) {
+  var trimmedTime = time.toString().trim();
+
+  if (!isValid(trimmedTime)) {
     return 'invalid time format';
   }
 
-  var time1 = removeSpacer(time.toString());
+  var time1 = removeSpacer(trimmedTime);
   var time2 = convertTo24hrTime(time1);
 
   if (!time2) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "11.1.11",
+	"version": "12.0.0",
 	"sideEffects": false
 }

package/dist/types/components/DatePicker.d.ts

@@ -48,6 +48,8 @@ export interface Props extends WithAnalyticsEventsProps {
     isOpen?: boolean;
     /** The name of the field. */
     name?: string;
+    /** The aria-label attribute associated with the next-month arrow. */
+    nextMonthLabel?: string;
     /** Called when the field is blurred. */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     /** Called when the value changes. The only argument is an ISO time or empty string. */
@@ -58,6 +60,8 @@ export interface Props extends WithAnalyticsEventsProps {
     parseInputValue?: (date: string, dateFormat: string) => Date;
     /** A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string. */
     formatDisplayLabel?: (value: string, dateFormat: string) => string;
+    /** The aria-label attribute associated with the previous-month arrow. */
+    previousMonthLabel?: string;
     /** Props to apply to the select. This can be used to set options such as placeholder text.
      *  See [the `Select` documentation for further information](/components/select). */
     selectProps?: SelectProps;
@@ -210,7 +214,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -230,5 +234,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/TimePicker.d.ts

@@ -10,9 +10,9 @@ interface Option {
 export interface Props extends WithAnalyticsEventsProps {
     /**
       Set the appearance of the picker.
-     
+  
       `subtle` will remove the borders, background, and icon.
-     
+  
       **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
@@ -45,7 +45,7 @@ export interface Props extends WithAnalyticsEventsProps {
     selectProps?: SelectProps<any>;
     /**
       The spacing for the select control.
-     
+  
       Compact is `gridSize() * 4`, default is `gridSize * 5`.
      */
     spacing?: Spacing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "11.1.11",
+  "version": "12.0.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,12 +19,13 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Date time picker"
+      "name": "Date time picker",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/calendar": "^12.0.0",
+    "@atlaskit/calendar": "^12.2.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.1.0",
     "@atlaskit/popper": "^5.2.0",
@@ -69,6 +70,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "styling": [
         "static",
         "emotion"