@pingux/astro 2.4.1-alpha.0 → 2.4.1-alpha.1

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

@@ -548,6 +548,17 @@ test('dateField should handle autofocus when deleting segments ', function () {
   }
   expect(hiddenInput).toHaveValue('');
 });
+test('should add the correct number of padded 0 to year, month and day', function () {
+  getComponent({
+    defaultValue: '0009-08-02'
+  });
+  expect(_testWrapper.screen.queryByTestId('date-field')).toHaveValue('0009-08-02');
+  _userEvent["default"].click(_testWrapper.screen.queryByRole('button'));
+  var dateButtons = _testWrapper.screen.queryAllByRole('button');
+  expect(dateButtons[5]).toHaveAttribute('aria-label', 'Saturday, August 1, 9');
+  _userEvent["default"].click(dateButtons[5]);
+  expect(_testWrapper.screen.queryByTestId('date-field')).toHaveValue('0009-08-01');
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var _getComponent, container, results;
   return _regeneratorRuntime().wrap(function _callee3$(_context10) {

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

@@ -10,6 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _padStart = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/pad-start"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _datepicker = require("@react-aria/datepicker");
@@ -36,7 +37,7 @@ var DateSegment = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     segmentProps = _useDateSegment.segmentProps;
 
   /**
-   * Handler to autofocus segments when using deleting them
+   * Handler to autofocus segments when using delete key
    */
   var focusManager = (0, _reactAria.useFocusManager)();
   var handleKeyEvents = (0, _react.useCallback)(function (e) {
@@ -49,7 +50,7 @@ var DateSegment = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.datePicker.segment",
     onKeyUp: handleKeyEvents,
     onPaste: handlePaste
-  }), text === '/' ? '-' : text);
+  }), text === '/' ? '-' : (0, _padStart["default"])(text).call(text, segment.type === 'year' ? 4 : 2, 0));
 });
 DateSegment.propTypes = {
   /** slot for input that indicates each date segment */
@@ -57,7 +58,8 @@ DateSegment.propTypes = {
     isPlaceholder: _propTypes["default"].bool,
     text: _propTypes["default"].string,
     placeholder: _propTypes["default"].string,
-    value: _propTypes["default"].number
+    value: _propTypes["default"].number,
+    type: _propTypes["default"].string
   }),
   /** state returned by useDateField */
   state: _propTypes["default"].shape({}),

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

@@ -541,6 +541,17 @@ test('dateField should handle autofocus when deleting segments ', function () {
   }
   expect(hiddenInput).toHaveValue('');
 });
+test('should add the correct number of padded 0 to year, month and day', function () {
+  getComponent({
+    defaultValue: '0009-08-02'
+  });
+  expect(screen.queryByTestId('date-field')).toHaveValue('0009-08-02');
+  userEvent.click(screen.queryByRole('button'));
+  var dateButtons = screen.queryAllByRole('button');
+  expect(dateButtons[5]).toHaveAttribute('aria-label', 'Saturday, August 1, 9');
+  userEvent.click(dateButtons[5]);
+  expect(screen.queryByTestId('date-field')).toHaveValue('0009-08-01');
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var _getComponent, container, results;
   return _regeneratorRuntime().wrap(function _callee3$(_context10) {

package/lib/components/DatePicker/DateSegment.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _padStartInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/pad-start";
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { useFocusManager } from 'react-aria';
 import { useDateSegment } from '@react-aria/datepicker';
@@ -24,7 +25,7 @@ var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
     segmentProps = _useDateSegment.segmentProps;
 
   /**
-   * Handler to autofocus segments when using deleting them
+   * Handler to autofocus segments when using delete key
    */
   var focusManager = useFocusManager();
   var handleKeyEvents = useCallback(function (e) {
@@ -37,7 +38,7 @@ var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.datePicker.segment",
     onKeyUp: handleKeyEvents,
     onPaste: handlePaste
-  }), text === '/' ? '-' : text);
+  }), text === '/' ? '-' : _padStartInstanceProperty(text).call(text, segment.type === 'year' ? 4 : 2, 0));
 });
 DateSegment.propTypes = {
   /** slot for input that indicates each date segment */
@@ -45,7 +46,8 @@ DateSegment.propTypes = {
     isPlaceholder: PropTypes.bool,
     text: PropTypes.string,
     placeholder: PropTypes.string,
-    value: PropTypes.number
+    value: PropTypes.number,
+    type: PropTypes.string
   }),
   /** state returned by useDateField */
   state: PropTypes.shape({}),

package/package.json

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