baseui 10.6.0 → 10.7.0

package/modal/types.js.flow

@@ -48,7 +48,10 @@ export type ModalPropsT = {
    * Optionally, can pass focus options instead of `true` to control the focus
    * more precisely (ie. `{ preventScroll: true }`)
    */
-  returnFocus?: boolean | FocusOptions,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Modal content. The children-as-function API may be preferable
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.6.0",
+  "version": "10.7.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -197,10 +197,11 @@
     "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",
-    "react-focus-lock": "^2.2.1",
+    "react-focus-lock": "^2.7.1",
     "react-input-mask": "^2.0.4",
     "react-is": "^16.8.6",
     "react-movable": "^2.5.4",

package/popover/index.d.ts

@@ -96,7 +96,8 @@ export interface BasePopoverProps {
   accessibilityType?: ACCESSIBILITY_TYPE[keyof ACCESSIBILITY_TYPE];
   focusLock?: boolean;
   autoFocus?: boolean;
-  returnFocus?: boolean;
+  focusOptions?: FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => (boolean | FocusOptions));
   'data-baseweb'?: string;
   id?: string;
   ignoreBoundary?: boolean;

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
         });
@@ -529,9 +529,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,
-            returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
-            autoFocus: this.state.autoFocusAfterPositioning
-          }, this.renderPopover(renderedContent)))));
+            returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+            autoFocus: this.state.autoFocusAfterPositioning,
+            focusOptions: this.props.focusOptions
+          }, !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
@@ -475,10 +474,18 @@ class PopoverInner extends React.Component<
                 disabled={!this.props.focusLock}
                 noFocusGuards={false}
                 // see popover-focus-loop.scenario.js for why hover cannot return focus
-                returnFocus={this.props.returnFocus && !this.isHoverTrigger()}
+                returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
                 autoFocus={this.state.autoFocusAfterPositioning}
+                focusOptions={this.props.focusOptions}
               >
-                {this.renderPopover(renderedContent)}
+                {!this.props.focusLock &&
+                this.state.autoFocusAfterPositioning ? (
+                  <MoveFocusInside>
+                    {this.renderPopover(renderedContent)}
+                  </MoveFocusInside>
+                ) : (
+                  this.renderPopover(renderedContent)
+                )}
               </FocusLock>
             </TetherBehavior>
           </Layer>,

package/popover/stateful-container.js

@@ -212,7 +212,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
           returnFocus = _this$props.returnFocus,
           showArrow = _this$props.showArrow,
           triggerType = _this$props.triggerType,
-          popoverMargin = _this$props.popoverMargin;
+          popoverMargin = _this$props.popoverMargin,
+          focusOptions = _this$props.focusOptions;
       var popoverProps = {
         accessibilityType: accessibilityType,
         autoFocus: autoFocus,
@@ -235,7 +236,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         returnFocus: returnFocus,
         showArrow: showArrow,
         triggerType: triggerType,
-        popoverMargin: popoverMargin
+        popoverMargin: popoverMargin,
+        focusOptions: focusOptions
       };
 
       if (dismissOnClickOutside) {

package/popover/stateful-container.js.flow

@@ -171,6 +171,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     } = this.props;
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
@@ -196,6 +197,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     };
 
     if (dismissOnClickOutside) {

package/popover/types.js.flow

@@ -83,6 +83,8 @@ export type BasePopoverPropsT = {
   onClick?: (e: Event) => mixed,
   /** Handler for 'Esc' keypress events */
   onFocus?: (e: Event) => mixed,
+  /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */
+  focusOptions?: FocusOptions,
   /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: Event) => mixed,
   /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */
@@ -104,7 +106,10 @@ export type BasePopoverPropsT = {
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?: boolean,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */

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/snackbar/index.d.ts

@@ -1,22 +1,27 @@
 import * as React from 'react';
 
 import {Override} from '../overrides';
-import {DURATION, PLACEMENT} from './constants.js';
-export {DURATION, PLACEMENT} from './constants.js';
-
-export type DurationT =
-  | typeof DURATION.infinite
-  | typeof DURATION.short
-  | typeof DURATION.medium
-  | typeof DURATION.long;
-
-export type PlacementT =
-  | typeof PLACEMENT.topLeft
-  | typeof PLACEMENT.top
-  | typeof PLACEMENT.topRight
-  | typeof PLACEMENT.bottomLeft
-  | typeof PLACEMENT.bottom
-  | typeof PLACEMENT.bottomRight;
+
+declare const DURATION: {
+  infinite: number;
+  short: number;
+  medium: number;
+  long: number;
+};
+
+declare const PLACEMENT: {
+  topLeft: 'topLeft';
+  top: 'top';
+  topRight: 'topRight';
+  bottomRight: 'bottomRight';
+  bottom: 'bottom';
+  bottomLeft: 'bottomLeft';
+};
+export {DURATION, PLACEMENT};
+
+export type DurationT = (typeof DURATION)[keyof typeof DURATION];
+
+export type PlacementT = (typeof PLACEMENT)[keyof typeof PLACEMENT];
 
 export type SnackbarElementOverridesT = {
   Root?: Override<any>;

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/timepicker/index.d.ts

@@ -22,6 +22,7 @@ export interface TimePickerProps {
   size?: SIZE[keyof SIZE];
   minTime?: Date;
   maxTime?: Date;
+  ignoreMinMaxDateComponent?: boolean;
 }
 export interface TimePickerState {
   steps: number[];

package/timepicker/timepicker.js

@@ -219,26 +219,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
       var _this$props = _this.props,
           min = _this$props.minTime,
-          max = _this$props.maxTime;
+          max = _this$props.maxTime,
+          ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
 
-      var midnight = _this.setTime(_this.props.value, 0, 0, 0);
+      var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
+
+      if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = _this.setTime(_this.props.value, 24, 0, 0);
+      if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
+        max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        _this.props.adapter.getSeconds(max) + 1);
       }
 
       var minDate = _this.props.adapter.toJsDate(min);
 
       var maxDate = _this.props.adapter.toJsDate(max);
 
-      var midnightDate = _this.props.adapter.toJsDate(midnight);
+      var midnightDate = _this.props.adapter.toJsDate(dayStart);
 
       return {
         start: (minDate - midnightDate) / 1000,
@@ -325,7 +330,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           steps: steps,
           value: this.props.nullable ? undefined : {
             id: closestStep,
-            label: this.secondsToLabel(closestStep, undefined)
+            label: this.secondsToLabel(closestStep, this.props.format)
           }
         });
 
@@ -427,7 +432,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: _dateFnsAdapter.default
+  adapter: _dateFnsAdapter.default,
+  ignoreMinMaxDateComponent: false
 });
 
 var _default = TimePicker;

