@pingux/astro 2.44.0 → 2.45.0-alpha.0

package/lib/cjs/components/AccordionGroup/Accordion.styles.d.ts

@@ -0,0 +1,70 @@
+export declare const hoveredState: {
+    '&.is-hovered': {
+        color: string;
+    };
+};
+declare const _default: {
+    title: {
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    accordion: {
+        display: string;
+        mt: string;
+        mb: string;
+        alignItems: string;
+    };
+    body: {
+        display: string;
+        pt: string;
+        width: string;
+        '.is-open &': {
+            display: string;
+        };
+    };
+    header: {
+        '&.is-hovered': {
+            color: string;
+        };
+        display: string;
+        bg: string;
+        color: string;
+        padding: string;
+        flexGrow: number;
+        fontWeight: number;
+        '&.is-pressed': {
+            color: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        fontFamily: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        cursor: string;
+        height: string;
+        lineHeight: string;
+        minWidth: string;
+        outline: string;
+        alignItems: string;
+        justifyContent: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
+};
+export default _default;

package/lib/cjs/components/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { TreeProps } from 'react-stately';
+/**
+ * Console Warning: "Cannot update a component (`Unknown`)...`"
+ * when using controlledExpanded prop is expected
+ * and related to a known issue within React Stately.
+ */
+interface AccordionProps extends Omit<TreeProps<object>, 'onExpandedChange'> {
+    labelHeadingTag?: string;
+    onExpandedChange?: Dispatch<SetStateAction<string[]>>;
+}
+declare const AccordionGroup: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<unknown>>;
+export default AccordionGroup;

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -21,17 +21,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _accordion = require("@react-aria/accordion");
-var _utils = require("@react-aria/utils");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionContext = require("../../context/AccordionContext");
 var _index = require("../../index");
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
-  _excluded2 = ["onFocus"];
+var _excluded = ["labelHeadingTag", "onExpandedChange"],
+  _excluded2 = ["onFocus"]; // eslint-disable-next-line import/no-unresolved
 /**
  * Console Warning: "Cannot update a component (`Unknown`)...`"
  * when using controlledExpanded prop is expected
@@ -43,18 +41,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
-  var defaultExpandedKeys = props.defaultExpandedKeys,
-    expandedKeys = props.expandedKeys,
-    labelHeadingTag = props.labelHeadingTag,
+  var _props$labelHeadingTa = props.labelHeadingTag,
+    labelHeadingTag = _props$labelHeadingTa === void 0 ? 'span' : _props$labelHeadingTa,
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _reactStately.useTreeState)(props);
-  var accordionRef = (0, _react.useRef)();
+  var accordionRef = (0, _react.useRef)(null);
 
   /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
-  var _useAccordion = (0, _accordion.useAccordion)(_objectSpread({
-      autoFocus: true
-    }, props), state, accordionRef),
+  var _useAccordion = (0, _accordion.useAccordion)(_objectSpread({}, props), state, accordionRef),
     accordionProps = _useAccordion.accordionProps;
   delete accordionProps.onMouseDown;
 
@@ -66,11 +61,19 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionRef.current;
   });
+  var mergedProps = (0, _reactAria.mergeProps)(theseProps, others);
+  var onFocusGroup = function onFocusGroup() {
+    if (state.selectionManager.isFocused === false) {
+      state.selectionManager.setFocused(true);
+    }
+  };
   return (0, _react2.jsx)(_AccordionContext.AccordionContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: accordionRef
-  }, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, mergedProps, {
+    onFocus: onFocusGroup
+  }), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_AccordionItem["default"], {
       "data-id": item['data-id'],
       item: item,
@@ -79,25 +82,6 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, item.props.children);
   })));
 });
-AccordionGroup.propTypes = {
-  /** Handler that is called when items are expanded or collapsed. */
-  onExpandedChange: _propTypes["default"].func,
-  /** Item objects in the collection. */
-  items: _isIterable.isIterableProp,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: _isIterable.isIterableProp,
-  /** The currently expanded keys in the collection (controlled). */
-  expandedKeys: _isIterable.isIterableProp,
-  /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: _isIterable.isIterableProp,
-  /** Id of the selected element */
-  id: _propTypes["default"].string,
-  /** HTML header element wrapping the label */
-  labelHeadingTag: _AccordionItem["default"].propTypes.labelHeadingTag
-};
 AccordionGroup.displayName = 'AccordionGroup';
 var _default = AccordionGroup;
 exports["default"] = _default;

package/lib/cjs/components/AccordionGroup/AccordionGroup.stories.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const DifferentLevels: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Multiple: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const ControlledExpanded: () => React.JSX.Element;
+export declare const UncontrolledExpanded: () => React.JSX.Element;
+export declare const DisabledState: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const CustomPresentation: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const LabelWithBadge: (args: any) => React.JSX.Element;

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

@@ -16,9 +16,9 @@ var _reactStately = require("react-stately");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _AccordionItem = require("../AccordionItem/AccordionItem");
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.mdx"));
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
 var _react2 = 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; }
@@ -154,9 +154,10 @@ var Multiple = function Multiple() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label;
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label = item.label) === null || _label === void 0 ? void 0 : _label.toString(),
         label: item.label
       }, item.children);
     })
