@vaadin/hilla-react-crud 24.7.0-alpha9 → 24.7.0-beta3

package/autocrud-dialog.d.ts

@@ -8,4 +8,3 @@ interface AutoCrudDialogProps {
 }
 export declare function AutoCrudDialog(props: AutoCrudDialogProps): JSX.Element;
 export {};
-//# sourceMappingURL=autocrud-dialog.d.ts.map

package/autocrud-dialog.js

@@ -1,24 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@vaadin/react-components/Button";
-import { Dialog } from "@vaadin/react-components/Dialog";
-import { Icon } from "@vaadin/react-components/Icon";
-import "@vaadin/vaadin-lumo-styles/vaadin-iconset.js";
-function AutoCrudDialog(props) {
-  const { header, children, opened, onClose } = props;
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      overlayClass: "auto-crud-dialog",
-      opened,
-      headerRenderer: () => /* @__PURE__ */ jsxs("div", { className: "auto-crud-dialog-header", children: [
-        header,
-        /* @__PURE__ */ jsx(Button, { theme: "tertiary", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { icon: "lumo:cross", style: { height: "var(--lumo-icon-size-l)", width: "var(--lumo-icon-size-l)" } }) })
-      ] }),
-      children
-    }
-  );
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@vaadin/react-components/Button';
+import { Dialog } from '@vaadin/react-components/Dialog';
+import { Icon } from '@vaadin/react-components/Icon';
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
+export function AutoCrudDialog(props) {
+    const { header, children, opened, onClose } = props;
+    return (_jsx(Dialog, { overlayClass: "auto-crud-dialog", opened: opened, headerRenderer: () => (_jsxs("div", { className: "auto-crud-dialog-header", children: [header, _jsx(Button, { theme: "tertiary", onClick: onClose, "aria-label": "Close", children: _jsx(Icon, { icon: "lumo:cross", style: { height: 'var(--lumo-icon-size-l)', width: 'var(--lumo-icon-size-l)' } }) })] })), children: children }));
 }
-export {
-  AutoCrudDialog
-};
-//# sourceMappingURL=autocrud-dialog.js.map
+//# sourceMappingURL=autocrud-dialog.js.map

package/autocrud-dialog.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/autocrud-dialog.tsx"],
-  "sourcesContent": ["import { Button } from '@vaadin/react-components/Button';\nimport { Dialog } from '@vaadin/react-components/Dialog';\nimport { Icon } from '@vaadin/react-components/Icon';\nimport type { JSX } from 'react';\n\n// eslint-disable-next-line\nimport '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';\n\ninterface AutoCrudDialogProps {\n  header: JSX.Element | null | undefined;\n  children: React.ReactElement;\n  opened: boolean;\n  // eslint-disable-next-line @typescript-eslint/method-signature-style\n  onClose: () => void;\n}\n\nexport function AutoCrudDialog(props: AutoCrudDialogProps): JSX.Element {\n  const { header, children, opened, onClose } = props;\n  return (\n    <Dialog\n      overlayClass=\"auto-crud-dialog\"\n      opened={opened}\n      headerRenderer={() => (\n        <div className=\"auto-crud-dialog-header\">\n          {header}\n          <Button theme=\"tertiary\" onClick={onClose} aria-label=\"Close\">\n            <Icon icon=\"lumo:cross\" style={{ height: 'var(--lumo-icon-size-l)', width: 'var(--lumo-icon-size-l)' }} />\n          </Button>\n        </div>\n      )}\n    >\n      {children}\n    </Dialog>\n  );\n}\n"],
-  "mappings": "AAuBQ,SAGI,KAHJ;AAvBR,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAIrB,OAAO;AAUA,SAAS,eAAe,OAAyC;AACtE,QAAM,EAAE,QAAQ,UAAU,QAAQ,QAAQ,IAAI;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb;AAAA,MACA,gBAAgB,MACd,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACD,oBAAC,UAAO,OAAM,YAAW,SAAS,SAAS,cAAW,SACpD,8BAAC,QAAK,MAAK,cAAa,OAAO,EAAE,QAAQ,2BAA2B,OAAO,0BAA0B,GAAG,GAC1G;AAAA,SACF;AAAA,MAGD;AAAA;AAAA,EACH;AAEJ;",
-  "names": []
-}
+{"version":3,"file":"autocrud-dialog.js","sourceRoot":"","sources":["src/autocrud-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAIrD,OAAO,8CAA8C,CAAC;AAUtD,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,MAAM,IACL,YAAY,EAAC,kBAAkB,EAC/B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,GAAG,EAAE,CAAC,CACpB,eAAK,SAAS,EAAC,yBAAyB,aACrC,MAAM,EACP,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,gBAAa,OAAO,YAC3D,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE,GAAI,GACnG,IACL,CACP,YAEA,QAAQ,GACF,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { Button } from '@vaadin/react-components/Button';\nimport { Dialog } from '@vaadin/react-components/Dialog';\nimport { Icon } from '@vaadin/react-components/Icon';\nimport type { JSX } from 'react';\n\n// eslint-disable-next-line\nimport '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';\n\ninterface AutoCrudDialogProps {\n  header: JSX.Element | null | undefined;\n  children: React.ReactElement;\n  opened: boolean;\n  // eslint-disable-next-line @typescript-eslint/method-signature-style\n  onClose: () => void;\n}\n\nexport function AutoCrudDialog(props: AutoCrudDialogProps): JSX.Element {\n  const { header, children, opened, onClose } = props;\n  return (\n    <Dialog\n      overlayClass=\"auto-crud-dialog\"\n      opened={opened}\n      headerRenderer={() => (\n        <div className=\"auto-crud-dialog-header\">\n          {header}\n          <Button theme=\"tertiary\" onClick={onClose} aria-label=\"Close\">\n            <Icon icon=\"lumo:cross\" style={{ height: 'var(--lumo-icon-size-l)', width: 'var(--lumo-icon-size-l)' }} />\n          </Button>\n        </div>\n      )}\n    >\n      {children}\n    </Dialog>\n  );\n}\n"]}

