@pingux/astro 1.2.0-alpha.11 → 1.2.0-alpha.15

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -38,6 +38,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("@react-aria/utils");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -63,7 +65,8 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
       isUnresizable = props.isUnresizable,
       rows = props.rows,
-      status = props.status;
+      status = props.status,
+      slots = props.slots;
   var statusClasses = {
     isUnresizable: isUnresizable
   };
@@ -77,6 +80,9 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var textAreaRef = (0, _react.useRef)();
   var labelRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)();
+  var inputContainerRef = (0, _react.useRef)();
+  var slotContainer = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -89,6 +95,24 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
   };
+  /* istanbul ignore next */
+
+
+  var resizeSlotContainer = function resizeSlotContainer() {
+    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+  };
+
+  var onResize = (0, _react.useCallback)(function () {
+    /* istanbul ignore next */
+    if (slots === null || slots === void 0 ? void 0 : slots.inContainer) {
+      resizeSlotContainer();
+    }
+  }, [slotContainer]);
+  (0, _utils.useResizeObserver)({
+    ref: textAreaRef,
+    onResize: onResize
+  });
+  (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
   var _useLabelHeight = (0, _hooks.useLabelHeight)({
     labelRef: labelRef,
@@ -100,18 +124,22 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     labelMode: props.labelMode
   });
   (0, _react.useEffect)(function () {
+    var thisRef = textAreaRef.current;
+
     if (!props.isUnresizable && props.labelMode === 'float') {
-      textAreaRef.current.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     }
 
     return function () {
-      textAreaRef.current.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
+      thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
-  }, []);
+  }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
-    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
+    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
+    ref: containerRef,
+    maxWidth: "100%"
   }), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
     ref: labelRef
   }, fieldLabelProps, {
@@ -119,12 +147,23 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       gridRow: '1/5'
     }
   })), (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
     variant: "forms.input.container",
-    className: fieldControlProps.className
+    className: fieldControlProps.className,
+    minWidth: "40px",
+    maxWidth: "100%",
+    ref: inputContainerRef
   }, (0, _react2.jsx)(_TextArea["default"], (0, _extends2["default"])({
     ref: textAreaRef,
     rows: rows
-  }, fieldControlProps))), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, fieldControlProps, {
+    sx: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && {
+      paddingRight: '35px'
+    }
+  })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && (0, _react2.jsx)(_Box["default"], {
+    variant: "boxes.textFieldInContainerSlot",
+    ref: slotContainer
+  }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status
   }, helperText));
 });
