baseui 0.0.0-next-73c3b1e → 0.0.0-next-e40d68e

package/breadcrumbs/breadcrumbs.js

@@ -103,7 +103,7 @@ function Breadcrumbs(props) {
   });
   return /*#__PURE__*/_react.default.createElement(_index.LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/_react.default.createElement(Root, _extends({
-      "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+      "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
       "data-baseweb": "breadcrumbs"
     }, baseRootProps), /*#__PURE__*/_react.default.createElement(List, baseListProps, childrenWithSeparators));
   });

package/breadcrumbs/breadcrumbs.js.flow

@@ -77,7 +77,11 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
     <LocaleContext.Consumer>
       {locale => (
         <Root
-          aria-label={props.ariaLabel || locale.breadcrumbs.ariaLabel}
+          aria-label={
+            props['aria-label'] ||
+            props.ariaLabel ||
+            locale.breadcrumbs.ariaLabel
+          }
           data-baseweb="breadcrumbs"
           {...baseRootProps}
         >

package/breadcrumbs/index.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbsProps {
   children?: React.ReactNode;
   overrides?: BreadcrumbsOverrides;
   ariaLabel?: string;
+  'aria-label'?: string;
   showTrailingSeparator?: boolean;
 }
 

package/breadcrumbs/types.js.flow

@@ -23,6 +23,7 @@ export type BreadcrumbsPropsT = {|
   children?: Node,
   overrides?: OverridesT,
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Whether to show a trailing separator after the last breadcrumb. */
   showTrailingSeparator?: boolean,
 |};

package/button-group/button-group.js

@@ -107,7 +107,6 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           _this$props$mode = _this$props.mode,
           mode = _this$props$mode === void 0 ? _constants.MODE.checkbox : _this$props$mode,
           children = _this$props.children,
-          ariaLabel = _this$props.ariaLabel,
           selected = _this$props.selected,
           disabled = _this$props.disabled,
           _onClick = _this$props.onClick,
@@ -120,6 +119,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
       var isRadio = mode === _constants.MODE.radio;
       var numItems = React.Children.count(children);
       return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {

package/button-group/button-group.js.flow

@@ -43,7 +43,6 @@ export default class ButtonGroup extends React.Component<PropsT> {
       overrides = {},
       mode = MODE.checkbox,
       children,
-      ariaLabel,
       selected,
       disabled,
       onClick,
@@ -52,6 +51,7 @@ export default class ButtonGroup extends React.Component<PropsT> {
       size,
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === MODE.radio;
 
     const numItems = React.Children.count(children);

package/button-group/index.d.ts

@@ -22,6 +22,7 @@ export interface ButtonGroupOverrides {
 
 export interface ButtonGroupProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children: React.ReactNode;
   disabled?: boolean;
   mode?: MODE[keyof MODE];

package/button-group/types.js.flow

@@ -17,6 +17,7 @@ import {MODE, STATE_CHANGE_TYPE} from './constants.js';
 export type PropsT = {|
   /** Accessible label. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Set of more than one `Button` components */
   children: Array<React.Node>,
   /** Defines if the button group is disabled. */

package/checkbox/checkbox.js

@@ -183,8 +183,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
-          title = _this$props2.title,
-          ariaLabel = _this$props2.ariaLabel;
+          title = _this$props2.title;
       var RootOverride = overrides.Root,
           CheckmarkOverride = overrides.Checkmark,
           LabelOverride = overrides.Label,
@@ -253,7 +252,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         name: name,
         checked: checked,
         required: required,
-        "aria-label": ariaLabel,
+        "aria-label": this.props['aria-label'] || this.props.ariaLabel,
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],

package/checkbox/checkbox.js.flow

@@ -134,7 +134,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       children,
       required,
       title,
-      ariaLabel,
     } = this.props;
 
     const {
@@ -229,7 +228,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           name={name}
           checked={checked}
           required={required}
-          aria-label={ariaLabel}
+          aria-label={this.props['aria-label'] || this.props.ariaLabel}
           aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}

package/checkbox/index.d.ts

@@ -106,6 +106,7 @@ export interface CheckboxProps {
   checkmarkType?: STYLE_TYPE[keyof STYLE_TYPE];
   title?: string;
   ariaLabel?: string;
+  'aria-label'?: string;
   onChange?: React.FormEventHandler<HTMLInputElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;

package/checkbox/types.js.flow

@@ -48,6 +48,7 @@ export type PropsT = {
   'aria-errormessage'?: string,
   /** Passed to the input element aria-label attribute. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
   /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */

package/es/breadcrumbs/breadcrumbs.js

@@ -45,7 +45,7 @@ export function Breadcrumbs(props) {
     }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps)))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
-    "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+    "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
     "data-baseweb": "breadcrumbs"
   }, baseRootProps), /*#__PURE__*/React.createElement(List, baseListProps, childrenWithSeparators)));
 }