package/autocrud-feature.d.ts

@@ -1,4 +1,3 @@
 import { AutoCrud as _AutoCrud } from './autocrud.js';
 export * from './autocrud.js';
 export declare const AutoCrud: typeof _AutoCrud;
-//# sourceMappingURL=autocrud-feature.d.ts.map

package/autocrud-feature.js

@@ -1,8 +1,5 @@
-import { AutoCrud as _AutoCrud } from "./autocrud.js";
-import { featureRegistration } from "./util";
-export * from "./autocrud.js";
-const AutoCrud = featureRegistration(_AutoCrud, "AutoCrud");
-export {
-  AutoCrud
-};
-//# sourceMappingURL=autocrud-feature.js.map
+import { AutoCrud as _AutoCrud } from './autocrud.js';
+import { featureRegistration } from './util.js';
+export * from './autocrud.js';
+export const AutoCrud = featureRegistration(_AutoCrud, 'AutoCrud');
+//# sourceMappingURL=autocrud-feature.js.map

package/autocrud-feature.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/autocrud-feature.ts"],
-  "sourcesContent": ["/* eslint-disable import/export */\nimport { AutoCrud as _AutoCrud } from './autocrud.js';\nimport { featureRegistration } from './util';\n\nexport * from './autocrud.js';\n\nexport const AutoCrud: typeof _AutoCrud = featureRegistration(_AutoCrud, 'AutoCrud');\n"],
-  "mappings": "AACA,SAAS,YAAY,iBAAiB;AACtC,SAAS,2BAA2B;AAEpC,cAAc;AAEP,MAAM,WAA6B,oBAAoB,WAAW,UAAU;",
-  "names": []
-}
+{"version":3,"file":"autocrud-feature.js","sourceRoot":"","sources":["src/autocrud-feature.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,cAAc,eAAe,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAqB,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC","sourcesContent":["/* eslint-disable import/export */\nimport { AutoCrud as _AutoCrud } from './autocrud.js';\nimport { featureRegistration } from './util.js';\n\nexport * from './autocrud.js';\n\nexport const AutoCrud: typeof _AutoCrud = featureRegistration(_AutoCrud, 'AutoCrud');\n"]}

package/autocrud.d.ts

@@ -6,77 +6,15 @@ import type { CrudService } from './crud.js';
 import { type ComponentStyleProps } from './util.js';
 export type AutoCrudFormHeaderRenderer<TItem> = (editedItem: TItem | null, disabled: boolean) => JSX.Element | null | undefined;
 export type AutoCrudFormProps<TModel extends AbstractModel> = Omit<Partial<AutoFormProps<TModel>>, 'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'> & Readonly<{
-    /**
-     * A custom renderer function to create the header for the form. The
-     * function receives the edited item as the first parameter, and a boolean
-     * indicating whether the form is disabled as the second parameter. The
-     * edited item is `null` when creating a new item.
-     *
-     * By default, the header shows "New item" when creating a new item, and
-     * "Edit item" when editing an existing item.
-     */
     headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;
 }>;
 export type AutoCrudGridProps<TItem> = Omit<Partial<AutoGridProps<TItem>>, 'model' | 'onActiveItemChanged' | 'selectedItems' | 'service'>;
 export type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = ComponentStyleProps & Readonly<{
-    /**
-     * The service to use for fetching the data, as well saving and deleting
-     * items. This must be a TypeScript service that has been generated by Hilla
-     * from a backend Java service that implements the
-     * `com.vaadin.hilla.crud.CrudService` interface.
-     */
     service: CrudService<Value<TModel>>;
-    /**
-     * The entity model to use for the CRUD. This determines which columns to
-     * show in the grid, and which fields to show in the form. This must be a
-     * Typescript model class that has been generated by Hilla from a backend
-     * Java class. The model must match with the type of the items returned by
-     * the service. For example, a `PersonModel` can be used with a service that
-     * returns `Person` instances.
-     *
-     * By default, the grid shows columns for all properties of the model which
-     * have a type that is supported. Use the `gridProps.visibleColumns` option
-     * to customize which columns to show and in which order.
-     *
-     * By default, the form shows fields for all properties of the model which
-     * have a type that is supported. Use the `formProps.visibleFields`
-     * option to customize which fields to show and in which order.
-     */
     model: DetachedModelConstructor<TModel>;
-    /**
-     * The property to use to detect an item's ID. The item ID is required for
-     * deleting items via the `CrudService.delete` method as well as keeping the
-     * selection state after reloading the grid.
-     *
-     * By default, the component uses the property annotated with
-     * `jakarta.persistence.Id`, or a property named `id`, in that order.
-     * This option can be used to override the default behavior, or define the ID
-     * property in case a class doesn't have a property matching the defaults.
-     */
     itemIdProperty?: string;
-    /**
-     * Props to pass to the form. See the `AutoForm` component for details.
-     */
+    noNewButton?: boolean;
     formProps?: AutoCrudFormProps<TModel>;
-    /**
-     * Props to pass to the grid. See the `AutoGrid` component for details.
-     */
     gridProps?: AutoCrudGridProps<Value<TModel>>;
 }>;
-/**
- * Auto CRUD is a component that provides CRUD (create, read, update, delete)
- * functionality based on a Java backend service. It automatically generates a
- * grid that shows data from the service, and a form for creating, updating and
- * deleting items.
- *
- * Example usage:
- * ```tsx
- * import { AutoCrud } from '@hilla/react-crud';
- * import PersonService from 'Frontend/generated/endpoints';
- * import PersonModel from 'Frontend/generated/com/example/application/Person';
- *
- * <AutoCrud service={PersonService} model={PersonModel} />
- * ```
- */
-export declare function AutoCrud<TModel extends AbstractModel>({ service, model, itemIdProperty, formProps, gridProps, style, id, className, }: AutoCrudProps<TModel>): JSX.Element;
-//# sourceMappingURL=autocrud.d.ts.map
+export declare function AutoCrud<TModel extends AbstractModel>({ service, model, itemIdProperty, noNewButton, formProps, gridProps, style, id, className, }: AutoCrudProps<TModel>): JSX.Element;

package/autocrud.js

@@ -1,97 +1,51 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@vaadin/react-components/Button.js";
-import { SplitLayout } from "@vaadin/react-components/SplitLayout.js";
-import { useId, useRef, useState } from "react";
-import { AutoCrudDialog } from "./autocrud-dialog.js";
-import css from "./autocrud.obj.js";
-import { emptyItem, AutoForm } from "./autoform.js";
-import { AutoGrid } from "./autogrid.js";
-import { useMediaQuery } from "./media-query.js";
-import { registerStylesheet } from "./util.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@vaadin/react-components/Button.js';
+import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
+import { useId, useRef, useState } from 'react';
+import { AutoCrudDialog } from './autocrud-dialog.js';
+import css from './autocrud.obj.js';
+import { emptyItem, AutoForm } from './autoform.js';
+import { AutoGrid } from './autogrid.js';
+import { useMediaQuery } from './media-query.js';
+import { registerStylesheet } from './util.js';
 registerStylesheet(css);
 function defaultFormHeaderRenderer(editedItem, disabled) {
-  const style = { color: disabled ? "var(--lumo-disabled-text-color)" : "var(--lumo-text-color)" };
-  return editedItem ? /* @__PURE__ */ jsx("h3", { style, children: "Edit item" }) : /* @__PURE__ */ jsx("h3", { style, children: "New item" });
+    const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };
+    return editedItem ? _jsx("h3", { style: style, children: "Edit item" }) : _jsx("h3", { style: style, children: "New item" });
 }