@@ -192,9 +193,10 @@ var ControlledExpanded = function ControlledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label2;
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label2 = item.label) === null || _label2 === void 0 ? void 0 : _label2.toString(),
         label: item.label
       }, item.children);
     })
@@ -215,9 +217,10 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label3;
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label3 = item.label) === null || _label3 === void 0 ? void 0 : _label3.toString(),
         label: item.label
       }, item.children);
     })
@@ -238,9 +241,10 @@ var DisabledState = function DisabledState() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label4;
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label4 = item.label) === null || _label4 === void 0 ? void 0 : _label4.toString(),
         label: item.label
       }, item.children);
     })
@@ -266,9 +270,10 @@ var CustomPresentation = function CustomPresentation() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label5;
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label5 = item.label) === null || _label5 === void 0 ? void 0 : _label5.toString(),
         label: item.label,
         buttonProps: {
           bg: item.key === 't2' ? 'darkseagreen' : 'skyblue'

package/lib/cjs/components/AccordionGroup/AccordionGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -101,7 +101,9 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, {
     "data-testid": "popoverbutton"
   }, "Click me"), (0, _react2.jsx)(_index.Menu, {
-    onAction: function onAction() {}
+    onAction: function onAction() {
+      return false;
+    }
   }, (0, _react2.jsx)(_reactStately.Item, {
     key: "edit"
   }, "Edit"), (0, _react2.jsx)(_reactStately.Item, {
@@ -114,13 +116,15 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, "Delete")))), (0, _react2.jsx)(_["default"], {
     items: items,
     defaultExpandedKeys: selectedAccordionKeys
-  }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.key,
-      textValue: item.label,
-      label: item.label
-    }, item.text);
-  })));
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: items[0].key,
+    textValue: items[0].label,
+    label: items[0].label
+  }, items[0].text), (0, _react2.jsx)(_reactStately.Item, {
+    key: items[1].key,
+    textValue: items[1].label,
+    label: items[1].label
+  }, items[1].text))));
 };
 var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.Box, {
@@ -245,9 +249,7 @@ test('allows users to navigate accordion headers through the tab key', function
     firstItem = _buttons2[0],
     secondItem = _buttons2[1],
     thirdItem = _buttons2[2];
-  (0, _testWrapper.act)(function () {
-    firstItem.focus();
-  });
+  _userEvent["default"].tab();
   expect(firstItem).toHaveFocus();
   _userEvent["default"].tab();
   expect(secondItem).toHaveFocus();

package/lib/cjs/components/AccordionGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AccordionGroup';

package/lib/cjs/components/AccordionItem/AccordionItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Node } from '@react-types/shared';
+export declare const validHeadingTags: string[];
+interface AccordionItemProps<T> {
+    item: Node<T>;
+    className?: string;
+    labelHeadingTag: string;
+    'aria-label'?: string;
+    'data-id'?: string;
+    children: React.ReactNode;
+    buttonProps?: object;
+}
+declare const AccordionItem: {
+    (props: AccordionItemProps<object>): React.JSX.Element;
+    displayName: string;
+};
+export default AccordionItem;

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -10,8 +10,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.validHeadingTags = exports["default"] = void 0;
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -21,27 +19,22 @@ var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon")
 var _accordion = require("@react-aria/accordion");
 var _focus = require("@react-aria/focus");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
 var _AccordionContext = require("../../context/AccordionContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _Accordion = require("../AccordionGroup/Accordion.styles");
 var _react2 = require("@emotion/react");
-var _context;
-var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
+var _excluded = ["containerProps", "buttonProps", "regionProps"]; // eslint-disable-next-line import/no-unresolved
 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; }
 var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 exports.validHeadingTags = validHeadingTags;
-var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var AccordionItem = function AccordionItem(props) {
   var className = props.className,
     item = props.item,
     labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
-    label = _item$props.label,
-    children = _item$props.children,
-    textValue = _item$props.textValue,
     _item$props$container = _item$props.containerProps,
     containerProps = _item$props$container === void 0 ? {} : _item$props$container,
     _item$props$buttonPro = _item$props.buttonProps,
@@ -50,23 +43,23 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
     others = (0, _objectWithoutProperties2["default"])(_item$props, _excluded);
   var state = (0, _react.useContext)(_AccordionContext.AccordionContext);
-  var buttonRef = (0, _react.useRef)();
+  var buttonRef = (0, _react.useRef)(null);
   var _useAccordionItem = (0, _accordion.useAccordionItem)(props, state, buttonRef),
     accordionButtonProps = _useAccordionItem.buttonProps,
     accordionRegionProps = _useAccordionItem.regionProps;
-  var _useHover = (0, _interactions.useHover)(props),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var _useFocusRing = (0, _focus.useFocusRing)(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var isOpen = state.expandedKeys.has(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
+  var _useHover = (0, _interactions.useHover)({
+      isDisabled: isDisabled
+    }),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return buttonRef.current;
-  });
+
   var _useButton = (0, _reactAria.useButton)(props, buttonRef),
     isPressed = _useButton.isPressed,
     raButtonProps = _useButton.buttonProps;
@@ -116,24 +109,6 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));
-});
-AccordionItem.propTypes = {
-  'aria-label': _propTypes["default"].string,
-  labelHeadingTag: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, validHeadingTags, (0, _map["default"])(validHeadingTags).call(validHeadingTags, function (heading) {
-    return heading.toUpperCase();
-  }))),
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    rendered: _propTypes["default"].node,
-    props: _propTypes["default"].shape({
-      label: _propTypes["default"].node,
-      children: _propTypes["default"].node,
-      textValue: _propTypes["default"].string,
-      containerProps: _propTypes["default"].shape({}),
-      buttonProps: _propTypes["default"].shape({}),
-      regionProps: _propTypes["default"].shape({})
-    })
-  })
 };
 AccordionItem.displayName = 'AccordionItem';
 var _default = AccordionItem;

