@pingux/astro 2.219.0 → 2.220.0-alpha.0

package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.d.ts

@@ -1,15 +1,22 @@
 declare const _default: {
     containerLi: {
         flex: string;
+        textWrap: string;
+        textOverflow: string;
+        whiteSpace: string;
         minWidth: string;
         '&.is-current': {
             flex: string;
+            overflow: string;
         };
     };
     containerOl: {
         alignItems: string;
         minHeight: number;
+        minWidth: number;
+        maxWidth: string;
         paddingInlineStart: string;
+        gap: string;
         'a.is-hovered.is-current ': {
             textDecoration: string;
         };

package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.js

@@ -31,16 +31,23 @@ var link = _objectSpread(_objectSpread(_objectSpread({}, _Text.text.textEllipsis
 var containerOl = {
   alignItems: 'center',
   minHeight: 42,
+  minWidth: 0,
+  maxWidth: 'fit-content',
   paddingInlineStart: 'unset',
+  gap: 'xs',
   'a.is-hovered.is-current ': {
     textDecoration: 'none'
   }
 };
 var containerLi = {
-  flex: '0 1000000 auto',
+  flex: '1 2 auto',
+  textWrap: 'nowrap',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
   minWidth: breadcrumbMinWidth,
   '&.is-current': {
-    flex: '0 1 auto'
+    flex: '2 1 auto',
+    overflow: 'visible'
   }
 };
 var _default = exports["default"] = {

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -17,15 +17,17 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.ELEMENT_TYPE = void 0;
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _deleteProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/reflect/delete-property"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 var _object = require("lodash/object");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"];
+var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent", "isTooltipOpen", "onTooltipHoverChange"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -42,8 +44,14 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onAction = props.onAction,
     actionKey = props.actionKey,
     isCurrent = props.isCurrent,
+    isTooltipOpen = props.isTooltipOpen,
+    onTooltipHoverChange = props.onTooltipHoverChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var itemRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onTooltipHoverChange
+    }),
+    hoverProps = _useHover.hoverProps;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useBreadcrumbItem = (0, _reactAria.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
@@ -88,11 +96,16 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, elementProps), {}, {
     role: isCurrent ? 'text' : 'link'
   });
-  return (0, _react2.jsx)(_index.Box, {
+  var isFragment = elementType === ELEMENT_TYPE.FRAGMENT;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "li",
     className: isCurrent ? 'is-current' : '',
     variant: "variants.breadcrumb.containerLi"
-  }, (0, _react2.jsx)(BreadcrumbItemElementType, elementVariantProps, children));
+  }, !isFragment && hoverProps), isFragment ? (0, _react2.jsx)(BreadcrumbItemElementType, elementVariantProps, children) : (0, _react2.jsx)(_index.TooltipTrigger, {
+    direction: "top",
+    isOpen: isTooltipOpen,
+    targetRef: itemRef
+  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(BreadcrumbItemElementType, elementVariantProps, children)), (0, _react2.jsx)(_index.Tooltip, null, children)));
 });
 BreadcrumbItem.defaultProps = {
   elementType: 'Link'

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -13,6 +13,7 @@ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
@@ -29,8 +30,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onAction = props.onAction,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    breadcrumbIconSize = _useGetTheme.breadcrumbIconSize,
-    breadcrumbIconMargin = _useGetTheme.breadcrumbIconMargin;
+    breadcrumbIconSize = _useGetTheme.breadcrumbIconSize;
 
   // the following filters undefined values passed as a child
   var filteredChildren = (0, _isArray["default"])(children) ? (0, _filter["default"])(children).call(children, function (child) {
@@ -39,19 +39,30 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useBreadcrumbs = (0, _reactAria.useBreadcrumbs)(props),
     wrapperProps = _useBreadcrumbs.navProps;
   var breadcrumbsRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hoveredKey = _useState2[0],
+    setHoveredKey = _useState2[1];
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
     var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === _react["default"].Children.toArray(children).length - 1 : true;
+    var handleTooltipHoverChange = function handleTooltipHoverChange(isHovering) {
+      setHoveredKey(function (prevKey) {
+        if (isHovering) return child.key;
+        return prevKey === child.key ? null : prevKey;
+      });
+    };
     return (0, _react2.jsx)(_react["default"].Fragment, {
       key: "li-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
       actionKey: child.key,
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
-      onAction: onAction
+      isTooltipOpen: hoveredKey === child.key,
+      onAction: onAction,
+      onTooltipHoverChange: handleTooltipHoverChange
     }, child.props), child.props.children), icon && !isCurrentItem && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
       "aria-hidden": "true",
-      mx: breadcrumbIconMargin,
       size: breadcrumbIconSize,
       title: {
         name: 'Breadcrumb Separator'
@@ -60,9 +71,15 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       color: "text.primary",
       icon: icon
     })));
