baseui 12.0.0 → 12.1.0

package/es/card/styled-components.js

@@ -4,12 +4,14 @@ 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, expandBorderStyles } from '../styles';
+import { styled, expandBorderStyles } from '../styles'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const Action = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.LabelMedium
 }));
 Action.displayName = "Action";
+Action.displayName = 'Action';
 export const Body = styled('div', ({
   $theme
 }) => ({
@@ -18,6 +20,7 @@ export const Body = styled('div', ({
   ...$theme.typography.ParagraphMedium
 }));
 Body.displayName = "Body";
+Body.displayName = 'Body';
 export const Contents = styled('div', ({
   $theme
 }) => ({
@@ -27,6 +30,7 @@ export const Contents = styled('div', ({
   marginBottom: $theme.sizing.scale600
 }));
 Contents.displayName = "Contents";
+Contents.displayName = 'Contents';
 export const HeaderImage = styled('img', ({
   $theme
 }) => ({
@@ -34,10 +38,11 @@ export const HeaderImage = styled('img', ({
   borderTopRightRadius: $theme.borders.surfaceBorderRadius,
   objectFit: 'contain',
   maxWidth: '100%'
-})); // by using the section tag, we can keep the h1 for the title
+}));
+HeaderImage.displayName = "HeaderImage";
+HeaderImage.displayName = 'HeaderImage'; // by using the section tag, we can keep the h1 for the title
 // https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
 
-HeaderImage.displayName = "HeaderImage";
 export const Root = styled('section', ({
   $theme
 }) => ({
@@ -61,6 +66,7 @@ export const Root = styled('section', ({
   overflow: 'hidden'
 }));
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const Thumbnail = styled('img', ({
   $theme
 }) => ({
@@ -76,6 +82,7 @@ export const Thumbnail = styled('img', ({
   margin: `0 0 ${$theme.sizing.scale500} ${$theme.sizing.scale500}`
 }));
 Thumbnail.displayName = "Thumbnail";
+Thumbnail.displayName = 'Thumbnail';
 export const Title = styled('h1', ({
   $theme
 }) => ({ ...$theme.typography.HeadingSmall,
@@ -89,4 +96,5 @@ export const Title = styled('h1', ({
   paddingRight: 0,
   paddingBottom: 0
 }));
-Title.displayName = "Title";
+Title.displayName = "Title";
+Title.displayName = 'Title';

package/es/checkbox/index.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 { default as StatefulCheckbox } from './stateful-checkbox';
 export { default as StatefulContainer } from './stateful-checkbox-container';
 export { default as Checkbox } from './checkbox'; // Styled elements

package/es/checkbox/stateful-checkbox-container.js

@@ -78,8 +78,11 @@ class StatefulCheckboxContainer extends React.Component {
 
   render() {
     const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children = childProps => null,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
       ...restProps
     } = this.props;

package/es/checkbox/styled-components.js

@@ -155,6 +155,7 @@ export const Root = styled('label', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const Checkmark = styled('span', props => {
   const {
     $checked,
@@ -179,7 +180,7 @@ export const Checkmark = styled('span', props => {
       <path d="M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z" fill="${tickColor}"/>
     </svg>
   `);
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',
@@ -222,6 +223,7 @@ export const Checkmark = styled('span', props => {
   };
 });
 Checkmark.displayName = "Checkmark";
+Checkmark.displayName = 'Checkmark';
 export const Label = styled('div', props => {
   const {
     $theme
@@ -236,9 +238,10 @@ export const Label = styled('div', props => {
     ...typography.LabelMedium,
     lineHeight: '24px'
   };
-}); // tricky style for focus event cause display: none doesn't work
-
+});
 Label.displayName = "Label";
+Label.displayName = 'Label'; // tricky style for focus event cause display: none doesn't work
+
 export const Input = styled('input', {
   opacity: 0,
   width: 0,
@@ -249,6 +252,7 @@ export const Input = styled('input', {
   position: 'absolute'
 });
 Input.displayName = "Input";
+Input.displayName = 'Input';
 export const Toggle = styled('div', props => {
   let backgroundColor = props.$theme.colors.toggleFill;
 
@@ -275,6 +279,7 @@ export const Toggle = styled('div', props => {
   };
 });
 Toggle.displayName = "Toggle";
+Toggle.displayName = 'Toggle';
 export const ToggleTrack = styled('div', props => {
   let backgroundColor = props.$theme.colors.toggleTrackFill;
 
@@ -300,4 +305,5 @@ export const ToggleTrack = styled('div', props => {
     width: props.$theme.sizing.scale1000
   };
 });
-ToggleTrack.displayName = "ToggleTrack";
+ToggleTrack.displayName = "ToggleTrack";
+ToggleTrack.displayName = 'ToggleTrack';

package/es/combobox/combobox.js

@@ -163,6 +163,7 @@ function Combobox(props) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -231,76 +232,82 @@ function Combobox(props) {
     overrides: popoverOverrides = {},
     ...restPopoverProps
   }] = getOverrides(overrides.Popover, Popover);
-  return /*#__PURE__*/React.createElement(Root, _extends({
-    ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
-  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
-  // Select Component does the same thing
-  , _extends({
-    autoFocus: false,
-    isOpen: isOpen,
-    overrides: popoverOverrides,
-    placement: PLACEMENT.bottomLeft,
-    onClick: handleInputClick,
-    content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(Root, _extends({
+      ref: rootRef
+    }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+    // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+    // Select Component does the same thing
     , _extends({
-      tabIndex: "-1",
-      id: listboxId,
-      ref: listboxRef,
-      role: "listbox",
-      "aria-label": listBoxLabel,
-      $width: listboxWidth
-    }, listBoxProps), options.map((option, index) => {
-      const isSelected = selectionIndex === index;
-      const ReplacementNode = mapOptionToNode;
-      return (
-        /*#__PURE__*/
-        // List items are not focusable, therefore will never trigger a key event from it.
-        // Secondly, key events are handled from the input element.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement(ListItem, _extends({
-          "aria-selected": isSelected,
-          id: isSelected ? activeDescendantId : null,
-          key: index,
-          onClick: () => handleOptionClick(index),
-          ref: isSelected ? selectedOptionRef : null,
-          role: "option",
-          $isSelected: isSelected,
-          $size: size
-        }, listItemProps), ReplacementNode ? /*#__PURE__*/React.createElement(ReplacementNode, {
-          isSelected: isSelected,
-          option: option
-        }) : mapOptionToString(option))
-      );
-    }))
-  }, restPopoverProps), /*#__PURE__*/React.createElement(InputContainer, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
-    "aria-owns": listboxId // a11y linter implements the older 1.0 spec, suppressing to use updated 1.1
-    // https://github.com/A11yance/aria-query/issues/43
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/442
-    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-    ,
-    role: "combobox"
-  }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
-    inputRef: handleInputRef,
-    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
-    "aria-autocomplete": "list",
-    disabled: disabled,
-    error: error,
-    name: name,
-    id: id,
-    onBlur: handleBlur,
-    onChange: handleInputChange,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    overrides: inputOverrides,
-    positive: positive,
-    size: size,
-    value: tempValue ? tempValue : value
-  }, isOpen ? {
-    'aria-controls': listboxId
-  } : {}, restInputProps)))));
+      autoFocus: false,
+      isOpen: isOpen,
+      overrides: popoverOverrides,
+      placement: PLACEMENT.bottomLeft,
+      onClick: handleInputClick,
+      content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
+      , _extends({
+        tabIndex: "-1",
+        id: listboxId // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ,
+        ref: listboxRef,
+        role: "listbox",
+        "aria-label": listBoxLabel,
+        $width: listboxWidth
+      }, listBoxProps), options.map((option, index) => {
+        const isSelected = selectionIndex === index;
+        const ReplacementNode = mapOptionToNode;
+        return (
+          /*#__PURE__*/
+          // List items are not focusable, therefore will never trigger a key event from it.
+          // Secondly, key events are handled from the input element.
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+          React.createElement(ListItem, _extends({
+            "aria-selected": isSelected,
+            id: isSelected ? activeDescendantId : null,
+            key: index,
+            onClick: () => handleOptionClick(index) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ,
+            ref: isSelected ? selectedOptionRef : null,
+            role: "option",
+            $isSelected: isSelected,
+            $size: size
+          }, listItemProps), ReplacementNode ? /*#__PURE__*/React.createElement(ReplacementNode, {
+            isSelected: isSelected,
+            option: option
+          }) : mapOptionToString(option))
+        );
+      }))
+    }, restPopoverProps), /*#__PURE__*/React.createElement(InputContainer, _extends({
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-owns": listboxId // a11y linter implements the older 1.0 spec, suppressing to use updated 1.1
+      // https://github.com/A11yance/aria-query/issues/43
+      // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/442
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
+      role: "combobox"
+    }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
+      inputRef: handleInputRef,
+      "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
+      "aria-autocomplete": "list",
+      disabled: disabled,
+      error: error,
+      name: name,
+      id: id,
+      onBlur: handleBlur,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      overrides: inputOverrides,
+      positive: positive,
+      size: size,
+      value: tempValue ? tempValue : value
+    }, isOpen ? {
+      'aria-controls': listboxId
+    } : {}, restInputProps)))))
+  );
 }
 
 export default Combobox;

package/es/combobox/styled-components.js

@@ -8,8 +8,10 @@ import { SIZE } from '../input';
 import { styled } from '../styles';
 export const StyledRoot = styled('div', {});
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledInputContainer = styled('div', {});
 StyledInputContainer.displayName = "StyledInputContainer";
+StyledInputContainer.displayName = 'StyledInputContainer';
 export const StyledListBox = styled('ul', ({
   $theme,
   $width
@@ -26,6 +28,7 @@ export const StyledListBox = styled('ul', ({
   };
 });
 StyledListBox.displayName = "StyledListBox";
+StyledListBox.displayName = 'StyledListBox';
 
 function buildStylesForSize(size, theme) {
   const paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
@@ -74,4 +77,5 @@ export const StyledListItem = styled('li', ({
     }
   };
 });
-StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = 'StyledListItem';

package/es/data-table/column-anchor.js

@@ -12,6 +12,7 @@ import { useStyletron } from '../styles';
 import Column from './column';
 import { COLUMNS } from './constants';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function AnchorFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for anchor column");
 }
@@ -34,7 +35,9 @@ function AnchorCell(props) {
 function AnchorColumn(options) {
   return Column({
     kind: COLUMNS.ANCHOR,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     buildFilter: function (params) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       return function (data) {
         return true;
       };

package/es/data-table/column-datetime.js

@@ -27,7 +27,8 @@ import { Select } from '../select';
 import Column from './column';
 import { COLUMNS, DATETIME_OPERATIONS } from './constants';
 import FilterShell from './filter-shell';
-import { LocaleContext } from '../locale';
+import { LocaleContext } from '../locale'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 const DATE_FORMAT = 'MM-dd-yyyy';
 const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
@@ -175,7 +176,8 @@ function DatetimeFilter(props) {
   const [exclude, setExclude] = React.useState(initialState.exclude);
   const [comparatorIndex, setComparatorIndex] = React.useState(initialState.comparatorIndex);
   const [rangeOperator, setRangeOperator] = React.useState([initialState.rangeOperator]);
-  const [categoricalOperator, setCategoricalOperator] = React.useState([initialState.categoricalOperator]);
+  const [categoricalOperator, setCategoricalOperator] = React.useState([initialState.categoricalOperator]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const [rangeDates, setRangeDates] = React.useState(initialState.rangeDates.length ? initialState.rangeDates : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]);
   const [years, setYears] = React.useState(initialState.years);
   const [halves, setHalves] = React.useState(initialState.halves);
@@ -189,6 +191,7 @@ function DatetimeFilter(props) {
     onExcludeChange: () => setExclude(!exclude),
     onApply: () => {
       if (isRange) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const op = rangeOperator[0].id;
         let description = '';
 
@@ -216,6 +219,7 @@ function DatetimeFilter(props) {
       }
 
       if (isCategorical) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const op = categoricalOperator[0].id;
         let selection = [];
         let operatorLocaleLabelKey = '';
@@ -297,7 +301,8 @@ function DatetimeFilter(props) {
     }
   }, locale.datatable.datetimeFilterCategorical)), isRange && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
     value: rangeOperator,
-    onChange: params => setRangeOperator(params.value),
+    onChange: params => setRangeOperator(params.value) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(op => ({
       label: locale.datatable[op.localeLabelKey],
@@ -309,7 +314,8 @@ function DatetimeFilter(props) {
     className: css({
       paddingTop: theme.sizing.scale600
     })
-  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker, {
+  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , {
     mountNode: mountNode.current,
     value: rangeDates,
     onChange: ({
@@ -370,7 +376,8 @@ function DatetimeFilter(props) {
     options: CATEGORICAL_OPERATIONS.map(op => ({
       label: locale.datatable[op.localeLabelKey],
       id: op.id
-    })),
+    })) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
     mountNode: mountNode.current,
     size: "compact",
     clearable: false

package/es/data-table/column-numerical.js

@@ -64,12 +64,14 @@ function validateInput(input) {
 }
 
 const bisect = bisector(d => d.x0);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Histogram = /*#__PURE__*/React.memo(function Histogram({
   data,
   lower,
   upper,
   isRange,
   exclude,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   precision
 }) {
   const [css, theme] = useStyletron();
@@ -309,6 +311,7 @@ function NumericalFilter(props) {
       }) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, $value[$thumbIndex]);
       },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       TickBar: ({
         $min,
         $max
@@ -323,9 +326,7 @@ function NumericalFilter(props) {
         })
       },
       InnerTrack: {
-        style: ({
-          $theme
-        }) => {
+        style: () => {
           if (!isRange) {
             return {
               // For range selection we use the color as is, but when selecting the single value,
@@ -421,7 +422,7 @@ const defaultOptions = {
   sortable: true,
   filterable: true,
   format: NUMERICAL_FORMATS.DEFAULT,
-  highlight: n => false,
+  highlight: () => false,
   precision: 0
 };
 

package/es/data-table/column-string.js

@@ -12,6 +12,7 @@ import Column from './column';
 import { COLUMNS } from './constants';
 import { HighlightCellText } from './text-search';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function StringFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for string column");
 }
@@ -35,7 +36,9 @@ function StringColumn(options) {
   return Column({
     kind: COLUMNS.STRING,
     cellBlockAlign: options.cellBlockAlign,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     buildFilter: function (params) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       return function (data) {
         return true;
       };

package/es/data-table/column.js

@@ -6,6 +6,7 @@ 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';
 
 function Column(options) {
@@ -19,8 +20,9 @@ function Column(options) {
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
     // todo(flow->ts) add proper type annotation
-    // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     renderCell: /*#__PURE__*/React.forwardRef((props, ref) => {
+      const locale = React.useContext(LocaleContext);
       const [css, theme] = useStyletron();
       const ProvidedCell = options.renderCell;
       let cellBlockAlign = 'flex-start';
@@ -55,6 +57,7 @@ function Column(options) {
           paddingRight: theme.sizing.scale300
         })
       }, /*#__PURE__*/React.createElement(Checkbox, {
+        "aria-label": locale.datatable.selectRow,
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {

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

@@ -129,7 +129,8 @@ HeaderContext.displayName = 'HeaderContext';
 function Header(props) {
   const [css, theme] = useStyletron();
   const [startResizePos, setStartResizePos] = React.useState(0);
-  const [endResizePos, setEndResizePos] = React.useState(0);
+  const [endResizePos, setEndResizePos] = React.useState(0); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const headerCellRef = React.useRef(null);
   const RULER_OFFSET = 2;
   const isResizingThisColumn = props.resizeIndex === props.index;
@@ -172,7 +173,8 @@ function Header(props) {
           }
         }
       }
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
     function handleMouseUp(event) {
       props.onResize(props.index, endResizePos - startResizePos);
@@ -777,7 +779,8 @@ export function DataTable({
       tableHeight: height,
       widths: normalizedWidths
     }
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, {
+  }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , {
     ref: setGridRef,
     overscanRowCount: 10,
     overscanColumnCount: 5,

package/es/data-table/filter-menu.js

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