package/timepicker/timepicker.js.flow

@@ -34,6 +34,7 @@ class TimePicker<T = Date> extends React.Component<
     step: 900,
     creatable: false,
     adapter: dateFnsAdapter,
+    ignoreMinMaxDateComponent: false,
   };
   dateHelpers: DateHelpers<T>;
 
@@ -66,7 +67,7 @@ class TimePicker<T = Date> extends React.Component<
           ? undefined
           : {
               id: closestStep,
-              label: this.secondsToLabel(closestStep, undefined),
+              label: this.secondsToLabel(closestStep, this.props.format),
             },
       });
       if (this.props.value || (!this.props.nullable && !this.props.value)) {
@@ -200,24 +201,42 @@ class TimePicker<T = Date> extends React.Component<
   };
 
   getTimeWindowInSeconds = (step: number): {start: number, end: number} => {
-    let {minTime: min, maxTime: max} = this.props;
-    let midnight = this.setTime(this.props.value, 0, 0, 0);
-    if (!min) {
-      min = midnight;
+    let {minTime: min, maxTime: max, ignoreMinMaxDateComponent} = this.props;
+    const dayStart = this.setTime(this.props.value, 0, 0, 0);
+    const dayEnd = this.setTime(this.props.value, 24, 0, 0);
+
+    if (
+      !min ||
+      (this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent)
+    ) {
+      min = dayStart;
+    } else {
+      min = this.setTime(
+        this.props.value,
+        this.props.adapter.getHours(min),
+        this.props.adapter.getMinutes(min),
+        this.props.adapter.getSeconds(min),
+      );
     }
-    if (!max) {
-      max = this.setTime(this.props.value, 24, 0, 0);
+
+    if (
+      !max ||
+      (this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent)
+    ) {
+      max = dayEnd;
     } else {
-      // maxTime (if provided) should be inclusive, so add an extra step here
-      max = this.props.adapter.setSeconds(
-        this.props.adapter.date(max),
-        this.props.adapter.getSeconds(max) + step,
+      max = this.setTime(
+        this.props.value,
+        this.props.adapter.getHours(max),
+        this.props.adapter.getMinutes(max),
+        // maxTime (if provided) should be inclusive, so add an extra second here
+        this.props.adapter.getSeconds(max) + 1,
       );
     }
 
     const minDate = this.props.adapter.toJsDate(min);
     const maxDate = this.props.adapter.toJsDate(max);
-    const midnightDate = this.props.adapter.toJsDate(midnight);
+    const midnightDate = this.props.adapter.toJsDate(dayStart);
     return {
       start: (minDate - midnightDate) / 1000,
       end: (maxDate - midnightDate) / 1000,

package/timepicker/types.js.flow

@@ -37,6 +37,15 @@ export type TimePickerPropsT<T = Date> = {
   size?: SizeT,
   minTime?: T,
   maxTime?: T,
+  /**
+   * There are two strategies available for setting min/max times. If the min/max datetimes are
+   * beyond the start/end times of the current value's date, Timepicker could either clamp the
+   * min/max time of the start/end of the day or it can ignore the min/max date components and
+   * only apply the time components. Each strategy has the potential to save developer time in
+   * avoiding the need to perform conversion before providing min/max datetimes to the component.
+   * By default the component will clamp the time window and setting this flag will ignore dates.
+   */
+  ignoreMinMaxDateComponent?: boolean,
 };
 export type TimePickerStateT = {
   /** List of times (in seconds) displayed in the dropdown menu. */
@@ -50,6 +59,7 @@ export type TimePickerDefaultPropsT = {
   step: 900,
   creatable: false,
   adapter: DateIOAdapter<Date>,
+  ignoreMinMaxDateComponent: false,
 };
 
 declare var __DEV__: boolean;

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}
+      />
     );
   }
 }