@pingux/astro 1.38.0-alpha.0 → 1.38.0-alpha.2

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

@@ -390,22 +390,64 @@ var ControlledFiltering = function ControlledFiltering() {
   }),
       startsWith = (0, _startsWith["default"])(_useFilter);
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
+      fieldState = _useState8[0],
+      setFieldState = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: (0, _filter["default"])(items).call(items, function (item) {
+        var _selectedItem$name;
+
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
+    });
+  };
 
-  var filteredItems = (0, _react.useMemo)(function () {
-    return (0, _filter["default"])(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: (0, _filter["default"])(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
     });
-  }, [startsWith, filterValue]);
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
   return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label"
   }, actions, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.name
@@ -606,8 +648,8 @@ var ControlledWithAddOption = function ControlledWithAddOption() {
 
   var onSelectionChange = function onSelectionChange(key) {
     // Add new option to options array
-    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !(0, _find["default"])(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context2;

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

@@ -108,25 +108,68 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   }),
       startsWith = (0, _startsWith["default"])(_useFilter);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
+      fieldState = _useState2[0],
+      setFieldState = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: (0, _filter["default"])(items).call(items, function (item) {
+        var _selectedItem$name;
+
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
+    });
+  };
 
-  var filteredItems = (0, _react.useMemo)(function () {
-    return (0, _filter["default"])(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: (0, _filter["default"])(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
     });
-  }, [startsWith, filterValue]);
-  return (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
+  return (0, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({
+    label: "Example label",
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
+  }, defaultProps), function (item) {
     return (0, _react3.jsx)(_index.Item, {
-      id: item.id
+      key: item.name
     }, item.name);
-  });
+  }));
 };
 
 var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
@@ -146,8 +189,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !(0, _find["default"])(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context;

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

@@ -23,7 +23,7 @@ var _CopyText = _interopRequireDefault(require("./CopyText"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'CopyText',
+  title: 'Components/CopyText',
   component: _CopyText["default"],
   argTypes: {
     mode: {

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

@@ -47,7 +47,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'DataTable',
+  title: 'Components/DataTable',
   component: _index.DataTable,
   parameters: {
     docs: {

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

@@ -63,7 +63,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = {
-  title: 'EnvironmentBreadcrumb',
+  title: 'Components/EnvironmentBreadcrumb',
   component: _EnvironmentBreadcrumb["default"]
 };
 exports["default"] = _default;
@@ -144,7 +144,7 @@ var Default = function Default(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -173,7 +173,7 @@ var Default = function Default(args) {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -256,7 +256,7 @@ var WithSections = function WithSections() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
   return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
@@ -285,7 +285,7 @@ var WithSections = function WithSections() {
         isRow: true
       }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
         label: "SANDBOX",
-        variant: "boxes.environmentChip",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -318,7 +318,7 @@ var DefaultOpen = function DefaultOpen() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -348,7 +348,7 @@ var DefaultOpen = function DefaultOpen() {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -377,7 +377,7 @@ var ControlledMenu = function ControlledMenu() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -408,7 +408,7 @@ var ControlledMenu = function ControlledMenu() {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -431,7 +431,7 @@ var RightAlignedChips = function RightAlignedChips(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -489,7 +489,7 @@ var RightAlignedChips = function RightAlignedChips(args) {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);

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

@@ -19,7 +19,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'HelpHint',
+  title: 'Components/HelpHint',
   component: _["default"],
   argTypes: {
     children: {

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

@@ -41,7 +41,7 @@ var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: _index.Icon,
   parameters: {
     docs: {

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

@@ -25,7 +25,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'IconBadge',
+  title: 'Components/IconBadge',
   component: _["default"],
   parameters: {
     docs: {

package/lib/cjs/components/IconButton/IconButton.js

@@ -50,7 +50,7 @@ var _utils = require("@react-aria/utils");
 
 var _hooks = require("../../hooks");
 
-var _ChipContext = require("../Chip/ChipContext");
+var _BadgeContext = require("../../context/BadgeContext");
 
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
@@ -96,7 +96,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
-  var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
+  var _useContext = (0, _react.useContext)(_BadgeContext.BadgeContext),
       chipBg = _useContext.bg;
 
   var _useHover = (0, _interactions.useHover)(props),

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

@@ -29,7 +29,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'IconButton',
+  title: 'Components/IconButton',
   component: _index.IconButton,
   parameters: {
     docs: {

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

@@ -35,7 +35,7 @@ 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; }
 
 var _default = {
-  title: 'IconButtonToggle',
+  title: 'Components/IconButtonToggle',
   component: _["default"]
 };
 exports["default"] = _default;

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

@@ -39,7 +39,7 @@ 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; }
 
 var _default = {
-  title: 'Image',
+  title: 'Components/Image',
   component: _["default"],
   argTypes: {
     isDisabled: {},

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

@@ -25,7 +25,7 @@ var _links = _interopRequireDefault(require("../../styles/variants/links"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Link',
+  title: 'Components/Link',
   component: _["default"],
   argTypes: {
     href: {

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

@@ -31,7 +31,7 @@ var _Separator = _interopRequireDefault(require("../Separator"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'ListItem',
+  title: 'Components/ListItem',
   component: _ListItem["default"]
 };
 exports["default"] = _default;

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

@@ -57,7 +57,7 @@ var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/consta
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'ListView',
+  title: 'Components/ListView',
   component: _["default"],
   argTypes: {
     loadingState: {

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

@@ -23,7 +23,7 @@ var _colors = require("../../styles/colors");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Loader',
+  title: 'Components/Loader',
   component: _["default"],
   argTypes: {
     color: {

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

@@ -23,7 +23,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Menu',
+  title: 'Components/Menu',
   component: _Menu["default"],
   parameters: {
     actions: {

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

@@ -67,7 +67,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = {
-  title: 'Messages',
+  title: 'Components/Messages',
   component: _.Messages,
   argTypes: {
     items: {

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

@@ -21,7 +21,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: _index.Modal,
   argTypes: {
     title: {

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -402,7 +402,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "boxes.readOnlyChip",
+        variant: "variants.boxes.readOnlyChip",
         bg: "white",
         textProps: {
           sx: {
@@ -419,7 +419,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     return (0, _react2.jsx)(_.Chip, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      variant: "boxes.selectedItemChip",
+      variant: "variants.boxes.selectedItemChip",
       bg: "active",
       label: item.name,
       slots: item.slots

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

@@ -248,7 +248,7 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'boxes.itemChipWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
@@ -265,7 +265,7 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'boxes.itemChipWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
@@ -282,7 +282,7 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'boxes.itemChipWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {

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

@@ -53,7 +53,7 @@ var _default = {
     NavBarItemLink: _index.NavBarItemLink,
     NavBarItemButton: _index.NavBarItemButton
   },
-  title: 'NavBar'
+  title: 'Components/NavBar'
 };
 exports["default"] = _default;