@scm-manager/ui-forms 2.43.1 → 2.43.2-20230419-125637

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-@scm-manager/ui-forms:build: cache hit, replaying output d6f4a4e68ffe927d
+@scm-manager/ui-forms:build: cache hit, replaying output ba53194cea81ebc1
 @scm-manager/ui-forms:build: $ tsup ./src/index.ts -d build --format esm,cjs --dts
 @scm-manager/ui-forms:build: CLI Building entry: ./src/index.ts
 @scm-manager/ui-forms:build: CLI Using tsconfig: tsconfig.json
@@ -6,10 +6,10 @@
 @scm-manager/ui-forms:build: CLI Target: node14
 @scm-manager/ui-forms:build: ESM Build start
 @scm-manager/ui-forms:build: CJS Build start
-@scm-manager/ui-forms:build: ESM build/index.mjs 32.38 KB
-@scm-manager/ui-forms:build: ESM ⚡️ Build success in 151ms
-@scm-manager/ui-forms:build: CJS build/index.js 37.31 KB
-@scm-manager/ui-forms:build: CJS ⚡️ Build success in 134ms
+@scm-manager/ui-forms:build: ESM build/index.mjs 33.03 KB
+@scm-manager/ui-forms:build: ESM ⚡️ Build success in 755ms
+@scm-manager/ui-forms:build: CJS build/index.js 38.09 KB
+@scm-manager/ui-forms:build: CJS ⚡️ Build success in 707ms
 @scm-manager/ui-forms:build: DTS Build start
-@scm-manager/ui-forms:build: DTS ⚡️ Build success in 16667ms
-@scm-manager/ui-forms:build: DTS build/index.d.ts 21.58 KB
+@scm-manager/ui-forms:build: DTS ⚡️ Build success in 45213ms
+@scm-manager/ui-forms:build: DTS build/index.d.ts 21.65 KB

package/build/index.d.ts

@@ -93,6 +93,10 @@ declare type Props$6<T extends Record<string, unknown>> = Omit<ComponentProps<ty
 };
 declare function ControlledSecretConfirmationField<T extends Record<string, unknown>>({ name, label, confirmationLabel, helpText, confirmationHelpText, rules, confirmationErrorMessage, className, testId, confirmationTestId, defaultValue, readOnly, ...props }: Props$6<T>): JSX.Element;
 
+/**
+ * @beta
+ * @since 2.44.0
+ */
 declare const Select: React__default.ForwardRefExoticComponent<{
     variant?: "danger" | undefined;
     options?: (React__default.OptionHTMLAttributes<HTMLOptionElement> & {
@@ -108,6 +112,8 @@ declare type Props$5 = {
 } & React__default.ComponentProps<typeof Select>;
 /**
  * @see https://bulma.io/documentation/form/select/
+ * @beta
+ * @since 2.44.0
  */
 declare const SelectField: React__default.ForwardRefExoticComponent<Pick<Props$5, "label" | "key" | "testId" | "error" | "helpText" | "options" | "variant" | keyof React__default.InputHTMLAttributes<HTMLSelectElement>> & React__default.RefAttributes<HTMLSelectElement>>;
 
@@ -148,7 +154,7 @@ declare type Props$2<T extends Record<string, unknown>, PATH extends Path<T>> =
  * @beta
  * @since 2.43.0
  */
-declare function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>>({ withDelete, children, className, }: Props$2<T, PATH>): JSX.Element | null;
+declare function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>>({ withDelete, children, className, }: Props$2<T, PATH>): JSX.Element;
 
 declare type RenderProps<T extends Record<string, unknown>> = Omit<UseFormReturn<T>, "register" | "unregister" | "handleSubmit" | "control">;
 declare type Props$1<FormType extends Record<string, unknown>, DefaultValues extends FormType> = {
@@ -231,4 +237,4 @@ declare const Form: typeof Form$1 & {
     };
 };
 
-export { ConfigurationForm, Form, useCreateResource, useDeleteResource, useUpdateResource };
+export { ConfigurationForm, Form, Select, SelectField, useCreateResource, useDeleteResource, useUpdateResource };

package/build/index.js

@@ -28,6 +28,8 @@ var src_exports = {};
 __export(src_exports, {
   ConfigurationForm: () => ConfigurationForm_default,
   Form: () => Form2,
+  Select: () => Select_default,
+  SelectField: () => SelectField_default,
   useCreateResource: () => useCreateResource,
   useDeleteResource: () => useDeleteResource,
   useUpdateResource: () => useUpdateResource
@@ -560,10 +562,10 @@ var Select = import_react17.default.forwardRef(
     ...props,
     ...(0, import_ui_components5.createAttributesForTesting)(testId),
     className
-  }, options ? options.map((option) => /* @__PURE__ */ import_react17.default.createElement("option", {
-    ...option,
-    key: option.value
-  }, option.label, option.children)) : children))
+  }, options ? options.map((opt) => /* @__PURE__ */ import_react17.default.createElement("option", {
+    ...opt,
+    key: opt.value
+  }, opt.label, opt.children)) : children))
 );
 var Select_default = Select;
 
