baseui 0.0.0-alpha-8ab2335 → 0.0.0-alpha-e79754d

package/data-table/data-table.js

@@ -197,8 +197,7 @@ function Header(props) {
   var _React$useState3 = React.useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       endResizePos = _React$useState4[0],
-      setEndResizePos = _React$useState4[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+      setEndResizePos = _React$useState4[1];
 
   var headerCellRef = React.useRef(null);
   var RULER_OFFSET = 2;
@@ -242,8 +241,7 @@ function Header(props) {
           }
         }
       }
-    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+    }
 
     function handleMouseUp(event) {
       props.onResize(props.index, endResizePos - startResizePos);
@@ -806,13 +804,15 @@ function DataTable(_ref2) {
         }
 
         result.push(gridProps.width - sum(result) - scrollbarWidth);
-        resetAfterColumnIndex(0);
         return result;
       }
     }
 
     return resizedWidths;
   }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  React.useEffect(function () {
+    resetAfterColumnIndex(0);
+  }, [normalizedWidths]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -960,8 +960,7 @@ function DataTable(_ref2) {
         tableHeight: height,
         widths: normalizedWidths
       }
-    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    , {
+    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid, {
       ref: setGridRef,
       overscanRowCount: 10,
       overscanColumnCount: 5,

package/data-table/filter-menu.js

@@ -98,8 +98,7 @@ function Options(props) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  };
 
   var handleBlur = function handleBlur(event) {
     if (focusVisible !== false) {

package/data-table/header-cell.js

@@ -11,8 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _checkbox = require("../checkbox");
 
-var _locale = require("../locale");
-
 var _styles = require("../styles");
 
 var _chevronDown = _interopRequireDefault(require("../icon/chevron-down"));
@@ -48,8 +46,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var locale = React.useContext(_locale.LocaleContext);
-
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
@@ -68,7 +64,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
-  var handleBlur = function handleBlur() {
+  var handleBlur = function handleBlur(event) {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -77,64 +73,59 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    role: "button",
+    tabIndex: 0,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font350), {}, {
       alignItems: 'center',
       backgroundColor: 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
-    }))
+      paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      flexWrap: 'nowrap',
+      whiteSpace: 'nowrap',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outlineOffset: '-3px'
+    })),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onKeyUp: function onKeyUp(event) {
+      if (event.key === 'Enter') {
+        props.onSort(props.index);
+      }
+    },
+    onClick: function 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
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
     className: css({
       paddingRight: theme.sizing.scale300
     }),
     ref: checkboxRef
   }, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
-    onChange: function onChange() {
+    onChange: function onChange(e) {
       if (props.isSelectedAll || props.isSelectedIndeterminate) {
         props.onSelectNone();
       } else {
         props.onSelectAll();
       }
     },
-    "aria-label": locale.datatable.selectAllRows,
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
-  })), /*#__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 ".concat(theme.colors.accent) : 'none',
-      outlineOffset: '-3px',
-      // paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      whiteSpace: 'nowrap'
-    }),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    onKeyUp: function onKeyUp(event) {
-      if (event.key === 'Enter') {
-        props.onSort(props.index);
-      }
-    },
-    onClick: function onClick() {
-      if (props.sortable) {
-        props.onSort(props.index);
-      }
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    role: "button",
-    tabIndex: 0
-  }, props.title, /*#__PURE__*/React.createElement("div", {
+  })), props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -153,7 +144,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === _constants.SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(_chevronUp.default, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  })))));
+  }))));
 });
 HeaderCell.displayName = 'HeaderCell';
 var _default = HeaderCell;

package/data-table/locale.d.ts

@@ -32,8 +32,6 @@ export declare type DataTableLocale = {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
-    selectRow: string;
-    selectAllRows: string;
 };
 declare const locale: {
     emptyState: string;
@@ -69,7 +67,5 @@ declare const locale: {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
-    selectRow: string;
-    selectAllRows: string;
 };
 export default locale;

package/data-table/locale.js

@@ -44,9 +44,7 @@ var locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F',
-  selectRow: 'Select row',
-  selectAllRows: 'Select all rows'
+  booleanColumnFalseShort: 'F'
 };
 var _default = locale;
 exports.default = _default;

package/data-table/locale.js.flow