@@ -219,7 +258,13 @@ TextAreaField.propTypes = {
   controlProps: _propTypes["default"].shape({}),
 
   /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({})
+  labelProps: _propTypes["default"].shape({}),
+
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: _propTypes["default"].node
+  })
 };
 TextAreaField.defaultProps = {
   hasAutoFocus: false,

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

@@ -10,16 +10,24 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.MaxLength = exports.WithoutStatusIndicator = exports.Error = exports.Unresizable = exports.Rows = exports.Required = exports.ReadOnly = exports.Disabled = exports.Controlled = exports.FloatLabel = exports.Default = exports["default"] = void 0;
+exports.MaxLength = exports.WithoutStatusIndicator = exports.Error = exports.Unresizable = exports.Rows = exports.Required = exports.ReadOnly = exports.Disabled = exports.Controlled = exports.FloatLabel = exports.WithSlots = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
+
 var _ = _interopRequireDefault(require("."));
 
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _constants = require("../Label/constants");
@@ -83,6 +91,11 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var IconSlot = (0, _react2.jsx)(_Box["default"], {
+  isRow: true
+}, (0, _react2.jsx)(_Icon["default"], {
+  icon: _SearchIcon["default"]
+}));
 
 var Default = function Default(args) {
   return (0, _react2.jsx)(_["default"], args);
@@ -90,6 +103,25 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
+var WithSlots = function WithSlots(args) {
+  return (// This is an example of a slot that can be passed into the component
+    // const IconSlot = (
+    //   <Box isRow>
+    //     <Icon
+    //       icon={SearchIcon}
+    //     />
+    //   </Box>
+    // );
+    (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
+      slots: {
+        inContainer: IconSlot
+      }
+    }))
+  );
+};
+
+exports.WithSlots = WithSlots;
+
 var FloatLabel = function FloatLabel() {
   return (0, _react2.jsx)(_["default"], {
     label: "Example label",

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

@@ -153,4 +153,16 @@ test('form wrapper will have a max label column width when custom width set', fu
   var textAreaContainer = _testWrapper.screen.getByTestId(testId);
 
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 120px auto');
+});
+test('providing slot props causes slot to render', function () {
+  var slot = (0, _react3.jsx)("p", {
+    "data-testid": "testSlot"
+  }, "testText");
+  var slots = {
+    inContainer: slot
+  };
+  getComponent({
+    slots: slots
+  });
+  expect(_testWrapper.screen.getByTestId('testSlot')).toBeInTheDocument();
 });

package/lib/cjs/context/AccordionGridContext/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.useAccordionGridContext = exports.AccordionGridContext = void 0;
+
+var _react = require("react");
+
+var AccordionGridContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.AccordionGridContext = AccordionGridContext;
+
+var useAccordionGridContext = function useAccordionGridContext() {
+  return (0, _react.useContext)(AccordionGridContext);
+};
+
+exports.useAccordionGridContext = useAccordionGridContext;

package/lib/cjs/hooks/useField/useField.js

@@ -145,6 +145,11 @@ var useField = function useField() {
       setHasValue(true);
     } else {
       setHasValue(false);
+    } // adding this function resolves the error brought up in UIP-5116
+
+
+    if (e.persist) {
+      e.persist();
     } // Make sure to call the original onChange event
 
 

package/lib/cjs/hooks/useRockerButton/useRockerButton.js

@@ -38,24 +38,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var useRockerButton = function useRockerButton(props, state, ref) {
   var item = props.item,
-      propsDisabled = props.isDisabled;
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected;
   var key = item.key;
-  var manager = state.selectionManager,
-      selectedKey = state.selectedKey;
-  var isSelected = key === selectedKey;
+  var manager = state.selectionManager;
 
   var _useSelectableItem = (0, _selection.useSelectableItem)({
+    isDisabled: isDisabled,
     selectionManager: manager,
     key: key,
     ref: ref
   }),
       itemProps = _useSelectableItem.itemProps;
 
-  var isDisabled = propsDisabled || state.disabledKeys.has(key);
   var rockerButtonId = (0, _utils.useId)();
   return {
     rockerButtonProps: _objectSpread(_objectSpread({}, itemProps), {}, {
-      isDisabled: isDisabled,
       id: rockerButtonId,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled || undefined

package/lib/cjs/layouts/ListLayout.stories.js

@@ -574,7 +574,7 @@ var Default = function Default() {
     mr: "md",
     "aria-label": "Save Button"
   }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: viewItem,
     "aria-label": "Cancel Button"
   }, "Cancel"))), editConfigurationVisible && (0, _react2.jsx)(_index.OverlayPanel, {
@@ -704,7 +704,7 @@ var Default = function Default() {
     mr: "md",
     "aria-label": "Save Button"
   }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: viewItem,
     "aria-label": "Cancel Button"
   }, "Cancel"))), addItemVisible && (0, _react2.jsx)(_index.OverlayPanel, {
@@ -790,7 +790,7 @@ var Default = function Default() {
     isRow: true,
     sx: buttonBarStyles
   }, (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: resetListItem,
     mr: "md",
     "aria-label": "Cancel Button"
@@ -851,7 +851,7 @@ var Default = function Default() {
     isRow: true,
     sx: buttonBarStyles
   }, (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: resetListItem,
     mr: "md"
   }, "Cancel"), (0, _react2.jsx)(_index.Button, {
@@ -873,11 +873,11 @@ var Default = function Default() {
     pt: "lg",
     mr: "auto"
   }, (0, _react2.jsx)(_index.Button, {
-    variant: "danger",
+    variant: "critical",
     mr: "md",
     onPress: deleteItem
   }, "Delete"), (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: function onPress() {
       return setIsDeleting(false);
     }

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

@@ -153,7 +153,7 @@ var Default = function Default() {
       title: "Text Field"
     }, otherFieldProps)));
   }), (0, _react2.jsx)(_index.Button, {
-    variant: "text",
+    variant: "link",
     onPress: onFieldAdd,
     role: "button",
     title: "Add Field Button",

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -118,7 +118,9 @@ var Default = function Default() {
       setEditOverviewVisible = _React$useState4[1];
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: setStaticOverviewVisible
+    onPress: function onPress() {
+      return setStaticOverviewVisible(true);
+    }
   }, "Open Panel"), staticOverviewVisible && (0, _react2.jsx)(_OverlayPanel["default"], {
     isOpen: staticOverviewVisible
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
@@ -133,7 +135,9 @@ var Default = function Default() {
     "aria-label": "edit",
     variant: "inverted",
     ml: "xs",
-    onPress: setEditOverviewVisible
+    onPress: function onPress() {
+      return setEditOverviewVisible(true);
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: 14
@@ -457,7 +461,7 @@ var Default = function Default() {
     onPress: function onPress() {
       return setEditOverviewVisible(false);
     },
-    variant: "text",
+    variant: "link",
     "aria-label": "cancel"
   }, "Cancel"))))));
 };

