@pingux/astro 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.1...@pingux/astro@1.3.0) (2022-02-23)
+
+
+### Bug Fixes
+
+* [UIP-4969] Update astro tab font size ([7af5410](https://gitlab.corp.pingidentity.com/ux/pingux/commit/7af54107825154d795ecb97143fc24364c9b225c))
+* [UIP-5146] Loader Story Update - Change "Loader With Most Common Color" to "Custom Color" ([78fbdd9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/78fbdd938ce5b0a3f87f7821599caf3967c3389b))
+* [UIP-5150] Modal Storybook Improvements ([4a9bd28](https://gitlab.corp.pingidentity.com/ux/pingux/commit/4a9bd28aa9f804cd51cc3a89fd0467ddfd3a2327))
+* [UIP-5225] Add accessible theme for CodeView using JS styles ([6659da6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6659da6743dd68886750d3c58465b36ad6b551c0))
+* [UIP-5281] NavBar improvements and design review changes ([f8bd0ac](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f8bd0acd6bcedfc92ac7a6615e4b79b19d1fbe9e))
+
+
+### Features
+
+* [UIP-4607] Array field component ([8cca040](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8cca04033e330af5838b38f45e441464900db810))
+* [UIP-5228] Add Storysource and Console addons to Astro ([a96de8c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a96de8cf5c557e74b400ada232caf58974e927cb))
+
+
+
+
+
 ## [1.2.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.0...@pingux/astro@1.2.1) (2022-02-16)
 
 

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -42,6 +42,8 @@ var _grid = require("@react-stately/grid");
 
 var _grid2 = require("@react-aria/grid");
 
+var _utils = require("@react-aria/utils");
+
 var _list = require("@react-stately/list");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -82,7 +84,8 @@ exports.collectionTypes = collectionTypes;
 var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context2;
 
-  var disabledKeys = props.disabledKeys;
+  var disabledKeys = props.disabledKeys,
+      containerProps = props.containerProps;
   var accordionGridRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -163,7 +166,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, gridProps, {
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
     ref: accordionGridRef
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
@@ -206,6 +209,9 @@ AccordionGridGroup.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
 
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: _propTypes["default"].shape({}),
+
   /** Defines a string value that labels the current element. */
   'aria-label': _propTypes["default"].string,
 

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -16,6 +16,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("@react-aria/utils");
@@ -40,7 +42,8 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var item = props.item,
       className = props.className,
       children = props.children,
-      isSelected = props.isSelected;
+      isSelected = props.isSelected,
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
 
   var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
       state = _useAccordionGridCont.state;
@@ -78,7 +81,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     isSelected: isSelected,
     className: classNames,
     "aria-label": ariaLabel
-  }), children);
+  }, others), children);
 });
 AccordionGridItemBody.propTypes = {
   isSelected: _propTypes["default"].bool,

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -68,13 +68,18 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     node: cellNode,
     focusMode: 'cell'
   }, state, cellRef),
