@pingux/astro 2.115.1-alpha.0 → 2.116.0-alpha.0

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -19,8 +19,9 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -43,11 +44,11 @@ var _FileItem = _interopRequireDefault(require("./FileItem"));
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
 var _FileSelectIcon = _interopRequireDefault(require("./FileSelectIcon"));
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps"];
+var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps", "fileTypes"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var displayName = 'FileInputField';
 var FILE_CHANGE_STATUS = {
   ADDED: 'added',
@@ -70,6 +71,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onRemove = props.onRemove,
     status = props.status,
     textProps = props.textProps,
+    fileTypes = props.fileTypes,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(defaultFileList || []),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -120,6 +122,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     setFileChangeStatus(null);
   }, [fileChangeStatus, helperText, status]);
   var handleFileUpload = function handleFileUpload(event, newFiles) {
+    var _context2;
     if (status === _statuses["default"].ERROR) {
       setFileChangeMessage('');
     }
@@ -130,7 +133,11 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = (0, _slice["default"])(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var filesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = (0, _map["default"])(_context2 = (0, _filter["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+      return !fileTypes || (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
+        return newFile.type.search(fileType) !== -1;
+      });
+    })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -141,8 +148,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context2;
-        return (0, _concat["default"])(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
+        var _context3;
+        return (0, _concat["default"])(_context3 = []).call(_context3, prevFiles, filesWithIdAndLink);
       });
     } else {
       setUploadedFiles(filesWithIdAndLink);
@@ -224,7 +231,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
-    type: "file"
+    type: "file",
+    accept: fileTypes ? fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join(',') : '*'
   })), filesListNode, shouldFileSelectRender() && (isIconButton ? (0, _react2.jsx)(_FileSelectIcon["default"], (0, _extends2["default"])({
     handleFileSelect: handleFileSelect,
     iconContainerProps: iconContainerProps,
@@ -243,7 +251,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && (0, _react2.jsx)(_.Box, {
-    "aria-label": helperText
+    "aria-label": helperText,
+    role: "marquee"
   }, (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId

package/lib/cjs/components/FileInputField/FileInputField.stories.js

@@ -14,7 +14,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
+exports["default"] = exports.WithFileTypePdfAndImage = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -150,7 +151,8 @@ var ControlledState = function ControlledState() {
     fileList: userFiles,
     sx: fitContentWidthSx,
     status: error && _statuses["default"].ERROR,
-    helperText: error
+    helperText: error,
+    isMultiple: true
   });
 };
 exports.ControlledState = ControlledState;
@@ -231,4 +233,34 @@ var WithCustomWidth = function WithCustomWidth() {
     isMultiple: true
   }));
 };
-exports.WithCustomWidth = WithCustomWidth;
+exports.WithCustomWidth = WithCustomWidth;
+var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
+  var fileTypes = ['application/pdf', 'image/*'];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var handleFileSelect = function handleFileSelect(event, files) {
+    var uploadedFileType = files[0].type;
+    var isValidFileType = (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
+      return uploadedFileType.search(fileType) !== -1;
+    });
+    if (isValidFileType) {
+      setError(null);
+    } else {
+      setError('Not a valid File Type. Only PDF and Image files are allowed.');
+    }
+  };
+  return (0, _react2.jsx)(_index.FileInputField, {
+    label: "With File Type",
+    sx: fitContentWidthSx,
+    fileTypes: fileTypes,
+    onFileSelect: handleFileSelect,
+    onRemove: function onRemove() {
+      return setError(null);
+    },
+    status: error && _statuses["default"].ERROR,
+    helperText: error
+  });
+};
+exports.WithFileTypePdfAndImage = WithFileTypePdfAndImage;

package/lib/cjs/components/FileInputField/FileInputField.test.js

@@ -34,12 +34,16 @@ var testFileURL = 'test-file-url';
 var testFileId = 'test-file-id-1';
 var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
