@pingux/astro 2.238.0 → 2.240.0-alpha.0

package/lib/cjs/components/DataTable/stories/DataTableNextGenComponent.js

@@ -1,8 +1,7 @@
 "use strict";
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataTableNextGenComponent = void 0;
@@ -10,19 +9,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../../..");
 var _react2 = require("@emotion/react");
-var getCellProps = function getCellProps(columnKey, align) {
-  return {
-    pr: columnKey !== 'menu' ? 'lg' : 12,
-    pl: columnKey === 'menu' ? 0 : 'lg',
-    hideHeader: columnKey === 'menu',
-    align: align
-  };
-};
-var DataTableNextGenComponent = exports.DataTableNextGenComponent = function DataTableNextGenComponent() {
-  var date = '2023-05-03';
-  var time = '07:16:30 pm UTC';
-  var timestampCell = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, null, date), (0, _react2.jsx)(_.Box, null, time));
-  var columns = [{
+const getCellProps = (columnKey, align) => ({
+  pr: columnKey !== 'menu' ? 'lg' : 12,
+  pl: columnKey === 'menu' ? 0 : 'lg',
+  hideHeader: columnKey === 'menu',
+  align
+});
+const DataTableNextGenComponent = () => {
+  const date = '2023-05-03';
+  const time = '07:16:30 pm UTC';
+  const timestampCell = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, null, date), (0, _react2.jsx)(_.Box, null, time));
+  const columns = [{
     name: 'Timestamp',
     key: 'timestamp'
   }, {
@@ -42,11 +39,11 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     name: 'Menu',
     key: 'menu'
   }];
-  var rows = [{
+  const rows = [{
     id: 1,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
+    description: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
     status: (0, _react2.jsx)(_.Badge, {
       label: "Approved",
       variant: "success",
@@ -60,7 +57,7 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     id: 2,
     timestamp: timestampCell,
     eventType: 'User Access Denied',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, {
+    description: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, {
       display: "block"
     }, "Passed Role Access"), (0, _react2.jsx)(_.Box, {
       display: "block"
@@ -78,7 +75,7 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     id: 3,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, {
+    description: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, {
       display: "block"
     }, "Passed Role Access"), (0, _react2.jsx)(_.Box, {
       display: "block"
@@ -96,7 +93,7 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     id: 4,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
+    description: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
     status: (0, _react2.jsx)(_.Badge, {
       label: "Approved",
       variant: "success",
@@ -110,7 +107,7 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     id: 5,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
+    description: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_.Box, null, "Passed Role Access"), (0, _react2.jsx)(_.Box, null, "Control")),
     status: (0, _react2.jsx)(_.Badge, {
       label: "Approved",
       variant: "success",
@@ -131,17 +128,12 @@ var DataTableNextGenComponent = exports.DataTableNextGenComponent = function Dat
     scale: "xl"
   }, (0, _react2.jsx)(_.DataTableHeader, {
     columns: columns
-  }, function (column) {
-    return (0, _react2.jsx)(_.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
-      hideHeader: column.key === 'menu',
-      minWidth: column.key !== 'menu' ? 175 : 50,
-      width: column.key !== 'menu' ? '19.4%' : 50
-    }), column.name);
-  }), (0, _react2.jsx)(_.DataTableBody, {
+  }, column => (0, _react2.jsx)(_.DataTableColumn, (0, _extends2.default)({}, getCellProps(column.key, false), {
+    hideHeader: column.key === 'menu',
+    minWidth: column.key !== 'menu' ? 175 : 50,
+    width: column.key !== 'menu' ? '19.4%' : 50
+  }), column.name)), (0, _react2.jsx)(_.DataTableBody, {
     items: rows
-  }, function (item) {
-    return (0, _react2.jsx)(_.DataTableRow, null, function (columnKey) {
-      return (0, _react2.jsx)(_.DataTableCell, getCellProps(columnKey, false), item[columnKey]);
-    });
-  })));
-};
+  }, item => (0, _react2.jsx)(_.DataTableRow, null, columnKey => (0, _react2.jsx)(_.DataTableCell, getCellProps(columnKey, false), item[columnKey])))));
+};
+exports.DataTableNextGenComponent = DataTableNextGenComponent;

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

@@ -1,28 +1,11 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-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"));
+exports.default = void 0;
 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"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
@@ -37,116 +20,114 @@ 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", "isQuiet", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges", "fieldControlProps", "hasAutoFocus"],
-  _excluded2 = ["defaultValue"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
 /**
  * DateFields allow users to enter and edit date using a keyboard.
  * Parts of the date is displayed in editable segments
- */
-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 _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
+ */const ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
   OPEN: 'Open the Calendar Popover',
   CLOSE: 'Close the Calendar Popover'
 };
-var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _labelRef$current, _context3;
-  var buttonProps = props.buttonProps,
-    className = props.className,
-    fieldProps = props.fieldProps,
-    groupProps = props.groupProps,
-    groupRef = props.groupRef,
-    hasFormatHelpText = props.hasFormatHelpText,
-    helperText = props.helperText,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    isOpen = props.isOpen,
-    _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)(null);
-  var inputRef = (0, _react.useRef)(null);
-  var labelRef = (0, _react.useRef)(null);
+const DateField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    buttonProps,
+    className,
+    fieldProps,
+    groupProps,
+    groupRef,
+    hasFormatHelpText,
+    helperText,
+    isDisabled = false,
+    isOpen,
+    isReadOnly = false,
+    isRequired = false,
+    isQuiet = false,
+    status = _statuses.default.DEFAULT,
+    datePickerState,
+    minValue,
+    maxValue,
+    unavailableRanges,
+    fieldControlProps,
+    hasAutoFocus = false,
+    ...other
+  } = props;
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const fieldRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const labelRef = (0, _react.useRef)(null);
 
   // istanbul ignore next
