@pingux/astro 1.2.0-alpha.8 → 1.3.0

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning, useDeprecationWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -37,7 +37,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
+      variant = props.variant,
+      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"]);
 
   var buttonRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -69,7 +70,17 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  useDeprecationWarning('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  useDeprecationWarning('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  useDeprecationWarning('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
+    isActive: props.variant === 'text'
+  });
   var ariaLabel = props['aria-label'];
+  useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
   return ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
     ref: buttonRef,
@@ -80,7 +91,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    }
+    },
+    variant: variant
   }, others, mergeProps(hoverProps, focusProps, buttonProps)), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'

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

@@ -3,11 +3,9 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
 import CreateIcon from 'mdi-react/CreateIcon';
-import Box from '../Box';
-import Button from '.';
-import Icon from '../Icon';
-import Text from '../Text';
-import { buttonVariants } from '../../utils/devUtils/constants/variants'; // removing the iconButton variants from this story.
+import FilterIcon from 'mdi-react/FilterIcon';
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import { Box, Button, Icon, SearchField, Text } from '../../index'; // removing the iconButton variants from this story.
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
@@ -69,16 +67,6 @@ export var TextIconButton = function TextIconButton() {
     size: 20
   }), "Add a Form"));
 };
-export var TextButton = function TextButton() {
-  return ___EmotionJSX(Button, {
-    mb: "sm",
-    variant: "text",
-    "aria-label": "Add option"
-  }, ___EmotionJSX(Text, {
-    variant: "label",
-    color: "active"
-  }, " + Add Option"));
-};
 export var InlineButton = function InlineButton() {
   return ___EmotionJSX(Button, {
     mb: "sm",
@@ -110,4 +98,18 @@ ColorBlockButton.story = {
       defaultValue: false
     }
   }
+};
+export var FilterButton = function FilterButton() {
+  return ___EmotionJSX(Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(SearchField, {
+    "aria-label": "search items"
+  }), ___EmotionJSX(Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, ___EmotionJSX(Icon, {
+    icon: FilterIcon
+  })));
 };

package/lib/components/CodeView/CodeView.js

@@ -22,9 +22,9 @@ import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import github from 'prism-react-renderer/themes/github';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
+import codeView from '../../styles/variants/codeView';
 /**
  * Component for code syntax highlighting.
  * Built on top of [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
@@ -61,7 +61,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
-    theme: github,
+    theme: codeView.theme,
     code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
     language: language
   }), function (_ref) {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -271,9 +271,11 @@ EnvironmentBreadcrumb.propTypes = {
   /** The list of environments. */
   items: 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.func,
 
   /** Callback function that fires when the dropdown is opened. */

package/lib/components/Link/Link.js

@@ -12,7 +12,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,
-      others = _objectWithoutProperties(props, ["className", "isDisabled"]);
+      onPress = props.onPress,
+      others = _objectWithoutProperties(props, ["className", "isDisabled", "onPress"]);
 
   var linkRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');

package/lib/components/ListView/ListView.js

@@ -19,7 +19,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo, forwardRef, useRef, useImperativeHandle } from 'react';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
 import { ListLayout } from '@react-stately/layout';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
