baseui 10.0.0 → 10.3.0

package/select/select-component.js

@@ -24,7 +24,7 @@ var _index2 = require("../popover/index.js");
 
 var _index3 = require("../spinner/index.js");
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
+var _reactUid = require("react-uid");
 
 var _autosizeInput = _interopRequireDefault(require("./autosize-input.js"));
 
@@ -149,7 +149,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
   // the select components can accept an array of options or an object where properties are optgroups
   // and values are arrays of options. this class property is constructed and updated in a normalized
   // shape where optgroup titles are stored on the option in the __optgroup field.
-  // id generated for the listbox. used by screenreaders to associate the input with the menu it controls
   function Select(props) {
     var _this;
 
@@ -173,8 +172,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "options", []);
 
-    _defineProperty(_assertThisInitialized(_this), "listboxId", (0, _getBuiId.default)());
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       activeDescendant: null,
       inputValue: '',
@@ -230,18 +227,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
           _this.openAfterFocus = _this.props.openOnClick;
 
           _this.focus();
-
-          return;
         }
 
         if (!_this.state.isOpen) {
           _this.setState({
             isOpen: true,
+            isFocused: true,
             isPseudoFocused: false
           });
-
-          return;
         }
+
+        return;
       } // Ensures that interactive elements within the Select component do not trigger the outer click
       // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
       // should ignore those events. This comes after case where click is on input element, so that
@@ -257,11 +253,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
       if (!_this.props.searchable) {
         _this.focus();
 
-        _this.setState(function (prev) {
-          return {
-            isOpen: !prev.isOpen
-          };
-        });
+        if (_this.state.isOpen) {
+          _this.setState({
+            isOpen: false,
+            isFocused: false
+          });
+        } else {
+          _this.setState({
+            isOpen: true,
+            isFocused: true
+          });
+        }
 
         return;
       } // Cases below only apply to searchable Select component.
