@pingux/astro 1.0.1 → 1.1.0-alpha.3

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

@@ -8,16 +8,20 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
+exports.TextWithTooltip = exports.ChipWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
+var _PersonIcon = _interopRequireDefault(require("mdi-react/PersonIcon"));
+
 var _index = require("../../index");
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Text = _interopRequireDefault(require("../Text"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -80,4 +84,43 @@ Disabled.parameters = {
       story: 'The tooltip can be disabled without disabling the button press events.'
     }
   }
-};
+};
+
+var IconWithTooltip = function IconWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
+    variant: "tooltipIconButton"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PersonIcon["default"]
+  })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.IconWithTooltip = IconWithTooltip;
+
+var ChipWithTooltip = function ChipWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipChip",
+    bg: "neutral.10"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    sx: {
+      textTransform: 'uppercase'
+    },
+    color: "white"
+  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.ChipWithTooltip = ChipWithTooltip;
+
+var TextWithTooltip = function TextWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipInline"
+  }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.TextWithTooltip = TextWithTooltip;

package/lib/cjs/styles/variants/boxes.js

@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports["default"] = exports.chip = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 
@@ -131,6 +131,7 @@ var chip = {
     }
   }
 };
+exports.chip = chip;
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',

package/lib/cjs/styles/variants/buttons.js

@@ -32,6 +32,8 @@ var _text = require("./text");
 
 var _colors = require("../colors");
 
+var _boxes = require("./boxes");
+
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
@@ -102,6 +104,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -239,6 +245,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -467,6 +477,36 @@ var fileInputField = {
     boxShadow: 'focus'
   }
 };
+
+var tooltipChip = _objectSpread(_objectSpread({}, _boxes.chip), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+});
+
+var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -499,6 +539,11 @@ var _default = {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
-  applicationPortal: applicationPortal
+  applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
+  tooltipChip: tooltipChip,
+  tooltipIconButton: tooltipIconButton,
+  tooltipInline: tooltipInline
 };
 exports["default"] = _default;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -116,6 +116,12 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = useFilter({
     sensitivity: 'base'
@@ -123,6 +129,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: contains
   }));
 

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

@@ -330,6 +330,27 @@ export var ControlledFiltering = function ControlledFiltering() {
     }, item.name);
   }));
 };
+export var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var AllowCustomValue = function AllowCustomValue() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",

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

@@ -639,6 +639,41 @@ test('two listbox can not be open at the same time', function () {
     name: 'Tango'
   })).toBeInTheDocument();
 });
+test('should handle selecting custom option', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+  var input = screen.queryByRole('combobox');
+  expect(input).toHaveValue(''); // type something
+
+  userEvent.type(input, 'custom'); // set input value as selected
+
+  userEvent.type(input, '{enter}', {
+    skipClick: true
+  });
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
+
+  userEvent.tab();
+  expect(input).toHaveValue('custom');
+});
+test('onSelectionChange works properly with custom value', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    hasCustomValue: true,
+    onSelectionChange: onSelectionChange,
+    onInputChange: onSelectionChange
+  });
+  var input = screen.queryByRole('combobox');
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
+
+  userEvent.type(input, 'custom{enter}');
+  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
+
+  userEvent.type(input, '{selectall}{backspace}{enter}');
+  expect(onSelectionChange).toHaveBeenCalledWith('');
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var _getComponent6, container, results;
 

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

@@ -35,29 +35,23 @@ export default {
     isDisabled: {},
     variant: {
       control: {
-        type: 'none'
-      }
+        type: 'select',
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+      },
+      defaultValue: 'iconButton'
     }
   }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconButton, _extends({
-    "aria-label": "my-label"
+    "aria-label": "default icon button"
   }, args), ___EmotionJSX(Icon, {
     icon: CreateIcon
   }));
 };
-export var Inverted = function Inverted() {
-  return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
-    variant: "inverted"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon
-  }));
-};
 export var WithTooltip = function WithTooltip() {
   return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
+    "aria-label": "icon button with tooltip",
     title: "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon
@@ -65,7 +59,7 @@ export var WithTooltip = function WithTooltip() {
 };
 export var Disabled = function Disabled() {
   return ___EmotionJSX(IconButton, {
-    "aria-label": "my-label",
+    "aria-label": "disabled icon button",
     isDisabled: true
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon