@kaizen/components 3.1.5 → 3.2.0

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

@@ -61,9 +61,13 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
     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)
+    max: getMaxFontSizePixels(size),
+    "data-chromatic": "ignore"
   }, initials) : getInitials(fullName, size === 'small'));
 };
 /**

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/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

@@ -53,9 +53,13 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   }, 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)
+    max: getMaxFontSizePixels(size),
+    "data-chromatic": "ignore"
   }, initials)) : getInitials(fullName, size === 'small')));
 };
 /**

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/Tabs/subcomponents/TabList/TabList.mjs

@@ -37,6 +37,7 @@ var TabList = function (props) {
     setContainerElement = _f[1];
   var tabListContext = useContext(TabListStateContext);
   var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  var prevSelectedKey = useRef(selectedKey);
   useEffect(function () {
     if (!isDocumentReady) {
       setIsDocumentReady(true);
@@ -86,7 +87,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/esm/src/TimeField/TimeField.mjs

@@ -33,7 +33,8 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       validationMessage = _a.validationMessage,
       isDisabled = _a.isDisabled,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride"]);
+      inputRef = _a.inputRef,
+      restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride", "inputRef"]);
     var reactId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var handleOnChange = function (timeValue) {
@@ -59,14 +60,17 @@ const TimeFieldComponent = /*#__PURE__*/function () {
     }));
     var hasError = !!validationMessage && status === 'error';
     var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
