@dxos/react-ui-form 0.8.1 → 0.8.2-main.12df754

package/dist/lib/browser/index.mjs

@@ -65,7 +65,7 @@ import { mx, textBlockWidth } from "@dxos/react-ui-theme";
 var DeprecatedFormContainer = ({ children, classNames }) => {
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "w-full p-4 justify-center overflow-x-hidden overflow-y-auto"
+    className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
   }, /* @__PURE__ */ React.createElement("div", {
     role: "form",
     className: mx("flex flex-col", textBlockWidth, classNames)
@@ -99,9 +99,23 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   return primary;
 };
 
-// packages/ui/react-ui-form/src/components/ControlSection.tsx
+// packages/ui/react-ui-form/src/components/ControlSection/ControlSection.tsx
 import React2 from "react";
-import { toLocalizedString, useTranslation, Input as Input2 } from "@dxos/react-ui";
+import { Button, Input as Input2, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var ControlPage = ({ children, classNames, ...props }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2("pli-2", classNames),
+    ...props
+  }, children);
+};
+var ControlSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
+};
 var ControlSectionHeading = ({ title, description }) => {
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
@@ -110,15 +124,18 @@ var ControlSectionHeading = ({ title, description }) => {
     className: "pli-4 mlb-4 container-max-width text-description"
   }, toLocalizedString(description, t)));
 };
-var ControlSection = ({ title, description, children }) => {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
-    title,
-    description
-  }), children);
+var ControlGroupButton = ({ classNames, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Button, {
+    ...props,
+    classNames: [
+      "md:col-span-2",
+      classNames
+    ]
+  });
 };
-var ControlGroup = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+var ControlGroup = ({ children, classNames }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
-  className: "group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
+  className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
 }, children);
 var ControlFrame = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
@@ -272,7 +289,7 @@ import { PublicKey } from "@dxos/keys";
 import { Icon as Icon2, IconButton, Input as Input4, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, mx as mx2 } from "@dxos/react-ui-theme";
+import { hues, mx as mx3 } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
   const [selected, setSelectedId] = useState2(null);
   const [isNewOption, setIsNewOption] = useState2(false);
@@ -398,7 +415,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
   }, /* @__PURE__ */ React5.createElement(List.Item, {
     role: "button",
     item,
-    classNames: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    classNames: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     "aria-expanded": selected === item.id
   }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center"
@@ -439,7 +456,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     role: "listitem"
   }, /* @__PURE__ */ React5.createElement("div", {
     role: "button",
-    className: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    className: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     onClick: handleAdd
   }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center gap-1"
@@ -453,7 +470,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
 import React6 from "react";
 import { Input as Input5 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -469,7 +486,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
   }, /* @__PURE__ */ React6.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
-    className: mx3("grid gap-2", gridCols[binding.length - 1])
+    className: mx4("grid gap-2", gridCols[binding.length - 1])
   }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input5.TextInput, {
     key: prop,
     type: "number",
@@ -590,12 +607,12 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 import React12, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { mx as mx7 } from "@dxos/react-ui-theme";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
 import React9 from "react";
 import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
 import React8, { createContext, useContext, useEffect as useEffect5, useMemo as useMemo3 } from "react";
@@ -886,7 +903,7 @@ var FormActions = ({ onCancel, readonly }) => {
     className: "mt-2 flex justify-center"
   }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: mx4(onCancel && !readonly && "grid grid-cols-2 gap-2")
+    className: mx5(onCancel && !readonly && "grid grid-cols-2 gap-2")
   }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
@@ -908,7 +925,7 @@ import { capitalize as capitalize2 } from "effect/String";
 import React11, { useMemo as useMemo5 } from "react";
 import { AST as AST3, S } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
@@ -920,7 +937,7 @@ import { AST as AST2 } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 import { getSchemaProperties } from "@dxos/schema";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var padding = "px-2";
@@ -986,7 +1003,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   }
   return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
-    className: mx5(padding)
+    className: mx6(padding)
   }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
@@ -1158,7 +1175,7 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
   ]);
   return /* @__PURE__ */ React11.createElement("div", {
     role: "form",
-    className: mx6("flex flex-col w-full gap-2")
+    className: mx7("flex flex-col w-full gap-2")
   }, properties.map((property) => {
     return /* @__PURE__ */ React11.createElement(FormField, {
       key: property.name,
@@ -1203,7 +1220,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, /* @__PURE__ */ React12.createElement("div", {
     ref: formRef,
     role: "none",
-    className: mx7("p-2", classNames),
+    className: mx8("p-2", classNames),
     "data-testid": testId
   }, /* @__PURE__ */ React12.createElement(FormFields, {
     schema,
@@ -1384,7 +1401,7 @@ import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { IconButton as IconButton4, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
+import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
@@ -1510,7 +1527,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
+    className: mx9("flex flex-col w-full divide-y divide-separator", classNames)
   }, /* @__PURE__ */ React14.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
@@ -1520,7 +1537,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     role: "none",
     className: "p-2"
   }, /* @__PURE__ */ React14.createElement("label", {
-    className: mx8(inputTextLabel)
+    className: mx9(inputTextLabel)
   }, t("fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
@@ -1537,7 +1554,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, fields?.map((field2) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: field2.id,
     item: field2,
-    classNames: mx8(grid, ghostHover, "cursor-pointer")
+    classNames: mx9(grid, ghostHover, "cursor-pointer")
   }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
   }, field2.path), /* @__PURE__ */ React14.createElement("div", {
@@ -1554,7 +1571,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     role: "none",
     className: "p-2"
   }, /* @__PURE__ */ React14.createElement("label", {
-    className: mx8(inputTextLabel)
+    className: mx9(inputTextLabel)
   }, t("hidden fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: hiddenProperties,
     isItem: (item) => typeof item === "string",
@@ -1565,7 +1582,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, properties?.map((property) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: property,
     item: property,
-    classNames: mx8(grid, ghostHover, "cursor-pointer")
+    classNames: mx9(grid, ghostHover, "cursor-pointer")
   }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React14.createElement(List2.ItemButton, {
     icon: "ph--eye--regular",
     onClick: () => handleShow(property)
@@ -1849,8 +1866,10 @@ export {
   ControlFrame,
   ControlFrameItem,
   ControlGroup,
+  ControlGroupButton,
   ControlItem,
   ControlItemInput,
+  ControlPage,
   ControlSection,
   ControlSectionHeading,
   DeprecatedFormContainer,