-function AutoCrud({
-  service,
-  model,
-  itemIdProperty,
-  formProps,
-  gridProps,
-  style,
-  id,
-  className
-}) {
-  const [item, setItem] = useState(void 0);
-  const fullScreen = useMediaQuery("(max-width: 600px), (max-height: 600px)");
-  const autoGridRef = useRef(null);
-  const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};
-  const formHeaderRenderer = customFormHeaderRenderer ?? defaultFormHeaderRenderer;
-  const autoCrudId = useId();
-  function refreshGrid() {
-    autoGridRef.current?.refresh();
-  }
-  function handleCancel() {
-    setItem(void 0);
-  }
-  const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);
-  const mainSection = /* @__PURE__ */ jsxs("div", { className: "auto-crud-main", children: [
-    /* @__PURE__ */ jsx(
-      AutoGrid,
-      {
-        ...gridProps,
-        service,
-        model,
-        itemIdProperty,
-        selectedItems: item && item !== emptyItem ? [item] : [],
-        onActiveItemChanged: (e) => {
-          const activeItem = e.detail.value;
-          setItem(activeItem ?? void 0);
-        },
-        ref: autoGridRef,
-        "aria-controls": autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "auto-crud-toolbar", children: /* @__PURE__ */ jsx(Button, { theme: "primary", onClick: () => setItem(emptyItem), children: "+ New" }) })
-  ] });
-  const autoForm = /* @__PURE__ */ jsx(
-    AutoForm,
-    {
-      id: autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`,
-      deleteButtonVisible: true,
-      ...autoFormProps,
-      disabled: !item,
-      service,
-      model,
-      itemIdProperty,
-      item,
-      onSubmitSuccess: ({ item: submittedItem }) => {
-        if (fullScreen) {
-          setItem(void 0);
-        } else {
-          setItem(submittedItem);
-        }
-        refreshGrid();
-      },
-      onDeleteSuccess: () => {
-        setItem(void 0);
-        refreshGrid();
-      }
+export function AutoCrud({ service, model, itemIdProperty, noNewButton, formProps, gridProps, style, id, className, }) {
+    const [item, setItem] = useState(undefined);
+    const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');
+    const autoGridRef = useRef(null);
+    const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};
+    const formHeaderRenderer = customFormHeaderRenderer ?? defaultFormHeaderRenderer;
+    const autoCrudId = useId();
+    function refreshGrid() {
+        autoGridRef.current?.refresh();
     }
-  );
-  return /* @__PURE__ */ jsx("div", { className: `auto-crud ${className ?? ""}`, id, style, children: fullScreen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    mainSection,
-    /* @__PURE__ */ jsx(AutoCrudDialog, { opened: !!item, header: formHeader, onClose: handleCancel, children: autoForm })
-  ] }) : /* @__PURE__ */ jsxs(SplitLayout, { theme: "small", children: [
-    mainSection,
-    /* @__PURE__ */ jsxs("div", { className: "auto-crud-form", children: [
-      /* @__PURE__ */ jsx("div", { className: "auto-crud-form-header", children: formHeader }),
-      autoForm
-    ] })
-  ] }) });
+    function handleCancel() {
+        setItem(undefined);
+    }
+    const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);
+    const mainSection = (_jsxs("div", { className: "auto-crud-main", children: [_jsx(AutoGrid, { ...gridProps, service: service, model: model, itemIdProperty: itemIdProperty, selectedItems: item && item !== emptyItem ? [item] : [], onActiveItemChanged: (e) => {
+                    const activeItem = e.detail.value;
+                    setItem(activeItem ?? undefined);
+                }, ref: autoGridRef, "aria-controls": autoFormProps.id ?? `auto-form-${id ?? autoCrudId}` }), !noNewButton && (_jsx("div", { className: "auto-crud-toolbar", children: _jsx(Button, { theme: "primary", onClick: () => setItem(emptyItem), children: "+ New" }) }))] }));
+    const autoForm = (_jsx(AutoForm, { id: autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`, deleteButtonVisible: true, ...autoFormProps, disabled: !item, service: service, model: model, itemIdProperty: itemIdProperty, item: item, onSubmitSuccess: ({ item: submittedItem }) => {
+            if (fullScreen) {
+                setItem(undefined);
+            }
+            else {
+                setItem(submittedItem);
+            }
+            refreshGrid();
+        }, onDeleteSuccess: () => {
+            setItem(undefined);
+            refreshGrid();
+        } }));
+    if (!noNewButton || (item && item !== emptyItem)) {
+        return (_jsx("div", { className: `auto-crud ${className ?? ''}`, id: id, style: style, children: fullScreen ? (_jsxs(_Fragment, { children: [mainSection, _jsx(AutoCrudDialog, { opened: !!item, header: formHeader, onClose: handleCancel, children: autoForm })] })) : (_jsxs(SplitLayout, { theme: "small", children: [mainSection, _jsxs("div", { className: "auto-crud-form", children: [_jsx("div", { className: "auto-crud-form-header", children: formHeader }), autoForm] })] })) }));
+    }
+    return mainSection;
 }
