@object-ui/components 17.5.0 → 17.7.0

package/README.md

@@ -70,27 +70,32 @@ entry goes on generating the classes your own source uses, as it always did.
 ### 2. Register Components
 
 ```tsx
-import { registerDefaultRenderers } from '@object-ui/components'
+import { initializeComponents } from '@object-ui/components'
 
-registerDefaultRenderers()
+initializeComponents()
 ```
 
+Importing the package already registers its components as a side effect;
+`initializeComponents()` is the explicit call for bundlers that would otherwise
+tree-shake that import away.
+
 ## Usage
 
 ### With SchemaRenderer
 
 ```tsx
 import { SchemaRenderer } from '@object-ui/react'
-import { registerDefaultRenderers } from '@object-ui/components'
+import { initializeComponents } from '@object-ui/components'
+import type { DeclaredNode } from '@object-ui/types'
 
-registerDefaultRenderers()
+initializeComponents()
 
-const schema = {
+const schema: DeclaredNode = {
   type: 'card',
   title: 'Welcome',
-  body: {
+  children: {
     type: 'text',
-    value: 'Hello from Object UI!'
+    content: 'Hello from Object UI!'
   }
 }
 
@@ -171,6 +176,7 @@ them draw the notification's `severity` icon unless it declares an `icon`
 override naming a real Lucide icon. See the
 [notifications guide](https://objectui.org/docs/guide/notifications).
 
+<!-- doc-snippet: fragment — router-layout excerpt: `Outlet` is react-router's, supplied by the host application -->
 ```tsx
 import { NotificationBanners, NotificationAlerts } from '@object-ui/components';
 
@@ -200,16 +206,20 @@ All components accept `className` for Tailwind classes:
 Register your own components:
 
 ```tsx
-import { registerRenderer } from '@object-ui/react'
+import { ComponentRegistry } from '@object-ui/core'
 import { Button } from '@object-ui/components'
 
-function CustomButton(props) {
+function CustomButton(props: Record<string, unknown>) {
   return <Button {...props} className="my-custom-style" />
 }
 
-registerRenderer('custom-button', CustomButton)
+ComponentRegistry.register('custom-button', CustomButton)
 ```
 
