baseui 12.0.0 → 12.1.0

package/es/data-table/header-cell.js

@@ -6,12 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { Checkbox } from '../checkbox';
+import { LocaleContext } from '../locale';
 import { useStyletron } from '../styles';
 import ChevronDown from '../icon/chevron-down';
 import ChevronUp from '../icon/chevron-up';
 import { SORT_DIRECTIONS } from './constants';
 import { isFocusVisible } from '../utils/focusVisible';
 const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const locale = React.useContext(LocaleContext);
   const [css, theme] = useStyletron();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const checkboxRef = React.useRef(null);
@@ -22,7 +24,7 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
 
-  const handleBlur = event => {
+  const handleBlur = () => {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -31,59 +33,64 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    role: "button",
-    tabIndex: 0,
     className: css({ ...theme.typography.font350,
       alignItems: 'center',
       backgroundColor,
-      boxSizing: 'border-box',
       color: theme.colors.contentPrimary,
-      cursor: props.sortable ? 'pointer' : null,
       display: props.isMeasured ? 'inline-flex' : 'flex',
       flexGrow: 1,
       height: '100%',
-      paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      flexWrap: 'nowrap',
-      whiteSpace: 'nowrap',
-      outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
-      outlineOffset: '-3px'
-    }),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    onKeyUp: event => {
-      if (event.key === 'Enter') {
-        props.onSort(props.index);
-      }
-    },
-    onClick: event => {
-      // Avoid column sort if select-all checkbox click.
-      if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
-        return;
-      }
-
-      if (props.sortable) {
-        props.onSort(props.index);
-      }
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur
+      paddingLeft: theme.sizing.scale500
+    })
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
     className: css({
       paddingRight: theme.sizing.scale300
     }),
     ref: checkboxRef
   }, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: e => {
+    onChange: () => {
       if (props.isSelectedAll || props.isSelectedIndeterminate) {
         props.onSelectNone();
       } else {
         props.onSelectAll();
       }
     },
+    "aria-label": locale.datatable.selectAllRows,
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
-  })), props.title, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: props.sortable ? 'pointer' : null,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
+      outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
+      outlineOffset: '-3px',
+      // paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      whiteSpace: 'nowrap'
+    }),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onKeyUp: event => {
+      if (event.key === 'Enter') {
+        props.onSort(props.index);
+      }
+    },
+    onClick: () => {
+      if (props.sortable) {
+        props.onSort(props.index);
+      }
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    role: "button",
+    tabIndex: 0
+  }, props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -102,7 +109,7 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(ChevronUp, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  }))));
+  })))));
 });
 HeaderCell.displayName = 'HeaderCell';
 export default HeaderCell;

package/es/data-table/locale.js

@@ -37,6 +37,8 @@ const locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F'
+  booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows'
 };
 export default locale;

package/es/data-table/measure-column-widths.js

@@ -25,7 +25,7 @@ function MeasureColumn({
         onLayout(columnIndex, ref.current.getBoundingClientRect());
       }
     }
