@unofficialbox/box-open-elements-react 0.26.0 → 0.28.0

package/README.md

@@ -57,7 +57,8 @@ export function SaveAction() {
 }
 ```
 
-The supported surface also includes a controlled `Dialog` wrapper and
+The supported surface also includes `Combobox` (with structured options and
+field description), typed `TextField` `type`/`reveal`/`autocomplete`, a controlled `Dialog` wrapper and
 `useExplorerSelectionController`, which subscribes React to the existing
 headless selection controller without duplicating its state.
 

package/dist/button.d.ts

@@ -4,6 +4,7 @@ import type { NativeEventHandler } from "./events.js";
 export type ButtonProps = Omit<WebComponentProps, "onClick"> & {
     /** Button label text (maps to the `label` property / attribute). */
     label?: string;
+    accessibleLabel?: string;
     /** Visual tone: `primary` (default), `neutral`, `danger`. */
     tone?: string;
     /** Control size: `small`, `medium` (default), `large`. */
@@ -31,6 +32,7 @@ export type ButtonProps = Omit<WebComponentProps, "onClick"> & {
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<WebComponentProps, "onClick"> & {
     /** Button label text (maps to the `label` property / attribute). */
     label?: string;
+    accessibleLabel?: string;
     /** Visual tone: `primary` (default), `neutral`, `danger`. */
     tone?: string;
     /** Control size: `small`, `medium` (default), `large`. */

package/dist/button.js

@@ -15,12 +15,14 @@ ButtonElement.register();
 export const Button = createWebComponent({
     tagName: "box-button",
     displayName: "Button",
-    propertyNames: ["label", "tone", "size", "disabled"],
+    propertyNames: ["label", "accessibleLabel", "tone", "size", "disabled"],
     events: [{ propName: "onClick", eventName: "click" }],
     sync: (element, props) => {
         if (props.label !== undefined) {
             element.label = props.label;
         }
+        if (props.accessibleLabel !== undefined)
+            element.accessibleLabel = props.accessibleLabel;
         if (props.tone !== undefined) {
             element.tone = props.tone;
         }

package/dist/combobox.d.ts

@@ -0,0 +1,44 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type ComboboxOption = {
+    label: string;
+    value: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+};
+/** React wrapper for the value-bearing `<box-combobox>` form control. */
+export declare const Combobox: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+} & import("react").RefAttributes<ComboboxElement>>;

package/dist/combobox.js

@@ -0,0 +1,37 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { createWebComponent } from "./create-web-component.js";
+ComboboxElement.register();
+/** React wrapper for the value-bearing `<box-combobox>` form control. */
+export const Combobox = createWebComponent({
+    tagName: "box-combobox",
+    displayName: "Combobox",
+    propertyNames: [
+        "label", "value", "options", "placeholder", "placement", "disabled",
+        "name", "invalid", "errorMessage", "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.label !== undefined)
+            element.label = props.label;
+        if (props.value !== undefined)
+            element.value = props.value;
+        if (props.options !== undefined)
+            element.options = props.options;
+        if (props.placeholder !== undefined)
+            element.placeholder = props.placeholder;
+        if (props.placement !== undefined)
+            element.placement = props.placement;
+        if (props.name !== undefined)
+            element.name = props.name;
+        if (props.errorMessage !== undefined)
+            element.errorMessage = props.errorMessage;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/dist/dialog.d.ts

@@ -9,6 +9,9 @@ export type DialogProps = WebComponentProps & {
     heading?: string;
     description?: string;
     confirmLabel?: string;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
     size?: DialogSize;
     onOpenChanged?: CustomEventHandler<DialogElement, {
         open: boolean;
@@ -26,6 +29,9 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<{
     heading?: string;
     description?: string;
     confirmLabel?: string;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
     size?: DialogSize;
     onOpenChanged?: CustomEventHandler<DialogElement, {
         open: boolean;

package/dist/dialog.js

@@ -5,7 +5,7 @@ DialogElement.register();
 export const Dialog = createWebComponent({
     tagName: "box-dialog",
     displayName: "Dialog",
-    propertyNames: ["open", "heading", "description", "confirmLabel", "size"],
+    propertyNames: ["open", "heading", "description", "confirmLabel", "confirmDisabled", "confirmBusy", "confirmBusyLabel", "size"],
     events: [
         { propName: "onOpenChanged", eventName: "open-changed" },
         { propName: "onConfirm", eventName: "confirm" },
@@ -21,6 +21,12 @@ export const Dialog = createWebComponent({
         if (props.confirmLabel !== undefined) {
             element.confirmLabel = props.confirmLabel;
         }
+        if (props.confirmDisabled !== undefined)
+            element.confirmDisabled = props.confirmDisabled;
+        if (props.confirmBusy !== undefined)
+            element.confirmBusy = props.confirmBusy;
+        if (props.confirmBusyLabel !== undefined)
+            element.confirmBusyLabel = props.confirmBusyLabel;
         if (props.size !== undefined) {
             element.size = props.size;
         }

package/dist/drawer.d.ts

@@ -11,6 +11,7 @@ export type DrawerProps = WebComponentProps & {
     position?: string;
     size?: string;
     busy?: boolean;
+    hideCloseButton?: boolean;
     onOpenChanged?: CustomEventHandler<DrawerRef, {
         open: boolean;
     }>;
@@ -30,6 +31,7 @@ export declare const Drawer: import("react").ForwardRefExoticComponent<{
     position?: string;
     size?: string;
     busy?: boolean;
+    hideCloseButton?: boolean;
     onOpenChanged?: CustomEventHandler<DrawerRef, {
         open: boolean;
     }>;

package/dist/drawer.js

@@ -4,7 +4,7 @@ import { createWebComponent } from "./create-web-component.js";
 export const Drawer = createWebComponent({
     tagName: DrawerRef.tagName,
     displayName: "Drawer",
-    propertyNames: ["heading", "description", "open", "position", "size", "busy"],
+    propertyNames: ["heading", "description", "open", "position", "size", "busy", "hideCloseButton"],
     events: [{ propName: "onOpenChanged", eventName: "open-changed" }, { propName: "onDismiss", eventName: "dismiss" }],
     sync: (element, props) => {
         if (props.heading !== undefined)
@@ -19,5 +19,7 @@ export const Drawer = createWebComponent({
             element.size = props.size;
         if (props.busy !== undefined)
             element.busy = props.busy;
+        if (props.hideCloseButton !== undefined)
+            element.hideCloseButton = props.hideCloseButton;
     },
 });

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { Button, type ButtonProps } from "./button.js";
 export { Dialog, type DialogProps, type DialogSize } from "./dialog.js";
 export { ExplorerSelectionController, useExplorerSelectionController, type ExplorerSelectionState, } from "./explorer-selection.js";
 export { Select, type SelectOption, type SelectProps } from "./select.js";
+export { Combobox, type ComboboxOption, type ComboboxProps } from "./combobox.js";
 export { TextField, type TextFieldProps } from "./text-field.js";
 export { NumberInput, type NumberInputProps, type NumberInputRef } from "./number-input.js";
 export { Checkbox, type CheckboxProps, type CheckboxRef } from "./checkbox.js";

package/dist/index.js

@@ -8,6 +8,7 @@ export { Button } from "./button.js";
 export { Dialog } from "./dialog.js";
 export { ExplorerSelectionController, useExplorerSelectionController, } from "./explorer-selection.js";
 export { Select } from "./select.js";
+export { Combobox } from "./combobox.js";
 export { TextField } from "./text-field.js";
 export { NumberInput } from "./number-input.js";
 export { Checkbox } from "./checkbox.js";

package/dist/text-field.d.ts

@@ -5,6 +5,10 @@ export type TextFieldProps = WebComponentProps & {
     label?: string;
     value?: string;
     placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
     disabled?: boolean;
     name?: string;
     invalid?: boolean;
@@ -22,6 +26,10 @@ export declare const TextField: import("react").ForwardRefExoticComponent<{
     label?: string;
     value?: string;
     placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
     disabled?: boolean;
     name?: string;
     invalid?: boolean;

package/dist/text-field.js

@@ -9,6 +9,7 @@ export const TextField = createWebComponent({
         "label",
         "value",
         "placeholder",
+        "type", "reveal", "revealLabel", "autocomplete",
         "disabled",
         "name",
         "invalid",
@@ -32,6 +33,14 @@ export const TextField = createWebComponent({
         if (props.placeholder !== undefined) {
             element.placeholder = props.placeholder;
         }
+        if (props.type !== undefined)
+            element.type = props.type;
+        if (props.reveal !== undefined)
+            element.reveal = props.reveal;
+        if (props.revealLabel !== undefined)
+            element.revealLabel = props.revealLabel;
+        if (props.autocomplete !== undefined)
+            element.autocomplete = props.autocomplete;
         if (props.name !== undefined) {
             element.name = props.name;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements-react",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Optional React wrappers for box-open-elements Web Components. Thin adapters — core stays framework-agnostic.",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",
@@ -42,7 +42,7 @@
     "node": ">=20.9.0"
   },
   "peerDependencies": {
-    "@unofficialbox/box-open-elements": "^0.26.0",
+    "@unofficialbox/box-open-elements": "^0.28.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },