@pingux/astro 1.2.1 → 1.3.2-alpha.0

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

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrayField = _interopRequireDefault(require("./ArrayField"));
+
+var _ArrayFieldDeleteButton = _interopRequireDefault(require("./ArrayFieldDeleteButton"));
+
+var _TextField = _interopRequireDefault(require("../TextField"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _react2 = require("@emotion/react");
+
+jest.mock('uuid', function () {
+  return {
+    v4: function v4() {
+      return 'testid';
+    }
+  };
+});
+var defaultData = [{
+  id: '1',
+  value: 'Hello'
+}, {
+  id: '2',
+  value: 'World'
+}];
+var defaultProps = {
+  defaultValue: defaultData
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+  return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+    label: "Text field",
+    value: value,
+    onChange: function onChange(e) {
+      return onFieldValueChange(e, id);
+    },
+    mr: "xs",
+    slots: {
+      inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+        isDisabled: false,
+        onDelete: function onDelete() {
+          return onFieldDelete(id);
+        }
+      })
+    }
+  }, otherFieldProps));
+};
+
+test('displays multiple text fields', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange,
+    renderField: renderField
+  });
+  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(2);
+});
+test('adds one text field and new empty field is added', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
+
+  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(3);
+});
+test('onAdd callback is fired when adding field', function () {
+  var onAdd = jest.fn();
+  getComponent({
+    onAdd: onAdd,
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
+
+  expect(onAdd).toHaveBeenCalled();
+});
+test('deletes one text field and only one field is left', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
+
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+});
+test('onDelete callback is fired when deleting field', function () {
+  var onDelete = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    defaultValue: defaultValue,
+    onDelete: onDelete,
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
+
+  expect(onDelete).toHaveBeenCalled();
+});
+test('Values are changed in text field', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+
+  expect(_testWrapper.screen.getByDisplayValue('123')).toBeInTheDocument();
+});
+test('onChange gets called when field values are changed', function () {
+  var onChange = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    onChange: onChange,
+    renderField: renderField,
+    defaultValue: defaultValue
+  });
+
+  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+
+  expect(onChange).toHaveBeenNthCalledWith(1, [{
+    id: '1',
+    value: '123'
+  }, {
+    id: '2',
+    value: 'World'
+  }]);
+});
+test('onComponentRender displays fields correctly', function () {
+  var onChange = jest.fn();
+  var componentRenderData = [{
+    id: '1',
+    value: 'Hello',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+        label: "Text field",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }, {
+    id: '2',
+    value: 'World',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+        label: "Text field 2",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }];
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    defaultValue: componentRenderData,
+    onChange: onChange
+  }));
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+  expect(_testWrapper.screen.getByLabelText('Text field 2')).toBeInTheDocument();
+});
+test('creates empty field when no data passed', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    renderField: renderField
+  }));
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+});

package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _TrashIcon = _interopRequireDefault(require("mdi-react/TrashIcon"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _react2 = require("@emotion/react");
+
+var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
+  var label = _ref.label,
+      isDisabled = _ref.isDisabled,
+      id = _ref.id,
+      onDelete = _ref.onDelete;
+  return (0, _react2.jsx)(_IconButton["default"], {
+    onPress: function onPress() {
+      return onDelete(id);
+    },
+    isDisabled: isDisabled,
+    sx: {
+      position: 'absolute',
+      right: -35,
+      width: 32,
+      height: 32,
+      top: 5,
+      cursor: 'pointer'
+    },
+    title: label
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _TrashIcon["default"],
+    size: 20,
+    color: "neutral.40"
+  }));
+};
+
+ArrayFieldDeleteButton.propTypes = {
+  label: _propTypes["default"].string,
+  id: _propTypes["default"].number,
+  isDisabled: _propTypes["default"].bool,
+  onDelete: _propTypes["default"].func
+};
+ArrayFieldDeleteButton.defaultProps = {
+  label: 'Delete field'
+};
+var _default = ArrayFieldDeleteButton;
+exports["default"] = _default;