@@ -837,7 +839,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderInput",
-    value: function renderInput() {
+    value: function renderInput(listboxId) {
       var _this4 = this;
 
       var _this$props$overrides3 = this.props.overrides,
@@ -866,25 +868,29 @@ var Select = /*#__PURE__*/function (_React$Component) {
           "aria-disabled": this.props.disabled,
           "aria-label": label,
           "aria-labelledby": this.props['aria-labelledby'],
-          "aria-owns": this.state.isOpen ? this.listboxId : null,
+          "aria-owns": this.state.isOpen ? listboxId : null,
           "aria-required": this.props.required || null,
           onFocus: this.handleInputFocus,
-          ref: this.handleInputRef,
           tabIndex: 0
         }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
-          "aria-hidden": "true",
+          "aria-hidden": true,
           id: this.props.id || null,
-          onFocus: this.handleInputFocus,
+          ref: this.handleInputRef,
           style: {
-            display: 'none'
-          }
+            opacity: 0,
+            width: 0,
+            overflow: 'hidden',
+            border: 'none',
+            padding: 0
+          },
+          tabIndex: -1
         }));
       }
 
       return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({
         "aria-activedescendant": this.state.activeDescendant,
         "aria-autocomplete": "list",
-        "aria-controls": this.state.isOpen ? this.listboxId : null,
+        "aria-controls": this.state.isOpen ? listboxId : null,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-disabled": this.props.disabled || null,
@@ -1007,7 +1013,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function filterOptions(excludeOptions) {
       var _this5 = this;
 
-      var filterValue = this.state.inputValue; // apply filter function
+      var filterValue = this.state.inputValue.trim(); // apply filter function
 
       if (this.props.filterOptions) {
         this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
@@ -1137,63 +1143,65 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
-        return /*#__PURE__*/React.createElement(PopoverOverride // Popover does not provide ability to forward refs through, and if we were to simply
-        // apply the ref to the Root component below it would be overwritten before the popover
-        // renders it. Using this strategy, we will get a ref to the popover, then reuse its
-        // anchorRef so we can check if clicks are on the select component or not.
-        // eslint-disable-next-line flowtype/no-weak-types
-        , _extends({
-          ref: function ref(_ref4) {
-            if (!_ref4) return;
-            _this6.anchor = _ref4.anchorRef;
-          },
-          focusLock: false,
-          mountNode: _this6.props.mountNode,
-          onEsc: function onEsc() {
-            return _this6.closeMenu();
-          },
-          isOpen: isOpen,
-          popoverMargin: 0,
-          content: function content() {
-            var dropdownProps = {
-              error: _this6.props.error,
-              positive: _this6.props.positive,
-              getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
-              id: _this6.listboxId,
-              isLoading: _this6.props.isLoading,
-              labelKey: _this6.props.labelKey,
-              maxDropdownHeight: _this6.props.maxDropdownHeight,
-              multi: multi,
-              noResultsMsg: noResultsMsg,
-              onActiveDescendantChange: _this6.handleActiveDescendantChange,
-              onItemSelect: _this6.selectValue,
-              options: options,
-              overrides: overrides,
-              required: _this6.props.required,
-              searchable: _this6.props.searchable,
-              size: _this6.props.size,
-              type: type,
-              value: valueArray,
-              valueKey: _this6.props.valueKey,
-              width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
-              keyboardControlNode: _this6.anchor
-            };
-            return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
-              innerRef: _this6.dropdown
-            }, dropdownProps));
-          },
-          placement: _index2.PLACEMENT.bottom
-        }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-          onBlur: _this6.handleBlur,
-          "data-baseweb": "select"
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-          onKeyDown: _this6.handleKeyDown,
-          onClick: _this6.handleClick,
-          onTouchEnd: _this6.handleTouchEnd,
-          onTouchMove: _this6.handleTouchMove,
-          onTouchStart: _this6.handleTouchStart
-        }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === _constants.TYPE.select ? _this6.renderArrow() : null))));
+      return /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (listboxId) {
+        return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
+          return /*#__PURE__*/React.createElement(PopoverOverride // Popover does not provide ability to forward refs through, and if we were to simply
+          // apply the ref to the Root component below it would be overwritten before the popover
+          // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+          // anchorRef so we can check if clicks are on the select component or not.
+          // eslint-disable-next-line flowtype/no-weak-types
+          , _extends({
+            innerRef: function innerRef(ref) {
+              if (!ref) return;
+              _this6.anchor = ref.anchorRef;
+            },
+            focusLock: false,
+            mountNode: _this6.props.mountNode,
+            onEsc: function onEsc() {
+              return _this6.closeMenu();
+            },
+            isOpen: isOpen,
+            popoverMargin: 0,
+            content: function content() {
+              var dropdownProps = {
+                error: _this6.props.error,
+                positive: _this6.props.positive,
+                getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
+                id: listboxId,
+                isLoading: _this6.props.isLoading,
+                labelKey: _this6.props.labelKey,
+                maxDropdownHeight: _this6.props.maxDropdownHeight,
+                multi: multi,
+                noResultsMsg: noResultsMsg,
+                onActiveDescendantChange: _this6.handleActiveDescendantChange,
+                onItemSelect: _this6.selectValue,
+                options: options,
+                overrides: overrides,
+                required: _this6.props.required,
+                searchable: _this6.props.searchable,
+                size: _this6.props.size,
+                type: type,
+                value: valueArray,
+                valueKey: _this6.props.valueKey,
+                width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
+                keyboardControlNode: _this6.anchor
+              };
+              return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
+                innerRef: _this6.dropdown
+              }, dropdownProps));
+            },
+            placement: _index2.PLACEMENT.bottom
+          }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
+            onBlur: _this6.handleBlur,
+            "data-baseweb": "select"
+          }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
+            onKeyDown: _this6.handleKeyDown,
+            onClick: _this6.handleClick,
+            onTouchEnd: _this6.handleTouchEnd,
+            onTouchMove: _this6.handleTouchMove,
+            onTouchStart: _this6.handleTouchStart
+          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(listboxId), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === _constants.TYPE.select ? _this6.renderArrow() : null))));
+        });
       });
     }
   }]);

package/select/select-component.js.flow

@@ -16,7 +16,7 @@ import {LocaleContext} from '../locale/index.js';
 import type {LocaleT} from '../locale/types.js';
 import {Popover, PLACEMENT} from '../popover/index.js';
 import {Spinner} from '../spinner/index.js';
-import getBuiId from '../utils/get-bui-id.js';
+import {UIDConsumer} from 'react-uid';
 
 import AutosizeInput from './autosize-input.js';
 import {TYPE, STATE_CHANGE_TYPE} from './constants.js';
@@ -104,9 +104,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
   // shape where optgroup titles are stored on the option in the __optgroup field.
   options: ValueT = [];
 