package/lib/cjs/components/AccordionItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AccordionItem';

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

@@ -15,11 +15,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+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 _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -28,6 +28,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactDropzone = require("react-dropzone");
+var _pluralize = _interopRequireDefault(require("pluralize"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
@@ -44,7 +45,11 @@ var _excluded = ["defaultButtonText", "defaultFileList", "fileList", "helperText
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+var FILE_CHANGE_STATUS = {
+  ADDED: 'added',
+  DELETED: 'deleted'
+};
 var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var defaultButtonText = _ref.defaultButtonText,
     defaultFileList = _ref.defaultFileList,
@@ -62,6 +67,14 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     uploadedFiles = _useState2[0],
     setUploadedFiles = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    fileChangeStatus = _useState4[0],
+    setFileChangeStatus = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    fileChangeMessage = _useState6[0],
+    setFileChangeMessage = _useState6[1];
   var inputRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -85,7 +98,22 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     inputRef.current.value = null;
     inputRef.current.click();
   }, [inputRef]);
-  var handleFileUpload = (0, _react.useCallback)(function (event, newFiles) {
+  (0, _react.useEffect)(function () {
+    // TODO: The function works fine in Google Chrome, but sometimes voiceover skips the
+    // update/delete file status update on Safari
+
+    if (status === _statuses["default"].ERROR) {
+      setFileChangeMessage(helperText);
+    } else if (fileChangeStatus) {
+      var _context;
+      setFileChangeMessage((0, _concat["default"])(_context = "".concat((0, _pluralize["default"])('file', fileChangeStatus.fileCount, true), " ")).call(_context, fileChangeStatus.status, " successfully"));
+    }
+    setFileChangeStatus(null);
+  }, [fileChangeStatus, helperText, status]);
+  var handleFileUpload = function handleFileUpload(event, newFiles) {
+    if (status === _statuses["default"].ERROR) {
+      setFileChangeMessage('');
+    }
     if (onFileSelect) {
       onFileSelect(event, newFiles);
     }
@@ -93,7 +121,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = (0, _slice["default"])(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var newFilesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -104,16 +132,20 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context;
-        return (0, _concat["default"])(_context = []).call(_context, prevFiles, newFilesWithIdAndLink);
+        var _context2;
+        return (0, _concat["default"])(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
       });
     } else {
-      setUploadedFiles(newFilesWithIdAndLink);
+      setUploadedFiles(filesWithIdAndLink);
     }
-  }, [isMultiple, onFileSelect]);
-  var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections, event) {
+    setFileChangeStatus({
+      fileCount: filesWithIdAndLink.length,
+      status: FILE_CHANGE_STATUS.ADDED
+    });
+  };
+  var onDrop = function onDrop(acceptedFiles, fileRejections, event) {
     handleFileUpload(event, acceptedFiles);
-  }, [handleFileUpload]);
+  };
   var _useDropzone = (0, _reactDropzone.useDropzone)({
       onDrop: onDrop,
       noKeyboard: true,
@@ -122,26 +154,31 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     isDragActive = _useDropzone.isDragActive;
-  var handleOnChange = (0, _react.useCallback)(function (event) {
+  var handleOnChange = function handleOnChange(event) {
     handleFileUpload(event, event.target.files);
-  }, [handleFileUpload]);
-  var handleFileDelete = (0, _react.useCallback)(function (e, fileId) {
-    if (onRemove) {
-      onRemove(e, fileId);
-    }
-    setUploadedFiles(function (prevFiles) {
-      return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref2) {
-        var id = _ref2.id;
-        return id !== fileId;
-      });
-    });
-  }, [onRemove]);
+  };
   var filesListNode = (0, _react.useMemo)(function () {
+    var handleFileDelete = function handleFileDelete(e, fileId) {
+      setFileChangeMessage('');
+      if (onRemove) {
+        onRemove(e, fileId);
+      }
+      setUploadedFiles(function (prevFiles) {
+        return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref2) {
+          var id = _ref2.id;
+          return id !== fileId;
+        });
+      });
+      setFileChangeStatus({
+        fileCount: 1,
+        status: FILE_CHANGE_STATUS.DELETED
+      });
+    };
     var filesToRender = uploadedFilesImperative || uploadedFiles;
     if (!(filesToRender !== null && filesToRender !== void 0 && filesToRender.length)) {
       return null;
     }