@@ -40,8 +40,6 @@ export type DataTableLocaleT = {|
   booleanFilterFalse: string,
   booleanColumnTrueShort: string,
   booleanColumnFalseShort: string,
-  selectRow: string,
-  selectAllRows: string,
 |};
 
 const locale = {
@@ -79,9 +77,6 @@ const locale = {
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
-  selectRow: 'Select row',
-  selectAllRows: 'Select all rows',
-
 };
 
 export default locale;

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

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

package/data-table/stateful-container.js

@@ -182,8 +182,7 @@ var StatefulContainer = function StatefulContainer(props) {
     selectedRowIds: selectedRowIds,
     sortIndex: sortIndex,
     sortDirection: sortDirection,
-    textQuery: textQuery // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    textQuery: textQuery
   });
 };
 

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

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

package/data-table/types.d.ts

@@ -1,5 +1,6 @@
-import type * as React from 'react';
-import type { COLUMNS, SORT_DIRECTIONS } from './constants';
+import * as React from 'react';
+import { COLUMNS, SORT_DIRECTIONS } from './constants';
+import type { SyntheticEvent } from 'react';
 export declare type SortDirections = typeof SORT_DIRECTIONS[keyof typeof SORT_DIRECTIONS];
 export declare type Columns = typeof COLUMNS[keyof typeof COLUMNS];
 export declare type SharedColumnOptions<Value> = {
@@ -44,7 +45,7 @@ export declare type BatchAction = {
     label: string;
     onClick: (a: {
         clearSelection: () => unknown;
-        event: React.SyntheticEvent<HTMLButtonElement>;
+        event: SyntheticEvent<HTMLButtonElement>;
         selection: Row[];
     }) => unknown;
     renderIcon?: React.ComponentType<{
@@ -54,7 +55,7 @@ export declare type BatchAction = {
 export declare type RowAction = {
     label: string;
     onClick: (a: {
-        event: React.SyntheticEvent<HTMLButtonElement>;
+        event: SyntheticEvent<HTMLButtonElement>;
         row: Row;
     }) => unknown;
     renderIcon: React.ComponentType<{

package/datepicker/calendar-header.js

@@ -83,7 +83,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var navBtnStyle = function navBtnStyle(_ref) {
   var $theme = _ref.$theme;
   return {

package/datepicker/calendar.js

@@ -333,7 +333,6 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleDateChange", function (data) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props$onChange = _this.props.onChange,
           onChange = _this$props$onChange === void 0 ? function (params) {} : _this$props$onChange;
       var updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
@@ -373,7 +372,6 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleTimeChange", function (time, index) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props$onChange2 = _this.props.onChange,
           onChange = _this$props$onChange2 === void 0 ? function (params) {} : _this$props$onChange2; // Save/update the time value in internal state
 

package/datepicker/datepicker.js

@@ -132,7 +132,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       if (Array.isArray(date)) {
         if (onChange && date.every(Boolean)) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onChange({
             date: date
           });
@@ -619,7 +618,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
-          accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
           focusLock: false,
           autoFocus: false,
           mountNode: _this4.props.mountNode,

package/datepicker/day.js

@@ -298,8 +298,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
           this.dayElm.focus();
         }
       }
-    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {

package/datepicker/index.d.ts

@@ -5,7 +5,7 @@ export { default as StatefulCalendar } from './stateful-calendar';
 export { default as Datepicker, default as DatePicker } from './datepicker';
 export { default as StatefulDatepicker, default as StatefulDatePicker, } from './stateful-datepicker';
 export { formatDate } from './utils';
-export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants';
+export { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export * from './styled-components';
 export * from '../timepicker';
 export * from '../timezonepicker';

package/datepicker/index.js

@@ -12,7 +12,6 @@ var _exportNames = {
   StatefulDatepicker: true,
   StatefulDatePicker: true,
   formatDate: true,
-  DENSITY: true,
   ORIENTATION: true,
   STATE_CHANGE_TYPE: true
 };
@@ -22,12 +21,6 @@ Object.defineProperty(exports, "Calendar", {
     return _calendar.default;
   }
 });
-Object.defineProperty(exports, "DENSITY", {
-  enumerable: true,
-  get: function get() {
-    return _constants.DENSITY;
-  }
-});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {

package/datepicker/index.js.flow

@@ -18,7 +18,7 @@ export { default as TimezonePicker } from '../timezonepicker/timezone-picker.js'
 // Util functions
 export { formatDate } from './utils/index.js';
 // Constants
-export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export * from './styled-components.js';
 // Flow

package/datepicker/stateful-calendar.js

@@ -58,13 +58,9 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          React.createElement(_calendar.default, _extends({}, extendedProps, {
-            onChange: extendedProps.onChange
-          }))
-        );
+        return /*#__PURE__*/React.createElement(_calendar.default, _extends({}, extendedProps, {
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/stateful-container.js

@@ -71,7 +71,6 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
       if (onChange) {
         if (Array.isArray(date)) {
           if (date.every(Boolean)) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange({
               date: date
             });
@@ -110,7 +109,6 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props = this.props,
           children = _this$props.children,
           initialState = _this$props.initialState,

package/datepicker/stateful-datepicker.js

@@ -56,16 +56,11 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
 
   _createClass(StatefulComponent, [{
     key: "render",
-    value: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function render() {
+    value: function render() {
       return /*#__PURE__*/React.createElement(_statefulContainer.default, this.props, function (extendedProps) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          React.createElement(_datepicker.default, _extends({}, extendedProps, {
-            onChange: extendedProps.onChange
-          }))
-        );
+        return /*#__PURE__*/React.createElement(_datepicker.default, _extends({}, extendedProps, {
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/datepicker/styled-components.js

@@ -45,7 +45,6 @@ var StyledInputWrapper = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledInputWrapper = StyledInputWrapper;
 StyledInputWrapper.displayName = "StyledInputWrapper";
-StyledInputWrapper.displayName = 'StyledInputWrapper';
 var StyledInputLabel = (0, _styles.styled)('div', function (_ref) {
   var $theme = _ref.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
@@ -54,7 +53,6 @@ var StyledInputLabel = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledInputLabel = StyledInputLabel;
 StyledInputLabel.displayName = "StyledInputLabel";
-StyledInputLabel.displayName = 'StyledInputLabel';
 var StyledStartDate = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme;
   return {
@@ -64,21 +62,18 @@ var StyledStartDate = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledStartDate = StyledStartDate;
 StyledStartDate.displayName = "StyledStartDate";
-StyledStartDate.displayName = 'StyledStartDate'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
 var StyledEndDate = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return {
     width: '100%'
   };
 });
-exports.StyledEndDate = StyledEndDate;
-StyledEndDate.displayName = "StyledEndDate";
-StyledEndDate.displayName = 'StyledEndDate';
 /**
  * Main component container element
  */
 
+exports.StyledEndDate = StyledEndDate;
+StyledEndDate.displayName = "StyledEndDate";
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   var _props$$theme = props.$theme,
       typography = _props$$theme.typography,
@@ -97,7 +92,6 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledMonthContainer = (0, _styles.styled)('div', function (props) {
   var $orientation = props.$orientation;
   return {
@@ -107,7 +101,6 @@ var StyledMonthContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledMonthContainer = StyledMonthContainer;
 StyledMonthContainer.displayName = "StyledMonthContainer";
-StyledMonthContainer.displayName = 'StyledMonthContainer';
 var StyledCalendarContainer = (0, _styles.styled)('div', function (props) {
   var sizing = props.$theme.sizing,
       $density = props.$density;
@@ -120,7 +113,6 @@ var StyledCalendarContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledCalendarContainer = StyledCalendarContainer;
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
-StyledCalendarContainer.displayName = 'StyledCalendarContainer';
 var StyledSelectorContainer = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   var textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
@@ -133,7 +125,6 @@ var StyledSelectorContainer = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledSelectorContainer = StyledSelectorContainer;
 StyledSelectorContainer.displayName = "StyledSelectorContainer";
-StyledSelectorContainer.displayName = 'StyledSelectorContainer';
 var StyledCalendarHeader = (0, _styles.styled)('div', function (props) {
   var _props$$theme2 = props.$theme,
       typography = _props$$theme2.typography,
@@ -161,7 +152,6 @@ var StyledCalendarHeader = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledCalendarHeader = StyledCalendarHeader;
 StyledCalendarHeader.displayName = "StyledCalendarHeader";
-StyledCalendarHeader.displayName = 'StyledCalendarHeader';
 var StyledMonthHeader = (0, _styles.styled)('div', function (props) {
   return {
     color: props.$theme.colors.calendarHeaderForeground,
@@ -171,7 +161,6 @@ var StyledMonthHeader = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledMonthHeader = StyledMonthHeader;
 StyledMonthHeader.displayName = "StyledMonthHeader";
-StyledMonthHeader.displayName = 'StyledMonthHeader';
 var StyledMonthYearSelectButton = (0, _styles.styled)('button', function (props) {
   var _props$$theme3 = props.$theme,
       typography = _props$$theme3.typography,
@@ -196,7 +185,6 @@ var StyledMonthYearSelectButton = (0, _styles.styled)('button', function (props)
 });
 exports.StyledMonthYearSelectButton = StyledMonthYearSelectButton;
 StyledMonthYearSelectButton.displayName = "StyledMonthYearSelectButton";
-StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
 var StyledMonthYearSelectIconContainer = (0, _styles.styled)('span', function (props) {
   var marginDirection = props.$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return _defineProperty({
@@ -206,7 +194,6 @@ var StyledMonthYearSelectIconContainer = (0, _styles.styled)('span', function (p
 });
 exports.StyledMonthYearSelectIconContainer = StyledMonthYearSelectIconContainer;
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
-StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 
 function getArrowBtnStyle(_ref6) {
   var $theme = _ref6.$theme,
@@ -238,12 +225,9 @@ function getArrowBtnStyle(_ref6) {
 var StyledPrevButton = (0, _styles.styled)('button', getArrowBtnStyle);
 exports.StyledPrevButton = StyledPrevButton;
 StyledPrevButton.displayName = "StyledPrevButton";
-StyledPrevButton.displayName = 'StyledPrevButton';
 var StyledNextButton = (0, _styles.styled)('button', getArrowBtnStyle);
 exports.StyledNextButton = StyledNextButton;
 StyledNextButton.displayName = "StyledNextButton";
-StyledNextButton.displayName = 'StyledNextButton'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
 var StyledMonth = (0, _styles.styled)('div', function (props) {
   return {
     display: 'inline-block'
@@ -251,7 +235,6 @@ var StyledMonth = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledMonth = StyledMonth;
 StyledMonth.displayName = "StyledMonth";
-StyledMonth.displayName = 'StyledMonth';
 var StyledWeek = (0, _styles.styled)('div', function (props) {
   var sizing = props.$theme.sizing;
   return {
@@ -262,7 +245,6 @@ var StyledWeek = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledWeek = StyledWeek;
 StyledWeek.displayName = "StyledWeek";
-StyledWeek.displayName = 'StyledWeek';
 
 function generateDayStyles(defaultCode, defaultStyle) {
   var _ref7;
@@ -270,8 +252,7 @@ function generateDayStyles(defaultCode, defaultStyle) {
   var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
   var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
   return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
 
 function getDayStyles(code, _ref8) {
   var colors = _ref8.colors;
@@ -603,12 +584,10 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
       content: '""'
     } : {})
   } : // a hack to make flow happy, otherwise it complains about complexity
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   {});
 });
 exports.StyledDay = StyledDay;
 StyledDay.displayName = "StyledDay";
-StyledDay.displayName = 'StyledDay';
 var StyledDayLabel = (0, _styles.styled)('div', function (props) {
   var _props$$theme5 = props.$theme,
       typography = _props$$theme5.typography,
@@ -620,7 +599,6 @@ var StyledDayLabel = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledDayLabel = StyledDayLabel;
 StyledDayLabel.displayName = "StyledDayLabel";
-StyledDayLabel.displayName = 'StyledDayLabel';
 var StyledWeekdayHeader = (0, _styles.styled)('div', function (props) {
   var _props$$theme6 = props.$theme,
       typography = _props$$theme6.typography,
@@ -650,5 +628,4 @@ var StyledWeekdayHeader = (0, _styles.styled)('div', function (props) {
   });
 });
 exports.StyledWeekdayHeader = StyledWeekdayHeader;
-StyledWeekdayHeader.displayName = "StyledWeekdayHeader";
-StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';
+StyledWeekdayHeader.displayName = "StyledWeekdayHeader";

package/datepicker/types.d.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { Size } from '../input';
-import type { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
+import { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
 import type { DateIOAdapter } from './utils/types';
 declare type Locale = any;
 export declare type Density = keyof typeof DENSITY;