baseui 14.0.0 → 15.0.0

package/dialog/dialog.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _layer = require("../layer");
 var _index = require("../styles/index");
 var _overrides = require("../helpers/overrides");
 var _buttonDock = require("../button-dock");
@@ -12,6 +14,7 @@ var _button = require("../button");
 var _icon = require("../icon");
 var _styledComponents = require("./styled-components");
 var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); } /*
@@ -31,22 +34,26 @@ function renderArtwork(artwork) {
 }
 const DefaultDismissButton = props => {
   const overrides = {
+    ...props.overrides,
     BaseButton: {
+      ...props.overrides?.BaseButton,
       style: {
         position: 'absolute',
         top: '16px',
         right: '8px',
         // this will be tokenized in the future
         backgroundColor: 'rgba(255, 255, 255, 0.6)',
-        zIndex: 1
+        zIndex: 1,
+        ...props.overrides?.BaseButton?.style
       }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
     kind: _button.KIND.secondary,
-    shape: _button.SHAPE.circle,
+    shape: _button.SHAPE.circle
+  }, props, {
     overrides: overrides
-  }, props), /*#__PURE__*/_react.default.createElement(_icon.Delete, {
+  }), /*#__PURE__*/_react.default.createElement(_icon.Delete, {
     size: 36
   }));
 };
