@kaizen/components 3.1.6 → 3.3.0

package/dist/cjs/src/Avatar/Avatar.cjs

@@ -54,21 +54,25 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== 'small';
   var renderFallback = disableInitials || initials === '';
-  return renderFallback ? React__default.default.createElement(FallbackIcon, {
-    alt: alt
-  }) : React__default.default.createElement("abbr", {
-    className: classnames__default.default(Avatar_module.initials, isLongName && Avatar_module.longName),
+  if (renderFallback) {
+    return React__default.default.createElement(FallbackIcon, {
+      alt: alt
+    });
+  }
+  if (isLongName) {
+    return React__default.default.createElement("abbr", {
+      className: classnames__default.default(Avatar_module.initials, Avatar_module.longName),
+      title: alt,
+      "data-chromatic": "ignore"
+    }, React__default.default.createElement(reactTextfit.Textfit, {
+      mode: "single",
+      max: getMaxFontSizePixels(size)
+    }, initials));
+  }
+  return React__default.default.createElement("abbr", {
+    className: Avatar_module.initials,
     title: alt
-  }, isLongName ?
-  // Only called if 3 or more initials, fits text width for long names
-  //
-  // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
-  // causing flaky tests.
-  React__default.default.createElement(reactTextfit.Textfit, {
-    mode: "single",
-    max: getMaxFontSizePixels(size),
-    "data-chromatic": "ignore"
-  }, initials) : getInitials(fullName, size === 'small'));
+  }, getInitials(fullName, size === 'small'));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |

package/dist/cjs/src/DateInput/DateInput/DateInput.cjs

@@ -7,7 +7,6 @@ var Input = require('../../Input/Input/Input.cjs');
 require('../../Input/InputRange/InputRange.cjs');
 require('../../Input/InputSearch/InputSearch.cjs');
 var Label = require('../../Label/Label.cjs');
