@pingux/astro 2.5.2-alpha.1 → 2.5.2-alpha.3

package/lib/cjs/components/DatePicker/DateField.js

@@ -243,7 +243,9 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isRequired: isRequired,
-      handlePaste: handlePaste
+      segments: locale === 'en-US' ? enUSSegments : segments,
+      handlePaste: handlePaste,
+      segmentIndex: index
     }, other));
   })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     variant: "datePicker.containedIcon",

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

@@ -506,7 +506,7 @@ test('dateField should handle min, max or next available date if the pasted date
   (0, _testWrapper.fireEvent)(month, unavailablePaste);
   expect(_testWrapper.screen.queryByTestId('date-field')).toHaveValue('2022-08-04');
 });
-test('dateField should handle autofocus when deleting segments ', function () {
+test('dateField should handle autofocus when deleting segments right to left', function () {
   getComponent({
     defaultValue: '2022-08-10'
   });
@@ -548,6 +548,133 @@ test('dateField should handle autofocus when deleting segments ', function () {
   }
   expect(hiddenInput).toHaveValue('');
 });
+test('dateField should handle autofocus when deleting segments left to right', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  (0, _testWrapper.act)(function () {
+    year.focus();
+  });
+  expect(year).toHaveFocus();
+  for (var i = 0; i < 4; i += 1) {
+    _testWrapper.fireEvent.keyDown(year, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(year, {
+      key: 'Backspace'
+    });
+  }
+  expect(month).toHaveFocus();
+  for (var _i5 = 0; _i5 < 2; _i5 += 1) {
+    _testWrapper.fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  expect(day).toHaveFocus();
+  for (var _i6 = 0; _i6 < 2; _i6 += 1) {
+    _testWrapper.fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  expect(hiddenInput).toHaveValue('');
+});
+test('dateField should handle autofocus when deleting segments from middle', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  (0, _testWrapper.act)(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  for (var i = 0; i < 2; i += 1) {
+    _testWrapper.fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  expect(year).toHaveFocus();
+  for (var _i7 = 0; _i7 < 4; _i7 += 1) {
+    _testWrapper.fireEvent.keyDown(year, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(year, {
+      key: 'Backspace'
+    });
+  }
+  expect(day).toHaveFocus();
+  for (var _i8 = 0; _i8 < 2; _i8 += 1) {
+    _testWrapper.fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  _testWrapper.fireEvent.keyDown(year, {
+    key: 'Backspace'
+  });
+  _testWrapper.fireEvent.keyUp(year, {
+    key: 'Backspace'
+  });
+  expect(day).toHaveFocus();
+  expect(hiddenInput).toHaveValue('');
+});
+test('segment focus should move to the year if month is already empty', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  (0, _testWrapper.act)(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  for (var i = 0; i < 2; i += 1) {
+    _testWrapper.fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  (0, _testWrapper.act)(function () {
+    day.focus();
+  });
+  expect(day).toHaveFocus();
+  for (var _i9 = 0; _i9 < 2; _i9 += 1) {
+    _testWrapper.fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    _testWrapper.fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  expect(year).toHaveFocus();
+});
 test('should add the correct number of padded 0 to year, month and day', function () {
   getComponent({
     defaultValue: '0009-08-02'

package/lib/cjs/components/DatePicker/DateSegment.js

@@ -25,7 +25,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DateSegment = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var segment = props.segment,
     state = props.state,
-    handlePaste = props.handlePaste;
+    handlePaste = props.handlePaste,
+    segments = props.segments,
+    segmentIndex = props.segmentIndex;
   var segmentRef = (0, _react.useRef)();
   // istanbul ignore next
   (0, _react.useImperativeHandle)(ref, function () {
@@ -41,10 +43,29 @@ var DateSegment = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
    */
   var focusManager = (0, _reactAria.useFocusManager)();
   var handleKeyEvents = (0, _react.useCallback)(function (e) {
-    if (e.key === 'Backspace' && isPlaceholder && (text === 'mm' || text === 'dd')) {
-      focusManager.focusPrevious();
+    var getSegmentValue = function getSegmentValue(index) {
+      var isNumber = /^\d+$/.test(segments[index].text);
+      return isNumber;
+    };
+    if (e.key === 'Backspace' && isPlaceholder) {
+      switch (segmentIndex) {
+        case 0:
+          if (getSegmentValue(2)) return focusManager.focusNext();
+          if (!getSegmentValue(2) && getSegmentValue(4)) return focusManager.focusLast();
+          break;
+        case 2:
+          if (getSegmentValue(0)) return focusManager.focusPrevious();
+          if (getSegmentValue(4)) return focusManager.focusNext();
+          break;
+        case 4:
+          if (getSegmentValue(2)) return focusManager.focusPrevious();
+          if (!getSegmentValue(2) && getSegmentValue(0)) return focusManager.focusFirst();
+          break;
+        default:
+      }
     }
-  }, [focusManager, segment, text, isPlaceholder]);
+    return null;
+  }, [focusManager, segment, isPlaceholder]);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, segmentProps, {
     ref: segmentRef,
     variant: "forms.datePicker.segment",
@@ -61,6 +82,12 @@ DateSegment.propTypes = {
     value: _propTypes["default"].number,
     type: _propTypes["default"].string
   }),
+  /** index value of each segment */
+  segmentIndex: _propTypes["default"].number,
+  /** An array of segments */
+  segments: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    text: _propTypes["default"].string
+  })),
   /** state returned by useDateField */
   state: _propTypes["default"].shape({}),
   /**

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

@@ -89,7 +89,8 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasNoArrow: hasNoArrow,
     arrowCrossOffset: arrowCrossOffset,
     width: width,
-    direction: direction
+    direction: direction,
+    isNonModal: true
   }, positionProps, tooltipProps), tooltip);
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_interactions.PressResponder, (0, _extends2["default"])({}, triggerProps, {
     ref: tooltipTriggerRef

package/lib/components/DatePicker/DateField.js

@@ -231,7 +231,9 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isRequired: isRequired,
-      handlePaste: handlePaste
+      segments: locale === 'en-US' ? enUSSegments : segments,
+      handlePaste: handlePaste,
+      segmentIndex: index
     }, other));
   })), ___EmotionJSX(IconButton, _extends({
     variant: "datePicker.containedIcon",

package/lib/components/DatePicker/DatePicker.test.js

@@ -499,7 +499,7 @@ test('dateField should handle min, max or next available date if the pasted date
   fireEvent(month, unavailablePaste);
   expect(screen.queryByTestId('date-field')).toHaveValue('2022-08-04');
 });
-test('dateField should handle autofocus when deleting segments ', function () {
+test('dateField should handle autofocus when deleting segments right to left', function () {
   getComponent({
     defaultValue: '2022-08-10'
   });
@@ -541,6 +541,133 @@ test('dateField should handle autofocus when deleting segments ', function () {
   }
   expect(hiddenInput).toHaveValue('');
 });
+test('dateField should handle autofocus when deleting segments left to right', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  act(function () {
+    year.focus();
+  });
+  expect(year).toHaveFocus();
+  for (var i = 0; i < 4; i += 1) {
+    fireEvent.keyDown(year, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(year, {
+      key: 'Backspace'
+    });
+  }
+  expect(month).toHaveFocus();
+  for (var _i5 = 0; _i5 < 2; _i5 += 1) {
+    fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  expect(day).toHaveFocus();
+  for (var _i6 = 0; _i6 < 2; _i6 += 1) {
+    fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  expect(hiddenInput).toHaveValue('');
+});
+test('dateField should handle autofocus when deleting segments from middle', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  act(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  for (var i = 0; i < 2; i += 1) {
+    fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  expect(year).toHaveFocus();
+  for (var _i7 = 0; _i7 < 4; _i7 += 1) {
+    fireEvent.keyDown(year, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(year, {
+      key: 'Backspace'
+    });
+  }
+  expect(day).toHaveFocus();
+  for (var _i8 = 0; _i8 < 2; _i8 += 1) {
+    fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  fireEvent.keyDown(year, {
+    key: 'Backspace'
+  });
+  fireEvent.keyUp(year, {
+    key: 'Backspace'
+  });
+  expect(day).toHaveFocus();
+  expect(hiddenInput).toHaveValue('');
+});
+test('segment focus should move to the year if month is already empty', function () {
+  getComponent({
+    defaultValue: '2022-08-10'
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  var month = inputButtons[1];
+  var day = inputButtons[2];
+  expect(hiddenInput).toHaveValue('2022-08-10');
+  act(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  for (var i = 0; i < 2; i += 1) {
+    fireEvent.keyDown(month, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(month, {
+      key: 'Backspace'
+    });
+  }
+  act(function () {
+    day.focus();
+  });
+  expect(day).toHaveFocus();
+  for (var _i9 = 0; _i9 < 2; _i9 += 1) {
+    fireEvent.keyDown(day, {
+      key: 'Backspace'
+    });
+    fireEvent.keyUp(day, {
+      key: 'Backspace'
+    });
+  }
+  expect(year).toHaveFocus();
+});
 test('should add the correct number of padded 0 to year, month and day', function () {
   getComponent({
     defaultValue: '0009-08-02'

package/lib/components/DatePicker/DateSegment.js

@@ -13,7 +13,9 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
   var segment = props.segment,
     state = props.state,
-    handlePaste = props.handlePaste;
+    handlePaste = props.handlePaste,
+    segments = props.segments,
+    segmentIndex = props.segmentIndex;
   var segmentRef = useRef();
   // istanbul ignore next
   useImperativeHandle(ref, function () {
@@ -29,10 +31,29 @@ var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
    */
   var focusManager = useFocusManager();
   var handleKeyEvents = useCallback(function (e) {
-    if (e.key === 'Backspace' && isPlaceholder && (text === 'mm' || text === 'dd')) {
-      focusManager.focusPrevious();
+    var getSegmentValue = function getSegmentValue(index) {
+      var isNumber = /^\d+$/.test(segments[index].text);
+      return isNumber;
+    };
+    if (e.key === 'Backspace' && isPlaceholder) {
+      switch (segmentIndex) {
+        case 0:
+          if (getSegmentValue(2)) return focusManager.focusNext();
+          if (!getSegmentValue(2) && getSegmentValue(4)) return focusManager.focusLast();
+          break;
+        case 2:
+          if (getSegmentValue(0)) return focusManager.focusPrevious();
+          if (getSegmentValue(4)) return focusManager.focusNext();
+          break;
+        case 4:
+          if (getSegmentValue(2)) return focusManager.focusPrevious();
+          if (!getSegmentValue(2) && getSegmentValue(0)) return focusManager.focusFirst();
+          break;
+        default:
+      }
     }
-  }, [focusManager, segment, text, isPlaceholder]);
+    return null;
+  }, [focusManager, segment, isPlaceholder]);
   return ___EmotionJSX(Box, _extends({}, segmentProps, {
     ref: segmentRef,
     variant: "forms.datePicker.segment",
@@ -49,6 +70,12 @@ DateSegment.propTypes = {
     value: PropTypes.number,
     type: PropTypes.string
   }),
+  /** index value of each segment */
+  segmentIndex: PropTypes.number,
+  /** An array of segments */
+  segments: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string
+  })),
   /** state returned by useDateField */
   state: PropTypes.shape({}),
   /**

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -77,7 +77,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     hasNoArrow: hasNoArrow,
     arrowCrossOffset: arrowCrossOffset,
     width: width,
-    direction: direction
+    direction: direction,
+    isNonModal: true
   }, positionProps, tooltipProps), tooltip);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PressResponder, _extends({}, triggerProps, {
     ref: tooltipTriggerRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.5.2-alpha.1",
+  "version": "2.5.2-alpha.3",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",