@kaizen/components 1.68.9 → 1.68.10

package/dist/cjs/TextArea/TextArea.cjs

@@ -27,27 +27,27 @@ var TextArea = function (_a) {
     disabled = _a.disabled,
     propsOnChange = _a.onChange,
     restProps = tslib.__rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-  var _h = React.useState(autogrow && !value ? defaultValue : undefined),
+  var _h = React.useState(defaultValue),
     internalValue = _h[0],
     setInternalValue = _h[1];
-  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
-  var controlledValue = value !== null && value !== void 0 ? value : internalValue;
+  // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
   var fallbackRef = React.useRef(null);
   var textAreaRef = propsTextAreaRef !== null && propsTextAreaRef !== void 0 ? propsTextAreaRef : fallbackRef;
   var onChange = function (event) {
     propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(event);
-    setInternalValue(event.target.value);
+    if (!value && autogrow) {
+      setInternalValue(event.target.value);
+    }
   };
   return React__default.default.createElement("div", {
     className: classnames__default.default(TextArea_module.wrapper, (_b = {}, _b[TextArea_module.wrapperAutogrow] = autogrow, _b)),
-    "data-value": autogrow ? controlledValue : undefined
+    "data-value": autogrow ? value !== null && value !== void 0 ? value : internalValue : undefined
   }, React__default.default.createElement("textarea", tslib.__assign({
     className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, (_c = {}, _c[TextArea_module.disabled] = disabled, _c[TextArea_module.textareaAutogrow] = autogrow, _c)),
     rows: rows,
     onChange: onChange,
-    value: controlledValue,
-    defaultValue: controlledValue ? undefined : defaultValue,
+    value: value,
+    defaultValue: value ? undefined : defaultValue,
     // ^ React throws a warning if you specify both a value and a defaultValue
     ref: textAreaRef,
     disabled: disabled

package/dist/esm/TextArea/TextArea.mjs

@@ -19,27 +19,27 @@ const TextArea = /*#__PURE__*/function () {
       disabled = _a.disabled,
       propsOnChange = _a.onChange,
       restProps = __rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-    var _h = useState(autogrow && !value ? defaultValue : undefined),
+    var _h = useState(defaultValue),
       internalValue = _h[0],
       setInternalValue = _h[1];
-    // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-    // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
-    var controlledValue = value !== null && value !== void 0 ? value : internalValue;
+    // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
     var fallbackRef = useRef(null);
     var textAreaRef = propsTextAreaRef !== null && propsTextAreaRef !== void 0 ? propsTextAreaRef : fallbackRef;
     var onChange = function (event) {
       propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(event);
-      setInternalValue(event.target.value);
+      if (!value && autogrow) {
+        setInternalValue(event.target.value);
+      }
     };
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.wrapper, (_b = {}, _b[styles.wrapperAutogrow] = autogrow, _b)),
-      "data-value": autogrow ? controlledValue : undefined
+      "data-value": autogrow ? value !== null && value !== void 0 ? value : internalValue : undefined
     }, /*#__PURE__*/React.createElement("textarea", __assign({
       className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, (_c = {}, _c[styles.disabled] = disabled, _c[styles.textareaAutogrow] = autogrow, _c)),
       rows: rows,
       onChange: onChange,
-      value: controlledValue,
-      defaultValue: controlledValue ? undefined : defaultValue,
+      value: value,
+      defaultValue: value ? undefined : defaultValue,
       // ^ React throws a warning if you specify both a value and a defaultValue
       ref: textAreaRef,
       disabled: disabled

package/dist/styles.css

@@ -312,26 +312,6 @@
   visibility: hidden;
 }
 
-.ButtonContent-module_buttonContent__v5mHZ {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--button-icon-gap, var(--spacing-6));
-}
-
-.ButtonContent-module_large__mLOdb {
-  --button-icon-gap: var(--spacing-8);
-}
-
-.ButtonContent-module_buttonLabel__T5XAq {
-  display: inline-flex;
-  align-items: center;
-}
-
-.ButtonContent-module_buttonIcon__qkAX- {
-  display: inline-flex;
-  align-items: center;
-}
-
 .PendingContent-module_pendingContent__c4IFS {
   display: inline-flex;
   align-items: center;
@@ -349,37 +329,26 @@
   transform: translate(-50%, -50%);
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.OverlayArrow-module_overlayArrow__hoDyK {
-  display: flex;
-  padding: 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
-  padding: 0 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
-  padding: 8px 0;
-}
-.OverlayArrow-module_overlayArrow__hoDyK path {
-  fill: var(--color-purple-800, #2f2438);
-  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
-  transform: rotate(90deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
-  transform: rotate(180deg);
+.ButtonContent-module_buttonContent__v5mHZ {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-icon-gap, var(--spacing-6));
 }
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
-  transform: rotate(270deg);
+
+.ButtonContent-module_large__mLOdb {
+  --button-icon-gap: var(--spacing-8);
 }
-.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
-  fill: var(--color-white, #ffffff);
+
+.ButtonContent-module_buttonLabel__T5XAq {
+  display: inline-flex;
+  align-items: center;
 }
-.Focusable-module_focusableWrapper__NfuIi {
+
+.ButtonContent-module_buttonIcon__qkAX- {
   display: inline-flex;
+  align-items: center;
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -436,6 +405,37 @@
     opacity: 1;
   }
 }
+.Focusable-module_focusableWrapper__NfuIi {
+  display: inline-flex;
+}
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+.OverlayArrow-module_overlayArrow__hoDyK {
+  display: flex;
+  padding: 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
+  padding: 0 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
+  padding: 8px 0;
+}
+.OverlayArrow-module_overlayArrow__hoDyK path {
+  fill: var(--color-purple-800, #2f2438);
+  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
+  transform: rotate(90deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
+  transform: rotate(180deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
+  transform: rotate(270deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
+  fill: var(--color-white, #ffffff);
+}
 /*
  * This is taken from the Material Symbols CDN
  * font-weight & font-size removed as overridden in .icon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.9",
+  "version": "1.68.10",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -110,7 +110,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^6.8.9",
+    "react-intl": "^7.0.1",
     "rollup": "^4.28.0",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
@@ -128,7 +128,7 @@
     "@cultureamp/i18n-react-intl": "^2.5.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intl": "^6.6.8",
+    "react-intl": "^6.6.8 || ^7.0.0",
     "typescript": "5.x"
   },
   "peerDependenciesMeta": {

package/src/TextArea/TextArea.tsx

@@ -33,17 +33,18 @@ export const TextArea = ({
 }: TextAreaProps): JSX.Element => {
   const [internalValue, setInternalValue] = useState<
     string | number | readonly string[] | undefined
-  >(autogrow && !value ? defaultValue : undefined)
-  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+  >(defaultValue)
+  // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
 
-  const controlledValue = value ?? internalValue
   const fallbackRef = useRef(null)
   const textAreaRef = propsTextAreaRef ?? fallbackRef
 
   const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
     propsOnChange?.(event)
-    setInternalValue(event.target.value)
+
+    if (!value && autogrow) {
+      setInternalValue(event.target.value)
+    }
   }
 
   return (
@@ -51,7 +52,7 @@ export const TextArea = ({
       className={classnames(styles.wrapper, {
         [styles.wrapperAutogrow]: autogrow,
       })}
-      data-value={autogrow ? controlledValue : undefined}
+      data-value={autogrow ? (value ?? internalValue) : undefined}
     >
       <textarea
         className={classnames(
@@ -65,8 +66,8 @@ export const TextArea = ({
         )}
         rows={rows}
         onChange={onChange}
-        value={controlledValue}
-        defaultValue={controlledValue ? undefined : defaultValue}
+        value={value}
+        defaultValue={value ? undefined : defaultValue}
         // ^ React throws a warning if you specify both a value and a defaultValue
         ref={textAreaRef}
         disabled={disabled}

package/src/TextArea/_docs/TextArea.stickersheet.stories.tsx

@@ -24,20 +24,29 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
-      <StickerSheet.Row header="Enabled">
-        <TextArea reversed={isReversed} />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-      <StickerSheet.Row header="Disabled">
-        <TextArea reversed={isReversed} disabled />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-    </StickerSheet>
+    <>
+      <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
+        <StickerSheet.Row header="Enabled">
+          <TextArea reversed={isReversed} />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Disabled">
+          <TextArea reversed={isReversed} disabled />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+      </StickerSheet>
+      <StickerSheet title="Autogrow">
+        <TextArea
+          rows={1}
+          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis nisi sit amet consectetur ultricies. Vestibulum porta arcu vitae erat egestas pulvinar. Proin tincidunt mi ultricies risus ultrices semper. Donec consequat, mi at tincidunt mattis, felis metus semper metus, a imperdiet justo odio ac elit. Nulla et lacinia enim. Donec placerat, arcu a hendrerit iaculis, massa ante venenatis urna, vitae vestibulum massa orci et erat. Sed in cursus arcu. Fusce fringilla urna tincidunt risus sodales mollis. Ut sit amet mi vitae justo aliquam congue eget eu nisl. Mauris sit amet dolor fermentum, rutrum orci eget, feugiat mi. Etiam feugiat auctor augue, non volutpat nisi aliquet non. Praesent dignissim, lacus id iaculis porttitor, purus libero fermentum urna, in faucibus massa enim sed dui. Maecenas et nisi in nulla condimentum dictum. Maecenas tincidunt turpis non consequat pharetra. Suspendisse in auctor erat, vel ullamcorper elit. Nullam rutrum pharetra turpis, id luctus nisi sollicitudin ac. Maecenas sodales malesuada orci. Integer ultrices, nisi non blandit commodo, turpis enim iaculis ante, vel blandit diam sapien eget justo. Mauris scelerisque euismod quam, nec accumsan lorem venenatis vel. Sed rhoncus purus turpis, vel efficitur metus placerat et."
+          autogrow
+        />
+      </StickerSheet>
+    </>
   ),
   parameters: {
     pseudo: {