baseui 14.0.0 → 15.0.0

package/accordion/accordion.js

@@ -84,17 +84,17 @@ class Accordion extends React.Component {
       lastItem.current && lastItem.current.focus();
     }
     if (e.keyCode === ARROW_UP) {
-      e.preventDefault();
       const activeItemIdx = itemRefs.findIndex(item => item.current === document.activeElement);
-      if (activeItemIdx > 0) {
+      if (activeItemIdx >= 0) {
+        e.preventDefault();
         const prevItem = itemRefs[activeItemIdx - 1];
         prevItem.current && prevItem.current.focus();
       }
     }
     if (e.keyCode === ARROW_DOWN) {
-      e.preventDefault();
       const activeItemIdx = itemRefs.findIndex(item => item.current === document.activeElement);
-      if (activeItemIdx < itemRefs.length - 1) {
+      if (activeItemIdx >= 0 && activeItemIdx < itemRefs.length - 1) {
+        e.preventDefault();
         const nextItem = itemRefs[activeItemIdx + 1];
         nextItem.current && nextItem.current.focus();
       }

package/accordion/panel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const ForwardedPanel: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
+    children?: React.ReactNode;
     disabled?: boolean;
     'aria-controls'?: string;
     key?: React.Key;

package/accordion/styled-components.js

@@ -87,7 +87,7 @@ const ToggleIcon = exports.ToggleIcon = (0, _styles.styled)('svg', props => {
   return {
     ...(0, _styledComponents.getSvgStyles)(props),
     flexShrink: 0,
-    color: $color || $theme.colors.contentPrimary,
+    color: $color || $theme.colors.contentTierary,
     cursor: $disabled ? 'not-allowed' : 'pointer'
   };
 });

package/accordion/types.d.ts

@@ -87,7 +87,7 @@ export type StatelessAccordionProps = {
 };
 type SharedPanelProps = {
     /** The content visible when Panel is expanded. */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** Defaults to the disabled value provided by the parent Accordion component. */
     disabled?: boolean;
     /** Id for a panel, when provided populates aria-controls

package/app-nav-bar/mobile-menu.js

@@ -48,7 +48,9 @@ const MobileNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Replace with a user menu item renderer
     return /*#__PURE__*/React.createElement(UserMenuProfileListItem, _extends({}, restProps, userMenuProfileListItemProps, {
       ref: ref
-    }), /*#__PURE__*/React.createElement(_userProfileTile.default, item.item));
+    }), /*#__PURE__*/React.createElement(_userProfileTile.default, _extends({}, item.item, {
+      overrides: overrides
+    })));
   }
   return (
     /*#__PURE__*/

package/banner/banner.js

@@ -146,10 +146,12 @@ function Trailing({
     }));
   }
   const [TrailingButtonContainer, trailingButtonContainerProps] = (0, _overrides.getOverrides)(overrides.TrailingButtonContainer, _styledComponents.StyledTrailingButtonContainer);
