@baseline-ui/mcp 2.2.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/{chunk-ZSPBMEL5.js → chunk-KCZS5KSR.js} +288 -14
- package/dist/index.js +1 -1
- package/dist/server.cjs +288 -14
- package/dist/server.js +1 -1
- package/package.json +1 -1
- package/sbom.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -8408,6 +8408,36 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
|
|
|
8408
8408
|
editorHandle={editorHandleRef}
|
|
8409
8409
|
/>
|
|
8410
8410
|
);
|
|
8411
|
+
};
|
|
8412
|
+
|
|
8413
|
+
/**
|
|
8414
|
+
* The \`value\` is plain text, never the canonical HTML the editor serializes
|
|
8415
|
+
* back \u2014 canonicalizing it would stop reproducing the re-apply on every render.
|
|
8416
|
+
*/
|
|
8417
|
+
export const EditorControlledPlainValueBesideInput = () => {
|
|
8418
|
+
const [body, setBody] = React.useState("Hello there");
|
|
8419
|
+
const [name, setName] = React.useState("");
|
|
8420
|
+
|
|
8421
|
+
return (
|
|
8422
|
+
<>
|
|
8423
|
+
<input
|
|
8424
|
+
aria-label="Recipient name"
|
|
8425
|
+
value={name}
|
|
8426
|
+
onChange={(event) => {
|
|
8427
|
+
setName(event.currentTarget.value);
|
|
8428
|
+
}}
|
|
8429
|
+
/>
|
|
8430
|
+
<Editor
|
|
8431
|
+
enableRichText={true}
|
|
8432
|
+
value={body}
|
|
8433
|
+
// Inline on purpose: a stable handler would let Editor's React.memo
|
|
8434
|
+
// block the re-render this test needs.
|
|
8435
|
+
onChange={(next) => {
|
|
8436
|
+
setBody(next);
|
|
8437
|
+
}}
|
|
8438
|
+
/>
|
|
8439
|
+
</>
|
|
8440
|
+
);
|
|
8411
8441
|
};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
|
|
8412
8442
|
/**
|
|
8413
8443
|
* The description to display below the input.
|
|
@@ -10665,14 +10695,48 @@ children: React.ReactNode
|
|
|
10665
10695
|
locale?: string
|
|
10666
10696
|
messages?: LocalizedStrings
|
|
10667
10697
|
/**
|
|
10668
|
-
* Whether to \`console.warn\` about message
|
|
10669
|
-
*
|
|
10670
|
-
*
|
|
10671
|
-
* in
|
|
10698
|
+
* Whether to \`console.warn\` about message-resolution failures \u2014 see
|
|
10699
|
+
* {@link MessageIssueCode} for the kinds. These warnings are development
|
|
10700
|
+
* guidance, so they are off in production builds \u2014 pass \`true\` to opt back
|
|
10701
|
+
* in. Ignored when \`onMessageIssue\` is supplied.
|
|
10672
10702
|
*
|
|
10673
10703
|
* @default process.env.NODE_ENV !== "production"
|
|
10674
10704
|
*/
|
|
10675
10705
|
shouldLogMissingMessages?: boolean
|
|
10706
|
+
/**
|
|
10707
|
+
* Called for every message-resolution failure, with enough detail to tell an
|
|
10708
|
+
* unresolved id from a malformed message and route either into your own
|
|
10709
|
+
* diagnostics.
|
|
10710
|
+
*
|
|
10711
|
+
* Supplying a handler takes ownership of these failures: Baseline UI reports
|
|
10712
|
+
* to it instead of writing to the console, so \`shouldLogMissingMessages\` no
|
|
10713
|
+
* longer applies. Unlike the console warnings, the handler is also called in
|
|
10714
|
+
* production builds.
|
|
10715
|
+
*
|
|
10716
|
+
* Issues are deduplicated: after mount, each distinct failure is reported
|
|
10717
|
+
* once per locale rather than once per render, and changing the locale starts
|
|
10718
|
+
* a fresh set.
|
|
10719
|
+
*
|
|
10720
|
+
* Called **during render** \u2014 except \`locale-alias-collision\`, which is
|
|
10721
|
+
* reported from an effect \u2014 so it must not set state synchronously. Collect
|
|
10722
|
+
* into a ref, or defer with \`queueMicrotask\`, if a failure needs to reach the
|
|
10723
|
+
* UI. A handler that throws is caught and its own error logged, so a broken
|
|
10724
|
+
* handler cannot take the tree down.
|
|
10725
|
+
*
|
|
10726
|
+
* @example
|
|
10727
|
+
* \`\`\`tsx
|
|
10728
|
+
* <I18nProvider
|
|
10729
|
+
* messages={messages}
|
|
10730
|
+
* onMessageIssue={(issue) => {
|
|
10731
|
+
* if (issue.code === "missing-message") return;
|
|
10732
|
+
* telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
10733
|
+
* }}
|
|
10734
|
+
* >
|
|
10735
|
+
* {children}
|
|
10736
|
+
* </I18nProvider>
|
|
10737
|
+
* \`\`\`;
|
|
10738
|
+
*/
|
|
10739
|
+
onMessageIssue?: (issue: MessageIssue) => void
|
|
10676
10740
|
}`,stories:{usage:[{id:"core-utilities-i18nprovider--string-format",name:"String Format",snippet:`const StringFormat = ({ children }) => {
|
|
10677
10741
|
const { locale } = useLocale();
|
|
10678
10742
|
return <I18nProvider locale={locale}>{children}</I18nProvider>;
|
|
@@ -14332,7 +14396,7 @@ export const MenuPartialSectionSelectionExample: React.FC<{
|
|
|
14332
14396
|
<div data-testid="menu-partial-action">{action}</div>
|
|
14333
14397
|
</>
|
|
14334
14398
|
);
|
|
14335
|
-
};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage
|
|
14399
|
+
};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nPassing `id` and `defaultMessage` as separate props leaves `defaultMessage` easy to omit, and an `id` nothing answers for renders as itself. Declaring the message with `defineMessages` and spreading the descriptor keeps the two together, so there is no way to pass one without the other \u2014 and the same descriptor is what the extraction pipeline reads:\n\n```jsx\nimport { defineMessages, MessageFormat } from "@baseline-ui/core";\n\nconst messages = defineMessages({\n hello: {\n id: "myApp.hello",\n defaultMessage: "Hello, {name}!",\n description: "Greeting shown at the top of the dashboard.",\n },\n});\n\n<MessageFormat {...messages.hello} values={{ name: "Ada" }} />;\n```\n\n`description` is translator context; it is ignored at render time and never reaches the DOM.\n\nWrite every `defaultMessage` as a literal, whether it comes from a descriptor or the prop. Each distinct template is compiled once and cached, so a message built per render \u2014 interpolating a file name or a row into the template itself rather than passing it through `values` \u2014 churns that cache and recompiles the templates it displaces.\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\nconst messages = defineMessages({\n pageXofY: {\n id: "myApp.pageXofY",\n defaultMessage: "Page {current} of {total}",\n description:\n "Pagination status. `current` is the current page, `total` the last.",\n },\n});\n\n<MessageFormat {...messages.pageXofY} values={{ current: 2, total: 10 }} />;\n// \u2192 "Page 2 of 10"\n```\n\nSpreading the descriptor is what makes that true on its own. With a bare\n`id`, the same line renders `"Page 2 of 10"` only where a supplied catalog\ncovers the active locale, and the id itself everywhere else.',props:`interface MessageFormatProps {
|
|
14336
14400
|
/**
|
|
14337
14401
|
* By default \`<MessageFormat>\` will render the formatted string into a
|
|
14338
14402
|
* \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
|
|
@@ -14341,13 +14405,26 @@ export const MenuPartialSectionSelectionExample: React.FC<{
|
|
|
14341
14405
|
*/
|
|
14342
14406
|
elementType?: React.ElementType | "div" | "span"
|
|
14343
14407
|
/**
|
|
14344
|
-
* The id of the message to format.
|
|
14408
|
+
* The id of the message to format. Spread a \`defineMessages\` descriptor to
|
|
14409
|
+
* pass this and \`defaultMessage\` together rather than as separate props.
|
|
14345
14410
|
*/
|
|
14346
14411
|
id: string
|
|
14347
14412
|
/**
|
|
14348
|
-
* The
|
|
14413
|
+
* The message to render when no supplied catalog answers for \`id\`. Without
|
|
14414
|
+
* it an unanswered \`id\` renders as itself, so pass one for any message the
|
|
14415
|
+
* active catalog might not cover.
|
|
14416
|
+
*
|
|
14417
|
+
* Write it as a literal \u2014 the only form the extraction pipeline can read.
|
|
14418
|
+
* Distinct templates are compiled once and cached, so one built per render \u2014
|
|
14419
|
+
* per file name, per row \u2014 churns that cache and recompiles the templates it
|
|
14420
|
+
* displaces.
|
|
14349
14421
|
*/
|
|
14350
14422
|
defaultMessage?: string
|
|
14423
|
+
/**
|
|
14424
|
+
* Values for the message's ICU placeholders, e.g. \`{ arg0: 2, arg1: 10 }\` for
|
|
14425
|
+
* \`"Page {arg0} of {arg1}"\`.
|
|
14426
|
+
*/
|
|
14427
|
+
values?: Record<string, any>
|
|
14351
14428
|
}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="myApp.addSignature" defaultMessage="Add signature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
|
|
14352
14429
|
|
|
14353
14430
|
* The content outside the modal is hidden from screen readers.
|
|
@@ -35155,6 +35232,22 @@ Import the following files at the top of your stylesheet to use the Baseline UI
|
|
|
35155
35232
|
|
|
35156
35233
|
Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.
|
|
35157
35234
|
|
|
35235
|
+
## Bundle size
|
|
35236
|
+
|
|
35237
|
+
Components, hooks and utilities are tree shakeable. Importing from \`@baseline-ui/core\` bundles what you name and what it depends on, not the whole library \u2014 keep importing from the package root, there are no deep entry points to reach for:
|
|
35238
|
+
|
|
35239
|
+
\`\`\`jsx
|
|
35240
|
+
// Bundles Checkbox, not the rest of the library.
|
|
35241
|
+
import { Checkbox } from "@baseline-ui/core";
|
|
35242
|
+
|
|
35243
|
+
// Bundles the hook alone, not the components that also use it.
|
|
35244
|
+
import { useLocalStorage } from "@baseline-ui/core";
|
|
35245
|
+
\`\`\`
|
|
35246
|
+
|
|
35247
|
+
This applies to the ESM build, which bundlers pick up through the package's \`module\` field. The CommonJS build is a single file and cannot be split, so a CommonJS \`require\` still pulls in the whole library.
|
|
35248
|
+
|
|
35249
|
+
Styles aren't split: \`@baseline-ui/core/dist/index.css\` carries every component's CSS regardless of what you import.
|
|
35250
|
+
|
|
35158
35251
|
## Charts
|
|
35159
35252
|
|
|
35160
35253
|
Chart components live in a separate package so projects that don\u2019t need data visualizations don\u2019t pay the bundle cost. Install it alongside the core packages:
|
|
@@ -35406,6 +35499,8 @@ It\u2019s important the content of your website is accessible to as many people
|
|
|
35406
35499
|
|
|
35407
35500
|
Translated strings are the one part you opt into. Components render English until you import a catalog and pass it to \`I18nProvider\`, so an application that ships in English carries none of the other locales in its bundle. See [Loading a translation catalog](#loading-a-translation-catalog).
|
|
35408
35501
|
|
|
35502
|
+
Every string resolves the same way, wherever you format it: a matching entry in the catalogs you supplied, then the \`defaultMessage\` on the descriptor you passed to \`formatMessage\`, and only if neither answers, the id itself. Every Baseline UI component formats through a descriptor with its English text inlined, so a component rendered with no \`I18nProvider\` still renders English. A bare string id you format yourself has no descriptor to fall back to, so it renders only when a catalog answers for it \u2014 see [Outside a render](#outside-a-render) for what that means for \`formatMessage\`.
|
|
35503
|
+
|
|
35409
35504
|
## Localization
|
|
35410
35505
|
|
|
35411
35506
|
Localization is the process of translating your website into different languages. Baseline UI supports localization of the built-in strings, dates and times, number/currency formatting, collating and sorting, text search, and more. It\u2019s built on top of [react-aria](https://react-spectrum.adobe.com/react-aria), whose own strings \u2014 the announcements a date picker or a drag handle makes to a screen reader \u2014 are bundled and translated for you. Baseline UI\u2019s strings are the ones you load a catalog for, and you can add your own on top.
|
|
@@ -35504,14 +35599,21 @@ locale is \`ja-JP\`, say \u2014 every string falls back to English and that is r
|
|
|
35504
35599
|
the locale rather than once per ID. It means the catalog keys and the locale disagree,
|
|
35505
35600
|
which no per-ID warning can tell you. It stays quiet when the active locale is itself
|
|
35506
35601
|
English, since falling back to English is then the intended result. Supplying no catalogs
|
|
35507
|
-
at all is the supported English-only mode
|
|
35602
|
+
at all is the supported English-only mode, so a message rendering its own \`defaultMessage\`
|
|
35603
|
+
there is reported as missing nothing. An ID with no \`defaultMessage\` behind it is still
|
|
35604
|
+
reported, since it has nothing to render but itself, and so is a string that will not
|
|
35605
|
+
format, since that is a broken template rather than a missing translation.
|
|
35508
35606
|
|
|
35509
|
-
|
|
35510
|
-
[\`useI18n\`](#your-own-strings)
|
|
35607
|
+
A missing translation is reported whatever its ID, so an app that routes its own strings
|
|
35608
|
+
through [\`useI18n\`](#your-own-strings) gets the same \`missing-message\` and
|
|
35609
|
+
\`no-catalog-for-locale\` diagnostics Baseline UI does for its own \`bui.*\` strings. A string
|
|
35610
|
+
that will not format is reported whatever its ID too, since whoever wrote the template can
|
|
35611
|
+
act on it.
|
|
35511
35612
|
|
|
35512
35613
|
### Controlling the warnings
|
|
35513
35614
|
|
|
35514
|
-
The warnings above \u2014 the missing-ID, no-matching-catalog,
|
|
35615
|
+
The warnings above \u2014 the missing-ID, malformed-template, no-matching-catalog,
|
|
35616
|
+
duplicate-locale-key and
|
|
35515
35617
|
[bare-ID deprecation](#migrating-from-bare-ids) ones \u2014 are development guidance, so they
|
|
35516
35618
|
are off when \`process.env.NODE_ENV === "production"\`. That keeps a consumer who never
|
|
35517
35619
|
touched \`messages\` from logging Baseline UI's internal IDs to their end users. Set
|
|
@@ -35533,8 +35635,63 @@ touched \`messages\` from logging Baseline UI's internal IDs to their end users.
|
|
|
35533
35635
|
</I18nProvider>;
|
|
35534
35636
|
\`\`\`
|
|
35535
35637
|
|
|
35536
|
-
|
|
35537
|
-
languages re-reports what the new locale is missing.
|
|
35638
|
+
After mount, each distinct warning is logged once and the set resets when the locale
|
|
35639
|
+
changes, so switching languages re-reports what the new locale is missing.
|
|
35640
|
+
|
|
35641
|
+
A missing translation is reported for your own IDs as much as for Baseline UI's, so an
|
|
35642
|
+
application that supplies catalogs and also routes its own strings through
|
|
35643
|
+
[\`useI18n\`](#your-own-strings) will see one warning per ID those catalogs do not cover \u2014
|
|
35644
|
+
the \`defaultMessage\` still renders, but the translation really is missing. Add the IDs to
|
|
35645
|
+
the catalogs you supply, or turn the warnings off with \`shouldLogMissingMessages={false}\`
|
|
35646
|
+
\u2014 noting that the flag is the console switch for every code, so it also silences broken
|
|
35647
|
+
templates and deprecated IDs. To quiet only the missing translations, take the reports
|
|
35648
|
+
through [\`onMessageIssue\`](#collecting-the-failures-yourself) and filter on \`code\` or on
|
|
35649
|
+
an ID prefix.
|
|
35650
|
+
|
|
35651
|
+
### Collecting the failures yourself
|
|
35652
|
+
|
|
35653
|
+
A console warning is hard to act on: you cannot tell the failure kinds apart, route them
|
|
35654
|
+
into your own diagnostics, or keep them out of the console of a product that embeds
|
|
35655
|
+
Baseline UI. Pass \`onMessageIssue\` to receive each one as an object instead:
|
|
35656
|
+
|
|
35657
|
+
\`\`\`tsx
|
|
35658
|
+
<I18nProvider
|
|
35659
|
+
locale="de-DE"
|
|
35660
|
+
messages={messages}
|
|
35661
|
+
onMessageIssue={(issue) => {
|
|
35662
|
+
// A translation you know is still being written \u2014 ignore it.
|
|
35663
|
+
if (issue.code === "missing-message") return;
|
|
35664
|
+
|
|
35665
|
+
telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
35666
|
+
}}
|
|
35667
|
+
>
|
|
35668
|
+
<YourApp />
|
|
35669
|
+
</I18nProvider>
|
|
35670
|
+
\`\`\`
|
|
35671
|
+
|
|
35672
|
+
Every issue carries a \`code\`, the \`locale\` it concerns, the \`message\` Baseline UI would
|
|
35673
|
+
otherwise have logged \u2014 whose wording is not part of the contract \u2014 and, for the codes
|
|
35674
|
+
that are about a single string, the \`id\`:
|
|
35675
|
+
|
|
35676
|
+
| \`code\` | What happened |
|
|
35677
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
35678
|
+
| \`missing-message\` | No supplied catalog answers for \`id\`; the descriptor's \`defaultMessage\` renders instead, or \`id\` itself if it has none. Any \`id\`. |
|
|
35679
|
+
| \`malformed-message\` | A catalog entry or \`defaultMessage\` would not parse or format as ICU. \`source\` says which, \`error\` is the throw. Any \`id\`. |
|
|
35680
|
+
| \`deprecated-message-id\` | \`id\` resolved only through the [bare-ID fallback](#migrating-from-bare-ids). \`bui.*\` IDs only. |
|
|
35681
|
+
| \`no-catalog-for-locale\` | Catalogs were supplied, but none covers the active locale. Raised once for the locale, so it carries no \`id\`; not reported for English locales. |
|
|
35682
|
+
| \`locale-alias-collision\` | One locale supplied under two ID formats; the hyphenated entry wins. |
|
|
35683
|
+
|
|
35684
|
+
Supplying a handler takes ownership of these failures: Baseline UI reports to it instead
|
|
35685
|
+
of writing to the console, so \`shouldLogMissingMessages\` no longer applies. Unlike the
|
|
35686
|
+
warnings, the handler is also called in production builds \u2014 that is the point of routing
|
|
35687
|
+
them into your own diagnostics. Deduplication is unchanged, so you get one call per
|
|
35688
|
+
distinct failure per locale rather than one per render.
|
|
35689
|
+
|
|
35690
|
+
The handler is called during render \u2014 except \`locale-alias-collision\`, which is reported
|
|
35691
|
+
from an effect \u2014 so it must not set state synchronously. Collect into a ref, or defer
|
|
35692
|
+
with \`queueMicrotask\`, if a failure needs to reach the UI. Further
|
|
35693
|
+
\`code\` values may be added in a minor release: branch on the ones you care about and let
|
|
35694
|
+
the rest fall through to a default.
|
|
35538
35695
|
|
|
35539
35696
|
### Your own strings
|
|
35540
35697
|
|
|
@@ -35567,6 +35724,123 @@ The catalogs you pass to \`useI18n\` are merged per locale with the ones on \`I1
|
|
|
35567
35724
|
and the provider wins on a shared key \u2014 so an application can hold its own strings locally
|
|
35568
35725
|
while a host app still overrides any \`bui.*\` string from above.
|
|
35569
35726
|
|
|
35727
|
+
### Outside a render
|
|
35728
|
+
|
|
35729
|
+
Some strings are not composed while a component renders: an alert raised from an async
|
|
35730
|
+
task, a label built in a plain utility module, a value handed to a non-React API.
|
|
35731
|
+
\`createMessageFormatter\` gives you the same formatter without a component around it:
|
|
35732
|
+
|
|
35733
|
+
\`\`\`ts
|
|
35734
|
+
import { createMessageFormatter, defineMessages } from "@baseline-ui/core";
|
|
35735
|
+
import de from "@baseline-ui/core/intl/de.json";
|
|
35736
|
+
|
|
35737
|
+
const messages = defineMessages({
|
|
35738
|
+
greeting: {
|
|
35739
|
+
id: "myApp.greeting",
|
|
35740
|
+
defaultMessage: "Hello, {name}",
|
|
35741
|
+
description: "Greeting in a toast raised from a non-React module.",
|
|
35742
|
+
},
|
|
35743
|
+
});
|
|
35744
|
+
|
|
35745
|
+
const formatMessage = createMessageFormatter({
|
|
35746
|
+
locale: "de-DE",
|
|
35747
|
+
messages: { de },
|
|
35748
|
+
});
|
|
35749
|
+
|
|
35750
|
+
formatMessage("bui.editor.bold"); // "Fett" \u2014 resolved from the \`de\` catalog
|
|
35751
|
+
formatMessage(messages.greeting, { name: "Alex" }); // \`de\` has no \`myApp.greeting\` entry, so the descriptor's \`defaultMessage\` renders
|
|
35752
|
+
\`\`\`
|
|
35753
|
+
|
|
35754
|
+
It runs on the same engine as \`useI18n\`, so for a given locale, catalog and set of values
|
|
35755
|
+
it returns exactly the string a component would render \u2014 the same catalog resolution, the
|
|
35756
|
+
same \`defaultMessage\` fallback, the same warnings. A bare string id like \`"bui.editor.bold"\`
|
|
35757
|
+
has no descriptor of its own, so it renders only when a catalog answers for it \u2014 pass the
|
|
35758
|
+
descriptor, as \`messages.greeting\` does above, whenever the id might not be covered.
|
|
35759
|
+
|
|
35760
|
+
What differs is where its inputs come from. There is no surrounding \`I18nProvider\`, so
|
|
35761
|
+
\`locale\` is required rather than inherited, and \`messages\` are the only catalogs consulted
|
|
35762
|
+
\u2014 nothing is merged in from a provider. \`shouldLogMissingMessages\` defaults the same way
|
|
35763
|
+
it does on \`I18nProvider\`: off in production builds, on everywhere else, and
|
|
35764
|
+
\`onMessageIssue\` takes the same ownership of failures when you pass one:
|
|
35765
|
+
|
|
35766
|
+
\`\`\`ts
|
|
35767
|
+
const formatMessage = createMessageFormatter({
|
|
35768
|
+
locale: "de-DE",
|
|
35769
|
+
messages: { de },
|
|
35770
|
+
onMessageIssue: (issue) => telemetry.report(issue.code, { id: issue.id }),
|
|
35771
|
+
});
|
|
35772
|
+
\`\`\`
|
|
35773
|
+
|
|
35774
|
+
Issues are deduplicated per formatter rather than per provider, since a formatter is bound
|
|
35775
|
+
to one locale and never resets. One is raised eagerly rather than on first use: supplying the same locale in two key formats
|
|
35776
|
+
(\`fr_CA\` and \`fr-CA\`) is reported when the formatter is built, so it also surfaces during
|
|
35777
|
+
server-side rendering.
|
|
35778
|
+
|
|
35779
|
+
An invalid \`locale\` throws \u2014 unlike the keys of \`messages\`, it must be a BCP 47 tag
|
|
35780
|
+
(\`fr-CA\`, not \`fr_CA\`).
|
|
35781
|
+
|
|
35782
|
+
Build the formatter once per locale and reuse it rather than calling this per message: it
|
|
35783
|
+
keeps each template it has compiled, and its own record of which warnings it has logged.
|
|
35784
|
+
|
|
35785
|
+
Inside a component, keep using \`useI18n\`: it follows the locale and catalogs of the
|
|
35786
|
+
provider above it, and re-formats when either changes.
|
|
35787
|
+
|
|
35788
|
+
### If a bare id renders as itself
|
|
35789
|
+
|
|
35790
|
+
A bare string id you format yourself \u2014 not one of Baseline UI's own, which always go
|
|
35791
|
+
through a descriptor \u2014 now renders as the id itself, with a \`missing-message\` issue
|
|
35792
|
+
reported, once no supplied catalog answers for it. It used to fall back to whatever
|
|
35793
|
+
\`defaultMessage\` any \`defineMessages\` call elsewhere in the app happened to declare for
|
|
35794
|
+
that id; that made resolution depend on which modules a bundler had already evaluated, so
|
|
35795
|
+
it is gone. Resolution is the same everywhere you call it now: a catalog entry, then the
|
|
35796
|
+
\`defaultMessage\` on the descriptor you passed, then the id.
|
|
35797
|
+
|
|
35798
|
+
Fix it by passing the descriptor instead of the bare id, so \`formatMessage\` has a
|
|
35799
|
+
\`defaultMessage\` to fall back to:
|
|
35800
|
+
|
|
35801
|
+
\`\`\`ts
|
|
35802
|
+
formatMessage(messages.greeting, { name });
|
|
35803
|
+
\`\`\`
|
|
35804
|
+
|
|
35805
|
+
or by supplying a catalog that answers for it \u2014 Baseline UI's own \`bui.*\` ids resolve for
|
|
35806
|
+
any locale you load a shipped catalog for, \`@baseline-ui/core/intl/<locale>.json\` (33
|
|
35807
|
+
locales).
|
|
35808
|
+
|
|
35809
|
+
### From a class component
|
|
35810
|
+
|
|
35811
|
+
\`useI18n\` is a hook, so a class component cannot call it. Render
|
|
35812
|
+
[\`MessageFormat\`](/?path=/docs/core-utilities-messageformat--docs) instead \u2014 it resolves
|
|
35813
|
+
the same IDs, against the same catalogs, under the same \`I18nProvider\`, so a class
|
|
35814
|
+
component localizes without being rewritten as a function component first:
|
|
35815
|
+
|
|
35816
|
+
\`\`\`jsx
|
|
35817
|
+
import { defineMessages, MessageFormat } from "@baseline-ui/core";
|
|
35818
|
+
|
|
35819
|
+
const messages = defineMessages({
|
|
35820
|
+
greeting: {
|
|
35821
|
+
id: "myApp.greeting",
|
|
35822
|
+
defaultMessage: "Hello, {name}",
|
|
35823
|
+
description:
|
|
35824
|
+
"Greeting in the page heading. {name} is the user's first name.",
|
|
35825
|
+
},
|
|
35826
|
+
});
|
|
35827
|
+
|
|
35828
|
+
class Header extends React.Component {
|
|
35829
|
+
render() {
|
|
35830
|
+
return (
|
|
35831
|
+
<MessageFormat
|
|
35832
|
+
{...messages.greeting}
|
|
35833
|
+
values={{ name: this.props.name }}
|
|
35834
|
+
elementType="h1"
|
|
35835
|
+
/>
|
|
35836
|
+
);
|
|
35837
|
+
}
|
|
35838
|
+
}
|
|
35839
|
+
\`\`\`
|
|
35840
|
+
|
|
35841
|
+
\`values\` fills the message's ICU placeholders, and \`elementType\` chooses what the string
|
|
35842
|
+
renders into (a fragment by default).
|
|
35843
|
+
|
|
35570
35844
|
### Supported locales
|
|
35571
35845
|
|
|
35572
35846
|
A catalog ships for each of these locales, with an entry for every message ID:
|
|
@@ -36621,7 +36895,7 @@ padding={[null, "lg", "xl"]}
|
|
|
36621
36895
|
|
|
36622
36896
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
36623
36897
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
36624
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.2.0"};var u=`
|
|
36898
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.0.0"};var u=`
|
|
36625
36899
|
# Baseline UI MCP Server Guidelines
|
|
36626
36900
|
|
|
36627
36901
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import {a}from'./chunk-
|
|
2
|
+
import {a}from'./chunk-KCZS5KSR.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';(async()=>await a().connect(new StdioServerTransport))();
|
package/dist/server.cjs
CHANGED
|
@@ -8408,6 +8408,36 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
|
|
|
8408
8408
|
editorHandle={editorHandleRef}
|
|
8409
8409
|
/>
|
|
8410
8410
|
);
|
|
8411
|
+
};
|
|
8412
|
+
|
|
8413
|
+
/**
|
|
8414
|
+
* The \`value\` is plain text, never the canonical HTML the editor serializes
|
|
8415
|
+
* back \u2014 canonicalizing it would stop reproducing the re-apply on every render.
|
|
8416
|
+
*/
|
|
8417
|
+
export const EditorControlledPlainValueBesideInput = () => {
|
|
8418
|
+
const [body, setBody] = React.useState("Hello there");
|
|
8419
|
+
const [name, setName] = React.useState("");
|
|
8420
|
+
|
|
8421
|
+
return (
|
|
8422
|
+
<>
|
|
8423
|
+
<input
|
|
8424
|
+
aria-label="Recipient name"
|
|
8425
|
+
value={name}
|
|
8426
|
+
onChange={(event) => {
|
|
8427
|
+
setName(event.currentTarget.value);
|
|
8428
|
+
}}
|
|
8429
|
+
/>
|
|
8430
|
+
<Editor
|
|
8431
|
+
enableRichText={true}
|
|
8432
|
+
value={body}
|
|
8433
|
+
// Inline on purpose: a stable handler would let Editor's React.memo
|
|
8434
|
+
// block the re-render this test needs.
|
|
8435
|
+
onChange={(next) => {
|
|
8436
|
+
setBody(next);
|
|
8437
|
+
}}
|
|
8438
|
+
/>
|
|
8439
|
+
</>
|
|
8440
|
+
);
|
|
8411
8441
|
};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
|
|
8412
8442
|
/**
|
|
8413
8443
|
* The description to display below the input.
|
|
@@ -10665,14 +10695,48 @@ children: React.ReactNode
|
|
|
10665
10695
|
locale?: string
|
|
10666
10696
|
messages?: LocalizedStrings
|
|
10667
10697
|
/**
|
|
10668
|
-
* Whether to \`console.warn\` about message
|
|
10669
|
-
*
|
|
10670
|
-
*
|
|
10671
|
-
* in
|
|
10698
|
+
* Whether to \`console.warn\` about message-resolution failures \u2014 see
|
|
10699
|
+
* {@link MessageIssueCode} for the kinds. These warnings are development
|
|
10700
|
+
* guidance, so they are off in production builds \u2014 pass \`true\` to opt back
|
|
10701
|
+
* in. Ignored when \`onMessageIssue\` is supplied.
|
|
10672
10702
|
*
|
|
10673
10703
|
* @default process.env.NODE_ENV !== "production"
|
|
10674
10704
|
*/
|
|
10675
10705
|
shouldLogMissingMessages?: boolean
|
|
10706
|
+
/**
|
|
10707
|
+
* Called for every message-resolution failure, with enough detail to tell an
|
|
10708
|
+
* unresolved id from a malformed message and route either into your own
|
|
10709
|
+
* diagnostics.
|
|
10710
|
+
*
|
|
10711
|
+
* Supplying a handler takes ownership of these failures: Baseline UI reports
|
|
10712
|
+
* to it instead of writing to the console, so \`shouldLogMissingMessages\` no
|
|
10713
|
+
* longer applies. Unlike the console warnings, the handler is also called in
|
|
10714
|
+
* production builds.
|
|
10715
|
+
*
|
|
10716
|
+
* Issues are deduplicated: after mount, each distinct failure is reported
|
|
10717
|
+
* once per locale rather than once per render, and changing the locale starts
|
|
10718
|
+
* a fresh set.
|
|
10719
|
+
*
|
|
10720
|
+
* Called **during render** \u2014 except \`locale-alias-collision\`, which is
|
|
10721
|
+
* reported from an effect \u2014 so it must not set state synchronously. Collect
|
|
10722
|
+
* into a ref, or defer with \`queueMicrotask\`, if a failure needs to reach the
|
|
10723
|
+
* UI. A handler that throws is caught and its own error logged, so a broken
|
|
10724
|
+
* handler cannot take the tree down.
|
|
10725
|
+
*
|
|
10726
|
+
* @example
|
|
10727
|
+
* \`\`\`tsx
|
|
10728
|
+
* <I18nProvider
|
|
10729
|
+
* messages={messages}
|
|
10730
|
+
* onMessageIssue={(issue) => {
|
|
10731
|
+
* if (issue.code === "missing-message") return;
|
|
10732
|
+
* telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
10733
|
+
* }}
|
|
10734
|
+
* >
|
|
10735
|
+
* {children}
|
|
10736
|
+
* </I18nProvider>
|
|
10737
|
+
* \`\`\`;
|
|
10738
|
+
*/
|
|
10739
|
+
onMessageIssue?: (issue: MessageIssue) => void
|
|
10676
10740
|
}`,stories:{usage:[{id:"core-utilities-i18nprovider--string-format",name:"String Format",snippet:`const StringFormat = ({ children }) => {
|
|
10677
10741
|
const { locale } = useLocale();
|
|
10678
10742
|
return <I18nProvider locale={locale}>{children}</I18nProvider>;
|
|
@@ -14332,7 +14396,7 @@ export const MenuPartialSectionSelectionExample: React.FC<{
|
|
|
14332
14396
|
<div data-testid="menu-partial-action">{action}</div>
|
|
14333
14397
|
</>
|
|
14334
14398
|
);
|
|
14335
|
-
};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage
|
|
14399
|
+
};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nPassing `id` and `defaultMessage` as separate props leaves `defaultMessage` easy to omit, and an `id` nothing answers for renders as itself. Declaring the message with `defineMessages` and spreading the descriptor keeps the two together, so there is no way to pass one without the other \u2014 and the same descriptor is what the extraction pipeline reads:\n\n```jsx\nimport { defineMessages, MessageFormat } from "@baseline-ui/core";\n\nconst messages = defineMessages({\n hello: {\n id: "myApp.hello",\n defaultMessage: "Hello, {name}!",\n description: "Greeting shown at the top of the dashboard.",\n },\n});\n\n<MessageFormat {...messages.hello} values={{ name: "Ada" }} />;\n```\n\n`description` is translator context; it is ignored at render time and never reaches the DOM.\n\nWrite every `defaultMessage` as a literal, whether it comes from a descriptor or the prop. Each distinct template is compiled once and cached, so a message built per render \u2014 interpolating a file name or a row into the template itself rather than passing it through `values` \u2014 churns that cache and recompiles the templates it displaces.\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\nconst messages = defineMessages({\n pageXofY: {\n id: "myApp.pageXofY",\n defaultMessage: "Page {current} of {total}",\n description:\n "Pagination status. `current` is the current page, `total` the last.",\n },\n});\n\n<MessageFormat {...messages.pageXofY} values={{ current: 2, total: 10 }} />;\n// \u2192 "Page 2 of 10"\n```\n\nSpreading the descriptor is what makes that true on its own. With a bare\n`id`, the same line renders `"Page 2 of 10"` only where a supplied catalog\ncovers the active locale, and the id itself everywhere else.',props:`interface MessageFormatProps {
|
|
14336
14400
|
/**
|
|
14337
14401
|
* By default \`<MessageFormat>\` will render the formatted string into a
|
|
14338
14402
|
* \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
|
|
@@ -14341,13 +14405,26 @@ export const MenuPartialSectionSelectionExample: React.FC<{
|
|
|
14341
14405
|
*/
|
|
14342
14406
|
elementType?: React.ElementType | "div" | "span"
|
|
14343
14407
|
/**
|
|
14344
|
-
* The id of the message to format.
|
|
14408
|
+
* The id of the message to format. Spread a \`defineMessages\` descriptor to
|
|
14409
|
+
* pass this and \`defaultMessage\` together rather than as separate props.
|
|
14345
14410
|
*/
|
|
14346
14411
|
id: string
|
|
14347
14412
|
/**
|
|
14348
|
-
* The
|
|
14413
|
+
* The message to render when no supplied catalog answers for \`id\`. Without
|
|
14414
|
+
* it an unanswered \`id\` renders as itself, so pass one for any message the
|
|
14415
|
+
* active catalog might not cover.
|
|
14416
|
+
*
|
|
14417
|
+
* Write it as a literal \u2014 the only form the extraction pipeline can read.
|
|
14418
|
+
* Distinct templates are compiled once and cached, so one built per render \u2014
|
|
14419
|
+
* per file name, per row \u2014 churns that cache and recompiles the templates it
|
|
14420
|
+
* displaces.
|
|
14349
14421
|
*/
|
|
14350
14422
|
defaultMessage?: string
|
|
14423
|
+
/**
|
|
14424
|
+
* Values for the message's ICU placeholders, e.g. \`{ arg0: 2, arg1: 10 }\` for
|
|
14425
|
+
* \`"Page {arg0} of {arg1}"\`.
|
|
14426
|
+
*/
|
|
14427
|
+
values?: Record<string, any>
|
|
14351
14428
|
}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="myApp.addSignature" defaultMessage="Add signature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
|
|
14352
14429
|
|
|
14353
14430
|
* The content outside the modal is hidden from screen readers.
|
|
@@ -35155,6 +35232,22 @@ Import the following files at the top of your stylesheet to use the Baseline UI
|
|
|
35155
35232
|
|
|
35156
35233
|
Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.
|
|
35157
35234
|
|
|
35235
|
+
## Bundle size
|
|
35236
|
+
|
|
35237
|
+
Components, hooks and utilities are tree shakeable. Importing from \`@baseline-ui/core\` bundles what you name and what it depends on, not the whole library \u2014 keep importing from the package root, there are no deep entry points to reach for:
|
|
35238
|
+
|
|
35239
|
+
\`\`\`jsx
|
|
35240
|
+
// Bundles Checkbox, not the rest of the library.
|
|
35241
|
+
import { Checkbox } from "@baseline-ui/core";
|
|
35242
|
+
|
|
35243
|
+
// Bundles the hook alone, not the components that also use it.
|
|
35244
|
+
import { useLocalStorage } from "@baseline-ui/core";
|
|
35245
|
+
\`\`\`
|
|
35246
|
+
|
|
35247
|
+
This applies to the ESM build, which bundlers pick up through the package's \`module\` field. The CommonJS build is a single file and cannot be split, so a CommonJS \`require\` still pulls in the whole library.
|
|
35248
|
+
|
|
35249
|
+
Styles aren't split: \`@baseline-ui/core/dist/index.css\` carries every component's CSS regardless of what you import.
|
|
35250
|
+
|
|
35158
35251
|
## Charts
|
|
35159
35252
|
|
|
35160
35253
|
Chart components live in a separate package so projects that don\u2019t need data visualizations don\u2019t pay the bundle cost. Install it alongside the core packages:
|
|
@@ -35406,6 +35499,8 @@ It\u2019s important the content of your website is accessible to as many people
|
|
|
35406
35499
|
|
|
35407
35500
|
Translated strings are the one part you opt into. Components render English until you import a catalog and pass it to \`I18nProvider\`, so an application that ships in English carries none of the other locales in its bundle. See [Loading a translation catalog](#loading-a-translation-catalog).
|
|
35408
35501
|
|
|
35502
|
+
Every string resolves the same way, wherever you format it: a matching entry in the catalogs you supplied, then the \`defaultMessage\` on the descriptor you passed to \`formatMessage\`, and only if neither answers, the id itself. Every Baseline UI component formats through a descriptor with its English text inlined, so a component rendered with no \`I18nProvider\` still renders English. A bare string id you format yourself has no descriptor to fall back to, so it renders only when a catalog answers for it \u2014 see [Outside a render](#outside-a-render) for what that means for \`formatMessage\`.
|
|
35503
|
+
|
|
35409
35504
|
## Localization
|
|
35410
35505
|
|
|
35411
35506
|
Localization is the process of translating your website into different languages. Baseline UI supports localization of the built-in strings, dates and times, number/currency formatting, collating and sorting, text search, and more. It\u2019s built on top of [react-aria](https://react-spectrum.adobe.com/react-aria), whose own strings \u2014 the announcements a date picker or a drag handle makes to a screen reader \u2014 are bundled and translated for you. Baseline UI\u2019s strings are the ones you load a catalog for, and you can add your own on top.
|
|
@@ -35504,14 +35599,21 @@ locale is \`ja-JP\`, say \u2014 every string falls back to English and that is r
|
|
|
35504
35599
|
the locale rather than once per ID. It means the catalog keys and the locale disagree,
|
|
35505
35600
|
which no per-ID warning can tell you. It stays quiet when the active locale is itself
|
|
35506
35601
|
English, since falling back to English is then the intended result. Supplying no catalogs
|
|
35507
|
-
at all is the supported English-only mode
|
|
35602
|
+
at all is the supported English-only mode, so a message rendering its own \`defaultMessage\`
|
|
35603
|
+
there is reported as missing nothing. An ID with no \`defaultMessage\` behind it is still
|
|
35604
|
+
reported, since it has nothing to render but itself, and so is a string that will not
|
|
35605
|
+
format, since that is a broken template rather than a missing translation.
|
|
35508
35606
|
|
|
35509
|
-
|
|
35510
|
-
[\`useI18n\`](#your-own-strings)
|
|
35607
|
+
A missing translation is reported whatever its ID, so an app that routes its own strings
|
|
35608
|
+
through [\`useI18n\`](#your-own-strings) gets the same \`missing-message\` and
|
|
35609
|
+
\`no-catalog-for-locale\` diagnostics Baseline UI does for its own \`bui.*\` strings. A string
|
|
35610
|
+
that will not format is reported whatever its ID too, since whoever wrote the template can
|
|
35611
|
+
act on it.
|
|
35511
35612
|
|
|
35512
35613
|
### Controlling the warnings
|
|
35513
35614
|
|
|
35514
|
-
The warnings above \u2014 the missing-ID, no-matching-catalog,
|
|
35615
|
+
The warnings above \u2014 the missing-ID, malformed-template, no-matching-catalog,
|
|
35616
|
+
duplicate-locale-key and
|
|
35515
35617
|
[bare-ID deprecation](#migrating-from-bare-ids) ones \u2014 are development guidance, so they
|
|
35516
35618
|
are off when \`process.env.NODE_ENV === "production"\`. That keeps a consumer who never
|
|
35517
35619
|
touched \`messages\` from logging Baseline UI's internal IDs to their end users. Set
|
|
@@ -35533,8 +35635,63 @@ touched \`messages\` from logging Baseline UI's internal IDs to their end users.
|
|
|
35533
35635
|
</I18nProvider>;
|
|
35534
35636
|
\`\`\`
|
|
35535
35637
|
|
|
35536
|
-
|
|
35537
|
-
languages re-reports what the new locale is missing.
|
|
35638
|
+
After mount, each distinct warning is logged once and the set resets when the locale
|
|
35639
|
+
changes, so switching languages re-reports what the new locale is missing.
|
|
35640
|
+
|
|
35641
|
+
A missing translation is reported for your own IDs as much as for Baseline UI's, so an
|
|
35642
|
+
application that supplies catalogs and also routes its own strings through
|
|
35643
|
+
[\`useI18n\`](#your-own-strings) will see one warning per ID those catalogs do not cover \u2014
|
|
35644
|
+
the \`defaultMessage\` still renders, but the translation really is missing. Add the IDs to
|
|
35645
|
+
the catalogs you supply, or turn the warnings off with \`shouldLogMissingMessages={false}\`
|
|
35646
|
+
\u2014 noting that the flag is the console switch for every code, so it also silences broken
|
|
35647
|
+
templates and deprecated IDs. To quiet only the missing translations, take the reports
|
|
35648
|
+
through [\`onMessageIssue\`](#collecting-the-failures-yourself) and filter on \`code\` or on
|
|
35649
|
+
an ID prefix.
|
|
35650
|
+
|
|
35651
|
+
### Collecting the failures yourself
|
|
35652
|
+
|
|
35653
|
+
A console warning is hard to act on: you cannot tell the failure kinds apart, route them
|
|
35654
|
+
into your own diagnostics, or keep them out of the console of a product that embeds
|
|
35655
|
+
Baseline UI. Pass \`onMessageIssue\` to receive each one as an object instead:
|
|
35656
|
+
|
|
35657
|
+
\`\`\`tsx
|
|
35658
|
+
<I18nProvider
|
|
35659
|
+
locale="de-DE"
|
|
35660
|
+
messages={messages}
|
|
35661
|
+
onMessageIssue={(issue) => {
|
|
35662
|
+
// A translation you know is still being written \u2014 ignore it.
|
|
35663
|
+
if (issue.code === "missing-message") return;
|
|
35664
|
+
|
|
35665
|
+
telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
35666
|
+
}}
|
|
35667
|
+
>
|
|
35668
|
+
<YourApp />
|
|
35669
|
+
</I18nProvider>
|
|
35670
|
+
\`\`\`
|
|
35671
|
+
|
|
35672
|
+
Every issue carries a \`code\`, the \`locale\` it concerns, the \`message\` Baseline UI would
|
|
35673
|
+
otherwise have logged \u2014 whose wording is not part of the contract \u2014 and, for the codes
|
|
35674
|
+
that are about a single string, the \`id\`:
|
|
35675
|
+
|
|
35676
|
+
| \`code\` | What happened |
|
|
35677
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
35678
|
+
| \`missing-message\` | No supplied catalog answers for \`id\`; the descriptor's \`defaultMessage\` renders instead, or \`id\` itself if it has none. Any \`id\`. |
|
|
35679
|
+
| \`malformed-message\` | A catalog entry or \`defaultMessage\` would not parse or format as ICU. \`source\` says which, \`error\` is the throw. Any \`id\`. |
|
|
35680
|
+
| \`deprecated-message-id\` | \`id\` resolved only through the [bare-ID fallback](#migrating-from-bare-ids). \`bui.*\` IDs only. |
|
|
35681
|
+
| \`no-catalog-for-locale\` | Catalogs were supplied, but none covers the active locale. Raised once for the locale, so it carries no \`id\`; not reported for English locales. |
|
|
35682
|
+
| \`locale-alias-collision\` | One locale supplied under two ID formats; the hyphenated entry wins. |
|
|
35683
|
+
|
|
35684
|
+
Supplying a handler takes ownership of these failures: Baseline UI reports to it instead
|
|
35685
|
+
of writing to the console, so \`shouldLogMissingMessages\` no longer applies. Unlike the
|
|
35686
|
+
warnings, the handler is also called in production builds \u2014 that is the point of routing
|
|
35687
|
+
them into your own diagnostics. Deduplication is unchanged, so you get one call per
|
|
35688
|
+
distinct failure per locale rather than one per render.
|
|
35689
|
+
|
|
35690
|
+
The handler is called during render \u2014 except \`locale-alias-collision\`, which is reported
|
|
35691
|
+
from an effect \u2014 so it must not set state synchronously. Collect into a ref, or defer
|
|
35692
|
+
with \`queueMicrotask\`, if a failure needs to reach the UI. Further
|
|
35693
|
+
\`code\` values may be added in a minor release: branch on the ones you care about and let
|
|
35694
|
+
the rest fall through to a default.
|
|
35538
35695
|
|
|
35539
35696
|
### Your own strings
|
|
35540
35697
|
|
|
@@ -35567,6 +35724,123 @@ The catalogs you pass to \`useI18n\` are merged per locale with the ones on \`I1
|
|
|
35567
35724
|
and the provider wins on a shared key \u2014 so an application can hold its own strings locally
|
|
35568
35725
|
while a host app still overrides any \`bui.*\` string from above.
|
|
35569
35726
|
|
|
35727
|
+
### Outside a render
|
|
35728
|
+
|
|
35729
|
+
Some strings are not composed while a component renders: an alert raised from an async
|
|
35730
|
+
task, a label built in a plain utility module, a value handed to a non-React API.
|
|
35731
|
+
\`createMessageFormatter\` gives you the same formatter without a component around it:
|
|
35732
|
+
|
|
35733
|
+
\`\`\`ts
|
|
35734
|
+
import { createMessageFormatter, defineMessages } from "@baseline-ui/core";
|
|
35735
|
+
import de from "@baseline-ui/core/intl/de.json";
|
|
35736
|
+
|
|
35737
|
+
const messages = defineMessages({
|
|
35738
|
+
greeting: {
|
|
35739
|
+
id: "myApp.greeting",
|
|
35740
|
+
defaultMessage: "Hello, {name}",
|
|
35741
|
+
description: "Greeting in a toast raised from a non-React module.",
|
|
35742
|
+
},
|
|
35743
|
+
});
|
|
35744
|
+
|
|
35745
|
+
const formatMessage = createMessageFormatter({
|
|
35746
|
+
locale: "de-DE",
|
|
35747
|
+
messages: { de },
|
|
35748
|
+
});
|
|
35749
|
+
|
|
35750
|
+
formatMessage("bui.editor.bold"); // "Fett" \u2014 resolved from the \`de\` catalog
|
|
35751
|
+
formatMessage(messages.greeting, { name: "Alex" }); // \`de\` has no \`myApp.greeting\` entry, so the descriptor's \`defaultMessage\` renders
|
|
35752
|
+
\`\`\`
|
|
35753
|
+
|
|
35754
|
+
It runs on the same engine as \`useI18n\`, so for a given locale, catalog and set of values
|
|
35755
|
+
it returns exactly the string a component would render \u2014 the same catalog resolution, the
|
|
35756
|
+
same \`defaultMessage\` fallback, the same warnings. A bare string id like \`"bui.editor.bold"\`
|
|
35757
|
+
has no descriptor of its own, so it renders only when a catalog answers for it \u2014 pass the
|
|
35758
|
+
descriptor, as \`messages.greeting\` does above, whenever the id might not be covered.
|
|
35759
|
+
|
|
35760
|
+
What differs is where its inputs come from. There is no surrounding \`I18nProvider\`, so
|
|
35761
|
+
\`locale\` is required rather than inherited, and \`messages\` are the only catalogs consulted
|
|
35762
|
+
\u2014 nothing is merged in from a provider. \`shouldLogMissingMessages\` defaults the same way
|
|
35763
|
+
it does on \`I18nProvider\`: off in production builds, on everywhere else, and
|
|
35764
|
+
\`onMessageIssue\` takes the same ownership of failures when you pass one:
|
|
35765
|
+
|
|
35766
|
+
\`\`\`ts
|
|
35767
|
+
const formatMessage = createMessageFormatter({
|
|
35768
|
+
locale: "de-DE",
|
|
35769
|
+
messages: { de },
|
|
35770
|
+
onMessageIssue: (issue) => telemetry.report(issue.code, { id: issue.id }),
|
|
35771
|
+
});
|
|
35772
|
+
\`\`\`
|
|
35773
|
+
|
|
35774
|
+
Issues are deduplicated per formatter rather than per provider, since a formatter is bound
|
|
35775
|
+
to one locale and never resets. One is raised eagerly rather than on first use: supplying the same locale in two key formats
|
|
35776
|
+
(\`fr_CA\` and \`fr-CA\`) is reported when the formatter is built, so it also surfaces during
|
|
35777
|
+
server-side rendering.
|
|
35778
|
+
|
|
35779
|
+
An invalid \`locale\` throws \u2014 unlike the keys of \`messages\`, it must be a BCP 47 tag
|
|
35780
|
+
(\`fr-CA\`, not \`fr_CA\`).
|
|
35781
|
+
|
|
35782
|
+
Build the formatter once per locale and reuse it rather than calling this per message: it
|
|
35783
|
+
keeps each template it has compiled, and its own record of which warnings it has logged.
|
|
35784
|
+
|
|
35785
|
+
Inside a component, keep using \`useI18n\`: it follows the locale and catalogs of the
|
|
35786
|
+
provider above it, and re-formats when either changes.
|
|
35787
|
+
|
|
35788
|
+
### If a bare id renders as itself
|
|
35789
|
+
|
|
35790
|
+
A bare string id you format yourself \u2014 not one of Baseline UI's own, which always go
|
|
35791
|
+
through a descriptor \u2014 now renders as the id itself, with a \`missing-message\` issue
|
|
35792
|
+
reported, once no supplied catalog answers for it. It used to fall back to whatever
|
|
35793
|
+
\`defaultMessage\` any \`defineMessages\` call elsewhere in the app happened to declare for
|
|
35794
|
+
that id; that made resolution depend on which modules a bundler had already evaluated, so
|
|
35795
|
+
it is gone. Resolution is the same everywhere you call it now: a catalog entry, then the
|
|
35796
|
+
\`defaultMessage\` on the descriptor you passed, then the id.
|
|
35797
|
+
|
|
35798
|
+
Fix it by passing the descriptor instead of the bare id, so \`formatMessage\` has a
|
|
35799
|
+
\`defaultMessage\` to fall back to:
|
|
35800
|
+
|
|
35801
|
+
\`\`\`ts
|
|
35802
|
+
formatMessage(messages.greeting, { name });
|
|
35803
|
+
\`\`\`
|
|
35804
|
+
|
|
35805
|
+
or by supplying a catalog that answers for it \u2014 Baseline UI's own \`bui.*\` ids resolve for
|
|
35806
|
+
any locale you load a shipped catalog for, \`@baseline-ui/core/intl/<locale>.json\` (33
|
|
35807
|
+
locales).
|
|
35808
|
+
|
|
35809
|
+
### From a class component
|
|
35810
|
+
|
|
35811
|
+
\`useI18n\` is a hook, so a class component cannot call it. Render
|
|
35812
|
+
[\`MessageFormat\`](/?path=/docs/core-utilities-messageformat--docs) instead \u2014 it resolves
|
|
35813
|
+
the same IDs, against the same catalogs, under the same \`I18nProvider\`, so a class
|
|
35814
|
+
component localizes without being rewritten as a function component first:
|
|
35815
|
+
|
|
35816
|
+
\`\`\`jsx
|
|
35817
|
+
import { defineMessages, MessageFormat } from "@baseline-ui/core";
|
|
35818
|
+
|
|
35819
|
+
const messages = defineMessages({
|
|
35820
|
+
greeting: {
|
|
35821
|
+
id: "myApp.greeting",
|
|
35822
|
+
defaultMessage: "Hello, {name}",
|
|
35823
|
+
description:
|
|
35824
|
+
"Greeting in the page heading. {name} is the user's first name.",
|
|
35825
|
+
},
|
|
35826
|
+
});
|
|
35827
|
+
|
|
35828
|
+
class Header extends React.Component {
|
|
35829
|
+
render() {
|
|
35830
|
+
return (
|
|
35831
|
+
<MessageFormat
|
|
35832
|
+
{...messages.greeting}
|
|
35833
|
+
values={{ name: this.props.name }}
|
|
35834
|
+
elementType="h1"
|
|
35835
|
+
/>
|
|
35836
|
+
);
|
|
35837
|
+
}
|
|
35838
|
+
}
|
|
35839
|
+
\`\`\`
|
|
35840
|
+
|
|
35841
|
+
\`values\` fills the message's ICU placeholders, and \`elementType\` chooses what the string
|
|
35842
|
+
renders into (a fragment by default).
|
|
35843
|
+
|
|
35570
35844
|
### Supported locales
|
|
35571
35845
|
|
|
35572
35846
|
A catalog ships for each of these locales, with an entry for every message ID:
|
|
@@ -36621,7 +36895,7 @@ padding={[null, "lg", "xl"]}
|
|
|
36621
36895
|
|
|
36622
36896
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
36623
36897
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
36624
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.2.0"};var u=`
|
|
36898
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.0.0"};var u=`
|
|
36625
36899
|
# Baseline UI MCP Server Guidelines
|
|
36626
36900
|
|
|
36627
36901
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
package/dist/server.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{a as createServer}from'./chunk-
|
|
1
|
+
export{a as createServer}from'./chunk-KCZS5KSR.js';
|
package/package.json
CHANGED
package/sbom.json
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"$schema": "http://cyclonedx.org/schema/bom-1.6.schema.json",
|
|
3
3
|
"bomFormat": "CycloneDX",
|
|
4
4
|
"specVersion": "1.6",
|
|
5
|
-
"serialNumber": "urn:uuid:
|
|
5
|
+
"serialNumber": "urn:uuid:994d4064-fc8e-4f53-aa18-2bdd6e8684f4",
|
|
6
6
|
"version": 1,
|
|
7
7
|
"metadata": {
|
|
8
|
-
"timestamp": "2026-
|
|
8
|
+
"timestamp": "2026-09-02T10:39:07.874Z",
|
|
9
9
|
"lifecycles": [
|
|
10
10
|
{
|
|
11
11
|
"phase": "pre-build"
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"component": {
|
|
24
24
|
"type": "library",
|
|
25
25
|
"name": "@baseline-ui/mcp",
|
|
26
|
-
"version": "
|
|
27
|
-
"purl": "pkg:npm/@baseline-ui/mcp@
|
|
28
|
-
"bom-ref": "pkg:npm/@baseline-ui/mcp@
|
|
26
|
+
"version": "3.0.0",
|
|
27
|
+
"purl": "pkg:npm/@baseline-ui/mcp@3.0.0",
|
|
28
|
+
"bom-ref": "pkg:npm/@baseline-ui/mcp@3.0.0",
|
|
29
29
|
"licenses": [
|
|
30
30
|
{
|
|
31
31
|
"license": {
|
|
@@ -117,17 +117,17 @@
|
|
|
117
117
|
{
|
|
118
118
|
"type": "library",
|
|
119
119
|
"name": "fast-uri",
|
|
120
|
-
"version": "3.1.
|
|
121
|
-
"purl": "pkg:npm/fast-uri@3.1.
|
|
122
|
-
"bom-ref": "pkg:npm/fast-uri@3.1.
|
|
120
|
+
"version": "3.1.6",
|
|
121
|
+
"purl": "pkg:npm/fast-uri@3.1.6",
|
|
122
|
+
"bom-ref": "pkg:npm/fast-uri@3.1.6",
|
|
123
123
|
"externalReferences": [
|
|
124
124
|
{
|
|
125
125
|
"type": "distribution",
|
|
126
|
-
"url": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.
|
|
126
|
+
"url": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.6.tgz",
|
|
127
127
|
"hashes": [
|
|
128
128
|
{
|
|
129
129
|
"alg": "SHA-512",
|
|
130
|
-
"content": "
|
|
130
|
+
"content": "ec871a975bc510caf4a276d5cc40c8ade336d88e24856f9fcf240fc2f005581a758b076c852651b0be238d1bcf1bd24fd6e8aa30746da3e614e91dbf0b30f3e5"
|
|
131
131
|
}
|
|
132
132
|
]
|
|
133
133
|
}
|
|
@@ -2134,7 +2134,7 @@
|
|
|
2134
2134
|
],
|
|
2135
2135
|
"dependencies": [
|
|
2136
2136
|
{
|
|
2137
|
-
"ref": "pkg:npm/@baseline-ui/mcp@
|
|
2137
|
+
"ref": "pkg:npm/@baseline-ui/mcp@3.0.0",
|
|
2138
2138
|
"dependsOn": [
|
|
2139
2139
|
"pkg:npm/%40modelcontextprotocol/sdk@1.29.0",
|
|
2140
2140
|
"pkg:npm/fast-glob@3.3.3",
|
|
@@ -2170,7 +2170,7 @@
|
|
|
2170
2170
|
"ref": "pkg:npm/ajv@8.20.0",
|
|
2171
2171
|
"dependsOn": [
|
|
2172
2172
|
"pkg:npm/fast-deep-equal@3.1.3",
|
|
2173
|
-
"pkg:npm/fast-uri@3.1.
|
|
2173
|
+
"pkg:npm/fast-uri@3.1.6",
|
|
2174
2174
|
"pkg:npm/json-schema-traverse@1.0.0",
|
|
2175
2175
|
"pkg:npm/require-from-string@2.0.2"
|
|
2176
2176
|
]
|
|
@@ -2180,7 +2180,7 @@
|
|
|
2180
2180
|
"dependsOn": []
|
|
2181
2181
|
},
|
|
2182
2182
|
{
|
|
2183
|
-
"ref": "pkg:npm/fast-uri@3.1.
|
|
2183
|
+
"ref": "pkg:npm/fast-uri@3.1.6",
|
|
2184
2184
|
"dependsOn": []
|
|
2185
2185
|
},
|
|
2186
2186
|
{
|