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

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

@@ -20,7 +20,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 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 React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import { fireEvent } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { useFilter } from '@react-aria/i18n';
@@ -66,25 +66,69 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   }),
       startsWith = _startsWithInstanceProperty(_useFilter);
 
-  var _useState = useState(''),
+  var _useState = useState({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
+      fieldState = _useState2[0],
+      setFieldState = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = _filterInstanceProperty(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: _filterInstanceProperty(items).call(items, function (item) {
+        var _selectedItem$name;
 
-  var filteredItems = useMemo(function () {
-    return _filterInstanceProperty(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
     });
-  }, [startsWith, filterValue]);
-  return ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
+  };
+
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: _filterInstanceProperty(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
+    });
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
+  }, defaultProps), function (item) {
     return ___EmotionJSX(Item, {
-      id: item.id
+      key: item.name
     }, item.name);
-  });
+  }));
 };
 
 var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
@@ -104,8 +148,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !_findInstanceProperty(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context;

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

@@ -5,7 +5,7 @@ import Text from '../Text';
 import CopyText from './CopyText';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'CopyText',
+  title: 'Components/CopyText',
   component: CopyText,
   argTypes: {
     mode: {

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

@@ -17,7 +17,7 @@ import isChromatic from 'chromatic/isChromatic';
 import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'DataTable',
+  title: 'Components/DataTable',
   component: DataTable,
   parameters: {
     docs: {

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

@@ -24,7 +24,7 @@ import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
 import { Item, Section, Chip, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'EnvironmentBreadcrumb',
+  title: 'Components/EnvironmentBreadcrumb',
   component: EnvironmentBreadcrumb
 };
 var defaultEnvironments = [{
@@ -103,7 +103,7 @@ export var Default = function Default(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -132,7 +132,7 @@ export var Default = function Default(args) {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -215,7 +215,7 @@ export var WithSections = function WithSections() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -245,7 +245,7 @@ export var WithSections = function WithSections() {
         isRow: true
       }, itemName, isSandbox ? ___EmotionJSX(Chip, {
         label: "SANDBOX",
-        variant: "boxes.environmentChip",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -272,7 +272,7 @@ export var DefaultOpen = function DefaultOpen() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -302,7 +302,7 @@ export var DefaultOpen = function DefaultOpen() {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -328,7 +328,7 @@ export var ControlledMenu = function ControlledMenu() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -359,7 +359,7 @@ export var ControlledMenu = function ControlledMenu() {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -379,7 +379,7 @@ export var RightAlignedChips = function RightAlignedChips(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -437,7 +437,7 @@ export var RightAlignedChips = function RightAlignedChips(args) {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);

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

@@ -3,7 +3,7 @@ import HelpHint from '.';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'HelpHint',
+  title: 'Components/HelpHint',
   component: HelpHint,
   argTypes: {
     children: {

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

@@ -14,7 +14,7 @@ import { flatColorList } from '../../styles/colors';
 import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     docs: {

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

@@ -6,7 +6,7 @@ import IconBadge from '.';
 import { Icon, Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconBadge',
+  title: 'Components/IconBadge',
   component: IconBadge,
   parameters: {
     docs: {

package/lib/components/IconButton/IconButton.js

@@ -23,7 +23,7 @@ import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
-import { ChipContext } from '../Chip/ChipContext';
+import { BadgeContext } from '../../context/BadgeContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 /**
  * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
@@ -58,7 +58,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
-  var _useContext = useContext(ChipContext),
+  var _useContext = useContext(BadgeContext),
       chipBg = _useContext.bg;
 
   var _useHover = useHover(props),

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

@@ -8,7 +8,7 @@ import PencilIcon from 'mdi-react/PencilIcon';
 import { Box, Icon, IconButton, Table, TableHead, TableRow, TableCell, TableBody, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
   parameters: {
     docs: {

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

@@ -6,7 +6,7 @@ import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import IconButtonToggle from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconButtonToggle',
+  title: 'Components/IconButtonToggle',
   component: IconButtonToggle
 };
 export var Default = function Default(args) {

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

@@ -8,7 +8,7 @@ import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { Box, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Image',
+  title: 'Components/Image',
   component: Image,
   argTypes: {
     isDisabled: {},

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

@@ -6,7 +6,7 @@ import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import variants from '../../styles/variants/links';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Link',
+  title: 'Components/Link',
   component: Link,
   argTypes: {
     href: {

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

@@ -9,7 +9,7 @@ import Text from '../Text';
 import Separator from '../Separator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'ListItem',
+  title: 'Components/ListItem',
   component: ListItem
 };
 export var Default = function Default(args) {

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

@@ -22,7 +22,7 @@ import Text from '../Text';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'ListView',
+  title: 'Components/ListView',
   component: ListView,
   argTypes: {
     loadingState: {

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

@@ -5,7 +5,7 @@ import Loader from './';
 import { flatColorList } from '../../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Loader',
+  title: 'Components/Loader',
   component: Loader,
   argTypes: {
     color: {

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

@@ -5,7 +5,7 @@ import Menu from '../Menu';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Menu',
+  title: 'Components/Menu',
   component: Menu,
   parameters: {
     actions: {

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

@@ -26,7 +26,7 @@ import { Box, Button, Messages } from '../..';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Messages',
+  title: 'Components/Messages',
   component: Messages,
   argTypes: {
     items: {

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

@@ -4,7 +4,7 @@ import { useModalState } from '../../hooks';
 import { OverlayProvider, Box, Button, Text, Modal } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: Modal,
   argTypes: {
     title: {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -351,7 +351,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "boxes.readOnlyChip",
+        variant: "variants.boxes.readOnlyChip",
         bg: "white",
         textProps: {
           sx: {
@@ -368,7 +368,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Chip, _extends({
       key: item.key,
       role: "presentation",
-      variant: "boxes.selectedItemChip",
+      variant: "variants.boxes.selectedItemChip",
       bg: "active",
       label: item.name,
       slots: item.slots

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

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

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

@@ -18,7 +18,7 @@ export default {
     NavBarItemLink: NavBarItemLink,
     NavBarItemButton: NavBarItemButton
   },
-  title: 'NavBar'
+  title: 'Components/NavBar'
 };
 
 var Credentials = function Credentials(props) {