@pingux/astro 2.108.0 → 2.108.1-alpha.0

package/lib/cjs/components/ImageUploadField/ImageUploadField.js

@@ -23,6 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _useImageUploadState = require("../../hooks/useImageUploadState");
+var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
@@ -114,7 +115,7 @@ ImageUploadField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   defaultPreviewImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   /** An array of accepted file types.
    * (according to the https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#types ) */
-  fileTypes: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  fileTypes: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_htmlElements.imageUploadPropTypes)),
   /** Text to display after the radio group label. Useful for errors or other info. */
   helperText: _propTypes["default"].node,
   /** Determines whether the loading indicator is shown. */

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

@@ -40,10 +40,6 @@ var imageUploadImagePreview = 'image-upload-image-preview';
 var file = new File(['(⌐□_□)'], 'chucknorris.png', {
   type: 'image/png'
 });
-var notImageFileName = 'nice-song.mp3';
-var notImageFile = new File(['(⌐□_□)'], notImageFileName, {
-  type: 'audio/mpeg'
-});
 var originalValue = _url["default"].createObjectURL;
 var defaultProps = {
   label: testLabel,
@@ -273,7 +269,9 @@ test('should not call onChange cb (when provided) if uploaded file is not allowe
   });
   _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
     target: {
-      files: [file]
+      files: [new File(['(⌐□_□)'], 'chucknorris.audio', {
+        type: 'audio'
+      })]
     }
   });
   expect(testOnChange).toHaveBeenCalledTimes(0);
@@ -282,17 +280,6 @@ test('should render helper text', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testHelperText)).toBeInTheDocument();
 });