package/es/button-group/button-group.js

@@ -39,7 +39,6 @@ export default class ButtonGroup extends React.Component {
       overrides = {},
       mode = MODE.checkbox,
       children,
-      ariaLabel,
       selected,
       disabled,
       onClick,
@@ -48,6 +47,7 @@ export default class ButtonGroup extends React.Component {
       size
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === MODE.radio;
     const numItems = React.Children.count(children);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({

package/es/checkbox/checkbox.js

@@ -128,8 +128,7 @@ class StatelessCheckbox extends React.Component {
       checked,
       children,
       required,
-      title,
-      ariaLabel
+      title
     } = this.props;
     const {
       Root: RootOverride,
@@ -191,7 +190,7 @@ class StatelessCheckbox extends React.Component {
       name: name,
       checked: checked,
       required: required,
-      "aria-label": ariaLabel,
+      "aria-label": this.props['aria-label'] || this.props.ariaLabel,
       "aria-checked": isIndeterminate ? 'mixed' : checked,
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],

package/es/menu/menu.js

@@ -17,7 +17,7 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 export default function Menu(props) {
   const {
     overrides = {},
-    ariaLabel = 'Menu',
+    'aria-label': ariaLabel = 'Menu',
     rootRef = /*#__PURE__*/React.createRef(),
     focusMenu = () => {},
     unfocusMenu = () => {},

package/es/progress-bar/progressbar.js

@@ -25,7 +25,6 @@ class ProgressBar extends React.Component {
 
   render() {
     const {
-      ariaLabel,
       overrides = {},
       getProgressLabel,
       value,
@@ -39,7 +38,8 @@ class ProgressBar extends React.Component {
       errorMessage,
       forwardedRef,
       ...restProps
-    } = this.props; // fallback on successValue (and it's default) if maxValue is not set by user
+    } = this.props;
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel; // fallback on successValue (and it's default) if maxValue is not set by user
 
     const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);

package/es/table/sortable-head-cell.js

@@ -47,7 +47,7 @@ export const SortableHeadCellFactory = (CustomHeadCell = StyledHeadCell) => {
     };
 
     const enableHeadClick = fillClickTarget && !disabled;
-    let ariaLabel = props.ariaLabel;
+    let ariaLabel = props['aria-label'] || props.ariaLabel;
 
     if (!ariaLabel) {
       if (typeof props.title === 'string') {

package/esm/breadcrumbs/breadcrumbs.js

@@ -84,7 +84,7 @@ export function Breadcrumbs(props) {
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/React.createElement(Root, _extends({
-      "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+      "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
       "data-baseweb": "breadcrumbs"
     }, baseRootProps), /*#__PURE__*/React.createElement(List, baseListProps, childrenWithSeparators));
   });

package/esm/button-group/button-group.js

@@ -97,7 +97,6 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           _this$props$mode = _this$props.mode,
           mode = _this$props$mode === void 0 ? MODE.checkbox : _this$props$mode,
           children = _this$props.children,
-          ariaLabel = _this$props.ariaLabel,
           selected = _this$props.selected,
           disabled = _this$props.disabled,
           _onClick = _this$props.onClick,
@@ -110,6 +109,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
       var isRadio = mode === MODE.radio;
       var numItems = React.Children.count(children);
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {

package/esm/checkbox/checkbox.js

@@ -174,8 +174,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
-          title = _this$props2.title,
-          ariaLabel = _this$props2.ariaLabel;
+          title = _this$props2.title;
       var RootOverride = overrides.Root,
           CheckmarkOverride = overrides.Checkmark,
           LabelOverride = overrides.Label,
@@ -236,7 +235,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         name: name,
         checked: checked,
         required: required,
-        "aria-label": ariaLabel,
+        "aria-label": this.props['aria-label'] || this.props.ariaLabel,
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],

package/esm/menu/menu.js

@@ -33,7 +33,7 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 export default function Menu(props) {
   var _props$overrides = props.overrides,
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
-      _props$ariaLabel = props.ariaLabel,
+      _props$ariaLabel = props['aria-label'],
       ariaLabel = _props$ariaLabel === void 0 ? 'Menu' : _props$ariaLabel,
       _props$rootRef = props.rootRef,
       rootRef = _props$rootRef === void 0 ? /*#__PURE__*/React.createRef() : _props$rootRef,

package/esm/progress-bar/progressbar.js

@@ -76,7 +76,6 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          ariaLabel = _this$props.ariaLabel,
           _this$props$overrides = _this$props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides,
           getProgressLabel = _this$props.getProgressLabel,
@@ -90,8 +89,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           infinite = _this$props.infinite,
           errorMessage = _this$props.errorMessage,
           forwardedRef = _this$props.forwardedRef,
-          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]); // fallback on successValue (and it's default) if maxValue is not set by user
+          restProps = _objectWithoutProperties(_this$props, ["overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]);
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel; // fallback on successValue (and it's default) if maxValue is not set by user
 
       var maximumValue = maxValue !== 100 ? maxValue : successValue;
 

package/esm/table/sortable-head-cell.js

@@ -67,7 +67,7 @@ export var SortableHeadCellFactory = function SortableHeadCellFactory() {
     };
 
     var enableHeadClick = fillClickTarget && !disabled;
-    var ariaLabel = props.ariaLabel;
+    var ariaLabel = props['aria-label'] || props.ariaLabel;
 
     if (!ariaLabel) {
       if (typeof props.title === 'string') {

package/menu/index.d.ts

@@ -172,6 +172,7 @@ export const OptionProfile: React.FC<OptionProfileProps>;
 export interface SharedStatelessProps {
   activedescendantId?: string;
   ariaLabel?: string;
+  'aria-label'?: string;
   getRequiredItemProps?: (item: any, index: number) => RenderItemProps;
   highlightedIndex?: number;
   items: ItemsT;

package/menu/menu.js

@@ -46,7 +46,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Menu(props) {
   var _props$overrides = props.overrides,
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
-      _props$ariaLabel = props.ariaLabel,
+      _props$ariaLabel = props['aria-label'],
       ariaLabel = _props$ariaLabel === void 0 ? 'Menu' : _props$ariaLabel,
       _props$rootRef = props.rootRef,
       rootRef = _props$rootRef === void 0 ? /*#__PURE__*/React.createRef() : _props$rootRef,

package/menu/menu.js.flow

@@ -24,7 +24,7 @@ import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
 export default function Menu(props: StatelessMenuPropsT) {
   const {
     overrides = {},
-    ariaLabel = 'Menu',
+    'aria-label': ariaLabel = 'Menu',
     rootRef = React.createRef(),
     focusMenu = () => {},
     unfocusMenu = () => {},

package/menu/types.js.flow

@@ -170,7 +170,7 @@ export type SharedStatelessPropsT = {
    * bindings to work properly. Every rendered item should call this.
    */
   /** Passed to the top level menu element. */
-  ariaLabel?: string,
+  'aria-label'?: string,
   getRequiredItemProps?: GetRequiredItemPropsFnT,
   isFocused?: boolean,
   handleMouseLeave?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-73c3b1e",
+  "version": "0.0.0-next-e40d68e",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.3.0",
+    "@ladle/react": "^0.8.0",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",

package/progress-bar/index.d.ts

@@ -17,6 +17,7 @@ export interface ProgressBarOverrides {
 }
 export interface ProgressBarProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children?: React.ReactNode;
   getProgressLabel?: (value: number, successValue: number) => React.ReactNode;
   infinite?: boolean;

package/progress-bar/progressbar.js

@@ -84,7 +84,6 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          ariaLabel = _this$props.ariaLabel,
           _this$props$overrides = _this$props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides,
           getProgressLabel = _this$props.getProgressLabel,
@@ -98,8 +97,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           infinite = _this$props.infinite,
           errorMessage = _this$props.errorMessage,
           forwardedRef = _this$props.forwardedRef,
-          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]); // fallback on successValue (and it's default) if maxValue is not set by user
+          restProps = _objectWithoutProperties(_this$props, ["overrides", "getProgressLabel", "value", "size", "steps", "successValue", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]);
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel; // fallback on successValue (and it's default) if maxValue is not set by user
 
       var maximumValue = maxValue !== 100 ? maxValue : successValue;
 

package/progress-bar/progressbar.js.flow

@@ -52,7 +52,6 @@ class ProgressBar extends React.Component<
 
   render() {
     const {
-      ariaLabel,
       overrides = {},
       getProgressLabel,
       value,
@@ -67,6 +66,7 @@ class ProgressBar extends React.Component<
       forwardedRef,
       ...restProps
     } = this.props;
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     // fallback on successValue (and it's default) if maxValue is not set by user
     const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);

package/progress-bar/types.js.flow

@@ -23,6 +23,7 @@ export type OverridesT = {
 export type ProgressBarPropsT = {
   /** The accessible label for the progress bar (getProgressLabel will be used if not provided) */
   ariaLabel?: string,
+  'aria-label'?: string,
   children?: React.Node,
   /** Error message for screen-reader users**/
   errorMessage?: string,

package/table/index.d.ts

@@ -14,6 +14,7 @@ export interface SortableHeadCellOverrides {
 
 export interface SortableHeadCellProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children?: React.ReactNode;
   direction: 'ASC' | 'DESC' | null;
   disabled?: boolean;

package/table/sortable-head-cell.js

@@ -81,7 +81,7 @@ var SortableHeadCellFactory = function SortableHeadCellFactory() {
     };
 
     var enableHeadClick = fillClickTarget && !disabled;
-    var ariaLabel = props.ariaLabel;
+    var ariaLabel = props['aria-label'] || props.ariaLabel;
 
     if (!ariaLabel) {
       if (typeof props.title === 'string') {

package/table/sortable-head-cell.js.flow

@@ -47,7 +47,7 @@ export const SortableHeadCellFactory = (
     };
     const enableHeadClick = fillClickTarget && !disabled;
 
-    let ariaLabel = props.ariaLabel;
+    let ariaLabel = props['aria-label'] || props.ariaLabel;
     if (!ariaLabel) {
       if (typeof props.title === 'string') {
         ariaLabel = `sorts table by ${props.title} column`;

package/table/types.js.flow

@@ -16,6 +16,7 @@ export type SortDirectionT = ?$Keys<typeof SORT_DIRECTION>;
 export type HeadCellPropsT = {|
   /** Aria label applied to the sort button. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Additional content to fill head cell. Most likely used for a filter button. */
   children?: React.Node,
   /** Visually indicates sort direction. Displays a chevron next to column title. */