@pingux/astro 2.53.1 → 2.54.0-alpha.0

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -27,6 +27,7 @@ var _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -131,7 +132,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, nonAriaProps, {
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('ArrayField'), nonAriaProps, {
     ref: ref
   }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _reactAria.mergeProps)(labelProps, raLabelProps, {
     children: label

package/lib/cjs/components/Button/Button.js

@@ -23,6 +23,7 @@ var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isDisabled", "isLoading", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressChange", "onPressEnd", "onPressStart", "onPressUp", "tabIndex", "variant"];
@@ -30,6 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 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; }
+var displayName = 'Button';
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -102,7 +104,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     } : {},
     variant: variant
-  }, others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, (0, _pendoID.getPendoID)(displayName), others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
   }), hoverProps, focusProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {
@@ -119,6 +121,6 @@ Button.defaultProps = {
   isDisabled: false,
   variant: 'default'
 };
-Button.displayName = 'Button';
+Button.displayName = displayName;
 var _default = Button;
 exports["default"] = _default;

package/lib/cjs/components/Calendar/Calendar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarProps } from '../../types';
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export default Calendar;

package/lib/cjs/components/Calendar/Calendar.js

@@ -28,7 +28,7 @@ var _calendar = require("@react-aria/calendar");
 var _i18n = require("@react-aria/i18n");
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _calendar2 = require("@react-stately/calendar");
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _CalendarGrid = _interopRequireDefault(require("./CalendarGrid"));
 var _react2 = require("@emotion/react");
@@ -45,12 +45,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value = props.value;
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
-  var calenderRef = (0, _react.useRef)();
-
-  // istanbul ignore next
-  (0, _react.useImperativeHandle)(ref, function () {
-    return calenderRef.current;
-  });
+  var calenderRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var parsedDates = {
     value: typeof value === 'string' && (0, _date.parseDate)(value) || value,
     defaultValue: typeof defaultValue === 'string' && (0, _date.parseDate)(defaultValue) || defaultValue,
@@ -64,11 +59,11 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     locale: locale,
     createCalendar: _date.createCalendar
   }));
-  var _useCalendar = (0, _calendar.useCalendar)(_objectSpread(_objectSpread({}, props), parsedDates), state, calenderRef),
-    calendarProps = _useCalendar.calendarProps,
-    prevButtonProps = _useCalendar.prevButtonProps,
-    nextButtonProps = _useCalendar.nextButtonProps,
-    title = _useCalendar.title;
+  var _ref = (0, _calendar.useCalendar)(_objectSpread(_objectSpread({}, props), parsedDates), state),
+    calendarProps = _ref.calendarProps,
+    prevButtonProps = _ref.prevButtonProps,
+    nextButtonProps = _ref.nextButtonProps,
+    title = _ref.title;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     yearChangeDirection = _useState2[0],
@@ -83,10 +78,12 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // after updating visible year, reapplies focus to corresponding year buttons
   (0, _react.useEffect)(function () {
     if (yearChangeDirection === nav.NEXT) {
-      nextYearRef.current.focus();
+      var _nextYearRef$current;
+      (_nextYearRef$current = nextYearRef.current) === null || _nextYearRef$current === void 0 ? void 0 : _nextYearRef$current.focus();
     }
     if (yearChangeDirection === nav.PREVIOUS) {
-      previousYearRef.current.focus();
+      var _previousYearRef$curr;
+      (_previousYearRef$curr = previousYearRef.current) === null || _previousYearRef$curr === void 0 ? void 0 : _previousYearRef$curr.focus();
     }
     setYearChangeDirection(null);
   }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
@@ -110,12 +107,13 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var renderTitle = (0, _react2.jsx)(_index.Text, {
     variant: "itemTitle",
     role: "heading",
-    "aria-level": "3",
+    "aria-level": 3,
     fontWeight: 3
   }, title);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
     ref: calenderRef,
-    variant: "calendar.calendarContainer"
+    variant: "calendar.calendarContainer",
+    role: "group"
   }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
     "aria-live": "assertive"
   }, (0, _react2.jsx)(_index.Text, null, title)), (0, _react2.jsx)(_index.Box, {
@@ -178,48 +176,5 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: -1
   })));
 });
-Calendar.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /** Prop to provide a custom default focused date (uncontrolled) */
-  defaultFocusedValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /** Prop to provide a default date (controlled) */
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /** custom week days for other calendars */
-  customWeekDays: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** The element's unique identifier. */
-  id: _propTypes["default"].string,
-  /**
-   * Callback that is called for each date of the calendar.
-   * If it returns true, then the date is unavailable.
-   *
-   * (date: DateValue) => boolean
-   */
-  isDateUnavailable: _propTypes["default"].func,
-  /** Whether the calendar is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the calendar dates are only focusable. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /** The maximum allowed date that a user may select. */
-  maxValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /** The minimum allowed date that a user may select. */
-  minValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /** Handler that is called when the element loses focus. */
-  onBlur: _propTypes["default"].func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: _propTypes["default"].func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: _propTypes["default"].func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: _propTypes["default"].func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: _propTypes["default"].func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func
-};
 var _default = Calendar;
 exports["default"] = _default;

