baseui 12.1.3 → 13.0.0

package/es/system-banner/index.js

@@ -0,0 +1,8 @@
+/*
+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.
+*/
+export { SystemBanner } from './system-banner';
+export * from './styled-components';

package/es/system-banner/styled-components.js

@@ -0,0 +1,71 @@
+/*
+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 { withStyle } from '../styles';
+import { StyledRoot as StyledBannerRoot, StyledLeadingContent as StyledBannerLeadingContent, StyledMessageContent as StyledBannerMessageContent, StyledTrailingIconButton as StyledBannerTrailingIconButton } from '../banner';
+import { getMediaQueryPageMargins, getMinimumPageMargins } from '../helpers/responsive-helpers';
+export const StyledRoot = withStyle(StyledBannerRoot, ({
+  $isButton,
+  $theme
+}) => ({ ...($isButton ? {
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    },
+    // button style reset
+    '-webkit-appearance': 'none',
+    textAlign: 'inherit',
+    boxShadow: 'none',
+    cursor: 'pointer',
+    border: 'none',
+    alignItems: 'center'
+  } : {}),
+  ...getMediaQueryPageMargins($theme),
+  ...getMinimumPageMargins($theme.grid.margins),
+  borderRadius: 0,
+  margin: 0
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledLeadingContent = withStyle(StyledBannerLeadingContent, () => ({
+  padding: 0
+}));
+StyledLeadingContent.displayName = "StyledLeadingContent";
+StyledLeadingContent.displayName = 'StyledLeadingContent';
+export const StyledTrailingIconButton = withStyle(StyledBannerTrailingIconButton, () => ({
+  ':hover': {
+    boxShadow: 'none'
+  },
+  ':active': {
+    boxShadow: 'none'
+  }
+}));
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';
+export const StyledMessageContent = withStyle(StyledBannerMessageContent, () => ({
+  // button styles reset
+  backgroundColor: 'transparent',
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  borderRightWidth: 0,
+  borderTopWidth: 0,
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  cursor: 'pointer',
+  ':hover': {
+    boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+  },
+  ':active': {
+    boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+  }
+}));
+StyledMessageContent.displayName = "StyledMessageContent";
+StyledMessageContent.displayName = 'StyledMessageContent';

package/es/system-banner/system-banner.js

@@ -0,0 +1,81 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+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 * as React from 'react';
+import { Banner, ARTWORK_TYPE, HIERARCHY } from '../banner';
+import { StyledRoot, StyledLeadingContent, StyledTrailingIconButton, StyledMessageContent } from './styled-components';
+import { mergeOverride } from '../helpers/overrides';
+export function SystemBanner(props) {
+  const {
+    artworkIcon,
+    primaryAction,
+    secondaryAction,
+    overrides = {},
+    ...restProps
+  } = props;
+  const {
+    Root,
+    LeadingContent,
+    TrailingIconButton,
+    MessageContent,
+    ...restOverrides
+  } = overrides;
+  const hasSinglePrimaryAction = primaryAction?.onClick && !secondaryAction;
+  const hasTwoActions = primaryAction?.onClick && secondaryAction?.onClick;
+  const hasTrailingIcon = hasSinglePrimaryAction && primaryAction.icon;
+  const systemBannerRootOverrides = {
+    component: StyledRoot,
+    props: hasSinglePrimaryAction ? {
+      $isButton: true,
+      $as: 'button',
+      onClick: primaryAction.onClick,
+      'aria-label': primaryAction.label
+    } : {}
+  };
+  const systemBannerLeadingContentOverrides = {
+    component: StyledLeadingContent
+  };
+  const styledTrailingIconButtonOverrides = {
+    component: StyledTrailingIconButton,
+    props: {
+      $as: 'div'
+    }
+  };
+  const systemBannerMessageContentOverrides = {
+    component: StyledMessageContent,
+    props: {
+      $as: 'button',
+      onClick: primaryAction?.onClick,
+      'aria-label': primaryAction?.label
+    }
+  };
+  const systemBannerOverrides = {
+    Root: mergeOverride(systemBannerRootOverrides, Root || {}),
+    LeadingContent: mergeOverride(systemBannerLeadingContentOverrides, LeadingContent || {}),
+    TrailingIconButton: hasTrailingIcon ? mergeOverride(styledTrailingIconButtonOverrides, TrailingIconButton || {}) : {},
+    MessageContent: hasTwoActions ? mergeOverride(systemBannerMessageContentOverrides, MessageContent || {}) : {},
+    ...restOverrides
+  };
+  return /*#__PURE__*/React.createElement(Banner, _extends({
+    action: secondaryAction ? {
+      onClick: null,
+      ...secondaryAction
+    } : hasTrailingIcon ? {
+      icon: primaryAction.icon,
+      onClick: null,
+      label: null
+    } : null,
+    hierarchy: HIERARCHY.high,
+    overrides: systemBannerOverrides
+  }, artworkIcon ? {
+    artwork: {
+      icon: artworkIcon,
+      type: ARTWORK_TYPE.icon
+    }
+  } : {}, restProps));
+}

