@maxio-com/react-ui-components 9.24.0 → 9.24.1

package/dist/skills/maxio-react/SKILL.md

@@ -70,4 +70,5 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
 - [Patterns / Auth Layout](references/patterns-auth-layout.md)
 - [Patterns / Side Nav](references/patterns-side-nav.md)
 - [Patterns / Top Bar](references/patterns-top-bar.md)
+- [Migration Guides / v9](references/migration-guides-v9.md)
 - [Deprecated / TextInput](references/deprecated-textinput.md)

package/dist/skills/maxio-react/references/components-forms-textfield.md

@@ -60,6 +60,7 @@ messaging with the field so users understand the expected value.
 
 - **[TextArea](components-forms-textarea.md)**: use for longer, multi-line free-form content.
 - **[TextInput](deprecated-textinput.md)**: deprecated predecessor. Use TextField for new React usage.
+- **[Migrating from TextInput to TextField](migration-guides-v9.md)**: prop mapping and checklist for replacing legacy TextInput usage.
 - **[Select](components-forms-select.md)**: use when users choose from a shorter closed list.
 - **[ComboBox](components-forms-combobox.md)**: use when users choose from a list and typing should filter options.
 - **[IconButton](components-buttons-iconbutton.md)**: use for compact actions inside trailing or leading content.

package/dist/skills/maxio-react/references/deprecated-textinput.md

@@ -6,6 +6,9 @@
 
 ### Overview
 
+TextInput is deprecated. For migration details, see
+[Migrating from TextInput to TextField](migration-guides-v9.md).
+
 TextInput lets users enter or edit a short, single-line text value in a
 form.
 
@@ -61,13 +64,16 @@ form.
 ### Related
 
 - **[TextField](components-forms-textfield.md)**: preferred replacement for TextInput in new React usage.
+- **[Migrating from TextInput to TextField](migration-guides-v9.md)**: prop mapping and checklist for replacing legacy TextInput usage.
 - **[Select](components-forms-select.md)**: use when users choose from a shorter closed list.
 - **[ComboBox](components-forms-combobox.md)**: use when users choose from a list and typing should filter options.
 - **[IconButton](components-buttons-iconbutton.md)**: use for compact actions inside trailing or leading content.
 
 ## React
 
