@pingux/astro 2.219.0 → 2.220.0

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "icon", "iconProps", "onAction"];
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { mergeProps, useBreadcrumbs } from 'react-aria';
 import { useGetTheme, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Icon } from '../../index';
@@ -17,8 +18,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     onAction = props.onAction,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    breadcrumbIconSize = _useGetTheme.breadcrumbIconSize,
-    breadcrumbIconMargin = _useGetTheme.breadcrumbIconMargin;
+    breadcrumbIconSize = _useGetTheme.breadcrumbIconSize;
 
   // the following filters undefined values passed as a child
   var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
@@ -27,19 +27,30 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useBreadcrumbs = useBreadcrumbs(props),
     wrapperProps = _useBreadcrumbs.navProps;
   var breadcrumbsRef = useLocalOrForwardRef(ref);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredKey = _useState2[0],
+    setHoveredKey = _useState2[1];
   usePropWarning(props, 'disabled', 'isDisabled');
   var createBreadcrumb = useCallback(function (child, idx) {
     var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === React.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 ___EmotionJSX(React.Fragment, {
       key: "li-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       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 && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
-      mx: breadcrumbIconMargin,
       size: breadcrumbIconSize,
       title: {
         name: 'Breadcrumb Separator'
@@ -48,9 +59,15 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       color: "text.primary",
       icon: icon
     })));
-  }, [_Array$isArray(children) && children.length, filteredChildren, icon, iconProps, onAction]);
-  return ___EmotionJSX("nav", {
-    "aria-label": "Breadcrumb"
+  }, [_Array$isArray(children) && children.length, filteredChildren, icon, iconProps, onAction, hoveredKey]);
+  return ___EmotionJSX(Box, {
+    as: "nav",
+    "aria-label": "Breadcrumb",
+    sx: {
+      display: 'flex',
+      minWidth: 0,
+      width: '100%'
+    }
   }, ___EmotionJSX(Box, _extends({
     as: "ol",
     isRow: true,

package/lib/components/DatePicker/DateField.js

@@ -9,13 +9,12 @@ 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", "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"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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 _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -27,7 +26,6 @@ import { useDateField } from '@react-aria/datepicker';
 import { useLocale } from '@react-aria/i18n';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useDateFieldState } from '@react-stately/datepicker';
-import PropTypes from 'prop-types';
 import { useField, useStatusClasses } from '../../hooks';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -51,24 +49,32 @@ var DateField = /*#__PURE__*/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 : _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 = _objectWithoutProperties(props, _excluded);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     errorMessage = _useState2[0],
     setErrorMessage = _useState2[1];
-  var fieldRef = useRef();
-  var inputRef = useRef();
-  var labelRef = useRef();
+  var fieldRef = useRef(null);
+  var inputRef = useRef(null);
+  var labelRef = useRef(null);
 
   // istanbul ignore next
   useImperativeHandle(ref, function () {
@@ -86,7 +92,8 @@ var DateField = /*#__PURE__*/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 = useDateField(_objectSpread({}, fieldProps), state, fieldRef),
     dateFieldProps = _useDateField.fieldProps;
 
@@ -97,7 +104,7 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultValue = props.defaultValue,
     others = _objectWithoutProperties(props, _excluded2);
   var _useField = useField(_objectSpread(_objectSpread({}, others), {}, {
-      value: state.value || ''
+      value: state.value ? String(state.value) : ''
     })),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldControlInputProps = _useField.fieldControlInputProps,
@@ -163,7 +170,7 @@ var DateField = /*#__PURE__*/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 {
@@ -177,10 +184,10 @@ var DateField = /*#__PURE__*/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) {
@@ -216,10 +223,11 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Input, _extends({
     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
   })))), ___EmotionJSX(Box, _extends({
     isRow: true,
@@ -260,66 +268,4 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: "error"
   }, errorMessage)));
 });
-DateField.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Prop to provide a default date (controlled) */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Props object that is spread directly into the calendar button element. */
-  buttonProps: PropTypes.shape({}),
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-  /** state management for a date picker component */
-  datePickerState: PropTypes.shape({
-    setValue: PropTypes.func
-  }),
-  /** @ignore Props object that is spread directly into the segmented date field. */
-  fieldProps: PropTypes.shape({}),
-  /** @ignore Props passed to the box surrounding the input, button, and helper text. */
-  groupProps: PropTypes.shape({}),
-  /** @ignore Ref which is passed to the role="group" element. */
-  groupRef: PropTypes.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.bool,
-  /** Text rendered below the input displaying the expected date format for the user's locale. */
-  hasFormatHelpText: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: PropTypes.shape({}),
-  /** Whether the field is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the overlay is currently open. */
-  isOpen: PropTypes.bool,
-  /** Whether the input can be selected, but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** Whether the field is required. */
-  isRequired: PropTypes.bool,
-  /** Whether the field is quiet. */
-  isQuiet: PropTypes.bool,
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-  /** The maximum allowed date that a user may select. */
-  maxValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** The minimum allowed date that a user may select. */
-  minValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Handler that is called when the element's selection state changes. */
-  onChange: PropTypes.func,
-  /** Determines the input status indicator and helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
-  /** The ranges of unavailable dates passed  */
-  unavailableRanges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-  /** Props object that is spread directly into the input wrapper element. */
-  wrapperProps: PropTypes.shape({}),
-  /** Props object that spread into date segment wrapper element. */
-  fieldControlProps: PropTypes.shape({})
-};
-DateField.defaultProps = {
-  hasAutoFocus: false,
-  isDisabled: false,
-  isQuiet: false,
-  isReadOnly: false,
-  isRequired: false,
-  status: statuses.DEFAULT
-};
 export default DateField;

