@pingux/astro 2.148.1-alpha.0 → 2.149.0-alpha.0

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

@@ -14,18 +14,19 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.filterFileTypes = exports["default"] = void 0;
+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"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 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 _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"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactDropzone = require("react-dropzone");
@@ -54,6 +55,20 @@ var FILE_CHANGE_STATUS = {
   ADDED: 'added',
   DELETED: 'deleted'
 };
+var getFileExtension = function getFileExtension(file) {
+  var extension = file.name.split('.')[file.name.split('.').length - 1];
+  return ".".concat(extension);
+};
+var filterFileTypes = function filterFileTypes(_ref) {
+  var arrayWithNewFiles = _ref.arrayWithNewFiles,
+    fileTypes = _ref.fileTypes;
+  return (0, _filter["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    return !(fileTypes !== null && fileTypes !== void 0 && fileTypes.length) || (0, _includes["default"])(fileTypes).call(fileTypes, getFileExtension(newFile)) || (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
+      return newFile.type.search(fileType) !== -1;
+    });
+  });
+};
+exports.filterFileTypes = filterFileTypes;
 var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var buttonProps = props.buttonProps,
     defaultButtonText = props.defaultButtonText,
@@ -133,10 +148,9 @@ 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"])(_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;
-      });
+    var filesWithIdAndLink = (0, _map["default"])(_context2 = filterFileTypes({
+      arrayWithNewFiles: arrayWithNewFiles,
+      fileTypes: fileTypes
     })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
@@ -180,8 +194,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         onRemove(e, fileId);
       }
       setUploadedFiles(function (prevFiles) {
-        return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref) {
-          var id = _ref.id;
+        return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref2) {
+          var id = _ref2.id;
           return id !== fileId;
         });
       });

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithFileTypePdfAndImage = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
+exports["default"] = exports.WithFileTypePdfAndImage = exports.WithCustomWidth = exports.WithCustomFileTypes = 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"));
@@ -261,4 +261,11 @@ var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
     helperText: error
   });
 };
-exports.WithFileTypePdfAndImage = WithFileTypePdfAndImage;
+exports.WithFileTypePdfAndImage = WithFileTypePdfAndImage;
+var WithCustomFileTypes = function WithCustomFileTypes() {
+  return (0, _react2.jsx)(_index.FileInputField, {
+    fileTypes: ['.p8'],
+    sx: fitContentWidthSx
+  });
+};
+exports.WithCustomFileTypes = WithCustomFileTypes;

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
@@ -8,6 +9,7 @@ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -18,8 +20,10 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmitTest");
-var _FileInputField = _interopRequireDefault(require("./FileInputField"));
+var _FileInputField = _interopRequireWildcard(require("./FileInputField"));
 var _react3 = require("@emotion/react");
+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 = _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) { (0, _defineProperty2["default"])(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; }
 var fileInputFieldTestId = 'file-input-test-id';
@@ -36,7 +40,7 @@ var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
 var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
-  type: 'image/png'
+  type: 'text/plain'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
@@ -243,4 +247,54 @@ test('File upload should allow only image', function () {
   var val = _react2.screen.queryByText('document');
   expect(val).not.toBeInTheDocument();
   expect(setStateMock).toHaveBeenCalled();
+});
+describe('filterFileTypes', function () {
+  it('returns a list of files', function () {
+    var results = (0, _FileInputField.filterFileTypes)({
+      arrayWithNewFiles: [testFile, testFile2]
+    });
+    expect(results.length).toBe(2);
+  });
+  it('filters file types', function () {
+    var results = (0, _FileInputField.filterFileTypes)({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: 'text/plain'
+      }, {
+        name: 'shark',
+        type: 'image/png'
+      }],
+      fileTypes: ['text/plain']
+    });
+    expect(results.length).toBe(1);
+  });
+  it('filters file image types', function () {
+    var results = (0, _FileInputField.filterFileTypes)({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: 'text/plain'
+      }, {
+        name: 'shark',
+        type: 'image/png'
+      }],
+      fileTypes: ['image']
+    });
+    expect(results.length).toBe(1);
+  });
+  it('filters custom file types', function () {
+    var results = (0, _FileInputField.filterFileTypes)({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: '.p8'
+      }, {
+        name: 'shark',
+        type: '.xml'
+      }, {
+        name: 'shark',
+        type: '.xml'
+      }],
+      fileTypes: ['.p8']
+    });
+    expect(results.length).toBe(1);
+  });
 });