-  (0, _react.useImperativeHandle)(ref, function () {
-    return inputRef.current;
-  });
-  var _useLocale = (0, _i18n.useLocale)(),
-    locale = _useLocale.locale;
-  var state = (0, _datepicker2.useDateFieldState)(_objectSpread(_objectSpread({}, fieldProps), {}, {
-    locale: locale,
+  (0, _react.useImperativeHandle)(ref, () => inputRef.current);
+  const {
+    locale
+  } = (0, _i18n.useLocale)();
+  const state = (0, _datepicker2.useDateFieldState)({
+    ...fieldProps,
+    locale,
     createCalendar: _date.createCalendar
-  }));
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly
-    }, "is-".concat(status), true)),
-    classNames = _useStatusClasses.classNames;
-  var segments = state.segments;
-  var _ref = datePickerState || {},
-    setValue = _ref.setValue;
-  var _useDateField = (0, _datepicker.useDateField)(_objectSpread({}, fieldProps), state, fieldRef),
-    dateFieldProps = _useDateField.fieldProps;
+  });
+  const {
+    classNames
+  } = (0, _hooks.useStatusClasses)(className, {
+    isDisabled,
+    isReadOnly,
+    [`is-${status}`]: true
+  });
+  const {
+    segments
+  } = state;
+  const {
+    setValue
+  } = datePickerState || {};
+  const {
+    fieldProps: dateFieldProps
+  } = (0, _datepicker.useDateField)({
+    ...fieldProps
+  }, state, fieldRef);
 
   // removing a duplicate id, otherwise the groups element and field element each apply it
   delete dateFieldProps.id;
 
   // useDateFieldState does not return defaultValue so we separate it out to prevent control clashes