-TextInput is deprecated. Use TextField for new React usage.
+TextInput is deprecated. Use TextField for new React usage. For migration
+details, see
+[Migrating from TextInput to TextField](migration-guides-v9.md).
 
 ```tsx
 import { TextInput } from '@maxio-com/react-ui-components';

package/dist/skills/maxio-react/references/migration-guides-v9.md

@@ -0,0 +1,299 @@
+# What Changed in v9
+
+`@maxio-com/react-ui-components` is currently on the `9.x` line. This page
+tracks every component deprecated during v9 as its own section, so anyone
+catching up from an older release can see everything worth migrating in one
+place before the next major version removes deprecated APIs entirely.
+
+This page grows as more components are deprecated during v9 — each one gets
+its own section below, with a prop mapping, behavior notes, and a checklist.
+
+## TextInput to TextField
+
+_Deprecated in v9.10.0._
+
+`TextInput` is deprecated. Use `TextField` for new React forms and migrate
+existing usage when you are already touching the surrounding form.
+
+`TextField` keeps the same visual treatment and single-line input behavior,
+but it exposes the React Aria Components field API directly. Most migrations
+are a small prop rename from the legacy `TextInput` API to the supported
+`TextField` API.
+
+### Before and After
+
+<div className="migration-before-after">
+
+<div>
+
+#### Before
+
+```tsx
+import { TextInput } from '@maxio-com/react-ui-components';
+
+<TextInput
+  label="Customer name"
+  placeholder="Acme Co."
+  helperText="Use the legal business name."
+  value={customerName}
+  invalid={!customerName}
+  errorMessage="Enter a customer name."
+  disabled={isSaving}
+  onChange={setCustomerName}
+/>;
+```
+
+</div>
+
+<div>
+
+#### After
+
+```tsx
+import { TextField } from '@maxio-com/react-ui-components';
+
+<TextField
+  label="Customer name"
+  placeholder="Acme Co."
+  description="Use the legal business name."
+  value={customerName}
+  isInvalid={!customerName}
+  errorMessage="Enter a customer name."
+  isDisabled={isSaving}
+  onChange={setCustomerName}
+/>;
+```
+
+</div>
+
+</div>
+
+### Prop Mapping
+
+<div className="migration-prop-legend">
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--changed" />
+    Renamed or changed behavior
+  </div>
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--removed" />
+    No direct replacement
+  </div>
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--unchanged" />
+    Carries over unchanged
+  </div>
+</div>
+
+<table className="migration-prop-table">
+  <thead>
+    <tr>
+      <th>TextInput prop</th>
+      <th>TextField prop</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>label</code></td>
+      <td><code>label</code></td>
+      <td>Same visible label prop. Prefer a visible label whenever possible.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>helperText</code></td>
+      <td><code>description</code></td>
+      <td>Rename helper copy to <code>description</code>; it is hidden when an error shows.</td>
+    </tr>
+    <tr>
+      <td><code>errorMessage</code></td>
+      <td><code>errorMessage</code></td>
+      <td>Same error copy prop. Pair it with invalid state.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>invalid</code></td>
+      <td><code>isInvalid</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>disabled</code></td>
+      <td><code>isDisabled</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>readOnly</code></td>
+      <td><code>isReadOnly</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>required</code></td>
+      <td><code>isRequired</code></td>
+      <td>Not equivalent: <code>TextInput</code>'s native <code>required</code> attribute was silently ignored (see Behavior Notes). <code>isRequired</code> is the first working required state.</td>
+    </tr>
+    <tr>
+      <td><code>placeholder</code></td>
+      <td><code>placeholder</code></td>
+      <td>Same example-value prop. Do not use it as the only label.</td>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td><code>value</code></td>
+      <td>Same controlled value pattern.</td>
+    </tr>
+    <tr>
+      <td><code>defaultValue</code></td>
+      <td><code>defaultValue</code></td>
+      <td>Same uncontrolled value pattern.</td>
+    </tr>
+    <tr>
+      <td><code>onChange</code></td>
+      <td><code>onChange</code></td>
+      <td>Both components call <code>onChange</code> with the next string value.</td>
+    </tr>
+    <tr>
+      <td><code>size</code></td>
+      <td><code>size</code></td>
+      <td>Same supported sizes: <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.</td>
+    </tr>
+    <tr>
+      <td><code>fullWidth</code></td>
+      <td><code>fullWidth</code></td>
+      <td>Same layout prop.</td>
+    </tr>
+    <tr>
+      <td><code>leadingElement</code></td>
+      <td><code>leadingElement</code></td>
+      <td>Same slot for compact visual context or a small action.</td>
+    </tr>
+    <tr>
+      <td><code>trailingElement</code></td>
+      <td><code>trailingElement</code></td>
+      <td>Same slot for compact visual context or a small action.</td>
+    </tr>
+    <tr className="migration-prop-row--removed">
+      <td><code>showErrorMessage</code></td>
+      <td>No direct prop</td>
+      <td>Remove unless the surrounding UX intentionally suppresses error text.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>type</code></td>
+      <td><code>type</code></td>
+      <td><code>TextField</code> supports text-like types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Behavior Notes
+
+- `TextField` uses React Aria Components field state props such as `isInvalid`,
+  `isDisabled`, `isReadOnly`, and `isRequired`.
+- `TextInput` never wired a required state into its underlying `useTextField`
+  call, so passing a native `required` attribute had no effect: no
+  `aria-required`, and no native HTML5 required behavior. If any existing
+  usage relied on `required`, treat adding `isRequired` on `TextField` as
+  turning on required validation for the first time, not as a like-for-like
+  rename — double-check the surrounding form still behaves as expected.
+- `TextInput` logs a deprecation warning when it mounts.
+- `TextField` should use `description` for helper text and `errorMessage` for
+  validation feedback.
+- Keep leading and trailing interactive elements independently accessible with
+  their own accessible names.
+
+### Migration Checklist
+
+Check items off as you go. Progress is saved in your browser, so you can leave
+and come back to this guide while migrating a larger form.
+
+<Checklist
+  storageKey="migration-checklist-textinput-to-textfield"
+  items={[
+    {
+      id: 'replace-imports',
+      title: (
+        <>
+          Replace <code>TextInput</code> imports with <code>TextField</code>
+        </>
+      ),
+      description: 'TextField is the supported replacement going forward.',
+    },
+    {
+      id: 'rename-helper-text',
+      title: (
+        <>
+          Rename <code>helperText</code> to <code>description</code>
+        </>
+      ),
+      description:
+        'The prop is still hidden automatically whenever an error message shows, same as before.',
+    },
+    {
+      id: 'rename-state-props',
+      title: 'Rename legacy state props to their React Aria equivalents',
+      description: (
+        <>
+          <code>invalid</code> to <code>isInvalid</code>, <code>disabled</code>{' '}
+          to <code>isDisabled</code>, and <code>readOnly</code> to{' '}
+          <code>isReadOnly</code>.
+        </>
+      ),
+    },
+    {
+      id: 'add-is-required',
+      title: (
+        <>
+          Add <code>isRequired</code> if the field should be required
+        </>
+      ),
+      description: (
+        <>
+          It wasn't previously enforced: a native <code>required</code> on{' '}
+          <code>TextInput</code> had no effect.
+        </>
+      ),
+    },
+    {
+      id: 'controlled-state',
+      title: 'Keep the same controlled/uncontrolled state pattern',
+      description: (
+        <>
+          <code>value</code> plus <code>onChange</code> for controlled fields,{' '}
+          <code>defaultValue</code> for simple uncontrolled ones.
+        </>
+      ),
+    },
+    {
+      id: 'review-validation',
+      title: 'Review when validation errors appear',
+      description:
+        'Confirm errors still show after submit, blur, or whatever validation moment the surrounding form expects.',
+    },
+    {
+      id: 'remove-show-error-message',
+      title: (
+        <>
+          Remove <code>showErrorMessage</code> usage
+        </>
+      ),
+      description:
+        'TextField has no equivalent prop — handle any intentional suppression in the surrounding form instead.',
+    },
+    {
+      id: 'confirm-label',
+      title: 'Confirm the field still has an accessible name',
+      description:
+        'Keep a visible label wherever possible, per the component’s accessibility guidance.',
+    },
+  ]}
+/>
+
+## Looking Ahead
+
+When the next major version removes these deprecated components, its own
+upgrade guide will supersede this page — this content will move there, along
+with any other breaking changes that release introduces.
+
+## Related
+
+- **[TextField](components-forms-textfield.md)**: supported
+  React replacement for single-line text fields.
+- **[TextInput](deprecated-textinput.md)**: deprecated
+  component documentation for legacy maintenance.

package/dist/temporary-typings/src/guides/migrations/Checklist.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ChecklistItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+}
+export interface ChecklistProps {
+    storageKey: string;
+    items: ChecklistItem[];
+}
+declare const Checklist: ({ storageKey, items }: ChecklistProps) => React.JSX.Element;
+export default Checklist;
+//# sourceMappingURL=Checklist.d.ts.map

package/dist/temporary-typings/src/guides/migrations/Checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../../../src/guides/migrations/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAI7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAYD,QAAA,MAAM,SAAS,GAAI,uBAAuB,cAAc,sBAgEvD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.24.0",
+  "version": "9.24.1",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e70f1aeeb6e52345ca86e70f1e8dc74918f3f0ae"
+  "gitHead": "57a63363b591a6d87a5e1c289159da6b1a4a55e7"
 }