@pingux/astro 1.2.0-alpha.8 → 1.3.0

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ColorBlockButton = exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+exports.FilterButton = exports.ColorBlockButton = exports.InlineButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -20,16 +20,12 @@ var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _ = _interopRequireDefault(require("."));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _Text = _interopRequireDefault(require("../Text"));
+var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
 
 var _variants = require("../../utils/devUtils/constants/variants");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 // removing the iconButton variants from this story.
@@ -41,7 +37,7 @@ delete variants.INVERTED; // add designer approved variants for devs to use here
 var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
-  component: _["default"],
+  component: _index.Button,
   argTypes: {
     variant: {
       control: {
@@ -74,13 +70,13 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_index.Button, args);
 };
 
 exports.Default = Default;
 
 var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     isDisabled: true
   }, "Button Text");
 };
@@ -88,12 +84,12 @@ var Disabled = function Disabled() {
 exports.Disabled = Disabled;
 
 var TextIconButton = function TextIconButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm"
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _AddCircleIcon["default"],
     mr: "sm",
     color: "active",
@@ -103,21 +99,8 @@ var TextIconButton = function TextIconButton() {
 
 exports.TextIconButton = TextIconButton;
 
-var TextButton = function TextButton() {
-  return (0, _react2.jsx)(_["default"], {
-    mb: "sm",
-    variant: "text",
-    "aria-label": "Add option"
-  }, (0, _react2.jsx)(_Text["default"], {
-    variant: "label",
-    color: "active"
-  }, " + Add Option"));
-};
-
-exports.TextButton = TextButton;
-
 var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "inline"
   }, "Inline");
@@ -129,14 +112,14 @@ var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
       props = (0, _objectWithoutProperties2["default"])(args, ["isConfigured"]);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
-  }), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "buttonTitle"
-  }, "Title"), (0, _react2.jsx)(_Text["default"], {
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
     variant: "buttonSubtitle"
-  }, "Info")), (0, _react2.jsx)(_Icon["default"], {
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"]
   }));
 };
@@ -151,4 +134,21 @@ ColorBlockButton.story = {
       defaultValue: false
     }
   }
-};
+};
+
+var FilterButton = function FilterButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.SearchField, {
+    "aria-label": "search items"
+  }), (0, _react2.jsx)(_index.Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _FilterIcon["default"]
+  })));
+};
+
+exports.FilterButton = FilterButton;

package/lib/cjs/components/CodeView/CodeView.js

@@ -50,12 +50,12 @@ var _utils = require("@react-aria/utils");
 
 var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
 
-var _github = _interopRequireDefault(require("prism-react-renderer/themes/github"));
-
 var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
+var _codeView = _interopRequireDefault(require("../../styles/variants/codeView"));
+
 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; }
@@ -96,7 +96,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
-    theme: _github["default"],
+    theme: _codeView["default"].theme,
     code: (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '',
     language: language
   }), function (_ref) {

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -313,9 +313,11 @@ EnvironmentBreadcrumb.propTypes = {
   /** The list of environments. */
   items: _isIterable.isIterableProp,
 
-  /** Filter function to generate a filtered list of nodes.
-   * (nodes: Iterable<Node>) => Iterable<Node>
-   * */
+  /**
+   * Filter function to generate a filtered list of nodes.
+   *
+   * `(nodes: Iterable<Node>) => Iterable<Node>`
+   */
   itemsFilter: _propTypes["default"].func,
 
   /** Callback function that fires when the dropdown is opened. */

package/lib/cjs/components/Link/Link.js

@@ -37,7 +37,8 @@ var _react2 = require("@emotion/react");
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled"]);
+      onPress = props.onPress,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "onPress"]);
   var linkRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */

package/lib/cjs/components/ListView/ListView.js

@@ -45,8 +45,6 @@ var _grid = require("@react-stately/grid");
 
 var _grid2 = require("@react-aria/grid");
 
-var _utils = require("@react-aria/utils");
-
 var _layout = require("@react-stately/layout");
 
 var _list = require("@react-stately/list");
@@ -103,12 +101,9 @@ function useListLayout(state) {
 }
 
 var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var disabledKeys = props.disabledKeys,
-      loadingState = props.loadingState,
-      selectedKeys = props.selectedKeys,
+  var loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
-      onSelectionChange = props.onSelectionChange,
-      selectionMode = props.selectionMode;
+      selectionStyle = props.selectionStyle;
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
 
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -160,11 +155,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }, [collection]);
   var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