+var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
   type: 'image/png'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
 });
+var testFile3 = new File(['(⌐□_□)'], testFileName3, {
+  type: 'application/pdf'
+});
 var testFileObject = {
   id: testFileId,
   name: testFileName,
@@ -203,8 +207,7 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveTextContent(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
-  var helperTextID = helper.getAttribute('id');
-  expect(_react2.screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+  expect(_react2.screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', "file-uploaded__download-link-".concat(testFileId));
 });
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
@@ -221,4 +224,23 @@ test('should render icon button if isIconButton prop is true', function () {
     name: 'Add File Icon'
   });
   expect(iconButton).toBeInTheDocument();
+});
+test('File upload should allow only image', function () {
+  var setStateMock = jest.fn();
+  jest.spyOn(_react["default"], 'useState').mockImplementation(function (initialState) {
+    return [initialState, setStateMock];
+  });
+  getComponent({
+    fileTypes: ['image/*']
+  });
+  var fileUploadFieldInput = _react2.screen.getByLabelText(testLabel);
+  _userEvent["default"].click(_react2.screen.getByTestId(fileSelectTestIdButton));
+  _react2.fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile3]
+    }
+  });
+  var val = _react2.screen.queryByText('document');
+  expect(val).not.toBeInTheDocument();
+  expect(setStateMock).toHaveBeenCalled();
 });

package/lib/cjs/components/FileInputField/FileItem.js

@@ -34,7 +34,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
     handleFileDelete = props.handleFileDelete,
-    helperTextId = props.helperTextId,
     id = props.id,
     isDisabled = props.isDisabled,
     name = props.name,
@@ -87,7 +86,7 @@ var FileItem = function FileItem(props) {
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
     onPress: handleDownloadPress,
-    "aria-describedby": helperTextId,
+    "aria-describedby": "file-uploaded__download-link-".concat(id),
     "aria-live": "polite"
   }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     color: "active"
@@ -113,7 +112,8 @@ var FileItem = function FileItem(props) {
     ref: downloadRef,
     "aria-label": "download ".concat(name),
     "data-testid": "file-uploaded__download-link",
-    tabIndex: -1
+    tabIndex: -1,
+    id: "file-uploaded__download-link-".concat(id)
   })));
 };
 var _default = FileItem;

package/lib/components/FileInputField/FileInputField.js

@@ -9,15 +9,16 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps"];
+var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps", "fileTypes"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { mergeProps, useVisuallyHidden, VisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
@@ -58,6 +59,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     onRemove = props.onRemove,
     status = props.status,
     textProps = props.textProps,
+    fileTypes = props.fileTypes,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(defaultFileList || []),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,6 +110,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     setFileChangeStatus(null);
   }, [fileChangeStatus, helperText, status]);
   var handleFileUpload = function handleFileUpload(event, newFiles) {
+    var _context2;
     if (status === statuses.ERROR) {
       setFileChangeMessage('');
     }
@@ -118,7 +121,11 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = _sliceInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var filesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = _mapInstanceProperty(_context2 = _filterInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+      return !fileTypes || _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
+        return newFile.type.search(fileType) !== -1;
+      });
+    })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -129,8 +136,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context2;
-        return _concatInstanceProperty(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
+        var _context3;
+        return _concatInstanceProperty(_context3 = []).call(_context3, prevFiles, filesWithIdAndLink);
       });
     } else {
       setUploadedFiles(filesWithIdAndLink);
@@ -212,7 +219,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
-    type: "file"
+    type: "file",
+    accept: fileTypes ? fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join(',') : '*'
   })), filesListNode, shouldFileSelectRender() && (isIconButton ? ___EmotionJSX(FileSelectIcon, _extends({
     handleFileSelect: handleFileSelect,
     iconContainerProps: iconContainerProps,
@@ -231,7 +239,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && ___EmotionJSX(Box, {
-    "aria-label": helperText
+    "aria-label": helperText,
+    role: "marquee"
   }, ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId

package/lib/components/FileInputField/FileInputField.stories.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
@@ -136,7 +137,8 @@ export var ControlledState = function ControlledState() {
     fileList: userFiles,
     sx: fitContentWidthSx,
     status: error && statuses.ERROR,
-    helperText: error
+    helperText: error,
+    isMultiple: true
   });
 };
 export var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
@@ -212,4 +214,33 @@ export var WithCustomWidth = function WithCustomWidth() {
     },
     isMultiple: true
   }));
