@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/cjs/DateInput/DateInputDescription/DateInputDescription.cjs

@@ -5,31 +5,36 @@ var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var LabelledMessage = require('../../LabelledMessage/LabelledMessage.cjs');
 var formatDescriptionInputFormat = require('./utils/formatDescriptionInputFormat.cjs');
 var DateInputDescription_module = require('./DateInputDescription.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
-
 var DateInputDescription = function (_a) {
-    var description = _a.description, locale = _a.locale;
-    var formatMessage = i18nReactIntl.useIntl().formatMessage;
-    var hasCustomDescription = (typeof description === "string" && description !== "") ||
-        React__default.default.isValidElement(description);
-    var translatedInputFormatMessage = formatMessage({
-        id: "dateInputDescription.inputFormat",
-        defaultMessage: "Input format",
-        description: "Label for the 'Input format' field",
-    });
-    if (hasCustomDescription) {
-        return (React__default.default.createElement("span", { className: DateInputDescription_module.dateInputDescription },
-            React__default.default.createElement("span", null, description),
-            React__default.default.createElement("span", { className: DateInputDescription_module.dateInputFormatContainer },
-                "(",
-                React__default.default.createElement(LabelledMessage.LabelledMessage, { label: translatedInputFormatMessage, message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale) }),
-                ")")));
-    }
-    return (React__default.default.createElement(LabelledMessage.LabelledMessage, { label: translatedInputFormatMessage, message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale) }));
+  var description = _a.description,
+    locale = _a.locale;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var hasCustomDescription = typeof description === "string" && description !== "" || React__default.default.isValidElement(description);
+  var translatedInputFormatMessage = formatMessage({
+    id: "dateInputDescription.inputFormat",
+    defaultMessage: "Input format",
+    description: "Label for the 'Input format' field"
+  });
+  if (hasCustomDescription) {
+    return React__default.default.createElement("span", {
+      className: DateInputDescription_module.dateInputDescription
+    }, React__default.default.createElement("span", null, description), React__default.default.createElement("span", {
+      className: DateInputDescription_module.dateInputFormatContainer
+    }, "(", React__default.default.createElement(LabelledMessage.LabelledMessage, {
+      label: translatedInputFormatMessage,
+      message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale)
+    }), ")"));
+  }
+  return React__default.default.createElement(LabelledMessage.LabelledMessage, {
+    label: translatedInputFormatMessage,
+    message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale)
+  });
 };
 DateInputDescription.displayName = "DateInputDescription";
-
 exports.DateInputDescription = DateInputDescription;

package/dist/cjs/DateInput/DateInputDescription/DateInputDescription.module.scss.cjs

@@ -1,5 +1,9 @@
 'use strict';
 
-var styles = {"dateInputDescription":"DateInputDescription-module_dateInputDescription__dEWv8","dateInputFormatContainer":"DateInputDescription-module_dateInputFormatContainer__U-zur","descriptionInputFormat":"DateInputDescription-module_descriptionInputFormat__rQ-Z5","labelSeparator":"DateInputDescription-module_labelSeparator__L7Be4"};
-
+var styles = {
+  "dateInputDescription": "DateInputDescription-module_dateInputDescription__dEWv8",
+  "dateInputFormatContainer": "DateInputDescription-module_dateInputFormatContainer__U-zur",
+  "descriptionInputFormat": "DateInputDescription-module_descriptionInputFormat__rQ-Z5",
+  "labelSeparator": "DateInputDescription-module_labelSeparator__L7Be4"
+};
 module.exports = styles;

package/dist/cjs/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.cjs

@@ -1,5 +1,9 @@
 'use strict';
 
-var formatDescriptionInputFormat = function (locale) { var _a; return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({ width: "short" }).toLowerCase(); };
-
+var formatDescriptionInputFormat = function (locale) {
+  var _a;
+  return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({
+    width: "short"
+  }).toLowerCase();
+};
 exports.formatDescriptionInputFormat = formatDescriptionInputFormat;

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs

@@ -8,21 +8,38 @@ var DateStartIcon = require('../../Icon/DateStartIcon.cjs');
 var isRefObject = require('../../utils/isRefObject.cjs');
 var DateInput = require('../DateInput/DateInput.cjs');
 var DateInputWithIconButton_module = require('./DateInputWithIconButton.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var DateInputWithIconButton = React__default.default.forwardRef(function (_a, ref) {
-    var onButtonClick = _a.onButtonClick, disabled = _a.disabled, value = _a.value, restProps = tslib.__rest(_a, ["onButtonClick", "disabled", "value"]);
-    var customRefObject = isRefObject.isRefObject(ref) ? ref.current : null;
-    var inputRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputRef;
-    var buttonRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.buttonRef;
-    var IconButton = (React__default.default.createElement("button", { ref: buttonRef, type: "button", onClick: onButtonClick, "aria-label": value ? "Change date, ".concat(value) : "Choose date", "aria-disabled": disabled, disabled: disabled, className: classnames__default.default(DateInputWithIconButton_module.iconButton, restProps["aria-expanded"] && DateInputWithIconButton_module.calendarActive, disabled && DateInputWithIconButton_module.disabled) },
-        React__default.default.createElement(DateStartIcon.DateStartIcon, { role: "presentation" })));
-    return (React__default.default.createElement(DateInput.DateInput, tslib.__assign({ ref: inputRef, disabled: disabled, value: value, endIconAdornment: IconButton }, restProps)));
+  var onButtonClick = _a.onButtonClick,
+    disabled = _a.disabled,
+    value = _a.value,
+    restProps = tslib.__rest(_a, ["onButtonClick", "disabled", "value"]);
+  var customRefObject = isRefObject.isRefObject(ref) ? ref.current : null;
+  var inputRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputRef;
+  var buttonRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.buttonRef;
+  var IconButton = React__default.default.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    onClick: onButtonClick,
+    "aria-label": value ? "Change date, ".concat(value) : "Choose date",
+    "aria-disabled": disabled,
+    disabled: disabled,
+    className: classnames__default.default(DateInputWithIconButton_module.iconButton, restProps["aria-expanded"] && DateInputWithIconButton_module.calendarActive, disabled && DateInputWithIconButton_module.disabled)
+  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
+    role: "presentation"
+  }));
+  return React__default.default.createElement(DateInput.DateInput, tslib.__assign({
+    ref: inputRef,
+    disabled: disabled,
+    value: value,
+    endIconAdornment: IconButton
+  }, restProps));
 });
 DateInputWithIconButton.displayName = "DateInputWithIconButton";
-
 exports.DateInputWithIconButton = DateInputWithIconButton;

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss.cjs

@@ -1,5 +1,8 @@
 'use strict';
 
