@pingux/astro 2.62.1-alpha.0 → 2.63.0

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

@@ -33,7 +33,7 @@ var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/p
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
-var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
   _excluded2 = ["id", "onComponentRender", "fieldValue"];
 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; }
@@ -43,6 +43,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context2;
   var addButtonLabel = props.addButtonLabel,
     defaultValue = props.defaultValue,
+    fieldControlWrapperProps = props.fieldControlWrapperProps,
     value = props.value,
     label = props.label,
     helperText = props.helperText,
@@ -139,7 +140,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }))), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "ul",
     pl: "0"
-  }, ariaProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+  }, ariaProps, fieldControlWrapperProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
     var id = _ref2.id,
       onComponentRender = _ref2.onComponentRender,
       fieldValue = _ref2.fieldValue,
@@ -183,6 +184,8 @@ ArrayField.propTypes = _objectSpread(_objectSpread({
   label: _propTypes["default"].node,
   /** Props object that is spread directly into the label element. */
   labelProps: _propTypes["default"].shape({}),
+  /** Props object that is spread directly into the wrapper rendering the fields. */
+  fieldControlWrapperProps: _propTypes["default"].shape({}),
   /** Text to display before add button. Useful for errors or other info. */
   helperText: _propTypes["default"].node,
   /** Callback for changing array field data  */

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLimitedItemsNumber = exports.Uncontrolled = exports.Controlled = void 0;
+exports["default"] = exports.WithLimitedItemsNumber = exports.Uncontrolled = exports.Customizations = exports.Controlled = void 0;
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -277,4 +277,43 @@ var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
     maxSize: 3
   }, args));
 };
-exports.WithLimitedItemsNumber = WithLimitedItemsNumber;
+exports.WithLimitedItemsNumber = WithLimitedItemsNumber;
+var Customizations = function Customizations(_ref5) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref5), _ref5));
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+    fieldControlWrapperProps: {
+      overflowY: 'scroll',
+      maxHeight: '150px'
+    },
+    defaultValue: defaultData,
+    width: "450px",
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (0, _react2.jsx)(_index.Box, {
+        width: "400px"
+      }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+        "aria-label": "Text field",
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps)));
+    }
+  }, args));
+};
+exports.Customizations = Customizations;

package/lib/components/ArrayField/ArrayField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
   _excluded2 = ["id", "onComponentRender", "fieldValue"];
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(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; }
@@ -31,6 +31,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
   var addButtonLabel = props.addButtonLabel,
     defaultValue = props.defaultValue,
+    fieldControlWrapperProps = props.fieldControlWrapperProps,
     value = props.value,
     label = props.label,
     helperText = props.helperText,
@@ -127,7 +128,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   }))), ___EmotionJSX(Box, _extends({
     as: "ul",
     pl: "0"
-  }, ariaProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+  }, ariaProps, fieldControlWrapperProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
     var id = _ref2.id,
       onComponentRender = _ref2.onComponentRender,
       fieldValue = _ref2.fieldValue,
@@ -171,6 +172,8 @@ ArrayField.propTypes = _objectSpread(_objectSpread({
   label: PropTypes.node,
   /** Props object that is spread directly into the label element. */
   labelProps: PropTypes.shape({}),
+  /** Props object that is spread directly into the wrapper rendering the fields. */
+  fieldControlWrapperProps: PropTypes.shape({}),
   /** Text to display before add button. Useful for errors or other info. */
   helperText: PropTypes.node,
   /** Callback for changing array field data  */

package/lib/components/ArrayField/ArrayField.stories.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
+import { ArrayField, ArrayFieldDeleteButton, Box, Item, SelectField, TextField } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import ArrayFieldReadme from './ArrayField.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -265,4 +265,42 @@ export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
     },
     maxSize: 3
   }, args));
+};
+export var Customizations = function Customizations(_ref5) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return ___EmotionJSX(ArrayField, _extends({
+    fieldControlWrapperProps: {
+      overflowY: 'scroll',
+      maxHeight: '150px'
+    },
+    defaultValue: defaultData,
+    width: "450px",
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(Box, {
+        width: "400px"
+      }, ___EmotionJSX(TextField, _extends({
+        "aria-label": "Text field",
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps)));
+    }
+  }, args));
 };

package/package.json

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