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

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.styles.js

@@ -14,7 +14,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.containedIcon = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _Buttons = require("../Button/Buttons.styles");
 var _Input = require("../Input/Input.styles");
 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; }
@@ -26,7 +25,7 @@ var inputField = _objectSpread(_objectSpread({}, _Input.input), {}, {
   width: 'auto',
   pr: 'xl',
   position: 'relative',
-  '&:focus-within:not(.is-read-only)': _objectSpread({}, _Buttons.defaultFocus),
+  '&:focus-within:not(.is-read-only)': _objectSpread({}, _Input.defaultFocus),
   ':hover': {
     cursor: 'text'
   },

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/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.styles.js

@@ -9,8 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
-import { defaultFocus } from '../Button/Buttons.styles';
-import { input } from '../Input/Input.styles';
+import { defaultFocus, input } from '../Input/Input.styles';
 var inSlotContainer = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, {
   position: 'relative',
   width: 'fit-content'

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/package.json

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