-export {
-  AutoCrud
-};
-//# sourceMappingURL=autocrud.js.map
+//# sourceMappingURL=autocrud.js.map

package/autocrud.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/autocrud.tsx"],
-  "sourcesContent": ["import type { AbstractModel, DetachedModelConstructor, Value } from '@vaadin/hilla-lit-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { SplitLayout } from '@vaadin/react-components/SplitLayout.js';\nimport { type JSX, useId, useRef, useState } from 'react';\nimport { AutoCrudDialog } from './autocrud-dialog.js';\nimport css from './autocrud.obj.js';\nimport { type AutoFormProps, emptyItem, AutoForm } from './autoform.js';\nimport { type AutoGridProps, AutoGrid, type AutoGridRef } from './autogrid.js';\nimport type { CrudService } from './crud.js';\nimport { useMediaQuery } from './media-query.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport type AutoCrudFormHeaderRenderer<TItem> = (\n  editedItem: TItem | null,\n  disabled: boolean,\n) => JSX.Element | null | undefined;\n\nexport type AutoCrudFormProps<TModel extends AbstractModel> = Omit<\n  Partial<AutoFormProps<TModel>>,\n  'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'\n> &\n  Readonly<{\n    /**\n     * A custom renderer function to create the header for the form. The\n     * function receives the edited item as the first parameter, and a boolean\n     * indicating whether the form is disabled as the second parameter. The\n     * edited item is `null` when creating a new item.\n     *\n     * By default, the header shows \"New item\" when creating a new item, and\n     * \"Edit item\" when editing an existing item.\n     */\n    headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;\n  }>;\n\nexport type AutoCrudGridProps<TItem> = Omit<\n  Partial<AutoGridProps<TItem>>,\n  'model' | 'onActiveItemChanged' | 'selectedItems' | 'service'\n>;\n\nexport type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = ComponentStyleProps &\n  Readonly<{\n    /**\n     * The service to use for fetching the data, as well saving and deleting\n     * items. This must be a TypeScript service that has been generated by Hilla\n     * from a backend Java service that implements the\n     * `com.vaadin.hilla.crud.CrudService` interface.\n     */\n    service: CrudService<Value<TModel>>;\n    /**\n     * The entity model to use for the CRUD. This determines which columns to\n     * show in the grid, and which fields to show in the form. This must be a\n     * Typescript model class that has been generated by Hilla from a backend\n     * Java class. The model must match with the type of the items returned by\n     * the service. For example, a `PersonModel` can be used with a service that\n     * returns `Person` instances.\n     *\n     * By default, the grid shows columns for all properties of the model which\n     * have a type that is supported. Use the `gridProps.visibleColumns` option\n     * to customize which columns to show and in which order.\n     *\n     * By default, the form shows fields for all properties of the model which\n     * have a type that is supported. Use the `formProps.visibleFields`\n     * option to customize which fields to show and in which order.\n     */\n    model: DetachedModelConstructor<TModel>;\n    /**\n     * The property to use to detect an item's ID. The item ID is required for\n     * deleting items via the `CrudService.delete` method as well as keeping the\n     * selection state after reloading the grid.\n     *\n     * By default, the component uses the property annotated with\n     * `jakarta.persistence.Id`, or a property named `id`, in that order.\n     * This option can be used to override the default behavior, or define the ID\n     * property in case a class doesn't have a property matching the defaults.\n     */\n    itemIdProperty?: string;\n    /**\n     * Props to pass to the form. See the `AutoForm` component for details.\n     */\n    formProps?: AutoCrudFormProps<TModel>;\n    /**\n     * Props to pass to the grid. See the `AutoGrid` component for details.\n     */\n    gridProps?: AutoCrudGridProps<Value<TModel>>;\n  }>;\n\nfunction defaultFormHeaderRenderer<TItem>(editedItem: TItem | null, disabled: boolean): JSX.Element | null | undefined {\n  const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };\n  return editedItem ? <h3 style={style}>Edit item</h3> : <h3 style={style}>New item</h3>;\n}\n\n/**\n * Auto CRUD is a component that provides CRUD (create, read, update, delete)\n * functionality based on a Java backend service. It automatically generates a\n * grid that shows data from the service, and a form for creating, updating and\n * deleting items.\n *\n * Example usage:\n * ```tsx\n * import { AutoCrud } from '@hilla/react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoCrud service={PersonService} model={PersonModel} />\n * ```\n */\nexport function AutoCrud<TModel extends AbstractModel>({\n  service,\n  model,\n  itemIdProperty,\n  formProps,\n  gridProps,\n  style,\n  id,\n  className,\n}: AutoCrudProps<TModel>): JSX.Element {\n  const [item, setItem] = useState<Value<TModel> | typeof emptyItem | undefined>(undefined);\n  const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');\n  const autoGridRef = useRef<AutoGridRef>(null);\n  const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};\n  const formHeaderRenderer: AutoCrudFormHeaderRenderer<Value<TModel>> =\n    customFormHeaderRenderer ?? defaultFormHeaderRenderer;\n\n  const autoCrudId = useId();\n\n  function refreshGrid() {\n    autoGridRef.current?.refresh();\n  }\n\n  function handleCancel() {\n    setItem(undefined);\n  }\n\n  const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);\n\n  const mainSection = (\n    <div className=\"auto-crud-main\">\n      <AutoGrid\n        {...gridProps}\n        service={service}\n        model={model as DetachedModelConstructor<AbstractModel<Value<TModel>>>}\n        itemIdProperty={itemIdProperty}\n        selectedItems={item && item !== emptyItem ? [item] : []}\n        onActiveItemChanged={(e) => {\n          const activeItem = e.detail.value;\n          setItem(activeItem ?? undefined);\n        }}\n        ref={autoGridRef}\n        aria-controls={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n      ></AutoGrid>\n      <div className=\"auto-crud-toolbar\">\n        <Button theme=\"primary\" onClick={() => setItem(emptyItem)}>\n          + New\n        </Button>\n      </div>\n    </div>\n  );\n\n  const autoForm = (\n    <AutoForm\n      id={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n      deleteButtonVisible={true}\n      {...autoFormProps}\n      disabled={!item}\n      service={service}\n      model={model}\n      itemIdProperty={itemIdProperty}\n      item={item}\n      onSubmitSuccess={({ item: submittedItem }) => {\n        if (fullScreen) {\n          setItem(undefined);\n        } else {\n          setItem(submittedItem);\n        }\n        refreshGrid();\n      }}\n      onDeleteSuccess={() => {\n        setItem(undefined);\n        refreshGrid();\n      }}\n    />\n  );\n\n  return (\n    <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>\n      {fullScreen ? (\n        <>\n          {mainSection}\n          <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>\n            {autoForm}\n          </AutoCrudDialog>\n        </>\n      ) : (\n        <SplitLayout theme=\"small\">\n          {mainSection}\n          <div className=\"auto-crud-form\">\n            <div className=\"auto-crud-form-header\">{formHeader}</div>\n            {autoForm}\n          </div>\n        </SplitLayout>\n      )}\n    </div>\n  );\n}\n"],
-  "mappings": "AA0FsB,SAkGd,UAlGc,KAgDlB,YAhDkB;AAzFtB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAmB,OAAO,QAAQ,gBAAgB;AAClD,SAAS,sBAAsB;AAC/B,OAAO,SAAS;AAChB,SAA6B,WAAW,gBAAgB;AACxD,SAA6B,gBAAkC;AAE/D,SAAS,qBAAqB;AAC9B,SAAmC,0BAA0B;AAE7D,mBAAmB,GAAG;AA4EtB,SAAS,0BAAiC,YAA0B,UAAmD;AACrH,QAAM,QAAQ,EAAE,OAAO,WAAW,oCAAoC,yBAAyB;AAC/F,SAAO,aAAa,oBAAC,QAAG,OAAc,uBAAS,IAAQ,oBAAC,QAAG,OAAc,sBAAQ;AACnF;AAiBO,SAAS,SAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAuD,MAAS;AACxF,QAAM,aAAa,cAAc,yCAAyC;AAC1E,QAAM,cAAc,OAAoB,IAAI;AAC5C,QAAM,EAAE,gBAAgB,0BAA0B,GAAG,cAAc,IAAI,aAAa,CAAC;AACrF,QAAM,qBACJ,4BAA4B;AAE9B,QAAM,aAAa,MAAM;AAEzB,WAAS,cAAc;AACrB,gBAAY,SAAS,QAAQ;AAAA,EAC/B;AAEA,WAAS,eAAe;AACtB,YAAQ,MAAS;AAAA,EACnB;AAEA,QAAM,aAAa,QAAQ,SAAS,YAAY,mBAAmB,MAAM,CAAC,IAAI,IAAI,mBAAmB,MAAM,CAAC,IAAI;AAEhH,QAAM,cACJ,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,QAAQ,SAAS,YAAY,CAAC,IAAI,IAAI,CAAC;AAAA,QACtD,qBAAqB,CAAC,MAAM;AAC1B,gBAAM,aAAa,EAAE,OAAO;AAC5B,kBAAQ,cAAc,MAAS;AAAA,QACjC;AAAA,QACA,KAAK;AAAA,QACL,iBAAe,cAAc,MAAM,aAAa,MAAM,UAAU;AAAA;AAAA,IACjE;AAAA,IACD,oBAAC,SAAI,WAAU,qBACb,8BAAC,UAAO,OAAM,WAAU,SAAS,MAAM,QAAQ,SAAS,GAAG,mBAE3D,GACF;AAAA,KACF;AAGF,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,cAAc,MAAM,aAAa,MAAM,UAAU;AAAA,MACrD,qBAAqB;AAAA,MACpB,GAAG;AAAA,MACJ,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB,CAAC,EAAE,MAAM,cAAc,MAAM;AAC5C,YAAI,YAAY;AACd,kBAAQ,MAAS;AAAA,QACnB,OAAO;AACL,kBAAQ,aAAa;AAAA,QACvB;AACA,oBAAY;AAAA,MACd;AAAA,MACA,iBAAiB,MAAM;AACrB,gBAAQ,MAAS;AACjB,oBAAY;AAAA,MACd;AAAA;AAAA,EACF;AAGF,SACE,oBAAC,SAAI,WAAW,aAAa,aAAa,EAAE,IAAI,IAAQ,OACrD,uBACC,iCACG;AAAA;AAAA,IACD,oBAAC,kBAAe,QAAQ,CAAC,CAAC,MAAM,QAAQ,YAAY,SAAS,cAC1D,oBACH;AAAA,KACF,IAEA,qBAAC,eAAY,OAAM,SAChB;AAAA;AAAA,IACD,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,SAAI,WAAU,yBAAyB,sBAAW;AAAA,MAClD;AAAA,OACH;AAAA,KACF,GAEJ;AAEJ;",
-  "names": []
-}
+{"version":3,"file":"autocrud.js","sourceRoot":"","sources":["src/autocrud.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AbstractModel, DetachedModelConstructor, Value } from '@vaadin/hilla-lit-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { SplitLayout } from '@vaadin/react-components/SplitLayout.js';\nimport { type JSX, useId, useRef, useState } from 'react';\nimport { AutoCrudDialog } from './autocrud-dialog.js';\nimport css from './autocrud.obj.js';\nimport { type AutoFormProps, emptyItem, AutoForm } from './autoform.js';\nimport { type AutoGridProps, AutoGrid, type AutoGridRef } from './autogrid.js';\nimport type { CrudService } from './crud.js';\nimport { useMediaQuery } from './media-query.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport type AutoCrudFormHeaderRenderer<TItem> = (\n  editedItem: TItem | null,\n  disabled: boolean,\n) => JSX.Element | null | undefined;\n\nexport type AutoCrudFormProps<TModel extends AbstractModel> = Omit<\n  Partial<AutoFormProps<TModel>>,\n  'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'\n> &\n  Readonly<{\n    /**\n     * A custom renderer function to create the header for the form. The\n     * function receives the edited item as the first parameter, and a boolean\n     * indicating whether the form is disabled as the second parameter. The\n     * edited item is `null` when creating a new item.\n     *\n     * By default, the header shows \"New item\" when creating a new item, and\n     * \"Edit item\" when editing an existing item.\n     */\n    headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;\n  }>;\n\nexport type AutoCrudGridProps<TItem> = Omit<\n  Partial<AutoGridProps<TItem>>,\n  'model' | 'onActiveItemChanged' | 'selectedItems' | 'service'\n>;\n\nexport type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = ComponentStyleProps &\n  Readonly<{\n    /**\n     * The service to use for fetching the data, as well saving and deleting\n     * items. This must be a TypeScript service that has been generated by Hilla\n     * from a backend Java service that implements the\n     * `com.vaadin.hilla.crud.CrudService` interface.\n     */\n    service: CrudService<Value<TModel>>;\n    /**\n     * The entity model to use for the CRUD. This determines which columns to\n     * show in the grid, and which fields to show in the form. This must be a\n     * Typescript model class that has been generated by Hilla from a backend\n     * Java class. The model must match with the type of the items returned by\n     * the service. For example, a `PersonModel` can be used with a service that\n     * returns `Person` instances.\n     *\n     * By default, the grid shows columns for all properties of the model which\n     * have a type that is supported. Use the `gridProps.visibleColumns` option\n     * to customize which columns to show and in which order.\n     *\n     * By default, the form shows fields for all properties of the model which\n     * have a type that is supported. Use the `formProps.visibleFields`\n     * option to customize which fields to show and in which order.\n     */\n    model: DetachedModelConstructor<TModel>;\n    /**\n     * The property to use to detect an item's ID. The item ID is required for\n     * deleting items via the `CrudService.delete` method as well as keeping the\n     * selection state after reloading the grid.\n     *\n     * By default, the component uses the property annotated with\n     * `jakarta.persistence.Id`, or a property named `id`, in that order.\n     * This option can be used to override the default behavior, or define the ID\n     * property in case a class doesn't have a property matching the defaults.\n     */\n    itemIdProperty?: string;\n    /**\n     * Determines whether to hide the \"New\" button in the toolbar.\n     *\n     * NOTE: This setting only hides the button; it does not prevent new items\n     * from being sent to the service. Ensure your backend Java service is\n     * properly secured to prevent unauthorized creation of new items.\n     *\n     * @defaultValue `false` meaning the button will be shown.\n     */\n    noNewButton?: boolean;\n    /**\n     * Props to pass to the form. See the `AutoForm` component for details.\n     */\n    formProps?: AutoCrudFormProps<TModel>;\n    /**\n     * Props to pass to the grid. See the `AutoGrid` component for details.\n     */\n    gridProps?: AutoCrudGridProps<Value<TModel>>;\n  }>;\n\nfunction defaultFormHeaderRenderer<TItem>(editedItem: TItem | null, disabled: boolean): JSX.Element | null | undefined {\n  const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };\n  return editedItem ? <h3 style={style}>Edit item</h3> : <h3 style={style}>New item</h3>;\n}\n\n/**\n * Auto CRUD is a component that provides CRUD (create, read, update, delete)\n * functionality based on a Java backend service. It automatically generates a\n * grid that shows data from the service, and a form for creating, updating and\n * deleting items.\n *\n * Example usage:\n * ```tsx\n * import { AutoCrud } from '@hilla/react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoCrud service={PersonService} model={PersonModel} />\n * ```\n */\nexport function AutoCrud<TModel extends AbstractModel>({\n  service,\n  model,\n  itemIdProperty,\n  noNewButton,\n  formProps,\n  gridProps,\n  style,\n  id,\n  className,\n}: AutoCrudProps<TModel>): JSX.Element {\n  const [item, setItem] = useState<Value<TModel> | typeof emptyItem | undefined>(undefined);\n  const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');\n  const autoGridRef = useRef<AutoGridRef>(null);\n  const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};\n  const formHeaderRenderer: AutoCrudFormHeaderRenderer<Value<TModel>> =\n    customFormHeaderRenderer ?? defaultFormHeaderRenderer;\n\n  const autoCrudId = useId();\n\n  function refreshGrid() {\n    autoGridRef.current?.refresh();\n  }\n\n  function handleCancel() {\n    setItem(undefined);\n  }\n\n  const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);\n\n  const mainSection = (\n    <div className=\"auto-crud-main\">\n      <AutoGrid\n        {...gridProps}\n        service={service}\n        model={model as DetachedModelConstructor<AbstractModel<Value<TModel>>>}\n        itemIdProperty={itemIdProperty}\n        selectedItems={item && item !== emptyItem ? [item] : []}\n        onActiveItemChanged={(e) => {\n          const activeItem = e.detail.value;\n          setItem(activeItem ?? undefined);\n        }}\n        ref={autoGridRef}\n        aria-controls={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n      ></AutoGrid>\n      {/* As the toolbar only contains the \"New\" button at the moment, and as an empty toolbar\n          renders as a half-height bar, let's hide it completely when the button is hidden */}\n      {!noNewButton && (\n        <div className=\"auto-crud-toolbar\">\n          <Button theme=\"primary\" onClick={() => setItem(emptyItem)}>\n            + New\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n\n  const autoForm = (\n    <AutoForm\n      id={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n      deleteButtonVisible={true}\n      {...autoFormProps}\n      disabled={!item}\n      service={service}\n      model={model}\n      itemIdProperty={itemIdProperty}\n      item={item}\n      onSubmitSuccess={({ item: submittedItem }) => {\n        if (fullScreen) {\n          setItem(undefined);\n        } else {\n          setItem(submittedItem);\n        }\n        refreshGrid();\n      }}\n      onDeleteSuccess={() => {\n        setItem(undefined);\n        refreshGrid();\n      }}\n    />\n  );\n\n  // If the \"New\" button is visible, the form is always shown.\n  // Otherwise, the form is only shown when an item is being edited.\n  if (!noNewButton || (item && item !== emptyItem)) {\n    return (\n      <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>\n        {fullScreen ? (\n          <>\n            {mainSection}\n            <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>\n              {autoForm}\n            </AutoCrudDialog>\n          </>\n        ) : (\n          <SplitLayout theme=\"small\">\n            {mainSection}\n            <div className=\"auto-crud-form\">\n              <div className=\"auto-crud-form-header\">{formHeader}</div>\n              {autoForm}\n            </div>\n          </SplitLayout>\n        )}\n      </div>\n    );\n  }\n\n  return mainSection;\n}\n"]}