-    disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: selectionMode,
-    onSelectionChange: onSelectionChange
+    focusMode: 'cell',
+    selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
   var layout = useListLayout(state);
   var keyboardDelegate = (0, _react.useMemo)(function () {
@@ -199,7 +192,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps), {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,
@@ -266,6 +259,9 @@ ListView.propTypes = {
   /** The type of selection that is allowed in the collection. */
   selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
 
+  /** */
+  selectionStyle: _propTypes["default"].oneOf(['highlight', undefined]),
+
   /** Callback function that fires when the selected key changes. */
   onSelectionChange: _propTypes["default"].func,
 
@@ -278,7 +274,7 @@ ListView.propTypes = {
 };
 ListView.defaultProps = {
   'aria-label': 'listView',
-  'selectionMode': 'single'
+  selectionMode: 'single'
 };
 var _default = ListView;
 exports["default"] = _default;

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

@@ -773,6 +773,9 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  chromatic: {
+    delay: 5000
   }
 };
 

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -28,6 +28,8 @@ var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
 
+var _selection = require("@react-aria/selection");
+
 var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -40,7 +42,9 @@ var ListViewItem = function ListViewItem(props) {
   var _context;
 
   var item = props.item,
-      _props$item$props = props.item.props,
+      _props$item = props.item,
+      key = _props$item.key,
+      _props$item$props = _props$item.props,
       listItemProps = _props$item$props.listItemProps,
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
@@ -75,7 +79,7 @@ var ListViewItem = function ListViewItem(props) {
   }, state, rowRef),
       raRowProps = _useGridRow.rowProps;
 
-  var isSelected = raRowProps['aria-selected'];
+  var isSelected = state.selectionManager.isSelected(item.key);
 
   var _useGridCell = (0, _grid.useGridCell)({
     node: cellNode,
@@ -83,7 +87,15 @@ var ListViewItem = function ListViewItem(props) {
   }, state, cellRef),
       gridCellProps = _useGridCell.gridCellProps;
 
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var _useSelectableItem = (0, _selection.useSelectableItem)({
+    isDisabled: isDisabled,
+    selectionManager: state.selectionManager,
+    key: key,
+    ref: cellRef
+  }),
+      selectableItemProps = _useSelectableItem.itemProps;
+
+  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isHovered,

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.LoaderWithMostCommonColor = exports.Default = exports["default"] = void 0;
+exports.CustomColor = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -54,10 +54,10 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var LoaderWithMostCommonColor = function LoaderWithMostCommonColor() {
+var CustomColor = function CustomColor() {
   return (0, _react2.jsx)(_["default"], {
     color: "neutral.60"
   });
 };
 
-exports.LoaderWithMostCommonColor = LoaderWithMostCommonColor;
+exports.CustomColor = CustomColor;

package/lib/cjs/components/Modal/Modal.js

@@ -121,6 +121,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     className: classNames,
     variant: "modal.container"

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -10,13 +8,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.DarkVariant = exports.Default = exports["default"] = void 0;
+exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _hooks = require("../../hooks");
 
@@ -32,7 +28,7 @@ var _default = {
       control: {
         type: 'text'
       },
-      defaultValue: 'Delete Group'
+      defaultValue: 'Continue'
     },
     role: {},
     id: {
@@ -40,7 +36,9 @@ var _default = {
         type: 'text'
       }
     },
-    hasCloseButton: {},
+    hasCloseButton: {
+      defaultValue: true
+    },
     isClosedOnBlur: {},
     isDismissable: {},
     isKeyboardDismissDisabled: {},
@@ -90,16 +88,6 @@ exports["default"] = _default;
 
 var Default = function Default(args) {
   var state = (0, _hooks.useModalState)();
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onTextFieldChange = (0, _react.useCallback)(function (_ref) {
-    var value = _ref.target.value;
-    setInputValue(value.toUpperCase());
-  }, []);
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
@@ -110,64 +98,21 @@ var Default = function Default(args) {
       onClose: state.close
     }), (0, _react2.jsx)(_index.Text, {
       pt: "lg"
-    }, "Deleting a group ", (0, _react2.jsx)("strong", null, "\"Marketing\""), " cannot be undone. Users will lose access to the applications."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
-    }, "Type the word DELETE to confirm deletion of this group"), (0, _react2.jsx)(_index.TextField, {
-      value: inputValue,
-      onChange: onTextFieldChange,
-      "aria-label": "user input"
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      pt: "lg",
-      mr: "auto"
-    }, (0, _react2.jsx)(_index.Button, {
-      variant: "critical",
-      onPress: state.close,
-      mr: "md",
-      isDisabled: Boolean(inputValue !== 'DELETE'),
-      "aria-label": "Delete"
-    }, "Delete"), (0, _react2.jsx)(_index.Button, {
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
-  );
-};
-
-exports.Default = Default;
-
-var DarkVariant = function DarkVariant() {
-  var state = (0, _hooks.useModalState)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when a modal opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.open,
-      "aria-label": "Open modal"
-    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-      variant: "modal.dark",
-      title: "Question",
-      isOpen: state.isOpen,
-      onClose: state.close,
-      isDismissable: true,
-      hasCloseButton: true
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "subtitle",
-      color: "white",
-      pt: "lg"
-    }, "Would you ever really just click a button?"), (0, _react2.jsx)(_index.Box, {
+    }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       pt: "lg",
       mr: "auto"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
-      mr: "md",
       onPress: state.close,
-      "aria-label": "Yes"
-    }, "Yes"), (0, _react2.jsx)(_index.Button, {
-      variant: "text",
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), (0, _react2.jsx)(_index.Button, {
+      variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
     }, "Cancel"))))
   );
 };
 
-exports.DarkVariant = DarkVariant;
+exports.Default = Default;

package/lib/cjs/components/NavBar/NavBar.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -10,7 +12,13 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
@@ -27,12 +35,30 @@ var _react2 = require("@emotion/react");
  *
  */
 var NavBar = function NavBar(props) {
-  return (0, _react2.jsx)(_Box["default"], {
-    variant: "boxes.navBar",
+  var defaultSelectedKeys = props.defaultSelectedKeys;
+
+  var _useState = (0, _react.useState)(defaultSelectedKeys),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
+    value: {
+      selectedKeys: selectedKeys,
+      setSelectedKeys: setSelectedKeys
+    }
+  }, (0, _react2.jsx)(_Box["default"], {
+    variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children);
+  }, props.children));
 };
 
+NavBar.propTypes = {
+  defaultSelectedKeys: _isIterable.isIterableProp
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
 var _default = NavBar;
 exports["default"] = _default;