@zakodium/nmrium-core-plugins-ui 0.1.32 → 0.1.33

package/lib/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apodization_topbar.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,uBAAuB,CAAC;AAKnF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,qCAAqC,CAAC,6CAA6C,CAAC,+BAiC5F"}
+{"version":3,"file":"apodization_topbar.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,uBAAuB,CAAC;AAMnF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,qCAAqC,CAAC,6CAA6C,CAAC,+BAiC5F"}

package/lib/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Classes } from '@blueprintjs/core';
-import styled from '@emotion/styled';
-import { AppForm } from 'react-science/ui';
+import { HorizontalAppForm } from "../utils/horizontal_app_form.js";
 import { useApodizationForm } from "./apodization.hook.js";
 export function ApodizationTopBar(props) {
     const { children } = props;
@@ -9,25 +7,4 @@ export function ApodizationTopBar(props) {
     const { AppField, SubmitButton, Subscribe } = form;
     return (_jsxs(HorizontalAppForm, { form: form, layout: "inline", children: [_jsx(Subscribe, { selector: (state) => state.values.exponential?.apply ?? false, children: (apply) => (_jsx(AppField, { name: "exponential.options.lineBroadening", children: ({ NumericInput }) => (_jsx(NumericInput, { readOnly: !apply, disabled: !apply, label: "Line broadening", minorStepSize: 0.01, step: 0.1, majorStepSize: 1 })) })) }), children(_jsx(SubmitButton, { variant: "outlined", size: "small", intent: "success", children: "Apply" }))] }));
 }
-const HorizontalAppForm = styled(AppForm) `
-  display: contents;
-
-  .${Classes.FORM_GROUP} {
-    min-height: unset;
-    width: unset;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
-
-    > :not(.${Classes.LABEL}) {
-      min-width: unset;
-      width: unset;
-    }
-
-    .${Classes.INPUT} {
-      width: 5em;
-    }
-  }
-`;
 //# sourceMappingURL=apodization_topbar.js.map

package/lib/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"apodization_topbar.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,UAAU,iBAAiB,CAC/B,KAA2F;IAE3F,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAEnD,OAAO,CACL,MAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,aAC5C,KAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,IAAI,KAAK,YACrE,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IAAC,IAAI,EAAC,oCAAoC,YAChD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACrB,KAAC,YAAY,IACX,QAAQ,EAAE,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,KAAK,EAChB,KAAK,EAAC,iBAAiB,EACvB,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,GAAG,EACT,aAAa,EAAE,CAAC,GAChB,CACH,GACQ,CACZ,GACS,EAEX,QAAQ,CACP,KAAC,YAAY,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,sBAE/C,CAChB,IACiB,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;KAGpC,OAAO,CAAC,UAAU;;;;;;;;cAQT,OAAO,CAAC,KAAK;;;;;OAKpB,OAAO,CAAC,KAAK;;;;CAInB,CAAC"}
+{"version":3,"file":"apodization_topbar.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAkC,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,UAAU,iBAAiB,CAC/B,KAA2F;IAE3F,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAEnD,OAAO,CACL,MAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,aAC5C,KAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,IAAI,KAAK,YACrE,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IAAC,IAAI,EAAC,oCAAoC,YAChD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACrB,KAAC,YAAY,IACX,QAAQ,EAAE,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,KAAK,EAChB,KAAK,EAAC,iBAAiB,EACvB,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,GAAG,EACT,aAAa,EAAE,CAAC,GAChB,CACH,GACQ,CACZ,GACS,EAEX,QAAQ,CACP,KAAC,YAAY,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,sBAE/C,CAChB,IACiB,CACrB,CAAC;AACJ,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zero_filling.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,qGAQxB,CAAC"}
+{"version":3,"file":"zero_filling.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,qGASxB,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.js

@@ -1,6 +1,7 @@
 import { defineProcessingOperatorUI } from '@zakodium/nmrium-core';
 import { ZeroFillingExpand } from "./zero_filling_expand.js";
 import { ZeroFillingTool } from "./zero_filling_tool.js";
+import { ZeroFillingTopBar } from "./zero_filling_topbar.js";
 export const zeroFilling1D = defineProcessingOperatorUI({
     id: '@zakodium/nmrium-core-plugins#zeroFilling1D',
     name: 'Zero filling',
@@ -9,5 +10,6 @@ export const zeroFilling1D = defineProcessingOperatorUI({
     defaultShouldProcessAll: false,
     Expanded: ZeroFillingExpand,
     Tool: ZeroFillingTool,
+    TopBar: ZeroFillingTopBar,
 });
 //# sourceMappingURL=zero_filling.js.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.js.map

@@ -1 +1 @@
-{"version":3,"file":"zero_filling.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAyB,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,0BAA0B,CAAC;IACtD,EAAE,EAAE,6CAA6C;IACjD,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,IAAI;IAChB,cAAc,EAAE,IAAI;IACpB,uBAAuB,EAAE,KAAK;IAC9B,QAAQ,EAAE,iBAAiB;IAC3B,IAAI,EAAE,eAAe;CACtB,CAAC,CAAC"}
+{"version":3,"file":"zero_filling.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAyB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,aAAa,GAAG,0BAA0B,CAAC;IACtD,EAAE,EAAE,6CAA6C;IACjD,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,IAAI;IAChB,cAAc,EAAE,IAAI;IACpB,uBAAuB,EAAE,KAAK;IAC9B,QAAQ,EAAE,iBAAiB;IAC3B,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,iBAAiB;CAC1B,CAAC,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.d.ts

@@ -0,0 +1,3 @@
+import type { ProcessingOperatorUISettingsFormProps } from '@zakodium/nmrium-core';
+export declare function ZeroFillingTopBar(props: ProcessingOperatorUISettingsFormProps<'@zakodium/nmrium-core-plugins#zeroFilling1D'>): import("react").JSX.Element;
+//# sourceMappingURL=zero_filling_topbar.d.ts.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero_filling_topbar.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,uBAAuB,CAAC;AAMnF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,qCAAqC,CAAC,6CAA6C,CAAC,+BAoB5F"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HorizontalAppForm } from "../utils/horizontal_app_form.js";
+import { useZeroFillingForm } from "./zero_filling.hook.js";
+export function ZeroFillingTopBar(props) {
+    const { children } = props;
+    const { form, options } = useZeroFillingForm(props);
+    const { AppField, SubmitButton } = form;
+    return (_jsxs(HorizontalAppForm, { form: form, layout: "inline", children: [_jsx(AppField, { name: "size", children: ({ Select }) => _jsx(Select, { label: "Size", items: options }) }), children(_jsx(SubmitButton, { variant: "outlined", size: "small", intent: "success", children: "Apply" }))] }));
+}
+//# sourceMappingURL=zero_filling_topbar.js.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero_filling_topbar.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAkC,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,UAAU,iBAAiB,CAC/B,KAA2F;IAE3F,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAExC,OAAO,CACL,MAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,aAC5C,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,YAClB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO,GAAI,GAC/C,EAEV,QAAQ,CACP,KAAC,YAAY,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,sBAE/C,CAChB,IACiB,CACrB,CAAC;AACJ,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.d.ts

@@ -0,0 +1,34 @@
+export declare const HorizontalAppForm: import("@emotion/styled").StyledComponent<Omit<import("react").PropsWithChildren<NoInfer<import("react-science/ui").AppFormProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<any, any, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, {
+        readonly Input: typeof import("react-science/ui").Input;
+        readonly NumericInput: typeof import("react-science/ui").NumericInput;
+        readonly Checkbox: typeof import("react-science/ui").Checkbox;
+        readonly Select: typeof import("react-science/ui").Select;
+        readonly Switch: typeof import("react-science/ui").Switch;
+        readonly ColorPicker: typeof import("react-science/ui").ColorPicker;
+        readonly RadioGroup: typeof import("react-science/ui").RadioGroup;
+        readonly DraggableNumericInput: typeof import("react-science/ui").DraggableNumericInput;
+    }, {
+        readonly SubmitButton: typeof import("react-science/ui").SubmitButton;
+        readonly ResetButton: typeof import("react-science/ui").ResetButton;
+        readonly Section: typeof import("react-science/ui").Section;
+    }>;
+}>, "form"> & {
+    form: Omit<import("@tanstack/react-form").AppFieldExtendedReactFormApi<any, any, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, import("@tanstack/form-core").FormAsyncValidateOrFn<any> | undefined, any, {
+        readonly Input: typeof import("react-science/ui").Input;
+        readonly NumericInput: typeof import("react-science/ui").NumericInput;
+        readonly Checkbox: typeof import("react-science/ui").Checkbox;
+        readonly Select: typeof import("react-science/ui").Select;
+        readonly Switch: typeof import("react-science/ui").Switch;
+        readonly ColorPicker: typeof import("react-science/ui").ColorPicker;
+        readonly RadioGroup: typeof import("react-science/ui").RadioGroup;
+        readonly DraggableNumericInput: typeof import("react-science/ui").DraggableNumericInput;
+    }, {
+        readonly SubmitButton: typeof import("react-science/ui").SubmitButton;
+        readonly ResetButton: typeof import("react-science/ui").ResetButton;
+        readonly Section: typeof import("react-science/ui").Section;
+    }>, "pushFieldValue" | "insertFieldValue" | "replaceFieldValue">;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+//# sourceMappingURL=horizontal_app_form.d.ts.map

package/lib/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal_app_form.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAoB7B,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.js

@@ -0,0 +1,25 @@
+import { Classes } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { AppForm } from 'react-science/ui';
+export const HorizontalAppForm = styled(AppForm) `
+  display: contents;
+
+  .${Classes.FORM_GROUP} {
+    min-height: unset;
+    width: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+
+    > :not(.${Classes.LABEL}) {
+      min-width: unset;
+      width: unset;
+    }
+
+    .${Classes.INPUT} {
+      width: 5em;
+    }
+  }
+`;
+//# sourceMappingURL=horizontal_app_form.js.map

package/lib/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal_app_form.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;KAG3C,OAAO,CAAC,UAAU;;;;;;;;cAQT,OAAO,CAAC,KAAK;;;;;OAKpB,OAAO,CAAC,KAAK;;;;CAInB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zakodium/nmrium-core-plugins-ui",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "license": "CC-BY-NC-SA-4.0",
   "description": "UI related plugins needed for cheminfo/nmrium",
   "keywords": [],
@@ -44,5 +44,5 @@
     "typescript": "~6.0.3",
     "vitest": "^4.1.10"
   },
-  "gitHead": "b2fc8b61b71609465418895dbeb4670c6564fd50"
+  "gitHead": "9923521b72b11cd934452efc4a84cffeaf1c5e2c"
 }

package/src/plugins/spectrum_1d_processings_ui/operators/apodization_topbar.tsx

@@ -1,7 +1,6 @@
-import { Classes } from '@blueprintjs/core';
-import styled from '@emotion/styled';
 import type { ProcessingOperatorUISettingsFormProps } from '@zakodium/nmrium-core';
-import { AppForm } from 'react-science/ui';
+
+import { HorizontalAppForm } from '../utils/horizontal_app_form.tsx';
 
 import { useApodizationForm } from './apodization.hook.ts';
 
@@ -9,8 +8,8 @@ export function ApodizationTopBar(
   props: ProcessingOperatorUISettingsFormProps<'@zakodium/nmrium-core-plugins#apodization1D'>,
 ) {
   const { children } = props;
-  const form = useApodizationForm(props);
 
+  const form = useApodizationForm(props);
   const { AppField, SubmitButton, Subscribe } = form;
 
   return (
@@ -40,25 +39,3 @@ export function ApodizationTopBar(
     </HorizontalAppForm>
   );
 }
-
-const HorizontalAppForm = styled(AppForm)`
-  display: contents;
-
-  .${Classes.FORM_GROUP} {
-    min-height: unset;
-    width: unset;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
-
-    > :not(.${Classes.LABEL}) {
-      min-width: unset;
-      width: unset;
-    }
-
-    .${Classes.INPUT} {
-      width: 5em;
-    }
-  }
-`;

package/src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx

@@ -2,6 +2,7 @@ import { defineProcessingOperatorUI } from '@zakodium/nmrium-core';
 
 import { ZeroFillingExpand } from './zero_filling_expand.tsx';
 import { ZeroFillingTool } from './zero_filling_tool.tsx';
+import { ZeroFillingTopBar } from './zero_filling_topbar.tsx';
 
 export const zeroFilling1D = defineProcessingOperatorUI({
   id: '@zakodium/nmrium-core-plugins#zeroFilling1D',
@@ -11,4 +12,5 @@ export const zeroFilling1D = defineProcessingOperatorUI({
   defaultShouldProcessAll: false,
   Expanded: ZeroFillingExpand,
   Tool: ZeroFillingTool,
+  TopBar: ZeroFillingTopBar,
 });

package/src/plugins/spectrum_1d_processings_ui/operators/zero_filling_topbar.tsx

@@ -0,0 +1,28 @@
+import type { ProcessingOperatorUISettingsFormProps } from '@zakodium/nmrium-core';
+
+import { HorizontalAppForm } from '../utils/horizontal_app_form.tsx';
+
+import { useZeroFillingForm } from './zero_filling.hook.ts';
+
+export function ZeroFillingTopBar(
+  props: ProcessingOperatorUISettingsFormProps<'@zakodium/nmrium-core-plugins#zeroFilling1D'>,
+) {
+  const { children } = props;
+
+  const { form, options } = useZeroFillingForm(props);
+  const { AppField, SubmitButton } = form;
+
+  return (
+    <HorizontalAppForm form={form} layout="inline">
+      <AppField name="size">
+        {({ Select }) => <Select label="Size" items={options} />}
+      </AppField>
+
+      {children(
+        <SubmitButton variant="outlined" size="small" intent="success">
+          Apply
+        </SubmitButton>,
+      )}
+    </HorizontalAppForm>
+  );
+}

package/src/plugins/spectrum_1d_processings_ui/utils/horizontal_app_form.tsx

@@ -0,0 +1,25 @@
+import { Classes } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { AppForm } from 'react-science/ui';
+
+export const HorizontalAppForm = styled(AppForm)`
+  display: contents;
+
+  .${Classes.FORM_GROUP} {
+    min-height: unset;
+    width: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+
+    > :not(.${Classes.LABEL}) {
+      min-width: unset;
+      width: unset;
+    }
+
+    .${Classes.INPUT} {
+      width: 5em;
+    }
+  }
+`;