baseui 0.0.0-next-ed8d41d → 0.0.0-next-8a2a1dc

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

@@ -153,6 +153,7 @@ function UserMenuComponent(props) {
         }
       }, userMenuProps));
     },
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: function onOpen() {

package/app-nav-bar/user-menu.js.flow

@@ -120,6 +120,7 @@ export default function UserMenuComponent(props: {|
           {...userMenuProps}
         />
       )}
+      autoFocus={false}
       dismissOnEsc={true}
       dismissOnClickOutside={true}
       onOpen={() => setIsOpen(true)}

package/data-table/column-datetime.js

@@ -86,6 +86,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -461,6 +462,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

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

@@ -68,6 +68,7 @@ type FilterParametersT = {|
 type DatetimeColumnT = ColumnT<Date, FilterParametersT>;
 
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -415,6 +416,7 @@ function DatetimeFilter(props) {
                     }
                   }}
                   formatString={DATE_FORMAT}
+                  mask={MASK}
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}

package/datepicker/datepicker.js

@@ -592,6 +592,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_index3.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           focusLock: false,
+          autoFocus: false,
           mountNode: _this4.props.mountNode,
           placement: _index2.PLACEMENT.bottom,
           isOpen: _this4.state.isOpen,

package/datepicker/datepicker.js.flow

@@ -519,6 +519,7 @@ export default class Datepicker<T = Date> extends React.Component<
           <React.Fragment>
             <PopoverComponent
               focusLock={false}
+              autoFocus={false}
               mountNode={this.props.mountNode}
               placement={PLACEMENT.bottom}
               isOpen={this.state.isOpen}

package/es/app-nav-bar/user-menu.js

@@ -96,6 +96,7 @@ export default function UserMenuComponent(props) {
         close();
       }
     }, userMenuProps)),
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: () => setIsOpen(true),

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

@@ -29,6 +29,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -326,6 +327,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/es/datepicker/datepicker.js

@@ -440,6 +440,7 @@ export default class Datepicker extends React.Component {
     const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       focusLock: false,
+      autoFocus: false,
       mountNode: this.props.mountNode,
       placement: PLACEMENT.bottom,
       isOpen: this.state.isOpen,

package/es/helper/helper.js

@@ -35,6 +35,7 @@ export function Helper(props) {
     React.createElement(Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/es/menu/maybe-child-menu.js

@@ -28,6 +28,7 @@ export default function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(NestedMenuContext.Consumer, null, ctx => {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/es/popover/popover.js

@@ -13,7 +13,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
 import { Layer, TetherBehavior } from '../layer/index.js';
@@ -156,7 +156,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+    if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
       this.setState({
         autoFocusAfterPositioning: true
       });
@@ -453,7 +453,7 @@ class PopoverInner extends React.Component {
           ,
           returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
           autoFocus: this.state.autoFocusAfterPositioning
-        }, this.renderPopover(renderedContent)))));
+        }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {
           key: "hidden-layer"

package/es/select/select-component.js

@@ -970,6 +970,7 @@ class Select extends React.Component {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
+      autoFocus: false,
       focusLock: false,
       mountNode: this.props.mountNode,
       onEsc: () => this.closeMenu(),

package/es/themes/shared/lighting.js

@@ -15,6 +15,10 @@ const lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 export default lighting;

package/es/tooltip/tooltip.js

@@ -24,6 +24,7 @@ class Tooltip extends React.Component {
       Inner: StyledInner
     }, this.props.overrides);
     return /*#__PURE__*/React.createElement(Popover, _extends({
+      autoFocus: false,
       "data-baseweb": "tooltip"
     }, this.props, {
       overrides: overrides

package/esm/app-nav-bar/user-menu.js

@@ -132,6 +132,7 @@ export default function UserMenuComponent(props) {
         }
       }, userMenuProps));
     },
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: function onOpen() {

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

@@ -55,6 +55,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -430,6 +431,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/esm/datepicker/datepicker.js

@@ -574,6 +574,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           focusLock: false,
+          autoFocus: false,
           mountNode: _this4.props.mountNode,
           placement: PLACEMENT.bottom,
           isOpen: _this4.state.isOpen,

package/esm/helper/helper.js

@@ -44,6 +44,7 @@ export function Helper(props) {
     React.createElement(Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/esm/menu/maybe-child-menu.js

@@ -44,6 +44,7 @@ export default function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(NestedMenuContext.Consumer, null, function (ctx) {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/esm/popover/popover.js

@@ -39,7 +39,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
 import { Layer, TetherBehavior } from '../layer/index.js';
@@ -202,7 +202,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -516,7 +516,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             ,
             returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
             autoFocus: this.state.autoFocusAfterPositioning
-          }, this.renderPopover(renderedContent)))));
+          }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {
             key: "hidden-layer"

package/esm/select/select-component.js

@@ -1147,6 +1147,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this6.anchor = ref.anchorRef;
             },
