@pingux/astro 2.221.6 → 2.234.1-alpha.0

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

@@ -1,8 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _nextGen = _interopRequireDefault(require("../../styles/themes/next-gen"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _TextField = _interopRequireDefault(require("../TextField"));
@@ -31,17 +33,17 @@ 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) {
+var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
   return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
-    label: "Text field",
+    "aria-label": "Text field ".concat(id),
+    label: null,
     value: value,
     onChange: function onChange(e) {
       return onFieldValueChange(e, id);
     },
-    mr: "xs",
     slots: {
       inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
-        isDisabled: false,
+        isDisabled: isDisabled,
         onDelete: function onDelete() {
           return onFieldDelete(id);
         }
@@ -49,6 +51,16 @@ var renderField = function renderField(id, value, onFieldValueChange, onFieldDel
     }
   }, otherFieldProps));
 };
+var getTextFields = function getTextFields() {
+  return _testWrapper.screen.getAllByRole('textbox', {
+    name: /Text field/
+  });
+};
+var getDeleteButtons = function getDeleteButtons() {
+  return _testWrapper.screen.getAllByRole('button', {
+    name: /delete/i
+  });
+};
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
@@ -58,20 +70,24 @@ var renderField = function renderField(id, value, onFieldValueChange, onFieldDel
     }, defaultProps, props));
   }
 });
