@kaizen/components 3.2.0 → 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/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/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/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 };

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