package/lib/components/FileInputField/FileInputField.js

@@ -1,24 +1,25 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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", "fileTypes"];
+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 _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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 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 _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 _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 _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { mergeProps, useVisuallyHidden, VisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
@@ -42,6 +43,19 @@ var FILE_CHANGE_STATUS = {
   ADDED: 'added',
   DELETED: 'deleted'
 };
+var getFileExtension = function getFileExtension(file) {
+  var extension = file.name.split('.')[file.name.split('.').length - 1];
+  return ".".concat(extension);
+};
+export var filterFileTypes = function filterFileTypes(_ref) {
+  var arrayWithNewFiles = _ref.arrayWithNewFiles,
+    fileTypes = _ref.fileTypes;
+  return _filterInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    return !(fileTypes !== null && fileTypes !== void 0 && fileTypes.length) || _includesInstanceProperty(fileTypes).call(fileTypes, getFileExtension(newFile)) || _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
+      return newFile.type.search(fileType) !== -1;
+    });
+  });
+};
 var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
   var buttonProps = props.buttonProps,
     defaultButtonText = props.defaultButtonText,
@@ -121,10 +135,9 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = _sliceInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var filesWithIdAndLink = _mapInstanceProperty(_context2 = _filterInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
-      return !fileTypes || _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
-        return newFile.type.search(fileType) !== -1;
-      });
+    var filesWithIdAndLink = _mapInstanceProperty(_context2 = filterFileTypes({
+      arrayWithNewFiles: arrayWithNewFiles,
+      fileTypes: fileTypes
     })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
@@ -168,8 +181,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
         onRemove(e, fileId);
       }
       setUploadedFiles(function (prevFiles) {
-        return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref) {
-          var id = _ref.id;
+        return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref2) {
+          var id = _ref2.id;
           return id !== fileId;
         });
       });

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

@@ -241,4 +241,10 @@ export var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
     status: error && statuses.ERROR,
     helperText: error
   });
+};
+export var WithCustomFileTypes = function WithCustomFileTypes() {
+  return ___EmotionJSX(FileInputField, {
+    fileTypes: ['.p8'],
+    sx: fitContentWidthSx
+  });
 };

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

@@ -17,7 +17,7 @@ import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
-import FileInputField from './FileInputField';
+import FileInputField, { filterFileTypes } from './FileInputField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var fileInputFieldTestId = 'file-input-test-id';
 var testLabel = 'file-input-test-label';
@@ -33,7 +33,7 @@ var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
 var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
-  type: 'image/png'
+  type: 'text/plain'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
@@ -240,4 +240,54 @@ test('File upload should allow only image', function () {
   var val = screen.queryByText('document');
   expect(val).not.toBeInTheDocument();
   expect(setStateMock).toHaveBeenCalled();
+});
+describe('filterFileTypes', function () {
+  it('returns a list of files', function () {
+    var results = filterFileTypes({
+      arrayWithNewFiles: [testFile, testFile2]
+    });
+    expect(results.length).toBe(2);
+  });
+  it('filters file types', function () {
+    var results = filterFileTypes({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: 'text/plain'
+      }, {
+        name: 'shark',
+        type: 'image/png'
+      }],
+      fileTypes: ['text/plain']
+    });
+    expect(results.length).toBe(1);
+  });
+  it('filters file image types', function () {
+    var results = filterFileTypes({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: 'text/plain'
+      }, {
+        name: 'shark',
+        type: 'image/png'
+      }],
+      fileTypes: ['image']
+    });
+    expect(results.length).toBe(1);
+  });
+  it('filters custom file types', function () {
+    var results = filterFileTypes({
+      arrayWithNewFiles: [{
+        name: 'shark',
+        type: '.p8'
+      }, {
+        name: 'shark',
+        type: '.xml'
+      }, {
+        name: 'shark',
+        type: '.xml'
+      }],
+      fileTypes: ['.p8']
+    });
+    expect(results.length).toBe(1);
+  });
 });

package/package.json

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