@pingux/astro 2.92.0 → 2.93.0-alpha.0

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

@@ -30,7 +30,7 @@ var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "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", "slots"],
   _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; }
@@ -52,6 +52,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     labelProps = props.labelProps,
     maxSize = props.maxSize,
     maxSizeText = props.maxSizeText,
+    slots = props.slots,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var valueRef = _react["default"].useRef(value);
   valueRef.current = value;
@@ -121,6 +122,9 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
+
+  // renders of the bottom bar if one or more of the components within it should render
+  var shouldShowBottomBar = !isLimitReached || (slots === null || slots === void 0 ? void 0 : slots.left) || (slots === null || slots === void 0 ? void 0 : slots.right);
   var renderedItem = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
@@ -154,7 +158,10 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
     status: _statuses["default"].DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_.Button, {
+  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "md"
+  }, (slots === null || slots === void 0 ? void 0 : slots.left) && (slots === null || slots === void 0 ? void 0 : slots.left), !isLimitReached && (0, _react2.jsx)(_.Button, {
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
@@ -165,7 +172,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
-  }, addButtonLabel)));
+  }, addButtonLabel)), (slots === null || slots === void 0 ? void 0 : slots.right) && (slots === null || slots === void 0 ? void 0 : slots.right)));
 });
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add',

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

@@ -9,3 +9,6 @@ export declare const WithLimitedItemsNumber: StoryFn<ArrayFieldProps>;
 export declare const Customizations: ({ ...args }: {
     [x: string]: any;
 }) => React.JSX.Element;
+export declare const WithBothSlots: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;

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.Customizations = exports.Controlled = void 0;
+exports["default"] = exports.WithLimitedItemsNumber = exports.WithBothSlots = 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"));
@@ -318,4 +318,67 @@ var Customizations = function Customizations(_ref5) {
     }
   }, args));
 };
-exports.Customizations = Customizations;
+exports.Customizations = Customizations;
+var WithBothSlots = function WithBothSlots(_ref6) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
+  var LeftSlot = (0, _react2.jsx)(_index.Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "label",
+    color: "active"
+  }, "Left slot"));
+  var RightSlot = (0, _react2.jsx)(_index.Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "label",
+    color: "active"
+  }, "Right slot"));
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+    defaultValue: defaultData,
+    sx: {
+      width: '450px'
+    },
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    slots: {
+      left: LeftSlot,
+      right: RightSlot
+    },
+    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.WithBothSlots = WithBothSlots;

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

@@ -227,4 +227,30 @@ test('displays max size label if provided', function () {
   });
   expect(_testWrapper.screen.queryByText('+ Add')).not.toBeInTheDocument();
   expect(_testWrapper.screen.getByText(maxSizeText)).toBeInTheDocument();
+});
+test('renders left slot content', function () {
+  var leftSlotContent = (0, _react2.jsx)("div", {
+    "data-testid": "left-slot"
+  }, "Left Slot Content");
+  getComponent({
+    slots: {
+      left: leftSlotContent
+    }
+  });
+  var leftSlot = _testWrapper.screen.getByTestId('left-slot');
+  expect(leftSlot).toBeInTheDocument();
+  expect(leftSlot).toHaveTextContent('Left Slot Content');
+});
+test('renders right slot content', function () {
+  var rightSlotContent = (0, _react2.jsx)("div", {
+    "data-testid": "right-slot"
+  }, "Right Slot Content");
+  getComponent({
+    slots: {
+      right: rightSlotContent
+    }
+  });
+  var rightSlot = _testWrapper.screen.getByTestId('right-slot');
+  expect(rightSlot).toBeInTheDocument();
+  expect(rightSlot).toHaveTextContent('Right Slot Content');
 });

package/lib/cjs/types/arrayField.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { LabelProps, Status, ValidPositiveInteger } from '.';
 type RenderFieldFunction = (id: string, fieldValue: string, onFieldValueChange: (e: React.ChangeEvent, fieldId: string) => void, onFieldDelete: (fieldId: string) => void, isDisabled: boolean, otherFieldProps?: Record<string, string>) => React.ReactNode;