-  var defaultValue = props.defaultValue,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, others), {}, {
-      value: state.value ? String(state.value) : ''
-    })),
-    fieldContainerProps = _useField.fieldContainerProps,
-    fieldControlInputProps = _useField.fieldControlInputProps,
-    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-    fieldLabelProps = _useField.fieldLabelProps;
-  var toggleCalendarButtonAriaLabel = isOpen ? ARIA_LABELS_CALENDAR_BUTTON_EXPANSION.OPEN : ARIA_LABELS_CALENDAR_BUTTON_EXPANSION.CLOSE;
-  (0, _react.useEffect)(function () {
+  const {
+    defaultValue,
+    ...others
+  } = props;
+  const {
+    fieldContainerProps,
+    fieldControlInputProps,
+    fieldControlWrapperProps,
+    fieldLabelProps
+  } = (0, _hooks.useField)({
+    ...others,
+    value: state.value ? String(state.value) : ''
+  });
+  const toggleCalendarButtonAriaLabel = isOpen ? ARIA_LABELS_CALENDAR_BUTTON_EXPANSION.OPEN : ARIA_LABELS_CALENDAR_BUTTON_EXPANSION.CLOSE;
+  (0, _react.useEffect)(() => {
     if (errorMessage) {
-      var timer = (0, _setTimeout2["default"])(function () {
+      const timer = setTimeout(() => {
         setErrorMessage('');
       }, 5000);
-      return function () {
+      return () => {
         clearTimeout(timer);
       };
     }
     return undefined;
   }, [errorMessage]);
-  var getKey = function getKey(segment, index) {
-    var _context;
-    return (0, _concat["default"])(_context = "".concat(segment, "-")).call(_context, index);
+  const getKey = (segment, index) => {
+    return `${segment}-${index}`;
   };
-  var isLocalEnUS = (0, _react.useMemo)(function () {
+  const isLocalEnUS = (0, _react.useMemo)(() => {
     return locale === 'en-US';
   }, [locale]);
 
   /**
    * Reordering segments object for YYYY-MM-DD format
    */
-  var enUSSegments = [];
+  const enUSSegments = [];
   if (locale === 'en-US') {
     do {
-      (0, _forEach["default"])(segments).call(segments, function (item) {
+      segments.forEach(item => {
         if (item.type === 'year' && enUSSegments.length === 0) {
           enUSSegments.push(item);
         }
@@ -170,22 +151,21 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
    * Creates an expected date format helper text and automatically changes based on locale.
    */
 
-  var formatHelpText = (0, _react.useMemo)(function () {
-    var _context2;
-    return (0, _map["default"])(_context2 = isLocalEnUS ? enUSSegments : segments).call(_context2, function (s) {
+  const formatHelpText = (0, _react.useMemo)(() => {
+    return (isLocalEnUS ? enUSSegments : segments).map(s => {
       return s.text;
     }).join(' ');
   }, [hasFormatHelpText]);
-  var handlePaste = (0, _react.useCallback)(function (e) {
-    var copiedValue = e.clipboardData.getData('text');
-    var isNextAvailableDate;
-    var handleSetDateValue = function handleSetDateValue(isDate) {
+  const handlePaste = (0, _react.useCallback)(e => {
+    const copiedValue = e.clipboardData.getData('text');
+    let isNextAvailableDate;
+    const handleSetDateValue = isDate => {
       if (setValue) setValue(isDate);
     };
     if (isLocalEnUS && !isDisabled && !isReadOnly) {
       try {
         if (copiedValue.match(/^\d{4}-\d{2}-\d{2}$/) !== null) {
-          var DateProps = {
+          const DateProps = {
             isMinValue: minValue && (0, _date.parseDate)(minValue),
             isMaxValue: maxValue && (0, _date.parseDate)(maxValue),
             isValidDate: (0, _date.parseDate)(copiedValue)
@@ -201,12 +181,12 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
             return handleSetDateValue(DateProps.isMaxValue);
           }
           if (unavailableRanges) {
-            (0, _map["default"])(unavailableRanges).call(unavailableRanges, function (interval) {
+            unavailableRanges.map(interval => {
               if (DateProps.isValidDate >= (0, _date.parseDate)(interval[0]) && DateProps.isValidDate <= (0, _date.parseDate)(interval[1])) {
                 isNextAvailableDate = (0, _date.parseDate)(interval[1]).add({
                   days: 1
                 });
-                return isNextAvailableDate && setErrorMessage("Pasted value ".concat(copiedValue, " is an unavailable date"));
+                return isNextAvailableDate && setErrorMessage(`Pasted value ${copiedValue} is an unavailable date`);
               }
               return null;
             });
@@ -216,66 +196,61 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
         throw new Error();
       } catch (err) {
-        setErrorMessage("Invalid Date. Paste in YYYY-MM-DD format. Pasted value ".concat(copiedValue));
+        setErrorMessage(`Invalid Date. Paste in YYYY-MM-DD format. Pasted value ${copiedValue}`);
       }
     }
     return null;
   }, [minValue, maxValue, unavailableRanges]);
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.Box, (0, _extends2.default)({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps), (0, _react2.jsx)(_index.Label, (0, _extends2["default"])({}, fieldLabelProps, {
+  }, fieldContainerProps), (0, _react2.jsx)(_index.Label, (0, _extends2.default)({}, fieldLabelProps, {
     ref: labelRef
-  })), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  })), (0, _react2.jsx)(_index.Box, (0, _extends2.default)({
     isRow: true,
     variant: "forms.datePicker.inSlotContainer"
   }, groupProps, {
     ref: groupRef,
     className: classNames
-  }), (0, _react2.jsx)(_index.Box, fieldControlWrapperProps, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_index.Box, fieldControlWrapperProps, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Input, (0, _extends2.default)({
     ref: inputRef,
     type: "date/text",
-    "data-testid": "date-field"
-  }, _objectSpread({
+    "data-testid": "date-field",
     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"])({
+  }, fieldControlInputProps, {
+    "aria-labelledby": labelRef?.current?.id
+  })))), (0, _react2.jsx)(_index.Box, (0, _extends2.default)({
     isRow: true,
     variant: "forms.datePicker.inputField"
   }, dateFieldProps, fieldControlProps, {
     ref: fieldRef,
     className: classNames
-  }), (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _map["default"])(_context3 = isLocalEnUS ? enUSSegments : segments).call(_context3, function (segment, index) {
-    return (0, _react2.jsx)(_DateSegment["default"], (0, _extends2["default"])({
-      key: getKey(segment, index),
-      segment: segment,
-      state: state,
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      isRequired: isRequired,
-      segments: isLocalEnUS ? enUSSegments : segments,
-      handlePaste: handlePaste,
-      segmentIndex: index,
-      isLocalEnUS: isLocalEnUS
-    }, other));
-  })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_reactAria.FocusScope, null, (isLocalEnUS ? enUSSegments : segments).map((segment, index) => (0, _react2.jsx)(_DateSegment.default, (0, _extends2.default)({
+    key: getKey(segment, index),
+    segment: segment,
+    state: state,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    segments: isLocalEnUS ? enUSSegments : segments,
+    handlePaste: handlePaste,
+    segmentIndex: index,
+    isLocalEnUS: isLocalEnUS
+  }, other)))), (0, _react2.jsx)(_index.IconButton, (0, _extends2.default)({
     variant: "datePicker.containedIcon",
     isDisabled: isDisabled || isReadOnly
   }, buttonProps, {
     "aria-label": toggleCalendarButtonAriaLabel
   }), (0, _react2.jsx)(_index.Icon, {
-    icon: _CalendarIcon["default"],
+    icon: _CalendarIcon.default,
     title: {
       name: 'Calendar Icon'
     },
     size: 20
   })))), hasFormatHelpText && (0, _react2.jsx)(_index.FieldHelperText, null, formatHelpText), errorMessage && (0, _react2.jsx)(_index.Messages, {
-    onClose: function onClose() {
-      return setErrorMessage('');
-    }
+    onClose: () => setErrorMessage('')
   }, (0, _react2.jsx)(_reactStately.Item, {
     key: "message1",
     status: "error"
   }, errorMessage)));
 });
-var _default = exports["default"] = DateField;
+var _default = exports.default = DateField;