@conveyorhq/arrow-ds 1.54.0 → 1.55.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.54.0",
+  "version": "1.55.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/FileUpload/FileUpload.d.ts

@@ -2,7 +2,8 @@ import React, { HTMLProps } from "react";
 import { ButtonProps } from "../Button";
 export interface FileUploadProps extends React.HTMLProps<HTMLLabelElement> {
     inputProps: HTMLProps<HTMLInputElement>;
-    buttonProps: ButtonProps;
+    buttonProps?: ButtonProps;
     label?: string;
+    hideFileLabel?: boolean;
 }
-export declare const FileUpload: ({ className, inputProps, buttonProps, label, ...rest }: FileUploadProps) => JSX.Element;
+export declare const FileUpload: ({ className, inputProps, buttonProps, label, hideFileLabel, ...rest }: FileUploadProps) => JSX.Element;

package/public/components/FileUpload/FileUpload.js

@@ -31,7 +31,7 @@ const FormGroupContext_1 = require("../FormGroup/FormGroupContext");
 const Text_1 = require("../Text");
 const Truncate_1 = require("../Truncate");
 const cn = "FileUpload";
-const FileUpload = ({ className, inputProps = {}, buttonProps = {}, label = "Select file", ...rest }) => {
+const FileUpload = ({ className, inputProps = {}, buttonProps = {}, label = "Select file", hideFileLabel, ...rest }) => {
     const inputRef = react_1.useRef(null);
     const { id: idProp, onChange, ...inputRest } = inputProps;
     const { id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
@@ -63,7 +63,7 @@ const FileUpload = ({ className, inputProps = {}, buttonProps = {}, label = "Sel
     return (react_1.default.createElement("label", Object.assign({ htmlFor: id, className: classnames_1.default(bem_1.bem(cn), className) }, rest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "input" })), ref: inputRef, type: "file", id: id, onChange: handleChange }, inputRest)),
         react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, buttonProps), label),
-        react_1.default.createElement(Truncate_1.Truncate, null,
-            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(bem_1.bem(cn, { e: "fileLabel" })) }, fileLabel))));
+        !hideFileLabel && (react_1.default.createElement(Truncate_1.Truncate, null,
+            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(bem_1.bem(cn, { e: "fileLabel" })) }, fileLabel)))));
 };
 exports.FileUpload = FileUpload;

package/public/components/FileUpload/FileUploadDnD.d.ts

@@ -6,6 +6,7 @@ interface FileUploadDndPropsBase extends Omit<HTMLProps<HTMLLabelElement>, "onCh
     label?: string;
     inputProps?: HTMLProps<HTMLInputElement>;
     buttonProps?: ButtonProps;
+    hideFileLabel?: boolean;
 }
 interface FileUploadDndPropsSingle extends FileUploadDndPropsBase {
     onChange: (file: File | null) => void;

package/public/components/FileUpload/FileUploadDnD.js

@@ -35,7 +35,7 @@ const Text_1 = require("../Text");
 const Truncate_1 = require("../Truncate");
 const cn = utilities_1.bemHOF("FileUpload");
 const ERROR_TIMEOUT = 5000;
-const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "Select file", ...props }) => {
+const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "Select file", hideFileLabel, ...props }) => {
     const inputRef = react_1.useRef(null);
     const { id: contextId } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const inputId = inputProps ? inputProps.id : undefined;
@@ -139,7 +139,10 @@ const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "
     return (react_1.default.createElement("label", Object.assign({ ref: drop, htmlFor: id, className: classnames_1.default(cn(), isActive && cn({ m: "active" }), className) }, labelRest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), inputClassName), ref: inputRef, type: "file", id: id, multiple: props.multiple, accept: accept }, inputRest, { onChange: handleInputChange })),
         react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, buttonProps), label),
-        react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) }, errorText ? (react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText)) : (react_1.default.createElement(Text_1.Text, { className: classnames_1.default(cn({ e: "fileLabel" })) }, fileLabel)))));
+        errorText && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
+            react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText))),
+        !hideFileLabel && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
+            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(cn({ e: "fileLabel" })) }, fileLabel)))));
 };
 const FileUploadDnD = (props) => {
     return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },

package/src/components/FileUpload/FileUpload.tsx

@@ -10,8 +10,9 @@ const cn = "FileUpload";
 
 export interface FileUploadProps extends React.HTMLProps<HTMLLabelElement> {
   inputProps: HTMLProps<HTMLInputElement>;
-  buttonProps: ButtonProps;
+  buttonProps?: ButtonProps;
   label?: string;
+  hideFileLabel?: boolean;
 }
 
 // @Deprecated
@@ -22,6 +23,7 @@ export const FileUpload = ({
   inputProps = {},
   buttonProps = {},
   label = "Select file",
+  hideFileLabel,
   ...rest
 }: FileUploadProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -74,11 +76,13 @@ export const FileUpload = ({
       >
         {label}
       </Button>
-      <Truncate>
-        <Text className={classNames(bem(cn, { e: "fileLabel" }))}>
-          {fileLabel}
-        </Text>
-      </Truncate>
+      {!hideFileLabel && (
+        <Truncate>
+          <Text className={classNames(bem(cn, { e: "fileLabel" }))}>
+            {fileLabel}
+          </Text>
+        </Truncate>
+      )}
     </label>
   );
 };

package/src/components/FileUpload/FileUploadDnD.tsx

@@ -49,6 +49,10 @@ interface FileUploadDndPropsBase
    * Props passed directly to the underlying `<Button>` element.
    */
   buttonProps?: ButtonProps;
+  /**
+   * If true, text showing selected file name will not be shown.  Errors will still be shown.
+   */
+  hideFileLabel?: boolean;
 }
 
 interface FileUploadDndPropsSingle extends FileUploadDndPropsBase {
@@ -88,6 +92,7 @@ const FileUploadInput = ({
   className,
   accept,
   label = "Select file",
+  hideFileLabel,
   ...props
 }: FileUploadDndProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -246,17 +251,20 @@ const FileUploadInput = ({
       >
         {label}
       </Button>
-      <Truncate className={cn({ e: "truncate" })}>
-        {errorText ? (
+      {errorText && (
+        <Truncate className={cn({ e: "truncate" })}>
           <Text as="span" className={cn({ e: "error" })}>
             {errorText}
           </Text>
-        ) : (
+        </Truncate>
+      )}
+      {!hideFileLabel && (
+        <Truncate className={cn({ e: "truncate" })}>
           <Text className={classNames(cn({ e: "fileLabel" }))}>
             {fileLabel}
           </Text>
-        )}
-      </Truncate>
+        </Truncate>
+      )}
     </label>
   );
 };