+};
+export var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
+  var fileTypes = ['application/pdf', 'image/*'];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var handleFileSelect = function handleFileSelect(event, files) {
+    var uploadedFileType = files[0].type;
+    var isValidFileType = _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
+      return uploadedFileType.search(fileType) !== -1;
+    });
+    if (isValidFileType) {
+      setError(null);
+    } else {
+      setError('Not a valid File Type. Only PDF and Image files are allowed.');
+    }
+  };
+  return ___EmotionJSX(FileInputField, {
+    label: "With File Type",
+    sx: fitContentWidthSx,
+    fileTypes: fileTypes,
+    onFileSelect: handleFileSelect,
+    onRemove: function onRemove() {
+      return setError(null);
+    },
+    status: error && statuses.ERROR,
+    helperText: error
+  });
 };

package/lib/components/FileInputField/FileInputField.test.js

@@ -31,12 +31,16 @@ var testFileURL = 'test-file-url';
 var testFileId = 'test-file-id-1';
 var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
+var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
   type: 'image/png'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
 });
+var testFile3 = new File(['(⌐□_□)'], testFileName3, {
+  type: 'application/pdf'
+});
 var testFileObject = {
   id: testFileId,
   name: testFileName,
@@ -200,8 +204,7 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveTextContent(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
-  var helperTextID = helper.getAttribute('id');
-  expect(screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+  expect(screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', "file-uploaded__download-link-".concat(testFileId));
 });
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
@@ -218,4 +221,23 @@ test('should render icon button if isIconButton prop is true', function () {
     name: 'Add File Icon'
   });
   expect(iconButton).toBeInTheDocument();
+});
+test('File upload should allow only image', function () {
+  var setStateMock = jest.fn();
+  jest.spyOn(React, 'useState').mockImplementation(function (initialState) {
+    return [initialState, setStateMock];
+  });
+  getComponent({
+    fileTypes: ['image/*']
+  });
+  var fileUploadFieldInput = screen.getByLabelText(testLabel);
+  userEvent.click(screen.getByTestId(fileSelectTestIdButton));
+  fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile3]
+    }
+  });
+  var val = screen.queryByText('document');
+  expect(val).not.toBeInTheDocument();
+  expect(setStateMock).toHaveBeenCalled();
 });

package/lib/components/FileInputField/FileItem.js

@@ -23,7 +23,6 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
     handleFileDelete = props.handleFileDelete,
-    helperTextId = props.helperTextId,
     id = props.id,
     isDisabled = props.isDisabled,
     name = props.name,
@@ -76,7 +75,7 @@ var FileItem = function FileItem(props) {
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
     onPress: handleDownloadPress,
-    "aria-describedby": helperTextId,
+    "aria-describedby": "file-uploaded__download-link-".concat(id),
     "aria-live": "polite"
   }, ___EmotionJSX(Text, _extends({
     color: "active"
@@ -102,7 +101,8 @@ var FileItem = function FileItem(props) {
     ref: downloadRef,
     "aria-label": "download ".concat(name),
     "data-testid": "file-uploaded__download-link",
-    tabIndex: -1
+    tabIndex: -1,
+    id: "file-uploaded__download-link-".concat(id)
   })));
 };
 export default FileItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.115.1-alpha.0",
+  "version": "2.116.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",