@unofficialbox/box-open-elements-react 0.26.0 → 0.27.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/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/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,9 @@ export type TextFieldProps = WebComponentProps & {
     label?: string;
     value?: string;
     placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    autocomplete?: string;
     disabled?: boolean;
     name?: string;
     invalid?: boolean;
@@ -22,6 +25,9 @@ export declare const TextField: import("react").ForwardRefExoticComponent<{
     label?: string;
     value?: string;
     placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    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", "autocomplete",
         "disabled",
         "name",
         "invalid",
@@ -32,6 +33,12 @@ 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.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.27.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.27.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },