@razorpay/blade 11.6.0 → 11.6.2

package/build/lib/web/production/components/FileUpload/FileUpload.web.js

@@ -0,0 +1,434 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useState, useMemo, useCallback, forwardRef } from 'react';
+import { StyledFileUploadWrapper } from './StyledFileUploadWrapper.js';
+import { fileUploadColorTokens, getFileUploadInputHoverTokens, fileUploadLinkBorderTokens } from './fileUploadTokens.js';
+import { FileUploadItem } from './FileUploadItem.js';
+import { isFileAccepted } from './isFileAccepted.js';
+import '../Box/BaseBox/index.js';
+import '../Box/index.js';
+import { SelectorLabel } from '../Form/Selector/SelectorLabel.web.js';
+import { SelectorInput } from '../Form/Selector/SelectorInput.web.js';
+import '../VisuallyHidden/index.web.js';
+import '../Form/index.js';
+import { useFormId } from '../Form/useFormId.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../Box/styledProps/index.js';
+import '../../utils/index.js';
+import '../Typography/index.js';
+import { getHintType } from '../Input/BaseInput/BaseInput.js';
+import '../../utils/makeAccessible/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { FormLabel } from '../Form/FormLabel.js';
+import { screenReaderStyles } from '../VisuallyHidden/ScreenReaderStyles.js';
+import { Box } from '../Box/Box.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { Text } from '../Typography/Text/Text.js';
+import { FormHint } from '../Form/FormHint.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["name", "accept", "uploadType", "onChange", "onPreview", "onRemove", "onDismiss", "onDrop", "isDisabled", "isRequired", "necessityIndicator", "fileList", "testID", "label", "labelPosition", "accessibilityLabel", "validationState", "helpText", "errorText", "maxCount", "maxSize"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var _FileUpload = function _FileUpload(_ref, ref) {
+  var name = _ref.name,
+    accept = _ref.accept,
+    _ref$uploadType = _ref.uploadType,
+    uploadType = _ref$uploadType === void 0 ? 'single' : _ref$uploadType,
+    onChange = _ref.onChange,
+    onPreview = _ref.onPreview,
+    _onRemove = _ref.onRemove,
+    _onDismiss = _ref.onDismiss,
+    onDrop = _ref.onDrop,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    necessityIndicator = _ref.necessityIndicator,
+    fileList = _ref.fileList,
+    testID = _ref.testID,
+    label = _ref.label,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
+    accessibilityLabel = _ref.accessibilityLabel,
+    validationState = _ref.validationState,
+    helpText = _ref.helpText,
+    errorText = _ref.errorText,
+    maxCount = _ref.maxCount,
+    maxSize = _ref.maxSize,
+    styledProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    platform = _useTheme.platform;
+  var _useState = useState(fileList !== null && fileList !== void 0 ? fileList : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedFiles = _useState2[0],
+    setSelectedFiles = _useState2[1];
+  var _useState3 = useState(errorText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorMessage = _useState4[0],
+    setErrorMessage = _useState4[1];
+  console.log('🚀 ~ errorMessage:', errorMessage);
+  var _useState5 = useState('none'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalValidationState = _useState6[0],
+    setInternalValidationState = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isActive = _useState8[0],
+    setIsActive = _useState8[1];
+  var isMultiple = uploadType === 'multiple';
+  var isOneFileSelectedWithSingleUpload = !isMultiple && selectedFiles.length === 1;
+  var inputLabelPosition = platform === 'onMobile' ? 'top' : labelPosition;
+  var isLabelLeftPositioned = inputLabelPosition === 'left';
+  var willRenderHintText = Boolean(helpText) || Boolean(errorMessage);
+  var showError = validationState === 'error' || internalValidationState === 'error';
+  var showHelpText = !showError && helpText;
+  var accessibilityText = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : ",".concat(showError ? errorText : '', " ").concat(showHelpText ? helpText : '');
+  var _useFormId = useFormId('fileuploadinput'),
+    inputId = _useFormId.inputId,
+    labelId = _useFormId.labelId,
+    helpTextId = _useFormId.helpTextId,
+    errorTextId = _useFormId.errorTextId;
+  var accessibilityProps = makeAccessible({
+    required: Boolean(isRequired),
+    invalid: Boolean(showError),
+    disabled: Boolean(isDisabled),
+    describedBy: labelId
+  });
+
+  // In control mode attach a unique id to each file if not provided
+  useMemo(function () {
+    var _iterator = _createForOfIteratorHelper(selectedFiles),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var file = _step.value;
+        if (!file.id) {
+          file.id = "".concat(new Date().getTime().toString()).concat(Math.floor(Math.random() * 1000000));
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, [selectedFiles]);
+  var handleFilesChange = useCallback(function (inputFiles) {
+    setSelectedFiles(function (prevFiles) {
+      if (prevFiles.length > 0) {
+        var allFiles = [].concat(_toConsumableArray(prevFiles), _toConsumableArray(inputFiles));
+        return allFiles;
+      }
+      return inputFiles;
+    });
+  }, []);
+  var validateFiles = function validateFiles(inputFiles, allFiles) {
+    if (accept && inputFiles.some(function (file) {
+      return !isFileAccepted(file, accept);
+    })) {
+      setErrorMessage("You provided an unsupported file type. Supported file types are: ".concat(accept));
+      setInternalValidationState('error');
+      return true;
+    }
+    if (uploadType === 'single' && inputFiles.length > 1) {
+      setErrorMessage('You can upload only one file.');
+      setInternalValidationState('error');
+      return true;
+    }
+    if (maxCount && allFiles.length > maxCount) {
+      setErrorMessage("You can't upload more than ".concat(maxCount, " files."));
+      setInternalValidationState('error');
+      return true;
+    }
+    if (maxSize && inputFiles.some(function (file) {
+      return file.size > maxSize;
+    })) {
+      setErrorMessage('File size exceeded.');
+      setInternalValidationState('error');
+      return true;
+    }
+    setInternalValidationState('none');
+    setErrorMessage('');
+    return false;
+  };
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    setIsActive(true);
+  };
+  var handleDragLeave = function handleDragLeave(event) {
+    event.preventDefault();
+    setIsActive(false);
+  };
+  var handleDrop = function handleDrop(event) {
+    event.preventDefault();
+    setIsActive(false);
+    var droppedFiles = Array.from(event.dataTransfer.files);
+    var allFiles = selectedFiles.length > 0 ? [].concat(_toConsumableArray(selectedFiles), droppedFiles) : droppedFiles;
+    var hasValidationErrors = validateFiles(droppedFiles, allFiles);
+    if (!hasValidationErrors) {
+      handleFilesChange(droppedFiles);
+      onDrop === null || onDrop === void 0 ? void 0 : onDrop({
+        name: name,
+        fileList: allFiles
+      });
+    }
+  };
+  var handleInputChange = function handleInputChange(event) {
+    var _event$target$files;
+    var inputFiles = Array.from((_event$target$files = event.target.files) !== null && _event$target$files !== void 0 ? _event$target$files : []);
+    var allFiles = selectedFiles.length > 0 ? [].concat(_toConsumableArray(selectedFiles), inputFiles) : inputFiles;
+    var hasValidationErrors = validateFiles(inputFiles, allFiles);
+    if (!hasValidationErrors) {
+      handleFilesChange(inputFiles);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        name: name,
+        fileList: allFiles
+      });
+    }
+  };
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  }, metaAttribute({
+    name: MetaConstants.FileUpload,
+    testID: testID
+  })), getStyledProps(styledProps)), {}, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: isLabelLeftPositioned ? 'row' : 'column',
+      alignItems: isLabelLeftPositioned ? 'center' : undefined,
+      position: "relative",
+      width: "100%",
+      children: [label ? /*#__PURE__*/jsx(FormLabel, {
+        as: "span",
+        necessityIndicator: necessityIndicator,
+        position: labelPosition,
+        id: labelId,
+        accessibilityText: accessibilityText,
+        children: label
+      }) : null, /*#__PURE__*/jsx(SelectorLabel, {
+        componentName: MetaConstants.FileUploadLabel,
+        inputProps: {},
+        style: {
+          cursor: isDisabled ? 'not-allowed' : 'pointer'
+        },
+        children: /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          marginBottom: willRenderHintText ? 'spacing.0' : 'spacing.5',
+          children: /*#__PURE__*/jsx(StyledFileUploadWrapper, {
+            isDisabled: isDisabled,
+            isActive: isActive,
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: "medium",
+            borderWidth: "thin",
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onClick: function onClick() {
+              return setIsActive(true);
+            },
+            "data-comp": "f",
+            style: _objectSpread({}, isOneFileSelectedWithSingleUpload ? screenReaderStyles : {}),
+            children: /*#__PURE__*/jsxs(Box, {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: {
+                base: 'column',
+                s: 'row'
+              },
+              gap: makeSize(6),
+              padding: "spacing.3",
+              children: [/*#__PURE__*/jsxs(Text, {
+                color: isDisabled ? fileUploadColorTokens.text.disabled : fileUploadColorTokens.text["default"],
+                children: ["Drag files here or", ' ']
+              }), /*#__PURE__*/jsx(SelectorInput, {
+                id: inputId,
+                hoverTokens: getFileUploadInputHoverTokens(),
+                isChecked: false,
+                isDisabled: isDisabled,
+                inputProps: _objectSpread({
+                  name: name,
+                  type: 'file',
+                  onChange: handleInputChange,
+                  multiple: isMultiple,
+                  required: isRequired,
+                  disabled: isDisabled,
+                  accept: accept,
+                  onBlur: function onBlur() {
+                    return setIsActive(false);
+                  }
+                }, accessibilityProps),
+                ref: ref
+              }), /*#__PURE__*/jsx(Box, {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: {
+                  base: 'column',
+                  s: 'row'
+                },
+                borderRadius: "small",
+                children: /*#__PURE__*/jsx(Box, {
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  borderBottomColor: fileUploadLinkBorderTokens.color[isDisabled ? 'disabled' : 'default'],
+                  borderBottomWidth: fileUploadLinkBorderTokens.width["default"],
+                  children: /*#__PURE__*/jsx(Text, {
+                    color: isDisabled ? fileUploadColorTokens.link.disabled : fileUploadColorTokens.link["default"],
+                    children: "Upload"
+                  })
+                })
+              })]
+            })
+          })
+        })
+      }), isOneFileSelectedWithSingleUpload && /*#__PURE__*/jsx(FileUploadItem, {
+        file: selectedFiles[0],
+        onRemove: function onRemove() {
+          var newFiles = selectedFiles.filter(function (_ref2) {
+            var id = _ref2.id;
+            return id !== selectedFiles[0].id;
+          });
+          setSelectedFiles(newFiles);
+          _onRemove === null || _onRemove === void 0 ? void 0 : _onRemove({
+            file: selectedFiles[0]
+          });
+        },
+        onDismiss: function onDismiss() {
+          var newFiles = selectedFiles.filter(function (_ref3) {
+            var id = _ref3.id;
+            return id !== selectedFiles[0].id;
+          });
+          setSelectedFiles(newFiles);
+          _onDismiss === null || _onDismiss === void 0 ? void 0 : _onDismiss({
+            file: selectedFiles[0]
+          });
+        },
+        onPreview: onPreview
+      })]
+    }), willRenderHintText && /*#__PURE__*/jsx(BaseBox, {
+      marginLeft: makeSize(label && isLabelLeftPositioned ? 136 : 0),
+      marginBottom: "spacing.5",
+      children: /*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "'space-between",
+        children: /*#__PURE__*/jsx(FormHint, {
+          type: getHintType({
+            validationState: showError ? 'error' : validationState,
+            hasHelpText: Boolean(helpText)
+          }),
+          helpText: helpText,
+          errorText: errorMessage,
+          helpTextId: helpTextId,
+          errorTextId: errorTextId
+        })
+      })
+    }), !isOneFileSelectedWithSingleUpload && selectedFiles.map(function (file) {
+      return /*#__PURE__*/jsx(BaseBox, {
+        marginLeft: makeSize(label && isLabelLeftPositioned ? 136 : 0),
+        marginBottom: "spacing.3",
+        children: /*#__PURE__*/jsx(FileUploadItem, {
+          file: file,
+          onRemove: function onRemove() {
+            var newFiles = selectedFiles.filter(function (_ref4) {
+              var id = _ref4.id;
+              return id !== file.id;
+            });
+            setSelectedFiles(newFiles);
+            _onRemove === null || _onRemove === void 0 ? void 0 : _onRemove({
+              file: file
+            });
+          },
+          onDismiss: function onDismiss() {
+            var newFiles = selectedFiles.filter(function (_ref5) {
+              var id = _ref5.id;
+              return id !== file.id;
+            });
+            setSelectedFiles(newFiles);
+            _onDismiss === null || _onDismiss === void 0 ? void 0 : _onDismiss({
+              file: file
+            });
+          },
+          onPreview: onPreview
+        })
+      }, file.id);
+    })]
+  }));
+};
+
+/**
+ * ### FileUpload Component
+ * 
+ * The FileUpload component is used to handle file attachments, including the drag-and-drop interaction.
+ * Primarily, it is used to upload files to a server or to display a list of uploaded files.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  const GSTForm = () => {
+   const [selectedFile, setSelectedFile] = useState<BladeFile>();
+   const [isLoading, setIsLoading] = useState(false);
+ 
+   return (
+    <Box>
+      <Heading marginBottom="spacing.4">Add GST Details</Heading>
+      <form encType="multipart/form-data" onSubmit={handleSubmit}>
+          <FileUpload
+            uploadType="single"
+            label="Upload GST"
+            helpText="Upload .jpg, .jpeg, or .png file only"
+            accept=".jpg, .jpeg, .png"
+            onChange={({ fileList }) => {
+              setSelectedFile(fileList[0]);
+            }}
+            onDrop={({ fileList }) => {
+              setSelectedFile(fileList[0]);
+            }}
+            isRequired
+            necessityIndicator="required"
+          />
+          <Button type="submit" variant="primary">
+            Submit
+          </Button>
+          {isLoading && (
+            <ProgressBar isIndeterminate label="Uploading your GST Certificate..." />
+          )}
+      </form>
+    </Box>
+   );
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-fileupload FileUpload Documentation}
+ * 
+ */
+var FileUpload = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/forwardRef(_FileUpload), {
+  displayName: 'FileUpload',
+  componentId: 'FileUpload'
+});
+
+export { FileUpload };
+//# sourceMappingURL=FileUpload.web.js.map