-  }, []);
+  }, [onLayout]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: css({
@@ -42,7 +42,8 @@ function MeasureColumn({
     onMouseEnter: () => {},
     onMouseLeave: () => {},
     onSelectAll: () => {},
-    onSelectNone: () => {},
+    onSelectNone: () => {} // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ,
     onSort: i => {},
     sortable: column.sortable,
     sortDirection: null,
@@ -100,7 +101,7 @@ export default function MeasureColumnWidths({
   const [css] = useStyletron();
   const widthMap = React.useMemo(() => {
     return new Map();
-  }, []);
+  }, [rows]);
   const sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
   const sampleIndexes = React.useMemo(() => {
@@ -119,7 +120,7 @@ export default function MeasureColumnWidths({
     widthMap.size === Math.floor(columns.length / 4)) {
       onWidthsChange(Array.from(widthMap.values()));
     }
-  }, [columns, finishedMeasurementCount, onWidthsChange]);
+  }, [columns, rows, finishedMeasurementCount, onWidthsChange]);
   const hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',

package/es/data-table/stateful-container.js

@@ -122,6 +122,7 @@ export const StatefulContainer = props => {
     selectedRowIds,
     sortIndex,
     sortDirection,
-    textQuery
+    textQuery // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   });
 };

package/es/data-table/stateful-data-table.js

@@ -190,12 +190,12 @@ export function StatefulDataTable(props) {
     rows: props.rows,
     title: title
   })))), Boolean(selectedRowIds.size) && props.batchActions && /*#__PURE__*/React.createElement("div", {
-    style: {
+    className: css({
       display: 'flex',
       alignItems: 'center',
-      paddingTop: theme.sizing.scale400,
-      paddingBottom: theme.sizing.scale400
-    }
+      paddingTop: theme.sizing.scale300,
+      paddingBottom: theme.sizing.scale300
+    })
   }, props.batchActions.map(action => {
     function onClick(event) {
       action.onClick({

package/es/datepicker/calendar-header.js

@@ -24,6 +24,7 @@ import { DENSITY, ORIENTATION, WEEKDAYS } from './constants';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { forkBlur, forkFocus, isFocusVisible } from '../utils/focusVisible';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const navBtnStyle = ({
   $theme
 }) => ({

package/es/datepicker/calendar.js

@@ -249,6 +249,7 @@ export default class Calendar extends React.Component {
     });
 
     _defineProperty(this, "handleDateChange", data => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {
         onChange = params => {}
       } = this.props;
@@ -287,6 +288,7 @@ export default class Calendar extends React.Component {
     });
 
     _defineProperty(this, "handleTimeChange", (time, index) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {
         onChange = params => {}
       } = this.props; // Save/update the time value in internal state

package/es/datepicker/datepicker.js

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { MaskedInput } from '../input';
-import { Popover, PLACEMENT } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import Calendar from './calendar';
 import { getOverrides } from '../helpers/overrides';
 import getInterpolatedString from '../helpers/i18n-interpolation';
@@ -51,6 +51,7 @@ export default class Datepicker extends React.Component {
 
       if (Array.isArray(date)) {
         if (onChange && date.every(Boolean)) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onChange({
             date: date
           });
@@ -462,6 +463,7 @@ export default class Datepicker extends React.Component {
     const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
     const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
+      accessibilityType: ACCESSIBILITY_TYPE.none,
       focusLock: false,
       autoFocus: false,
       mountNode: this.props.mountNode,

package/es/datepicker/day.js

@@ -228,7 +228,8 @@ export default class Day extends React.Component {
         this.dayElm.focus();
       }
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   componentDidUpdate(prevProps) {
     if (this.dayElm && this.props.focusedCalendar) {

package/es/datepicker/index.js

@@ -12,7 +12,7 @@ export { default as StatefulDatepicker, default as StatefulDatePicker } from './
 
 export { formatDate } from './utils'; // Constants
 
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
 
 export * from './styled-components'; // Dependency components and their types
 

package/es/datepicker/stateful-calendar.js

@@ -14,7 +14,10 @@ import Calendar from './calendar';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps =>
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(Calendar, _extends({}, extendedProps, {
       onChange: extendedProps.onChange
     })));
   }

package/es/datepicker/stateful-container.js

@@ -25,6 +25,7 @@ class StatefulContainer extends React.Component {
       if (onChange) {
         if (Array.isArray(date)) {
           if (date.every(Boolean)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange({
               date: date
             });
@@ -60,6 +61,7 @@ class StatefulContainer extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       children,
       initialState,

package/es/datepicker/stateful-datepicker.js

@@ -13,8 +13,12 @@ import StatefulContainer from './stateful-container';
 import Datepicker from './datepicker';
 
 class StatefulComponent extends React.Component {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps =>
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(Datepicker, _extends({}, extendedProps, {
       onChange: extendedProps.onChange
     })));
   }

package/es/datepicker/styled-components.js

@@ -24,12 +24,14 @@ export const StyledInputWrapper = styled('div', props => {
   };
 });
 StyledInputWrapper.displayName = "StyledInputWrapper";
+StyledInputWrapper.displayName = 'StyledInputWrapper';
 export const StyledInputLabel = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.LabelMedium,
   marginBottom: $theme.sizing.scale300
 }));
 StyledInputLabel.displayName = "StyledInputLabel";
+StyledInputLabel.displayName = 'StyledInputLabel';
 export const StyledStartDate = styled('div', ({
   $theme
 }) => ({
@@ -37,16 +39,19 @@ export const StyledStartDate = styled('div', ({
   marginRight: $theme.sizing.scale300
 }));
 StyledStartDate.displayName = "StyledStartDate";
+StyledStartDate.displayName = 'StyledStartDate'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledEndDate = styled('div', ({
   $theme
 }) => ({
   width: '100%'
 }));
+StyledEndDate.displayName = "StyledEndDate";
+StyledEndDate.displayName = 'StyledEndDate';
 /**
  * Main component container element
  */
 
-StyledEndDate.displayName = "StyledEndDate";
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {
@@ -67,6 +72,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledMonthContainer = styled('div', props => {
   const {
     $orientation
@@ -77,6 +83,7 @@ export const StyledMonthContainer = styled('div', props => {
   };
 });
 StyledMonthContainer.displayName = "StyledMonthContainer";
+StyledMonthContainer.displayName = 'StyledMonthContainer';
 export const StyledCalendarContainer = styled('div', props => {
   const {
     $theme: {
@@ -92,6 +99,7 @@ export const StyledCalendarContainer = styled('div', props => {
   };
 });
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
+StyledCalendarContainer.displayName = 'StyledCalendarContainer';
 export const StyledSelectorContainer = styled('div', ({
   $theme
 }) => {
@@ -104,6 +112,7 @@ export const StyledSelectorContainer = styled('div', ({
   };
 });
 StyledSelectorContainer.displayName = "StyledSelectorContainer";
+StyledSelectorContainer.displayName = 'StyledSelectorContainer';
 export const StyledCalendarHeader = styled('div', props => {
   const {
     $theme: {
@@ -133,6 +142,7 @@ export const StyledCalendarHeader = styled('div', props => {
   };
 });
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
+StyledCalendarHeader.displayName = 'StyledCalendarHeader';
 export const StyledMonthHeader = styled('div', props => {
   return {
     color: props.$theme.colors.calendarHeaderForeground,
@@ -141,6 +151,7 @@ export const StyledMonthHeader = styled('div', props => {
   };
 });
 StyledMonthHeader.displayName = "StyledMonthHeader";
+StyledMonthHeader.displayName = 'StyledMonthHeader';
 export const StyledMonthYearSelectButton = styled('button', props => {
   const {
     $theme: {
@@ -167,6 +178,7 @@ export const StyledMonthYearSelectButton = styled('button', props => {
   };
 });
 StyledMonthYearSelectButton.displayName = "StyledMonthYearSelectButton";
+StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
 export const StyledMonthYearSelectIconContainer = styled('span', props => {
   const marginDirection = props.$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
@@ -176,6 +188,7 @@ export const StyledMonthYearSelectIconContainer = styled('span', props => {
   };
 });
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
+StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 
 function getArrowBtnStyle({
   $theme,
@@ -207,14 +220,18 @@ function getArrowBtnStyle({
 
 export const StyledPrevButton = styled('button', getArrowBtnStyle);
 StyledPrevButton.displayName = "StyledPrevButton";
+StyledPrevButton.displayName = 'StyledPrevButton';
 export const StyledNextButton = styled('button', getArrowBtnStyle);
 StyledNextButton.displayName = "StyledNextButton";
+StyledNextButton.displayName = 'StyledNextButton'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledMonth = styled('div', props => {
   return {
     display: 'inline-block'
   };
 });
 StyledMonth.displayName = "StyledMonth";
+StyledMonth.displayName = 'StyledMonth';
 export const StyledWeek = styled('div', props => {
   const {
     $theme: {
@@ -228,6 +245,7 @@ export const StyledWeek = styled('div', props => {
   };
 });
 StyledWeek.displayName = "StyledWeek";
+StyledWeek.displayName = 'StyledWeek';
 
 function generateDayStyles(defaultCode, defaultStyle) {
   const codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
@@ -237,7 +255,8 @@ function generateDayStyles(defaultCode, defaultStyle) {
     [codeForSM]: defaultStyle,
     [codeForEM]: defaultStyle
   };
-}
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 function getDayStyles(code, {
   colors
@@ -573,10 +592,12 @@ export const StyledDay = styled('div', props => {
         } : {})
       }
     } : // a hack to make flow happy, otherwise it complains about complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     {})
   };
 });
 StyledDay.displayName = "StyledDay";
+StyledDay.displayName = 'StyledDay';
 export const StyledDayLabel = styled('div', props => {
   const {
     $theme: {
@@ -590,6 +611,7 @@ export const StyledDayLabel = styled('div', props => {
   };
 });
 StyledDayLabel.displayName = "StyledDayLabel";
+StyledDayLabel.displayName = 'StyledDayLabel';
 export const StyledWeekdayHeader = styled('div', props => {
   const {
     $theme: {
@@ -621,4 +643,5 @@ export const StyledWeekdayHeader = styled('div', props => {
     backgroundColor: 'transparent'
   };
 });
-StyledWeekdayHeader.displayName = "StyledWeekdayHeader";
+StyledWeekdayHeader.displayName = "StyledWeekdayHeader";
+StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';

package/es/datepicker/utils/date-helpers.js

@@ -59,7 +59,8 @@ class DateHelpers {
         locale: instance.locale
       });
 
-      const updateOptions = updateOptionsBase || defaultGetOptions;
+      const updateOptions = updateOptionsBase || defaultGetOptions; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       const UtilsClass = adapter.constructor;
       const className = adapter.constructor.name; // This ensures that if the adapter class isn't
       // supported it just falls back the default formats

package/es/datepicker/utils/index.js

@@ -76,5 +76,6 @@ export const subMonths = createDirtySetter(defaultDateHelpers.subMonths);
 export const subYears = createDirtySetter(defaultDateHelpers.subYears); // ** Date Comparison
 
 export const isBefore = createDirtyCompare(defaultDateHelpers.isBefore);
-export const isAfter = createDirtyCompare(defaultDateHelpers.isAfter);
+export const isAfter = createDirtyCompare(defaultDateHelpers.isAfter); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export const format = (date, format, locale) => defaultDateHelpers.format(date, format, locale);

package/es/divider/styled-components.js

@@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled } from '../styles/index';
+import { styled } from '../styles';
 import { SIZE } from './constants';
 export const StyledDivider = styled('hr', props => {
   const {
@@ -55,4 +55,5 @@ export const StyledDivider = styled('hr', props => {
     borderLeftStyle: 'none'
   };
 });
-StyledDivider.displayName = "StyledDivider";
+StyledDivider.displayName = "StyledDivider";
+StyledDivider.displayName = 'StyledDivider';

package/es/dnd-list/stateful-list-container.js

@@ -46,6 +46,7 @@ class StatefulListContainer extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       children,
       initialState,

package/es/dnd-list/styled-components.js

@@ -9,6 +9,7 @@ import { styled } from '../styles';
 /**
  * Main component container element
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Root = styled('div', ({
   $theme
 }) => {
@@ -17,6 +18,7 @@ export const Root = styled('div', ({
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 export const List = styled('ul', ({
   $isDragged
@@ -28,6 +30,7 @@ export const List = styled('ul', ({
   };
 });
 List.displayName = "List";
+List.displayName = 'List';
 List.displayName = 'StyledList';
 export const Item = styled('li', ({
   $isDragged,
@@ -81,6 +84,7 @@ export const Item = styled('li', ({
   };
 });
 Item.displayName = "Item";
+Item.displayName = 'Item';
 List.displayName = 'StyledItem';
 export const DragHandle = styled('div', ({
   $theme
@@ -95,6 +99,7 @@ export const DragHandle = styled('div', ({
   };
 });
 DragHandle.displayName = "DragHandle";
+DragHandle.displayName = 'DragHandle';
 DragHandle.displayName = 'StyledDragHandle';
 export const CloseHandle = styled('button', ({
   $theme,
@@ -123,6 +128,7 @@ export const CloseHandle = styled('button', ({
   };
 });
 CloseHandle.displayName = "CloseHandle";
+CloseHandle.displayName = 'CloseHandle';
 CloseHandle.displayName = 'StyledCloseHandle';
 export const Label = styled('div', ({
   $theme
@@ -131,4 +137,5 @@ export const Label = styled('div', ({
   ...$theme.typography.font300
 }));
 Label.displayName = "Label";
+Label.displayName = 'Label';
 Label.displayName = 'StyledLabel';

package/es/drawer/constants.js

@@ -4,6 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SIZE = {
   default: 'default',
   full: 'full',

package/es/drawer/drawer.js

@@ -10,8 +10,6 @@ LICENSE file in the root directory of this source tree.
 */
 
 /* global document */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 import { LocaleContext } from '../locale';
@@ -143,6 +141,7 @@ class Drawer extends React.Component {
     if (mountNode) {
       return mountNode;
     } // Flow thinks body could be null (cast through any)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
     return document.body;
@@ -154,7 +153,6 @@ class Drawer extends React.Component {
     }
 
     if (this.animateStartTimer) {
-      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -170,8 +168,7 @@ class Drawer extends React.Component {
 
 
     this.clearTimers();
-    this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
-
+    this.disableMountNodeScroll();
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({
         isVisible: true