@pingux/astro 1.27.0-alpha.12 → 1.27.0-alpha.14

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

@@ -58,8 +58,6 @@ var _overlays = require("@react-stately/overlays");
 
 var _overlays2 = require("@react-aria/overlays");
 
-var _utils = require("@react-aria/utils");
-
 var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
 
 var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -76,7 +74,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -103,7 +101,6 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
-      popoverProps = props.popoverProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -270,7 +267,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -358,9 +355,6 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: _propTypes["default"].func,
 
-  /** Props object that is spread directly into the popover container component. */
-  popoverProps: _propTypes["default"].shape({}),
-
   /** Props object that is spread directly into the SearchField element. */
   searchProps: _propTypes["default"].shape({}),
 

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

@@ -2,28 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -40,10 +22,6 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
 var testSelectedItem = 'test-selected-item';
@@ -74,10 +52,6 @@ var defaultProps = {
   },
   items: items
 };
-var popoverProps = {
-  maxWidth: '100px',
-  'data-testid': 'popover-container'
-};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -161,15 +135,6 @@ test('should display name', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
 });
-test('should spread props into popover container', function () {
-  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
-    isDefaultOpen: true
-  }));
-
-  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
-
-  expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
-});
 test('should display selectedItem', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -38,17 +38,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * A `Page Header` is a composed component using text and icon button.
- * The component is separated from the body and appears at the top.
- * For customization,
- * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
- */
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

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

@@ -73,40 +73,6 @@ var _default = {
 };
 exports["default"] = _default;
 var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
-var sx = {
-  openButton: {
-    height: '30px',
-    borderRadius: 'md',
-    fontSize: '13px',
-    mb: 'sm'
-  },
-  closeIconButton: {
-    position: 'absolute',
-    top: '14px',
-    right: 'sm'
-  },
-  buttonsContainer: {
-    p: 'lg',
-    flexDirection: 'initial !important',
-    alignContent: 'space-between',
-    flexWrap: 'wrap'
-  },
-  selectedButton: {
-    mb: 'sm',
-    mr: '4px',
-    height: '30px',
-    borderRadius: '15px',
-    fontSize: '13px'
-  },
-  unSelectedButton: {
-    mb: 'sm',
-    mr: '4px',
-    borderColor: 'neutral.80',
-    height: '30px',
-    borderRadius: '15px',
-    fontSize: '13px'
-  }
-};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -165,9 +131,14 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
+    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: sx.openButton
+    sx: {
+      height: '30px',
+      borderRadius: '15px',
+      fontSize: '13px'
+    }
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
@@ -190,15 +161,36 @@ var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: sx.closeIconButton
+    sx: {
+      position: 'absolute',
+      top: 14,
+      right: 10
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"]
   })), (0, _react2.jsx)(_index.Box, {
-    sx: sx.buttonsContainer
+    sx: {
+      p: 'lg',
+      flexDirection: 'initial !important',
+      alignContent: 'space-between',
+      flexWrap: 'wrap'
+    }
   }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
     return (0, _react2.jsx)(_index.Button, {
+      mb: "sm",
       variant: "inline",
-      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
+      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? {
+        mr: '4px',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      } : {
+        mr: '4px',
+        borderColor: 'neutral.80',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      },
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

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

@@ -128,106 +128,44 @@ var items = [{
   avatar: _AccountIcon["default"],
   hasSeparator: false
 }];
-var sx = {
-  wrapper: {
-    px: 'lg',
-    py: 'lg',
-    bg: 'accent.99',
-    height: '900px',
-    overflowY: 'scroll'
-  },
-  searchField: {
-    position: 'fixed',
-    mb: 'sm',
-    width: '400px'
-  },
-  listElementWrapper: {
-    px: 'md',
-    bg: 'accent.99',
-    justifyContent: 'center'
-  },
-  separator: {
-    bg: 'accent.90'
-  },
-  tabsWrapper: {
-    px: 'lg',
-    pt: 'xs'
-  },
-  iconButton: {
-    position: 'absolute',
-    top: 0,
-    right: 0
-  },
-  itemLabel: {
-    fontSize: 'sm',
-    fontWeight: 3,
-    lineHeight: '16px',
-    mb: 'xs'
-  },
-  itemValue: {
-    fontWeight: 0,
-    lineHeight: '18px',
-    variant: 'base',
-    mb: 'md'
-  },
-  listElement: {
-    wrapper: {
-      minHeight: '60px'
-    },
-    iconWrapper: {
-      mr: 'auto',
-      alignItems: 'center'
-    },
-    icon: {
-      mr: 'sm',
-      alignSelf: 'center',
-      color: 'accent.40'
-    },
-    avatar: {
-      width: '25px',
-      height: '25px',
-      mr: 'md'
-    },
-    title: {
-      alignSelf: 'start'
-    },
-    subtitle: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px',
-      alignSelf: 'start'
-    },
-    menuWrapper: {
-      alignSelf: 'center'
-    }
-  }
-};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.listElement.wrapper
+    minHeight: "60px"
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.listElement.iconWrapper
+    mr: "auto",
+    alignItems: "center"
   }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
+    alignSelf: "center",
     size: 24,
-    sx: sx.listElement.icon
+    mr: "sm",
+    color: "accent.40"
   }) : (0, _react2.jsx)(_index.Avatar, {
-    sx: sx.listElement.avatar,
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
     src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
-    sx: sx.listElement.title
+    alignSelf: "start"
   }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
     variant: "subtitle",
-    sx: sx.listElement.subtitle
+    alignSelf: "start"
   }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.listElement.menuWrapper
+    alignSelf: "center"
   }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -284,7 +222,11 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_index.Box, {
-    sx: sx.wrapper
+    px: "lg",
+    py: "lg",
+    bg: "accent.99",
+    height: "900px",
+    overflowY: "scroll"
   }, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
@@ -318,15 +260,18 @@ var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.listElementWrapper
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
-    sx: sx.separator
+    bg: "accent.90"
   }), (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabsWrapper
+    px: "lg",
+    pt: "xs"
   }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -340,33 +285,73 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
-    sx: sx.iconButton
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
   })), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {

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

@@ -54,13 +54,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var sx = {
-  showHideButton: {
-    width: 'fit-content',
-    marginLeft: 'sm',
-    alignSelf: 'auto'
-  }
-};
 
 var Default = function Default(_ref) {
   var _context;
@@ -91,7 +84,11 @@ var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: sx.showHideButton
+    sx: {
+      width: 'fit-content',
+      marginLeft: 10,
+      alignSelf: 'auto'
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
   }))));

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

@@ -20,15 +20,12 @@ var _default = {
   title: 'Recipes/NeutralCheckboxField'
 };
 exports["default"] = _default;
-var sx = {
-  checkboxColor: {
-    color: 'neutral.10'
-  }
-};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_CheckboxField["default"], {
-    sx: sx.checkboxColor
+    controlProps: {
+      color: 'neutral.10'
+    }
   }, "Click me");
 };