-  // id generated for the listbox. used by screenreaders to associate the input with the menu it controls
-  listboxId: string = getBuiId();
-
   constructor(props: PropsT) {
     super(props);
     this.options = normalizeOptions(props.options);
@@ -198,16 +195,17 @@ class Select extends React.Component<PropsT, SelectStateT> {
       if (!this.state.isFocused) {
         this.openAfterFocus = this.props.openOnClick;
         this.focus();
-        return;
       }
 
       if (!this.state.isOpen) {
         this.setState({
           isOpen: true,
+          isFocused: true,
           isPseudoFocused: false,
         });
-        return;
       }
+
+      return;
     }
 
     // Ensures that interactive elements within the Select component do not trigger the outer click
@@ -222,7 +220,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
     // text input to filter the dropdown options.
     if (!this.props.searchable) {
       this.focus();
-      this.setState(prev => ({isOpen: !prev.isOpen}));
+      if (this.state.isOpen) {
+        this.setState({isOpen: false, isFocused: false});
+      } else {
+        this.setState({isOpen: true, isFocused: true});
+      }
+
       return;
     }
 
@@ -673,7 +676,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
   }
 
-  renderInput() {
+  renderInput(listboxId: string) {
     const {overrides = {}} = this.props;
     const [InputContainer, inputContainerProps] = getOverrides(
       overrides.InputContainer,
@@ -698,19 +701,25 @@ class Select extends React.Component<PropsT, SelectStateT> {
           aria-disabled={this.props.disabled}
           aria-label={label}
           aria-labelledby={this.props['aria-labelledby']}
-          aria-owns={this.state.isOpen ? this.listboxId : null}
+          aria-owns={this.state.isOpen ? listboxId : null}
           aria-required={this.props.required || null}
           onFocus={this.handleInputFocus}
-          ref={this.handleInputRef}
           tabIndex={0}
           {...sharedProps}
           {...inputContainerProps}
         >
           <input
-            aria-hidden="true"
+            aria-hidden
             id={this.props.id || null}
-            onFocus={this.handleInputFocus}
-            style={{display: 'none'}}
+            ref={this.handleInputRef}
+            style={{
+              opacity: 0,
+              width: 0,
+              overflow: 'hidden',
+              border: 'none',
+              padding: 0,
+            }}
+            tabIndex={-1}
           />
         </InputContainer>
       );
@@ -721,7 +730,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         <AutosizeInput
           aria-activedescendant={this.state.activeDescendant}
           aria-autocomplete="list"
-          aria-controls={this.state.isOpen ? this.listboxId : null}
+          aria-controls={this.state.isOpen ? listboxId : null}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}
           aria-disabled={this.props.disabled || null}
@@ -858,7 +867,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
   }
 
   filterOptions(excludeOptions: ?ValueT) {
-    const filterValue = this.state.inputValue;
+    const filterValue = this.state.inputValue.trim();
     // apply filter function
     if (this.props.filterOptions) {
       this.options = this.props.filterOptions(
@@ -989,96 +998,103 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
 
     return (
-      <LocaleContext.Consumer>
-        {locale => (
-          <PopoverOverride
-            // Popover does not provide ability to forward refs through, and if we were to simply
-            // apply the ref to the Root component below it would be overwritten before the popover
-            // renders it. Using this strategy, we will get a ref to the popover, then reuse its
-            // anchorRef so we can check if clicks are on the select component or not.
-            // eslint-disable-next-line flowtype/no-weak-types
-            ref={(ref: any) => {
-              if (!ref) return;
-              this.anchor = ref.anchorRef;
-            }}
-            focusLock={false}
-            mountNode={this.props.mountNode}
-            onEsc={() => this.closeMenu()}
-            isOpen={isOpen}
-            popoverMargin={0}
-            content={() => {
-              const dropdownProps = {
-                error: this.props.error,
-                positive: this.props.positive,
-                getOptionLabel:
-                  this.props.getOptionLabel ||
-                  this.getOptionLabel.bind(this, locale),
-                id: this.listboxId,
-                isLoading: this.props.isLoading,
-                labelKey: this.props.labelKey,
-                maxDropdownHeight: this.props.maxDropdownHeight,
-                multi,
-                noResultsMsg,
-                onActiveDescendantChange: this.handleActiveDescendantChange,
-                onItemSelect: this.selectValue,
-                options,
-                overrides,
-                required: this.props.required,
-                searchable: this.props.searchable,
-                size: this.props.size,
-                type,
-                value: valueArray,
-                valueKey: this.props.valueKey,
-                width: this.anchor.current
-                  ? this.anchor.current.clientWidth
-                  : null,
-                keyboardControlNode: this.anchor,
-              };
-
-              return (
-                <SelectDropdown innerRef={this.dropdown} {...dropdownProps} />
-              );
-            }}
-            placement={PLACEMENT.bottom}
-            {...popoverProps}
-          >
-            <Root
-              onBlur={this.handleBlur}
-              data-baseweb="select"
-              {...sharedProps}
-              {...rootProps}
-            >
-              <ControlContainer
-                onKeyDown={this.handleKeyDown}
-                onClick={this.handleClick}
-                onTouchEnd={this.handleTouchEnd}
-                onTouchMove={this.handleTouchMove}
-                onTouchStart={this.handleTouchStart}
-                {...sharedProps}
-                {...controlContainerProps}
+      <UIDConsumer>
+        {listboxId => (
+          <LocaleContext.Consumer>
+            {locale => (
+              <PopoverOverride
+                // Popover does not provide ability to forward refs through, and if we were to simply
+                // apply the ref to the Root component below it would be overwritten before the popover
+                // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+                // anchorRef so we can check if clicks are on the select component or not.
+                // eslint-disable-next-line flowtype/no-weak-types
+                innerRef={(ref: any) => {
+                  if (!ref) return;
+                  this.anchor = ref.anchorRef;
+                }}
+                focusLock={false}
+                mountNode={this.props.mountNode}
+                onEsc={() => this.closeMenu()}
+                isOpen={isOpen}
+                popoverMargin={0}
+                content={() => {
+                  const dropdownProps = {
+                    error: this.props.error,
+                    positive: this.props.positive,
+                    getOptionLabel:
+                      this.props.getOptionLabel ||
+                      this.getOptionLabel.bind(this, locale),
+                    id: listboxId,
+                    isLoading: this.props.isLoading,
+                    labelKey: this.props.labelKey,
+                    maxDropdownHeight: this.props.maxDropdownHeight,
+                    multi,
+                    noResultsMsg,
+                    onActiveDescendantChange: this.handleActiveDescendantChange,
+                    onItemSelect: this.selectValue,
+                    options,
+                    overrides,
+                    required: this.props.required,
+                    searchable: this.props.searchable,
+                    size: this.props.size,
+                    type,
+                    value: valueArray,
+                    valueKey: this.props.valueKey,
+                    width: this.anchor.current
+                      ? this.anchor.current.clientWidth
+                      : null,
+                    keyboardControlNode: this.anchor,
+                  };
+
+                  return (
+                    <SelectDropdown
+                      innerRef={this.dropdown}
+                      {...dropdownProps}
+                    />
+                  );
+                }}
+                placement={PLACEMENT.bottom}
+                {...popoverProps}
               >
-                {type === TYPE.search ? this.renderSearch() : null}
-                <ValueContainer {...sharedProps} {...valueContainerProps}>
-                  {this.renderValue(valueArray, isOpen, locale)}
-                  {this.renderInput()}
-                  {this.shouldShowPlaceholder() ? (
-                    <Placeholder {...sharedProps} {...placeholderProps}>
-                      {typeof this.props.placeholder !== 'undefined'
-                        ? this.props.placeholder
-                        : locale.select.placeholder}
-                    </Placeholder>
-                  ) : null}
-                </ValueContainer>
-                <IconsContainer {...sharedProps} {...iconsContainerProps}>
-                  {this.renderLoading()}
-                  {this.renderClear()}
-                  {type === TYPE.select ? this.renderArrow() : null}
-                </IconsContainer>
-              </ControlContainer>
-            </Root>
-          </PopoverOverride>
+                <Root
+                  onBlur={this.handleBlur}
+                  data-baseweb="select"
+                  {...sharedProps}
+                  {...rootProps}
+                >
+                  <ControlContainer
+                    onKeyDown={this.handleKeyDown}
+                    onClick={this.handleClick}
+                    onTouchEnd={this.handleTouchEnd}
+                    onTouchMove={this.handleTouchMove}
+                    onTouchStart={this.handleTouchStart}
+                    {...sharedProps}
+                    {...controlContainerProps}
+                  >
+                    {type === TYPE.search ? this.renderSearch() : null}
+                    <ValueContainer {...sharedProps} {...valueContainerProps}>
+                      {this.renderValue(valueArray, isOpen, locale)}
+                      {this.renderInput(listboxId)}
+                      {this.shouldShowPlaceholder() ? (
+                        <Placeholder {...sharedProps} {...placeholderProps}>
+                          {typeof this.props.placeholder !== 'undefined'
+                            ? this.props.placeholder
+                            : locale.select.placeholder}
+                        </Placeholder>
+                      ) : null}
+                    </ValueContainer>
+                    <IconsContainer {...sharedProps} {...iconsContainerProps}>
+                      {this.renderLoading()}
+                      {this.renderClear()}
+                      {type === TYPE.select ? this.renderArrow() : null}
+                    </IconsContainer>
+                  </ControlContainer>
+                </Root>
+              </PopoverOverride>
+            )}
+          </LocaleContext.Consumer>
         )}
-      </LocaleContext.Consumer>
+      </UIDConsumer>
     );
   }
 }

package/snackbar/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Override} from './overrides';
+import {Override} from '../overrides';
 import {DURATION, PLACEMENT} from './constants.js';
 export {DURATION, PLACEMENT} from './constants.js';
 
@@ -32,14 +32,14 @@ export type SnackbarElementPropsT = {
   actionMessage?: string;
   actionOnClick?: (event: React.MouseEvent<HTMLButtonElement>) => any;
   focus?: boolean;
-  message: string;
+  message: React.ReactNode;
   overrides?: SnackbarElementOverridesT;
   progress?: boolean;
   startEnhancer?: React.FC<{size: number}>;
 };
 
 export type SnackbarProviderPropsT = {
-  children?: React.Node;
+  children?: React.ReactNode;
   overrides?: SnackbarElementOverridesT & {
     PlacementContainer?: Override<any>;
   };

package/snackbar/types.js.flow

@@ -45,7 +45,7 @@ export type SnackbarElementPropsT = {|
   // if action button preset focus it, defaults to true
   focus?: boolean,
   // primary message displayed in snackbar
-  message: string,
+  message: React.Node,
   overrides?: SnackbarElementOverridesT,
   // renders spinner in start enhancer position
   progress?: boolean,

package/table-semantic/index.d.ts

@@ -57,6 +57,7 @@ export interface TableBuilderProps<RowT> {
   isLoading?: boolean;
   loadingMessage?: React.ReactNode | (() => React.ReactNode);
   emptyMessage?: React.ReactNode | (() => React.ReactNode);
+  size?: SIZE[keyof SIZE];
 }
 export class TableBuilder<RowT> extends React.Component<
   TableBuilderProps<RowT>

package/table-semantic/styled-components.js

@@ -56,7 +56,7 @@ var StyledTable = (0, _index.styled)('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
   return {
-    borderCollapse: 'collapse',
+    borderSpacing: '0',
     boxSizing: 'border-box',
     minWidth: '100%',
     width: $width || null
@@ -166,15 +166,8 @@ var StyledTableBody = (0, _index.styled)('tbody', function (_ref10) {
 exports.StyledTableBody = StyledTableBody;
 StyledTableBody.displayName = "StyledTableBody";
 var StyledTableBodyRow = (0, _index.styled)('tr', function (_ref11) {
-  var $theme = _ref11.$theme,
-      $divider = _ref11.$divider;
-  var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
+  var $theme = _ref11.$theme;
   return {
-    ':not(:last-child)': {
-      borderBottomColor: borderHorizontal ? $theme.borders.border300.borderColor : null,
-      borderBottomStyle: borderHorizontal ? $theme.borders.border300.borderStyle : null,
-      borderBottomWidth: borderHorizontal ? $theme.borders.border300.borderWidth : null
-    },
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
     }
@@ -188,9 +181,11 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
   var $theme = _ref12.$theme,
       $size = _ref12.$size,
       $divider = _ref12.$divider,
-      $isNumeric = _ref12.$isNumeric;
+      $isNumeric = _ref12.$isNumeric,
+      $isLastRow = _ref12.$isLastRow;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
+  var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
@@ -200,6 +195,9 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
     color: $theme.colors.contentPrimary,
     textAlign: $isNumeric ? 'right' : null,
     verticalAlign: 'top',
+    borderBottomColor: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderColor : null,
+    borderBottomStyle: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderStyle : null,
+    borderBottomWidth: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderWidth : null,
     ':not(:last-child)': (_notLastChild2 = {}, _defineProperty(_notLastChild2, "border".concat(borderDir, "Color"), borderVertical ? $theme.borders.border300.borderColor : null), _defineProperty(_notLastChild2, "border".concat(borderDir, "Style"), borderVertical ? $theme.borders.border300.borderStyle : null), _defineProperty(_notLastChild2, "border".concat(borderDir, "Width"), borderVertical ? $theme.borders.border300.borderWidth : null), _notLastChild2)
   });
 });