@agility/plenum-ui 1.1.2 → 1.1.3

package/lib/components/Combobox/Combobox.d.ts

@@ -1,18 +1,19 @@
-import { FC } from 'react';
-export declare type ComboboxItemProps = {
-    value: string;
-};
-export interface ComboboxProps {
+/// <reference types="react" />
+export interface ComboboxProps<T extends Record<string, unknown>> {
     /** Label */
     label?: string;
     /** ID */
     id: string;
     /** Array of items to display */
-    items: ComboboxItemProps[];
+    items: T[];
+    /** the item property to use as the key */
+    keyProperty: string;
+    /** the item property to use as the display */
+    displayProperty: string;
     /** Placeholder */
     placeholder?: string;
     /** Callback to trigger on change */
-    onChange?(value: string): void;
+    onChange?(value: T): void;
     /** Select disabled state */
     isDisabled?: boolean;
     /** Select error state */
@@ -20,5 +21,4 @@ export interface ComboboxProps {
     /** Select required state */
     isRequired?: boolean;
 }
-/** Comment */
-export declare const Combobox: FC<ComboboxProps>;
+export declare const Combobox: <T extends Record<string, unknown>>({ label, items, displayProperty, keyProperty, onChange, placeholder, isDisabled, isError, isRequired, id }: ComboboxProps<T>) => JSX.Element;

package/lib/components/Combobox/Combobox.stories.d.ts

@@ -3,9 +3,12 @@ import { Story } from '@storybook/react';
 import { ComboboxProps } from './Combobox';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const AllVariations: Story<ComboboxProps>;
-export declare const Default: Story<ComboboxProps>;
-export declare const Label: Story<ComboboxProps>;
-export declare const Disabled: Story<ComboboxProps>;
-export declare const Required: Story<ComboboxProps>;
-export declare const Error: Story<ComboboxProps>;
+interface ComboItem {
+    [value: string]: string;
+}
+export declare const AllVariations: Story<ComboboxProps<ComboItem>>;
+export declare const Default: Story<ComboboxProps<ComboItem>>;
+export declare const Label: Story<ComboboxProps<ComboItem>>;
+export declare const Disabled: Story<ComboboxProps<ComboItem>>;
+export declare const Required: Story<ComboboxProps<ComboItem>>;
+export declare const Error: Story<ComboboxProps<ComboItem>>;

package/lib/components/TreeView/TreeItem/TreeItem.d.ts

@@ -1,16 +1,7 @@
 import { FC } from 'react';
-import { TreeItemChildrenProps } from '../types/tree.types';
 export interface TreeItemProps {
-    /** Selected or current state */
-    isCurrent?: boolean;
-    /** title of the tree item */
-    title?: string;
-    /** If tree item is expanded */
-    isExpanded?: boolean;
-    /** inner nodes within the tree item */
-    childNodes?: Partial<TreeItemChildrenProps[] | null>;
-    /** A Check to know if item is a root value */
-    isRoot?: boolean;
+    /** Prop comment */
+    prop: string;
 }
 /** Comment */
 export declare const TreeItem: FC<TreeItemProps>;

package/lib/components/TreeView/TreeItem/TreeItem.stories.d.ts

@@ -3,7 +3,4 @@ import { Story } from '@storybook/react';
 import { TreeItemProps } from './TreeItem';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Base: Story<TreeItemProps>;
-export declare const Active: Story<TreeItemProps>;
-export declare const Expanded: Story<TreeItemProps>;
-export declare const WithChildren: Story<TreeItemProps>;
+export declare const TreeItemComponent: Story<TreeItemProps>;

package/lib/components/TreeView/context.d.ts

@@ -1,9 +1,12 @@
-import React, { ComponentType } from 'react';
-import { TreeViewContextProps } from "./types/tree.types";
+import React, { Dispatch, SetStateAction } from 'react';
+export interface TreeViewContextProps {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
 export interface TreeViewProviderProps {
-    children?: JSX.Element | HTMLDivElement | ComponentType;
+    children?: JSX.Element | HTMLDivElement;
 }
-declare const TreeViewContext: React.Context<TreeViewContextProps | null>;
+declare const TreeViewContext: React.Context<Partial<TreeViewContextProps | null>>;
 declare const TreeViewProvider: ({ children }: TreeViewProviderProps) => JSX.Element;
-export declare const useTreeViewContext: () => TreeViewContextProps | null;
+export declare const useTreeViewContext: () => Partial<TreeViewContextProps | null>;
 export { TreeViewContext, TreeViewProvider };

package/lib/components/TreeView/sampleData.d.ts

@@ -11,7 +11,7 @@ export declare const data: ({
     galleryFolderID: number;
     assetID: number;
     folderID: number;
-    childNodes: null;
+    children: null;
 } | {
     key: string;
     type: string;
@@ -25,7 +25,7 @@ export declare const data: ({
     galleryFolderID: number;
     assetID: number;
     folderID: number;
-    childNodes: ({
+    children: ({
         key: string;
         type: string;
         title: string;
@@ -38,7 +38,7 @@ export declare const data: ({
         galleryFolderID: number;
         assetID: number;
         folderID: number;
-        childNodes: {
+        children: {
             key: string;
             type: string;
             title: string;
@@ -51,7 +51,7 @@ export declare const data: ({
             galleryFolderID: number;
             assetID: number;
             folderID: number;
-            childNodes: null;
+            children: null;
         }[];
     } | {
         key: string;
@@ -66,6 +66,6 @@ export declare const data: ({
         galleryFolderID: number;
         assetID: number;
         folderID: number;
-        childNodes: null;
+        children: null;
     })[];
 })[];

package/lib/index.esm.js

@@ -7089,9 +7089,9 @@ function classNames() {
     }
     return classes.filter(Boolean).join(' ');
 }
-/** Comment */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var Combobox = function (_a) {
-    var label = _a.label, items = _a.items, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
+    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
     var _b = useState(''), query = _b[0], setQuery = _b[1];
     var _c = useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     useEffect(function () {
@@ -7100,7 +7100,7 @@ var Combobox = function (_a) {
     var filteredItems = query === ''
         ? items
         : items.filter(function (item) {
-            return item.value.toLowerCase().includes(query.toLowerCase());
+            return "".concat(item[displayProperty]).toLowerCase().includes(query.toLowerCase());
         });
     var inputStyles = cn$1('w-full rounded-md border bg-white py-2 pl-3 pr-10 shadow-sm sm:text-sm', 'focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500', { 'border-red-500': isError }, { 'border-gray-300': !isError });
     var labelStyles = cn$1('block text-sm font-medium text-gray-700');
@@ -7110,16 +7110,16 @@ var Combobox = function (_a) {
         label && (React__default.createElement(Na.Label, { className: labelStyles },
             React__default.createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled }))),
         React__default.createElement("div", { className: "relative" },
-            React__default.createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return item.value; }, placeholder: placeholder }),
+            React__default.createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return "".concat(item[displayProperty]); }, placeholder: placeholder }),
             React__default.createElement(Na.Button, { className: buttonStyles },
                 React__default.createElement(DynamicIcons, { icon: "SelectorIcon", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" })),
-            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default.createElement(Na.Option, { key: index, value: item, className: function (_a) {
+            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default.createElement(Na.Option, { key: "".concat(item[keyProperty], "-").concat(index), value: item, className: function (_a) {
                     var active = _a.active;
                     return classNames('relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-purple-600 text-white' : 'text-gray-900');
                 } }, function (_a) {
                 var active = _a.active, selected = _a.selected;
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, item.value),
+                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, "".concat(item[displayProperty])),
                     selected && (React__default.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-purple-600') },
                         React__default.createElement(DynamicIcons, { icon: "CheckIcon", className: "h-5 w-5", "aria-hidden": "true" })))));
             })); }))))));

package/lib/index.js

@@ -7115,9 +7115,9 @@ function classNames() {
     }
     return classes.filter(Boolean).join(' ');
 }
-/** Comment */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var Combobox = function (_a) {
-    var label = _a.label, items = _a.items, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
+    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
     var _b = React.useState(''), query = _b[0], setQuery = _b[1];
     var _c = React.useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     React.useEffect(function () {
@@ -7126,7 +7126,7 @@ var Combobox = function (_a) {
     var filteredItems = query === ''
         ? items
         : items.filter(function (item) {
-            return item.value.toLowerCase().includes(query.toLowerCase());
+            return "".concat(item[displayProperty]).toLowerCase().includes(query.toLowerCase());
         });
     var inputStyles = cn$1('w-full rounded-md border bg-white py-2 pl-3 pr-10 shadow-sm sm:text-sm', 'focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500', { 'border-red-500': isError }, { 'border-gray-300': !isError });
     var labelStyles = cn$1('block text-sm font-medium text-gray-700');
@@ -7136,16 +7136,16 @@ var Combobox = function (_a) {
         label && (React__default["default"].createElement(Na.Label, { className: labelStyles },
             React__default["default"].createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled }))),
         React__default["default"].createElement("div", { className: "relative" },
-            React__default["default"].createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return item.value; }, placeholder: placeholder }),
+            React__default["default"].createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return "".concat(item[displayProperty]); }, placeholder: placeholder }),
             React__default["default"].createElement(Na.Button, { className: buttonStyles },
                 React__default["default"].createElement(DynamicIcons, { icon: "SelectorIcon", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" })),
-            filteredItems.length > 0 && (React__default["default"].createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default["default"].createElement(Na.Option, { key: index, value: item, className: function (_a) {
+            filteredItems.length > 0 && (React__default["default"].createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default["default"].createElement(Na.Option, { key: "".concat(item[keyProperty], "-").concat(index), value: item, className: function (_a) {
                     var active = _a.active;
                     return classNames('relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-purple-600 text-white' : 'text-gray-900');
                 } }, function (_a) {
                 var active = _a.active, selected = _a.selected;
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, item.value),
+                    React__default["default"].createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, "".concat(item[displayProperty])),
                     selected && (React__default["default"].createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-purple-600') },
                         React__default["default"].createElement(DynamicIcons, { icon: "CheckIcon", className: "h-5 w-5", "aria-hidden": "true" })))));
             })); }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@agility/plenum-ui",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "Components that are part of the Agility CMS design system.",
     "main": "lib/index.js",
     "module": "lib/index.esm.js",

package/coverage/Forms/TextInputSelect/InputSelect/InputSelect.tsx.html

@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title>Code coverage report for Forms/TextInputSelect/InputSelect/InputSelect.tsx</title>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="../../../prettify.css" />
-        <link rel="stylesheet" href="../../../base.css" />
-        <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <style type="text/css">
-            .coverage-summary .sorter {
-                background-image: url(../../../sort-arrow-sprite.png);
-            }
-        </style>
-    </head>
-
-    <body>
-        <div class="wrapper">
-            <div class="pad1">
-                <h1>
-                    <a href="../../../index.html">All files</a> /
-                    <a href="index.html">Forms/TextInputSelect/InputSelect</a> InputSelect.tsx
-                </h1>
-                <div class="clearfix">
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">95% </span>
-                        <span class="quiet">Statements</span>
-                        <span class="fraction">19/20</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">66.66% </span>
-                        <span class="quiet">Branches</span>
-                        <span class="fraction">6/9</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">100% </span>
-                        <span class="quiet">Functions</span>
-                        <span class="fraction">3/3</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">100% </span>
-                        <span class="quiet">Lines</span>
-                        <span class="fraction">12/12</span>
-                    </div>
-                </div>
-                <p class="quiet">
-                    Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>,
-                    <em>p</em> or <em>k</em> for the previous block.
-                </p>
-                <template id="filterTemplate">
-                    <div class="quiet">
-                        Filter:
-                        <input oninput="onInput()" type="search" id="fileSearch" />
-                    </div>
-                </template>
-            </div>
-            <div class="status-line high"></div>
-            <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a>
-<a name='L5'></a><a href='#L5'>5</a>
-<a name='L6'></a><a href='#L6'>6</a>
-<a name='L7'></a><a href='#L7'>7</a>
-<a name='L8'></a><a href='#L8'>8</a>
-<a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a>
-<a name='L11'></a><a href='#L11'>11</a>
-<a name='L12'></a><a href='#L12'>12</a>
-<a name='L13'></a><a href='#L13'>13</a>
-<a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a>
-<a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a>
-<a name='L28'></a><a href='#L28'>28</a>
-<a name='L29'></a><a href='#L29'>29</a>
-<a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a>
-<a name='L32'></a><a href='#L32'>32</a>
-<a name='L33'></a><a href='#L33'>33</a>
-<a name='L34'></a><a href='#L34'>34</a>
-<a name='L35'></a><a href='#L35'>35</a>
-<a name='L36'></a><a href='#L36'>36</a>
-<a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a>
-<a name='L39'></a><a href='#L39'>39</a>
-<a name='L40'></a><a href='#L40'>40</a>
-<a name='L41'></a><a href='#L41'>41</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { FC, useState } from 'react';
-import { default as cn } from 'classnames';
-import { SelectOptions } from '..';
-&nbsp;
-export interface InputSelectProps {
-    align: 'left' | 'right';
-    /** Show the CTA without Background color and a border seperator */
-    inputOptions: SelectOptions[];
-    /** Onclick callback */
-    onSelectOption?(value: string): void;
-}
-&nbsp;
-/** Comment */
-export const InputSelect: FC&lt;InputSelectProps&gt; = ({ inputOptions, onSelectOption, align = <span class="branch-0 cbranch-no" title="branch not covered" >'right' </span>}: InputSelectProps): JSX.Element | null =&gt; {
-    const [selectedOption, setSelectedOption] = useState&lt;string&gt;(inputOptions[0].value);
-    const handleChange = (e: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
-        const targetValue = e.target.value;
-        onSelectOption &amp;&amp; onSelectOption(targetValue);
-        setSelectedOption(targetValue);
-    };
-    const selectStyle = cn(
-        'relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
-        { 'rounded-r-md text-gray-700 -ml-px': align === 'right' },
-        { 'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left' },
-        { 'cursor-default': !onSelectOption },
-        { 'border-l-white': align === 'right' },
-        { 'border-r-white': align === 'left' }
-    );
-&nbsp;
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (!inputOptions<span class="branch-0 cbranch-no" title="branch not covered" >?.l</span>ength) <span class="cstat-no" title="statement not covered" >return null;</span>
-    return (
-        &lt;select className={selectStyle} onChange={handleChange} value={selectedOption}&gt;
-            {inputOptions.map((option) =&gt; (
-                &lt;option key={option.value} value={option.value}&gt;
-                    {option.label}
-                &lt;/option&gt;
-            ))}
-        &lt;/select&gt;
-    );
-};
-&nbsp;</pre></td></tr></table></pre>
-
-            <div class="push"></div>
-            <!-- for sticky footer -->
-        </div>
-        <!-- /wrapper -->
-        <div class="footer quiet pad2 space-top1 center small">
-            Code coverage generated by
-            <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer"
-                >istanbul</a
-            >
-            at Wed Feb 23 2022 16:23:07 GMT-0500 (Eastern Standard Time)
-        </div>
-        <script src="../../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../../sorter.js"></script>
-        <script src="../../../block-navigation.js"></script>
-    </body>
-</html>

package/coverage/Forms/TextInputSelect/InputSelect/index.html

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title>Code coverage report for Forms/TextInputSelect/InputSelect</title>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="../../../prettify.css" />
-        <link rel="stylesheet" href="../../../base.css" />
-        <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <style type="text/css">
-            .coverage-summary .sorter {
-                background-image: url(../../../sort-arrow-sprite.png);
-            }
-        </style>
-    </head>
-
-    <body>
-        <div class="wrapper">
-            <div class="pad1">
-                <h1>
-                    <a href="../../../index.html">All files</a> Forms/TextInputSelect/InputSelect
-                </h1>
-                <div class="clearfix">
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">95% </span>
-                        <span class="quiet">Statements</span>
-                        <span class="fraction">19/20</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">66.66% </span>
-                        <span class="quiet">Branches</span>
-                        <span class="fraction">6/9</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">100% </span>
-                        <span class="quiet">Functions</span>
-                        <span class="fraction">3/3</span>
-                    </div>
-
-                    <div class="fl pad1y space-right2">
-                        <span class="strong">100% </span>
-                        <span class="quiet">Lines</span>
-                        <span class="fraction">12/12</span>
-                    </div>
-                </div>
-                <p class="quiet">
-                    Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>,
-                    <em>p</em> or <em>k</em> for the previous block.
-                </p>
-                <template id="filterTemplate">
-                    <div class="quiet">
-                        Filter:
-                        <input oninput="onInput()" type="search" id="fileSearch" />
-                    </div>
-                </template>
-            </div>
-            <div class="status-line high"></div>
-            <div class="pad1">
-                <table class="coverage-summary">
-                    <thead>
-                        <tr>
-                            <th data-col="file" data-fmt="html" data-html="true" class="file">
-                                File
-                            </th>
-                            <th
-                                data-col="pic"
-                                data-type="number"
-                                data-fmt="html"
-                                data-html="true"
-                                class="pic"
-                            ></th>
-                            <th data-col="statements" data-type="number" data-fmt="pct" class="pct">
-                                Statements
-                            </th>
-                            <th
-                                data-col="statements_raw"
-                                data-type="number"
-                                data-fmt="html"
-                                class="abs"
-                            ></th>
-                            <th data-col="branches" data-type="number" data-fmt="pct" class="pct">
-                                Branches
-                            </th>
-                            <th
-                                data-col="branches_raw"
-                                data-type="number"
-                                data-fmt="html"
-                                class="abs"
-                            ></th>
-                            <th data-col="functions" data-type="number" data-fmt="pct" class="pct">
-                                Functions
-                            </th>
-                            <th
-                                data-col="functions_raw"
-                                data-type="number"
-                                data-fmt="html"
-                                class="abs"
-                            ></th>
-                            <th data-col="lines" data-type="number" data-fmt="pct" class="pct">
-                                Lines
-                            </th>
-                            <th
-                                data-col="lines_raw"
-                                data-type="number"
-                                data-fmt="html"
-                                class="abs"
-                            ></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td class="file high" data-value="InputSelect.tsx">
-                                <a href="InputSelect.tsx.html">InputSelect.tsx</a>
-                            </td>
-                            <td data-value="95" class="pic high">
-                                <div class="chart">
-                                    <div class="cover-fill" style="width: 95%"></div>
-                                    <div class="cover-empty" style="width: 5%"></div>
-                                </div>
-                            </td>
-                            <td data-value="95" class="pct high">95%</td>
-                            <td data-value="20" class="abs high">19/20</td>
-                            <td data-value="66.66" class="pct medium">66.66%</td>
-                            <td data-value="9" class="abs medium">6/9</td>
-                            <td data-value="100" class="pct high">100%</td>
-                            <td data-value="3" class="abs high">3/3</td>
-                            <td data-value="100" class="pct high">100%</td>
-                            <td data-value="12" class="abs high">12/12</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div class="push"></div>
-            <!-- for sticky footer -->
-        </div>
-        <!-- /wrapper -->
-        <div class="footer quiet pad2 space-top1 center small">
-            Code coverage generated by
-            <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer"
-                >istanbul</a
-            >
-            at Wed Feb 23 2022 16:23:07 GMT-0500 (Eastern Standard Time)
-        </div>
-        <script src="../../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../../sorter.js"></script>
-        <script src="../../../block-navigation.js"></script>
-    </body>
-</html>