@pingux/astro 2.75.0 → 2.76.0-alpha.0

package/lib/components/ListView/ListView.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
+var _excluded = ["containerProps", "disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -19,6 +19,7 @@ import { useTreeState } from 'react-stately';
 import { useCollator } from '@react-aria/i18n';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListLayout } from '@react-stately/layout';
+import { Box } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import Loader from '../Loader';
 import { ListViewContext } from './ListViewContext';
@@ -50,7 +51,8 @@ export function useListLayout(state) {
   return layout;
 }
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
-  var disabledKeys = props.disabledKeys,
+  var containerProps = props.containerProps,
+    disabledKeys = props.disabledKeys,
     _props$isHoverable = props.isHoverable,
     isHoverable = _props$isHoverable === void 0 ? true : _props$isHoverable,
     loadingState = props.loadingState,
@@ -125,7 +127,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     value: {
       state: state
     }
-  }, ___EmotionJSX(Virtualizer, _extends({}, items ? gridProps : {
+  }, ___EmotionJSX(Box, _extends({
+    variant: "listView.container"
+  }, containerProps), ___EmotionJSX(Virtualizer, _extends({}, items ? gridProps : {
     role: 'presentation'
   }, {
     onLoadMore: onLoadMore,
@@ -165,7 +169,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 ListView.defaultProps = {
   'aria-label': 'listView',

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

@@ -810,7 +810,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   });
   return ___EmotionJSX(Box, {
     sx: {
-      maxHeight: '400px'
+      height: '400px'
     }
   }, ___EmotionJSX(ListView, _extends({}, actions, {
     items: list.items,

package/lib/components/ListView/ListView.styles.js

@@ -0,0 +1,7 @@
+var container = {
+  height: '100%',
+  overflowY: 'hidden'
+};
+export default {
+  container: container
+};

package/lib/components/ListView/ListViewFocusWrapper.js

@@ -63,7 +63,8 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/forwardRef(function (props, r
     tabIndex: 0,
     onKeyDown: function onKeyDown(e) {
       escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped);
-    }
+    },
+    variant: "listViewItem.expandableItemBody"
   }), children);
 });
 var ListViewFocusWrapper = function ListViewFocusWrapper(props) {

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+var _excluded = ["children", "className", "data", "iconProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
@@ -16,6 +16,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     data = _ref.data,
+    iconProps = _ref.iconProps,
     isHovered = _ref.isHovered,
     isSelected = _ref.isSelected,
     linkProps = _ref.linkProps,
@@ -47,15 +48,16 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return 'listViewItem.iconWrapper';
   };
   var renderIcon = icon && ___EmotionJSX(Box, {
-    width: "25px"
-  }, ___EmotionJSX(Icon, {
+    width: "25px",
+    variant: "listViewItem.iconContainer"
+  }, ___EmotionJSX(Icon, _extends({
     color: "accent.40",
     icon: icon,
     size: "md",
     title: {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     }
-  }));
+  }, iconProps)));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     width: "35px"
   }, ___EmotionJSX(Image, {

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -118,14 +118,19 @@ var expandableFocusContainer = {
     boxShadow: '0 0 0 1px inset #D033FF'
   }
 };
+var expandableItemBody = {
+  px: 'md'
+};
 var expandableStyledListItem = {
   display: 'flex',
   padding: '0px 15px 0px 25px',
   flex: '1 1 0px',
-  minHeight: '80px',
   flexGrow: 1,
   justifyContent: 'center',
   bg: 'white',
+  minHeight: '75px',
+  py: 'lg',
+  px: 'md',
   '&.is-hovered': {
     bg: 'accent.99',
     cursor: 'pointer'
@@ -152,6 +157,7 @@ export default {
   styledListItem: styledListItem,
   loaderContainer: loaderContainer,
   expandableFocusContainer: expandableFocusContainer,
+  expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
   expandableRow: expandableRow
 };

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -357,8 +357,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }, ___EmotionJSX(Badge, _extends({
       key: item.key,
       role: "presentation",
-      variant: "selectedItemBadge",
       bg: "active",
+      variant: "selectedItemBadge",
       label: item.name,
       slots: item.slots
     }, item.badgeProps), ___EmotionJSX(IconButton, _extends({

package/lib/components/NavBar/NavBar.stories.js

@@ -79,13 +79,10 @@ var Verify = function Verify(props) {
     id: "Hero-Chart",
     stroke: "none",
     strokeWidth: "1",
-    fill: "none",
     fillRule: "evenodd"
   }, ___EmotionJSX("g", {
     id: "Dashboard-\u2013-Verify",
-    transform: "translate(-251.000000, -579.000000)",
-    fill: "#ffffff",
-    fillRule: "nonzero"
+    transform: "translate(-251.000000, -579.000000)"
   }, ___EmotionJSX("g", {
     id: "Group",
     transform: "translate(251.000000, 577.000000)"

package/lib/components/PanelHeader/PanelHeader.js

@@ -52,7 +52,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: text && subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, icon ? renderIcon : renderImage, ___EmotionJSX(Box, {
+  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, ___EmotionJSX(Box, {
     variant: "panelHeader.wrapper"
   }, text && ___EmotionJSX(Text, {
     variant: "panelHeaderText"

package/lib/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -187,12 +187,7 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
     variant: 'listViewItem.expandableRow'
   });
   var cellProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hoverProps), {}, {
-    variant: 'listViewItem.expandableStyledListItem',
-    sx: {
-      minHeight: '75px',
-      py: 'lg',
-      px: 'md'
-    }
+    variant: 'listViewItem.expandableStyledListItem'
   }, gridCellProps), {}, {
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,

package/lib/index.js

@@ -187,6 +187,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { default as NextGenTheme } from './styles/themes/next-gen';
 
 /* eslint-enable import/export */
 

package/lib/recipes/ListAndPanel.stories.js

@@ -32,8 +32,7 @@ var sx = {
     px: 'lg',
     py: 'lg',
     bg: 'accent.99',
-    height: '900px',
-    overflowY: 'scroll'
+    height: '900px'
   },
   separator: {
     bg: 'accent.90'

package/lib/recipes/NextGen/DefaultAvatar.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { AstroProvider, Box, NextGenTheme } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Next Gen Recipes/Default Avatar'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignItems: "center"
+  }, ___EmotionJSX(Box, {
+    variant: "avatar.sm",
+    backgroundColor: "green-100",
+    color: "green-800"
+  }, "AT"), ___EmotionJSX(Box, {
+    variant: "avatar.md",
+    backgroundColor: "blue-100",
+    color: "blue-800"
+  }, "LP"), ___EmotionJSX(Box, {
+    variant: "avatar.lg",
+    backgroundColor: "teal-100",
+    color: "teal-800"
+  }, "WP"), ___EmotionJSX(Box, {
+    variant: "avatar.xl",
+    backgroundColor: "red-100",
+    color: "red-800"
+  }, "JS")));
+};

package/lib/recipes/NextGen/ListViewNextGen.stories.js

@@ -0,0 +1,142 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import { AstroProvider, Box, Item, ListView, ListViewItem, NextGenTheme, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var items = _Array$from({
+  length: 300
+}, function (_, index) {
+  var id = (index + 1).toString();
+  return {
+    key: "Animal".concat(id),
+    name: "Animal".concat(id),
+    id: id
+  };
+});
+var iconStyles = [{
+  backgroundColor: 'cyan-100',
+  fill: 'cyan-800',
+  color: 'cyan-800'
+}, {
+  backgroundColor: 'pink-100',
+  color: 'pink-800',
+  fill: 'pink-800'
+}, {
+  backgroundColor: 'green-100',
+  color: 'green-800',
+  fill: 'green-800'
+}, {
+  backgroundColor: 'orange-100',
+  color: 'orange-800',
+  fill: 'orange-800'
+}, {
+  backgroundColor: 'blue-100',
+  color: 'blue-800',
+  fill: 'blue-800'
+}, {
+  backgroundColor: 'red-100',
+  color: 'red-800',
+  fill: 'red-800'
+}, {
+  backgroundColor: 'teal-100',
+  color: 'teal-800',
+  fill: 'teal-800'
+}, {
+  backgroundColor: 'yellow-100',
+  color: 'yellow-800',
+  fill: 'yellow-800'
+}, {
+  backgroundColor: 'indigo-100',
+  color: 'indigo-800',
+  fill: 'indigo-800'
+}, {
+  backgroundColor: 'purple-100',
+  color: 'purple-800',
+  fill: 'purple-800'
+}];
+var createIcons = function createIcons(index) {
+  var lastDigit = index % 10;
+  return {
+    size: '32px',
+    sx: _objectSpread({
+      borderRadius: '50%',
+      padding: '6px'
+    }, iconStyles[lastDigit])
+  };
+};
+export default {
+  title: 'Next Gen Recipes/ListView'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    backgroundColor: "white"
+  }, ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(Box, {
+    height: "400px",
+    backgroundColor: "white"
+  }, ___EmotionJSX(ListView, {
+    items: items,
+    selectionMode: "single"
+  }, _mapInstanceProperty(items).call(items, function (item, index) {
+    return ___EmotionJSX(Item, _extends({
+      key: item.name
+    }, item, {
+      index: index
+    }), ___EmotionJSX(ListViewItem, {
+      sx: {},
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      },
+      iconProps: _objectSpread({}, createIcons(index)),
+      hasSeparator: false,
+      index: index,
+      items: items
+    }));
+  })))));
+};
+export var Expandable = function Expandable() {
+  return ___EmotionJSX(Box, {
+    backgroundColor: "white"
+  }, ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(Box, {
+    height: "400px",
+    backgroundColor: "white"
+  }, ___EmotionJSX(ListView, {
+    items: items,
+    selectionMode: "expansion"
+  }, _mapInstanceProperty(items).call(items, function (item, index) {
+    return ___EmotionJSX(Item, _extends({
+      key: item.name
+    }, item, {
+      index: index
+    }), ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      },
+      iconProps: _objectSpread({}, createIcons(index)),
+      hasSeparator: false,
+      index: index,
+      items: items
+    }), ___EmotionJSX(Box, {
+      py: "lg",
+      px: "sm"
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")));
+  })))));
+};

package/lib/recipes/NextGen/ModalNextGen.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useModalState } from '../../hooks';
+import { AstroProvider, Box, Button, Modal, NextGenTheme, OverlayProvider, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Next Gen Recipes/Modal'
+};
+export var Default = function Default() {
+  var state = useModalState();
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
+    hasCloseButton: true,
+    contentProps: {
+      sx: {
+        p: '0px !important'
+      }
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      p: '1rem 1.5rem',
+      borderBottom: '1px solid',
+      borderBottomColor: 'gray-300'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "modalTitle"
+  }, "Modal Title")), ___EmotionJSX(Box, {
+    p: "1.5rem 1.5rem"
+  }, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      borderTop: '1px solid',
+      borderTopColor: 'gray-300',
+      p: '1rem 1.5rem'
+    }
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto"
+  }, ___EmotionJSX(Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Continue"
+  }, "Previous")), ___EmotionJSX(Box, {
+    isRow: true,
+    ml: "auto"
+  }, ___EmotionJSX(Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Cancel"
+  }, "Cancel"), ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: state.close,
+    ml: ".25rem",
+    "aria-label": "Continue",
+    isDisabled: true
+  }, "Next"))))));
+};