package/lib/components/DatePicker/DatePicker.js

@@ -8,7 +8,6 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(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; }
 import React, { forwardRef, useRef } from 'react';
@@ -18,26 +17,38 @@ import { FocusScope } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { useDatePickerState } from '@react-stately/datepicker';
 import { omit } from 'lodash/object';
-import PropTypes from 'prop-types';
 import { Calendar, FieldHelperText } from '../../index';
-import Popover from '../Popover/Popover';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { isDateWithinRanges } from '../../utils/devUtils/props/isDateWithinRanges';
+import Popover from '../Popover/Popover';
 import DateField from './DateField';
 
 /**
  * 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.
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var parseDateProp = function parseDateProp(val) {
+  if (!val) return undefined;
+  return typeof val === 'string' ? parseDate(val) : val;
+};
 var DatePicker = /*#__PURE__*/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,
@@ -45,8 +56,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     unavailableRanges = props.unavailableRanges,
     fieldControlProps = props.fieldControlProps,
     calendarWrapperProps = props.calendarWrapperProps;
-  var groupRef = useRef();
-  var popoverRef = useRef();
+  var groupRef = useRef(null);
+  var popoverRef = useRef(null);
 
   /**
    *  This function is run against each date in the calendar
@@ -59,11 +70,11 @@ var DatePicker = /*#__PURE__*/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 && parseDate(value),
-    defaultValue: defaultValue && parseDate(defaultValue),
-    maxValue: maxValue && parseDate(maxValue),
-    minValue: minValue && parseDate(minValue),
-    isDateUnavailable: unavailableRanges && isDateUnavailable
+    value: parseDateProp(value),
+    defaultValue: parseDateProp(defaultValue),
+    maxValue: parseDateProp(maxValue),
+    minValue: parseDateProp(minValue),
+    isDateUnavailable: unavailableRanges ? isDateUnavailable : undefined
   };
   var state = useDatePickerState(_objectSpread({
     autoFocus: hasAutoFocus,
@@ -87,13 +98,17 @@ var DatePicker = /*#__PURE__*/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'
   }, ___EmotionJSX(FocusScope, {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, ___EmotionJSX("div", dialogProps, ___EmotionJSX(Calendar, _extends({}, calendarProps, {
+  }, ___EmotionJSX("div", dialogProps, ___EmotionJSX(Calendar
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({}, calendarProps, {
     calendarWrapperProps: calendarWrapperProps
   })))));
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, getPendoID('DatePicker'), props, {
@@ -113,68 +128,4 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-DatePicker.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Prop to provide a default date (controlled) */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** Text rendered below the input displaying the expected date format for the user's locale. */
-  hasFormatHelpText: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.string,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: PropTypes.shape({}),
-  /** The element's unique identifier. */
-  id: PropTypes.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.func,
-  /** Sets the default open state of the overlay (uncontrolled). */
-  isDefaultOpen: PropTypes.bool,
-  /** Whether the calendar is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the overlay is currently open (controlled). */
-  isOpen: PropTypes.bool,
-  /** Whether the calendar dates are only focusable. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /** The rendered label for the field. */
-  label: PropTypes.node,
-  /** The maximum allowed date that a user may select. */
-  maxValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** The minimum allowed date that a user may select. */
-  minValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Handler that is called when the element loses focus. */
-  onBlur: PropTypes.func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: PropTypes.func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: PropTypes.func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: PropTypes.func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: PropTypes.func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func,
-  /** Determines the textarea status indicator and helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
-  /** The ranges of unavailable dates passed  */
-  unavailableRanges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-  /** Props object that spread into date segment wrapper element. */
-  fieldControlProps: PropTypes.shape({}),
-  /** Props object that spread into calendar element. */
-  calendarWrapperProps: PropTypes.shape({})
-};
-DateField.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false
-};
 export default DatePicker;

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

@@ -102,7 +102,9 @@ export default {
     isReadOnly: false,
     isRequired: false,
     label: 'Example Label',
-    onChange: function onChange() {},
+    onChange: function onChange() {
+      return undefined;
+    },
     'aria-label': 'Date Picker'
   }
 };
@@ -132,7 +134,7 @@ export var Controlled = function Controlled(args) {
     date = _useState2[0],
     setDate = _useState2[1];
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DatePicker, _extends({}, args, {
-    value: date,
+    value: date !== null && date !== void 0 ? date : undefined,
     onChange: chain(setDate, actions('onChange'))
   })), ___EmotionJSX(Box, {
     isRow: true,

package/lib/components/DatePicker/DatePicker.styles.js

@@ -12,7 +12,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import { defaultFocus, input } from '../Input/Input.styles';
 var inSlotContainer = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, {
   position: 'relative',
-  width: 'fit-content'
+  // Override the parent fieldContainer's '> .is-default { width: 100% }' rule
+  // because it has higher specificity.
+  width: 'fit-content !important'
 });
 var inputField = _objectSpread(_objectSpread({}, input), {}, {
   width: 'auto',

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

@@ -223,9 +223,9 @@ test('should be able to select dates', /*#__PURE__*/_asyncToGenerator(/*#__PURE_
         year = inputButtons[0];
         month = inputButtons[1];
         day = inputButtons[2];
-        expect(month).toHaveTextContent(8);
-        expect(day).toHaveTextContent(1);
-        expect(year).toHaveTextContent(2022);
+        expect(month).toHaveTextContent('8');
+        expect(day).toHaveTextContent('1');
+        expect(year).toHaveTextContent('2022');
         expect(screen.queryByTestId('date-field')).toHaveValue('2022-08-01');
       case 18:
       case "end":
@@ -376,7 +376,7 @@ test('date picker with controlled value to change default value and clear any se
         _context6.next = 16;
         return userEvent.click(changeButton);
       case 16:
-        expect(day).toHaveTextContent(10);
+        expect(day).toHaveTextContent('10');
         _context6.next = 19;
         return userEvent.click(clearButton);
       case 19:

package/lib/components/DatePicker/DateSegment.js

@@ -3,13 +3,11 @@ import _padStartInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { useFocusManager } from 'react-aria';
 import { useDateSegment } from '@react-aria/datepicker';
-import PropTypes from 'prop-types';
 import { Box } from '../../index';
-
+import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * Each editable segment of date.
  */
-import { jsx as ___EmotionJSX } from "@emotion/react";
 var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
   var isLocalEnUS = props.isLocalEnUS,
     segment = props.segment,
@@ -17,7 +15,7 @@ var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
     handlePaste = props.handlePaste,
     segments = props.segments,
     segmentIndex = props.segmentIndex;
-  var segmentRef = useRef();
+  var segmentRef = useRef(null);
   // istanbul ignore next
   useImperativeHandle(ref, function () {
     return segmentRef.current;
@@ -56,36 +54,25 @@ var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return null;
   }, [focusManager, segment, isPlaceholder]);
+  var displayText = text;
+  if (text === '/') {
+    displayText = '-';
+  } else {
+    var padLength = 0;
+    if (isLocalEnUS) {
+      if (type === 'year') {
+        padLength = 4;
+      } else {
+        padLength = 2;
+      }
+    }
+    displayText = _padStartInstanceProperty(text).call(text, padLength, '0');
+  }
   return ___EmotionJSX(Box, _extends({}, segmentProps, {
     ref: segmentRef,
     variant: "forms.datePicker.segment",
     onKeyUp: handleKeyEvents,
     onPaste: handlePaste
-  }), text === '/' ? '-' : _padStartInstanceProperty(text).call(text, isLocalEnUS && (type === 'year' ? 4 : 2), 0));
+  }), displayText);
 });
-DateSegment.propTypes = {
-  /** slot for input that indicates each date segment */
-  segment: PropTypes.shape({
-    isPlaceholder: PropTypes.bool,
-    text: PropTypes.string,
-    placeholder: PropTypes.string,
-    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({}),
-  /**
-   * Handler that is called when a paste event is called.
-   * (e: PasteEvent) => void
-   */
-  handlePaste: PropTypes.func,
-  /** checks if the current locale is en-US */
-  isLocalEnUS: PropTypes.bool
-};
 export default DateSegment;

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
-import { useGetTheme } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef } from '../../hooks';
 import { Box, Button, Icon, Image } from '../../index';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -20,15 +19,11 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     previewWidth = props.previewWidth,
     widthHeightSx = props.widthHeightSx,
     others = _objectWithoutProperties(props, _excluded);
-  var buttonRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
+  var buttonRef = useLocalOrForwardRef(ref);
   var _useFocusRing = useFocusRing(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
-  var _useHover = useHover(props),
+  var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useGetTheme = useGetTheme(),
@@ -86,7 +81,7 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "imageUpload.hoveredPreview.shaded"
   }));
   return ___EmotionJSX(Box, _extends({
-    tabindex: 0,
+    tabIndex: 0,
     sx: widthHeightSx
   }, hoverProps), ___EmotionJSX(Button, _extends({
     ref: buttonRef,
@@ -96,19 +91,5 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": "Image preview"
   }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
-ImagePreviewButton.propTypes = {
-  defaultPreviewImage: PropTypes.string,
-  defaultPreviewNode: PropTypes.node,
-  isImageType: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isMenuOpen: PropTypes.bool,
-  loaderSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  previewImage: PropTypes.string,
-  previewWidth: PropTypes.number,
-  widthHeightSx: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number
-  })
-};
 ImagePreviewButton.displayName = 'ImagePreviewButton';
 export default ImagePreviewButton;