-var isRefObject = require('../../utils/isRefObject.cjs');
 var DateInput_module = require('./DateInput.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -33,7 +32,7 @@ var DateInput = React__default.default.forwardRef(function (_a, ref) {
     reversed: isReversed,
     disabled: disabled
   }), React__default.default.createElement(Input.Input, tslib.__assign({
-    inputRef: isRefObject.isRefObject(ref) ? ref : undefined,
+    inputRef: ref,
     id: id,
     type: "text",
     autoComplete: "off",

package/dist/cjs/src/DatePicker/DatePicker.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var utils = require('@react-aria/utils');
 var reactFocusOn = require('react-focus-on');
 var CalendarSingle = require('../Calendar/CalendarSingle/CalendarSingle.cjs');
 require('../Calendar/CalendarRange/CalendarRange.cjs');
@@ -33,6 +34,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  */
 var DatePicker = function (_a) {
   var propsId = _a.id,
+    propsInputRef = _a.inputRef,
     propsButtonRef = _a.buttonRef,
     _b = _a.locale,
     propsLocale = _b === void 0 ? 'en-AU' : _b,
@@ -54,7 +56,7 @@ var DatePicker = function (_a) {
     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"]);
+    restDateInputFieldProps = tslib.__rest(_a, ["id", "inputRef", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
   var calendarLabelDesc = formatMessage({
     id: 'datePicker.calendarLabelDescription',
@@ -64,11 +66,11 @@ var DatePicker = function (_a) {
   var reactId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
   var containerRef = React.useRef(null);
-  var inputRef = React.useRef(null);
+  var internalInputRef = React.useRef(null);
   var fallbackButtonRef = React.useRef(null);
   var buttonRef = propsButtonRef !== null && propsButtonRef !== void 0 ? propsButtonRef : fallbackButtonRef;
   var dateInputRefs = React.useRef({
-    inputRef: inputRef,
+    inputRef: utils.mergeRefs(internalInputRef, propsInputRef),
     buttonRef: buttonRef
   });
   var _c = React.useState(''),
@@ -177,7 +179,7 @@ var DatePicker = function (_a) {
   var handleReturnFocus = function () {
     var _a, _b;
     if (lastTrigger === 'inputKeydown' || lastTrigger === 'inputFocus') {
-      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      return (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
     (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
   };

package/dist/cjs/src/Focusable/Focusable.cjs

@@ -15,17 +15,18 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var Focusable = function (_a) {
   var children = _a.children,
     className = _a.className,
-    props = tslib.__rest(_a, ["children", "className"]);
+    tag = _a.tag,
+    props = tslib.__rest(_a, ["children", "className", "tag"]);
   var ref = React.useRef(null);
   var focusableProps = reactAria.useFocusable(props, ref).focusableProps;
-  return React__default.default.createElement("div", tslib.__assign({
+  var Element = tag !== null && tag !== void 0 ? tag : 'div';
+  return React__default.default.createElement(Element, tslib.__assign({
     ref: ref,
     className: classnames__default.default(Focusable_module.focusableWrapper, className)
   }, focusableProps, {
     "data-inline-hidden-content": true,
-    // We want the div to be focusable for keyboard users,
+    // We want the element to be focusable for keyboard users,
     // but screen readers will have the VisuallyHidden content
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: 0,
     "aria-describedby": undefined
   }, props), children);

package/dist/cjs/src/MultiSelect/MultiSelect.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var utils = require('@react-aria/utils');
 var classnames = require('classnames');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Heading = require('../Heading/Heading.cjs');
@@ -28,7 +29,8 @@ var MultiSelect = function (_a) {
     onOpenChange = _a.onOpenChange,
     classNameOverride = _a.classNameOverride,
     validationMessage = _a.validationMessage,
-    restProps = tslib.__rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+    inputRef = _a.inputRef,
+    restProps = tslib.__rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage", "inputRef"]);
   var fallbackId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
   var descriptionId = "".concat(id, "-description");
@@ -73,7 +75,7 @@ var MultiSelect = function (_a) {
     ref: refs.setReference,
     className: MultiSelect_module.toggleContainer
   }, React__default.default.createElement(MultiSelectToggle.MultiSelectToggle, {
-    ref: toggleButtonRef,
+    ref: utils.mergeRefs(toggleButtonRef, inputRef),
     id: "".concat(id, "--toggle"),
     "aria-labelledby": "".concat(id, "--label"),
     "aria-describedby": "".concat(validationId, " ").concat(descriptionId),

package/dist/cjs/src/RichTextEditor/RichTextEditor/RichTextEditor.cjs

@@ -66,6 +66,7 @@ var ProseMirrorHistory__namespace = /*#__PURE__*/_interopNamespace(ProseMirrorHi
  */
 var RichTextEditor = function (_a) {
   var id = _a.id,
+    inputRef = _a.inputRef,
     onChange = _a.onChange,
     defaultValue = _a.defaultValue,
     labelText = _a.labelText,
@@ -81,7 +82,7 @@ var RichTextEditor = function (_a) {
     description = _a.description,
     _c = _a.status,
     status = _c === void 0 ? 'default' : _c,
-    restProps = tslib.__rest(_a, ["id", "onChange", "defaultValue", "labelText", 'aria-labelledby', 'aria-describedby', "classNameOverride", "controls", "rows", "dataError", "onDataError", "validationMessage", "description", "status"]);
+    restProps = tslib.__rest(_a, ["id", "inputRef", "onChange", "defaultValue", "labelText", 'aria-labelledby', 'aria-describedby', "classNameOverride", "controls", "rows", "dataError", "onDataError", "validationMessage", "description", "status"]);
   var generatedId = React.useId();
   var schema$1 = React.useState(schema.createSchemaFromControls(controls))[0];
   var editorId = id !== null && id !== void 0 ? id : generatedId;
@@ -108,6 +109,8 @@ var RichTextEditor = function (_a) {
         'aria-labelledby': labelId,
         'role': 'textbox',
         'aria-describedby': ariaDescribedBy
+      }, {
+        inputRef: inputRef
       });
     } catch (_a) {
       return new Error('Bad data error');

package/dist/cjs/src/RichTextEditor/RichTextEditor/utils/inputrules.cjs

@@ -2,7 +2,6 @@
 
 require('prosemirror-state');
 require('prosemirror-view');
-require('tslib');
 require('react');
 require('prosemirror-model');
 var inputrules = require('../../utils/core/inputrules.cjs');

package/dist/cjs/src/RichTextEditor/utils/core/createRichTextEditor.cjs

@@ -47,7 +47,8 @@ var createRichTextEditor = function (_a) {
     destroy: function () {
       return editorView.destroy();
     },
-    dispatchTransaction: dispatchCommandOrTransaction
+    dispatchTransaction: dispatchCommandOrTransaction,
+    dom: editorView.dom
   };
 };
 exports.createRichTextEditor = createRichTextEditor;

package/dist/cjs/src/RichTextEditor/utils/core/hooks/useRichTextEditor.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var tslib = require('tslib');
 var React = require('react');
+var isRefObject = require('../../../../utils/isRefObject.cjs');
 var createRichTextEditor = require('../createRichTextEditor.cjs');
 
 /**
@@ -16,13 +16,14 @@ var useRichTextEditor = function (initialEditorState,
 /*
  * Pass in HTML attributes into the parent RTE node
  */
-attributes, options) {
-  options = tslib.__assign({
-    editable: true
-  }, options);
-  var _a = React.useState(initialEditorState),
-    editorState = _a[0],
-    setEditorState = _a[1];
+attributes, _a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.editable,
+    editable = _c === void 0 ? true : _c,
+    inputRef = _b.inputRef;
+  var _d = React.useState(initialEditorState),
+    editorState = _d[0],
+    setEditorState = _d[1];
   // Refs to hold the methods returned from ProseMirror’s initialization
   var destroyEditorRef = React.useRef();
   var dispatchTransactionRef = React.useRef(function () {
@@ -34,7 +35,10 @@ attributes, options) {
     dispatchTransactionRef.current(commandOrTransaction);
   }, [dispatchTransactionRef]);
   // Hold editableStatus as a ref so we can toggle its status
-  var editableStatusRef = React.useRef(options.editable);
+  var editableStatusRef = React.useRef(editable);
+  // Stable ref to avoid recreating editorRef when inputRef callback identity changes
+  var inputRefRef = React.useRef(inputRef);
+  inputRefRef.current = inputRef;
   var setEditableStatus = React.useCallback(function (status) {
     editableStatusRef.current = status;
     // Trigger an update within ProseMirror by issuing a noop transaction
@@ -48,11 +52,17 @@ attributes, options) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [editableStatusRef]);
   var editorRef = React.useCallback(function (node) {
+    var _a, _b;
     if (node === null) {
       if (destroyEditorRef.current) {
         destroyEditorRef.current();
         destroyEditorRef.current = undefined;
       }
+      if (inputRefRef.current && isRefObject.isRefObject(inputRefRef.current)) {
+        inputRefRef.current.current = null;
+      } else {
+        (_a = inputRefRef.current) === null || _a === void 0 ? void 0 : _a.call(inputRefRef, null);
+      }
       return;
     }
     var instance = createRichTextEditor.createRichTextEditor({
@@ -66,6 +76,11 @@ attributes, options) {
     });
     destroyEditorRef.current = instance.destroy;
     dispatchTransactionRef.current = instance.dispatchTransaction;
+    if (inputRefRef.current && isRefObject.isRefObject(inputRefRef.current)) {
+      inputRefRef.current.current = instance.dom;
+    } else {
+      (_b = inputRefRef.current) === null || _b === void 0 ? void 0 : _b.call(inputRefRef, instance.dom);
+    }
   },
   // Including editorState in the dependencies here will cause an endless
   // loop as the initialization changes its value

package/dist/cjs/src/SingleSelect/SingleSelect.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var button = require('@react-aria/button');
 var select$1 = require('@react-aria/select');
+var utils = require('@react-aria/utils');
 var select = require('@react-stately/select');
 var classnames = require('classnames');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
@@ -53,7 +54,8 @@ var SingleSelect = function (_a) {
     isDisabled = _a.isDisabled,
     onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId"]);
+    inputRef = _a.inputRef,
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId", "inputRef"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -102,7 +104,7 @@ var SingleSelect = function (_a) {
     status: status,
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
-    'ref': refs.setReference,
+    'ref': utils.mergeRefs(inputRef, refs.setReference),
     'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
     'aria-required': isRequired
   });

package/dist/cjs/src/Tabs/subcomponents/TabList/TabList.cjs

@@ -46,6 +46,7 @@ var TabList = function (props) {
     setContainerElement = _f[1];
   var tabListContext = React.useContext(reactAriaComponents.TabListStateContext);
   var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  var prevSelectedKey = React.useRef(selectedKey);
   React.useEffect(function () {
     if (!isDocumentReady) {
       setIsDocumentReady(true);
@@ -95,7 +96,13 @@ var TabList = function (props) {
     if (!isDocumentReady) {
       return;
     }
-    // Scroll selected tab into view
+    // Only scroll the selected tab into view when the selection actually changes
+    // (i.e. user interaction). Skipping the no-op runs avoids scrolling the page
+    // on mount when the Tabs sit below the fold.
+    if (prevSelectedKey.current === selectedKey) {
+      return;
+    }
+    prevSelectedKey.current = selectedKey;
     (_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
       block: 'nearest',
       inline: 'center'

package/dist/cjs/src/TimeField/TimeField.cjs

@@ -38,7 +38,8 @@ var TimeFieldComponent = function (_a) {
     validationMessage = _a.validationMessage,
     isDisabled = _a.isDisabled,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride"]);
+    inputRef = _a.inputRef,
+    restProps = tslib.__rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride", "inputRef"]);
   var reactId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
   var handleOnChange = function (timeValue) {
@@ -64,14 +65,17 @@ var TimeFieldComponent = function (_a) {
   }));
   var hasError = !!validationMessage && status === 'error';
   var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
-  var inputRef = React__default.default.useRef(null);
+  var internalRef = React__default.default.useRef(null);
   var _c = datepicker$1.useTimeField(tslib.__assign(tslib.__assign({}, restProps), {
       label: label,
       isDisabled: isDisabled,
       'aria-describedby': descriptionId
-    }), state, inputRef),
+    }), state, internalRef),
     fieldProps = _c.fieldProps,
     labelProps = _c.labelProps;
+  var firstEditableIndex = state.segments.findIndex(function (s) {
+    return s.isEditable;
+  });
   return React__default.default.createElement("div", {
     className: classNameOverride
   }, React__default.default.createElement(Label.Label, tslib.__assign({
@@ -82,13 +86,14 @@ var TimeFieldComponent = function (_a) {
     className: TimeField_module.wrapper
   }, React__default.default.createElement("div", tslib.__assign({}, fieldProps, {
     id: id,
-    ref: inputRef,
+    ref: internalRef,
     className: classnames__default.default(TimeField_module.input, state.isDisabled && TimeField_module.isDisabled, status === 'error' && TimeField_module.error)
   }), state.segments.map(function (segment, i) {
     return React__default.default.createElement(TimeSegment.TimeSegment, {
       key: i,
       segment: segment,
       state: state,
+      inputRef: i === firstEditableIndex ? inputRef : undefined,
       hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
     });
   }), React__default.default.createElement("div", {

package/dist/cjs/src/TimeField/subcomponents/TimeSegment/TimeSegment.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var datepicker = require('@react-aria/datepicker');
+var utils = require('@react-aria/utils');
 var classnames = require('classnames');
 var generateSegmentDisplayText = require('./utils/generateSegmentDisplayText.cjs');
 var TimeSegment_module = require('./TimeSegment.module.css.cjs');
@@ -17,9 +18,10 @@ var TimeSegment = function (_a) {
   var segment = _a.segment,
     state = _a.state,
     _b = _a.hasPadding,
-    hasPadding = _b === void 0 ? true : _b;
-  var ref = React__default.default.useRef(null);
-  var segmentProps = datepicker.useDateSegment(segment, state, ref).segmentProps;
+    hasPadding = _b === void 0 ? true : _b,
+    inputRef = _a.inputRef;
+  var internalRef = React__default.default.useRef(null);
+  var segmentProps = datepicker.useDateSegment(segment, state, internalRef).segmentProps;
   // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
   // This (in combination with the invisible character ​) creates boundaries
   // for the element.
@@ -27,7 +29,7 @@ var TimeSegment = function (_a) {
   return React__default.default.createElement("span", {
     className: TimeSegment_module.timeSegmentWrapper
   }, "\u200B", React__default.default.createElement("span", tslib.__assign({}, segmentProps, {
-    ref: ref,
+    ref: utils.mergeRefs(internalRef, inputRef),
     className: classnames__default.default(TimeSegment_module.timeSegment, segment.type === 'literal' && TimeSegment_module.literal, segment.isPlaceholder && TimeSegment_module.placeholder, segment.type === 'dayPeriod' && TimeSegment_module.dayPeriod, hasPadding && TimeSegment_module.hasPadding)
   }), generateSegmentDisplayText.generateSegmentDisplayText(segment)), "\u200B");
 };

package/dist/esm/src/Avatar/Avatar.mjs

@@ -45,22 +45,25 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== 'small';
   var renderFallback = disableInitials || initials === '';
-  return renderFallback ? (/*#__PURE__*/React.createElement(FallbackIcon, {
-    alt: alt
-  })) : (/*#__PURE__*/React.createElement("abbr", {
-    className: classnames(modules_f30548d5.initials, isLongName && modules_f30548d5.longName),
+  if (renderFallback) {
+    return /*#__PURE__*/React.createElement(FallbackIcon, {
+      alt: alt
+    });
+  }
+  if (isLongName) {
+    return /*#__PURE__*/React.createElement("abbr", {
+      className: classnames(modules_f30548d5.initials, modules_f30548d5.longName),
+      title: alt,
+      "data-chromatic": "ignore"
+    }, /*#__PURE__*/React.createElement(Textfit, {
+      mode: "single",
+      max: getMaxFontSizePixels(size)
+    }, initials));
+  }
+  return /*#__PURE__*/React.createElement("abbr", {
+    className: modules_f30548d5.initials,
     title: alt
-  }, isLongName ? (
-  /*#__PURE__*/
-  // Only called if 3 or more initials, fits text width for long names
-  //
-  // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
-  // causing flaky tests.
-  React.createElement(Textfit, {
-    mode: "single",
-    max: getMaxFontSizePixels(size),
-    "data-chromatic": "ignore"
-  }, initials)) : getInitials(fullName, size === 'small')));
+  }, getInitials(fullName, size === 'small'));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |

package/dist/esm/src/DateInput/DateInput/DateInput.mjs

@@ -5,7 +5,6 @@ import { Input } from '../../Input/Input/Input.mjs';
 import '../../Input/InputRange/InputRange.mjs';
 import '../../Input/InputSearch/InputSearch.mjs';
 import { Label } from '../../Label/Label.mjs';
-import { isRefObject } from '../../utils/isRefObject.mjs';
 import modules_30be64ed from './DateInput.module.css.mjs';
 const DateInput = /*#__PURE__*/function () {
   const DateInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -25,7 +24,7 @@ const DateInput = /*#__PURE__*/function () {
       reversed: isReversed,
       disabled: disabled
     }), /*#__PURE__*/React.createElement(Input, __assign({
-      inputRef: isRefObject(ref) ? ref : undefined,
+      inputRef: ref,
       id: id,
       type: "text",
       autoComplete: "off",

package/dist/esm/src/DatePicker/DatePicker.mjs

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId, useRef, useState, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
+import { mergeRefs } from '@react-aria/utils';
 import { FocusOn } from 'react-focus-on';
 import { CalendarSingle } from '../Calendar/CalendarSingle/CalendarSingle.mjs';
 import '../Calendar/CalendarRange/CalendarRange.mjs';
@@ -26,6 +27,7 @@ import { validateDate } from './utils/validateDate.mjs';
 const DatePicker = /*#__PURE__*/function () {
   const DatePicker = function (_a) {
     var propsId = _a.id,
+      propsInputRef = _a.inputRef,
       propsButtonRef = _a.buttonRef,
       _b = _a.locale,
       propsLocale = _b === void 0 ? 'en-AU' : _b,
@@ -47,7 +49,7 @@ const DatePicker = /*#__PURE__*/function () {
       onButtonClick = _a.onButtonClick,
       onDayChange = _a.onDayChange,
       onValidate = _a.onValidate,
-      restDateInputFieldProps = __rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
+      restDateInputFieldProps = __rest(_a, ["id", "inputRef", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
     var formatMessage = useIntl().formatMessage;
     var calendarLabelDesc = formatMessage({
       id: 'datePicker.calendarLabelDescription',
@@ -57,11 +59,11 @@ const DatePicker = /*#__PURE__*/function () {
     var reactId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var containerRef = useRef(null);
-    var inputRef = useRef(null);
+    var internalInputRef = useRef(null);
     var fallbackButtonRef = useRef(null);
     var buttonRef = propsButtonRef !== null && propsButtonRef !== void 0 ? propsButtonRef : fallbackButtonRef;
     var dateInputRefs = useRef({
-      inputRef: inputRef,
+      inputRef: mergeRefs(internalInputRef, propsInputRef),
       buttonRef: buttonRef
     });
     var _c = useState(''),
@@ -170,7 +172,7 @@ const DatePicker = /*#__PURE__*/function () {
     var handleReturnFocus = function () {
       var _a, _b;
       if (lastTrigger === 'inputKeydown' || lastTrigger === 'inputFocus') {
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        return (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }
       (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
     };

package/dist/esm/src/Focusable/Focusable.mjs

@@ -6,17 +6,18 @@ import modules_99c30b46 from './Focusable.module.css.mjs';
 var Focusable = function (_a) {
   var children = _a.children,
     className = _a.className,
-    props = __rest(_a, ["children", "className"]);
+    tag = _a.tag,
+    props = __rest(_a, ["children", "className", "tag"]);
   var ref = useRef(null);
   var focusableProps = useFocusable(props, ref).focusableProps;
-  return /*#__PURE__*/React.createElement("div", __assign({
+  var Element = tag !== null && tag !== void 0 ? tag : 'div';
+  return /*#__PURE__*/React.createElement(Element, __assign({
     ref: ref,
     className: classnames(modules_99c30b46.focusableWrapper, className)
   }, focusableProps, {
     "data-inline-hidden-content": true,
-    // We want the div to be focusable for keyboard users,
+    // We want the element to be focusable for keyboard users,
     // but screen readers will have the VisuallyHidden content
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: 0,
     "aria-describedby": undefined
   }, props), children);

package/dist/esm/src/MultiSelect/MultiSelect.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId, useRef } from 'react';
+import { mergeRefs } from '@react-aria/utils';
 import classnames from 'classnames';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
 import { Heading } from '../Heading/Heading.mjs';
@@ -20,7 +21,8 @@ const MultiSelect = /*#__PURE__*/function () {
       onOpenChange = _a.onOpenChange,
       classNameOverride = _a.classNameOverride,
       validationMessage = _a.validationMessage,
-      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+      inputRef = _a.inputRef,
+      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage", "inputRef"]);
     var fallbackId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
     var descriptionId = "".concat(id, "-description");
@@ -65,7 +67,7 @@ const MultiSelect = /*#__PURE__*/function () {
       ref: refs.setReference,
       className: modules_66f395c3.toggleContainer
     }, /*#__PURE__*/React.createElement(MultiSelectToggle, {
-      ref: toggleButtonRef,
+      ref: mergeRefs(toggleButtonRef, inputRef),
       id: "".concat(id, "--toggle"),
       "aria-labelledby": "".concat(id, "--label"),
       "aria-describedby": "".concat(validationId, " ").concat(descriptionId),

package/dist/esm/src/RichTextEditor/RichTextEditor/RichTextEditor.mjs

@@ -34,6 +34,7 @@ import modules_75dcabc8 from './RichTextEditor.module.scss.mjs';
 const RichTextEditor = /*#__PURE__*/function () {
   const RichTextEditor = function (_a) {
     var id = _a.id,
+      inputRef = _a.inputRef,
       onChange = _a.onChange,
       defaultValue = _a.defaultValue,
       labelText = _a.labelText,
@@ -49,7 +50,7 @@ const RichTextEditor = /*#__PURE__*/function () {
       description = _a.description,
       _c = _a.status,
       status = _c === void 0 ? 'default' : _c,
-      restProps = __rest(_a, ["id", "onChange", "defaultValue", "labelText", 'aria-labelledby', 'aria-describedby', "classNameOverride", "controls", "rows", "dataError", "onDataError", "validationMessage", "description", "status"]);
+      restProps = __rest(_a, ["id", "inputRef", "onChange", "defaultValue", "labelText", 'aria-labelledby', 'aria-describedby', "classNameOverride", "controls", "rows", "dataError", "onDataError", "validationMessage", "description", "status"]);
     var generatedId = useId();
     var schema = useState(createSchemaFromControls(controls))[0];
     var editorId = id !== null && id !== void 0 ? id : generatedId;
@@ -76,6 +77,8 @@ const RichTextEditor = /*#__PURE__*/function () {
           'aria-labelledby': labelId,
           'role': 'textbox',
           'aria-describedby': ariaDescribedBy
+        }, {
+          inputRef: inputRef
         });
       } catch (_a) {
         return new Error('Bad data error');

package/dist/esm/src/RichTextEditor/RichTextEditor/utils/inputrules.mjs

@@ -1,6 +1,5 @@
 import 'prosemirror-state';
 import 'prosemirror-view';
-import 'tslib';
 import 'react';
 import 'prosemirror-model';
 import { orderedListRule, bulletListRule } from '../../utils/core/inputrules.mjs';

package/dist/esm/src/RichTextEditor/utils/core/createRichTextEditor.mjs

@@ -45,7 +45,8 @@ var createRichTextEditor = function (_a) {
     destroy: function () {
       return editorView.destroy();
     },
-    dispatchTransaction: dispatchCommandOrTransaction
+    dispatchTransaction: dispatchCommandOrTransaction,
+    dom: editorView.dom
   };
 };
 export { createRichTextEditor };