package/es/system-banner/types.js

@@ -0,0 +1 @@
+export {};

package/es/table/styled-components.js

@@ -133,6 +133,7 @@ export const StyledRow = withWrapper(StyledRowElement, StyledComponent => functi
     role: "row"
   }, props));
 });
+// @ts-ignore
 const StyledCellElement = styled('div', ({
   $theme,
   $striped

package/es/table/table.js

@@ -43,7 +43,9 @@ export default class Table extends React.Component {
 }
 
 _defineProperty(Table, "defaultProps", {
+  // @ts-ignore
   columns: [],
+  // @ts-ignore
   data: [[]],
   isLoading: false
 });

package/es/table-semantic/styled-components.js

@@ -10,6 +10,7 @@ import ChevronUp from '../icon/chevron-up';
 import { styled, withStyle, expandBorderStyles } from '../styles';
 import { SIZE, DIVIDER } from './constants';
 
+// @ts-ignore
 function sizeToCellPadding($theme, $size) {
   if ($size === SIZE.compact) {
     return $theme.sizing.scale500;
@@ -43,6 +44,7 @@ export const StyledRoot = styled('div', ({
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 export const StyledTable = styled('table', ({
   $theme,
   $width
@@ -75,8 +77,7 @@ StyledTableHeadRow.displayName = 'StyledTableHeadRow';
 export const StyledTableHeadCell = styled('th', ({
   $theme,
   $size,
-  $divider,
-  $isNumeric
+  $divider
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -90,7 +91,7 @@ export const StyledTableHeadCell = styled('th', ({
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
     whiteSpace: 'nowrap',
     zIndex: 1,
     ...($divider === DIVIDER.clean ? {} : {
@@ -113,7 +114,6 @@ export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
 }) => {
   return {
     cursor: 'pointer',
-    paddingRight: $theme.sizing.scale1000,
     outline: 'none',
     ':focus': {
       outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
@@ -196,13 +196,13 @@ export const StyledTableBodyRow = styled('tr', ({
 });
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
 StyledTableBodyRow.displayName = 'StyledTableBodyRow';
-export const StyledTableBodyCell = styled('td', ({
+export const StyledTableBodyCell = styled('td', // @ts-ignore
+({
   $theme,
   $size,
   $divider,
   $isNumeric,
-  $isLastRow,
-  $isSortable
+  $isLastRow
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -210,7 +210,7 @@ export const StyledTableBodyCell = styled('td', ({
   const padding = sizeToCellPadding($theme, $size);
   return { ...$theme.typography.font200,
     paddingTop: padding,
-    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
+    paddingRight: padding,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/es/table-semantic/table-builder.js

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortIconContainer } from './styled-components';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeConfigurationOverrides } from '../helpers/overrides';
 import Blank from '../icon/blank';
 import ChevronDown from '../icon/chevron-down';
 import ChevronUp from '../icon/chevron-up';
@@ -72,7 +72,7 @@ export default class TableBuilder extends React.Component {
     const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
     const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
     const columns = React.Children.toArray(children).filter(Boolean) // @ts-expect-error todo(flow->ts): limit children to be only react elements
-    .map(child => child.props);
+    .map(child => child.props); // @ts-ignore
 
     function renderHeader(col, colIndex, isFocusVisible) {
       const colOverrides = col.overrides || {};
@@ -90,37 +90,32 @@ export default class TableBuilder extends React.Component {
       }
 
       const [ColTableHeadCellSortable, colTableHeadCellSortableProps] = getOverrides(colOverrides.TableHeadCellSortable, TableHeadCellSortable);
-      let sortIcon = null;
-      let sortLabel = 'not sorted';
+      let SortIcon, sortIconProps, sortLabel;
 
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
-          sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortAscIconProps));
+          SortIcon = SortAscIcon;
+          sortIconProps = sortAscIconProps;
           sortLabel = 'ascending sorting';
           break;
 
         case 'DESC':
-          sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortDescIconProps));
+          SortIcon = SortDescIcon;
+          sortIconProps = sortDescIconProps;
           sortLabel = 'descending sorting';
           break;
 
         default:
-          sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortNoneIconProps));
+          SortIcon = SortNoneIcon;
+          sortIconProps = sortNoneIconProps;
+          sortLabel = 'not sorted';
           break;
-      }
+      } // add background-color: inherit on container for non-Blank icons
+
 
+      const sortIconContainerStyle = SortIcon === Blank ? sortIconContainerProps.$style : mergeConfigurationOverrides({
+        backgroundColor: 'inherit'
+      }, sortIconContainerProps.$style);
       return /*#__PURE__*/React.createElement(ColTableHeadCellSortable, _extends({
         key: colIndex,
         $col: col,
@@ -138,8 +133,15 @@ export default class TableBuilder extends React.Component {
             onSort && onSort(col.id);
           }
         }
-      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
-    }
+      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, _extends({}, sortIconContainerProps, {
+        $style: sortIconContainerStyle
+      }), /*#__PURE__*/React.createElement(SortIcon, _extends({
+        size: "16px",
+        "aria-hidden": "true",
+        role: "presentation"
+      }, sortIconProps))));
+    } // @ts-ignore
+
 
     function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
       const colOverrides = col.overrides || {};
@@ -183,6 +185,7 @@ export default class TableBuilder extends React.Component {
 }
 
 _defineProperty(TableBuilder, "defaultProps", {
+  // @ts-ignore
   data: [],
   loadingMessage: 'Loading...'
 });

package/es/table-semantic/table.js

@@ -72,7 +72,9 @@ export default class Table extends React.Component {
 }
 
 _defineProperty(Table, "defaultProps", {
+  // @ts-ignore
   columns: [],
+  // @ts-ignore
   data: [[]],
   loadingMessage: 'Loading...'
 });

package/es/tabs/stateful-tabs.js

@@ -43,8 +43,8 @@ export default class StatefulTabs extends React.Component {
     if (initialState && initialState.activeKey) {
       return initialState.activeKey;
     } else {
-      return React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
-      (child, index) => child.key || String(index))[0];
+      // @ts-ignore
+      return React.Children.map(children, (child, index) => child.key || String(index))[0];
     }
   }
 

package/es/tabs-motion/stateful-tabs.js

@@ -14,6 +14,7 @@ const getInitialState = (children, initialState) => {
   if (initialState && initialState.activeKey) {
     return initialState;
   } else {
+    // @ts-ignore
     const firstKey = React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
     (child, index) => child.key || String(index))[0];
     return {

package/es/tabs-motion/tab.js

@@ -5,6 +5,7 @@ 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
+// @ts-ignore
 export function Tab(props) {
   return null;
 }

package/es/tabs-motion/tabs.js

@@ -20,7 +20,7 @@ import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './util
 const KEYBOARD_ACTION = {
   next: 'next',
   previous: 'previous'
-};
+}; // @ts-ignore
 
 const getLayoutParams = (el, orientation) => {
   if (!el) {
@@ -46,7 +46,8 @@ const getLayoutParams = (el, orientation) => {
       distance: el.offsetLeft
     };
   }
-};
+}; // @ts-ignore
+
 
 const scrollParentToCentreTarget = targetNode => {
   const {
@@ -77,7 +78,8 @@ const scrollParentToCentreTarget = targetNode => {
   }; // ignore out of bounds, the browser will manage this for us
 
   targetNode.parentNode.scroll(target.x, target.y);
-};
+}; // @ts-ignore
+
 
 function RenderEnhancer({
   Enhancer
@@ -103,6 +105,7 @@ export function Tabs({
   orientation = ORIENTATION.horizontal,
   overrides = {},
   renderAll = false,
+  // @ts-ignore
   uid: customUid = null,
   endEnhancer
 }) {
@@ -120,7 +123,8 @@ export function Tabs({
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
   const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
-  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer); // Count key updates
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer);
+  const [TabBar, tabBarProps] = getOverrides(overrides.TabBar, StyledTabBar); // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -213,10 +217,10 @@ export function Tabs({
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabBar, _extends({
     $hasEndEnhancer: Boolean(endEnhancer),
     $orientation: orientation
-  }, /*#__PURE__*/React.createElement(TabList, _extends({
+  }, tabBarProps), /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -266,17 +270,29 @@ export function Tabs({
 }
 
 function InternalTab({
+  // @ts-ignore
   childKey,
+  // @ts-ignore
   childIndex,
+  // @ts-ignore
   activeKey,
+  // @ts-ignore
   orientation,
+  // @ts-ignore
   activeTabRef,
+  // @ts-ignore
   updateHighlight,
+  // @ts-ignore
   parseKeyDown,
+  // @ts-ignore
   activateOnFocus,
+  // @ts-ignore
   uid,
+  // @ts-ignore
   disabled,
+  // @ts-ignore
   sharedStylingProps,
+  // @ts-ignore
   onChange,
   ...props
 }) {
@@ -406,6 +422,7 @@ function InternalTab({
     $focusVisible: focusVisible,
     $isActive: isActive
   }, sharedStylingProps, restProps, TabProps, {
+    // @ts-ignore
     onClick: event => {
       if (typeof onChange === 'function') onChange({
         activeKey: key
@@ -427,11 +444,17 @@ function InternalTab({
 }
 
 function InternalTabPanel({
+  // @ts-ignore
   childKey,
+  // @ts-ignore
   childIndex,
+  // @ts-ignore
   activeKey,
+  // @ts-ignore
   uid,
+  // @ts-ignore
   sharedStylingProps,
+  // @ts-ignore
   renderAll,
   ...props
 }) {