package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js

@@ -72,7 +72,7 @@ var Default = function Default() {
       label: fieldName,
       isDisabled: isDisabled
     }), (0, _react2.jsx)(_index.Button, {
-      variant: "text",
+      variant: "link",
       mb: "xs",
       ml: "md",
       onPress: function onPress() {

package/lib/cjs/styles/variants/boxes.js

@@ -139,6 +139,14 @@ var inputInContainerSlot = {
   top: '50%',
   transform: 'translateY(-50%)'
 };
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
 var copy = {
   alignItems: 'center',
   width: 'max-content',
@@ -317,6 +325,7 @@ var _default = {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,

package/lib/cjs/styles/variants/buttons.js

@@ -397,6 +397,7 @@ var chipDeleteButton = {
 };
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
@@ -408,6 +409,7 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
+    bg: 'active',
     color: 'white'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -18,11 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { useCollator, useLocale } from '@react-aria/i18n';
-import { AccordionGridContext } from './AccordionGridContext';
+import { AccordionGridContext } from '../../context/AccordionGridContext';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -46,9 +45,7 @@ export var collectionTypes = {
 var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
-  var disabledKeys = props.disabledKeys,
-      selectedKeys = props.selectedKeys,
-      onSelectionChange = props.onSelectionChange;
+  var disabledKeys = props.disabledKeys;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
@@ -73,9 +70,11 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       columnCount: 1,
       items: _mapInstanceProperty(_context = _Array$from(collection)).call(_context, function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
+          key: "row-".concat(item.key),
           hasChildNodes: true,
           childNodes: [{
-            key: "cell-".concat(item.key),
+            key: item.key,
+            // use key for first cell, fixes selection after changes from UIP-5170
             type: 'cell',
             index: 0,
             value: null,
@@ -101,12 +100,11 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [collection]);
   var state = useGridState(_objectSpread(_objectSpread({}, props), {}, {
     disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: 'multiple',
-    onSelectionChange: onSelectionChange,
-    allowsCellSelection: true
-  }));
+    selectionMode: 'multiple'
+  })); // Required to enable header selection
+
+  state.selectionManager.allowsCellSelection = true;
   var keyboardDelegate = useMemo(function () {
     return new GridKeyboardDelegate({
       collection: state.collection,
@@ -119,7 +117,6 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [state, accordionGridRef, direction, collator]);
 
   var _useGrid = useGrid(_objectSpread(_objectSpread({}, props), {}, {
-    isVirtualized: true,
     keyboardDelegate: keyboardDelegate
   }), state, accordionGridRef),
       gridProps = _useGrid.gridProps;
@@ -129,7 +126,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps), {
+  }, ___EmotionJSX(Box, _extends({}, gridProps, {
     ref: accordionGridRef
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
@@ -139,6 +136,27 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   })));
 });
 AccordionGridGroup.propTypes = {
+  /**
+   * The currently selected keys in the collection (uncontrolled).
+   *
+   * `selectedKeys="all"` can be used to select every key.
+   */
+  defaultSelectedKeys: isIterableProp,
+
+  /**
+   * The currently selected keys in the collection (controlled).
+   *
+   * `selectedKeys="all"` can be used to select every key.
+   */
+  selectedKeys: isIterableProp,
+
+  /**
+    * Callback function that fires when the selected key changes.
+    *
+    * `(selectedKeys: Set) => void`
+   */
+  onSelectionChange: PropTypes.func,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
@@ -164,17 +182,7 @@ AccordionGridGroup.propTypes = {
    * Identifies the element (or elements) that provide a detailed, extended description for
    * the object.
   */
-  'aria-details': PropTypes.string,
-
-  /**
-   * The currently selected keys in the collection (controlled).
-   *
-   * `selectedKeys="all"` can be used to select every key.
-   */
-  selectedKeys: isIterableProp,
-
-  /** Callback function that fires when the selected key changes. */
-  onSelectionChange: PropTypes.func
+  'aria-details': PropTypes.string
 };
 AccordionGridGroup.defaultProps = {
   'aria-label': 'accordion'