@@ -37,6 +37,11 @@ export interface ArrayFieldProps {
     status?: Status;
     /** Props object that is spread directly into the wrapper rendering the fields. */
     fieldControlWrapperProps?: Record<string, string>;
+    /** slots that render on either the left or right side of the add more button */
+    slots?: {
+        right?: React.ReactNode;
+        left?: React.ReactNode;
+    };
 }
 export interface ArrayFieldDeleteButtonProps {
     id?: number;

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", "fieldControlWrapperProps", "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", "slots"],
   _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; }
@@ -40,6 +40,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelProps = props.labelProps,
     maxSize = props.maxSize,
     maxSizeText = props.maxSizeText,
+    slots = props.slots,
     others = _objectWithoutProperties(props, _excluded);
   var valueRef = React.useRef(value);
   valueRef.current = value;
@@ -109,6 +110,9 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
+
+  // renders of the bottom bar if one or more of the components within it should render
+  var shouldShowBottomBar = !isLimitReached || (slots === null || slots === void 0 ? void 0 : slots.left) || (slots === null || slots === void 0 ? void 0 : slots.right);
   var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
@@ -142,7 +146,10 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && ___EmotionJSX(Button, {
+  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, (slots === null || slots === void 0 ? void 0 : slots.left) && (slots === null || slots === void 0 ? void 0 : slots.left), !isLimitReached && ___EmotionJSX(Button, {
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
@@ -153,7 +160,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
-  }, addButtonLabel)));
+  }, addButtonLabel)), (slots === null || slots === void 0 ? void 0 : slots.right) && (slots === null || slots === void 0 ? void 0 : slots.right)));
 });
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add',

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, Box, Item, SelectField, TextField } from '../../index';
+import { ArrayField, ArrayFieldDeleteButton, Box, Button, Item, SelectField, Text, TextField } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import ArrayFieldReadme from './ArrayField.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -305,4 +305,66 @@ export var Customizations = function Customizations(_ref5) {
       }, otherFieldProps)));
     }
   }, args));
+};
+export var WithBothSlots = function WithBothSlots(_ref6) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+  var LeftSlot = ___EmotionJSX(Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, "Left slot"));
+  var RightSlot = ___EmotionJSX(Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, "Right slot"));
+  return ___EmotionJSX(ArrayField, _extends({
+    defaultValue: defaultData,
+    sx: {
+      width: '450px'
+    },
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    slots: {
+      left: LeftSlot,
+      right: RightSlot
+    },
+    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/lib/components/ArrayField/ArrayField.test.js

@@ -224,4 +224,30 @@ test('displays max size label if provided', function () {
   });
   expect(screen.queryByText('+ Add')).not.toBeInTheDocument();
   expect(screen.getByText(maxSizeText)).toBeInTheDocument();
+});
+test('renders left slot content', function () {
+  var leftSlotContent = ___EmotionJSX("div", {
+    "data-testid": "left-slot"
+  }, "Left Slot Content");
+  getComponent({
+    slots: {
+      left: leftSlotContent
+    }
+  });
+  var leftSlot = screen.getByTestId('left-slot');
+  expect(leftSlot).toBeInTheDocument();
+  expect(leftSlot).toHaveTextContent('Left Slot Content');
+});
+test('renders right slot content', function () {
+  var rightSlotContent = ___EmotionJSX("div", {
+    "data-testid": "right-slot"
+  }, "Right Slot Content");
+  getComponent({
+    slots: {
+      right: rightSlotContent
+    }
+  });
+  var rightSlot = screen.getByTestId('right-slot');
+  expect(rightSlot).toBeInTheDocument();
+  expect(rightSlot).toHaveTextContent('Right Slot Content');
 });

package/package.json

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