baseui 0.0.0-next-bdd41d47f → 0.0.0-next-18f01efe0

package/file-uploader/types.d.ts

@@ -3,14 +3,11 @@ import type { DragEvent } from 'react';
 import type { Override } from '../helpers/overrides';
 export type StyleProps = {
     $afterFileDrop: boolean;
-    $alt: string;
-    $color: string;
     $disabled: boolean;
     $isDragActive: boolean;
     $isDragAccept: boolean;
     $isDragReject: boolean;
     $isFocused: boolean;
-    $src: string;
 };
 export type FileUploaderOverrides = {
     Root?: Override;

package/file-uploader-beta/file-uploader-beta.js

@@ -199,7 +199,7 @@ function FileUploaderBeta(props) {
           style: {
             marginTop: 0,
             // @ts-expect-error
-            ...props.overrides?.ButtonComponent?.props?.style
+            ...(0, _utils.destructureStyleOverride)(props.overrides?.ButtonComponent?.props?.style, theme)
           },
           overrides: {
             // @ts-expect-error
@@ -209,8 +209,9 @@ function FileUploaderBeta(props) {
               ...props.overrides?.ButtonComponent?.props?.overrides?.BaseButton,
               style: {
                 backgroundColor: theme.colors.backgroundPrimary,
+                ...(0, _utils.destructureStyleOverride)(
                 // @ts-expect-error
-                ...props.overrides?.ButtonComponent?.props?.overrides?.BaseButton?.style
+                props.overrides?.ButtonComponent?.props?.overrides?.BaseButton?.style, theme)
               }
             }
           }
@@ -220,7 +221,7 @@ function FileUploaderBeta(props) {
         style: {
           ...theme.typography.ParagraphMedium,
           color: theme.colors.contentTertiary,
-          ...props.overrides?.ContentMessage?.style
+          ...(0, _utils.destructureStyleOverride)(props.overrides?.ContentMessage?.style, theme)
         }
       },
       FileDragAndDrop: {
@@ -233,7 +234,14 @@ function FileUploaderBeta(props) {
           paddingLeft: theme.sizing.scale600,
           paddingRight: theme.sizing.scale600,
           paddingTop: theme.sizing.scale600,
-          ...props.overrides?.FileDragAndDrop?.style
+          ...(0, _utils.destructureStyleOverride)(props.overrides?.FileDragAndDrop?.style, theme)
+        }
+      },
+      Root: {
+        style: {
+          zIndex: 1,
+          ...(0, _utils.destructureStyleOverride)(props.overrides?.Root?.style, theme),
+          ...props.overrides?.Root?.style
         }
       }
     }
@@ -329,7 +337,8 @@ function FileUploaderBeta(props) {
     },
     value: fileRow.status === _constants.FILE_STATUS.processed ? 100 : 20
   }, progressBarProps))))))), props.hint && /*#__PURE__*/React.createElement(Hint, _extends({
-    "data-baseweb": "file-uploader-beta-hint"
+    "data-baseweb": "file-uploader-beta-hint",
+    $fileCount: props.fileRows.length
   }, hintProps), props.hint));
 }
 FileUploaderBeta.defaultProps = {

package/file-uploader-beta/styled-components.js

@@ -15,10 +15,28 @@ LICENSE file in the root directory of this source tree.
 const StyledFileRow = exports.StyledFileRow = (0, _styles.styled)('li', props => {
   const {
     $theme: {
+      animation,
       sizing
     }
   } = props;
   return {
+    animationDuration: animation.timing400,
+    animationFillMode: 'forwards',
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)',
+        opacity: 0
+      },
+      '50%': {
+        opacity: 1
+      },
+      '100%': {
+        transform: 'translateY(0px)',
+        opacity: 1
+      }
+    },
     paddingTop: sizing.scale500,
     paddingRight: sizing.scale500,
     paddingBottom: sizing.scale500,
@@ -137,11 +155,23 @@ StyledFileRowUploadText.displayName = 'StyledFileRowUploadText';
 const StyledFileRows = exports.StyledFileRows = (0, _styles.styled)('ul', props => {
   const {
     $theme: {
+      animation,
       borders,
       sizing
     }
   } = props;
   return {
+    animationDuration: animation.timing500,
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeInOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)'
+      },
+      '100%': {
+        transform: 'translateX(-0px)'
+      }
+    },
     ...borders.border200,
     borderRadius: borders.radius400,
     borderWidth: sizing.scale0,
@@ -155,13 +185,29 @@ StyledFileRows.displayName = "StyledFileRows";
 StyledFileRows.displayName = 'StyledFileRows';
 const StyledHint = exports.StyledHint = (0, _styles.styled)('div', props => {
   const {
+    $fileCount,
     $theme: {
+      animation,
       colors,
       typography
     }
   } = props;
   let fontColor = colors.contentTertiary;
+  const animations = $fileCount > 0 ? {
+    animationDuration: animation.timing500,
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeInOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)'
+      },
+      '100%': {
+        transform: 'translateX(-0px)'
+      }
+    }
+  } : {};
   return {
+    ...animations,
     ...typography.font100,
     color: fontColor
   };

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

@@ -1,15 +1,10 @@
 import type { Override } from '../helpers/overrides';
 import type { FILE_STATUS } from './constants';
-import type { FileUploaderOverrides, FileUploaderProps } from '../file-uploader/types';
-export type StyleProps = {
-    $afterFileDrop: boolean;
+import type { FileUploaderOverrides, FileUploaderProps, StyleProps as FileUploaderBasicStyleProps } from '../file-uploader/types';
+export type StyleProps = FileUploaderBasicStyleProps & {
     $alt: string;
     $color: string;
-    $disabled: boolean;
-    $isDragActive: boolean;
-    $isDragAccept: boolean;
-    $isDragReject: boolean;
-    $isFocused: boolean;
+    $fileCount: number;
     $src: string;
 };
 export type FileUploaderBetaOverrides = {

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

@@ -1 +1,3 @@
+import type { Theme } from '../styles';
+export declare const destructureStyleOverride: (styleOverride: any, theme: Theme) => any;
 export declare const formatBytes: (bytes: number) => string;

package/file-uploader-beta/utils.js

@@ -3,13 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatBytes = void 0;
+exports.formatBytes = exports.destructureStyleOverride = 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 destructureStyleOverride = (styleOverride, theme) => {
+  if (typeof styleOverride === 'function') {
+    return styleOverride({
+      $theme: theme
+    });
+  } else {
+    return styleOverride;
+  }
+};
+exports.destructureStyleOverride = destructureStyleOverride;
 const formatBytes = bytes => {
   if (bytes === 0) return '0 bytes';
   const k = 1000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-bdd41d47f",
+  "version": "0.0.0-next-18f01efe0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",