-test('should render the file name when file type is not image', function () {
-  getComponent({
-    fileTypes: ['audio']
-  });
-  _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
-    target: {
-      files: [notImageFile]
-    }
-  });
-  expect(_testWrapper.screen.getByText(notImageFileName)).toBeInTheDocument();
-});
 test('should render default preview image if defined initially', function () {
   getComponent({
     defaultPreviewImage: 'some-image'

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -25,6 +25,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
@@ -84,7 +85,7 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 });
 ImageUploadFieldBase.propTypes = _objectSpread({
   fileName: _propTypes["default"].string,
-  fileTypes: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  fileTypes: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_htmlElements.imageUploadPropTypes)),
   handleInputChange: _propTypes["default"].func,
   handleLabelClick: _propTypes["default"].func,
   handleOpenMenuChange: _propTypes["default"].func,

package/lib/cjs/hooks/useImageUploadState/useImageUploadState.js

@@ -9,6 +9,7 @@ exports["default"] = void 0;
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = require("react");
+var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var useImageUploadState = function useImageUploadState(inputRef) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var existingImage = props.previewImage,
@@ -48,32 +49,29 @@ var useImageUploadState = function useImageUploadState(inputRef) {
     }
   }, [defaultPreviewImage, previewImage, inputRef]);
   var handleInputChange = (0, _react.useCallback)(function (event) {
-    var _event$target;
-    if (!event.target.files) {
-      return;
-    }
-    var eventFileType = (_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files[0]) === null || _event$target === void 0 || (_event$target = _event$target.type) === null || _event$target === void 0 ? void 0 : _event$target.split('/')[0];
-    if (fileTypes !== null && fileTypes !== void 0 && (0, _includes["default"])(fileTypes).call(fileTypes, eventFileType)) {
-      if (onChange && typeof onChange === 'function') {
-        onChange(event);
-      }
+    var _event$target, _event$target2;
+    if (!((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.files)) return;
+    var hasCustomFileTypes = fileTypes && fileTypes[0] !== 'image';
+    var currentFileType = (_event$target2 = event.target) === null || _event$target2 === void 0 || (_event$target2 = _event$target2.files[0]) === null || _event$target2 === void 0 ? void 0 : _event$target2.type;
+    var isSupportedFileType = (0, _includes["default"])(_htmlElements.supportedImageTypes).call(_htmlElements.supportedImageTypes, currentFileType);
 
-      // If existing image is not undefined, we rely on consumers to handle this themselves.
-      if (existingImage === undefined) {
-        if (eventFileType === 'image') {
-          var _event$target2;
-          setIsImageType(true);
-          var reader = new FileReader();
-          reader.onload = function () {
-            setPreviewImage(reader.result);
-          };
-          reader.readAsDataURL((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.files[0]);
-        } else {
-          var _event$target3;
-          setIsImageType(false);
-          setFileName((_event$target3 = event.target) === null || _event$target3 === void 0 || (_event$target3 = _event$target3.files[0]) === null || _event$target3 === void 0 ? void 0 : _event$target3.name);
-        }
-      }
+    // If custom file types are provided, only allow those file types
+    if (hasCustomFileTypes && !(fileTypes !== null && fileTypes !== void 0 && (0, _includes["default"])(fileTypes).call(fileTypes, currentFileType))) return;
+    // If no custom file types are provided, only allow image file types
+    if (!hasCustomFileTypes && !(0, _includes["default"])(currentFileType).call(currentFileType, 'image')) return;
+    if (isSupportedFileType && onChange && typeof onChange === 'function') onChange(event);
+    if (isSupportedFileType) {
+      var _event$target3;
+      setIsImageType(true);
+      var reader = new FileReader();
+      reader.onload = function () {
+        setPreviewImage(reader.result);
+      };
+      reader.readAsDataURL((_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.files[0]);
+    } else {
+      var _event$target4;
+      setIsImageType(false);
+      setFileName((_event$target4 = event.target) === null || _event$target4 === void 0 || (_event$target4 = _event$target4.files[0]) === null || _event$target4 === void 0 ? void 0 : _event$target4.name);
     }
   }, []);
   var handleOpenMenuChange = (0, _react.useCallback)(function (isOpen) {

package/lib/cjs/utils/devUtils/constants/htmlElements.js

@@ -1,13 +1,20 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.htmlElements = void 0;
+exports.supportedImageTypes = exports.imageUploadPropTypes = exports.htmlElements = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _context;
 /**
  * List of HTML elements to re use wherever needed.
  */
 
 var htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];
-exports.htmlElements = htmlElements;
+exports.htmlElements = htmlElements;
+var supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/webp'];
+exports.supportedImageTypes = supportedImageTypes;
+var imageUploadPropTypes = (0, _concat["default"])(_context = ['application', 'application', 'audio', 'example', 'model', 'text', 'video']).call(_context, supportedImageTypes);
+exports.imageUploadPropTypes = imageUploadPropTypes;

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -16,6 +16,7 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../..';
 import { useImageUploadState } from '../../hooks/useImageUploadState';
+import { imageUploadPropTypes } from '../../utils/devUtils/constants/htmlElements';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -103,7 +104,7 @@ ImageUploadField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   defaultPreviewImage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** An array of accepted file types.
    * (according to the https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#types ) */
-  fileTypes: PropTypes.arrayOf(PropTypes.oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  fileTypes: PropTypes.arrayOf(PropTypes.oneOf(imageUploadPropTypes)),
   /** Text to display after the radio group label. Useful for errors or other info. */
   helperText: PropTypes.node,
   /** Determines whether the loading indicator is shown. */

package/lib/components/ImageUploadField/ImageUploadField.test.js

@@ -37,10 +37,6 @@ var imageUploadImagePreview = 'image-upload-image-preview';
 var file = new File(['(⌐□_□)'], 'chucknorris.png', {
   type: 'image/png'
 });
-var notImageFileName = 'nice-song.mp3';
-var notImageFile = new File(['(⌐□_□)'], notImageFileName, {
-  type: 'audio/mpeg'
-});
 var originalValue = _URL.createObjectURL;
 var defaultProps = {
   label: testLabel,
@@ -270,7 +266,9 @@ test('should not call onChange cb (when provided) if uploaded file is not allowe
   });
   fireEvent.change(screen.getByTestId('image-upload-input'), {
     target: {
-      files: [file]
+      files: [new File(['(⌐□_□)'], 'chucknorris.audio', {
+        type: 'audio'
+      })]
     }
   });
   expect(testOnChange).toHaveBeenCalledTimes(0);
@@ -279,17 +277,6 @@ test('should render helper text', function () {
   getComponent();
   expect(screen.getByText(testHelperText)).toBeInTheDocument();
 });
-test('should render the file name when file type is not image', function () {
-  getComponent({
-    fileTypes: ['audio']
-  });
-  fireEvent.change(screen.getByTestId('image-upload-input'), {
-    target: {
-      files: [notImageFile]
-    }
-  });
-  expect(screen.getByText(notImageFileName)).toBeInTheDocument();
-});
 test('should render default preview image if defined initially', function () {
   getComponent({
     defaultPreviewImage: 'some-image'

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -18,6 +18,7 @@ import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Input, Label, PopoverMenu } from '../..';
 import useField from '../../hooks/useField';
+import { imageUploadPropTypes } from '../../utils/devUtils/constants/htmlElements';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -73,7 +74,7 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
 });
 ImageUploadFieldBase.propTypes = _objectSpread({
   fileName: PropTypes.string,
-  fileTypes: PropTypes.arrayOf(PropTypes.oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  fileTypes: PropTypes.arrayOf(PropTypes.oneOf(imageUploadPropTypes)),
   handleInputChange: PropTypes.func,
   handleLabelClick: PropTypes.func,
   handleOpenMenuChange: PropTypes.func,

package/lib/hooks/useImageUploadState/useImageUploadState.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { supportedImageTypes } from '../../utils/devUtils/constants/htmlElements';
 var useImageUploadState = function useImageUploadState(inputRef) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var existingImage = props.previewImage,
@@ -40,32 +41,29 @@ var useImageUploadState = function useImageUploadState(inputRef) {
     }
   }, [defaultPreviewImage, previewImage, inputRef]);
   var handleInputChange = useCallback(function (event) {
-    var _event$target;
-    if (!event.target.files) {
-      return;
-    }
-    var eventFileType = (_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files[0]) === null || _event$target === void 0 || (_event$target = _event$target.type) === null || _event$target === void 0 ? void 0 : _event$target.split('/')[0];
-    if (fileTypes !== null && fileTypes !== void 0 && _includesInstanceProperty(fileTypes).call(fileTypes, eventFileType)) {
-      if (onChange && typeof onChange === 'function') {
-        onChange(event);
-      }
+    var _event$target, _event$target2;
+    if (!((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.files)) return;
+    var hasCustomFileTypes = fileTypes && fileTypes[0] !== 'image';
+    var currentFileType = (_event$target2 = event.target) === null || _event$target2 === void 0 || (_event$target2 = _event$target2.files[0]) === null || _event$target2 === void 0 ? void 0 : _event$target2.type;
+    var isSupportedFileType = _includesInstanceProperty(supportedImageTypes).call(supportedImageTypes, currentFileType);
 
-      // If existing image is not undefined, we rely on consumers to handle this themselves.
-      if (existingImage === undefined) {
-        if (eventFileType === 'image') {
-          var _event$target2;
-          setIsImageType(true);
-          var reader = new FileReader();
-          reader.onload = function () {
-            setPreviewImage(reader.result);
-          };
-          reader.readAsDataURL((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.files[0]);
-        } else {
-          var _event$target3;
-          setIsImageType(false);
-          setFileName((_event$target3 = event.target) === null || _event$target3 === void 0 || (_event$target3 = _event$target3.files[0]) === null || _event$target3 === void 0 ? void 0 : _event$target3.name);
-        }
-      }
+    // If custom file types are provided, only allow those file types
+    if (hasCustomFileTypes && !(fileTypes !== null && fileTypes !== void 0 && _includesInstanceProperty(fileTypes).call(fileTypes, currentFileType))) return;
+    // If no custom file types are provided, only allow image file types
+    if (!hasCustomFileTypes && !_includesInstanceProperty(currentFileType).call(currentFileType, 'image')) return;
+    if (isSupportedFileType && onChange && typeof onChange === 'function') onChange(event);
+    if (isSupportedFileType) {
+      var _event$target3;
+      setIsImageType(true);
+      var reader = new FileReader();
+      reader.onload = function () {
+        setPreviewImage(reader.result);
+      };
+      reader.readAsDataURL((_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.files[0]);
+    } else {
+      var _event$target4;
+      setIsImageType(false);
+      setFileName((_event$target4 = event.target) === null || _event$target4 === void 0 || (_event$target4 = _event$target4.files[0]) === null || _event$target4 === void 0 ? void 0 : _event$target4.name);
     }
   }, []);
   var handleOpenMenuChange = useCallback(function (isOpen) {

package/lib/utils/devUtils/constants/htmlElements.js

@@ -1,5 +1,9 @@
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 /**
  * List of HTML elements to re use wherever needed.
  */
 
-export var htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];
+export var htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];
+export var supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/webp'];
+export var imageUploadPropTypes = _concatInstanceProperty(_context = ['application', 'application', 'audio', 'example', 'model', 'text', 'video']).call(_context, supportedImageTypes);

package/package.json

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