+  const trailingButtonOverrides = overrides?.TrailingButton;
+  const trailingButtonBackgroundColor = trailingButtonOverrides?.style?.backgroundColor ? trailingButtonOverrides.style.backgroundColor : backgroundColor;
   if (action.label) {
     return /*#__PURE__*/React.createElement(TrailingButtonContainer, trailingButtonContainerProps, /*#__PURE__*/React.createElement(_index.Button, {
       colors: {
-        backgroundColor,
+        backgroundColor: trailingButtonBackgroundColor,
         color
       },
       onClick: action.onClick,

package/banner/types.d.ts

@@ -29,12 +29,13 @@ export type BannerOverrides = {
     Title?: Override;
     TrailingContent?: Override;
     TrailingButtonContainer?: Override;
+    TrailingButton?: Override;
     TrailingIconButton?: Override;
 };
 export type BannerProps = {
     action?: ActionContent;
     artwork?: ArtworkContent;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     hierarchy?: Hierarchy;
     kind?: Kind;
     overrides?: BannerOverrides;

package/bottom-navigation/bottom-navigation.js

@@ -98,7 +98,9 @@ const BottomNavigation = ({
     const idx = overflowIdx + MAX_SELECTORS - 1;
     return /*#__PURE__*/React.createElement(_list.ListItem, {
       artwork: props => /*#__PURE__*/React.createElement(Icon, props),
-      endEnhancer: () => /*#__PURE__*/React.createElement(_icon.ChevronRight, null),
+      endEnhancer: () => /*#__PURE__*/React.createElement(_icon.ChevronRight, {
+        title: ""
+      }),
       onClick: () => {
         activeKey === idx && !displayOverflow ? scrollToTop(idx) : handleNavItemChange(idx);
       },

package/bottom-navigation/selector.js

@@ -33,7 +33,7 @@ const Selector = ({
     "aria-selected": isActive
   }, SelectorProps), /*#__PURE__*/React.createElement(Icon, {
     size: 20,
-    color: isActive ? theme.colors.contentPrimary : theme.colors.contentTertiary
+    color: isActive ? theme.colors.bottomNavigationSelectedText : theme.colors.bottomNavigationText
   }), /*#__PURE__*/React.createElement(Title, _extends({
     $isActive: isActive
   }, TitleProps), title));

package/bottom-navigation/styled-components.js

@@ -60,7 +60,7 @@ const StyledTitle = exports.StyledTitle = (0, _styles.styled)('div', ({
   $isActive
 }) => ({
   ...$theme.typography.LabelXSmall,
-  color: $isActive ? $theme.colors.contentPrimary : $theme.colors.contentTertiary
+  color: $isActive ? $theme.colors.bottomNavigationSelectedText : $theme.colors.bottomNavigationText
 }));
 StyledTitle.displayName = "StyledTitle";
 StyledTitle.displayName = 'StyledTitle';

package/button/button.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { ButtonProps, SharedStyleProps } from './types';
 export interface ButtonComponentType {
-    <C extends React.ElementType = 'button'>(props: ButtonProps & SharedStyleProps & Omit<React.ComponentProps<C>, keyof ButtonProps | keyof SharedStyleProps> & {
-        $as?: C | React.ComponentType<any> | keyof JSX.IntrinsicElements;
-    }): JSX.Element;
+    <C extends React.ElementType = 'button'>(props: ButtonProps & Omit<React.ComponentProps<C>, keyof ButtonProps | keyof SharedStyleProps> & SharedStyleProps<C | React.ComponentType<any> | keyof JSX.IntrinsicElements>): JSX.Element;
     displayName?: string;
 }
 declare const ForwardedButton: ButtonComponentType;

package/button/button.js

@@ -83,11 +83,12 @@ class Button extends React.Component {
       ...restProps
     } = this.props;
     // Get overrides
+    const isAnchor = 'href' in restProps && Boolean(restProps?.href);
     const [BaseButton, baseButtonProps] = (0, _overrides.getOverrides)(
     // adding both (1) BaseButton and (2) Root
     // (1) because it's a Button under the hood
     // (2) because we want consistency with the rest of the components
-    overrides.BaseButton || overrides.Root, _styledComponents.BaseButton);
+    overrides.BaseButton || overrides.Root, isAnchor ? _styledComponents.AnchorBaseButton : _styledComponents.BaseButton);
     const [LoadingSpinner, loadingSpinnerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinner, _styledComponents.LoadingSpinner);
     const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinnerContainer, _styledComponents.LoadingSpinnerContainer);
     const sharedProps = {
@@ -99,10 +100,13 @@ class Button extends React.Component {
       ['aria-busy']: 'true',
       ['aria-live']: 'polite'
     } : {};
+    const ariaDisabledProps = restProps?.disabled && isAnchor ? {
+      ['aria-disabled']: true
+    } : {};
     return /*#__PURE__*/React.createElement(BaseButton, _extends({
       ref: forwardedRef,
       "data-baseweb": "button"
-    }, ariaLoadingElements, sharedProps, restProps, baseButtonProps, {
+    }, ariaLoadingElements, ariaDisabledProps, sharedProps, restProps, baseButtonProps, {
       // Applies last to override passed in onClick
       onClick: this.internalOnClick,
       onFocus: (0, _focusVisible.forkFocus)({

package/button/styled-components.d.ts

@@ -1,5 +1,6 @@
 import type { SharedStyleProps } from './types';
 export declare const BaseButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
+export declare const AnchorBaseButton: import("styletron-react").StyletronComponent<"a", SharedStyleProps>;
 export declare const EndEnhancer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StartEnhancer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const LoadingSpinnerContainer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;

package/button/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StartEnhancer = exports.LoadingSpinnerContainer = exports.LoadingSpinner = exports.EndEnhancer = exports.BaseButton = void 0;
+exports.StartEnhancer = exports.LoadingSpinnerContainer = exports.LoadingSpinner = exports.EndEnhancer = exports.BaseButton = exports.AnchorBaseButton = void 0;
 var _styles = require("../styles");
 var _constants = require("./constants");
 /*
@@ -13,7 +13,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-const BaseButton = exports.BaseButton = (0, _styles.styled)('button', ({
+// note: Tried doing a standard override of the styled function, but it didn't work
+// it seems like there is some bug when override $as
+
+const createStyledBaseButton = (type, styleFn) => (0, _styles.styled)(type, ({
   $theme,
   $size,
   $colors,
@@ -22,7 +25,8 @@ const BaseButton = exports.BaseButton = (0, _styles.styled)('button', ({
   $isLoading,
   $isSelected,
   $disabled,
-  $isFocusVisible
+  $isFocusVisible,
+  $as
 }) => ({
   display: 'inline-flex',
   // need to maintain button width while showing loading spinner
@@ -80,12 +84,44 @@ const BaseButton = exports.BaseButton = (0, _styles.styled)('button', ({
     $isSelected,
     $disabled
   }),
+  ...getAnchorDisabledStyles({
+    $as,
+    $theme,
+    $kind,
+    $isSelected,
+    $disabled
+  }),
   ...getShapeStyles({
     $shape,
     $size
+  }),
+  ...styleFn?.({
+    $theme,
+    $size,
+    $colors,
+    $kind,
+    $shape,
+    $isLoading,
+    $isSelected,
+    $disabled,
+    $isFocusVisible,
+    $as
   })
 }));
-BaseButton.displayName = "BaseButton";
+const BaseButton = exports.BaseButton = createStyledBaseButton('button');
+BaseButton.displayName = 'BaseButton';
+const AnchorBaseButton = exports.AnchorBaseButton = createStyledBaseButton('a', ({
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}) => getAnchorDisabledStyles({
+  $as: 'a',
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}));
 BaseButton.displayName = 'BaseButton';
 const EndEnhancer = exports.EndEnhancer = (0, _styles.styled)('div', ({
   $theme
@@ -270,6 +306,27 @@ function getFontStyles({
       return $theme.typography.font350;
   }
 }
+function getAnchorDisabledStyles({
+  $as,
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}) {
+  if (!($as === 'a' && $disabled)) {
+    return {};
+  }
+  return {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+    ...getDisabledStyles({
+      $theme,
+      $kind,
+      $isSelected,
+      $disabled
+    })
+  };
+}
 
 // @ts-ignore
 function getDisabledStyles({

package/button/types.d.ts

@@ -13,7 +13,7 @@ export type CustomColors = {
     backgroundColor: string;
     color: string;
 };
-export type ButtonProps = {
+interface BaseButtonProps {
     children?: React.ReactNode;
     colors?: CustomColors;
     disabled?: boolean;
@@ -34,8 +34,18 @@ export type ButtonProps = {
     /** A helper rendered at the start of the button. */
     startEnhancer?: React.ReactNode | React.ComponentType<any>;
     type?: 'submit' | 'reset' | 'button';
-};
-export type SharedStyleProps = {
+}
+export interface LinkButtonProps {
+    /** Convert button to <a> tag allowing for opening links directly.
+     *
+     * Use this over window.open as it handles accessibility better.
+     */
+    href?: string | null;
+    target?: string;
+}
+export interface ButtonProps extends BaseButtonProps, LinkButtonProps {
+}
+export type SharedStyleProps<AS = React.ComponentType<any> | keyof JSX.IntrinsicElements> = {
     $colors?: CustomColors;
     $kind?: keyof typeof KIND;
     $isSelected?: boolean;
@@ -44,4 +54,6 @@ export type SharedStyleProps = {
     $isLoading?: boolean;
     $disabled?: boolean;
     $isFocusVisible?: boolean;
+    $as?: AS;
 };
+export {};

package/button-timed/button-timed.js

@@ -24,6 +24,7 @@ const ButtonTimed = props => {
     paused = false,
     onClick: onClickProp,
     disabled,
+    kind = _button.KIND.primary,
     children,
     overrides = {},
     ...restProps
@@ -60,7 +61,7 @@ const ButtonTimed = props => {
   } = overrides;
   const [TimerContainer, timerContainerProps] = (0, _overrides.getOverrides)(TimerContainerOverride, _styledComponents.StyledTimerContainer);
   const buttonMergedOverrides = (0, _overrides.mergeOverrides)({
-    BaseButton: {
+    Root: {
       component: _styledComponents.StyledBaseButtonTimed,
       props: {
         $initialTime: initialTime,
@@ -73,9 +74,7 @@ const ButtonTimed = props => {
       }
     }
   }, {
-    Root: buttonOverrides.Root || {},
-    // @ts-ignore
-    BaseButton: buttonOverrides.BaseButton,
+    Root: buttonOverrides.Root || buttonOverrides.BaseButton || {},
     StartEnhancer: buttonOverrides.StartEnhancer || {},
     EndEnhancer: buttonOverrides.EndEnhancer || {},
     LoadingSpinnerContainer: buttonOverrides.LoadingSpinnerContainer || {},
@@ -85,7 +84,7 @@ const ButtonTimed = props => {
     overrides: buttonMergedOverrides,
     onClick: onClick,
     size: _button.SIZE.large,
-    kind: _button.KIND.primary,
+    kind: kind,
     shape: _button.SHAPE.default,
     disabled: disabled || timeRemaining === 0
   }), children, /*#__PURE__*/React.createElement(TimerContainer, timerContainerProps, `(${(0, _utils.formatTime)(timeRemaining)})`));

package/button-timed/styled-components.js

@@ -20,6 +20,7 @@ const StyledBaseButtonTimed = exports.StyledBaseButtonTimed = (0, _index.withSty
   $timeElapsed
 }) => {
   const completionPercentage = $timeElapsed / $initialTime * 100;
+  const restPercentage = 100 - completionPercentage;
   const timeLeft = $initialTime - $timeElapsed;
   return {
     position: 'relative',
@@ -28,10 +29,10 @@ const StyledBaseButtonTimed = exports.StyledBaseButtonTimed = (0, _index.withSty
         animationDuration: `${timeLeft}s`,
         animationName: {
           from: {
-            transform: `translateX(${completionPercentage}%)`
+            transform: `translateX(${completionPercentage}%) scaleX(${restPercentage}%)`
           },
           to: {
-            transform: 'translateX(100%)'
+            transform: 'translateX(100%) scaleX(0)'
           }
         },
         animationTimingFunction: 'linear',
@@ -41,7 +42,8 @@ const StyledBaseButtonTimed = exports.StyledBaseButtonTimed = (0, _index.withSty
         height: '100%',
         zIndex: '1',
         position: 'absolute',
-        backgroundColor: (0, _util.hexToRgb)($theme.colors.backgroundPrimary, '0.2')
+        backgroundColor: (0, _util.hexToRgb)($theme.colors.backgroundPrimary, '0.2'),
+        transformOrigin: 'left'
       }
     } : {})
   };

package/button-timed/types.d.ts

@@ -4,7 +4,7 @@ import type { Override } from '../helpers/overrides';
 export type ButtonTimedOverrides = ButtonOverrides & {
     TimerContainer?: Override;
 };
-export type ButtonTimedProps = Omit<ButtonProps, 'kind' | 'shape' | 'size' | 'onClick' | 'overrides'> & {
+export type ButtonTimedProps = Omit<ButtonProps, 'shape' | 'size' | 'onClick' | 'overrides'> & {
     initialTime: number;
     paused?: boolean;
     onClick: (a?: React.SyntheticEvent<HTMLButtonElement>) => unknown;

package/data-table/column-categorical.js

@@ -122,14 +122,14 @@ function CategoricalFilter(props) {
     value: query,
     onChange: event => setQuery(event.target.value),
     clearable: true
-  }), !query && /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
       // @ts-ignore
       marginTop: showQuery ? theme.sizing.scale600 : null
     }
   }, /*#__PURE__*/React.createElement(FilterQuickControls, {
     onSelectAll: () => {
-      categories.forEach(c => selection.add(c));
+      filteredCategories.forEach(c => selection.add(c));
       setSelection(new Set(selection));
     },
     onClearSelection: () => {

package/data-table/locale.d.ts

@@ -36,6 +36,7 @@ export type DataTableLocale = {
     selectRow: string;
     selectAllRows: string;
     sortColumn: string;
+    textQueryPlaceholder: string;
 };
 declare const locale: {
     emptyState: string;
@@ -75,5 +76,6 @@ declare const locale: {
     selectRow: string;
     selectAllRows: string;
     sortColumn: string;
+    textQueryPlaceholder: string;
 };
 export default locale;

package/data-table/locale.js

@@ -48,6 +48,7 @@ const locale = {
   booleanColumnFalseShort: 'F',
   selectRow: 'Select row',
   selectAllRows: 'Select all rows',
-  sortColumn: 'Sort column'
+  sortColumn: 'Sort column',
+  textQueryPlaceholder: 'Search...'
 };
 var _default = exports.default = locale;

package/data-table/stateful-container.js

@@ -30,7 +30,7 @@ const StatefulContainer = props => {
   const [sortIndex, setSortIndex] = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1);
   const [sortDirection, setSortDirection] = React.useState(props.initialSortDirection);
   const [filters, setFilters] = React.useState(props.initialFilters || new Map());
-  const [textQuery, setTextQuery] = React.useState('');
+  const [textQuery, setTextQuery] = React.useState(typeof props.initialTextQuery === 'string' ? props.initialTextQuery : '');
   const [selectedRowIds, setSelectedRowIds] = React.useState(props.initialSelectedRowIds || new Set());
 
   // @ts-ignore

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

@@ -42,7 +42,7 @@ function useResizeObserver(ref, callback) {
 function QueryInput(props) {
   const [css, theme] = (0, _styles.useStyletron)();
   const locale = React.useContext(_locale.LocaleContext);
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState(props.textQuery);
   React.useEffect(() => {
     const timeout = setTimeout(() => props.onChange(value), 250);
     return () => clearTimeout(timeout);
@@ -70,7 +70,8 @@ function QueryInput(props) {
     size: _input.SIZE.compact,
     onChange: event => setValue(event.target.value),
     value: value,
-    clearable: true
+    clearable: true,
+    placeholder: props.textQueryPlaceholder || locale.datatable.textQueryPlaceholder
   }));
 }
 
@@ -149,6 +150,7 @@ function StatefulDataTable(props) {
     initialSelectedRowIds: props.initialSelectedRowIds,
     initialSortIndex: props.initialSortIndex,
     initialSortDirection: props.initialSortDirection,
+    initialTextQuery: props.initialTextQuery,
     onFilterAdd: props.onFilterAdd,
     onFilterRemove: props.onFilterRemove,
     onIncludedRowsChange: props.onIncludedRowsChange,
@@ -191,7 +193,9 @@ function StatefulDataTable(props) {
       paddingTop: theme.sizing.scale500
     })
   }, searchable && /*#__PURE__*/React.createElement(QueryInput, {
-    onChange: onTextQueryChange
+    onChange: onTextQueryChange,
+    textQuery: textQuery,
+    textQueryPlaceholder: props.textQueryPlaceholder
   }), filterable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_filterMenu.default, {
     columns: props.columns,
     filters: filters,

package/data-table/types.d.ts

@@ -81,6 +81,7 @@ export type StatefulDataTableProps = {
     initialSelectedRowIds?: Set<number | string>;
     initialSortIndex?: number;
     initialSortDirection?: SortDirections;
+    initialTextQuery?: string;
     loading?: boolean;
     loadingMessage?: string | React.ComponentType<{}>;
     onFilterAdd?: (b: string, a: {
@@ -98,6 +99,7 @@ export type StatefulDataTableProps = {
     rowHeight?: number;
     rowHighlightIndex?: number;
     searchable?: boolean;
+    textQueryPlaceholder?: string;
     controlRef?: ControlRef;
 };
 export type DataTableProps = {

package/datepicker/day.js

@@ -205,11 +205,9 @@ class Day extends React.Component {
     });
     _defineProperty(this, "clampToDayStart", dt => {
       const {
-        setSeconds,
-        setMinutes,
-        setHours
+        startOfDay
       } = this.dateHelpers;
-      return setSeconds(setMinutes(setHours(dt, 0), 0), 0);
+      return startOfDay(dt);
     });
     this.dateHelpers = new _dateHelpers.default(props.adapter);
   }

package/datepicker/utils/date-helpers.d.ts

@@ -82,6 +82,7 @@ declare class DateHelpers<T> {
     setHours: (b: T, a: number) => T;
     setMonth: (b: T, a: number) => T;
     setYear: (b: T, a: number) => T;
+    startOfDay: (a: T) => T;
     getMinutes: (a: T) => number;
     getHours: (a: T) => number;
     getMonth: (a: T) => number;

package/datepicker/utils/date-helpers.js

@@ -358,6 +358,9 @@ class DateHelpers {
     _defineProperty(this, "setHours", (date, hours) => this.adapter.setHours(date, hours));
     _defineProperty(this, "setMonth", (date, monthNumber) => this.adapter.setMonth(date, monthNumber));
     _defineProperty(this, "setYear", (date, yearNumber) => this.adapter.setYear(date, yearNumber));
+    _defineProperty(this, "startOfDay", date => {
+      return this.adapter.startOfDay(date);
+    });
     _defineProperty(this, "getMinutes", date => this.adapter.getMinutes(date));
     _defineProperty(this, "getHours", date => this.adapter.getHours(date));
     _defineProperty(this, "getMonth", date => this.adapter.getMonth(date));

package/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DialogProps } from './types';
-declare const Dialog: ({ artwork, buttonDock, children, handleDismiss, showDismissButton, hasOverlay, heading, isOpen, overrides, placement, numHeadingLines, size, }: DialogProps) => React.JSX.Element;
+declare const Dialog: ({ artwork, buttonDock, children, onDismiss, showDismissButton, hasOverlay, heading, isOpen, overrides, placement, numHeadingLines, size, autoFocus, }: DialogProps) => React.JSX.Element;
 export default Dialog;