-  }, [(0, _isArray["default"])(children) && children.length, filteredChildren, icon, iconProps, onAction]);
-  return (0, _react2.jsx)("nav", {
-    "aria-label": "Breadcrumb"
+  }, [(0, _isArray["default"])(children) && children.length, filteredChildren, icon, iconProps, onAction, hoveredKey]);
+  return (0, _react2.jsx)(_index.Box, {
+    as: "nav",
+    "aria-label": "Breadcrumb",
+    sx: {
+      display: 'flex',
+      minWidth: 0,
+      width: '100%'
+    }
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "ol",
     isRow: true,

package/lib/cjs/components/DatePicker/DateField.d.ts

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

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

@@ -19,7 +19,6 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -33,13 +32,12 @@ var _datepicker = require("@react-aria/datepicker");
 var _i18n = require("@react-aria/i18n");
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _datepicker2 = require("@react-stately/datepicker");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 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", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges", "fieldControlProps"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "isQuiet", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges", "fieldControlProps", "hasAutoFocus"],
   _excluded2 = ["defaultValue"];
 /**
  * DateFields allow users to enter and edit date using a keyboard.
@@ -61,24 +59,32 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     groupRef = props.groupRef,
     hasFormatHelpText = props.hasFormatHelpText,
     helperText = props.helperText,
-    isDisabled = props.isDisabled,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     isOpen = props.isOpen,
-    isReadOnly = props.isReadOnly,
-    isRequired = props.isRequired,
-    status = props.status,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$isQuiet = props.isQuiet,
+    isQuiet = _props$isQuiet === void 0 ? false : _props$isQuiet,
+    _props$status = props.status,
+    status = _props$status === void 0 ? _statuses["default"].DEFAULT : _props$status,
     datePickerState = props.datePickerState,
     minValue = props.minValue,
     maxValue = props.maxValue,
     unavailableRanges = props.unavailableRanges,
     fieldControlProps = props.fieldControlProps,
+    _props$hasAutoFocus = props.hasAutoFocus,
+    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     errorMessage = _useState2[0],
     setErrorMessage = _useState2[1];
-  var fieldRef = (0, _react.useRef)();
-  var inputRef = (0, _react.useRef)();
-  var labelRef = (0, _react.useRef)();
+  var fieldRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var labelRef = (0, _react.useRef)(null);
 
   // istanbul ignore next
   (0, _react.useImperativeHandle)(ref, function () {
@@ -96,7 +102,8 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, "is-".concat(status), true)),
     classNames = _useStatusClasses.classNames;
   var segments = state.segments;
-  var setValue = datePickerState.setValue;
+  var _ref = datePickerState || {},
+    setValue = _ref.setValue;
   var _useDateField = (0, _datepicker.useDateField)(_objectSpread({}, fieldProps), state, fieldRef),
     dateFieldProps = _useDateField.fieldProps;
 
@@ -107,7 +114,7 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var defaultValue = props.defaultValue,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, others), {}, {
-      value: state.value || ''
+      value: state.value ? String(state.value) : ''
     })),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldControlInputProps = _useField.fieldControlInputProps,
@@ -173,7 +180,7 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var copiedValue = e.clipboardData.getData('text');
     var isNextAvailableDate;
     var handleSetDateValue = function handleSetDateValue(isDate) {
-      setValue(isDate);
+      if (setValue) setValue(isDate);
     };
     if (isLocalEnUS && !isDisabled && !isReadOnly) {
       try {
@@ -187,10 +194,10 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           // pastes the min/max/isNextAvailable date if the pasted value is
           // min date, beyond max date or is an unavailable date.
 
-          if (DateProps.isValidDate <= DateProps.isMinValue) {
+          if (DateProps.isMinValue && DateProps.isValidDate <= DateProps.isMinValue) {
             return handleSetDateValue(DateProps.isMinValue);
           }
-          if (DateProps.isValidDate >= DateProps.isMaxValue) {
+          if (DateProps.isMaxValue && DateProps.isValidDate >= DateProps.isMaxValue) {
             return handleSetDateValue(DateProps.isMaxValue);
           }
           if (unavailableRanges) {
@@ -226,10 +233,11 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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,
     type: "date/text",
     "data-testid": "date-field"
-  }, fieldControlInputProps, {
+  }, _objectSpread({
+    tabIndex: -1
+  }, fieldControlInputProps), {
     "aria-labelledby": labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.id
   })))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isRow: true,
@@ -270,66 +278,4 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: "error"
   }, errorMessage)));
 });
-DateField.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: _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]),
-  /** Props object that is spread directly into the calendar button element. */
-  buttonProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: _propTypes["default"].shape({}),
-  /** state management for a date picker component */
-  datePickerState: _propTypes["default"].shape({
-    setValue: _propTypes["default"].func
-  }),
-  /** @ignore Props object that is spread directly into the segmented date field. */
-  fieldProps: _propTypes["default"].shape({}),
-  /** @ignore Props passed to the box surrounding the input, button, and helper text. */
-  groupProps: _propTypes["default"].shape({}),
-  /** @ignore Ref which is passed to the role="group" element. */
-  groupRef: _propTypes["default"].shape({}),
-  /** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Text rendered below the input displaying the expected date format for the user's locale. */
-  hasFormatHelpText: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes["default"].shape({}),
-  /** Whether the field is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the overlay is currently open. */
-  isOpen: _propTypes["default"].bool,
-  /** Whether the input can be selected, but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether the field is required. */
-  isRequired: _propTypes["default"].bool,
-  /** Whether the field is quiet. */
-  isQuiet: _propTypes["default"].bool,
-  /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({}),
-  /** 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's selection state changes. */
-  onChange: _propTypes["default"].func,
-  /** Determines the input status indicator and helper text styling. */
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-  /** The ranges of unavailable dates passed  */
-  unavailableRanges: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string)),
-  /** Props object that is spread directly into the input wrapper element. */
-  wrapperProps: _propTypes["default"].shape({}),
-  /** Props object that spread into date segment wrapper element. */
-  fieldControlProps: _propTypes["default"].shape({})
-};
-DateField.defaultProps = {
-  hasAutoFocus: false,
-  isDisabled: false,
-  isQuiet: false,
-  isReadOnly: false,
-  isRequired: false,
-  status: _statuses["default"].DEFAULT
-};
 var _default = exports["default"] = DateField;

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

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

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