-test('displays multiple text fields', function () {
+test('displays multiple text fields with programmatic names', function () {
   var onChange = jest.fn();
   getComponent({
     onChange: onChange,
     renderField: renderField
   });
-  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(2);
+  expect(getTextFields()).toHaveLength(2);
+  expect(getTextFields()[0]).toHaveAccessibleName('Text field 1');
+  expect(getTextFields()[1]).toHaveAccessibleName('Text field 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);
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByRole('button', {
+    name: 'Add field'
+  }));
+  expect(getTextFields()).toHaveLength(3);
 });
 test('onAdd callback is fired when adding field', function () {
   var onAdd = jest.fn();
@@ -83,15 +99,17 @@ test('onAdd callback is fired when adding field', function () {
     onAdd: onAdd,
     renderField: renderField
   });
-  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByRole('button', {
+    name: 'Add field'
+  }));
   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();
+  _testWrapper.fireEvent.click(getDeleteButtons()[0]);
+  expect(getTextFields()).toHaveLength(1);
 });
 test('onDelete callback is fired when deleting field', function () {
   var onDelete = jest.fn();
@@ -103,14 +121,69 @@ test('onDelete callback is fired when deleting field', function () {
     onDelete: onDelete,
     renderField: renderField
   });
-  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
+  _testWrapper.fireEvent.click(getDeleteButtons()[0]);
   expect(onDelete).toHaveBeenCalled();
 });
+test('renders rows from the canonical value property', function () {
+  getComponent({
+    value: [{
+      id: '1',
+      value: 'Canonical value'
+    }],
+    renderField: renderField
+  });
+  expect(_testWrapper.screen.getByDisplayValue('Canonical value')).toBeInTheDocument();
+});
+test('preserves legacy fieldValue rows when rendering', function () {
+  var onComponentRender = function onComponentRender(id, fieldValue, onFieldValueChange) {
+    return (0, _react2.jsx)(_TextField["default"], {
+      "aria-label": "Legacy text field",
+      label: null,
+      value: fieldValue,
+      onChange: function onChange(event) {
+        return onFieldValueChange(event, id);
+      }
+    });
+  };
+  getComponent({
+    value: [{
+      id: '1',
+      fieldValue: 'Legacy value',
+      onComponentRender: onComponentRender
+    }]
+  });
+  expect(_testWrapper.screen.getByDisplayValue('Legacy value')).toBeInTheDocument();
+});
+test('renders controlled row updates after onChange', function () {
+  var ControlledArrayField = function ControlledArrayField() {
+    var _React$useState = _react["default"].useState([{
+        id: '1',
+        fieldValue: 'Initial value'
+      }]),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      values = _React$useState2[0],
+      setValues = _React$useState2[1];
+    return (0, _react2.jsx)(_ArrayField["default"], {
+      label: "test-label",
+      value: values,
+      onChange: setValues,
+      renderField: renderField
+    });
+  };
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledArrayField, null));
+  _testWrapper.fireEvent.change(getTextFields()[0], {
+    target: {
+      value: 'Updated value'
+    }
+  });
+  expect(_testWrapper.screen.getByDisplayValue('Updated value')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByDisplayValue('Initial value')).not.toBeInTheDocument();
+});
 test('Values are changed in text field', function () {
   getComponent({
     renderField: renderField
   });
-  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+  _testWrapper.fireEvent.change(getTextFields()[0], {
     target: {
       value: '123'
     }
@@ -127,7 +200,7 @@ test('onChange gets called when field values are changed', function () {
     renderField: renderField,
     defaultValue: defaultValue
   });
-  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+  _testWrapper.fireEvent.change(getTextFields()[0], {
     target: {
       value: '123'
     }
@@ -145,17 +218,17 @@ test('onComponentRender displays fields correctly', function () {
   var componentRenderData = [{
     id: '1',
     value: 'Hello',
-    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
       return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
-        label: "Text field",
+        "aria-label": "Text field",
+        label: null,
         value: value,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
-            isDisabled: false,
+            isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
@@ -166,17 +239,17 @@ test('onComponentRender displays fields correctly', function () {
   }, {
     id: '2',
     value: 'World',
-    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
       return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
-        label: "Text field 2",
+        "aria-label": "Text field 2",
+        label: null,
         value: value,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
-            isDisabled: false,
+            isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
@@ -190,15 +263,108 @@ test('onComponentRender displays fields correctly', function () {
     defaultValue: componentRenderData,
     onChange: onChange
   }));
-  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
-  expect(_testWrapper.screen.getByLabelText('Text field 2')).toBeInTheDocument();
+  expect(getTextFields()).toHaveLength(2);
+  expect(_testWrapper.screen.getByRole('textbox', {
+    name: 'Text field'
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.getByRole('textbox', {
+    name: 'Text field 2'
+  })).toBeInTheDocument();
 });
 test('creates empty field when no data passed', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
     label: "test-label",
     renderField: renderField
   }));
-  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+  expect(getTextFields()).toHaveLength(1);
+});
+test('uses the specified delete action semantics', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({
+    renderField: renderField
+  }, defaultProps)), {
+    providerTheme: _nextGen["default"]
+  });
+  expect(getDeleteButtons()).toHaveLength(2);
+  expect(getDeleteButtons()[0]).toHaveAccessibleName(/delete/i);
+});
+test('keeps the legacy delete action semantics under the Astro theme', function () {
+  getComponent({
+    renderField: renderField
+  });
+  expect(getDeleteButtons()).toHaveLength(2);
+  expect(getDeleteButtons()[0]).toHaveAccessibleName(/delete/i);
+});
+test('omits the delete action when a single field remains and does not call onDelete', function () {
+  var onDelete = jest.fn();
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "Array Field Label",
+    value: [{
+      id: '1',
+      value: 'Hello'
+    }],
+    onDelete: onDelete,
+    renderField: renderField
+  }));
+  expect(_testWrapper.screen.queryAllByRole('button', {
+    name: /delete/i
+  })).toHaveLength(0);
+  expect(getTextFields()).toHaveLength(1);
+  expect(onDelete).not.toHaveBeenCalled();
+});
+test('orders and associates array-level helper text before Add Field', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "Array Field Label",
+    defaultValue: defaultData,
+    helperText: "Helper text info...",
+    renderField: renderField
+  }));
+  var arrayLabel = _testWrapper.screen.getByText('Array Field Label');
+  var list = _testWrapper.screen.getByRole('list');
+  var helperText = _testWrapper.screen.getByText('Helper text info...');
+  var addButton = _testWrapper.screen.getByRole('button', {
+    name: 'Add field'
+  });
+  expect(arrayLabel.compareDocumentPosition(list)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  expect(list.compareDocumentPosition(helperText)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  expect(helperText.compareDocumentPosition(addButton)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  expect(helperText).toHaveAttribute('id');
+});
+test('keeps maximum feedback adjacent to helper text and omits Add Field at limit', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "Array Field Label",
+    defaultValue: defaultData,
+    helperText: "Helper text info...",
+    maxSize: 2,
+    maxSizeText: "Maximum 2 items.",
+    renderField: renderField
+  }));
+  var helperText = _testWrapper.screen.getByText('Helper text info...');
+  var maximumText = _testWrapper.screen.getByText('Maximum 2 items.');
+  expect(helperText.nextElementSibling).toBe(maximumText);
+  expect(helperText).toHaveAttribute('id');
+  expect(maximumText).toHaveAttribute('id');
+  expect(_testWrapper.screen.queryByRole('button', {
+    name: 'Add field'
+  })).not.toBeInTheDocument();
+});
+test('associates maximum feedback when helper text is absent', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "Array Field Label",
+    defaultValue: defaultData,
+    maxSize: 2,
+    maxSizeText: "Maximum 2 items.",
+    renderField: renderField
+  }));
+  var maximumText = _testWrapper.screen.getByText('Maximum 2 items.');
+  expect(maximumText).toHaveAttribute('id');
+});
+test('does not add an array description reference when helper and maximum feedback are absent', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "Array Field Label",
+    defaultValue: defaultData,
+    renderField: renderField
+  }));
+  expect(_testWrapper.screen.getByRole('list')).not.toHaveAttribute('aria-describedby');
 });
 test('check if tooltip on delete button renders on hover', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayFieldDeleteButton["default"], null));
@@ -212,10 +378,14 @@ test('removes add button if max number of fields is reached', function () {
     renderField: renderField,
     maxSize: 3
   });