@@ -692,6 +694,7 @@ var import_react22 = __toESM(require("react"));
 var import_ui_buttons3 = require("@scm-manager/ui-buttons");
 var import_classnames12 = __toESM(require("classnames"));
 var import_react_i18next3 = require("react-i18next");
+var import_ui_components7 = require("@scm-manager/ui-components");
 function ControlledTable({
   withDelete,
   children,
@@ -703,15 +706,17 @@ function ControlledTable({
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const { fields, remove } = useScmFormListContext();
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
+  const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
-  if (!fields.length) {
-    return null;
-  }
   return /* @__PURE__ */ import_react22.default.createElement("table", {
     className: (0, import_classnames12.default)("table content is-hoverable", className)
   }, /* @__PURE__ */ import_react22.default.createElement("thead", null, /* @__PURE__ */ import_react22.default.createElement("tr", null, import_react22.default.Children.map(children, (child) => /* @__PURE__ */ import_react22.default.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ import_react22.default.createElement("th", {
     className: "has-text-right"
-  }, actionHeaderLabel) : null)), /* @__PURE__ */ import_react22.default.createElement("tbody", null, fields.map((value, index) => /* @__PURE__ */ import_react22.default.createElement(ScmFormPathContextProvider, {
+  }, actionHeaderLabel) : null)), /* @__PURE__ */ import_react22.default.createElement("tbody", null, fields.length === 0 ? /* @__PURE__ */ import_react22.default.createElement("tr", null, /* @__PURE__ */ import_react22.default.createElement("td", {
+    colSpan: 1e3
+  }, /* @__PURE__ */ import_react22.default.createElement(import_ui_components7.Notification, {
+    type: "info"
+  }, emptyTableLabel))) : null, fields.map((value, index) => /* @__PURE__ */ import_react22.default.createElement(ScmFormPathContextProvider, {
     key: value.id,
     path: `${nameWithPrefix}.${index}`
   }, /* @__PURE__ */ import_react22.default.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ import_react22.default.createElement("td", {
@@ -781,6 +786,9 @@ function AddListEntryForm({
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") })
   });
+  const titleLabel = translateWithExtraPrefix("title", {
+    defaultValue: defaultTranslate("list.title.label", { entity: translateWithExtraPrefix("entity") })
+  });
   (0, import_react24.useEffect)(() => {
     if (isSubmitSuccessful) {
       reset(defaultValues);
@@ -795,12 +803,14 @@ function AddListEntryForm({
     formId: nameWithPrefix
   }, /* @__PURE__ */ import_react24.default.createElement(ScmFormPathContextProvider, {
     path: ""
-  }, /* @__PURE__ */ import_react24.default.createElement("form", {
+  }, /* @__PURE__ */ import_react24.default.createElement("h3", {
+    className: "subtitle is-5"
+  }, titleLabel), /* @__PURE__ */ import_react24.default.createElement("form", {
     id: nameWithPrefix,
     onSubmit: form.handleSubmit(onSubmit),
     noValidate: true
   }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ import_react24.default.createElement("div", {
-    className: "level-right"
+    className: "level-left"
   }, /* @__PURE__ */ import_react24.default.createElement(import_ui_buttons4.Button, {
     form: nameWithPrefix,
     type: "submit",
@@ -812,14 +822,14 @@ var AddListEntryForm_default = AddListEntryForm;
 
 // src/ConfigurationForm.tsx
 var import_ui_api = require("@scm-manager/ui-api");
-var import_ui_components7 = require("@scm-manager/ui-components");
+var import_ui_components8 = require("@scm-manager/ui-components");
 var import_react25 = __toESM(require("react"));
 var import_react_i18next5 = require("react-i18next");
 function ConfigurationForm({ link, children, ...formProps }) {
   const { initialConfiguration, isReadOnly, update, isLoading } = (0, import_ui_api.useConfigLink)(link);
   const [t] = (0, import_react_i18next5.useTranslation)("commons", { keyPrefix: "form" });
   if (isLoading || !initialConfiguration) {
-    return /* @__PURE__ */ import_react25.default.createElement(import_ui_components7.Loading, null);
+    return /* @__PURE__ */ import_react25.default.createElement(import_ui_components8.Loading, null);
   }
   return /* @__PURE__ */ import_react25.default.createElement(Form_default, {
     onSubmit: update,
@@ -936,6 +946,8 @@ var Form2 = Object.assign(Form_default, {
 0 && (module.exports = {
   ConfigurationForm,
   Form,
+  Select,
+  SelectField,
   useCreateResource,
   useDeleteResource,
   useUpdateResource

package/build/index.mjs

@@ -524,10 +524,10 @@ var Select = React17.forwardRef(
     ...props,
     ...createAttributesForTesting3(testId),
     className
-  }, options ? options.map((option) => /* @__PURE__ */ React17.createElement("option", {
-    ...option,
-    key: option.value
-  }, option.label, option.children)) : children))
+  }, options ? options.map((opt) => /* @__PURE__ */ React17.createElement("option", {
+    ...opt,
+    key: opt.value
+  }, opt.label, opt.children)) : children))
 );
 var Select_default = Select;
 
@@ -656,6 +656,7 @@ import React22 from "react";
 import { Button as Button3 } from "@scm-manager/ui-buttons";
 import classNames12 from "classnames";
 import { useTranslation as useTranslation3 } from "react-i18next";
+import { Notification } from "@scm-manager/ui-components";
 function ControlledTable({
   withDelete,
   children,
@@ -667,15 +668,17 @@ function ControlledTable({
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const { fields, remove } = useScmFormListContext();
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
+  const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
-  if (!fields.length) {
-    return null;
-  }
   return /* @__PURE__ */ React22.createElement("table", {
     className: classNames12("table content is-hoverable", className)
   }, /* @__PURE__ */ React22.createElement("thead", null, /* @__PURE__ */ React22.createElement("tr", null, React22.Children.map(children, (child) => /* @__PURE__ */ React22.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ React22.createElement("th", {
     className: "has-text-right"
-  }, actionHeaderLabel) : null)), /* @__PURE__ */ React22.createElement("tbody", null, fields.map((value, index) => /* @__PURE__ */ React22.createElement(ScmFormPathContextProvider, {
+  }, actionHeaderLabel) : null)), /* @__PURE__ */ React22.createElement("tbody", null, fields.length === 0 ? /* @__PURE__ */ React22.createElement("tr", null, /* @__PURE__ */ React22.createElement("td", {
+    colSpan: 1e3
+  }, /* @__PURE__ */ React22.createElement(Notification, {
+    type: "info"
+  }, emptyTableLabel))) : null, fields.map((value, index) => /* @__PURE__ */ React22.createElement(ScmFormPathContextProvider, {
     key: value.id,
     path: `${nameWithPrefix}.${index}`
   }, /* @__PURE__ */ React22.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ React22.createElement("td", {
@@ -745,6 +748,9 @@ function AddListEntryForm({
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") })
   });
+  const titleLabel = translateWithExtraPrefix("title", {
+    defaultValue: defaultTranslate("list.title.label", { entity: translateWithExtraPrefix("entity") })
+  });
   useEffect2(() => {
     if (isSubmitSuccessful) {
       reset(defaultValues);
@@ -759,12 +765,14 @@ function AddListEntryForm({
     formId: nameWithPrefix
   }, /* @__PURE__ */ React24.createElement(ScmFormPathContextProvider, {
     path: ""
-  }, /* @__PURE__ */ React24.createElement("form", {
+  }, /* @__PURE__ */ React24.createElement("h3", {
+    className: "subtitle is-5"
+  }, titleLabel), /* @__PURE__ */ React24.createElement("form", {
     id: nameWithPrefix,
     onSubmit: form.handleSubmit(onSubmit),
     noValidate: true
   }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ React24.createElement("div", {
-    className: "level-right"
+    className: "level-left"
   }, /* @__PURE__ */ React24.createElement(Button4, {
     form: nameWithPrefix,
     type: "submit",
@@ -899,6 +907,8 @@ var Form2 = Object.assign(Form_default, {
 export {
   ConfigurationForm_default as ConfigurationForm,
   Form2 as Form,
+  Select_default as Select,
+  SelectField_default as SelectField,
   useCreateResource,
   useDeleteResource,
   useUpdateResource

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scm-manager/ui-forms",
   "private": false,
-  "version": "2.43.1",
+  "version": "2.43.2-20230419-125637",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index.mjs",
@@ -16,7 +16,7 @@
     "@scm-manager/eslint-config": "^2.16.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-styles": "2.43.1",
+    "@scm-manager/ui-styles": "2.43.2-20230419-125637",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -32,7 +32,7 @@
     "tsup": "^6.2.3"
   },
   "peerDependencies": {
-    "@scm-manager/ui-components": "2.43.1",
+    "@scm-manager/ui-components": "2.43.2-20230419-125637",
     "classnames": "^2.3.1",
     "react": "17",
     "react-hook-form": "7",
@@ -41,9 +41,9 @@
     "styled-components": "5"
   },
   "dependencies": {
-    "@scm-manager/ui-buttons": "2.43.1",
-    "@scm-manager/ui-overlays": "2.43.1",
-    "@scm-manager/ui-api": "2.43.1"
+    "@scm-manager/ui-buttons": "2.43.2-20230419-125637",
+    "@scm-manager/ui-overlays": "2.43.2-20230419-125637",
+    "@scm-manager/ui-api": "2.43.2-20230419-125637"
   },
   "prettier": "@scm-manager/prettier-config",
   "eslintConfig": {

package/src/AddListEntryForm.tsx

@@ -88,6 +88,9 @@ function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValue
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") }),
   });
+  const titleLabel = translateWithExtraPrefix("title", {
+    defaultValue: defaultTranslate("list.title.label", { entity: translateWithExtraPrefix("entity") }),
+  });
 
   useEffect(() => {
     if (isSubmitSuccessful) {
@@ -102,9 +105,10 @@ function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValue
   return (
     <ScmFormContextProvider {...form} t={translateWithExtraPrefix} formId={nameWithPrefix}>
       <ScmFormPathContextProvider path="">
+        <h3 className="subtitle is-5">{titleLabel}</h3>
         <form id={nameWithPrefix} onSubmit={form.handleSubmit(onSubmit)} noValidate></form>
         {typeof children === "function" ? children(form) : children}
-        <div className="level-right">
+        <div className="level-left">
           <Button
             form={nameWithPrefix}
             type="submit"

package/src/index.ts

@@ -36,6 +36,8 @@ import AddListEntryForm from "./AddListEntryForm";
 import { ScmNestedFormPathContextProvider } from "./FormPathContext";
 
 export { default as ConfigurationForm } from "./ConfigurationForm";
+export { default as SelectField } from "./select/SelectField";
+export { default as Select } from "./select/Select";
 export * from "./resourceHooks";
 
 export const Form = Object.assign(FormCmp, {

package/src/select/Select.tsx

@@ -33,15 +33,19 @@ type Props = {
   testId?: string;
 } & InputHTMLAttributes<HTMLSelectElement>;
 
+/**
+ * @beta
+ * @since 2.44.0
+ */
 const Select = React.forwardRef<HTMLSelectElement, Props>(
   ({ variant, children, className, options, testId, ...props }, ref) => (
     <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
       <select ref={ref} {...props} {...createAttributesForTesting(testId)} className={className}>
         {options
-          ? options.map((option) => (
-              <option {...option} key={option.value as Key}>
-                {option.label}
-                {option.children}
+          ? options.map((opt) => (
+              <option {...opt} key={opt.value as Key}>
+                {opt.label}
+                {opt.children}
               </option>
             ))
           : children}

package/src/select/SelectField.tsx

@@ -39,6 +39,8 @@ type Props = {
 
 /**
  * @see https://bulma.io/documentation/form/select/
+ * @beta
+ * @since 2.44.0
  */
 const SelectField = React.forwardRef<HTMLSelectElement, Props>(
   ({ label, helpText, error, className, id, ...props }, ref) => {

package/src/table/ControlledTable.tsx

@@ -31,6 +31,7 @@ import { prefixWithoutIndices } from "../helpers";
 import classNames from "classnames";
 import { useScmFormListContext } from "../ScmFormListContext";
 import { useTranslation } from "react-i18next";
+import { Notification } from "@scm-manager/ui-components";
 
 type RenderProps<T extends Record<string, unknown>, PATH extends Path<T>> = {
   value: PathValue<T, PATH>;
@@ -59,12 +60,9 @@ function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const { fields, remove } = useScmFormListContext();
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
+  const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
 
-  if (!fields.length) {
-    return null;
-  }
-
   return (
     <table className={classNames("table content is-hoverable", className)}>
       <thead>
@@ -76,6 +74,7 @@ function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>
         </tr>
       </thead>
       <tbody>
+      {fields.length === 0 ? <tr><td colSpan={1000}><Notification type="info">{emptyTableLabel}</Notification></td></tr> : null}
         {fields.map((value, index) => (
           <ScmFormPathContextProvider key={value.id} path={`${nameWithPrefix}.${index}`}>
             <tr>