@@ -15,7 +15,6 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -25,12 +24,10 @@ var _focus = require("@react-aria/focus");
 var _utils = require("@react-aria/utils");
 var _datepicker2 = require("@react-stately/datepicker");
 var _object = require("lodash/object");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
-var _Popover = _interopRequireDefault(require("../Popover/Popover"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _isDateWithinRanges = require("../../utils/devUtils/props/isDateWithinRanges");
+var _Popover = _interopRequireDefault(require("../Popover/Popover"));
 var _DateField = _interopRequireDefault(require("./DateField"));
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -38,14 +35,26 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * Console Warning: The state update warning is a known issue coming from the react-aria library.
  * The `is-selected` class is added to the button after the component unmounts.
+ */ /**
+ * Parse a prop that may be a DateValue object or a date string.
+ * Strings are parsed with parseDate.
  */
+var parseDateProp = function parseDateProp(val) {
+  if (!val) return undefined;
+  return typeof val === 'string' ? (0, _date.parseDate)(val) : val;
+};
 var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var defaultValue = props.defaultValue,
     hasAutoFocus = props.hasAutoFocus,
     helperText = props.helperText,
     helpHintProps = props.helpHintProps,
     isDefaultOpen = props.isDefaultOpen,
-    isReadOnly = props.isReadOnly,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
     maxValue = props.maxValue,
     minValue = props.minValue,
     status = props.status,
@@ -53,8 +62,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     unavailableRanges = props.unavailableRanges,
     fieldControlProps = props.fieldControlProps,
     calendarWrapperProps = props.calendarWrapperProps;
-  var groupRef = (0, _react.useRef)();
-  var popoverRef = (0, _react.useRef)();
+  var groupRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
 
   /**
    *  This function is run against each date in the calendar
@@ -67,11 +76,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
    * To accept date value as an object or as a string in format YYYY-MM-DD
    */
   var parsedDates = {
-    value: value || value && (0, _date.parseDate)(value),
-    defaultValue: defaultValue && (0, _date.parseDate)(defaultValue),
-    maxValue: maxValue && (0, _date.parseDate)(maxValue),
-    minValue: minValue && (0, _date.parseDate)(minValue),
-    isDateUnavailable: unavailableRanges && isDateUnavailable
+    value: parseDateProp(value),
+    defaultValue: parseDateProp(defaultValue),
+    maxValue: parseDateProp(maxValue),
+    minValue: parseDateProp(minValue),
+    isDateUnavailable: unavailableRanges ? isDateUnavailable : undefined
   };
   var state = (0, _datepicker2.useDatePickerState)(_objectSpread({
     autoFocus: hasAutoFocus,
@@ -95,13 +104,17 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     state: state,
     offset: 15,
     crossOffset: 40,
-    "data-testid": "popover-container",
-    overflow: "auto"
+    "data-testid": "popover-container"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
+    overflow: 'auto'
   }, (0, _react2.jsx)(_focus.FocusScope, {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, (0, _react2.jsx)("div", dialogProps, (0, _react2.jsx)(_index.Calendar, (0, _extends2["default"])({}, calendarProps, {
+  }, (0, _react2.jsx)("div", dialogProps, (0, _react2.jsx)(_index.Calendar
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , (0, _extends2["default"])({}, calendarProps, {
     calendarWrapperProps: calendarWrapperProps
   })))));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DateField["default"], (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('DatePicker'), props, {
@@ -121,68 +134,4 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, helperText));
 });
-DatePicker.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: _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]),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Text rendered below the input displaying the expected date format for the user's locale. */
-  hasFormatHelpText: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].string,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes["default"].shape({}),
-  /** 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,
-  /** Sets the default open state of the overlay (uncontrolled). */
-  isDefaultOpen: _propTypes["default"].bool,
-  /** Whether the calendar is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the overlay is currently open (controlled). */
-  isOpen: _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 rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** 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,
-  /** Determines the textarea status indicator and helper text styling. */
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-  /** The ranges of unavailable dates passed  */
-  unavailableRanges: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string)),
-  /** Props object that spread into date segment wrapper element. */
-  fieldControlProps: _propTypes["default"].shape({}),
-  /** Props object that spread into calendar element. */
-  calendarWrapperProps: _propTypes["default"].shape({})
-};
-_DateField["default"].defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false
-};
 var _default = exports["default"] = DatePicker;

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

@@ -112,7 +112,9 @@ var _default = exports["default"] = {
     isReadOnly: false,
     isRequired: false,
     label: 'Example Label',
-    onChange: function onChange() {},
+    onChange: function onChange() {
+      return undefined;
+    },
     'aria-label': 'Date Picker'
   }
 };
@@ -142,7 +144,7 @@ var Controlled = exports.Controlled = function Controlled(args) {
     date = _useState2[0],
     setDate = _useState2[1];
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
-    value: date,
+    value: date !== null && date !== void 0 ? date : undefined,
     onChange: (0, _utils.chain)(setDate, (0, _actions.actions)('onChange'))
   })), (0, _react2.jsx)(_index.Box, {
     isRow: true,