package/autocrud.obj.js

@@ -1,6 +1 @@
-const css = new CSSStyleSheet();
-css.replaceSync(`.auto-crud{border:1px solid var(--lumo-contrast-20pct);display:flex;overflow:hidden}.auto-crud vaadin-split-layout{flex:1 1 100%}.auto-crud vaadin-split-layout::part(splitter){border-left:1px solid var(--lumo-contrast-20pct);border-top:1px solid var(--lumo-contrast-20pct)}.auto-crud-main{display:flex;flex:1 1 100%;flex-direction:column;min-width:200px}.auto-crud-main vaadin-grid{border:none}.auto-crud-toolbar{align-items:baseline;background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);display:flex;flex-shrink:0;justify-content:flex-end;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-form{align-items:stretch;display:flex;flex-direction:column;min-width:300px;width:40%}.auto-crud .auto-crud-form:before{box-shadow:var(--lumo-box-shadow-s);content:"";height:100%;pointer-events:none;position:absolute;width:100%;z-index:1}.auto-crud-form-header{padding:var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s) var(--lumo-space-m)}.auto-crud .auto-form,.auto-crud-dialog .auto-form{align-items:stretch;display:flex;flex:1 1 0;flex-direction:column}.auto-crud .auto-form-fields,.auto-crud-dialog .auto-form-fields{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 var(--lumo-space-m)}.auto-crud .auto-form-toolbar,.auto-crud-dialog .auto-form-toolbar{background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);flex:0 0 auto;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-dialog{bottom:0;left:0;right:0;top:0}.auto-crud-dialog::part(overlay){border-radius:0;height:100%;width:100%}.auto-crud-dialog::part(content){padding:0}.auto-crud-dialog .auto-crud-dialog-header{align-items:center;display:flex;justify-content:space-between;width:100%}.auto-crud-dialog .auto-form{height:100%;width:100%}`);
-export {
-  css as default
-};
-//# sourceMappingURL=autocrud.obj.js.map
+const css = new CSSStyleSheet();css.replaceSync(`.auto-crud{border:1px solid var(--lumo-contrast-20pct);display:flex;overflow:hidden}.auto-crud vaadin-split-layout{flex:1 1 100%}.auto-crud vaadin-split-layout::part(splitter){border-left:1px solid var(--lumo-contrast-20pct);border-top:1px solid var(--lumo-contrast-20pct)}.auto-crud-main{display:flex;flex:1 1 100%;flex-direction:column;min-width:200px}.auto-crud-main vaadin-grid{border:none}.auto-crud-toolbar{align-items:baseline;background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);display:flex;flex-shrink:0;justify-content:flex-end;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-form{align-items:stretch;display:flex;flex-direction:column;min-width:300px;width:40%}.auto-crud .auto-crud-form:before{box-shadow:var(--lumo-box-shadow-s);content:"";height:100%;pointer-events:none;position:absolute;width:100%;z-index:1}.auto-crud-form-header{padding:var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s) var(--lumo-space-m)}.auto-crud .auto-form,.auto-crud-dialog .auto-form{align-items:stretch;display:flex;flex:1 1 0;flex-direction:column}.auto-crud .auto-form-fields,.auto-crud-dialog .auto-form-fields{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 var(--lumo-space-m)}.auto-crud .auto-form-toolbar,.auto-crud-dialog .auto-form-toolbar{background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);flex:0 0 auto;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-dialog{bottom:0;left:0;right:0;top:0}.auto-crud-dialog::part(overlay){border-radius:0;height:100%;width:100%}.auto-crud-dialog::part(content){padding:0}.auto-crud-dialog .auto-crud-dialog-header{align-items:center;display:flex;justify-content:space-between;width:100%}.auto-crud-dialog .auto-form{height:100%;width:100%}`);export default css;