package/lib/cjs/components/Calendar/Calendar.stories.d.ts

@@ -0,0 +1,212 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { CalendarProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+    decorators: ((...args: any) => any)[];
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
+        docs: {
+            source: {
+                type: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+    argTypes: {
+        'aria-controls': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        'aria-describedby': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        'aria-details': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        'aria-errormessage': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        'aria-label': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        'aria-labelledby': {
+            type: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+            };
+            description: string;
+        };
+        customWeekDays: {
+            control: {
+                type: string;
+            };
+        };
+        value: {
+            control: {
+                type: string;
+            };
+        };
+        defaultValue: {
+            control: {
+                type: string;
+            };
+        };
+        hasAutoFocus: {
+            control: {
+                type: string;
+            };
+        };
+        id: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isReadOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isRequired: {
+            control: {
+                type: string;
+            };
+        };
+        maxValue: {
+            control: {
+                type: string;
+            };
+        };
+        minValue: {
+            control: {
+                type: string;
+            };
+        };
+        onChange: {
+            control: {
+                type: string;
+            };
+            action: string;
+        };
+        onFocusChange: {
+            control: {
+                type: string;
+            };
+            action: string;
+        };
+    };
+    args: {
+        hasAutoFocus: boolean;
+        isDisabled: boolean;
+        isReadOnly: boolean;
+        isRequired: boolean;
+        onChange: null;
+        onFocusChange: null;
+        defaultFocusedValue: string;
+    };
+};
+export default _default;
+export declare const Default: StoryFn<CalendarProps>;
+export declare const DefaultValue: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Disabled: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const UnavailableDates: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const MinimumDate: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const MaximumDate: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Controlled: (args: any) => React.JSX.Element;

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

@@ -23,10 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _date = require("@internationalized/date");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _Calendar = _interopRequireDefault(require("./Calendar"));
-var _Calendar2 = _interopRequireDefault(require("./Calendar.mdx"));
+var _Calendar = _interopRequireDefault(require("./Calendar.mdx"));
+var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 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; }
@@ -34,7 +34,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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; }
 var _default = {
   title: 'Components/Calendar',
-  component: _Calendar["default"],
+  component: _["default"],
   decorators: [_storybookAddonDesigns.withDesign],
   parameters: {
     actions: {
@@ -45,7 +45,7 @@ var _default = {
         type: 'code'
       },
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Calendar2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Calendar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
   },
@@ -125,7 +125,7 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-default"
   }));
 };
@@ -137,7 +137,7 @@ Default.parameters = {
   }
 };
 var DefaultValue = function DefaultValue() {
-  return (0, _react2.jsx)(_Calendar["default"], {
+  return (0, _react2.jsx)(_["default"], {
     "aria-label": "calendar-with-default-value",
     defaultValue: "2030-01-15"
   });
@@ -150,7 +150,7 @@ DefaultValue.parameters = {
   }
 };
 var Disabled = function Disabled(args) {
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-disabled",
     isDisabled: true
   }));
@@ -170,7 +170,7 @@ var UnavailableDates = function UnavailableDates() {
       return date.compare((0, _date.parseDate)(interval[0])) >= 0 && date.compare((0, _date.parseDate)(interval[1])) <= 0;
     });
   };
