@pingux/astro 1.7.0-alpha.10 → 1.7.0-alpha.13

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

@@ -417,7 +417,7 @@ ComboBoxField.propTypes = {
   })
 };
 ComboBoxField.defaultProps = {
-  menuTrigger: 'input',
+  menuTrigger: 'focus',
   direction: 'bottom',
   scrollBoxProps: {
     maxHeight: '300px'

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

@@ -315,7 +315,8 @@ test('should invoke onInputChange', function () {
 test('should invoke onOpenChange on button click', function () {
   var onOpenChange = jest.fn();
   getComponent({
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
   });
 
   var button = _testWrapper.screen.queryByRole('button');
@@ -332,7 +333,8 @@ test('should invoke onOpenChange on button click', function () {
 test('should invoke onOpenChange on input change', function () {
   var onOpenChange = jest.fn();
   getComponent({
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    menuTrigger: 'input'
   });
 
   var input = _testWrapper.screen.queryByRole('combobox');
@@ -349,7 +351,8 @@ test('should invoke onOpenChange on input change', function () {
 test('should invoke onOpenChange on keyboard arrow down', function () {
   var onOpenChange = jest.fn();
   getComponent({
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
   });
 
   var input = _testWrapper.screen.queryByRole('combobox');
@@ -366,7 +369,8 @@ test('should invoke onOpenChange on keyboard arrow down', function () {
 test('should invoke onOpenChange on keyboard arrow up', function () {
   var onOpenChange = jest.fn();
   getComponent({
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
   });
 
   var input = _testWrapper.screen.queryByRole('combobox');

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -67,6 +67,7 @@ var ListViewItem = function ListViewItem(props) {
   var isDisabled = state.disabledKeys.has(item.key);
   var rowRef = (0, _react.useRef)();
   var cellRef = (0, _react.useRef)();
+  var isSelectable = state.selectionManager.selectionMode !== 'none';
 
   var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
@@ -106,7 +107,7 @@ var ListViewItem = function ListViewItem(props) {
   var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isHovered: isHovered,
+    isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible,
     hasSeparator: hasSeparator

package/lib/cjs/components/MultiselectFilter/MultiselectFilter.js

@@ -105,7 +105,7 @@ var MultiselectFilter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   }, (0, _react2.jsx)(_index.ListView, {
     items: items,
     onSelectionChange: onSelectionChange,
-    selectionMode: "multiple",
+    selectionMode: "none",
     style: {
       width: '100%'
     },

package/lib/cjs/components/MultiselectFilterItem/MultiselectFilterItem.js

@@ -30,22 +30,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var MultiselectFilterItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var text = props.text,
-      icon = props.icon;
+      icon = props.icon,
+      isDefaultSelected = props.isDefaultSelected,
+      onPress = props.onPress;
+  var iconElement = icon && (0, _react2.jsx)(_index.Icon, {
+    "data-testid": "multiselect-filter-data-icon",
+    icon: icon,
+    color: isDefaultSelected ? 'neutral.10' : 'active',
+    size: 13
+  });
   return (0, _react2.jsx)(_index.Box, {
     "data-testid": "multiselect-filter-item",
     isRow: true,
-    justifyContent: "space-between",
     ref: ref
   }, (0, _react2.jsx)(_index.Text, {
     variant: "multiselectFilterItem"
-  }, text), icon && (0, _react2.jsx)(_index.Icon, {
-    "data-testid": "multiselect-filter-data-icon",
-    icon: icon,
-    mr: "md",
-    color: "neutral.10",
-    size: 13,
-    flexShrink: 0
-  }));
+  }, text), iconElement && (isDefaultSelected ? iconElement : (0, _react2.jsx)(_index.IconButton, {
+    sx: {
+      width: 13,
+      height: 13,
+      alignSelf: 'auto',
+      '& path': {
+        fill: 'inherit'
+      }
+    },
+    onPress: onPress
+  }, iconElement)));
 });
 MultiselectFilterItem.propTypes = {
   /**
@@ -56,7 +66,18 @@ MultiselectFilterItem.propTypes = {
   /**
      * List icon.
      */
-  icon: _propTypes["default"].shape({})
+  icon: _propTypes["default"].shape({}),
+
+  /**
+   * Whether the element is default selected
+   * and has to use Icon element instead of IconButton
+   */
+  isDefaultSelected: _propTypes["default"].bool,
+
+  /**
+   * Handler that is called at the press on icon button
+   */
+  onPress: _propTypes["default"].func
 };
 MultiselectFilterItem.displayName = 'MultiselectFilterItem';
 var _default = MultiselectFilterItem;

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

@@ -42,7 +42,7 @@ test('default multiselectFilter', function () {
   expect(icon).not.toBeInTheDocument();
   expect(multiselectFilterItem).toBeInTheDocument();
 });
-test('icon displays when icon prop is present', function () {
+test('icon button displays when icon prop is present', function () {
   getComponent({
     icon: _FilterIcon["default"]
   });
@@ -50,4 +50,16 @@ test('icon displays when icon prop is present', function () {
   var icon = _testWrapper.screen.getByTestId(iconId);
 
   expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).toBeInstanceOf(HTMLButtonElement);
+});
+test('icon displays when icon prop is present and default selected', function () {
+  getComponent({
+    icon: _FilterIcon["default"],
+    isDefaultSelected: true
+  });
+
+  var icon = _testWrapper.screen.getByTestId(iconId);
+
+  expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).not.toBeInstanceOf(HTMLButtonElement);
 });

package/lib/cjs/components/Text/Text.js

@@ -31,7 +31,11 @@ var ExtendedText = ( /*#__PURE__*/0, _base["default"])(_themeUi.Text, process.en
 } : {
   target: "eifd86o0",
   label: "ExtendedText"
-})(_styledSystem.layout, _styledSystem.flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3ggfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgVGV4dCA9IFJlYWN0LmZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IChcbiAgPEV4dGVuZGVkVGV4dCB2YXJpYW50PVwiYmFzZVwiIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+XG4pKTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuXG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuLyoqXG4gKiBUaGUgVGV4dCBjb21wb25lbnQgaXMgdXNlZCBmb3IgZGlzcGxheWluZyB0ZXh0LlxuICogVGV4dCBzdXBwb3J0cyBbVHlwb2dyYXBoeSBQcm9wcyBmcm9tIFN0eWxlZCBTeXN0ZW0gXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlLyN0eXBvZ3JhcGh5KS5cbiAqL1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4gKFxuICA8RXh0ZW5kZWRUZXh0IHZhcmlhbnQ9XCJiYXNlXCIgey4uLnByb3BzfSByZWY9e3JlZn0gLz5cbikpO1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cblxuVGV4dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHZhcmlhbnQ6IHRleHRWYXJpYW50cy5CQVNFLFxufTtcblxuVGV4dC5kaXNwbGF5TmFtZSA9ICdUZXh0JztcblxuZXhwb3J0IGRlZmF1bHQgVGV4dDtcbiJdfQ== */");
+/**
+ * The Text component is used for displaying text.
+ * Text supports [Typography Props from Styled System ](https://styled-system.com/table/#typography).
+ */
 
 var Text = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   return (0, _react2.jsx)(ExtendedText, (0, _extends2["default"])({

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithCustomWidth = exports.Default = void 0;
+exports["default"] = exports.WithCustomWidth = exports.TypographyStyleProps = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -24,6 +24,8 @@ var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _react = _interopRequireDefault(require("react"));
 
+var _themeUi = require("theme-ui");
+
 var _Text = _interopRequireDefault(require("./Text"));
 
 var _variants = require("../../utils/devUtils/constants/variants.js");
@@ -123,4 +125,56 @@ var WithCustomWidth = function WithCustomWidth() {
   }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 
-exports.WithCustomWidth = WithCustomWidth;
+exports.WithCustomWidth = WithCustomWidth;
+
+var TypographyStyleProps = function TypographyStyleProps() {
+  var textProps = {
+    fontFamily: 'times',
+    fontSize: 'md',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.';
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    gap: "md"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_Text["default"], textProps, loremText), (0, _react2.jsx)(_themeUi.Divider, null), (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_Text["default"], {
+    sx: textProps
+  }, loremText));
+};
+
+exports.TypographyStyleProps = TypographyStyleProps;
+TypographyStyleProps.argTypes = {
+  variant: {
+    control: {
+      type: 'none'
+    }
+  },
+  children: {
+    control: {
+      type: 'none'
+    }
+  },
+  color: {
+    control: {
+      type: 'none'
+    }
+  },
+  bg: {
+    control: {
+      type: 'none'
+    }
+  },
+  tabPanelProps: {
+    control: {
+      type: 'none'
+    }
+  }
+};

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

@@ -2,6 +2,24 @@
 
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -18,6 +36,10 @@ var _testTheme = _interopRequireDefault(require("../../utils/testUtils/testTheme
 
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(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; }
+
 var testId = 'test-text';
 var defaultProps = {
   'data-testid': testId
@@ -40,4 +62,28 @@ test('default text', function () {
 
   expect(text).toBeInstanceOf(HTMLSpanElement);
   expect(text).toBeInTheDocument();
+});
+test('typography props will be applied', function () {
+  var customTypographyProps = {
+    fontFamily: 'times',
+    fontSize: 'xx',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  getComponent(_objectSpread({}, customTypographyProps));
+
+  var text = _testWrapper.screen.getByTestId(testId);
+
+  expect(text).toHaveStyle({
+    fontFamily: 'times',
+    fontSize: '23px',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  });
 });

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.js

@@ -187,16 +187,16 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return aNum - bNum;
   };
 
-  var items = (0, _react.useMemo)(function () {
-    var _context7;
+  var checkIsSelectedItem = function checkIsSelectedItem() {
+    return (0, _filter["default"])(timeZones).call(timeZones, function (tz) {
+      return tz.timeZone === search;
+    }).length > 0;
+  };
 
-    if (filteredTimezones.length === 0) {
-      return (0, _react2.jsx)(_index.Item, {
-        key: emptySearchText
-      }, emptySearchText);
-    }
+  var renderTimeZones = function renderTimeZones(timeZonesToRender) {
+    var _context7;
 
-    return (0, _map["default"])(_context7 = (0, _sort["default"])(filteredTimezones).call(filteredTimezones, sortByGMT)).call(_context7, function (_ref4) {
+    return (0, _map["default"])(_context7 = (0, _sort["default"])(timeZonesToRender).call(timeZonesToRender, sortByGMT)).call(_context7, function (_ref4) {
       var gmt = _ref4.gmt,
           time = _ref4.time,
           timeZone = _ref4.timeZone;
@@ -218,7 +218,17 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         variant: "timeZone.time"
       }, time))));
     });
-  }, [emptySearchText, filteredTimezones]);
+  };
+
+  var items = (0, _react.useMemo)(function () {
+    if (filteredTimezones.length === 0) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: emptySearchText
+      }, emptySearchText);
+    }
+
+    return renderTimeZones(checkIsSelectedItem() ? timeZones : filteredTimezones);
+  }, [emptySearchText, filteredTimezones, search, timeZones]);
   var comboBoxFieldProps = (0, _react.useMemo)(function () {
     return _objectSpread({
       controlProps: {
@@ -239,7 +249,8 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, otherProps);
   }, [emptySearchText, filteredTimezones, otherProps]);
   return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, comboBoxFieldProps, {
-    disabledKeys: [emptySearchText]
+    disabledKeys: [emptySearchText],
+    menuTrigger: "focus"
   }), items);
 });
 TimeZonePicker.propTypes = {