@pingux/astro 2.4.0 → 2.4.1-alpha.1

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

@@ -39,7 +39,7 @@ var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _DateSegment = _interopRequireDefault(require("./DateSegment"));
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
   _excluded2 = ["defaultValue"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,6 +57,7 @@ var ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
 var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _labelRef$current, _context3;
   var buttonProps = props.buttonProps,
+    className = props.className,
     fieldProps = props.fieldProps,
     groupProps = props.groupProps,
     groupRef = props.groupRef,
@@ -90,6 +91,11 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     locale: locale,
     createCalendar: _date.createCalendar
   }));
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var segments = state.segments;
   var setValue = datePickerState.setValue;
   var _useDateField = (0, _datepicker.useDateField)(_objectSpread({}, fieldProps), state, fieldRef),
@@ -214,7 +220,8 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inSlotContainer"
   }, groupProps, {
-    ref: groupRef
+    ref: groupRef,
+    className: classNames
   }), (0, _react2.jsx)(_index.Box, fieldControlWrapperProps, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({
     ref: inputRef,
     tabIndex: -1,
@@ -226,7 +233,8 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inputField"
   }, dateFieldProps, {
-    ref: fieldRef
+    ref: fieldRef,
+    className: classNames
   }), (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _map["default"])(_context3 = locale === 'en-US' ? enUSSegments : segments).call(_context3, function (segment, index) {
     return (0, _react2.jsx)(_DateSegment["default"], (0, _extends2["default"])({
       key: getKey(segment, index),

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

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
   _excluded2 = ["defaultValue"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -28,7 +28,7 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useDateFieldState } from '@react-stately/datepicker';
 import CalendarIcon from 'mdi-react/CalendarIcon';
 import PropTypes from 'prop-types';
-import { useField } from '../../hooks';
+import { useField, useStatusClasses } from '../../hooks';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import DateSegment from './DateSegment';
@@ -45,6 +45,7 @@ var ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
 var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _labelRef$current, _context3;
   var buttonProps = props.buttonProps,
+    className = props.className,
     fieldProps = props.fieldProps,
     groupProps = props.groupProps,
     groupRef = props.groupRef,
@@ -78,6 +79,11 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     locale: locale,
     createCalendar: createCalendar
   }));
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var segments = state.segments;
   var setValue = datePickerState.setValue;
   var _useDateField = useDateField(_objectSpread({}, fieldProps), state, fieldRef),
@@ -202,7 +208,8 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inSlotContainer"
   }, groupProps, {
-    ref: groupRef
+    ref: groupRef,
+    className: classNames
   }), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Input, _extends({
     ref: inputRef,
     tabIndex: -1,
@@ -214,7 +221,8 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inputField"
   }, dateFieldProps, {
-    ref: fieldRef
+    ref: fieldRef,
+    className: classNames
   }), ___EmotionJSX(FocusScope, null, _mapInstanceProperty(_context3 = locale === 'en-US' ? enUSSegments : segments).call(_context3, function (segment, index) {
     return ___EmotionJSX(DateSegment, _extends({
       key: getKey(segment, index),

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.0",
+  "version": "2.4.1-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",