@kaizen/components 3.1.6 → 3.3.0

package/dist/esm/src/RichTextEditor/utils/core/hooks/useRichTextEditor.mjs

@@ -1,5 +1,5 @@
-import { __assign } from 'tslib';
 import { useState, useRef, useCallback } from 'react';
+import { isRefObject } from '../../../../utils/isRefObject.mjs';
 import { createRichTextEditor } from '../createRichTextEditor.mjs';
 
 /**
@@ -14,13 +14,14 @@ var useRichTextEditor = function (initialEditorState,
 /*
  * Pass in HTML attributes into the parent RTE node
  */
-attributes, options) {
-  options = __assign({
-    editable: true
-  }, options);
-  var _a = 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 = useState(initialEditorState),
+    editorState = _d[0],
+    setEditorState = _d[1];
   // Refs to hold the methods returned from ProseMirror’s initialization
   var destroyEditorRef = useRef();
   var dispatchTransactionRef = useRef(function () {
@@ -32,7 +33,10 @@ attributes, options) {
     dispatchTransactionRef.current(commandOrTransaction);
   }, [dispatchTransactionRef]);
   // Hold editableStatus as a ref so we can toggle its status
-  var editableStatusRef = useRef(options.editable);
+  var editableStatusRef = useRef(editable);
+  // Stable ref to avoid recreating editorRef when inputRef callback identity changes
+  var inputRefRef = useRef(inputRef);
+  inputRefRef.current = inputRef;
   var setEditableStatus = useCallback(function (status) {
     editableStatusRef.current = status;
     // Trigger an update within ProseMirror by issuing a noop transaction
@@ -46,11 +50,17 @@ attributes, options) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [editableStatusRef]);
   var editorRef = useCallback(function (node) {
+    var _a, _b;
     if (node === null) {
       if (destroyEditorRef.current) {
         destroyEditorRef.current();
         destroyEditorRef.current = undefined;
       }
+      if (inputRefRef.current && 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({
@@ -64,6 +74,11 @@ attributes, options) {
     });
     destroyEditorRef.current = instance.destroy;
     dispatchTransactionRef.current = instance.dispatchTransaction;
+    if (inputRefRef.current && 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/esm/src/SingleSelect/SingleSelect.mjs

@@ -2,6 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useId, useState, useEffect } from 'react';
 import { useButton } from '@react-aria/button';
 import { useSelect, HiddenSelect } from '@react-aria/select';
+import { mergeRefs } from '@react-aria/utils';
 import { useSelectState } from '@react-stately/select';
 import classnames from 'classnames';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
@@ -45,7 +46,8 @@ const SingleSelect = /*#__PURE__*/function () {
       isDisabled = _a.isDisabled,
       onSelectionChange = _a.onSelectionChange,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId"]);
+      inputRef = _a.inputRef,
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId", "inputRef"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -94,7 +96,7 @@ const SingleSelect = /*#__PURE__*/function () {
       status: status,
       'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
-      'ref': refs.setReference,
+      'ref': mergeRefs(inputRef, refs.setReference),
       'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
       'aria-required': isRequired
     });

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");
   };