@pingux/astro 1.2.0-alpha.8 → 1.3.0

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/accordion.js

@@ -1,12 +1,37 @@
 "use strict";
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-_Object$defineProperty(exports, "__esModule", {
+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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+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 _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+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 _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -80,7 +105,6 @@ var accordionGridHeaderNav = {
   flexGrow: 1,
   fontWeight: 0,
   fontSize: '16px',
-  mt: '5px',
   '&.is-focused': {
     outline: 'none',
     boxShadow: 'focus',
@@ -88,13 +112,20 @@ var accordionGridHeaderNav = {
     MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
-    backgroundColor: 'accent.10',
-    boxShadow: 'inset 2px 0 0 0 white'
+    backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
-    backgroundColor: 'accent.10'
+    backgroundColor: 'accent.5'
   }
 };
+
+var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
+  '&.is-selected': {
+    backgroundColor: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+});
+
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -109,6 +140,7 @@ var _default = {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav
+  accordionGridHeaderNav: accordionGridHeaderNav,
+  accordionGridNavItem: accordionGridNavItem
 };
 exports["default"] = _default;

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',
@@ -211,26 +219,6 @@ var expandableRow = {
     }
   }
 };
-var navBar = {
-  height: '100%',
-  width: '230px',
-  position: 'absolute',
-  zIndex: '1',
-  top: '0',
-  left: '0',
-  backgroundColor: 'accent.20',
-  overflowY: 'hidden'
-};
-var navBarSectionContainer = {
-  height: '100%',
-  maxHeight: '100%',
-  overflowY: 'overlay !important'
-};
-var navBarItemHeaderContainer = {
-  flexGrow: 1,
-  alignItems: 'center',
-  maxWidth: '180px'
-};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -317,6 +305,7 @@ var _default = {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
@@ -325,9 +314,6 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox,
-  navBar: navBar,
-  navBarSectionContainer: navBarSectionContainer,
-  navBarItemHeaderContainer: navBarItemHeaderContainer
+  bottomShadowScrollbox: bottomShadowScrollbox
 };
 exports["default"] = _default;

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

@@ -97,8 +97,14 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'accent.10',
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
   }
 };
 var iconButton = {
@@ -397,6 +403,7 @@ var chipDeleteButton = {
 };
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
@@ -408,6 +415,7 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
+    bg: 'active',
     color: 'white'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -561,6 +569,23 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',
@@ -633,6 +658,7 @@ var _default = {
   environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,

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

@@ -7,6 +7,96 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports["default"] = void 0;
+var theme = {
+  plain: {
+    color: '#545454',
+    background: 'none',
+    lineHeight: 1.5,
+    tabSize: 4
+  },
+  styles: [{
+    types: ['prolog', 'constant', 'builtin'],
+    style: {
+      color: 'rgb(189, 147, 249)'
+    }
+  }, {
+    types: ['inserted', 'function'],
+    style: {
+      color: 'rgb(80, 250, 123)'
+    }
+  }, {
+    types: ['deleted'],
+    style: {
+      color: 'rgb(255, 85, 85)'
+    }
+  }, {
+    types: ['changed'],
+    style: {
+      color: 'rgb(255, 184, 108)'
+    }
+  }, {
+    types: ['punctuation', 'symbol'],
+    style: {
+      color: 'rgb(248, 248, 242)'
+    }
+  }, {
+    types: ['string', 'char', 'tag', 'selector'],
+    style: {
+      color: 'rgb(255, 121, 198)'
+    }
+  }, {
+    types: ['keyword', 'variable'],
+    style: {
+      color: 'rgb(189, 147, 249)',
+      fontStyle: 'italic'
+    }
+  }, {
+    types: ['comment'],
+    style: {
+      color: 'rgb(98, 114, 164)'
+    }
+  }, {
+    types: ['attr-name'],
+    style: {
+      color: 'rgb(241, 250, 140)'
+    }
+  }, {
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#696969'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#545454'
+    }
+  }, {
+    types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
+    style: {
+      color: '#007299'
+    }
+  }, {
+    types: ['boolean', 'number', 'operator', 'entity', 'url', 'variable'],
+    style: {
+      color: '#008000'
+    }
+  }, {
+    types: ['selector', 'attr-name', 'char', 'builtin', 'inserted', 'atrule', 'attr-value', 'function', 'string'],
+    style: {
+      color: '#aa5d00'
+    }
+  }, {
+    types: ['keyword', 'regex', 'important'],
+    style: {
+      color: '#d91e18'
+    }
+  }, {
+    types: ['keyword'],
+    style: {
+      fontStyle: 'normal'
+    }
+  }]
+};
 var wrapper = {
   bg: 'accent.99',
   border: '1px solid',
@@ -71,6 +161,7 @@ var lineNo = {
   color: 'white'
 };
 var _default = {
+  theme: theme,
   wrapper: wrapper,
   lineNo: lineNo
 };

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

@@ -0,0 +1,68 @@
+"use strict";
+
+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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+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 _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _accordion = _interopRequireDefault(require("./accordion"));
+
+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 _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var container = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var itemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
+var sectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+
+var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {
+  pl: '0'
+});
+
+var _default = {
+  container: container,
+  itemHeaderContainer: itemHeaderContainer,
+  sectionContainer: sectionContainer,
+  sectionBody: sectionBody
+};
+exports["default"] = _default;

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

@@ -50,9 +50,10 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  mt: 'sm',
+  mb: '20px',
   ml: '45px',
   width: 'calc(100% - 75px)',
-  mb: '15px',
   backgroundColor: 'neutral.60'
 });
 

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

@@ -48,7 +48,7 @@ var wordWrap = {
 };
 
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'md',
+  fontSize: 'sm',
   fontWeight: 1,
   mb: 6,
   color: 'neutral.40',
@@ -148,6 +148,8 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitle = {
+  my: 'md',
+  ml: 'md',
   fontWeight: 3,
   fontSize: '11px',
   color: 'accent.80'

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

@@ -54,6 +54,8 @@ var _menuItem = _interopRequireDefault(require("./menuItem"));
 
 var _messages = _interopRequireDefault(require("./messages"));
 
+var _navBar = _interopRequireDefault(require("./navBar"));
+
 var _numberField = _interopRequireDefault(require("./numberField"));
 
 var _overlayPanel = _interopRequireDefault(require("./overlayPanel"));
@@ -89,6 +91,7 @@ var _default = _objectSpread(_objectSpread({
   menuItem: _menuItem["default"],
   messages: _messages["default"],
   modal: _modal["default"],
+  navBar: _navBar["default"],
   numberField: _numberField["default"],
   overlayPanel: _overlayPanel["default"],
   popoverMenu: _popoverMenu["default"],

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -22,7 +22,7 @@ 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';
@@ -47,8 +47,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      selectedKeys = props.selectedKeys,
-      onSelectionChange = props.onSelectionChange;
+      containerProps = props.containerProps;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
@@ -73,9 +72,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 +102,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 +119,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 +128,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps), {
+  }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, containerProps), {
     ref: accordionGridRef
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
@@ -139,6 +138,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.
@@ -151,6 +171,9 @@ AccordionGridGroup.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
 
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: PropTypes.shape({}),
+
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
 
@@ -164,17 +187,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'