-  return (0, _react2.jsx)(_Calendar["default"], {
+  return (0, _react2.jsx)(_["default"], {
     "aria-label": "calendar-component-unavailable-dates",
     defaultValue: "2030-08-07",
     isDateUnavailable: isDateUnavailable
@@ -184,7 +184,7 @@ UnavailableDates.parameters = {
   }
 };
 var MinimumDate = function MinimumDate() {
-  return (0, _react2.jsx)(_Calendar["default"], {
+  return (0, _react2.jsx)(_["default"], {
     "aria-label": "calendar-component-min-date",
     minValue: "2030-01-15",
     defaultValue: "2030-01-15"
@@ -198,7 +198,7 @@ MinimumDate.parameters = {
   }
 };
 var MaximumDate = function MaximumDate() {
-  return (0, _react2.jsx)(_Calendar["default"], {
+  return (0, _react2.jsx)(_["default"], {
     "aria-label": "calendar-component-max-date",
     maxValue: "2030-01-15",
     defaultValue: "2030-01-15"
@@ -216,7 +216,7 @@ var Controlled = function Controlled(args) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     date = _useState2[0],
     setDate = _useState2[1];
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-controlled",
     value: date,
     onChange: setDate

package/lib/cjs/components/Calendar/Calendar.styles.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    calendarBody: {
+        pb: string;
+        borderTop: string;
+        borderTopColor: string;
+        '& > tr:nth-of-type(odd) ': {
+            backgroundColor: string;
+        };
+    };
+    calendarButton: {
+        py: string;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        lineHeight: string;
+        width: string;
+        height: string;
+        '&.is-hovered': {
+            bg: string;
+            cursor: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            color: string;
+            outline: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-unavailable': {
+            backgroundColor: string;
+        };
+        '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+            backgroundColor: string;
+            color: string;
+            opacity: number;
+        };
+        '&.is-disabled': {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+        };
+    };
+    calendarCell: {
+        cursor: string;
+        textAlign: string;
+        position: string;
+        color: string;
+        padding: string;
+    };
+    calendarContainer: {
+        boxShadow: string;
+        textAlign: string;
+        maxWidth: string;
+    };
+    calendarHeader: {
+        justifyContent: string;
+        mt: string;
+        mb: string;
+        alignItems: string;
+    };
+    columnHeader: {
+        fontSize: string;
+        fontWeight: number;
+        width: string;
+        height: string;
+        mb: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Calendar/Calendar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -277,7 +277,7 @@ test('unavailable dates cannot be picked', function () {
     return cell.getAttribute('aria-disabled') === 'true';
   });
   expect(cells.length).toBe(9);
-  var disabledDate = _testWrapper.screen.queryByText(16);
+  var disabledDate = _testWrapper.screen.getByText(16);
   _userEvent["default"].click(disabledDate);
   expect(disabledDate).toHaveAttribute('aria-disabled', 'true');
   expect(disabledDate).not.toHaveClass('is-selected');
@@ -293,6 +293,6 @@ test('should autofocus on current day with hasAutoFocus', function () {
   var focusedDay = (0, _filter["default"])(_context7 = _testWrapper.screen.queryAllByText(day)).call(_context7, function (cell) {
     return cell.getAttribute('aria-disabled') !== 'true';
   });
-  expect(focusedDay[0]).toHaveTextContent(day);
+  expect(focusedDay[0]).toHaveTextContent(day.toString());
   expect(focusedDay[0]).toHaveFocus();
 });

package/lib/cjs/components/Calendar/CalendarCell.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CalendarCellProps } from '../../types';
+/**
+* Grid cell button element with the formatted day number.
+* Utilizes the useCalendarCell hook to return  props for an individual cell,
+* along with states and information.
+*/
+declare const CalendarCell: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLDivElement>>;
+export default CalendarCell;

package/lib/cjs/components/Calendar/CalendarCell.js

@@ -16,28 +16,24 @@ var _calendar = require("@react-aria/calendar");
 var _focus = require("@react-aria/focus");
 var _interactions = require("@react-aria/interactions");
 var _utils = require("@react-aria/utils");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["state", "date", "className"];
+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; }
 /**
 * Grid cell button element with the formatted day number.
 * Utilizes the useCalendarCell hook to return  props for an individual cell,
 * along with states and information.
 */
-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; }
+
 var CalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = props.state,
     date = props.date,
     className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var cellRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return cellRef.current;
-  });
+  var cellRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useCalendarCell = (0, _calendar.useCalendarCell)({
       date: date
     }, state, cellRef),
@@ -59,11 +55,11 @@ var CalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var handleDisableClick = (0, _react.useCallback)(function () {
     var _cellRef$current, _cellRef$current2;
-    if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && formattedDate > 20) {
-      setFocused(undefined);
+    if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && Number(formattedDate) > 20) {
+      setFocused(false);
       focusPreviousPage();
-    } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && formattedDate < 15) {
-      setFocused(undefined);
+    } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && Number(formattedDate) < 15) {
+      setFocused(false);
       focusNextPage();
     }
   }, [date, focusNextPage, focusPreviousPage, formattedDate, state, setFocused]);
@@ -98,28 +94,13 @@ var CalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "calendar.calendarButton",
     ref: cellRef,
-    hidden: isOutsideVisibleRange,
+    hidden: isOutsideVisibleRange
+  }, (0, _utils.mergeProps)(buttonProps, others), {
     isSelected: isSelected,
     isDisabled: isDisabled,
     isUnavailable: isUnavailable,
     className: classNames
-  }, (0, _utils.mergeProps)(buttonProps, others)), formattedDate));
+  }), formattedDate));
 });
-CalendarCell.propTypes = {
-  isSelected: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isOutsideVisibleRange: _propTypes["default"].bool,
-  isUnavailable: _propTypes["default"].bool,
-  formattedDate: _propTypes["default"].string,
-  state: _propTypes["default"].shape({
-    focusPreviousPage: _propTypes["default"].func,
-    setValue: _propTypes["default"].func,
-    focusNextPage: _propTypes["default"].func,
-    setFocused: _propTypes["default"].func,
-    setFocusedDate: _propTypes["default"].func,
-    isDisabled: _propTypes["default"].bool
-  }),
-  date: _propTypes["default"].shape({})
-};
 var _default = CalendarCell;
 exports["default"] = _default;