package/autoform-feature.d.ts

@@ -1,4 +1,3 @@
 import { AutoForm as _AutoForm } from './autoform.js';
 export * from './autoform.js';
 export declare const AutoForm: typeof _AutoForm;
-//# sourceMappingURL=autoform-feature.d.ts.map

package/autoform-feature.js

@@ -1,8 +1,5 @@
-import { AutoForm as _AutoForm } from "./autoform.js";
-import { featureRegistration } from "./util";
-export * from "./autoform.js";
-const AutoForm = featureRegistration(_AutoForm, "AutoForm");
-export {
-  AutoForm
-};
-//# sourceMappingURL=autoform-feature.js.map
+import { AutoForm as _AutoForm } from './autoform.js';
+import { featureRegistration } from './util';
+export * from './autoform.js';
+export const AutoForm = featureRegistration(_AutoForm, 'AutoForm');
+//# sourceMappingURL=autoform-feature.js.map

package/autoform-feature.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["src/autoform-feature.ts"],
-  "sourcesContent": ["/* eslint-disable import/export */\nimport { AutoForm as _AutoForm } from './autoform.js';\nimport { featureRegistration } from './util';\n\nexport * from './autoform.js';\n\nexport const AutoForm: typeof _AutoForm = featureRegistration(_AutoForm, 'AutoForm');\n"],
-  "mappings": "AACA,SAAS,YAAY,iBAAiB;AACtC,SAAS,2BAA2B;AAEpC,cAAc;AAEP,MAAM,WAA6B,oBAAoB,WAAW,UAAU;",
-  "names": []
-}
+{"version":3,"file":"autoform-feature.js","sourceRoot":"","sources":["src/autoform-feature.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAE7C,cAAc,eAAe,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAqB,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC","sourcesContent":["/* eslint-disable import/export */\nimport { AutoForm as _AutoForm } from './autoform.js';\nimport { featureRegistration } from './util';\n\nexport * from './autoform.js';\n\nexport const AutoForm: typeof _AutoForm = featureRegistration(_AutoForm, 'AutoForm');\n"]}

package/autoform-field.d.ts

@@ -13,110 +13,20 @@ type CustomFormFieldProps = FieldDirectiveResult & Readonly<{
     disabled?: boolean;
 }>;
 export type FieldOptions = Readonly<{
-    /**
-     * The id to apply to the field.
-     */
     id?: string;
-    /**
-     * The class names to add to the field.
-     */
     className?: string;
-    /**
-     * The style to apply to the field.
-     */
     style?: CSSProperties;
-    /**
-     * The label to show for the field. If not specified, a human-readable label
-     * is generated from the property name.
-     */
     label?: string;
-    /**
-     * The placeholder to when the field is empty.
-     *
-     * Note that some field types, such as checkbox, do not support a placeholder.
-     */
     placeholder?: string;
-    /**
-     * The helper text to display below the field.
-     *
-     * Note that some field types, such as checkbox, do not support a helper text.
-     */
     helperText?: string;
-    /**
-     * The number of columns to span. This value is passed to the underlying
-     * FormLayout, unless a custom layout is used. In that case, the value is
-     * ignored.
-     */
     colspan?: number;
-    /**
-     * Whether the field should be disabled.
-     */
     disabled?: boolean;
-    /**
-     * Whether the field should be readonly.
-     */
     readonly?: boolean;
-    /**
-     * The element to render for the field. This allows customizing field props
-     * that are not supported by the field options, or to render a different field
-     * component. Other field options are automatically applied to the element,
-     * and the element is automatically bound to the form. If not specified, a
-     * default field element is rendered based on the property type.
-     *
-     * The element must be a field component, such as TextField, TextArea,
-     * NumberField, etc., otherwise form binding will not work. For more
-     * sophisticated customizations, use the `renderer` option.
-     *
-     * If the field options also specify a renderer function, then the element is
-     * ignored.
-     *
-     * Example enabling the clear button for a text field:
-     * ```tsx
-     * {
-     *   element: <TextField clearButtonVisible />
-     * }
-     * ```
-     *
-     * Example rendering a text area instead of a text field:
-     * ```tsx
-     * {
-     *   element: <TextArea />
-     * }
-     * ```
-     */
     element?: JSX.Element;
-    /**
-     * Allows to specify a custom renderer for the field, for example to render a
-     * custom type of field or apply an additional layout around the field. The
-     * renderer receives field props that must be applied to the custom field
-     * component in order to connect it to the form.
-     *
-     * In order to customize one of the default fields, or render a different type
-     * of field, consider using the `element` option instead.
-     *
-     * Example:
-     * ```tsx
-     * {
-     *   renderer: ({ field }) => (
-     *     <div>
-     *       <TextArea {...field} />
-     *       <p>Number of words: {calculateNumberOfWords()}</p>
-     *     </div>
-     *   )
-     * }
-     * ```
-     */
     renderer?(props: {
         field: CustomFormFieldProps;
     }): JSX.Element;
-    /**
-     * Validators to apply to the field. The validators are added to the form
-     * when the field is rendered.
-     * UseMemo is recommended for the validators, so that they are not recreated
-     * on every render.
-     */
     validators?: Validator[];
 }>;
 export declare function AutoFormField(props: AutoFormFieldProps): JSX.Element | null;
 export {};
-//# sourceMappingURL=autoform-field.d.ts.map