@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/components/common/InputTable.js

@@ -2,7 +2,7 @@
  * Copyright 2017 - 2020 by ChartIQ, Inc.
  * All rights reserved.
  */
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import { ButtonIcon } from "./ButtonIcon";
 const isLastRowEmpty = (arr) => {
     const lastRow = arr[arr.length - 1];
@@ -14,24 +14,31 @@ const isLastRowEmpty = (arr) => {
 };
 const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
 const emptyRow = (colCount) => Array(colCount).fill("").slice(0);
-export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
-    const [data, setData] = useState(startingData !== null && startingData !== void 0 ? startingData : [emptyRow(tableHeaders.length)]);
+/***
+ * A table full on input fields. It auto-grows as users use it, and it provides "Remove row" functionality.
+ * The number of columns in the table is determined by the number of table headers provided, which are required.
+ * @param {string|JSX} tableHeaders The headers at the top of each column
+ * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.
+ * @param {string[][]} [data] Initial data for the table
+ */
+export const InputTable = ({ tableHeaders, setData, data }) => {
     const rowCount = data.length;
-    const doSetData = (newData) => {
-        setData(newData);
-        onUpdate(newData);
-    };
     const addRow = () => {
-        doSetData(data.concat([emptyRow(tableHeaders.length)]));
+        setData(data.concat([emptyRow(tableHeaders.length)]));
     };
     const deleteRow = (rowIndex) => {
         const newData = data.splice(0);
         newData.splice(rowIndex, 1);
-        doSetData(newData);
+        setData(newData);
     };
-    if (rowCount === 0 || !isLastRowEmpty(data)) {
-        addRow();
-    }
+    useEffect(() => {
+        if (data.length === 0) {
+            setData([emptyRow(tableHeaders.length)]);
+        }
+        if (!isLastRowEmpty(data)) {
+            addRow();
+        }
+    }, [data]);
     return (React.createElement("table", { className: "inputTable" },
         React.createElement("thead", null,
             React.createElement("tr", null, tableHeaders.map((th, index) => (React.createElement("th", { scope: "col", key: `th-${index}` }, th))))),
@@ -40,7 +47,7 @@ export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
                 React.createElement("input", { type: "text", id: `input-${rowNumber}-${colNumber}`, value: td, onChange: (e) => {
                         const newData = deepCopy(data);
                         newData[rowNumber][colNumber] = e.target.value;
-                        doSetData(newData);
+                        setData(newData);
                     } })))),
             rowNumber < rowCount - 1 && (React.createElement("td", null,
                 React.createElement(ButtonIcon, { icon: "times", text: "Remove row", onClick: () => {

package/react/components/common/InputTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tonUpdate: (data: string[][]) => void;\n\tstartingData?: (string | undefined)[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [startingData] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, onUpdate, startingData }: InputTableProps) => {\n\tconst [data, setData] = useState<string[][]>(startingData ?? [emptyRow(tableHeaders.length)]);\n\tconst rowCount = data.length;\n\n\tconst doSetData = (newData: string[][]) => {\n\t\tsetData(newData);\n\t\tonUpdate(newData);\n\t};\n\n\tconst addRow = () => {\n\t\tdoSetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tdoSetData(newData);\n\t};\n\n\tif (rowCount === 0 || !isLastRowEmpty(data)) {\n\t\taddRow();\n\t}\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tdoSetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}
+{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useEffect } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tsetData: (data: string[][]) => void;\n\tdata: string[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [data] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, setData, data }: InputTableProps) => {\n\tconst rowCount = data.length;\n\n\tconst addRow = () => {\n\t\tsetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tsetData(newData);\n\t};\n\n\tuseEffect(() => {\n\t\tif (data.length === 0) {\n\t\t\tsetData([emptyRow(tableHeaders.length)]);\n\t\t}\n\t\tif (!isLastRowEmpty(data)) {\n\t\t\taddRow();\n\t\t}\n\t}, [data]);\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tsetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}

package/react/components/common/Tab.js

@@ -7,21 +7,52 @@ import "./css/tab.css";
 export const Tab = ({ children, autofocus }) => {
     const [selectedTab, setSelectedTab] = useState(autofocus || 0);
     const ref = useRef(null);
+    const tabList = useRef(null);
     useLayoutEffect(() => {
         var _a;
+        // Allow for the tab panel content to look nice with its own scrollbar,
+        // which also keeps the heading/tab group at the top of the page.
+        // It feels like css flex should do this, but I could never get it to work.
         if (ref.current !== null) {
             ref.current.style.height = `${window.innerHeight - (((_a = ref.current.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) || 0) - 10}px`;
         }
     });
+    const changeTab = (fromKey, direction) => {
+        var _a, _b;
+        const tabReferences = (_a = tabList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='tab']");
+        if (tabReferences === undefined) {
+            return;
+        }
+        if (fromKey === tabReferences.length) {
+            return;
+        }
+        (_b = tabReferences[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist" }, React.Children.map(children, (tab, key) => React.isValidElement(tab) && (React.createElement("div", { key: `tab-${key}`, role: "tab", "aria-selected": selectedTab === key, "aria-controls": `tabpanel-${key}`, tabIndex: 0, onKeyDown: (e) => {
-                if (e.key === " " || e.key === "Enter") {
-                    setSelectedTab(key);
-                    e.preventDefault();
+        React.createElement("div", { className: "horizontal-tabs", role: "tablist", ref: tabList }, React.Children.map(children, (tab, key) => React.isValidElement(tab) && (React.createElement("div", { key: `tab-${key}`, role: "tab", "aria-selected": selectedTab === key, "aria-controls": `tabpanel-${key}`, tabIndex: selectedTab === key ? 0 : -1, onKeyDown: (e) => {
+                switch (e.key) {
+                    case "Enter":
+                    case " ": {
+                        setSelectedTab(key);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowRight": {
+                        changeTab(key, 1);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowLeft": {
+                        changeTab(key, -1);
+                        e.preventDefault();
+                        break;
+                    }
+                    default: {
+                    }
                 }
             }, onClick: () => {
                 setSelectedTab(key);
             } }, tab.props["data-label"])))),
-        React.createElement("div", { id: "tabpanelContainer", ref: ref }, React.Children.map(children, (tab, key) => (React.createElement("div", { key: `tabpanel-${key}`, role: "tabpanel", id: `tabpanel-${key}`, className: selectedTab === key ? "visible" : "" }, tab))))));
+        React.createElement("div", { className: "horizontal-tabs", id: "tabpanelContainer", ref: ref }, React.Children.map(children, (tab, key) => (React.createElement("div", { key: `tabpanel-${key}`, role: "tabpanel", id: `tabpanel-${key}`, className: selectedTab === key ? "visible" : "" }, tab))))));
 };
 //# sourceMappingURL=Tab.js.map

package/react/components/common/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmC,MAAM,OAAO,CAAC;AAClG,OAAO,eAAe,CAAC;AAOvB,MAAM,CAAC,MAAM,GAAG,GAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;;QAIpB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,0CAAE,GAAG,KAAI,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC;SAC5G;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,CACN;QACC,6BAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAClB,QAAQ,EACR,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAC5B,6BACC,GAAG,EAAE,OAAO,GAAG,EAAE,EACjB,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,GAAG,mBACnB,YAAY,GAAG,EAAE,EAChC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACvC,cAAc,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACnB;YACF,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,IAEC,GAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,CACrC,CACN,CACF,CACI;QAEN,6BAAK,EAAE,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,IAClC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,6BACC,GAAG,EAAE,YAAY,GAAG,EAAE,EACtB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,GAAG,EAAE,EACrB,SAAS,EAAE,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAE9C,GAAG,CACC,CACN,CAAC,CACG,CACJ,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\nimport \"./css/tab.css\";\n\nexport type TabProps = {\n\tchildren?: React.ReactNode;\n\tautofocus?: number;\n};\n\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tuseLayoutEffect(() => {\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\n\t\t// which also keeps the heading/tab group at the top of the page.\n\t\t// It feels like css flex should do this, but I could never get it to work.\n\t\tif (ref.current !== null) {\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\n\t\t}\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div role=\"tablist\">\n\t\t\t\t{React.Children.map(\n\t\t\t\t\tchildren,\n\t\t\t\t\t(tab, key) =>\n\t\t\t\t\t\tReact.isValidElement(tab) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\n\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\tif (e.key === \" \" || e.key === \"Enter\") {\n\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div id=\"tabpanelContainer\" ref={ref}>\n\t\t\t\t{React.Children.map(children, (tab, key) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\tid={`tabpanel-${key}`}\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tab}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\nimport \"./css/tab.css\";\n\nexport type TabProps = {\n\tchildren?: React.ReactNode;\n\tautofocus?: number;\n};\n\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst tabList = useRef<HTMLDivElement>(null);\n\n\tuseLayoutEffect(() => {\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\n\t\t// which also keeps the heading/tab group at the top of the page.\n\t\t// It feels like css flex should do this, but I could never get it to work.\n\t\tif (ref.current !== null) {\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\n\t\t}\n\t});\n\n\tconst changeTab = (fromKey: number, direction: 1 | -1) => {\n\t\tconst tabReferences = tabList.current?.querySelectorAll(\"[role='tab']\") as NodeListOf<HTMLElement> | undefined;\n\t\tif (tabReferences === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (fromKey === tabReferences.length) {\n\t\t\treturn;\n\t\t}\n\n\t\ttabReferences[fromKey + direction]?.focus();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"horizontal-tabs\" role=\"tablist\" ref={tabList}>\n\t\t\t\t{React.Children.map(\n\t\t\t\t\tchildren,\n\t\t\t\t\t(tab, key) =>\n\t\t\t\t\t\tReact.isValidElement(tab) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\n\t\t\t\t\t\t\t\ttabIndex={selectedTab === key ? 0 : -1}\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\tswitch (e.key) {\n\t\t\t\t\t\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\t\t\t\t\t\tcase \" \": {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcase \"ArrowRight\": {\n\t\t\t\t\t\t\t\t\t\t\tchangeTab(key, 1);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcase \"ArrowLeft\": {\n\t\t\t\t\t\t\t\t\t\t\tchangeTab(key, -1);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdefault: {\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"horizontal-tabs\" id=\"tabpanelContainer\" ref={ref}>\n\t\t\t\t{React.Children.map(children, (tab, key) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\tid={`tabpanel-${key}`}\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tab}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}

package/react/components/common/TimeSelect.js

@@ -7,12 +7,16 @@ const DEFAULT_VALUE = {
     meridiem: "AM",
 };
 export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onChange, className = "", minuteInterval = 15, }) => {
+    /**
+     * Prevents change event from triggering on initial setup
+     */
     const [changed, setChanged] = useState(false);
     const [time, setTime] = useState(initialTime !== null && initialTime !== void 0 ? initialTime : DEFAULT_VALUE);
     let wrapClasses = `time-select ${className}`;
     if (!enabled) {
         wrapClasses = `${wrapClasses} disabled-time-select`;
     }
+    // Create an array 1-12.
     let HOURS = [];
     for (let i = 1; i < 13; i++) {
         HOURS.push(i);
@@ -23,6 +27,12 @@ export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onCha
             MINUTES.push(i);
         }
     }
+    /**
+     * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.
+     * e.g., 8PM (20) => 8AM (8).
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
     const setHour = (e) => {
         let hour = Number(e);
         if (hour < 12 && time.meridiem === "PM") {
@@ -36,11 +46,19 @@ export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onCha
         }
         setTime(Object.assign(Object.assign({}, time), { hour }));
     };
+    /**
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
     const setMinute = (e) => {
         const minute = Number(e);
         time.minute = minute;
         setTime(Object.assign(Object.assign({}, time), { minute }));
     };
+    /**
+     * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook
+     * @param {event} e
+     */
     const setMeridiem = (e) => {
         const meridiem = e;
         setTime(Object.assign(Object.assign({}, time), { meridiem }));
@@ -54,9 +72,15 @@ export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onCha
             setMeridiem(localMeridiem);
         }
     };
+    /**
+     * The meridiem has changed, update the hour
+     */
     useEffect(() => {
         setHour(time.hour);
     }, [time.meridiem]);
+    /**
+     * Call on change when the hour and minute values have changed
+     */
     useEffect(() => {
         correctMeridiem();
         if (enabled && onChange && changed) {
@@ -94,10 +118,17 @@ export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onCha
             return time.hour;
         }
     };
+    const getDisplayMinute = () => {
+        if (time.minute === 0)
+            return "00";
+        else {
+            return String(time.minute).length === 1 ? `0${time.minute}` : time.minute;
+        }
+    };
     return (React.createElement("div", { className: wrapClasses, style: { display: "flex" } },
         React.createElement("span", { className: "time-select-label" }, label),
         React.createElement("div", { className: "row-section", style: { width: "10px", marginRight: "40px" } },
-            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, defaultSelection: {
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, buttonLabel: `Hour, ${getDisplayHour().toString()}`, defaultSelection: {
                     optionLabel: getDisplayHour().toString(),
                     optionValue: getDisplayHour(),
                     clickHandler: () => {
@@ -106,8 +137,8 @@ export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onCha
                 }, enabled: enabled })),
         React.createElement("div", { className: "row-section", style: { marginLeft: 30, marginRight: 10, marginTop: 5 } }, "\u00A0:\u00A0"),
         React.createElement("div", { style: { width: "10px", marginRight: "65px" } },
-            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, defaultSelection: {
-                    optionLabel: (time.minute === 0 ? "00" : time.minute),
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, buttonLabel: `Minute, ${getDisplayMinute()}`, defaultSelection: {
+                    optionLabel: getDisplayMinute(),
                     optionValue: time.minute,
                     clickHandler: () => {
                         setMinute(time.minute);

package/react/components/common/TimeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../src/components/common/TimeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/time-select.css\";\nimport DefaultDropdownButton from \"../shared/DefaultDropdownButton\";\n\nexport interface TimeSelectProps {\n\tlabel?: string;\n\tinitialTime?: TimeSelectTime;\n\tonChange?: (time: TimeSelectTime) => void;\n\tenabled?: boolean;\n\tclassName?: string;\n\tminuteInterval?: number;\n}\n\nexport type TimeSelectTime = {\n\thour: number;\n\tminute: number;\n\tmeridiem?: string;\n};\n\nconst DEFAULT_VALUE: TimeSelectTime = {\n\thour: 4,\n\tminute: 0,\n\tmeridiem: \"AM\",\n};\n\nexport const TimeSelect: React.FunctionComponent<TimeSelectProps> = ({\n\tinitialTime,\n\tenabled = true,\n\tlabel = \"Time:\",\n\tonChange,\n\tclassName = \"\",\n\tminuteInterval = 15,\n}) => {\n\t/**\n\t * Prevents change event from triggering on initial setup\n\t */\n\tconst [changed, setChanged] = useState<boolean>(false);\n\tconst [time, setTime] = useState<TimeSelectTime>(initialTime ?? DEFAULT_VALUE);\n\n\tlet wrapClasses = `time-select ${className}`;\n\tif (!enabled) {\n\t\twrapClasses = `${wrapClasses} disabled-time-select`;\n\t}\n\n\t// Create an array 1-12.\n\tlet HOURS: Array<number> = [];\n\tfor (let i = 1; i < 13; i++) {\n\t\tHOURS.push(i);\n\t}\n\n\tlet MINUTES: any = [\"00\"];\n\tfor (let i = 1; i < 60; i++) {\n\t\tif (i % minuteInterval == 0) {\n\t\t\tMINUTES.push(i);\n\t\t}\n\t}\n\n\t/**\n\t * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.\n\t * e.g., 8PM (20) => 8AM (8).\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setHour = (e: any) => {\n\t\tlet hour = Number(e);\n\t\tif (hour < 12 && time.meridiem === \"PM\") {\n\t\t\thour = hour + 12;\n\t\t} else if (hour > 12 && time.meridiem === \"AM\") {\n\t\t\thour = hour - 12;\n\t\t} else if (time.meridiem === \"AM\" && hour === 12) {\n\t\t\thour = 0;\n\t\t}\n\n\t\tsetTime({ ...time, hour });\n\t};\n\n\t/**\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setMinute = (e: any) => {\n\t\tconst minute = Number(e);\n\t\ttime.minute = minute;\n\t\tsetTime({ ...time, minute });\n\t};\n\n\t/**\n\t * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook\n\t * @param {event} e\n\t */\n\tconst setMeridiem = (e: any) => {\n\t\tconst meridiem = e;\n\t\tsetTime({ ...time, meridiem });\n\t};\n\n\tconst correctMeridiem = () => {\n\t\tif (!time.meridiem) {\n\t\t\tlet localMeridiem = \"AM\";\n\t\t\tif (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {\n\t\t\t\tlocalMeridiem = \"PM\";\n\t\t\t}\n\t\t\tsetMeridiem(localMeridiem);\n\t\t}\n\t};\n\n\t/**\n\t * The meridiem has changed, update the hour\n\t */\n\tuseEffect(() => {\n\t\tsetHour(time.hour);\n\t}, [time.meridiem]);\n\n\t/**\n\t * Call on change when the hour and minute values have changed\n\t */\n\tuseEffect(() => {\n\t\tcorrectMeridiem();\n\t\tif (enabled && onChange && changed) {\n\t\t\tonChange(time);\n\t\t}\n\t}, [time.hour, time.minute]);\n\n\tconst hourOptions: Array<any> = HOURS.map((hour: number) => {\n\t\treturn {\n\t\t\toptionLabel: hour,\n\t\t\toptionValue: hour,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetHour(hour);\n\t\t\t},\n\t\t};\n\t});\n\tconst minuteOptions: Array<any> = MINUTES.map((minute: any) => {\n\t\treturn {\n\t\t\toptionLabel: minute,\n\t\t\toptionValue: minute,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetMinute(minute);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst getDisplayHour = () => {\n\t\tif (time.meridiem === \"AM\" && time.hour === 0) {\n\t\t\treturn 12;\n\t\t} else if (time.meridiem === \"PM\" && time.hour > 12) {\n\t\t\treturn time.hour - 12;\n\t\t} else {\n\t\t\treturn time.hour;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={wrapClasses} style={{ display: \"flex\" }}>\n\t\t\t<span className=\"time-select-label\">{label}</span>\n\t\t\t{/* HOURS */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\", marginRight: \"40px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={hourOptions}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayHour().toString(),\n\t\t\t\t\t\toptionValue: getDisplayHour(),\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(getDisplayHour());\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"row-section\" style={{ marginLeft: 30, marginRight: 10, marginTop: 5 }}>\n\t\t\t\t&nbsp;:&nbsp;\n\t\t\t</div>\n\t\t\t{/* MINUTES */}\n\t\t\t<div style={{ width: \"10px\", marginRight: \"65px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={minuteOptions}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: (time.minute === 0 ? \"00\" : time.minute) as string,\n\t\t\t\t\t\toptionValue: time.minute,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetMinute(time.minute);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t&nbsp;\n\t\t\t{/* MERIDIEM */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"AM\",\n\t\t\t\t\t\t\toptionValue: \"AM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"AM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"PM\",\n\t\t\t\t\t\t\toptionValue: \"PM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"PM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: time.meridiem as string,\n\t\t\t\t\t\toptionValue: time.meridiem,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(time.meridiem);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../src/components/common/TimeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/time-select.css\";\nimport DefaultDropdownButton from \"../shared/DefaultDropdownButton\";\n\nexport interface TimeSelectProps {\n\tlabel?: string;\n\tinitialTime?: TimeSelectTime;\n\tonChange?: (time: TimeSelectTime) => void;\n\tenabled?: boolean;\n\tclassName?: string;\n\tminuteInterval?: number;\n}\n\nexport type TimeSelectTime = {\n\thour: number;\n\tminute: number;\n\tmeridiem?: string;\n};\n\nconst DEFAULT_VALUE: TimeSelectTime = {\n\thour: 4,\n\tminute: 0,\n\tmeridiem: \"AM\",\n};\n\nexport const TimeSelect: React.FunctionComponent<TimeSelectProps> = ({\n\tinitialTime,\n\tenabled = true,\n\tlabel = \"Time:\",\n\tonChange,\n\tclassName = \"\",\n\tminuteInterval = 15,\n}) => {\n\t/**\n\t * Prevents change event from triggering on initial setup\n\t */\n\tconst [changed, setChanged] = useState<boolean>(false);\n\tconst [time, setTime] = useState<TimeSelectTime>(initialTime ?? DEFAULT_VALUE);\n\n\tlet wrapClasses = `time-select ${className}`;\n\tif (!enabled) {\n\t\twrapClasses = `${wrapClasses} disabled-time-select`;\n\t}\n\n\t// Create an array 1-12.\n\tlet HOURS: Array<number> = [];\n\tfor (let i = 1; i < 13; i++) {\n\t\tHOURS.push(i);\n\t}\n\n\tlet MINUTES: any = [\"00\"];\n\tfor (let i = 1; i < 60; i++) {\n\t\tif (i % minuteInterval == 0) {\n\t\t\tMINUTES.push(i);\n\t\t}\n\t}\n\n\t/**\n\t * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.\n\t * e.g., 8PM (20) => 8AM (8).\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setHour = (e: any) => {\n\t\tlet hour = Number(e);\n\t\tif (hour < 12 && time.meridiem === \"PM\") {\n\t\t\thour = hour + 12;\n\t\t} else if (hour > 12 && time.meridiem === \"AM\") {\n\t\t\thour = hour - 12;\n\t\t} else if (time.meridiem === \"AM\" && hour === 12) {\n\t\t\thour = 0;\n\t\t}\n\n\t\tsetTime({ ...time, hour });\n\t};\n\n\t/**\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setMinute = (e: any) => {\n\t\tconst minute = Number(e);\n\t\ttime.minute = minute;\n\t\tsetTime({ ...time, minute });\n\t};\n\n\t/**\n\t * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook\n\t * @param {event} e\n\t */\n\tconst setMeridiem = (e: any) => {\n\t\tconst meridiem = e;\n\t\tsetTime({ ...time, meridiem });\n\t};\n\n\tconst correctMeridiem = () => {\n\t\tif (!time.meridiem) {\n\t\t\tlet localMeridiem = \"AM\";\n\t\t\tif (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {\n\t\t\t\tlocalMeridiem = \"PM\";\n\t\t\t}\n\t\t\tsetMeridiem(localMeridiem);\n\t\t}\n\t};\n\n\t/**\n\t * The meridiem has changed, update the hour\n\t */\n\tuseEffect(() => {\n\t\tsetHour(time.hour);\n\t}, [time.meridiem]);\n\n\t/**\n\t * Call on change when the hour and minute values have changed\n\t */\n\tuseEffect(() => {\n\t\tcorrectMeridiem();\n\t\tif (enabled && onChange && changed) {\n\t\t\tonChange(time);\n\t\t}\n\t}, [time.hour, time.minute]);\n\n\tconst hourOptions: Array<any> = HOURS.map((hour: number) => {\n\t\treturn {\n\t\t\toptionLabel: hour,\n\t\t\toptionValue: hour,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetHour(hour);\n\t\t\t},\n\t\t};\n\t});\n\tconst minuteOptions: Array<any> = MINUTES.map((minute: any) => {\n\t\treturn {\n\t\t\toptionLabel: minute,\n\t\t\toptionValue: minute,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetMinute(minute);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst getDisplayHour = () => {\n\t\tif (time.meridiem === \"AM\" && time.hour === 0) {\n\t\t\treturn 12;\n\t\t} else if (time.meridiem === \"PM\" && time.hour > 12) {\n\t\t\treturn time.hour - 12;\n\t\t} else {\n\t\t\treturn time.hour;\n\t\t}\n\t};\n\n\tconst getDisplayMinute = () => {\n\t\tif (time.minute === 0) return \"00\";\n\t\telse {\n\t\t\treturn String(time.minute).length === 1 ? `0${time.minute}` : time.minute;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={wrapClasses} style={{ display: \"flex\" }}>\n\t\t\t<span className=\"time-select-label\">{label}</span>\n\t\t\t{/* HOURS */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\", marginRight: \"40px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={hourOptions}\n\t\t\t\t\tbuttonLabel={`Hour, ${getDisplayHour().toString()}`}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayHour().toString(),\n\t\t\t\t\t\toptionValue: getDisplayHour(),\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(getDisplayHour());\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"row-section\" style={{ marginLeft: 30, marginRight: 10, marginTop: 5 }}>\n\t\t\t\t&nbsp;:&nbsp;\n\t\t\t</div>\n\t\t\t{/* MINUTES */}\n\t\t\t<div style={{ width: \"10px\", marginRight: \"65px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={minuteOptions}\n\t\t\t\t\tbuttonLabel={`Minute, ${getDisplayMinute() as string}`}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayMinute() as string,\n\t\t\t\t\t\toptionValue: time.minute,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetMinute(time.minute);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t&nbsp;\n\t\t\t{/* MERIDIEM */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"AM\",\n\t\t\t\t\t\t\toptionValue: \"AM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"AM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"PM\",\n\t\t\t\t\t\t\toptionValue: \"PM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"PM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: time.meridiem as string,\n\t\t\t\t\t\toptionValue: time.meridiem,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(time.meridiem);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/Tooltip.js

@@ -7,6 +7,8 @@ import "./css/tooltip.css";
 import { FinsembleIcon } from "./FinsembleIcon";
 export const Tooltip = ({ type = "info", position = "right", children = "", altClassName, onClick = () => { }, }) => {
     const [tooltipOpen, setTooltipOpen] = useState(false);
+    // If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.
+    // This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.
     const tooltipContentRef = useRef(null);
     const pos = tooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth
         ? "left"

package/react/components/common/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAItD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,MAAM,6BAA6B,GAClC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACjB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CAAC;IACH,MAAM,oBAAoB,GACzB,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,CACH,6BAA6B,CAC7B,CAAC;IAEH,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,oBAAoB,CAAO,CAChG;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef } from \"react\";\nimport \"./css/tooltip.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport type TooltipProps = {\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\n\taltClassName?: string;\n\tposition?: string;\n\tchildren?: string;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nexport const Tooltip = ({\n\ttype = \"info\",\n\tposition = \"right\",\n\tchildren = \"\",\n\taltClassName,\n\tonClick = () => {},\n}: TooltipProps) => {\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\n\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\n\tconst pos =\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\n\t\t\t? \"left\"\n\t\t\t: position;\n\n\tconst FinsembleIconLockedOrQuestion =\n\t\ttype === \"lock\" ? (\n\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\n\t\t) : (\n\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\n\t\t);\n\tconst FinsembleIconForType =\n\t\ttype === \"error\" || type === \"warn\" ? (\n\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\n\t\t) : (\n\t\t\tFinsembleIconLockedOrQuestion\n\t\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\n\t\t\ttabIndex={0}\n\t\t\trole=\"tooltip\"\n\t\t\taria-label={children}\n\t\t\tonMouseOver={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonFocus={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonBlur={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{altClassName ? (\n\t\t\t\t<div className={altClassName}></div>\n\t\t\t) : (\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>{FinsembleIconForType}</div>\n\t\t\t)}\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,mHAAmH;IACnH,wGAAwG;IACxG,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,MAAM,6BAA6B,GAClC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACjB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CAAC;IACH,MAAM,oBAAoB,GACzB,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,CACH,6BAA6B,CAC7B,CAAC;IAEH,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,oBAAoB,CAAO,CAChG;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef } from \"react\";\nimport \"./css/tooltip.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport type TooltipProps = {\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\n\taltClassName?: string;\n\tposition?: string;\n\tchildren?: string;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nexport const Tooltip = ({\n\ttype = \"info\",\n\tposition = \"right\",\n\tchildren = \"\",\n\taltClassName,\n\tonClick = () => {},\n}: TooltipProps) => {\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\n\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\n\tconst pos =\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\n\t\t\t? \"left\"\n\t\t\t: position;\n\n\tconst FinsembleIconLockedOrQuestion =\n\t\ttype === \"lock\" ? (\n\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\n\t\t) : (\n\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\n\t\t);\n\tconst FinsembleIconForType =\n\t\ttype === \"error\" || type === \"warn\" ? (\n\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\n\t\t) : (\n\t\t\tFinsembleIconLockedOrQuestion\n\t\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\n\t\t\ttabIndex={0}\n\t\t\trole=\"tooltip\"\n\t\t\taria-label={children}\n\t\t\tonMouseOver={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonFocus={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonBlur={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{altClassName ? (\n\t\t\t\t<div className={altClassName}></div>\n\t\t\t) : (\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>{FinsembleIconForType}</div>\n\t\t\t)}\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/css/FinsembleToggle.css

@@ -0,0 +1,22 @@
+.finsembleToggle {
+	background-color: var(--core-primary);
+	padding: 4px;
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label.disabled {
+	opacity: 0.5;
+}
+
+.finsembleToggle .toggle-text-label {
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="true"] {
+	background-color: var(--accent-primary-1);
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="false"]:focus,
+.finsembleToggle .toggle-text-label[aria-checked="false"]:hover {
+	background-color: var(--core-primary-3);
+}

package/react/components/common/css/accordion.css

@@ -54,43 +54,46 @@ input:checked ~ .accordion-content {
 /** Animations */
 .accordion.enter-active > button .accordion-caret {
 	animation-duration: 200ms;
-	animation-name: rotateIcon;
+	animation-name: rotate-icon;
 }
 
 .accordion.exit-active > button .accordion-caret {
 	animation-duration: 200ms;
-	animation-name: rotateIcon;
+	animation-name: rotate-icon;
 	animation-direction: reverse;
 }
 
 .accordion.enter-active > .accordion-content {
 	overflow: hidden;
 	animation-duration: 500ms;
-	animation-name: openContent;
+	animation-name: open-content;
 }
 
 .accordion.exit-active > .accordion-content {
+	/* stylelint-disable-next-line declaration-no-important */
 	display: block !important;
 	overflow: hidden;
 	animation-duration: 500ms;
-	animation-name: openContent;
+	animation-name: open-content;
 	animation-direction: reverse;
 	max-height: 0;
 }
 
-@keyframes rotateIcon {
+@keyframes rotate-icon {
 	from {
 		transform: rotate(-90deg) translate(0.1em);
 	}
+
 	to {
 		transform: rotate(0) translate(0, 0.2em);
 	}
 }
 
-@keyframes openContent {
+@keyframes open-content {
 	from {
 		max-height: 1px;
 	}
+
 	to {
 		max-height: 2000px;
 	}