package/lib/cjs/components/ArrayField/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ArrayField["default"];
+  }
+});
+
+_Object$defineProperty(exports, "ArrayFieldDeleteButton", {
+  enumerable: true,
+  get: function get() {
+    return _ArrayFieldDeleteButton["default"];
+  }
+});
+
+var _ArrayField = _interopRequireDefault(require("./ArrayField"));
+
+var _ArrayFieldDeleteButton = _interopRequireDefault(require("./ArrayFieldDeleteButton"));

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -105,7 +105,10 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_Checkbox["default"], (0, _extends2["default"])({
     ref: checkboxRef
   }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
-    status: status
+    status: status,
+    sx: {
+      pt: 7
+    }
   }, helperText));
 });
 CheckboxField.propTypes = {

package/lib/cjs/components/CodeView/CodeView.js

@@ -50,12 +50,12 @@ var _utils = require("@react-aria/utils");
 
 var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
 
-var _github = _interopRequireDefault(require("prism-react-renderer/themes/github"));
-
 var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
+var _codeView = _interopRequireDefault(require("../../styles/variants/codeView"));
+
 var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -96,7 +96,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
-    theme: _github["default"],
+    theme: _codeView["default"].theme,
     code: (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '',
     language: language
   }), function (_ref) {

package/lib/cjs/components/Input/Input.js

@@ -14,6 +14,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _isInteger = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-integer"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -22,8 +24,6 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _hooks = require("../../hooks");
-
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _react2 = require("@emotion/react");
@@ -41,19 +41,11 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       placeholder = props.placeholder,
       maxLength = props.maxLength,
       others = (0, _objectWithoutProperties2["default"])(props, ["name", "placeholder", "maxLength"]);
-  var ariaLabel = props['aria-label'] || name;
-  (0, _hooks.useAriaLabelWarning)('Input', ariaLabel || placeholder);
-
-  if (!ariaLabel && !placeholder) {
-    ariaLabel = 'Input';
-  }
-
   return (0, _react2.jsx)(_themeUi.Input, (0, _extends2["default"])({
-    "aria-label": ariaLabel,
     ref: ref,
     name: name,
     placeholder: placeholder,
-    maxLength: maxLength === 0 ? 'null' : maxLength
+    maxLength: (0, _isInteger["default"])(maxLength) && maxLength > 0 ? maxLength : undefined
   }, others));
 });
 Input.displayName = 'Input';

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

