@pingux/astro 1.7.0-alpha.9 → 1.8.0-alpha.1

package/lib/components/Image/Image.test.js

@@ -1,18 +1,62 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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 from 'react';
+import { act } from '@testing-library/react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Image from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var testSrc = 'test-src';
+var testFallbackSrc = 'test-fallback-src';
+var skeletonImageId = 'skeleton-image';
+var defaultProps = {
+  src: testSrc,
+  fallbackImage: testFallbackSrc
+};
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Image, props));
+  return render(___EmotionJSX(Image, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
 axeTest(getComponent);
+var fallbackImageObj = null;
+jest.mock('../../hooks/useFallbackImage', function () {
+  return function (props) {
+    fallbackImageObj = _objectSpread({}, props);
+    return [];
+  };
+});
 test('an image is rendered', function () {
   getComponent();
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  var img = screen.getByRole('img');
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});
+test('an image is rendered with no fallback', function () {
+  getComponent({
+    fallbackImage: null
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
@@ -21,6 +65,79 @@ test('image shows disabled status', function () {
   getComponent({
     isDisabled: true
   });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
+});
+describe('test Image component with useFallbackImage hook', function () {
+  test('image component will use src if loaded correctly', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('image component will use fallbackImg if src loaded with error', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageError();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('image component will use fallbackImg if src timed out', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('if image loads after timeout src still be the fallback', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+      fallbackImageObj.onImageLoad();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('if image loads before timeout src still be the the origin one', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+      fallbackImageObj.onFallbackTimeout();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('the skeleton loading will appear if no fallback image is given', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('the skeleton will be shown instead of img if no fallback image is given and image load failed', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    act(function () {
+      fallbackImageObj.onImageError();
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+  });
+  test('the skeleton will be shown instead of img if no fallback image is given and image load timed out', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+  });
 });

package/lib/components/Image/imageConstants.js

@@ -0,0 +1,2 @@
+export var pingImg = 'data:image/png;base64,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';
+export var chiefIdentityChampions = 'https://images.pingidentity.com/image/upload/f_auto,q_auto,w_auto,c_scale/ping_dam/content/dam/ping-6-2-assets/images/company/our-company/chief-identity-champions.png';

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

@@ -7,15 +7,21 @@ import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import ImageUploadField from './ImageUploadField';
-import { Image } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var imageUploadNoImagePreview = 'image-upload-no-image-preview';
+jest.mock('../Image', function () {
+  return function (props) {
+    return ___EmotionJSX("img", _extends({
+      alt: "mock"
+    }, props));
+  };
+});
 var testLabel = 'test-label';
 var testButtonId = 'image-preview-button';
 var testHelperText = 'test-helper-text';
 var testImageURL = 'test-image-url';
 var testImageURL2 = 'test-image-url2';
 var imageUploadImagePreview = 'image-upload-image-preview';
-var imageUploadNoImagePreview = 'image-upload-no-image-preview';
 var file = new File(['(⌐□_□)'], 'chucknorris.png', {
   type: 'image/png'
 });
@@ -185,10 +191,16 @@ test('should change image if the corresponding menu option clicked', /*#__PURE__
               files: [file]
             }
           });
-          expect(imagePreview).toBeInTheDocument();
+          _context4.t0 = expect;
+          _context4.next = 14;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 14:
+          _context4.t1 = _context4.sent;
+          (0, _context4.t0)(_context4.t1).toBeInTheDocument();
           expect(imagePreview).toHaveAttribute('src');
 
-        case 13:
+        case 17:
         case "end":
           return _context4.stop();
       }
@@ -228,12 +240,18 @@ test('should call onRemove cb (when provided) when a file is uploaded', /*#__PUR
         case 5:
           imagePreview = _context5.sent;
           userEvent.click(screen.getByTestId(testButtonId));
-          expect(imagePreview).toBeInTheDocument();
+          _context5.t0 = expect;
+          _context5.next = 10;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 10:
+          _context5.t1 = _context5.sent;
+          (0, _context5.t0)(_context5.t1).toBeInTheDocument();
           userEvent.click(screen.getByText('Remove Image'));
           expect(imagePreview).not.toBeInTheDocument();
           expect(testOnRemove).toHaveBeenCalledTimes(1);
 
-        case 11:
+        case 15:
         case "end":
           return _context5.stop();
       }
@@ -372,7 +390,9 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
 })));
 test('should render node element if passed as default image', function () {
   getComponent({
-    defaultPreviewImage: ___EmotionJSX(Image, null)
+    defaultPreviewImage: ___EmotionJSX("img", {
+      alt: "mock"
+    })
   });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);

package/lib/components/ListViewItem/ListViewItem.js

@@ -34,6 +34,7 @@ var ListViewItem = function ListViewItem(props) {
   var isDisabled = state.disabledKeys.has(item.key);
   var rowRef = useRef();
   var cellRef = useRef();
+  var isSelectable = state.selectionManager.selectionMode !== 'none';
 
   var _useFocusRing = useFocusRing({
     within: true
@@ -73,7 +74,7 @@ var ListViewItem = function ListViewItem(props) {
   var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = useStatusClasses(className, {
-    isHovered: isHovered,
+    isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible,
     hasSeparator: hasSeparator

package/lib/components/MultiselectFilter/MultiselectFilter.js

@@ -72,7 +72,7 @@ var MultiselectFilter = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(ListView, {
     items: items,
     onSelectionChange: onSelectionChange,
-    selectionMode: "multiple",
+    selectionMode: "none",
     style: {
       width: '100%'
     },

package/lib/components/MultiselectFilterItem/MultiselectFilterItem.js

@@ -1,25 +1,37 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Icon, Text } from '../../index';
+import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultiselectFilterItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
-      icon = props.icon;
+      icon = props.icon,
+      isDefaultSelected = props.isDefaultSelected,
+      onPress = props.onPress;
+
+  var iconElement = icon && ___EmotionJSX(Icon, {
+    "data-testid": "multiselect-filter-data-icon",
+    icon: icon,
+    color: isDefaultSelected ? 'neutral.10' : 'active',
+    size: 13
+  });
+
   return ___EmotionJSX(Box, {
     "data-testid": "multiselect-filter-item",
     isRow: true,
-    justifyContent: "space-between",
     ref: ref
   }, ___EmotionJSX(Text, {
     variant: "multiselectFilterItem"
-  }, text), icon && ___EmotionJSX(Icon, {
-    "data-testid": "multiselect-filter-data-icon",
-    icon: icon,
-    mr: "md",
-    color: "neutral.10",
-    size: 13,
-    flexShrink: 0
-  }));
+  }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
+    sx: {
+      width: 13,
+      height: 13,
+      alignSelf: 'auto',
+      '& path': {
+        fill: 'inherit'
+      }
+    },
+    onPress: onPress
+  }, iconElement)));
 });
 MultiselectFilterItem.propTypes = {
   /**
@@ -30,7 +42,18 @@ MultiselectFilterItem.propTypes = {
   /**
      * List icon.
      */
-  icon: PropTypes.shape({})
+  icon: PropTypes.shape({}),
+
+  /**
+   * Whether the element is default selected
+   * and has to use Icon element instead of IconButton
+   */
+  isDefaultSelected: PropTypes.bool,
+
+  /**
+   * Handler that is called at the press on icon button
+   */
+  onPress: PropTypes.func
 };
 MultiselectFilterItem.displayName = 'MultiselectFilterItem';
 export default MultiselectFilterItem;

package/lib/components/MultiselectFilterItem/MultiselectFilterItem.test.js

@@ -28,10 +28,20 @@ test('default multiselectFilter', function () {
   expect(icon).not.toBeInTheDocument();
   expect(multiselectFilterItem).toBeInTheDocument();
 });
-test('icon displays when icon prop is present', function () {
+test('icon button displays when icon prop is present', function () {
   getComponent({
     icon: FilterIcon
   });
   var icon = screen.getByTestId(iconId);
   expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).toBeInstanceOf(HTMLButtonElement);
+});
+test('icon displays when icon prop is present and default selected', function () {
+  getComponent({
+    icon: FilterIcon,
+    isDefaultSelected: true
+  });
+  var icon = screen.getByTestId(iconId);
+  expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).not.toBeInstanceOf(HTMLButtonElement);
 });

package/lib/components/NavBar/NavBar.js

@@ -17,17 +17,25 @@ import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBar = function NavBar(props) {
-  var defaultSelectedKeys = props.defaultSelectedKeys;
+  var defaultSelectedKey = props.defaultSelectedKey,
+      defaultExpandedKeys = props.defaultExpandedKeys;
 
-  var _useState = useState(defaultSelectedKeys),
+  var _useState = useState(defaultSelectedKey),
       _useState2 = _slicedToArray(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var _useState3 = useState(defaultExpandedKeys),
+      _useState4 = _slicedToArray(_useState3, 2),
+      expandedKeys = _useState4[0],
+      setExpandedKeys = _useState4[1];
 
   return ___EmotionJSX(NavBarContext.Provider, {
     value: {
-      selectedKeys: selectedKeys,
-      setSelectedKeys: setSelectedKeys
+      selectedKey: selectedKey,
+      setSelectedKey: setSelectedKey,
+      expandedKeys: expandedKeys,
+      setExpandedKeys: setExpandedKeys
     }
   }, ___EmotionJSX(Box, {
     variant: "navBar.container",
@@ -37,9 +45,13 @@ var NavBar = function NavBar(props) {
 };
 
 NavBar.propTypes = {
-  defaultSelectedKeys: isIterableProp
+  /** The initial selected key in the collection (uncontrolled). */
+  defaultSelectedKey: isIterableProp,
+
+  /** The initial expanded keys in the collection (uncontrolled). */
+  defaultExpandedKeys: isIterableProp
 };
 NavBar.defaultProps = {
-  defaultSelectedKeys: []
+  defaultSelectedKey: []
 };
 export default NavBar;

package/lib/components/NavBar/NavBar.stories.js

@@ -228,7 +228,7 @@ var thirdData = [{
 }];
 export var Default = function Default() {
   return ___EmotionJSX(NavBar, {
-    defaultSelectedKeys: ['Dashboard Link Group']
+    defaultSelectedKey: "Dashboard Link Group"
   }, ___EmotionJSX(Box, {
     padding: "md"
   }, ___EmotionJSX(Link, {
@@ -237,7 +237,8 @@ export var Default = function Default() {
     "aria-label": "home link"
   }, logo)), ___EmotionJSX(Separator, {
     marginTop: "lg",
-    marginBottom: "sm"
+    marginBottom: "sm",
+    backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl"

package/lib/components/NavBarSection/NavBarItem.js

@@ -43,7 +43,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var state = useNavBarContext();
 
-  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
 
   var _useNavBarPress = useNavBarPress({
     key: key,

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -34,7 +34,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   var state = useNavBarContext();
 
-  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
 
   var _useNavBarPress = useNavBarPress({
     key: key,

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -1,13 +1,43 @@
-import React from 'react';
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import MenuDown from 'mdi-react/MenuDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
 import { Box, Icon, Text } from '../../index';
+import { AccordionGridContext } from '../../context/AccordionGridContext';
+import { NavBarContext } from '../../context/NavBarContext';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemHeader = function NavBarItemHeader(props) {
+  var _state$selectionManag, _context;
+
   var item = props.item;
-  var icon = item.icon;
+  var icon = item.icon,
+      key = item.key,
+      className = item.className;
+
+  var _useContext = useContext(AccordionGridContext),
+      state = _useContext.state;
+
+  var navState = useContext(NavBarContext);
+  var isExpanded = (_state$selectionManag = state.selectionManager.selectedKeys) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.has(key);
+
+  var array = _mapInstanceProperty(_context = item.children).call(_context, function (i) {
+    return i.key;
+  });
+
+  var childSelected = _includesInstanceProperty(array).call(array, navState.selectedKey);
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: childSelected && !isExpanded
+  }),
+      classNames = _useStatusClasses.classNames;
+
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
+    className: classNames,
     isRow: true
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
@@ -19,13 +49,25 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }), ___EmotionJSX(Text, {
     variant: "navBarHeaderText"
-  }, props.item.heading));
+  }, props.item.heading), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: isExpanded ? MenuUp : MenuDown,
+    size: 20
+  })));
 };
 
 NavBarItemHeader.propTypes = {
   item: PropTypes.shape({
     heading: PropTypes.string,
-    icon: PropTypes.elementType
+    icon: PropTypes.elementType,
+    className: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    key: PropTypes.string
   })
 };
 export default NavBarItemHeader;

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -33,7 +33,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   var state = useNavBarContext();
 
-  var isSelected = _includesInstanceProperty(_context = state.selectedKeys).call(_context, key);
+  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
 
   var _useNavBarPress = useNavBarPress({
     key: key,

package/lib/components/NavBarSection/NavBarSection.js

@@ -25,7 +25,8 @@ var NavBarSection = function NavBarSection(props) {
   }, function (item) {
     return ___EmotionJSX(Item, {
       headerProps: {
-        variant: 'accordion.accordionGridHeaderNav'
+        variant: 'accordion.accordionGridHeaderNav',
+        hasCaret: false
       },
       bodyProps: {
         variant: 'navBar.sectionBody'
@@ -40,7 +41,9 @@ var NavBarSection = function NavBarSection(props) {
     sx: {
       pl: '15px',
       pr: '15px',
-      my: '10px'
+      my: '10px',
+      mt: '15px',
+      mb: '15px'
     }
   }, ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"

package/lib/components/NumberField/NumberField.js

@@ -7,12 +7,13 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
 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; }
+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) { _defineProperty(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; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -105,6 +106,33 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
       onBlur: onInputBlur
     });
   }, [fieldControlProps, onInputBlur, onInputFocus]);
+
+  var onInputChange = function onInputChange(e) {
+    var _context;
+
+    var minValue = props.minValue;
+
+    var trimmedInputValue = _trimInstanceProperty(_context = e.target.value).call(_context);
+
+    var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+      target: _objectSpread(_objectSpread({}, e.target), {}, {
+        value: trimmedInputValue
+      })
+    });
+
+    if (!trimmedInputValue && typeof minValue !== 'undefined') {
+      var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+        target: _objectSpread(_objectSpread({}, e.target), {}, {
+          value: minValue.toString()
+        })
+      });
+
+      inputProps.onChange(minValueEvent);
+    } else {
+      inputProps.onChange(trimmedValueEvent);
+    }
+  };
+
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {
@@ -115,7 +143,9 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
+    onChange: onInputChange
+  })), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/components/Text/Text.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _styled from "@emotion/styled/base";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { layout, flexbox } from 'styled-system';
+import { layout, flexbox, typography } from 'styled-system';
 import { Text as ThemeUIText } from 'theme-ui';
 import { textVariants } from '../../utils/devUtils/constants/variants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -12,7 +12,12 @@ var ExtendedText = /*#__PURE__*/_styled(ThemeUIText, process.env.NODE_ENV === "p
 } : {
   target: "eifd86o0",
   label: "ExtendedText"
-})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3ggfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgVGV4dCA9IFJlYWN0LmZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IChcbiAgPEV4dGVuZGVkVGV4dCB2YXJpYW50PVwiYmFzZVwiIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+XG4pKTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuXG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuLyoqXG4gKiBUaGUgVGV4dCBjb21wb25lbnQgaXMgdXNlZCBmb3IgZGlzcGxheWluZyB0ZXh0LlxuICogVGV4dCBzdXBwb3J0cyBbVHlwb2dyYXBoeSBQcm9wcyBmcm9tIFN0eWxlZCBTeXN0ZW0gXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlLyN0eXBvZ3JhcGh5KS5cbiAqL1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4gKFxuICA8RXh0ZW5kZWRUZXh0IHZhcmlhbnQ9XCJiYXNlXCIgey4uLnByb3BzfSByZWY9e3JlZn0gLz5cbikpO1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cblxuVGV4dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHZhcmlhbnQ6IHRleHRWYXJpYW50cy5CQVNFLFxufTtcblxuVGV4dC5kaXNwbGF5TmFtZSA9ICdUZXh0JztcblxuZXhwb3J0IGRlZmF1bHQgVGV4dDtcbiJdfQ== */");
+/**
+ * The Text component is used for displaying text.
+ * Text supports [Typography Props from Styled System ](https://styled-system.com/table/#typography).
+ */
+
 
 var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return ___EmotionJSX(ExtendedText, _extends({