package/build/lib/web/production/components/FileUpload/FileUpload.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.web.js","sources":["../../../../../../src/components/FileUpload/FileUpload.web.tsx"],"sourcesContent":["import { useState, useCallback, useMemo, forwardRef } from 'react';\nimport type { FileUploadProps, BladeFile, BladeFileList } from './types';\nimport { StyledFileUploadWrapper } from './StyledFileUploadWrapper';\nimport {\n  fileUploadColorTokens,\n  fileUploadLinkBorderTokens,\n  getFileUploadInputHoverTokens,\n} from './fileUploadTokens';\nimport { FileUploadItem } from './FileUploadItem';\nimport { isFileAccepted } from './isFileAccepted';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Box } from '~components/Box';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { screenReaderStyles } from '~components/VisuallyHidden';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { useFormId } from '~components/Form/useFormId';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeSize, useTheme } from '~utils';\nimport { Text } from '~components/Typography';\nimport type { BladeElementRef } from '~utils/types';\nimport { getHintType } from '~components/Input/BaseInput/BaseInput';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadProps> = (\n  {\n    name,\n    accept,\n    uploadType = 'single',\n    onChange,\n    onPreview,\n    onRemove,\n    onDismiss,\n    onDrop,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    fileList,\n    testID,\n    label,\n    labelPosition = 'top',\n    accessibilityLabel,\n    validationState,\n    helpText,\n    errorText,\n    maxCount,\n    maxSize,\n    ...styledProps\n  },\n  ref,\n): React.ReactElement => {\n  const { platform } = useTheme();\n  const [selectedFiles, setSelectedFiles] = useState<BladeFileList>(fileList ?? []);\n  const [errorMessage, setErrorMessage] = useState(errorText);\n  console.log('🚀 ~ errorMessage:', errorMessage);\n  const [internalValidationState, setInternalValidationState] = useState('none');\n  const [isActive, setIsActive] = useState(false);\n\n  const isMultiple = uploadType === 'multiple';\n  const isOneFileSelectedWithSingleUpload = !isMultiple && selectedFiles.length === 1;\n  const inputLabelPosition = platform === 'onMobile' ? 'top' : labelPosition;\n  const isLabelLeftPositioned = inputLabelPosition === 'left';\n  const willRenderHintText = Boolean(helpText) || Boolean(errorMessage);\n\n  const showError = validationState === 'error' || internalValidationState === 'error';\n  const showHelpText = !showError && helpText;\n  const accessibilityText =\n    accessibilityLabel ?? `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n  const { inputId, labelId, helpTextId, errorTextId } = useFormId('fileuploadinput');\n\n  const accessibilityProps = makeAccessible({\n    required: Boolean(isRequired),\n    invalid: Boolean(showError),\n    disabled: Boolean(isDisabled),\n    describedBy: labelId,\n  });\n\n  // In control mode attach a unique id to each file if not provided\n  useMemo(() => {\n    for (const file of selectedFiles) {\n      if (!file.id) {\n        file.id = `${new Date().getTime().toString()}${Math.floor(Math.random() * 1000000)}`;\n      }\n    }\n  }, [selectedFiles]);\n\n  const handleFilesChange = useCallback((inputFiles: BladeFileList) => {\n    setSelectedFiles((prevFiles) => {\n      if (prevFiles.length > 0) {\n        const allFiles = [...prevFiles, ...inputFiles];\n        return allFiles;\n      }\n\n      return inputFiles;\n    });\n  }, []);\n\n  const validateFiles = (inputFiles: BladeFileList, allFiles: BladeFileList): boolean => {\n    if (accept && inputFiles.some((file) => !isFileAccepted(file, accept))) {\n      setErrorMessage(`You provided an unsupported file type. Supported file types are: ${accept}`);\n      setInternalValidationState('error');\n      return true;\n    }\n\n    if (uploadType === 'single' && inputFiles.length > 1) {\n      setErrorMessage('You can upload only one file.');\n      setInternalValidationState('error');\n      return true;\n    }\n\n    if (maxCount && allFiles.length > maxCount) {\n      setErrorMessage(`You can't upload more than ${maxCount} files.`);\n      setInternalValidationState('error');\n      return true;\n    }\n\n    if (maxSize && inputFiles.some((file) => file.size > maxSize)) {\n      setErrorMessage('File size exceeded.');\n      setInternalValidationState('error');\n      return true;\n    }\n\n    setInternalValidationState('none');\n    setErrorMessage('');\n    return false;\n  };\n\n  const handleDragOver = (event: React.DragEvent): void => {\n    event.preventDefault();\n    setIsActive(true);\n  };\n\n  const handleDragLeave = (event: React.DragEvent): void => {\n    event.preventDefault();\n    setIsActive(false);\n  };\n\n  const handleDrop = (event: React.DragEvent): void => {\n    event.preventDefault();\n    setIsActive(false);\n\n    const droppedFiles = Array.from(event.dataTransfer.files);\n    const allFiles = selectedFiles.length > 0 ? [...selectedFiles, ...droppedFiles] : droppedFiles;\n\n    const hasValidationErrors = validateFiles(droppedFiles, allFiles);\n\n    if (!hasValidationErrors) {\n      handleFilesChange(droppedFiles);\n      onDrop?.({ name, fileList: allFiles });\n    }\n  };\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const inputFiles = Array.from(event.target.files ?? []);\n    const allFiles = selectedFiles.length > 0 ? [...selectedFiles, ...inputFiles] : inputFiles;\n\n    const hasValidationErrors = validateFiles(inputFiles, allFiles);\n\n    if (!hasValidationErrors) {\n      handleFilesChange(inputFiles);\n      onChange?.({ name, fileList: allFiles });\n    }\n  };\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      width=\"100%\"\n      {...metaAttribute({ name: MetaConstants.FileUpload, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n        position=\"relative\"\n        width=\"100%\"\n      >\n        {label ? (\n          <FormLabel\n            as=\"span\"\n            necessityIndicator={necessityIndicator}\n            position={labelPosition}\n            id={labelId}\n            accessibilityText={accessibilityText}\n          >\n            {label}\n          </FormLabel>\n        ) : null}\n\n        <SelectorLabel\n          componentName={MetaConstants.FileUploadLabel}\n          inputProps={{}}\n          style={{\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n          }}\n        >\n          <BaseBox\n            display=\"flex\"\n            flexDirection=\"column\"\n            width=\"100%\"\n            marginBottom={willRenderHintText ? 'spacing.0' : 'spacing.5'}\n          >\n            <StyledFileUploadWrapper\n              isDisabled={isDisabled}\n              isActive={isActive}\n              display=\"flex\"\n              flexDirection=\"row\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              borderRadius=\"medium\"\n              borderWidth=\"thin\"\n              onDragOver={handleDragOver}\n              onDragLeave={handleDragLeave}\n              onDrop={handleDrop}\n              onClick={() => setIsActive(true)}\n              data-comp=\"f\"\n              style={{\n                ...(isOneFileSelectedWithSingleUpload ? screenReaderStyles : {}),\n              }}\n            >\n              <Box\n                display=\"flex\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                flexDirection={{ base: 'column', s: 'row' }}\n                gap={makeSize(6)}\n                padding=\"spacing.3\"\n              >\n                <Text\n                  color={\n                    isDisabled\n                      ? fileUploadColorTokens.text.disabled\n                      : fileUploadColorTokens.text.default\n                  }\n                >\n                  Drag files here or{' '}\n                </Text>\n                <SelectorInput\n                  id={inputId}\n                  hoverTokens={getFileUploadInputHoverTokens()}\n                  isChecked={false}\n                  isDisabled={isDisabled}\n                  inputProps={{\n                    name,\n                    type: 'file',\n                    onChange: handleInputChange,\n                    multiple: isMultiple,\n                    required: isRequired,\n                    disabled: isDisabled,\n                    accept,\n                    onBlur: () => setIsActive(false),\n                    ...accessibilityProps,\n                  }}\n                  ref={ref}\n                />\n\n                <Box\n                  display=\"flex\"\n                  justifyContent=\"center\"\n                  alignItems=\"center\"\n                  flexDirection={{ base: 'column', s: 'row' }}\n                  borderRadius=\"small\"\n                >\n                  <Box\n                    display=\"flex\"\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    borderBottomColor={\n                      fileUploadLinkBorderTokens.color[isDisabled ? 'disabled' : 'default']\n                    }\n                    borderBottomWidth={fileUploadLinkBorderTokens.width.default}\n                  >\n                    <Text\n                      color={\n                        isDisabled\n                          ? fileUploadColorTokens.link.disabled\n                          : fileUploadColorTokens.link.default\n                      }\n                    >\n                      Upload\n                    </Text>\n                  </Box>\n                </Box>\n              </Box>\n            </StyledFileUploadWrapper>\n          </BaseBox>\n        </SelectorLabel>\n        {isOneFileSelectedWithSingleUpload && (\n          <FileUploadItem\n            file={selectedFiles[0]}\n            onRemove={() => {\n              const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);\n              setSelectedFiles(newFiles);\n              onRemove?.({ file: selectedFiles[0] });\n            }}\n            onDismiss={() => {\n              const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);\n              setSelectedFiles(newFiles);\n              onDismiss?.({ file: selectedFiles[0] });\n            }}\n            onPreview={onPreview}\n          />\n        )}\n      </BaseBox>\n      {/* the magic number 136 is basically max-width of label i.e 120 and then right margin i.e 16 which is the spacing between label and input field */}\n      {willRenderHintText && (\n        <BaseBox\n          marginLeft={makeSize(label && isLabelLeftPositioned ? 136 : 0)}\n          marginBottom=\"spacing.5\"\n        >\n          <BaseBox display=\"flex\" flexDirection=\"row\" justifyContent=\"'space-between\">\n            <FormHint\n              type={getHintType({\n                validationState: showError ? 'error' : validationState,\n                hasHelpText: Boolean(helpText),\n              })}\n              helpText={helpText}\n              errorText={errorMessage}\n              helpTextId={helpTextId}\n              errorTextId={errorTextId}\n            />\n          </BaseBox>\n        </BaseBox>\n      )}\n      {!isOneFileSelectedWithSingleUpload &&\n        selectedFiles.map((file) => (\n          <BaseBox\n            key={file.id}\n            marginLeft={makeSize(label && isLabelLeftPositioned ? 136 : 0)}\n            marginBottom=\"spacing.3\"\n          >\n            <FileUploadItem\n              file={file}\n              onRemove={() => {\n                const newFiles = selectedFiles.filter(({ id }) => id !== file.id);\n                setSelectedFiles(newFiles);\n                onRemove?.({ file });\n              }}\n              onDismiss={() => {\n                const newFiles = selectedFiles.filter(({ id }) => id !== file.id);\n                setSelectedFiles(newFiles);\n                onDismiss?.({ file });\n              }}\n              onPreview={onPreview}\n            />\n          </BaseBox>\n        ))}\n    </BaseBox>\n  );\n};\n\n/**\n * ### FileUpload Component\n * \n * The FileUpload component is used to handle file attachments, including the drag-and-drop interaction.\n * Primarily, it is used to upload files to a server or to display a list of uploaded files.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  const GSTForm = () => {\n   const [selectedFile, setSelectedFile] = useState<BladeFile>();\n   const [isLoading, setIsLoading] = useState(false);\n \n   return (\n    <Box>\n      <Heading marginBottom=\"spacing.4\">Add GST Details</Heading>\n      <form encType=\"multipart/form-data\" onSubmit={handleSubmit}>\n          <FileUpload\n            uploadType=\"single\"\n            label=\"Upload GST\"\n            helpText=\"Upload .jpg, .jpeg, or .png file only\"\n            accept=\".jpg, .jpeg, .png\"\n            onChange={({ fileList }) => {\n              setSelectedFile(fileList[0]);\n            }}\n            onDrop={({ fileList }) => {\n              setSelectedFile(fileList[0]);\n            }}\n            isRequired\n            necessityIndicator=\"required\"\n          />\n          <Button type=\"submit\" variant=\"primary\">\n            Submit\n          </Button>\n          {isLoading && (\n            <ProgressBar isIndeterminate label=\"Uploading your GST Certificate...\" />\n          )}\n      </form>\n    </Box>\n   );\n  }\n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-fileupload FileUpload Documentation}\n * \n */\nconst FileUpload = assignWithoutSideEffects(forwardRef(_FileUpload), {\n  displayName: 'FileUpload',\n  componentId: 'FileUpload',\n});\n\nexport { FileUpload };\nexport type { BladeFile, BladeFileList, FileUploadProps };\n"],"names":["_FileUpload","_ref","ref","name","accept","_ref$uploadType","uploadType","onChange","onPreview","onRemove","onDismiss","onDrop","isDisabled","isRequired","necessityIndicator","fileList","testID","label","_ref$labelPosition","labelPosition","accessibilityLabel","validationState","helpText","errorText","maxCount","maxSize","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","platform","_useState","useState","_useState2","_slicedToArray","selectedFiles","setSelectedFiles","_useState3","_useState4","errorMessage","setErrorMessage","console","log","_useState5","_useState6","internalValidationState","setInternalValidationState","_useState7","_useState8","isActive","setIsActive","isMultiple","isOneFileSelectedWithSingleUpload","length","inputLabelPosition","isLabelLeftPositioned","willRenderHintText","Boolean","showError","showHelpText","accessibilityText","concat","_useFormId","useFormId","inputId","labelId","helpTextId","errorTextId","accessibilityProps","makeAccessible","required","invalid","disabled","describedBy","useMemo","_iterator","_createForOfIteratorHelper","_step","s","n","done","file","value","id","Date","getTime","toString","Math","floor","random","err","e","f","handleFilesChange","useCallback","inputFiles","prevFiles","allFiles","_toConsumableArray","validateFiles","some","isFileAccepted","size","handleDragOver","event","preventDefault","handleDragLeave","handleDrop","droppedFiles","Array","from","dataTransfer","files","hasValidationErrors","handleInputChange","_event$target$files","target","_jsxs","BaseBox","_objectSpread","display","flexDirection","width","metaAttribute","MetaConstants","FileUpload","getStyledProps","children","alignItems","undefined","position","_jsx","FormLabel","as","SelectorLabel","componentName","FileUploadLabel","inputProps","style","cursor","marginBottom","StyledFileUploadWrapper","justifyContent","borderRadius","borderWidth","onDragOver","onDragLeave","onClick","screenReaderStyles","Box","base","gap","makeSize","padding","Text","color","fileUploadColorTokens","text","SelectorInput","hoverTokens","getFileUploadInputHoverTokens","isChecked","type","multiple","onBlur","borderBottomColor","fileUploadLinkBorderTokens","borderBottomWidth","link","FileUploadItem","newFiles","filter","_ref2","_ref3","marginLeft","FormHint","getHintType","hasHelpText","map","_ref4","_ref5","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/FileUpload/FileUploadItem.js

@@ -0,0 +1,149 @@
+import { memo } from 'react';
+import { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper.js';
+import { FileUploadItemIcon } from './FileUploadItemIcon.js';
+import '../Icons/index.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import '../Divider/index.js';
+import '../Button/IconButton/index.js';
+import '../ProgressBar/index.js';
+import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Text } from '../Typography/Text/Text.js';
+import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
+import { IconButton } from '../Button/IconButton/IconButton.js';
+import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
+import EyeIcon from '../Icons/EyeIcon/EyeIcon.js';
+import { Divider } from '../Divider/Divider.js';
+import TrashIcon from '../Icons/TrashIcon/TrashIcon.js';
+import { ProgressBar } from '../ProgressBar/ProgressBar.js';
+
+var FileUploadItem = /*#__PURE__*/memo(function (_ref) {
+  var file = _ref.file,
+    onPreview = _ref.onPreview,
+    onRemove = _ref.onRemove,
+    onDismiss = _ref.onDismiss;
+  var name = file.name,
+    size = file.size,
+    uploadPercent = file.uploadPercent,
+    errorText = file.errorText,
+    status = file.status;
+  var isUploading = status === 'uploading';
+  var sizeInKB = size / 1024;
+  var sizeInMB = sizeInKB / 1024;
+  var showSizeInKB = sizeInKB < 1024;
+  return /*#__PURE__*/jsx(StyledFileUploadItemWrapper, {
+    status: status !== null && status !== void 0 ? status : 'success',
+    borderRadius: "medium",
+    borderWidth: "thin",
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      children: [/*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        flexDirection: "row",
+        margin: "spacing.3",
+        children: [/*#__PURE__*/jsx(BaseBox, {
+          marginRight: "spacing.3",
+          children: /*#__PURE__*/jsx(FileUploadItemIcon, {
+            fileName: name,
+            uploadStatus: status
+          })
+        }), /*#__PURE__*/jsxs(BaseBox, {
+          flexGrow: 1,
+          children: [/*#__PURE__*/jsxs(BaseBox, {
+            alignItems: "center",
+            display: "flex",
+            children: [/*#__PURE__*/jsx(BaseBox, {
+              alignItems: "center",
+              maxWidth: "70%",
+              display: "flex",
+              marginRight: "spacing.3",
+              children: /*#__PURE__*/jsx(Text, {
+                size: "medium",
+                weight: "medium",
+                color: "surface.text.gray.subtle",
+                truncateAfterLines: 1,
+                children: name
+              })
+            }), status === 'success' && /*#__PURE__*/jsx(CheckCircleIcon, {
+              size: "medium",
+              marginRight: "spacing.2",
+              color: "interactive.icon.positive.normal"
+            })]
+          }), /*#__PURE__*/jsx(Text, {
+            size: "small",
+            weight: "regular",
+            color: status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted',
+            children: errorText !== null && errorText !== void 0 ? errorText : "".concat((showSizeInKB ? sizeInKB : sizeInMB).toFixed(2), " ").concat(showSizeInKB ? 'KB' : 'MB', " ").concat(isUploading && uploadPercent ? "(".concat(uploadPercent, "%)") : '')
+          })]
+        }), status === 'error' || status === 'uploading' ? /*#__PURE__*/jsx(BaseBox, {
+          children: /*#__PURE__*/jsx(IconButton, {
+            accessibilityLabel: "Remove File",
+            icon: CloseIcon,
+            onClick: function onClick() {
+              return onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss({
+                file: file
+              });
+            }
+          })
+        }) : /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          children: onPreview ? /*#__PURE__*/jsxs(BaseBox, {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            padding: "spacing.0",
+            gap: "spacing.3",
+            children: [/*#__PURE__*/jsx(IconButton, {
+              accessibilityLabel: "Preview File",
+              icon: EyeIcon,
+              onClick: function onClick() {
+                return onPreview === null || onPreview === void 0 ? void 0 : onPreview({
+                  file: file
+                });
+              }
+            }), /*#__PURE__*/jsx(Divider, {
+              orientation: "vertical",
+              thickness: "thinner",
+              variant: "normal"
+            }), /*#__PURE__*/jsx(IconButton, {
+              accessibilityLabel: "Remove File",
+              icon: TrashIcon,
+              onClick: function onClick() {
+                return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
+                  file: file
+                });
+              }
+            })]
+          }) : /*#__PURE__*/jsx(IconButton, {
+            accessibilityLabel: "Remove File",
+            icon: TrashIcon,
+            onClick: function onClick() {
+              return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
+                file: file
+              });
+            }
+          })
+        })]
+      }), isUploading && /*#__PURE__*/jsx(BaseBox, {
+        width: "100%",
+        position: "absolute",
+        bottom: "spacing.0",
+        children: /*#__PURE__*/jsx(ProgressBar, {
+          left: "spacing.0",
+          showPercentage: false,
+          value: uploadPercent !== null && uploadPercent !== void 0 ? uploadPercent : 0,
+          isIndeterminate: isUndefined(uploadPercent)
+        })
+      })]
+    })
+  });
+});
+
+export { FileUploadItem };
+//# sourceMappingURL=FileUploadItem.js.map