@@ -18,7 +18,8 @@ var _react3 = require("@emotion/react");
 
 var testId = 'test-input';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'My Input'
 };
 
 var getComponent = function getComponent() {
@@ -56,7 +57,7 @@ test('maxlength field with a set maxlength', function () {
 
   expect(input.value.length).toBe(3);
 });
-test('maxlength field set as a negative number or zero', function () {
+test('maxlength field is not set as null', function () {
   getComponent({
     maxLength: null
   });
@@ -65,5 +66,16 @@ test('maxlength field set as a negative number or zero', function () {
 
   _userEvent["default"].type(input, 'banana');
 
+  expect(input.value.length).toBe(6);
+});
+test('maxlength field is not set as zero', function () {
+  getComponent({
+    maxLength: 0
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  _userEvent["default"].type(input, 'banana');
+
   expect(input.value.length).toBe(6);
 });

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

@@ -773,6 +773,9 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  chromatic: {
+    delay: 5000
   }
 };
 

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.LoaderWithMostCommonColor = exports.Default = exports["default"] = void 0;
+exports.CustomColor = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -54,10 +54,10 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var LoaderWithMostCommonColor = function LoaderWithMostCommonColor() {
+var CustomColor = function CustomColor() {
   return (0, _react2.jsx)(_["default"], {
     color: "neutral.60"
   });
 };
 
-exports.LoaderWithMostCommonColor = LoaderWithMostCommonColor;
+exports.CustomColor = CustomColor;

package/lib/cjs/components/Modal/Modal.js

@@ -121,6 +121,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     className: classNames,
     variant: "modal.container"

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -10,13 +8,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.DarkVariant = exports.Default = exports["default"] = void 0;
+exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _hooks = require("../../hooks");
 
@@ -32,7 +28,7 @@ var _default = {
       control: {
         type: 'text'
       },
-      defaultValue: 'Delete Group'
+      defaultValue: 'Continue'
     },
     role: {},
     id: {
@@ -40,7 +36,9 @@ var _default = {
         type: 'text'
       }
     },
-    hasCloseButton: {},
+    hasCloseButton: {
+      defaultValue: true
+    },
     isClosedOnBlur: {},
     isDismissable: {},
     isKeyboardDismissDisabled: {},
@@ -90,16 +88,6 @@ exports["default"] = _default;
 
 var Default = function Default(args) {
   var state = (0, _hooks.useModalState)();
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onTextFieldChange = (0, _react.useCallback)(function (_ref) {
-    var value = _ref.target.value;
-    setInputValue(value.toUpperCase());
-  }, []);
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
@@ -110,59 +98,16 @@ var Default = function Default(args) {
       onClose: state.close
     }), (0, _react2.jsx)(_index.Text, {
       pt: "lg"
-    }, "Deleting a group ", (0, _react2.jsx)("strong", null, "\"Marketing\""), " cannot be undone. Users will lose access to the applications."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
-    }, "Type the word DELETE to confirm deletion of this group"), (0, _react2.jsx)(_index.TextField, {
-      value: inputValue,
-      onChange: onTextFieldChange,
-      "aria-label": "user input"
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      pt: "lg",
-      mr: "auto"
-    }, (0, _react2.jsx)(_index.Button, {
-      variant: "critical",
-      onPress: state.close,
-      mr: "md",
-      isDisabled: Boolean(inputValue !== 'DELETE'),
-      "aria-label": "Delete"
-    }, "Delete"), (0, _react2.jsx)(_index.Button, {
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
-  );
-};
-
-exports.Default = Default;
-
-var DarkVariant = function DarkVariant() {
-  var state = (0, _hooks.useModalState)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when a modal opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.open,
-      "aria-label": "Open modal"
-    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-      variant: "modal.dark",
-      title: "Question",
-      isOpen: state.isOpen,
-      onClose: state.close,
-      isDismissable: true,
-      hasCloseButton: true
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "subtitle",
-      color: "white",
-      pt: "lg"
-    }, "Would you ever really just click a button?"), (0, _react2.jsx)(_index.Box, {
+    }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       pt: "lg",
       mr: "auto"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
-      mr: "md",
       onPress: state.close,
-      "aria-label": "Yes"
-    }, "Yes"), (0, _react2.jsx)(_index.Button, {
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), (0, _react2.jsx)(_index.Button, {
       variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
@@ -170,4 +115,4 @@ var DarkVariant = function DarkVariant() {
   );
 };
 
-exports.DarkVariant = DarkVariant;
+exports.Default = Default;

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -60,8 +60,6 @@ var _overlays = require("@react-aria/overlays");
 
 var _utils = require("@react-aria/utils");
 
-var _uuid = require("uuid");
-
 var _ = require("../..");
 
 var _ListBox = _interopRequireDefault(require("../ListBox"));
@@ -94,6 +92,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
       hasAutoFocus = props.hasAutoFocus,
       hasNoStatusIndicator = props.hasNoStatusIndicator,
+      customInputProps = props.inputProps,
       isDisabled = props.isDisabled,
       isNotFlippable = props.isNotFlippable,
       isReadOnly = props.isReadOnly,
@@ -261,13 +260,17 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           } else if (hasCustomValue) {
             var _context3;
 
-            var name = e.target.value;
-            var id = (0, _uuid.v4)();
-            selectionManager.toggleSelection(id);
+            var _key2 = e.target.value;
+
+            if (state.selectionManager.isSelected(_key2)) {
+              return;
+            }
+
+            selectionManager.toggleSelection(_key2);
             setCustomItems((0, _concat["default"])(_context3 = []).call(_context3, customItems, [{
-              id: id,
-              key: id,
-              name: name
+              id: _key2,
+              key: _key2,
+              name: _key2
             }]));
             setFilterString('');
           }
@@ -359,7 +362,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   })), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }));
-  var inputProps = {
+
+  var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-expanded': isOpen,
       role: 'combobox'
@@ -375,7 +379,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       ref: inputRef,
       variant: 'forms.input.multivaluesWrapper'
     }
-  };
+  });
+
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       setIsOpen(false);
@@ -425,6 +430,11 @@ MultivaluesField.propTypes = {
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
 
+  /**
+   * Props that get passed as-is to the underlying TextField element
+   */
+  inputProps: _propTypes["default"].shape({}),
+
   /** Whether the input is disabled. */
   isDisabled: _propTypes["default"].bool,