-      gridCellProps = _useGridCell.gridCellProps,
-      isPressed = _useGridCell.isPressed;
+      gridCellProps = _useGridCell.gridCellProps;
 
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
+  var _usePress = (0, _interactions.usePress)({
+    ref: cellRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
   var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
@@ -84,7 +89,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = (0, _utils.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,

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

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+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 _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uuid = require("uuid");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context4; (0, _forEach["default"])(_context4 = ownKeys(Object(source))).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var ArrayField = function ArrayField(_ref) {
+  var _context2;
+
+  var addButtonLabel = _ref.addButtonLabel,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      label = _ref.label,
+      helperText = _ref.helperText,
+      status = _ref.status,
+      onAdd = _ref.onAdd,
+      onChange = _ref.onChange,
+      onDelete = _ref.onDelete,
+      renderField = _ref.renderField,
+      others = (0, _objectWithoutProperties2["default"])(_ref, ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField"]);
+  var isControlled = value !== undefined;
+  var createEmptyField = (0, _react.useCallback)(function () {
+    return {
+      id: (0, _uuid.v4)(),
+      value: ''
+    };
+  }, []);
+
+  var _useState = (0, _react.useState)(defaultValue || [createEmptyField()]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      fieldValues = _useState2[0],
+      setFieldValues = _useState2[1];
+
+  var mapArrayFieldWithNewValue = (0, _react.useCallback)(function (arrValues, newValue, fieldId) {
+    return (0, _map["default"])(arrValues).call(arrValues, function (fieldValue) {
+      if (fieldValue.id === fieldId) {
+        return _objectSpread(_objectSpread({}, fieldValue), {}, {
+          value: newValue
+        });
+      }
+
+      return fieldValue;
+    });
+  }, []);
+  var onFieldValueChange = (0, _react.useCallback)(function (event, fieldId) {
+    var tempValue = event; // Checks if value receieved is a key or event
+
+    if (typeof event !== 'string') {
+      tempValue = event.target.value;
+    }
+
+    if (isControlled) {
+      onChange(mapArrayFieldWithNewValue(value, tempValue, fieldId));
+    } else {
+      setFieldValues(function (oldValues) {
+        return mapArrayFieldWithNewValue(oldValues, tempValue, fieldId);
+      });
+    }
+  }, [isControlled, mapArrayFieldWithNewValue, onChange, value]);
+  var onFieldDelete = (0, _react.useCallback)(function (fieldId) {
+    if (isControlled) {
+      onDelete(fieldId);
+    } else {
+      setFieldValues(function (oldValues) {
+        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
+          var id = _ref2.id;
+          return id !== fieldId;
+        });
+      });
+    }
+  }, [isControlled, onDelete]);
+  var onFieldAdd = (0, _react.useCallback)(function () {
+    if (onAdd) {
+      return onAdd();
+    }
+
+    return setFieldValues(function (oldValues) {
+      var _context;
+
+      return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
+    });
+  }, [createEmptyField, onAdd]);
+  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Text["default"], {
+    variant: "label"
+  }, label), (0, _react2.jsx)(_Box["default"], {
+    as: "ul",
+    pl: "0"
+  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref3) {
+    var id = _ref3.id,
+        onComponentRender = _ref3.onComponentRender,
+        fieldValue = _ref3.fieldValue,
+        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref3, ["id", "onComponentRender", "fieldValue"]);
+    var isDisabled = (value || fieldValues).length === 1;
+    return (0, _react2.jsx)(_Box["default"], {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+  })), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText), (0, _react2.jsx)(_Button["default"], {
+    "aria-label": "Add field",
+    variant: "text",
+    onPress: onFieldAdd,
+    sx: {
+      width: 'fit-content'
+    }
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    color: "active"
+  }, addButtonLabel)));
+};
+
+ArrayField.propTypes = {
+  /** Label for add button */
+  addButtonLabel: _propTypes["default"].string,
+
+  /** The default value for the array input field (uncontrolled). */
+  defaultValue: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    value: _propTypes["default"].string
+  })),
+
+  /** The default value of the array input field (controlled). */
+  value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    value: _propTypes["default"].string
+  })),
+
+  /** The rendered label for the field. */
+  label: _propTypes["default"].node,
+
+  /** Text to display before add button. Useful for errors or other info. */
+  helperText: _propTypes["default"].node,
+
+  /** Callback for changing array field data  */
+  onChange: _propTypes["default"].func,
+
+  /** Callback for adding new empty field */
+  onAdd: _propTypes["default"].func,
+
+  /** Callback for deleting a field */
+  onDelete: _propTypes["default"].func,
+
+  /** Render prop to display an input field */
+  renderField: _propTypes["default"].func,
+
+  /** Determines the helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};
+ArrayField.defaultProps = {
+  addButtonLabel: '+ Add'
+};
+var _default = ArrayField;
+exports["default"] = _default;

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

@@ -0,0 +1,223 @@
+"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.Controlled = exports.Uncontrolled = exports["default"] = void 0;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _uuid = require("uuid");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/ArrayField',
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      defaultValue: 'Array field label',
+      control: {
+        type: 'text'
+      }
+    },
+    helperText: {
+      defaultValue: 'Helper text info...',
+      control: {
+        type: 'text'
+      }
+    },
+    addButtonLabel: {
+      defaultValue: '+ Add field',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var defaultData = [{
+  id: (0, _uuid.v4)(),
+  value: 'Hello'
+}, {
+  id: (0, _uuid.v4)(),
+  value: 'World'
+}];
+
+var Uncontrolled = function Uncontrolled(_ref) {
+  var args = (0, _extends2["default"])({}, _ref);
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+    defaultValue: defaultData,
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (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));
+    },
+    sx: {
+      width: '400px'
+    }
+  }, args));
+};
+
+exports.Uncontrolled = Uncontrolled;
+
+var Controlled = function Controlled() {
+  var defaultDataSelectField = [{
+    id: (0, _uuid.v4)(),
+    fieldValue: 'red',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+        key: "red"
+      }, "Red"), (0, _react2.jsx)(_index.Item, {
+        key: "blue"
+      }, "Blue"), (0, _react2.jsx)(_index.Item, {
+        key: "yellow"
+      }, "Yellow")));
+    }
+  }, {
+    id: (0, _uuid.v4)(),
+    fieldValue: 'black',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(key) {
+          return onFieldValueChange(key, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+        key: "orange"
+      }, "Orange"), (0, _react2.jsx)(_index.Item, {
+        key: "purple"
+      }, "Purple"), (0, _react2.jsx)(_index.Item, {
+        key: "black"
+      }, "Black")));
+    }
+  }];
+  var defaultEmptyField = {
+    id: (0, _uuid.v4)(),
+    fieldValue: 'blue',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+        key: "blue"
+      }, "Blue"), (0, _react2.jsx)(_index.Item, {
+        key: "teal"
+      }, "Teal"), (0, _react2.jsx)(_index.Item, {
+        key: "turquoise"
+      }, "Turquoise")));
+    }
+  };
+
+  var _React$useState = _react["default"].useState(defaultDataSelectField),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      fieldValues = _React$useState2[0],
+      setFieldValues = _React$useState2[1];
+
+  function handleOnChange(values) {
+    setFieldValues(values);
+  }
+
+  function handleOnAdd() {
+    setFieldValues(function (oldValues) {
+      var _context;
+
+      return (0, _concat["default"])(_context = []).call(_context, oldValues, [defaultEmptyField]);
+    });
+  }
+
+  function handleOnDelete(fieldId) {
+    setFieldValues(function (oldValues) {
+      return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
+        var id = _ref2.id;
+        return id !== fieldId;
+      });
+    });
+  }
+
+  return (0, _react2.jsx)(_index.ArrayField, {
+    value: fieldValues,
+    helperText: "Here is some helpful text...",
+    onAdd: handleOnAdd,
+    onChange: handleOnChange,
+    onDelete: handleOnDelete,
+    sx: {
+      width: '400px'
+    }
+  });
+};
+
+exports.Controlled = Controlled;