-    return (0, _map["default"])(filesToRender).call(filesToRender, function (fileProps) {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(filesToRender).call(filesToRender, function (fileProps) {
       return (0, _react2.jsx)(_FileItem["default"], (0, _extends2["default"])({
         handleFileDelete: handleFileDelete,
         isDisabled: isDisabled || isLoading,
@@ -149,8 +186,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         textProps: textProps,
         helperTextId: helperTextId
       }, fileProps));
-    });
-  }, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
+    }));
+  }, [helperTextId, isDisabled, isLoading, onRemove, textProps, uploadedFiles, uploadedFilesImperative]);
   var _useStatusClasses = (0, _useStatusClasses3["default"])('fileInputFieldWrapper', (0, _defineProperty2["default"])({
       isDragActive: isDragActive,
       isLoading: isLoading
@@ -191,10 +228,16 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       position: 'absolute'
     },
     "data-testid": "file-input-field__loader"
-  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  })), helperText && (0, _react2.jsx)(_.Box, {
+    "aria-label": helperText
+  }, (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
-  }, helperText));
+  }, helperText)), fileChangeMessage && (0, _react2.jsx)(_.Box, {
+    "aria-relevant": "all",
+    "aria-live": "assertive",
+    role: "status"
+  }, (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)("h1", null, fileChangeMessage))));
 });
 FileInputField.displayName = 'FileInputField';
 FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({