Add hidden field for Admin surface

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -41,6 +41,8 @@ export {Heading} from './components/Heading/Heading';
 export type {HeadingProps} from './components/Heading/Heading';
 export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
 export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
+export {HiddenField} from './components/HiddenField/HiddenField';
+export type {HiddenFieldProps} from './components/HiddenField/HiddenField';
 export {Icon} from './components/Icon/Icon';
 export type {IconProps} from './components/Icon/Icon';
 export {Image} from './components/Image/Image';

packages/ui-extensions-react/src/surfaces/admin/components/HiddenField/HiddenField.ts

@@ -0,0 +1,5 @@
+import {HiddenField as BaseHiddenField} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const HiddenField = createRemoteReactComponent(BaseHiddenField);
+export type {HiddenFieldProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/HiddenField/examples/basic-hiddenfield.example.tsx

@@ -0,0 +1,53 @@
+import {
+  render,
+  useApi,
+  AdminBlock,
+  Form,
+  Button,
+  HiddenField,
+} from '@shopify/ui-extensions-react/admin';
+import {useState} from 'react';
+
+render('Playground', () => <App />);
+
+function App() {
+  const [selectedItem, setSelectedItem] =
+    useState();
+  const {resourcePicker} = useApi();
+
+  return (
+    <AdminBlock>
+      <Form
+        onSubmit={() => {
+          //TODO: submit the form
+        }}
+        onReset={() => {
+          setSelectedItem(undefined);
+        }}
+      >
+        <Button
+          onPress={async () => {
+            const selectedProduct =
+              await resourcePicker({
+                type: 'product',
+                action: 'select',
+              });
+            if (selectedItem?.length) {
+              setSelectedItem(
+                JSON.stringify(
+                  selectedProduct[0],
+                ),
+              );
+            }
+          }}
+        >
+          Select product
+        </Button>
+        <HiddenField
+          name="selected-product"
+          value={selectedItem}
+        />
+      </Form>
+    </AdminBlock>
+  );
+}

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -41,6 +41,8 @@ export {Heading} from './components/Heading/Heading';
 export type {HeadingProps} from './components/Heading/Heading';
 export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
 export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
+export {HiddenField} from './components/HiddenField/HiddenField';
+export type {HiddenFieldProps} from './components/HiddenField/HiddenField';
 export {Icon} from './components/Icon/Icon';
 export type {IconProps} from './components/Icon/Icon';
 export {InlineStack} from './components/InlineStack/InlineStack';

packages/ui-extensions/src/surfaces/admin/components/HiddenField/HiddenField.ts

@@ -0,0 +1,10 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {InputProps} from '../shared';
+
+export interface HiddenFieldProps
+  extends Pick<InputProps<string>, 'id' | 'name' | 'value'> {}
+
+export const HiddenField = createRemoteComponent<
+  'HiddenField',
+  HiddenFieldProps
+>('HiddenField');

packages/ui-extensions/src/surfaces/admin/components/HiddenField/README.md

@@ -0,0 +1,7 @@
+# HiddenField
+
+Use a Hidden Field to track values that are not captured by a input field. For example, you can use a Hidden Field to track of the selected item from the Resource Picker API. Putting the Hidden Field inside of a Form component will enable it participate in the Form's dirty state when the value is updated.
+
+## Expected HTML in Web host
+
+`<input type="hidden" />`