@@ -58,12 +57,9 @@ export function useListLayout(state) {
   return layout;
 }
 var ListView = /*#__PURE__*/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.LOADING_MORE || loadingState === loadingStates.LOADING;
 
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -115,11 +111,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }, [collection]);
   var state = 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 = useMemo(function () {
@@ -154,7 +148,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(gridProps), {
+  }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,
@@ -221,6 +215,9 @@ ListView.propTypes = {
   /** The type of selection that is allowed in the collection. */
   selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
 
+  /** */
+  selectionStyle: PropTypes.oneOf(['highlight', undefined]),
+
   /** Callback function that fires when the selected key changes. */
   onSelectionChange: PropTypes.func,
 
@@ -233,6 +230,6 @@ ListView.propTypes = {
 };
 ListView.defaultProps = {
   'aria-label': 'listView',
-  'selectionMode': 'single'
+  selectionMode: 'single'
 };
 export default ListView;

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

@@ -734,6 +734,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
   }
 };
 export var MultipleSelection = function MultipleSelection(_ref6) {

package/lib/components/ListViewItem/ListViewItem.js

@@ -6,6 +6,7 @@ import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { useGridCell, useGridRow } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
+import { useSelectableItem } from '@react-aria/selection';
 import { ListViewContext } from '../ListView/ListViewContext';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
@@ -15,7 +16,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,
@@ -51,7 +54,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 = useGridCell({
     node: cellNode,
@@ -59,7 +62,15 @@ var ListViewItem = function ListViewItem(props) {
   }, state, cellRef),
       gridCellProps = _useGridCell.gridCellProps;
 
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var _useSelectableItem = useSelectableItem({
+    isDisabled: isDisabled,
+    selectionManager: state.selectionManager,
+    key: key,
+    ref: cellRef
+  }),
+      selectableItemProps = _useSelectableItem.itemProps;
+
+  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isHovered: isHovered,

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

@@ -31,7 +31,7 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Loader, args);
 };
-export var LoaderWithMostCommonColor = function LoaderWithMostCommonColor() {
+export var CustomColor = function CustomColor() {
   return ___EmotionJSX(Loader, {
     color: "neutral.60"
   });

package/lib/components/Modal/Modal.js

@@ -24,7 +24,7 @@ import Box from '../Box';
 import IconButton from '../IconButton';
 import Icon from '../Icon';
 import Text from '../Text';
-import { useStatusClasses } from '../../hooks';
+import { useStatusClasses, useDeprecationWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
@@ -85,6 +85,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  useDeprecationWarning('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "modal.container"

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

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { useModalState } from '../../hooks';
-import { OverlayProvider, Box, Button, Text, Modal, TextField } from '../../index';
+import { OverlayProvider, Box, Button, Text, Modal } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Modal',
@@ -12,7 +11,7 @@ export default {
       control: {
         type: 'text'
       },
-      defaultValue: 'Delete Group'
+      defaultValue: 'Continue'
     },
     role: {},
     id: {
@@ -20,7 +19,9 @@ export default {
         type: 'text'
       }
     },
-    hasCloseButton: {},
+    hasCloseButton: {
+      defaultValue: true
+    },
     isClosedOnBlur: {},
     isDismissable: {},
     isKeyboardDismissDisabled: {},
@@ -68,16 +69,6 @@ export default {
 };
 export var Default = function Default(args) {
   var state = useModalState();
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onTextFieldChange = 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.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
@@ -88,57 +79,17 @@ export var Default = function Default(args) {
       onClose: state.close
     }), ___EmotionJSX(Text, {
       pt: "lg"
-    }, "Deleting a group ", ___EmotionJSX("strong", null, "\"Marketing\""), " cannot be undone. Users will lose access to the applications."), ___EmotionJSX(Text, {
-      pt: "lg"
-    }, "Type the word DELETE to confirm deletion of this group"), ___EmotionJSX(TextField, {
-      value: inputValue,
-      onChange: onTextFieldChange,
-      "aria-label": "user input"
-    }), ___EmotionJSX(Box, {
-      isRow: true,
-      pt: "lg",
-      mr: "auto"
-    }, ___EmotionJSX(Button, {
-      variant: "critical",
-      onPress: state.close,
-      mr: "md",
-      isDisabled: Boolean(inputValue !== 'DELETE'),
-      "aria-label": "Delete"
-    }, "Delete"), ___EmotionJSX(Button, {
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
-  );
-};
-export var DarkVariant = function DarkVariant() {
-  var state = useModalState();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when a modal opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-      onPress: state.open,
-      "aria-label": "Open modal"
-    }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
-      variant: "modal.dark",
-      title: "Question",
-      isOpen: state.isOpen,
-      onClose: state.close,
-      isDismissable: true,
-      hasCloseButton: true
-    }, ___EmotionJSX(Text, {
-      variant: "subtitle",
-      color: "white",
-      pt: "lg"
-    }, "Would you ever really just click a button?"), ___EmotionJSX(Box, {
+    }, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
       isRow: true,
       pt: "lg",
       mr: "auto"
     }, ___EmotionJSX(Button, {
       variant: "primary",
-      mr: "md",
       onPress: state.close,
-      "aria-label": "Yes"
-    }, "Yes"), ___EmotionJSX(Button, {
-      variant: "text",
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), ___EmotionJSX(Button, {
+      variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
     }, "Cancel"))))

package/lib/components/NavBar/NavBar.js

@@ -1,4 +1,7 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { NavBarContext } from '../../context/NavBarContext';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
 /**
  * Composed component that spreads children.
@@ -14,11 +17,29 @@ import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBar = function NavBar(props) {
-  return ___EmotionJSX(Box, {
-    variant: "boxes.navBar",
+  var defaultSelectedKeys = props.defaultSelectedKeys;
+
+  var _useState = useState(defaultSelectedKeys),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return ___EmotionJSX(NavBarContext.Provider, {
+    value: {
+      selectedKeys: selectedKeys,
+      setSelectedKeys: setSelectedKeys
+    }
+  }, ___EmotionJSX(Box, {
+    variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children);
+  }, props.children));
 };
 
+NavBar.propTypes = {
+  defaultSelectedKeys: isIterableProp
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
 export default NavBar;