-var styles = {"iconButton":"DateInputWithIconButton-module_iconButton__W7YMX","calendarActive":"DateInputWithIconButton-module_calendarActive__b2Vze","disabled":"DateInputWithIconButton-module_disabled__0IRHh"};
-
+var styles = {
+  "iconButton": "DateInputWithIconButton-module_iconButton__W7YMX",
+  "calendarActive": "DateInputWithIconButton-module_calendarActive__b2Vze",
+  "disabled": "DateInputWithIconButton-module_disabled__0IRHh"
+};
 module.exports = styles;

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -18,9 +18,11 @@ var CalendarPopover = require('../Calendar/CalendarPopover/CalendarPopover.cjs')
 var DateInputField = require('./subcomponents/DateInputField/DateInputField.cjs');
 var getLocale = require('./utils/getLocale.cjs');
 var validateDate = require('./utils/validateDate.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
@@ -28,144 +30,206 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  * {@link https://cultureamp.design/?path=/docs/components-date-controls-datepicker--docs Storybook}
  */
 var DatePicker = function (_a) {
-    var propsId = _a.id, _b = _a.buttonRef, propsButtonRef = _b === void 0 ? React.useRef(null) : _b, _c = _a.locale, propsLocale = _c === void 0 ? "en-AU" : _c, disabledDates = _a.disabledDates, disabledDaysOfWeek = _a.disabledDaysOfWeek, disabledRange = _a.disabledRange, disabledBeforeAfter = _a.disabledBeforeAfter, disabledBefore = _a.disabledBefore, disabledAfter = _a.disabledAfter, weekStartsOn = _a.weekStartsOn, defaultMonth = _a.defaultMonth, selectedDay = _a.selectedDay, status = _a.status, validationMessage = _a.validationMessage, onInputClick = _a.onInputClick, onInputFocus = _a.onInputFocus, onInputChange = _a.onInputChange, onInputBlur = _a.onInputBlur, onButtonClick = _a.onButtonClick, onDayChange = _a.onDayChange, onValidate = _a.onValidate, restDateInputFieldProps = tslib.__rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
-    var reactId = React.useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
-    var containerRef = React.useRef(null);
-    var inputRef = React.useRef(null);
-    var buttonRef = React.useRef((propsButtonRef === null || propsButtonRef === void 0 ? void 0 : propsButtonRef.current) || null);
-    var dateInputRefs = React.useRef({
-        inputRef: inputRef,
-        buttonRef: buttonRef,
-    });
-    var _d = React.useState(""), inputValue = _d[0], setInputValue = _d[1];
-    var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = React.useState(), lastTrigger = _f[0], setLastTrigger = _f[1];
-    var _g = React.useState(), inbuiltStatus = _g[0], setInbuiltStatus = _g[1];
-    var _h = React.useState(), inbuiltValidationMessage = _h[0], setInbuiltValidationMessage = _h[1];
-    var shouldUseInbuiltValidation = onValidate === undefined;
-    var locale = getLocale.getLocale(propsLocale);
-    var disabledDays = calculateDisabledDays.calculateDisabledDays({
-        disabledDates: disabledDates,
-        disabledDaysOfWeek: disabledDaysOfWeek,
-        disabledRange: disabledRange,
-        disabledBeforeAfter: disabledBeforeAfter,
-        disabledBefore: disabledBefore,
-        disabledAfter: disabledAfter,
-    });
-    var handleValidation = function (validationResponse) {
-        if (shouldUseInbuiltValidation) {
-            setInbuiltStatus(validationResponse.status);
-            setInbuiltValidationMessage(validationResponse.validationMessage);
-        }
-        else {
-            onValidate(validationResponse);
-        }
-    };
-    var handleDayChange = function (date, newInputValue) {
-        var _a = validateDate.validateDate({
-            date: date,
-            inputValue: newInputValue,
-            disabledDays: disabledDays,
-        }), validationResponse = _a.validationResponse, newDate = _a.newDate;
+  var propsId = _a.id,
+    _b = _a.buttonRef,
+    propsButtonRef = _b === void 0 ? React.useRef(null) : _b,
+    _c = _a.locale,
+    propsLocale = _c === void 0 ? "en-AU" : _c,
+    disabledDates = _a.disabledDates,
+    disabledDaysOfWeek = _a.disabledDaysOfWeek,
+    disabledRange = _a.disabledRange,
+    disabledBeforeAfter = _a.disabledBeforeAfter,
+    disabledBefore = _a.disabledBefore,
+    disabledAfter = _a.disabledAfter,
+    weekStartsOn = _a.weekStartsOn,
+    defaultMonth = _a.defaultMonth,
+    selectedDay = _a.selectedDay,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    onInputClick = _a.onInputClick,
+    onInputFocus = _a.onInputFocus,
+    onInputChange = _a.onInputChange,
+    onInputBlur = _a.onInputBlur,
+    onButtonClick = _a.onButtonClick,
+    onDayChange = _a.onDayChange,
+    onValidate = _a.onValidate,
+    restDateInputFieldProps = tslib.__rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
+  var reactId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  var containerRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var buttonRef = React.useRef((propsButtonRef === null || propsButtonRef === void 0 ? void 0 : propsButtonRef.current) || null);
+  var dateInputRefs = React.useRef({
+    inputRef: inputRef,
+    buttonRef: buttonRef
+  });
+  var _d = React.useState(""),
+    inputValue = _d[0],
+    setInputValue = _d[1];
+  var _e = React.useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var _f = React.useState(),
+    lastTrigger = _f[0],
+    setLastTrigger = _f[1];
+  var _g = React.useState(),
+    inbuiltStatus = _g[0],
+    setInbuiltStatus = _g[1];
+  var _h = React.useState(),
+    inbuiltValidationMessage = _h[0],
+    setInbuiltValidationMessage = _h[1];
+  var shouldUseInbuiltValidation = onValidate === undefined;
+  var locale = getLocale.getLocale(propsLocale);
+  var disabledDays = calculateDisabledDays.calculateDisabledDays({
+    disabledDates: disabledDates,
+    disabledDaysOfWeek: disabledDaysOfWeek,
+    disabledRange: disabledRange,
+    disabledBeforeAfter: disabledBeforeAfter,
+    disabledBefore: disabledBefore,
+    disabledAfter: disabledAfter
+  });
+  var handleValidation = function (validationResponse) {
+    if (shouldUseInbuiltValidation) {
+      setInbuiltStatus(validationResponse.status);
+      setInbuiltValidationMessage(validationResponse.validationMessage);
+    } else {
+      onValidate(validationResponse);
+    }
+  };
+  var handleDayChange = function (date, newInputValue) {
+    var _a = validateDate.validateDate({
+        date: date,
+        inputValue: newInputValue,
+        disabledDays: disabledDays
+      }),
+      validationResponse = _a.validationResponse,
+      newDate = _a.newDate;
+    handleValidation(validationResponse);
+    onDayChange(newDate);
+  };
+  var handleCalendarDayChange = function (date) {
+    if (!isDisabledDate.isDisabledDate(date, disabledDays)) {
+      var newInputValue = lastTrigger === "calendarButton" ? formatDateAsText.formatDateAsText(date, disabledDays, locale) : formatDateAsNumeral.formatDateAsNumeral(date, locale);
+      setInputValue(newInputValue);
+      handleDayChange(date);
+      setIsOpen(false);
+    }
+  };
+  var handleInputClick = function (e) {
+    setIsOpen(true);
+    onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(e);
+  };
+  var handleInputFocus = function (e) {
+    setLastTrigger("inputFocus");
+    if (selectedDay) {
+      var newInputValue = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
+      setInputValue(newInputValue);
+    }
+    onInputFocus === null || onInputFocus === void 0 ? void 0 : onInputFocus(e);
+  };
+  var handleInputChange = function (e) {
+    setInputValue(e.target.value);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+  };
+  var handleInputBlur = function (e) {
+    if (isSelectingDayInCalendar.isSelectingDayInCalendar(e.relatedTarget)) return;
+    if (inputValue !== "") {
+      var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
+      if (!isInvalidDate.isInvalidDate(parsedDate)) {
+        setInputValue(formatDateAsText.formatDateAsText(parsedDate, disabledDays, locale));
+      }
+      handleDayChange(parsedDate, inputValue);
+      onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
+      return;
+    }
+    handleDayChange(undefined, inputValue);
+    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
+  };
+  var handleKeyDown = function (e) {
+    if (e.key === "Enter") {
+      setIsOpen(false);
+      var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
+      handleDayChange(parsedDate, e.currentTarget.value);
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowDown" && e.altKey === true) {
+      e.preventDefault();
+      setIsOpen(true);
+      setLastTrigger("inputKeydown");
+    }
+  };
+  var handleButtonClick = function (e) {
+    setIsOpen(!isOpen);
+    setLastTrigger("calendarButton");
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
+  };
+  var handleCalendarMount = function (calendarElement) {
+    if (lastTrigger === "inputFocus") return;
+    setFocusInCalendar.setFocusInCalendar(calendarElement, selectedDay);
+  };
+  var handleReturnFocus = function () {
+    var _a, _b;
+    if (lastTrigger === "inputKeydown" || lastTrigger === "inputFocus") {
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+  };
+  React.useEffect(function () {
+    if (selectedDay) {
+      setInputValue(formatDateAsText.formatDateAsText(selectedDay, disabledDays, locale));
+      var formattedDate = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
+      var validationResponse = validateDate.validateDate({
+        date: selectedDay,
+        inputValue: formattedDate,
+        disabledDays: disabledDays
+      }).validationResponse;
+      if (!validationResponse.isValidDate && !validationResponse.isEmpty) {
         handleValidation(validationResponse);
-        onDayChange(newDate);
-    };
-    var handleCalendarDayChange = function (date) {
-        if (!isDisabledDate.isDisabledDate(date, disabledDays)) {
-            var newInputValue = lastTrigger === "calendarButton"
-                ? formatDateAsText.formatDateAsText(date, disabledDays, locale)
-                : formatDateAsNumeral.formatDateAsNumeral(date, locale);
-            setInputValue(newInputValue);
-            handleDayChange(date);
-            setIsOpen(false);
-        }
-    };
-    var handleInputClick = function (e) {
-        setIsOpen(true);
-        onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(e);
-    };
-    var handleInputFocus = function (e) {
-        setLastTrigger("inputFocus");
-        if (selectedDay) {
-            var newInputValue = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
-            setInputValue(newInputValue);
-        }
-        onInputFocus === null || onInputFocus === void 0 ? void 0 : onInputFocus(e);
-    };
-    var handleInputChange = function (e) {
-        setInputValue(e.target.value);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
-    };
-    var handleInputBlur = function (e) {
-        if (isSelectingDayInCalendar.isSelectingDayInCalendar(e.relatedTarget))
-            return;
-        if (inputValue !== "") {
-            var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
-            if (!isInvalidDate.isInvalidDate(parsedDate)) {
-                setInputValue(formatDateAsText.formatDateAsText(parsedDate, disabledDays, locale));
-            }
-            handleDayChange(parsedDate, inputValue);
-            onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
-            return;
-        }
-        handleDayChange(undefined, inputValue);
-        onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter") {
-            setIsOpen(false);
-            var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
-            handleDayChange(parsedDate, e.currentTarget.value);
-        }
-        if (e.key === "ArrowDown" || (e.key === "ArrowDown" && e.altKey === true)) {
-            e.preventDefault();
-            setIsOpen(true);
-            setLastTrigger("inputKeydown");
-        }
-    };
-    var handleButtonClick = function (e) {
-        setIsOpen(!isOpen);
-        setLastTrigger("calendarButton");
-        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
-    };
-    var handleCalendarMount = function (calendarElement) {
-        if (lastTrigger === "inputFocus")
-            return;
-        setFocusInCalendar.setFocusInCalendar(calendarElement, selectedDay);
-    };
-    var handleReturnFocus = function () {
-        var _a, _b;
-        if (lastTrigger === "inputKeydown" || lastTrigger === "inputFocus") {
-            return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    };
-    React.useEffect(function () {
-        if (selectedDay) {
-            setInputValue(formatDateAsText.formatDateAsText(selectedDay, disabledDays, locale));
-            var formattedDate = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
-            var validationResponse = validateDate.validateDate({
-                date: selectedDay,
-                inputValue: formattedDate,
-                disabledDays: disabledDays,
-            }).validationResponse;
-            if (!validationResponse.isValidDate && !validationResponse.isEmpty) {
-                handleValidation(validationResponse);
-            }
-        }
-    }, [selectedDay]);
-    var calendarId = "".concat(id, "-calendar-dialog");
-    return (React__default.default.createElement(reactFocusOn.FocusOn, { scrollLock: false, returnFocus: false, onDeactivation: handleReturnFocus, onClickOutside: function () { return setIsOpen(false); }, onEscapeKey: function () { return setIsOpen(false); }, enabled: isOpen },
-        React__default.default.createElement("div", { ref: containerRef },
-            React__default.default.createElement(DateInputField.DateInputField, tslib.__assign({ ref: dateInputRefs, id: id, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": calendarId, value: inputValue, locale: locale, onButtonClick: handleButtonClick, onClick: handleInputClick, onFocus: handleInputFocus, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, status: status !== undefined || !shouldUseInbuiltValidation
-                    ? status
-                    : inbuiltStatus, validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation
-                    ? validationMessage
-                    : inbuiltValidationMessage }, restDateInputFieldProps))),
-        isOpen && (React__default.default.createElement(CalendarPopover.CalendarPopover, { referenceElement: containerRef.current },
-            React__default.default.createElement(CalendarSingle.CalendarSingle, { id: calendarId, selected: selectedDay, defaultMonth: defaultMonth, weekStartsOn: weekStartsOn, disabled: disabledDays, locale: locale, onDayClick: handleCalendarDayChange, onMount: handleCalendarMount })))));
+      }
+    }
+  }, [selectedDay]);
+  var calendarId = "".concat(id, "-calendar-dialog");
+  return React__default.default.createElement(reactFocusOn.FocusOn, {
+    scrollLock: false,
+    returnFocus: false,
+    onDeactivation: handleReturnFocus,
+    onClickOutside: function () {
+      return setIsOpen(false);
+    },
+    onEscapeKey: function () {
+      return setIsOpen(false);
+    },
+    enabled: isOpen
+  }, React__default.default.createElement("div", {
+    ref: containerRef
+  }, React__default.default.createElement(DateInputField.DateInputField, tslib.__assign({
+    ref: dateInputRefs,
+    id: id,
+    role: "combobox",
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": calendarId,
+    value: inputValue,
+    locale: locale,
+    onButtonClick: handleButtonClick,
+    onClick: handleInputClick,
+    onFocus: handleInputFocus,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onKeyDown: handleKeyDown,
+    status: status !== undefined || !shouldUseInbuiltValidation ? status : inbuiltStatus,
+    validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation ? validationMessage : inbuiltValidationMessage
+  }, restDateInputFieldProps))), isOpen && React__default.default.createElement(CalendarPopover.CalendarPopover, {
+    referenceElement: containerRef.current
+  }, React__default.default.createElement(CalendarSingle.CalendarSingle, {
+    id: calendarId,
+    selected: selectedDay,
+    defaultMonth: defaultMonth,
+    weekStartsOn: weekStartsOn,
+    disabled: disabledDays,
+    locale: locale,
+    onDayClick: handleCalendarDayChange,
+    onMount: handleCalendarMount
+  })));
 };
 DatePicker.displayName = "DatePicker";
-
 exports.DatePicker = DatePicker;

package/dist/cjs/DatePicker/subcomponents/DateInputField/DateInputField.cjs

@@ -9,24 +9,52 @@ var DateInputDescription = require('../../../DateInput/DateInputDescription/Date
 var DateInputWithIconButton = require('../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs');
 var FieldMessage = require('../../../FieldMessage/FieldMessage.cjs');
 var DateInputField_module = require('./DateInputField.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var DateInputField = React__default.default.forwardRef(function (_a, ref) {
-    var description = _a.description, status = _a.status, validationMessage = _a.validationMessage, _b = _a.locale, locale$1 = _b === void 0 ? locale.enAU : _b, propsId = _a.id, disabled = _a.disabled, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, classNameOverride = _a.classNameOverride, dateInputWithIconButtonProps = tslib.__rest(_a, ["description", "status", "validationMessage", "locale", "id", "disabled", "isReversed", "classNameOverride"]);
-    var reactId = React.useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
-    var descriptionId = "".concat(id, "-field-message");
-    var shouldShowValidationMessage = !disabled && validationMessage;
-    return (React__default.default.createElement("div", { className: classNameOverride },
-        React__default.default.createElement(DateInputWithIconButton.DateInputWithIconButton, tslib.__assign({ ref: ref, id: id, "aria-describedby": descriptionId, status: status, disabled: disabled, isReversed: isReversed }, dateInputWithIconButtonProps)),
-        shouldShowValidationMessage && (React__default.default.createElement(FieldMessage.FieldMessage, { message: validationMessage, status: status, reversed: isReversed })),
-        React__default.default.createElement("div", { className: classnames__default.default(disabled && DateInputField_module.disabled) },
-            React__default.default.createElement(FieldMessage.FieldMessage, { id: descriptionId, message: React__default.default.createElement(DateInputDescription.DateInputDescription, { description: description, locale: locale$1 }), reversed: isReversed }))));
+  var description = _a.description,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    _b = _a.locale,
+    locale$1 = _b === void 0 ? locale.enAU : _b,
+    propsId = _a.id,
+    disabled = _a.disabled,
+    _c = _a.isReversed,
+    isReversed = _c === void 0 ? false : _c,
+    classNameOverride = _a.classNameOverride,
+    dateInputWithIconButtonProps = tslib.__rest(_a, ["description", "status", "validationMessage", "locale", "id", "disabled", "isReversed", "classNameOverride"]);
+  var reactId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  var descriptionId = "".concat(id, "-field-message");
+  var shouldShowValidationMessage = !disabled && validationMessage;
+  return React__default.default.createElement("div", {
+    className: classNameOverride
+  }, React__default.default.createElement(DateInputWithIconButton.DateInputWithIconButton, tslib.__assign({
+    ref: ref,
+    id: id,
+    "aria-describedby": descriptionId,
+    status: status,
+    disabled: disabled,
+    isReversed: isReversed
+  }, dateInputWithIconButtonProps)), shouldShowValidationMessage && React__default.default.createElement(FieldMessage.FieldMessage, {
+    message: validationMessage,
+    status: status,
+    reversed: isReversed
+  }), React__default.default.createElement("div", {
+    className: classnames__default.default(disabled && DateInputField_module.disabled)
+  }, React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: descriptionId,
+    message: React__default.default.createElement(DateInputDescription.DateInputDescription, {
+      description: description,
+      locale: locale$1
+    }),
+    reversed: isReversed
+  })));
 });
 DateInputField.displayName = "DateInputField";
-
 exports.DateInputField = DateInputField;

package/dist/cjs/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
-var styles = {"disabled":"DateInputField-module_disabled__-Y0lJ"};
-
+var styles = {
+  "disabled": "DateInputField-module_disabled__-Y0lJ"
+};
 module.exports = styles;

package/dist/cjs/DatePicker/utils/getLocale.cjs

@@ -1,16 +1,14 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-
 var getLocale = function (locale$1) {
-    switch (locale$1) {
-        case "en-AU":
-            return locale.enAU;
-        case "en-US":
-            return locale.enUS;
-        default:
-            return locale.enAU;
-    }
+  switch (locale$1) {
+    case "en-AU":
+      return locale.enAU;
+    case "en-US":
+      return locale.enUS;
+    default:
+      return locale.enAU;
+  }
 };
-
 exports.getLocale = getLocale;