-    var inputRef = React.useRef(null);
+    var internalRef = React.useRef(null);
     var _c = useTimeField(__assign(__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 /*#__PURE__*/React.createElement("div", {
       className: classNameOverride
     }, /*#__PURE__*/React.createElement(Label, __assign({
@@ -77,13 +81,14 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       className: modules_0db24a3e.wrapper
     }, /*#__PURE__*/React.createElement("div", __assign({}, fieldProps, {
       id: id,
-      ref: inputRef,
+      ref: internalRef,
       className: classnames(modules_0db24a3e.input, state.isDisabled && modules_0db24a3e.isDisabled, status === 'error' && modules_0db24a3e.error)
     }), state.segments.map(function (segment, i) {
       return /*#__PURE__*/React.createElement(TimeSegment, {
         key: i,
         segment: segment,
         state: state,
+        inputRef: i === firstEditableIndex ? inputRef : undefined,
         hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
       });
     }), /*#__PURE__*/React.createElement("div", {

package/dist/esm/src/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -1,6 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { useDateSegment } from '@react-aria/datepicker';
+import { mergeRefs } from '@react-aria/utils';
 import classnames from 'classnames';
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText.mjs';
 import modules_0ac56f95 from './TimeSegment.module.css.mjs';
@@ -9,9 +10,10 @@ const TimeSegment = /*#__PURE__*/function () {
     var segment = _a.segment,
       state = _a.state,
       _b = _a.hasPadding,
-      hasPadding = _b === void 0 ? true : _b;
-    var ref = React.useRef(null);
-    var segmentProps = useDateSegment(segment, state, ref).segmentProps;
+      hasPadding = _b === void 0 ? true : _b,
+      inputRef = _a.inputRef;
+    var internalRef = React.useRef(null);
+    var segmentProps = 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.
@@ -19,7 +21,7 @@ const TimeSegment = /*#__PURE__*/function () {
     return /*#__PURE__*/React.createElement("span", {
       className: modules_0ac56f95.timeSegmentWrapper
     }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
-      ref: ref,
+      ref: mergeRefs(internalRef, inputRef),
       className: classnames(modules_0ac56f95.timeSegment, segment.type === 'literal' && modules_0ac56f95.literal, segment.isPlaceholder && modules_0ac56f95.placeholder, segment.type === 'dayPeriod' && modules_0ac56f95.dayPeriod, hasPadding && modules_0ac56f95.hasPadding)
     }), generateSegmentDisplayText(segment)), "\u200B");
   };

package/dist/types/DateInput/DateInputWithIconButton/DateInputWithIconButton.d.ts

@@ -7,8 +7,8 @@ export type DateInputWithIconButtonProps = {
     onButtonClick: React.MouseEventHandler<HTMLButtonElement>;
 } & Omit<DateInputProps, 'startIconAdornment' | 'endIconAdornment'>;
 export type DateInputWithIconButtonRefs = {
-    inputRef?: React.RefObject<HTMLInputElement>;
-    buttonRef?: React.RefObject<HTMLButtonElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
 };
 export declare const DateInputWithIconButton: React.ForwardRefExoticComponent<{
     /**

package/dist/types/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import React, { type RefObject } from 'react';
 import { type CalendarSingleProps, type DisabledDayMatchers } from "../Calendar";
 import { type DateInputFieldProps } from './subcomponents/DateInputField';
 import type { ValidationResponse } from './types';
@@ -6,6 +6,7 @@ import { type DatePickerSupportedLocales } from './utils/getLocale';
 type OmittedDateInputFieldProps = 'onClick' | 'onFocus' | 'onChange' | 'onBlur' | 'onButtonClick' | 'value' | 'locale' | 'id';
 export type DatePickerProps = {
     id?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
     buttonRef?: RefObject<HTMLButtonElement>;
     onInputClick?: DateInputFieldProps['onClick'];
     onInputFocus?: DateInputFieldProps['onFocus'];
@@ -49,7 +50,7 @@ export type DatePickerProps = {
  * {@link https://cultureamp.design/?path=/docs/components-date-controls-datepicker--docs Storybook}
  */
 export declare const DatePicker: {
-    ({ id: propsId, buttonRef: propsButtonRef, locale: propsLocale, disabledDates, disabledDaysOfWeek, disabledRange, disabledBeforeAfter, disabledBefore, disabledAfter, weekStartsOn, defaultMonth, selectedDay, status, validationMessage, onInputClick, onInputFocus, onInputChange, onInputBlur, onButtonClick, onDayChange, onValidate, ...restDateInputFieldProps }: DatePickerProps): JSX.Element;
+    ({ id: propsId, inputRef: propsInputRef, buttonRef: propsButtonRef, locale: propsLocale, disabledDates, disabledDaysOfWeek, disabledRange, disabledBeforeAfter, disabledBefore, disabledAfter, weekStartsOn, defaultMonth, selectedDay, status, validationMessage, onInputClick, onInputFocus, onInputChange, onInputBlur, onButtonClick, onDayChange, onValidate, ...restDateInputFieldProps }: DatePickerProps): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/Input/Input/Input.d.ts

@@ -4,7 +4,7 @@ import { type InputStatus, type InputTypes } from './types';
 export type InputType = (typeof InputTypes)[number];
 export type InputStatusType = (typeof InputStatus)[number];
 export type InputProps = {
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
     status?: InputStatusType;
     startIconAdornment?: React.ReactNode;
     endIconAdornment?: React.ReactNode;

package/dist/types/TextArea/TextArea.d.ts

@@ -1,7 +1,7 @@
 import React, { type TextareaHTMLAttributes } from 'react';
 import { type OverrideClassName } from "../types/OverrideClassName";
 export type TextAreaProps = {
-    textAreaRef?: React.RefObject<HTMLTextAreaElement>;
+    textAreaRef?: React.Ref<HTMLTextAreaElement>;
     status?: 'default' | 'error' | 'caution';
     /**
      * Grows the input height as more content is added

package/dist/types/TimeField/TimeField.d.ts

@@ -17,6 +17,7 @@ export type TimeFieldProps = {
     value: ValueType | null;
     status?: StatusType;
     validationMessage?: React.ReactNode;
+    inputRef?: React.Ref<HTMLSpanElement>;
 } & OverrideClassName<Omit<TimeFieldStateOptions, OmittedTimeFieldProps>>;
 export declare const TimeField: {
     (props: TimeFieldProps): JSX.Element;

package/dist/types/TimeField/subcomponents/TimeSegment/TimeSegment.d.ts

@@ -1,10 +1,12 @@
+import React from 'react';
 import { type DateFieldState, type DateSegment } from '@react-stately/datepicker';
 export type TimeSegmentProps = {
     segment: DateSegment;
     state: DateFieldState;
     hasPadding?: boolean;
+    inputRef?: React.Ref<HTMLSpanElement>;
 };
 export declare const TimeSegment: {
-    ({ segment, state, hasPadding, }: TimeSegmentProps): JSX.Element;
+    ({ segment, state, hasPadding, inputRef, }: TimeSegmentProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -99,20 +99,20 @@
     "@react-stately/select": "^3.6.14",
     "@react-types/shared": "^3.30.0",
     "classnames": "^2.5.1",
-    "date-fns": "^4.3.0",
+    "date-fns": "^4.4.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.7",
+    "prosemirror-model": "^1.25.8",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.12.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.8",
+    "prosemirror-view": "^1.41.9",
     "react-animate-height": "^3.2.4",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -130,7 +130,7 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.1.4",
+    "@cultureamp/i18n-react-intl": "^4.1.5",
     "@cultureamp/package-bundler": "^4.0.1",
     "cssnano": "^7.1.9",
     "@testing-library/dom": "^10.4.1",
@@ -155,14 +155,14 @@
     "react-dom": "^19.2.7",
     "react-highlight": "^0.15.0",
     "react-intl": "^10.1.13",
-    "rollup": "^4.60.4",
+    "rollup": "^4.61.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
     "svgo": "^4.0.1",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
     "tsx": "^4.22.4",
-    "@kaizen/design-tokens": "11.0.10"
+    "@kaizen/design-tokens": "11.0.11"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Avatar/Avatar.tsx

@@ -97,7 +97,10 @@ const renderInitials = (
     <abbr className={classnames(styles.initials, isLongName && styles.longName)} title={alt}>
       {isLongName ? (
         // Only called if 3 or more initials, fits text width for long names
-        <Textfit mode="single" max={getMaxFontSizePixels(size)}>
+        //
+        // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
+        // causing flaky tests.
+        <Textfit mode="single" max={getMaxFontSizePixels(size)} data-chromatic="ignore">
           {initials}
         </Textfit>
       ) : (

package/src/DateInput/DateInput/DateInput.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 import { Input, type InputProps } from '~components/Input'
 import { Label } from '~components/Label'
-import { isRefObject } from '~components/utils/isRefObject'
 import styles from './DateInput.module.css'
 
 type OmittedInputProps = 'reversed' | 'type' | 'inputRef'
@@ -23,7 +22,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         disabled={disabled}
       />
       <Input
-        inputRef={isRefObject(ref) ? ref : undefined}
+        inputRef={ref}
         id={id}
         type="text"
         autoComplete="off"

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -13,8 +13,8 @@ export type DateInputWithIconButtonProps = {
 } & Omit<DateInputProps, 'startIconAdornment' | 'endIconAdornment'>
 
 export type DateInputWithIconButtonRefs = {
-  inputRef?: React.RefObject<HTMLInputElement>
-  buttonRef?: React.RefObject<HTMLButtonElement>
+  inputRef?: React.Ref<HTMLInputElement>
+  buttonRef?: React.Ref<HTMLButtonElement>
 }
 
 export const DateInputWithIconButton = React.forwardRef<

package/src/DatePicker/DatePicker.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useId, useRef, useState, type RefObject } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
+import { mergeRefs } from '@react-aria/utils'
 import { type DayEventHandler } from 'react-day-picker'
 import { FocusOn } from 'react-focus-on'
 import {
@@ -35,6 +36,7 @@ type OmittedDateInputFieldProps =
 
 export type DatePickerProps = {
   id?: string
+  inputRef?: React.Ref<HTMLInputElement>
   buttonRef?: RefObject<HTMLButtonElement>
   onInputClick?: DateInputFieldProps['onClick']
   onInputFocus?: DateInputFieldProps['onFocus']
@@ -81,6 +83,7 @@ export type DatePickerProps = {
  */
 export const DatePicker = ({
   id: propsId,
+  inputRef: propsInputRef,
   buttonRef: propsButtonRef,
   locale: propsLocale = 'en-AU',
   disabledDates,
@@ -115,11 +118,11 @@ export const DatePicker = ({
   const id = propsId ?? reactId
 
   const containerRef = useRef<HTMLInputElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const internalInputRef = useRef<HTMLInputElement>(null)
   const fallbackButtonRef = useRef<HTMLButtonElement>(null)
   const buttonRef = propsButtonRef ?? fallbackButtonRef
   const dateInputRefs = useRef({
-    inputRef,
+    inputRef: mergeRefs<HTMLInputElement>(internalInputRef, propsInputRef),
     buttonRef,
   })
   const [inputValue, setInputValue] = useState<string>('')
@@ -239,7 +242,7 @@ export const DatePicker = ({
 
   const handleReturnFocus = (): void => {
     if (lastTrigger === 'inputKeydown' || lastTrigger === 'inputFocus') {
-      return inputRef.current?.focus()
+      return internalInputRef.current?.focus()
     }
     buttonRef.current?.focus()
   }

package/src/Input/Input/Input.tsx

@@ -8,7 +8,7 @@ export type InputType = (typeof InputTypes)[number]
 export type InputStatusType = (typeof InputStatus)[number]
 
 export type InputProps = {
-  inputRef?: React.RefObject<HTMLInputElement>
+  inputRef?: React.Ref<HTMLInputElement>
   status?: InputStatusType
   startIconAdornment?: React.ReactNode
   endIconAdornment?: React.ReactNode

package/src/Tabs/_docs/Tabs.spec.stories.tsx

@@ -117,6 +117,45 @@ export const ArrowsShowingAndHidingRTL: Story = {
   },
 }
 
+let scrollIntoViewCalls = 0
+const originalScrollIntoView = HTMLElement.prototype.scrollIntoView
+
+/**
+ * The selected tab must NOT be scrolled into view on mount (KZN-3363) — only when
+ * the selection changes via user interaction. This protects users who render Tabs
+ * below the fold from having the page jump on load.
+ */
+export const ScrollsIntoViewOnSelectionOnly: Story = {
+  name: 'Scrolls into view on selection only',
+  beforeEach: () => {
+    scrollIntoViewCalls = 0
+    HTMLElement.prototype.scrollIntoView = function (): void {
+      scrollIntoViewCalls += 1
+    }
+    return () => {
+      HTMLElement.prototype.scrollIntoView = originalScrollIntoView
+    }
+  },
+  render: (args) => (
+    <div style={{ maxWidth: '500px' }}>
+      <Tabs defaultSelectedKey="one" {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step('No scroll into view on mount', async () => {
+      expect(scrollIntoViewCalls).toBe(0)
+    })
+
+    await step('Scrolls into view when a tab is selected', async () => {
+      const tabFour = await canvas.findByRole('tab', { name: 'Tab 4' })
+      await userEvent.click(tabFour)
+      await waitFor(() => expect(scrollIntoViewCalls).toBeGreaterThan(0))
+    })
+  },
+}
+
 export const AsyncLoaded: Story = {
   render: () => {
     const [selectedKey, setSelectedKey] = useState<Key>(0)

package/src/Tabs/_docs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Button } from '~components/ButtonV1'
+import { Button } from '~components/Button'
 import { Text } from '~components/Text'
 import { Tab, TabList, TabPanel, Tabs, type Key } from '../index'
 
@@ -82,8 +82,44 @@ export const Controlled: Story = {
             <Text variant="body">Content 2</Text>
           </TabPanel>
         </Tabs>
-        <Button label="Switch to tab 2" onClick={(): void => setSelectedKey('two')} />
+        <Button onClick={(): void => setSelectedKey('two')}>Switch to tab 2</Button>
       </>
     )
   },
 }
+
+/**
+ * When a tab is selected via user interaction, `TabList` scrolls the selected tab
+ * into view within its horizontal strip. It deliberately does *not* do this on
+ * mount — so when `Tabs` render below the fold, landing on the page does not scroll
+ * the tabs into view or jump the page.
+ *
+ * This story pushes the `Tabs` below the fold with a full-viewport spacer. On load
+ * the page stays at the top. Scroll down and select a tab — only then does the
+ * selected tab scroll into view within the strip.
+ */
+export const BelowTheFold: Story = {
+  render: () => (
+    <div style={{ maxWidth: '760px' }}>
+      <div style={{ height: '100dvh' }}>
+        <Text variant="body">Scroll down — the tabs are rendered below the fold.</Text>
+      </div>
+      <Tabs defaultSelectedKey="tab-0">
+        <TabList aria-label="Lorem ipsum tabs">
+          {Array.from({ length: 8 }, (_, i) => (
+            <Tab key={i} id={`tab-${i}`}>
+              Lorem {i + 1}
+            </Tab>
+          ))}
+        </TabList>
+        {Array.from({ length: 8 }, (_, i) => (
+          <TabPanel key={i} id={`tab-${i}`} className="p-24">
+            <Text variant="body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit — panel {i + 1}.
+            </Text>
+          </TabPanel>
+        ))}
+      </Tabs>
+    </div>
+  ),
+}

package/src/Tabs/subcomponents/TabList/TabList.tsx

@@ -44,6 +44,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
   const [containerElement, setContainerElement] = useState<HTMLElement | null>()
   const tabListContext = useContext(TabListStateContext)
   const selectedKey = tabListContext?.selectedKey
+  const prevSelectedKey = useRef(selectedKey)
 
   useEffect(() => {
     if (!isDocumentReady) {
@@ -107,7 +108,14 @@ export const TabList = (props: TabListProps): JSX.Element => {
       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
+
     containerElement
       ?.querySelector('[role="tab"][data-selected=true]')
       ?.scrollIntoView({ block: 'nearest', inline: 'center' })

package/src/TextArea/TextArea.tsx

@@ -4,7 +4,7 @@ import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './TextArea.module.css'
 
 export type TextAreaProps = {
-  textAreaRef?: React.RefObject<HTMLTextAreaElement>
+  textAreaRef?: React.Ref<HTMLTextAreaElement>
   status?: 'default' | 'error' | 'caution'
   /**
    * Grows the input height as more content is added

package/src/TimeField/TimeField.tsx

@@ -27,6 +27,7 @@ export type TimeFieldProps = {
   value: ValueType | null
   status?: StatusType
   validationMessage?: React.ReactNode
+  inputRef?: React.Ref<HTMLSpanElement>
 } & OverrideClassName<Omit<TimeFieldStateOptions, OmittedTimeFieldProps>>
 
 // This needed to be placed directly below the props because
@@ -49,6 +50,7 @@ const TimeFieldComponent = ({
   validationMessage,
   isDisabled,
   classNameOverride,
+  inputRef,
   ...restProps
 }: TimeFieldProps): JSX.Element => {
   const reactId = useId()
@@ -79,7 +81,7 @@ const TimeFieldComponent = ({
   const hasError = !!validationMessage && status === 'error'
   const descriptionId = hasError ? `${id}-field-message` : undefined
 
-  const inputRef = React.useRef(null)
+  const internalRef = React.useRef<HTMLDivElement>(null)
   const { fieldProps, labelProps } = useTimeField(
     {
       ...restProps,
@@ -88,36 +90,36 @@ const TimeFieldComponent = ({
       'aria-describedby': descriptionId,
     },
     state,
-    inputRef,
+    internalRef,
   )
+  const firstEditableIndex = state.segments.findIndex((s) => s.isEditable)
+
   return (
     <div className={classNameOverride}>
       <Label disabled={state.isDisabled} {...labelProps} classNameOverride={styles.label}>
         {label}
       </Label>
       <div className={styles.wrapper}>
-        {}
         <div
           {...fieldProps}
           id={id}
-          ref={inputRef}
+          ref={internalRef}
           className={classnames(
             styles.input,
             state.isDisabled && styles.isDisabled,
             status === 'error' && styles.error,
           )}
         >
-          {state.segments.map((segment, i) => {
-            return (
-              <TimeSegment
-                key={i}
-                segment={segment}
-                state={state}
-                hasPadding={![8294, 8297].includes(segment.text.charCodeAt(0))}
-                // ^react-aria includes these characters to ensure correct RTL behaviour, but we want to avoid these adding random spacing
-              />
-            )
-          })}
+          {state.segments.map((segment, i) => (
+            <TimeSegment
+              key={i}
+              segment={segment}
+              state={state}
+              inputRef={i === firstEditableIndex ? inputRef : undefined}
+              hasPadding={![8294, 8297].includes(segment.text.charCodeAt(0))}
+              // ^react-aria includes these characters to ensure correct RTL behaviour, but we want to avoid these adding random spacing
+            />
+          ))}
           <div className={styles.focusRing} />
         </div>
       </div>

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useDateSegment } from '@react-aria/datepicker'
+import { mergeRefs } from '@react-aria/utils'
 import { type DateFieldState, type DateSegment } from '@react-stately/datepicker'
 import classnames from 'classnames'
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText'
@@ -9,15 +10,17 @@ export type TimeSegmentProps = {
   segment: DateSegment
   state: DateFieldState
   hasPadding?: boolean
+  inputRef?: React.Ref<HTMLSpanElement>
 }
 
 export const TimeSegment = ({
   segment,
   state,
   hasPadding = true,
+  inputRef,
 }: TimeSegmentProps): JSX.Element => {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const { segmentProps } = useDateSegment(segment, state, ref)
+  const internalRef = React.useRef<HTMLSpanElement>(null)
+  const { segmentProps } = useDateSegment(segment, state, internalRef)
 
   // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
   // This (in combination with the invisible character &#8203;) creates boundaries
@@ -28,7 +31,7 @@ export const TimeSegment = ({
       &#8203;
       <span
         {...segmentProps}
-        ref={ref}
+        ref={mergeRefs<HTMLSpanElement>(internalRef, inputRef)}
         className={classnames(
           styles.timeSegment,
           segment.type === 'literal' && styles.literal,