+            autoFocus: false,
             focusLock: false,
             mountNode: _this6.props.mountNode,
             onEsc: function onEsc() {

package/esm/themes/shared/lighting.js

@@ -15,6 +15,10 @@ var lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 export default lighting;

package/esm/tooltip/tooltip.js

@@ -62,6 +62,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         Inner: StyledInner
       }, this.props.overrides);
       return /*#__PURE__*/React.createElement(Popover, _extends({
+        autoFocus: false,
         "data-baseweb": "tooltip"
       }, this.props, {
         overrides: overrides

package/helper/helper.js

@@ -55,6 +55,7 @@ function Helper(props) {
     React.createElement(_index.Popover, _extends({
       "data-baseweb": "helper"
     }, restProps, {
+      autoFocus: false,
       placement: placement,
       overrides: mergedOverrides
     }))

package/helper/helper.js.flow

@@ -36,6 +36,7 @@ export function Helper(props: PropsT) {
     <Popover
       data-baseweb="helper"
       {...restProps}
+      autoFocus={false}
       placement={placement}
       overrides={mergedOverrides}
     />

package/menu/maybe-child-menu.js

@@ -55,6 +55,7 @@ function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(_nestedMenus.NestedMenuContext.Consumer, null, function (ctx) {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/menu/maybe-child-menu.js.flow

@@ -48,6 +48,7 @@ export default function MaybeChildMenu(props: PropsT) {
         return (
           <PopoverOverride
             focusLock={false}
+            autoFocus={false}
             isOpen={props.isOpen}
             renderAll={props.renderAll}
             content={ChildMenu}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-ed8d41d",
+  "version": "0.0.0-next-8a2a1dc",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -197,6 +197,7 @@
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
+    "mockdate": "^3.0.5",
     "polished": "^3.2.0",
     "popper.js": "^1.16.0",
     "react-dropzone": "^9.0.0",

package/popover/popover.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _reactFocusLock = _interopRequireWildcard(require("react-focus-lock"));
 
 var _overrides = require("../helpers/overrides.js");
 
@@ -213,7 +213,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -531,7 +531,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             ,
             returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
             autoFocus: this.state.autoFocusAfterPositioning
-          }, this.renderPopover(renderedContent)))));
+          }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {
             key: "hidden-layer"

package/popover/popover.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable react/no-find-dom-node */
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, {MoveFocusInside} from 'react-focus-lock';
 
 import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {
@@ -73,7 +73,6 @@ class PopoverInner extends React.Component<
     this.init(prevProps, prevState);
     if (
       this.props.autoFocus &&
-      this.props.focusLock &&
       !this.state.autoFocusAfterPositioning &&
       this.popperRef.current !== null &&
       this.popperRef.current.getBoundingClientRect().top > 0
@@ -478,7 +477,14 @@ class PopoverInner extends React.Component<
                 returnFocus={this.props.returnFocus && !this.isHoverTrigger()}
                 autoFocus={this.state.autoFocusAfterPositioning}
               >
-                {this.renderPopover(renderedContent)}
+                {!this.props.focusLock &&
+                this.state.autoFocusAfterPositioning ? (
+                  <MoveFocusInside>
+                    {this.renderPopover(renderedContent)}
+                  </MoveFocusInside>
+                ) : (
+                  this.renderPopover(renderedContent)
+                )}
               </FocusLock>
             </TetherBehavior>
           </Layer>,

package/select/select-component.js

@@ -1168,6 +1168,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this6.anchor = ref.anchorRef;
             },
+            autoFocus: false,
             focusLock: false,
             mountNode: _this6.props.mountNode,
             onEsc: function onEsc() {

package/select/select-component.js.flow

@@ -1025,6 +1025,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
                   if (!ref) return;
                   this.anchor = ref.anchorRef;
                 }}
+                autoFocus={false}
                 focusLock={false}
                 mountNode={this.props.mountNode}
                 onEsc={() => this.closeMenu()}

package/themes/shared/lighting.js

@@ -22,7 +22,11 @@ var lighting = {
   overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
+  overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
 };
 var _default = lighting;
 exports.default = _default;

package/themes/shared/lighting.js.flow

@@ -19,6 +19,10 @@ const lighting: LightingT = {
   overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
   overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
   overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
+  shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
+  shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+  deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
+  deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)',
 };
 
 export default lighting;

package/themes/types.js.flow

@@ -690,6 +690,10 @@ export type LightingT = {
   overlay400: string,
   overlay500: string,
   overlay600: string,
+  shallowAbove: string,
+  shallowBelow: string,
+  deepAbove: string,
+  deepBelow: string,
 };
 
 export type AnimationT = {

package/tooltip/tooltip.js

@@ -71,6 +71,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         Inner: _styledComponents.Inner
       }, this.props.overrides);
       return /*#__PURE__*/React.createElement(_index.Popover, _extends({
+        autoFocus: false,
         "data-baseweb": "tooltip"
       }, this.props, {
         overrides: overrides

package/tooltip/tooltip.js.flow

@@ -32,7 +32,12 @@ class Tooltip extends React.Component<TooltipPropsT> {
       this.props.overrides,
     );
     return (
-      <Popover data-baseweb="tooltip" {...this.props} overrides={overrides} />
+      <Popover
+        autoFocus={false}
+        data-baseweb="tooltip"
+        {...this.props}
+        overrides={overrides}
+      />
     );
   }
 }