@@ -69,7 +76,7 @@ const Dialog = ({
   artwork,
   buttonDock,
   children,
-  handleDismiss,
+  onDismiss,
   showDismissButton = true,
   hasOverlay = true,
   heading,
@@ -77,33 +84,21 @@ const Dialog = ({
   overrides = {},
   placement = _constants.PLACEMENT.center,
   numHeadingLines = 2,
-  size = _constants.SIZE.xSmall
+  size = _constants.SIZE.xSmall,
+  autoFocus = true
 }) => {
   const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
   const [ScrollContainer, scrollContainerProps] = (0, _overrides.getOverrides)(overrides.ScrollContainer, _styledComponents.StyledScrollContainer);
   const [Heading, headingProps] = (0, _overrides.getOverrides)(overrides.Heading, _styledComponents.StyledHeading);
+  const [Overlay, overlayProps] = (0, _overrides.getOverrides)(overrides.Overlay, _styledComponents.StyledOverlay);
   const [Body, bodyProps] = (0, _overrides.getOverrides)(overrides.Body, _styledComponents.StyledBody);
   const [ButtonDock, buttonDockProps] = (0, _overrides.getOverrides)(overrides.ButtonDock, DefaultButtonDock);
   const [DismissButton, dismissButtonProps] = (0, _overrides.getOverrides)(overrides.DismissButton, DefaultDismissButton);
-  const dialogRef = _react.default.useRef(null);
-
-  // controls the dialog's open/close state
-  _react.default.useEffect(() => {
-    if (isOpen) {
-      if (hasOverlay) {
-        dialogRef.current?.showModal();
-        document.body.style.overflow = 'hidden';
-      } else {
-        dialogRef.current?.show();
-      }
-    } else {
-      dialogRef.current?.close();
-    }
-  }, [isOpen, hasOverlay]);
+  const overlayRef = (0, _react.useRef)(null);
 
   // prevents background scrolling when the dialog is open and has an overlay
-  const originalOverflowRef = _react.default.useRef(document.body.style.overflow);
-  _react.default.useEffect(() => {
+  const originalOverflowRef = (0, _react.useRef)(typeof document !== 'undefined' ? document?.body?.style?.overflow : '');
+  (0, _react.useEffect)(() => {
     const originalOverflow = originalOverflowRef.current;
     if (isOpen && hasOverlay) {
       document.body.style.overflow = 'hidden';
@@ -115,46 +110,33 @@ const Dialog = ({
     };
   }, [isOpen, hasOverlay]);
   function handleOutsideClick(e) {
-    if (!handleDismiss) return;
-    if (!dialogRef.current?.contains(e.target) || e.target.nodeName === 'DIALOG') {
-      handleDismiss();
+    if (e.target && e.target instanceof HTMLElement && e.target.contains(overlayRef.current) && onDismiss) {
+      onDismiss();
     }
   }
-  function handleEscapeKey(e) {
-    if (!handleDismiss) return;
-    if (e.key === 'Escape') {
-      handleDismiss();
-    }
+  function handleEscape() {
+    onDismiss && onDismiss();
   }
-  _react.default.useEffect(() => {
-    if (isOpen) {
-      // No delay, just pushing it to the end of the call stack so that the
-      // Dialog doesn't close immediately after opening via click event
-      const timer = setTimeout(() => {
-        document.addEventListener('click', handleOutsideClick);
-      }, 0);
-      document.addEventListener('keydown', handleEscapeKey);
-      return () => {
-        clearTimeout(timer);
-        document.removeEventListener('click', handleOutsideClick);
-        document.removeEventListener('keydown', handleEscapeKey);
-      };
-    } else {
-      document.removeEventListener('click', handleOutsideClick);
-      document.removeEventListener('keydown', handleEscapeKey);
-    }
-  }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(Root, _extends({
-    ref: dialogRef,
-    $isOpen: isOpen,
+  return isOpen ? /*#__PURE__*/_react.default.createElement(_layer.Layer, {
+    onDocumentClick: handleOutsideClick,
+    onEscape: handleEscape
+  }, hasOverlay && /*#__PURE__*/_react.default.createElement(Overlay, _extends({
+    ref: overlayRef
+  }, overlayProps)), /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+    returnFocus: true,
+    autoFocus: autoFocus
+  }, /*#__PURE__*/_react.default.createElement(Root, _extends({
     $size: size,
-    $placement: placement
-  }, rootProps), handleDismiss && showDismissButton && /*#__PURE__*/_react.default.createElement(DismissButton, _extends({
-    onClick: () => handleDismiss()
+    $placement: placement,
+    role: "dialog",
+    "aria-labelledby": "dialog-title"
+  }, rootProps), onDismiss && showDismissButton && /*#__PURE__*/_react.default.createElement(DismissButton, _extends({
+    onClick: () => onDismiss()
   }, dismissButtonProps)), /*#__PURE__*/_react.default.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
     tabIndex: 0
   }), renderArtwork(artwork), /*#__PURE__*/_react.default.createElement(Heading, _extends({
-    $numHeadingLines: numHeadingLines
-  }, headingProps), heading), /*#__PURE__*/_react.default.createElement(Body, bodyProps, children)), buttonDock && /*#__PURE__*/_react.default.createElement(ButtonDock, _extends({}, buttonDock, buttonDockProps)));
+    $numHeadingLines: numHeadingLines,
+    id: "dialog-title"
+  }, headingProps), heading), /*#__PURE__*/_react.default.createElement(Body, bodyProps, children)), buttonDock && /*#__PURE__*/_react.default.createElement(ButtonDock, _extends({}, buttonDock, buttonDockProps))))) : null;
 };
 var _default = exports.default = Dialog;

package/dialog/styled-components.d.ts

@@ -1,9 +1,9 @@
 import type { Size, Placement } from './types';
-export declare const StyledRoot: import("styletron-react").StyletronComponent<"dialog", {
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
     $size: Size;
     $placement: Placement;
-    $isOpen: boolean;
 }>;
+export declare const StyledOverlay: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const StyledScrollContainer: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const StyledHeading: import("styletron-react").StyletronComponent<"div", {
     $numHeadingLines: number;

package/dialog/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledScrollContainer = exports.StyledRoot = exports.StyledHeading = exports.StyledBody = void 0;
+exports.StyledScrollContainer = exports.StyledRoot = exports.StyledOverlay = exports.StyledHeading = exports.StyledBody = void 0;
 var _styles = require("../styles");
 var _constants = require("./constants");
 /*
@@ -70,21 +70,48 @@ const getPlacementStyles = (placement, gutter) => {
       return defaultStyles;
   }
 };
+const getAnimationStyles = placement => {
+  const transformValuesByPlacement = {
+    [_constants.PLACEMENT.topLeft]: ['translateY(16px)', 'translateY(0px)'],
+    [_constants.PLACEMENT.topCenter]: ['translateX(-50%) translateY(16px)', 'translateX(-50%) translateY(0px)'],
+    [_constants.PLACEMENT.topRight]: ['translateY(16px)', 'translateY(0px)'],
+    [_constants.PLACEMENT.bottomLeft]: ['translateY(16px)', 'translateY(0px)'],
+    [_constants.PLACEMENT.bottomCenter]: ['translateX(-50%) translateY(16px)', 'translateX(-50%) translateY(0px)'],
+    [_constants.PLACEMENT.bottomRight]: ['translateY(16px)', 'translateY(0px)'],
+    [_constants.PLACEMENT.center]: ['translateX(-50%) translateY(calc(-50% + 16px))', 'translateX(-50%) translateY(-50%)']
+  };
+  return {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    animationName: {
+      from: {
+        opacity: 0,
+        transform: transformValuesByPlacement[placement][0]
+      },
+      to: {
+        opacity: 1,
+        transform: transformValuesByPlacement[placement][1]
+      }
+    }
+  };
+};
 const DIALOG_WIDTHS = {
   [_constants.SIZE.xSmall]: '480px',
   [_constants.SIZE.small]: '640px',
   [_constants.SIZE.medium]: '800px',
   [_constants.SIZE.large]: '100%'
 };
-const StyledRoot = exports.StyledRoot = (0, _styles.styled)('dialog', ({
+const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
   $theme,
   $size,
-  $placement = _constants.PLACEMENT.center,
-  $isOpen
+  $placement = _constants.PLACEMENT.center
 }) => {
   const narrowViewportGutter = '16px';
   const wideViewportGutter = '40px';
   return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     position: 'fixed',
     maxHeight: `calc(100vh - (2 * ${wideViewportGutter}))`,
     maxWidth: `calc(100% - (2 * ${wideViewportGutter}))`,
@@ -96,33 +123,38 @@ const StyledRoot = exports.StyledRoot = (0, _styles.styled)('dialog', ({
     border: 'none',
     width: DIALOG_WIDTHS[$size],
     ...getPlacementStyles($placement, wideViewportGutter),
+    ...getAnimationStyles($placement),
     '@media (max-width: 599px)': {
       width: `calc(100% - (2 * ${narrowViewportGutter}))`,
       maxWidth: 'none',
-      ...getPlacementStyles(_constants.PLACEMENT.bottomCenter, narrowViewportGutter)
-    },
-    '::backdrop': {
-      backgroundColor: $theme.colors.backgroundOverlay
-    },
-    // Dialog style resets
-    marginTop: '0px',
-    marginRight: '0px',
-    marginBottom: '0px',
-    marginLeft: '0px',
-    paddingTop: '0px',
-    paddingRight: '0px',
-    paddingBottom: '0px',
-    paddingLeft: '0px',
-    // modifying the default `display` value for a closed dialog element causes unexpected behavior
-    ...($isOpen ? {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
-    } : {})
+      ...getPlacementStyles(_constants.PLACEMENT.bottomCenter, narrowViewportGutter),
+      ...getAnimationStyles(_constants.PLACEMENT.bottomCenter)
+    }
   };
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
+const StyledOverlay = exports.StyledOverlay = (0, _styles.styled)('div', ({
+  $theme
+}) => ({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: $theme.colors.backgroundOverlay,
+  animationDuration: '100ms',
+  animationName: {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  }
+}));
+StyledOverlay.displayName = "StyledOverlay";
+StyledOverlay.displayName = 'StyledOverlay';
 const StyledScrollContainer = exports.StyledScrollContainer = (0, _styles.styled)('div', () => {
   return {
     flex: 1,

package/dialog/types.d.ts

@@ -5,6 +5,7 @@ import type { ButtonDockProps } from '../button-dock';
 import type { SIZE, PLACEMENT } from './constants';
 export type DialogOverrides = {
     Root?: Override;
+    Overlay?: Override;
     ScrollContainer?: Override;
     Heading?: Override;
     Body?: Override;
@@ -21,8 +22,8 @@ export type DialogProps = {
     /** The contents of the body of Dialog */
     children?: React.ReactNode | (() => React.ReactNode);
     /** Determine if and how dialog can be dismissed */
-    handleDismiss?: () => void | null;
-    /** Should Dialog include a dedicated X button to dismiss the dialog. Ignored if handleDismiss is not supplied. */
+    onDismiss?: () => void | null;
+    /** Should Dialog include a dedicated X button to dismiss the dialog. Ignored if onDismiss is not supplied. */
     showDismissButton?: boolean;
     /** Determines whether the background behind the Dialog is dimmed when Dialog is open  */
     hasOverlay?: boolean;
@@ -34,4 +35,6 @@ export type DialogProps = {
     /** Determines where on the screen the dialog appears when open */
     placement?: Placement;
     size?: Size;
+    /** If true, focus will shift to the first interactive element within the modal */
+    autoFocus?: boolean;
 };

package/file-uploader/constants.d.ts

@@ -0,0 +1,16 @@
+import type { Theme } from '../styles';
+export declare const FILE_STATUS: {
+    readonly added: "added";
+    readonly error: "error";
+    readonly processed: "processed";
+};
+export declare const FILE_STATUS_TO_COLOR_MAP: ($theme: Theme) => {
+    added: string;
+    error: string;
+    processed: string;
+};
+export declare enum ARIA_LIVE_ELEMENT_ID {
+    ADDITION = "file-uploader-addition",
+    REMOVAL = "file-uploader-removal"
+}
+export declare const ARIA_LIVE_TIMEOUT_MS = 5000;

package/file-uploader/constants.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILE_STATUS_TO_COLOR_MAP = exports.FILE_STATUS = exports.ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_ELEMENT_ID = void 0;
+/*
+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.
+*/
+
+const FILE_STATUS = exports.FILE_STATUS = {
+  added: 'added',
+  error: 'error',
+  processed: 'processed'
+};
+const FILE_STATUS_TO_COLOR_MAP = $theme => ({
+  [FILE_STATUS.added]: $theme.colors.accent,
+  [FILE_STATUS.error]: $theme.colors.negative,
+  [FILE_STATUS.processed]: $theme.colors.positive
+});
+exports.FILE_STATUS_TO_COLOR_MAP = FILE_STATUS_TO_COLOR_MAP;
+let ARIA_LIVE_ELEMENT_ID = exports.ARIA_LIVE_ELEMENT_ID = /*#__PURE__*/function (ARIA_LIVE_ELEMENT_ID) {
+  ARIA_LIVE_ELEMENT_ID["ADDITION"] = "file-uploader-addition";
+  ARIA_LIVE_ELEMENT_ID["REMOVAL"] = "file-uploader-removal";
+  return ARIA_LIVE_ELEMENT_ID;
+}({});
+const ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_TIMEOUT_MS = 5000;

package/file-uploader/file-uploader.d.ts

@@ -3,8 +3,8 @@ import type { FileUploaderProps } from './types';
 declare function FileUploader(props: FileUploaderProps): React.JSX.Element;
 declare namespace FileUploader {
     var defaultProps: {
-        disableClick: boolean;
-        overrides: {};
+        fileRows: any[];
+        setFileRows: () => void;
     };
 }
 export default FileUploader;