react-iframe-bridge 2.0.2 → 2.1.0

package/lib/components/home/home.d.ts

@@ -17,6 +17,10 @@ export interface HomeProps {
      * Default path the iframe should load, if no path is found in local storage
      */
     defaultPath?: string;
+    /**
+     * List of possible page paths. Used for autocomplete in the path input.
+     */
+    pages?: string[];
     /**
      * Opt out of selecting a sample / selecting no sample before loading the iframe.
      * The sample selection UI will be hidden and the iframe will automatically load without a selected sample.

package/lib/components/home/home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../../src/components/home/home.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAWpC"}
+{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../../src/components/home/home.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAgBpC"}

package/lib/components/home/home.js

@@ -6,31 +6,32 @@ import HomeIframe from './home_iframe.js';
 import HomeNoSample from './home_no_sample.js';
 import HomeSamples from './home_samples.js';
 export function Home(props) {
-    const { baseUrl, noSampleSelection, rocUrl, database, defaultPath } = props;
-    return (_jsx(HomeContextProvider, { rocUrl: rocUrl, database: database, defaultPath: defaultPath, children: _jsx(HomeInternal, { noSampleSelection: noSampleSelection, baseUrl: baseUrl }) }));
+    const { baseUrl, noSampleSelection, rocUrl, database, defaultPath, pages } = props;
+    return (_jsx(HomeContextProvider, { rocUrl: rocUrl, database: database, defaultPath: defaultPath, children: _jsx(HomeInternal, { noSampleSelection: noSampleSelection, baseUrl: baseUrl, pages: pages }) }));
 }
 function HomeInternal(props) {
+    const { noSampleSelection, baseUrl, pages } = props;
     const homeDispatch = useHomeDispatchContext();
     useEffect(() => {
-        if (props.noSampleSelection) {
+        if (noSampleSelection) {
             homeDispatch({
                 type: 'OPEN_NO_SAMPLE',
             });
         }
-    }, [props.noSampleSelection, homeDispatch]);
+    }, [noSampleSelection, homeDispatch]);
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             width: '100vw',
             height: '100vh',
-        }, children: [_jsx(HomeHeader, {}), _jsxs("div", { style: {
+        }, children: [_jsx(HomeHeader, { pages: pages }), _jsxs("div", { style: {
                     marginTop: '0.5rem',
                     display: 'flex',
                     minHeight: 0,
                     flex: 1,
                     flexDirection: 'row',
                     borderTop: '1px solid #d1d5dc',
-                }, children: [!props.noSampleSelection && (_jsxs("div", { style: {
+                }, children: [!noSampleSelection && (_jsxs("div", { style: {
                             display: 'flex',
                             width: '12rem',
                             flexDirection: 'column',
@@ -39,6 +40,6 @@ function HomeInternal(props) {
                             borderRight: '1px solid #d1d5dc',
                             paddingInline: '0.5rem',
                             paddingTop: '1rem',
-                        }, children: [_jsx(HomeNoSample, {}), _jsx(HomeSamples, {})] })), _jsx(HomeIframe, { baseUrl: props.baseUrl })] })] }));
+                        }, children: [_jsx(HomeNoSample, {}), _jsx(HomeSamples, {})] })), _jsx(HomeIframe, { baseUrl: baseUrl })] })] }));
 }
 //# sourceMappingURL=home.js.map

package/lib/components/home/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../src/components/home/home.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,WAAW,MAAM,mBAAmB,CAAC;AA4B5C,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC5E,OAAO,CACL,KAAC,mBAAmB,IAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,YAExB,KAAC,YAAY,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,GAAI,GACpD,CACvB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,KAAuD;IAC3E,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC5B,YAAY,CAAC;gBACX,IAAI,EAAE,gBAAgB;aACvB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;IAC5C,OAAO,CACL,eACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB,aAED,KAAC,UAAU,KAAG,EACd,eACE,KAAK,EAAE;oBACL,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,MAAM;oBACf,SAAS,EAAE,CAAC;oBACZ,IAAI,EAAE,CAAC;oBACP,aAAa,EAAE,KAAK;oBACpB,SAAS,EAAE,mBAAmB;iBAC/B,aAEA,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAC3B,eACE,KAAK,EAAE;4BACL,OAAO,EAAE,MAAM;4BACf,KAAK,EAAE,OAAO;4BACd,aAAa,EAAE,QAAQ;4BACvB,GAAG,EAAE,SAAS;4BACd,QAAQ,EAAE,MAAM;4BAChB,WAAW,EAAE,mBAAmB;4BAChC,aAAa,EAAE,QAAQ;4BACvB,UAAU,EAAE,MAAM;yBACnB,aAED,KAAC,YAAY,KAAG,EAChB,KAAC,WAAW,KAAG,IACX,CACP,EACD,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,IAClC,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../src/components/home/home.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAgC5C,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,GACxE,KAAK,CAAC;IACR,OAAO,CACL,KAAC,mBAAmB,IAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,YAExB,KAAC,YAAY,IACX,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,GACkB,CACvB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CACnB,KAAiE;IAEjE,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE,CAAC;YACtB,YAAY,CAAC;gBACX,IAAI,EAAE,gBAAgB;aACvB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;IACtC,OAAO,CACL,eACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB,aAED,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,EAC5B,eACE,KAAK,EAAE;oBACL,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,MAAM;oBACf,SAAS,EAAE,CAAC;oBACZ,IAAI,EAAE,CAAC;oBACP,aAAa,EAAE,KAAK;oBACpB,SAAS,EAAE,mBAAmB;iBAC/B,aAEA,CAAC,iBAAiB,IAAI,CACrB,eACE,KAAK,EAAE;4BACL,OAAO,EAAE,MAAM;4BACf,KAAK,EAAE,OAAO;4BACd,aAAa,EAAE,QAAQ;4BACvB,GAAG,EAAE,SAAS;4BACd,QAAQ,EAAE,MAAM;4BAChB,WAAW,EAAE,mBAAmB;4BAChC,aAAa,EAAE,QAAQ;4BACvB,UAAU,EAAE,MAAM;yBACnB,aAED,KAAC,YAAY,KAAG,EAChB,KAAC,WAAW,KAAG,IACX,CACP,EACD,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,GAAI,IAC5B,IACF,CACP,CAAC;AACJ,CAAC"}

package/lib/components/home/home_header.d.ts

@@ -1,2 +1,6 @@
-export default function HomeHeader(): import("react/jsx-runtime").JSX.Element;
+interface HomeHeaderProps {
+    pages?: string[];
+}
+export default function HomeHeader(props: HomeHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=home_header.d.ts.map

package/lib/components/home/home_header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home_header.d.ts","sourceRoot":"","sources":["../../../src/components/home/home_header.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAwBjC"}
+{"version":3,"file":"home_header.d.ts","sourceRoot":"","sources":["../../../src/components/home/home_header.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,2CAgCxD"}

package/lib/components/home/home_header.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import Input from '../input.js';
 import { useHomeContext, useHomeDispatchContext } from './home_context.js';
-export default function HomeHeader() {
+export default function HomeHeader(props) {
+    const { pages = [] } = props;
     const { rocUrl, database, iframePath } = useHomeContext();
     const dispatch = useHomeDispatchContext();
+    const pageListId = useId();
     return (_jsxs("header", { style: {
             display: 'flex',
             flexDirection: 'row',
@@ -11,6 +14,6 @@ export default function HomeHeader() {
             padding: '0.5rem',
         }, children: [_jsx(Input, { name: "rocUrl", style: { flex: 1 }, value: rocUrl, readOnly: true }), _jsx(Input, { name: "database", value: database, readOnly: true }), _jsx(Input, { name: "iframe-page", value: iframePath, style: { flex: 1 }, onChange: (event) => {
                     dispatch({ type: 'SET_IFRAME_PAGE', payload: event.target.value });
-                } })] }));
+                }, list: pageListId }), _jsx("datalist", { id: pageListId, children: pages.map((page) => (_jsx("option", { value: page }, page))) })] }));
 }
 //# sourceMappingURL=home_header.js.map

package/lib/components/home/home_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"home_header.js","sourceRoot":"","sources":["../../../src/components/home/home_header.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1D,MAAM,QAAQ,GAAG,sBAAsB,EAAE,CAAC;IAC1C,OAAO,CACL,kBACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,MAAM;YACX,OAAO,EAAE,QAAQ;SAClB,aAED,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAG,EACnE,KAAC,KAAK,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,SAAG,EACnD,KAAC,KAAK,IACJ,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;gBACrE,CAAC,GACD,IACK,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"home_header.js","sourceRoot":"","sources":["../../../src/components/home/home_header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAM3E,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACvD,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1D,MAAM,QAAQ,GAAG,sBAAsB,EAAE,CAAC;IAC1C,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,OAAO,CACL,kBACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,MAAM;YACX,OAAO,EAAE,QAAQ;SAClB,aAED,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAG,EACnE,KAAC,KAAK,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,SAAG,EACnD,KAAC,KAAK,IACJ,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;gBACrE,CAAC,EACD,IAAI,EAAE,UAAU,GAChB,EACF,mBAAU,EAAE,EAAE,UAAU,YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAAmB,KAAK,EAAE,IAAI,IAAjB,IAAI,CAAiB,CACnC,CAAC,GACO,IACJ,CACV,CAAC;AACJ,CAAC"}

package/lib/components/input.d.ts

@@ -5,6 +5,7 @@ interface InputProps {
     value: string;
     readOnly?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    list?: string;
 }
 export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExD,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,2CAoB9C"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExD,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,2CAkB9C"}

package/lib/components/input.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Input(props) {
-    return (_jsx("input", { name: props.name, type: "text", style: {
+    const { style, ...otherProps } = props;
+    return (_jsx("input", { type: "text", style: {
             appearance: 'none',
             border: '1px solid #4a5565',
             backgroundColor: 'white',
@@ -8,7 +9,7 @@ export default function Input(props) {
             paddingBlock: '0.5rem',
             fontSize: '1rem',
             lineHeight: 1,
-            ...props.style,
-        }, value: props.value, readOnly: props.readOnly, onChange: props.onChange }));
+            ...style,
+        }, ...otherProps }));
 }
 //# sourceMappingURL=input.js.map

package/lib/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,OAAO,CACL,gBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;YACL,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,mBAAmB;YAC3B,eAAe,EAAE,OAAO;YACxB,aAAa,EAAE,SAAS;YACxB,YAAY,EAAE,QAAQ;YACtB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,CAAC;YACb,GAAG,KAAK,CAAC,KAAK;SACf,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACvC,OAAO,CACL,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;YACL,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,mBAAmB;YAC3B,eAAe,EAAE,OAAO;YACxB,aAAa,EAAE,SAAS;YACxB,YAAY,EAAE,QAAQ;YACtB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,CAAC;YACb,GAAG,KAAK;SACT,KACG,UAAU,GACd,CACH,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iframe-bridge",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "React hooks and components to work with iframe-bridge.",
   "type": "module",
   "exports": "./lib/index.js",

package/src/components/home/home.tsx

@@ -25,6 +25,10 @@ export interface HomeProps {
    * Default path the iframe should load, if no path is found in local storage
    */
   defaultPath?: string;
+  /**
+   * List of possible page paths. Used for autocomplete in the path input.
+   */
+  pages?: string[];
   /**
    * Opt out of selecting a sample / selecting no sample before loading the iframe.
    * The sample selection UI will be hidden and the iframe will automatically load without a selected sample.
@@ -33,27 +37,35 @@ export interface HomeProps {
 }
 
 export function Home(props: HomeProps) {
-  const { baseUrl, noSampleSelection, rocUrl, database, defaultPath } = props;
+  const { baseUrl, noSampleSelection, rocUrl, database, defaultPath, pages } =
+    props;
   return (
     <HomeContextProvider
       rocUrl={rocUrl}
       database={database}
       defaultPath={defaultPath}
     >
-      <HomeInternal noSampleSelection={noSampleSelection} baseUrl={baseUrl} />
+      <HomeInternal
+        noSampleSelection={noSampleSelection}
+        baseUrl={baseUrl}
+        pages={pages}
+      />
     </HomeContextProvider>
   );
 }
 
-function HomeInternal(props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection'>) {
+function HomeInternal(
+  props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection' | 'pages'>,
+) {
+  const { noSampleSelection, baseUrl, pages } = props;
   const homeDispatch = useHomeDispatchContext();
   useEffect(() => {
-    if (props.noSampleSelection) {
+    if (noSampleSelection) {
       homeDispatch({
         type: 'OPEN_NO_SAMPLE',
       });
     }
-  }, [props.noSampleSelection, homeDispatch]);
+  }, [noSampleSelection, homeDispatch]);
   return (
     <div
       style={{
@@ -63,7 +75,7 @@ function HomeInternal(props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection'>) {
         height: '100vh',
       }}
     >
-      <HomeHeader />
+      <HomeHeader pages={pages} />
       <div
         style={{
           marginTop: '0.5rem',
@@ -74,7 +86,7 @@ function HomeInternal(props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection'>) {
           borderTop: '1px solid #d1d5dc',
         }}
       >
-        {!props.noSampleSelection && (
+        {!noSampleSelection && (
           <div
             style={{
               display: 'flex',
@@ -91,7 +103,7 @@ function HomeInternal(props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection'>) {
             <HomeSamples />
           </div>
         )}
-        <HomeIframe baseUrl={props.baseUrl} />
+        <HomeIframe baseUrl={baseUrl} />
       </div>
     </div>
   );

package/src/components/home/home_header.tsx

@@ -1,10 +1,18 @@
+import { useId } from 'react';
+
 import Input from '../input.js';
 
 import { useHomeContext, useHomeDispatchContext } from './home_context.js';
 
-export default function HomeHeader() {
+interface HomeHeaderProps {
+  pages?: string[];
+}
+
+export default function HomeHeader(props: HomeHeaderProps) {
+  const { pages = [] } = props;
   const { rocUrl, database, iframePath } = useHomeContext();
   const dispatch = useHomeDispatchContext();
+  const pageListId = useId();
   return (
     <header
       style={{
@@ -23,7 +31,13 @@ export default function HomeHeader() {
         onChange={(event) => {
           dispatch({ type: 'SET_IFRAME_PAGE', payload: event.target.value });
         }}
+        list={pageListId}
       />
+      <datalist id={pageListId}>
+        {pages.map((page) => (
+          <option key={page} value={page} />
+        ))}
+      </datalist>
     </header>
   );
 }

package/src/components/input.tsx

@@ -6,12 +6,13 @@ interface InputProps {
   value: string;
   readOnly?: boolean;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  list?: string;
 }
 
 export default function Input(props: InputProps) {
+  const { style, ...otherProps } = props;
   return (
     <input
-      name={props.name}
       type="text"
       style={{
         appearance: 'none',
@@ -21,11 +22,9 @@ export default function Input(props: InputProps) {
         paddingBlock: '0.5rem',
         fontSize: '1rem',
         lineHeight: 1,
-        ...props.style,
+        ...style,
       }}
-      value={props.value}
-      readOnly={props.readOnly}
-      onChange={props.onChange}
+      {...otherProps}
     />
   );
 }