+`ComponentRegistry` is a process-level singleton exported by `@object-ui/core`;
+`SchemaRenderer` resolves every `type` against it, so a component registered
+here is renderable from schema anywhere in the app.
+
 ## API Reference
 
 See [full documentation](https://objectui.org/docs/components) for detailed API reference.

package/dist/custom/button-group.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
-import { Separator } from '../ui/separator';
+import { Separator } from '../ui/separator.js';
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
 declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {

package/dist/custom/character-count.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface CharacterCountProps {
+    /**
+     * Length of the text this surface is counting. The inline surface passes the
+     * committed value's length; the fullscreen dialog passes the DRAFT's, which
+     * is the number that is true of what the user is looking at.
+     */
+    length: number;
+    /**
+     * The declared cap. Callers render this component only when the field
+     * declares one, so it is non-optional here — a counter with no cap to count
+     * against has nothing to say and must not be mounted at all (an unconditional
+     * live region in every long-text field is the objectui#3408 defect back
+     * again).
+     */
+    maxLength: number;
+    /**
+     * The description node's `id`, minted by the host from `useId()`.
+     *
+     * The host MUST also name it in the edited control's `aria-describedby` —
+     * this component renders the sentence, only the host knows which element is
+     * being described, and a description nothing references is a node no screen
+     * reader will ever reach. That association is asserted from the OUTSIDE (the
+     * tests resolve `aria-describedby` and concatenate the referenced nodes' text,
+     * exactly as an assistive technology does) rather than trusted here.
+     *
+     * Two surfaces of one widget therefore need two ids: the dialog's draft and
+     * the inline value diverge the moment the user types in the dialog, so one
+     * shared id would point both controls at whichever sentence rendered last.
+     */
+    descriptionId: string;
+    /**
+     * Render node 3, the threshold-gated debounced `aria-live` status region.
+     *
+     * Required on purpose — see the component doc above. `false` removes the
+     * region from the DOM entirely (not merely empties it), which is the only
+     * form of "no live region" a test can tell apart from "a live region that
+     * happens to be silent right now".
+     */
+    announceNearLimit: boolean;
+    /**
+     * Classes for the visible digits. Required because placement is entirely the
+     * surface's business — inline pins them to the textarea's bottom-right
+     * corner, the dialog lays them out as a footer item — and a default borrowed
+     * from either one would position the other wrongly while looking deliberate.
+     */
+    className: string;
+    /**
+     * `data-testid` for the visible digits, namespaced per surface
+     * (`textarea-character-count`, `textarea-fullscreen-character-count`) so a
+     * test that finds digits can say WHICH surface it found them on. Same
+     * convention, same reason, as `FullscreenFieldEditor`'s `testIdPrefix`.
+     */
+    testId: string;
+}
+export declare function CharacterCount({ length, maxLength, descriptionId, announceNearLimit, className, testId, }: CharacterCountProps): React.JSX.Element;

package/dist/custom/combobox.d.ts

@@ -1,3 +1,4 @@
+import { ComboboxOption } from '@object-ui/types/form';
 /**
  * ObjectUI
  * Copyright (c) 2024-present ObjectStack Inc.
@@ -6,10 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import * as React from "react";
-export interface ComboboxOption {
-    value: string;
-    label: string;
-}
+export type { ComboboxOption } from '@object-ui/types/form';
 /**
  * Beyond its own named props, the combobox accepts standard button attributes
  * (`id`, `aria-*`, `data-*`, handlers, …) and forwards them to the trigger —

package/dist/custom/config-field-renderer.d.ts

@@ -1,4 +1,4 @@
-import { ConfigField } from '../types/config-panel';
+import { ConfigField } from '../types/config-panel.js';
 /**
  * ObjectUI
  * Copyright (c) 2024-present ObjectStack Inc.

package/dist/custom/config-panel-renderer.d.ts

@@ -1,4 +1,4 @@
-import { ConfigPanelSchema } from '../types/config-panel';
+import { ConfigPanelSchema } from '../types/config-panel.js';
 /**
  * ObjectUI
  * Copyright (c) 2024-present ObjectStack Inc.
@@ -32,9 +32,9 @@ export interface ConfigPanelRendererProps {
     className?: string;
     /** Additional inline styles applied to the panel root (e.g. to override `--config-panel-width`). */
     style?: React.CSSProperties;
-    /** Label for save button (default: "Save") */
+    /** Label for save button (default: the locale pack's `common.save`) */
     saveLabel?: string;
-    /** Label for discard button (default: "Discard") */
+    /** Label for discard button (default: the locale pack's `common.discard`) */
     discardLabel?: string;
     /** Ref for the panel root element */
     panelRef?: React.Ref<HTMLDivElement>;

package/dist/custom/empty.d.ts

@@ -6,15 +6,27 @@ declare const emptyMediaVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 /**
  * EmptyValue — universal inline placeholder for missing cell/field values.
  *
  * Use this anywhere a renderer would otherwise show "-" or "—" for a null,
- * undefined or empty value. It renders a muted, non-interactive en-dash that
- * does not inherit link/button colors from surrounding ancestors, so a missing
- * value never looks clickable.
+ * undefined or empty value. It renders a muted, non-interactive EM-dash (the
+ * `glyph` default below is U+2014, and every call site depends on that width)
+ * that does not inherit link/button colors from surrounding ancestors, so a
+ * missing value never looks clickable. This sentence said "en-dash" until
+ * objectui#8506: the word was wrong, never the code — do not "fix" the glyph
+ * to match a stale docblock.
+ *
+ * ⚠️ A caller that passes a `title` through `...props` must also pass
+ * `pointer-events-auto` in `className`. `pointer-events-none` below stops this
+ * span being a hit target, so a `title` on it never renders a tooltip — the
+ * hover falls through to whichever ancestor has one. The attribute stays in the
+ * DOM either way, which is exactly why nothing catches it: a test that reads
+ * `getAttribute('title')` is green over a tooltip that can never appear
+ * (objectui#8506, where `DetailSection` kept such a `title` and two landed pins
+ * navigate by it).
  */
 declare function EmptyValue({ className, glyph, ...props }: React.ComponentProps<"span"> & {
     glyph?: string;

package/dist/custom/field.d.ts

@@ -25,7 +25,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Varian
  * A labelled form-control wrapper: label, slotted control, description, error.
  *
  * Named `FieldContainer`, not `Field` (objectstack#4115): `@objectstack/spec/data`
- * exports `Field` — an object FIELD's metadata (type, reference_to, options,
+ * exports `Field` — an object FIELD's metadata (type, reference, options,
  * permissions, …) and its builder namespace — which has nothing to do with this
  * `<div>`. Two unrelated things under one name is the defect that issue exists
  * to remove; `@object-ui/app-shell` already renamed the same kind of collision