-  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(2);
-  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
-  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(3);
-  expect(_testWrapper.screen.queryByText('+ Add')).not.toBeInTheDocument();
+  expect(getTextFields()).toHaveLength(2);
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByRole('button', {
+    name: 'Add field'
+  }));
+  expect(getTextFields()).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('button', {
+    name: 'Add field'
+  })).not.toBeInTheDocument();
   expect(_testWrapper.screen.getByText('Maximum 3 items.')).toBeInTheDocument();
 });
 test('displays max size label if provided', function () {
@@ -225,7 +395,9 @@ test('displays max size label if provided', function () {
     maxSize: 1,
     maxSizeText: maxSizeText
   });
-  expect(_testWrapper.screen.queryByText('+ Add')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('button', {
+    name: 'Add field'
+  })).not.toBeInTheDocument();
   expect(_testWrapper.screen.getByText(maxSizeText)).toBeInTheDocument();
 });
 test('renders left slot content', function () {

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

@@ -8,28 +8,41 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
+var _hooks = require("../../hooks");
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _IconSymbol = _interopRequireDefault(require("../Icon/IconSymbol"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _react2 = require("@emotion/react");
 var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
   var isDisabled = _ref.isDisabled,
     id = _ref.id,
     onDelete = _ref.onDelete;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyxTheme = themeState.isOnyx;
+
+  // The spec omits the delete control entirely when a field cannot be deleted
+  // (e.g. the last remaining field) rather than rendering it disabled.
+  if (isDisabled) {
+    return null;
+  }
   return (0, _react2.jsx)(_IconButton["default"], {
     onPress: function onPress() {
       return onDelete && onDelete(id);
     },
     isDisabled: isDisabled,
-    "aria-label": "delete-button",
+    "aria-label": isOnyxTheme ? 'Delete field' : 'delete-button',
+    variant: "arrayField.deleteButton"
+  }, isOnyxTheme ? (0, _react2.jsx)(_IconSymbol["default"], {
+    icon: "delete",
+    size: 20,
     sx: {
-      position: 'absolute',
-      right: -35,
-      width: 32,
-      height: 32,
-      top: 5,
-      cursor: 'pointer'
+      flexShrink: 0
+    },
+    title: {
+      name: 'Delete field'
     }
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }) : (0, _react2.jsx)(_Icon["default"], {
     icon: _TrashIcon["default"],
     size: 20,
     color: "neutral.40",

package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.styles.d.ts

@@ -0,0 +1,5 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const arrayFieldDeleteButton: {
+    deleteButton: ThemeUICSSObject;
+};
+export default arrayFieldDeleteButton;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.arrayFieldDeleteButton = void 0;
+// Legacy Astro renders the delete control outside the input, absolutely
+// positioned to the right of the field row.
+var deleteButton = {
+  position: 'absolute',
+  right: -35,
+  width: 32,
+  height: 32,
+  top: 5,
+  cursor: 'pointer'
+};
+var arrayFieldDeleteButton = exports.arrayFieldDeleteButton = {
+  deleteButton: deleteButton
+};
+var _default = exports["default"] = arrayFieldDeleteButton;

package/lib/cjs/components/ArrayField/arrayFieldAttributes.d.ts

@@ -1,99 +1 @@
-export declare const arrayFieldArgTypes: {
-    'aria-controls': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    'aria-describedby': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    'aria-details': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    'aria-errormessage': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    'aria-label': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    'aria-labelledby': {
-        control: {
-            type: string;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            category: string;
-        };
-        description: string;
-    };
-    label: {
-        control: {
-            type: string;
-        };
-    };
-    helperText: {
-        control: {
-            type: string;
-        };
-    };
-    addButtonLabel: {
-        control: {
-            type: string;
-        };
-    };
-    maxSize: {
-        control: {
-            type: string;
-        };
-    };
-    maxSizeText: {
-        control: {
-            type: string;
-        };
-    };
-};
+export declare const arrayFieldArgTypes: any;

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

@@ -15,9 +15,10 @@ _Object$defineProperty(exports, "__esModule", {
 exports.arrayFieldArgTypes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _statusProp = require("../../utils/docUtils/statusProp");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var arrayFieldArgTypes = exports.arrayFieldArgTypes = _objectSpread({
+var arrayFieldArgTypes = exports.arrayFieldArgTypes = _objectSpread(_objectSpread({
   label: {
     control: {
       type: 'text'
@@ -43,4 +44,4 @@ var arrayFieldArgTypes = exports.arrayFieldArgTypes = _objectSpread({
       type: 'text'
     }
   }
-}, _ariaAttributes.ariaAttributeBaseArgTypes);
+}, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import { AstroProviderProps, GlobalStylesProps, PageWrapperProps } from '../../types';
+export declare const GlobalStyles: ({ isEndUserTheme }: GlobalStylesProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * _Note: For UI Library and Astro CSS conflicts, we supply a theme override located at_
+ * `@pingux/astro/lib/styles/themeOverrides/uiLibraryOverride.js`
+ */
+declare const AstroProvider: React.ForwardRefExoticComponent<AstroProviderProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Wrapper for the Astro application w/o global styles.
+ * It provides the standard background and the Astro theme.
+ */
+export declare const PageWrapper: React.ForwardRefExoticComponent<PageWrapperProps & React.RefAttributes<HTMLElement>>;
+export { ThemeProvider };
+export default AstroProvider;