@finsemble/finsemble-ui 7.0.1 → 7.1.0

package/react/components/icon/Icon.d.ts

@@ -1,9 +1,22 @@
 import * as React from "react";
 import { services } from "@finsemble/finsemble-api";
 declare type IconDescriptor = services.window.types.IconDescriptor;
+/**
+ * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.
+ * @param config A finsemble icon config entry as derived by the launcher (e.g. "icons.toolBar", "icons.taskbar" or  "icons.titleBar")
+ * @param title The title for the icon
+ */
 export declare const iconFromConfig: (config: any, title: string, appD: any) => IconDescriptor;
 declare type IconProps = IconDescriptor & {
     className?: string;
 };
+/**
+ * An icon to accompany Finsemble components or workspaces.
+ * @param {string} [imageType] - "fonticon" | "url" | "initials" - Determines how the icon is generated.
+ * @param {string} [path] - The path of the image.
+ * @param {string} [name] - Used if imageType is "initials" to generate a text based icon.
+ * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.
+ * @param {string} [className] - Optional class to be appended.
+ */
 export declare const Icon: React.FunctionComponent<Partial<IconProps>>;
 export {};

package/react/components/icon/Icon.js

@@ -1,4 +1,9 @@
 import * as React from "react";
+/**
+ * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.
+ * @param config A finsemble icon config entry as derived by the launcher (e.g. "icons.toolBar", "icons.taskbar" or  "icons.titleBar")
+ * @param title The title for the icon
+ */
 export const iconFromConfig = (config, title, appD) => {
     var _a;
     if (((_a = appD === null || appD === void 0 ? void 0 : appD.icons) === null || _a === void 0 ? void 0 : _a.length) > 0 && appD.icons[0].src) {
@@ -7,11 +12,13 @@ export const iconFromConfig = (config, title, appD) => {
             path: appD.icons[0].src,
         };
     }
+    // Our default icon. The <Icon> component can generate an "initials" icon based just off of the `name`
     const defaultIcon = {
         imageType: "initials",
         name: title,
         category: "Application",
     };
+    // Use iconography if available in the app's icon config entry
     if (config === null || config === void 0 ? void 0 : config.iconClass) {
         return {
             imageType: "fonticon",
@@ -36,17 +43,32 @@ const deriveClasses = (imageType, className = "") => {
     }
     return classes;
 };
+/**
+ * Derives two initials from a given name based on some simple heuristics.
+ */
 const avatarInitialsFromName = (name) => {
+    // Significant words are over three characters
     const significantWords = name
         .toUpperCase()
         .split(" ")
         .flatMap((str) => (str.length > 3 ? [str] : []));
+    // If no significant words then just return first two characters of the original name
     if (significantWords.length === 0)
         return name.substr(0, 2);
+    // If only one significant word then return its first two characters
     if (significantWords.length === 1)
         return significantWords[0].substr(0, 2);
+    // Return the first character of the first two significant words
     return significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));
 };
+/**
+ * An icon to accompany Finsemble components or workspaces.
+ * @param {string} [imageType] - "fonticon" | "url" | "initials" - Determines how the icon is generated.
+ * @param {string} [path] - The path of the image.
+ * @param {string} [name] - Used if imageType is "initials" to generate a text based icon.
+ * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.
+ * @param {string} [className] - Optional class to be appended.
+ */
 export const Icon = (props) => {
     var _a, _b;
     let avatar;
@@ -64,4 +86,16 @@ export const Icon = (props) => {
     const classes = deriveClasses(imageType, props.className);
     return (React.createElement("div", { className: classes, "data-category": props.category }, avatar));
 };
+/*
+export const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {
+    let className = "";
+    if(props.category == "Application")
+        className=`entity-component ${props.className}`;
+    if(props.category == "Workspace")
+        className=`entity-workspace ${props.className}`;
+    return (
+        <Icon {...props} {...className} />
+    )
+}
+*/
 //# sourceMappingURL=Icon.js.map

package/react/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\n/**\n * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\n * @param config A finsemble icon config entry as derived by the launcher (e.g. \"icons.toolBar\", \"icons.taskbar\" or  \"icons.titleBar\")\n * @param title The title for the icon\n */\nexport const iconFromConfig = (config: any, title: string, appD: any): IconDescriptor => {\n\tif (appD?.icons?.length > 0 && appD.icons[0].src) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: appD.icons[0].src,\n\t\t};\n\t}\n\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\n\tconst defaultIcon: IconDescriptor = {\n\t\timageType: \"initials\",\n\t\tname: title,\n\t\tcategory: \"Application\",\n\t};\n\n\t// Use iconography if available in the app's icon config entry\n\tif (config?.iconClass) {\n\t\treturn {\n\t\t\timageType: \"fonticon\",\n\t\t\tpath: config.iconClass,\n\t\t};\n\t}\n\tif (config?.iconURL) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: config.iconURL,\n\t\t};\n\t}\n\treturn defaultIcon;\n};\n\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\n\tlet classes = `icon-avatar-wrapper ${className}`;\n\tif (imageType === \"url\") {\n\t\tclasses = `${classes} entity-with-img`;\n\t} else {\n\t\tclasses = `${classes} icon-avatar`;\n\t}\n\treturn classes;\n};\n\ntype IconProps = IconDescriptor & {\n\tclassName?: string;\n};\n\n/**\n * Derives two initials from a given name based on some simple heuristics.\n */\nconst avatarInitialsFromName = (name: string): string => {\n\t// Significant words are over three characters\n\tconst significantWords = name\n\t\t.toUpperCase()\n\t\t.split(\" \")\n\t\t.flatMap((str) => (str.length > 3 ? [str] : []));\n\n\t// If no significant words then just return first two characters of the original name\n\tif (significantWords.length === 0) return name.substr(0, 2);\n\n\t// If only one significant word then return its first two characters\n\tif (significantWords.length === 1) return significantWords[0].substr(0, 2);\n\n\t// Return the first character of the first two significant words\n\treturn significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));\n};\n\n/**\n * An icon to accompany Finsemble components or workspaces.\n * @param {string} [imageType] - \"fonticon\" | \"url\" | \"initials\" - Determines how the icon is generated.\n * @param {string} [path] - The path of the image.\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\n * @param {string} [className] - Optional class to be appended.\n */\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\n\tlet avatar;\n\tif (props.imageType === \"initials\") {\n\t\tconst name = props.name ?? \"\";\n\t\tavatar = <span>{avatarInitialsFromName(name)}</span>;\n\t}\n\tif (props.imageType === \"fonticon\") {\n\t\tavatar = <i className={props.path}></i>;\n\t}\n\tif (props.imageType === \"url\") {\n\t\tavatar = <img src={props.path} />;\n\t}\n\tconst imageType = props.imageType ?? \"initials\";\n\tconst classes = deriveClasses(imageType, props.className);\n\n\treturn (\n\t\t<div className={classes} data-category={props.category}>\n\t\t\t{avatar}\n\t\t</div>\n\t);\n};\n\n/*\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\n\tlet className = \"\";\n\tif(props.category == \"Application\")\n\t\tclassName=`entity-component ${props.className}`;\n\tif(props.category == \"Workspace\")\n\t\tclassName=`entity-workspace ${props.className}`;\n\treturn (\n\t\t<Icon {...props} {...className} />\n\t)\n}\n*/\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\n/**\n * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\n * @param config A finsemble icon config entry as derived by the launcher (e.g. \"icons.toolBar\", \"icons.taskbar\" or  \"icons.titleBar\")\n * @param title The title for the icon\n */\nexport const iconFromConfig = (config: any, title: string, appD: any): IconDescriptor => {\n\tif (appD?.icons?.length > 0 && appD.icons[0].src) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: appD.icons[0].src,\n\t\t};\n\t}\n\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\n\tconst defaultIcon: IconDescriptor = {\n\t\timageType: \"initials\",\n\t\tname: title,\n\t\tcategory: \"Application\",\n\t};\n\n\t// Use iconography if available in the app's icon config entry\n\tif (config?.iconClass) {\n\t\treturn {\n\t\t\timageType: \"fonticon\",\n\t\t\tpath: config.iconClass,\n\t\t};\n\t}\n\tif (config?.iconURL) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: config.iconURL,\n\t\t};\n\t}\n\treturn defaultIcon;\n};\n\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\n\tlet classes = `icon-avatar-wrapper ${className}`;\n\tif (imageType === \"url\") {\n\t\tclasses = `${classes} entity-with-img`;\n\t} else {\n\t\tclasses = `${classes} icon-avatar`;\n\t}\n\treturn classes;\n};\n\ntype IconProps = IconDescriptor & {\n\tclassName?: string;\n};\n\n/**\n * Derives two initials from a given name based on some simple heuristics.\n */\nconst avatarInitialsFromName = (name: string): string => {\n\t// Significant words are over three characters\n\tconst significantWords = name\n\t\t.toUpperCase()\n\t\t.split(\" \")\n\t\t.flatMap((str) => (str.length > 3 ? [str] : []));\n\n\t// If no significant words then just return first two characters of the original name\n\tif (significantWords.length === 0) return name.substr(0, 2);\n\n\t// If only one significant word then return its first two characters\n\tif (significantWords.length === 1) return significantWords[0].substr(0, 2);\n\n\t// Return the first character of the first two significant words\n\treturn significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));\n};\n\n/**\n * An icon to accompany Finsemble components or workspaces.\n * @param {string} [imageType] - \"fonticon\" | \"url\" | \"initials\" - Determines how the icon is generated.\n * @param {string} [path] - The path of the image.\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\n * @param {string} [className] - Optional class to be appended.\n */\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\n\tlet avatar;\n\tif (props.imageType === \"initials\") {\n\t\tconst name = props.name ?? \"\";\n\t\tavatar = <span>{avatarInitialsFromName(name)}</span>;\n\t}\n\tif (props.imageType === \"fonticon\") {\n\t\tavatar = <i className={props.path}></i>;\n\t}\n\tif (props.imageType === \"url\") {\n\t\tavatar = <img src={props.path} />;\n\t}\n\tconst imageType = props.imageType ?? \"initials\";\n\tconst classes = deriveClasses(imageType, props.className);\n\n\treturn (\n\t\t<div className={classes} data-category={props.category}>\n\t\t\t{avatar}\n\t\t</div>\n\t);\n};\n\n/*\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\n\tlet className = \"\";\n\tif(props.category == \"Application\")\n\t\tclassName=`entity-component ${props.className}`;\n\tif(props.category == \"Workspace\")\n\t\tclassName=`entity-workspace ${props.className}`;\n\treturn (\n\t\t<Icon {...props} {...className} />\n\t)\n}\n*/\n"]}

package/react/components/legacyControls/FinsembleDialog.d.ts

@@ -11,4 +11,8 @@ export declare type FinsembleDialogProps = {
     className?: string;
     children?: any;
 };
+/**
+ * This is a component that adds some baked in behavior that is common accross several
+ * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.
+ */
 export declare const FinsembleDialog: React.FunctionComponent<FinsembleDialogProps>;

package/react/components/legacyControls/FinsembleDialog.js

@@ -4,9 +4,17 @@
  */
 import * as React from "react";
 const DIALOG_BASE_CLASS = "dialog";
+/**
+ * This is a component that adds some baked in behavior that is common accross several
+ * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.
+ */
 export const FinsembleDialog = (props) => {
     let { userInputTimeout, onShowRequested, isModal, className, children } = props;
     const handleKeyDown = (e) => {
+        // If the user hits escape then hide the window
+        // openerMessage won't be null if data is in transit to the originating window, in which
+        // case we bypass the hide() -- this is some sort of race condition from a long time ago
+        // that is not fully understood
         if (e.key === "Escape" && FSBL.Clients.DialogManager.openerMessage === null) {
             finsembleWindow.hide();
         }
@@ -17,10 +25,17 @@ export const FinsembleDialog = (props) => {
     if (typeof onShowRequested === "undefined") {
         throw new Error("No onShowRequested passed to FinsembleDialog. Pass onShowRequested as a property to the FinsembleDialog component.");
     }
+    /*if (typeof behaviorOnResponse === "undefined") {
+        behaviorOnResponse = "hide";
+    }*/
     if (typeof userInputTimeout === "undefined") {
         userInputTimeout = 10000;
     }
     FSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;
+    //FSBL.Clients.DialogManager.behaviorOnResponse = behaviorOnResponse;
+    /**
+     * Registers some event listeners the first time this component is rendered.
+     */
     React.useEffect(() => {
         document.body.addEventListener("keydown", handleKeyDown);
         document.body.className = `${document.body.className} dialog`;

package/react/components/legacyControls/FinsembleDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialog.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialog.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,iBAAiB,GAAG,QAAQ,CAAC;AAcnC,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,KAAU,EAAE,EAAE;IAC5F,IAAI,EAAE,gBAAgB,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QAK1C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5E,eAAe,CAAC,IAAI,EAAE,CAAC;SACvB;IACF,CAAC,CAAC;IAEF,eAAe,CAAC,cAAc,CAAC;QAC9B,WAAW,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,IAAI,OAAO,eAAe,KAAK,WAAW,EAAE;QAC3C,MAAM,IAAI,KAAK,CACd,oHAAoH,CACpH,CAAC;KACF;IAMD,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;QAC5C,gBAAgB,GAAG,KAAK,CAAC;KACzB;IAED,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAM/D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC;QAE9D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAEnE,IAAI,OAAO,EAAE;YACZ,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAChF,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;SACjF;QAED,OAAO,GAAG,EAAE;YACX,IAAI,OAAO,EAAE;gBACZ,eAAe,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBACnF,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;aACpF;QACF,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,GAAG,SAAS,IAAI,iBAAiB,EAAE,CAAC;IACpD,OAAO,6BAAK,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAO,CAAC;AAClD,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\nconst DIALOG_BASE_CLASS = \"dialog\";\nexport type FinsembleDialogProps = {\n\tbehaviorOnResponse?: \"close\" | \"hide\";\n\tuserInputTimeout?: number;\n\tonShowRequested?: (err: any, response: any) => void;\n\tisModal: boolean;\n\tclassName?: string;\n\tchildren?: any;\n};\n\n/**\n * This is a component that adds some baked in behavior that is common accross several\n * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.\n */\nexport const FinsembleDialog: React.FunctionComponent<FinsembleDialogProps> = (props: any) => {\n\tlet { userInputTimeout, onShowRequested, isModal, className, children } = props;\n\n\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t// If the user hits escape then hide the window\n\t\t// openerMessage won't be null if data is in transit to the originating window, in which\n\t\t// case we bypass the hide() -- this is some sort of race condition from a long time ago\n\t\t// that is not fully understood\n\t\tif (e.key === \"Escape\" && FSBL.Clients.DialogManager.openerMessage === null) {\n\t\t\tfinsembleWindow.hide();\n\t\t}\n\t};\n\n\tfinsembleWindow.setAlwaysOnTop({\n\t\talwaysOnTop: true,\n\t});\n\n\tif (typeof onShowRequested === \"undefined\") {\n\t\tthrow new Error(\n\t\t\t\"No onShowRequested passed to FinsembleDialog. Pass onShowRequested as a property to the FinsembleDialog component.\"\n\t\t);\n\t}\n\n\t/*if (typeof behaviorOnResponse === \"undefined\") {\n\t\tbehaviorOnResponse = \"hide\";\n\t}*/\n\n\tif (typeof userInputTimeout === \"undefined\") {\n\t\tuserInputTimeout = 10000;\n\t}\n\n\tFSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;\n\t//FSBL.Clients.DialogManager.behaviorOnResponse = behaviorOnResponse;\n\n\t/**\n\t * Registers some event listeners the first time this component is rendered.\n\t */\n\tReact.useEffect(() => {\n\t\tdocument.body.addEventListener(\"keydown\", handleKeyDown);\n\t\tdocument.body.className = `${document.body.className} dialog`;\n\n\t\tFSBL.Clients.DialogManager.registerDialogCallback(onShowRequested);\n\n\t\tif (isModal) {\n\t\t\tfinsembleWindow.addEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\n\t\t\tfinsembleWindow.addEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (isModal) {\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\n\t\t\t\tfinsembleWindow.removeEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst classes = `${className} ${DIALOG_BASE_CLASS}`;\n\treturn <div className={classes}>{children}</div>;\n};\n"]}
+{"version":3,"file":"FinsembleDialog.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialog.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,iBAAiB,GAAG,QAAQ,CAAC;AAUnC;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,KAAU,EAAE,EAAE;IAC5F,IAAI,EAAE,gBAAgB,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC1C,+CAA+C;QAC/C,wFAAwF;QACxF,wFAAwF;QACxF,+BAA+B;QAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5E,eAAe,CAAC,IAAI,EAAE,CAAC;SACvB;IACF,CAAC,CAAC;IAEF,eAAe,CAAC,cAAc,CAAC;QAC9B,WAAW,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,IAAI,OAAO,eAAe,KAAK,WAAW,EAAE;QAC3C,MAAM,IAAI,KAAK,CACd,oHAAoH,CACpH,CAAC;KACF;IAED;;OAEG;IAEH,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;QAC5C,gBAAgB,GAAG,KAAK,CAAC;KACzB;IAED,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC/D,qEAAqE;IAErE;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC;QAE9D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAEnE,IAAI,OAAO,EAAE;YACZ,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAChF,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;SACjF;QAED,OAAO,GAAG,EAAE;YACX,IAAI,OAAO,EAAE;gBACZ,eAAe,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBACnF,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;aACpF;QACF,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,GAAG,SAAS,IAAI,iBAAiB,EAAE,CAAC;IACpD,OAAO,6BAAK,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAO,CAAC;AAClD,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\nconst DIALOG_BASE_CLASS = \"dialog\";\nexport type FinsembleDialogProps = {\n\tbehaviorOnResponse?: \"close\" | \"hide\";\n\tuserInputTimeout?: number;\n\tonShowRequested?: (err: any, response: any) => void;\n\tisModal: boolean;\n\tclassName?: string;\n\tchildren?: any;\n};\n\n/**\n * This is a component that adds some baked in behavior that is common accross several\n * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.\n */\nexport const FinsembleDialog: React.FunctionComponent<FinsembleDialogProps> = (props: any) => {\n\tlet { userInputTimeout, onShowRequested, isModal, className, children } = props;\n\n\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t// If the user hits escape then hide the window\n\t\t// openerMessage won't be null if data is in transit to the originating window, in which\n\t\t// case we bypass the hide() -- this is some sort of race condition from a long time ago\n\t\t// that is not fully understood\n\t\tif (e.key === \"Escape\" && FSBL.Clients.DialogManager.openerMessage === null) {\n\t\t\tfinsembleWindow.hide();\n\t\t}\n\t};\n\n\tfinsembleWindow.setAlwaysOnTop({\n\t\talwaysOnTop: true,\n\t});\n\n\tif (typeof onShowRequested === \"undefined\") {\n\t\tthrow new Error(\n\t\t\t\"No onShowRequested passed to FinsembleDialog. Pass onShowRequested as a property to the FinsembleDialog component.\"\n\t\t);\n\t}\n\n\t/*if (typeof behaviorOnResponse === \"undefined\") {\n\t\tbehaviorOnResponse = \"hide\";\n\t}*/\n\n\tif (typeof userInputTimeout === \"undefined\") {\n\t\tuserInputTimeout = 10000;\n\t}\n\n\tFSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;\n\t//FSBL.Clients.DialogManager.behaviorOnResponse = behaviorOnResponse;\n\n\t/**\n\t * Registers some event listeners the first time this component is rendered.\n\t */\n\tReact.useEffect(() => {\n\t\tdocument.body.addEventListener(\"keydown\", handleKeyDown);\n\t\tdocument.body.className = `${document.body.className} dialog`;\n\n\t\tFSBL.Clients.DialogManager.registerDialogCallback(onShowRequested);\n\n\t\tif (isModal) {\n\t\t\tfinsembleWindow.addEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\n\t\t\tfinsembleWindow.addEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (isModal) {\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\n\t\t\t\tfinsembleWindow.removeEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst classes = `${className} ${DIALOG_BASE_CLASS}`;\n\treturn <div className={classes}>{children}</div>;\n};\n"]}

package/react/components/legacyControls/FinsembleDialogButton.d.ts

@@ -9,4 +9,7 @@ export declare type FinsembleDialogButtonProps = {
     show?: boolean;
     onClick?: Function;
 };
+/**
+ * Button that is rendered on a dialog.
+ */
 export declare const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps>;

package/react/components/legacyControls/FinsembleDialogButton.js

@@ -3,9 +3,14 @@
  * All rights reserved.
  */
 import * as React from "react";
+/**
+ * Button that is rendered on a dialog.
+ */
 export const FinsembleDialogButton = (props) => {
+    // Default size is medium.
     var _a, _b;
-    const size = (_a = props.buttonSize) !== null && _a !== void 0 ? _a : "md";
+    // [Julianna Langston, 2021-04-19] I don't think this is being used, since the css class `fsbl-button-md` doesn't exist anywhere. Candidate for removal, along with associated prop.
+    const size = (_a = props.buttonSize) !== null && _a !== void 0 ? _a : "md"; // `fsbl-button-md` css doesn't exist anywhere?
     const classes = `fsbl-button fsbl-button-${size} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`;
     return props.show !== false ? (React.createElement("div", { className: classes, onClick: props.onClick }, props.children)) : null;
 };

package/react/components/legacyControls/FinsembleDialogButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogButton.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogButton.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,CAAC,MAAM,qBAAqB,GAAwD,CAAC,KAAU,EAAE,EAAE;;IAIxG,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC;IACtC,MAAM,OAAO,GAAG,2BAA2B,IAAI,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,EAAE,CAAC;IAC3E,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAC7C,KAAK,CAAC,QAAQ,CACV,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\n\nexport type FinsembleDialogButtonProps = {\n\tbuttonSize?: string;\n\tclassName?: string;\n\tshow?: boolean;\n\tonClick?: Function;\n};\n\n/**\n * Button that is rendered on a dialog.\n */\nexport const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps> = (props: any) => {\n\t// Default size is medium.\n\n\t// [Julianna Langston, 2021-04-19] I don't think this is being used, since the css class `fsbl-button-md` doesn't exist anywhere. Candidate for removal, along with associated prop.\n\tconst size = props.buttonSize ?? \"md\"; // `fsbl-button-md` css doesn't exist anywhere?\n\tconst classes = `fsbl-button fsbl-button-${size} ${props.className ?? \"\"}`;\n\treturn props.show !== false ? (\n\t\t<div className={classes} onClick={props.onClick}>\n\t\t\t{props.children}\n\t\t</div>\n\t) : null;\n};\n"]}
+{"version":3,"file":"FinsembleDialogButton.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogButton.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAwD,CAAC,KAAU,EAAE,EAAE;IACxG,0BAA0B;;IAE1B,oLAAoL;IACpL,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC,CAAC,+CAA+C;IACtF,MAAM,OAAO,GAAG,2BAA2B,IAAI,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,EAAE,CAAC;IAC3E,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAC7C,KAAK,CAAC,QAAQ,CACV,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\n\nexport type FinsembleDialogButtonProps = {\n\tbuttonSize?: string;\n\tclassName?: string;\n\tshow?: boolean;\n\tonClick?: Function;\n};\n\n/**\n * Button that is rendered on a dialog.\n */\nexport const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps> = (props: any) => {\n\t// Default size is medium.\n\n\t// [Julianna Langston, 2021-04-19] I don't think this is being used, since the css class `fsbl-button-md` doesn't exist anywhere. Candidate for removal, along with associated prop.\n\tconst size = props.buttonSize ?? \"md\"; // `fsbl-button-md` css doesn't exist anywhere?\n\tconst classes = `fsbl-button fsbl-button-${size} ${props.className ?? \"\"}`;\n\treturn props.show !== false ? (\n\t\t<div className={classes} onClick={props.onClick}>\n\t\t\t{props.children}\n\t\t</div>\n\t) : null;\n};\n"]}

package/react/components/legacyControls/FinsembleDialogQuestion.d.ts

@@ -1,6 +1,13 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import * as React from "react";
 export declare type FinsembleDialogQuestionProps = {
     className?: string;
     question?: string;
 };
+/**
+ * This component is essentially just a component that adds classes so the styling looks good on dialogs.
+ */
 export declare const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps>;

package/react/components/legacyControls/FinsembleDialogQuestion.js

@@ -1,5 +1,12 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import * as React from "react";
 const DIALOG_QUESTION_BASE_CLASS = "dialog-question";
+/**
+ * This component is essentially just a component that adds classes so the styling looks good on dialogs.
+ */
 export const FinsembleDialogQuestion = (props) => {
     var _a;
     const classes = `${(_a = props.className) !== null && _a !== void 0 ? _a : ""} ${DIALOG_QUESTION_BASE_CLASS}`;

package/react/components/legacyControls/FinsembleDialogQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogQuestion.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogQuestion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAUrD,MAAM,CAAC,MAAM,uBAAuB,GAA0D,CAAC,KAAU,EAAE,EAAE;;IAC5G,MAAM,OAAO,GAAG,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,IAAI,0BAA0B,EAAE,CAAC;IACzE,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO;QACrB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport * as React from \"react\";\nconst DIALOG_QUESTION_BASE_CLASS = \"dialog-question\";\n\nexport type FinsembleDialogQuestionProps = {\n\tclassName?: string;\n\tquestion?: string;\n};\n\n/**\n * This component is essentially just a component that adds classes so the styling looks good on dialogs.\n */\nexport const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps> = (props: any) => {\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_QUESTION_BASE_CLASS}`;\n\treturn (\n\t\t<div className={classes}>\n\t\t\t{props.question}\n\t\t\t{props.children}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"FinsembleDialogQuestion.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogQuestion.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAOrD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA0D,CAAC,KAAU,EAAE,EAAE;;IAC5G,MAAM,OAAO,GAAG,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,IAAI,0BAA0B,EAAE,CAAC;IACzE,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO;QACrB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport * as React from \"react\";\nconst DIALOG_QUESTION_BASE_CLASS = \"dialog-question\";\n\nexport type FinsembleDialogQuestionProps = {\n\tclassName?: string;\n\tquestion?: string;\n};\n\n/**\n * This component is essentially just a component that adds classes so the styling looks good on dialogs.\n */\nexport const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps> = (props: any) => {\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_QUESTION_BASE_CLASS}`;\n\treturn (\n\t\t<div className={classes}>\n\t\t\t{props.question}\n\t\t\t{props.children}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/legacyControls/FinsembleDialogTextInput.d.ts

@@ -14,4 +14,7 @@ export declare type FinsembleDialogTextInputProps = {
     onInputChange: React.ChangeEventHandler;
     inputPattern?: string;
 };
+/**
+ * A big text field that's shown on dialogs.
+ */
 export declare const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps>;

package/react/components/legacyControls/FinsembleDialogTextInput.js

@@ -4,16 +4,25 @@
  */
 import * as React from "react";
 const DIALOG_INPUT_BASE_CLASS = "dialog-input";
+/**
+ * A big text field that's shown on dialogs.
+ */
 export const FinsembleDialogTextInput = (props) => {
     var _a, _b, _c;
     const [textValue, setTextValue] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
     const textInput = React.useRef(null);
     const inputPatternRegEx = props.inputPattern ? new RegExp(props.inputPattern) : undefined;
+    /**
+     * Focuses the input field.
+     */
     const focusInput = () => {
         var _a;
         if ((_a = textInput === null || textInput === void 0 ? void 0 : textInput.current) === null || _a === void 0 ? void 0 : _a.focus)
             textInput.current.focus();
     };
+    /**
+     * Listens for the shown event so it can focus the input.
+     */
     React.useEffect(() => {
         if (props.focusOnShow) {
             finsembleWindow.addEventListener("shown", focusInput);
@@ -32,6 +41,11 @@ export const FinsembleDialogTextInput = (props) => {
     }, [props.value]);
     const placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : "";
     const classes = `${(_c = props.className) !== null && _c !== void 0 ? _c : ""} ${DIALOG_INPUT_BASE_CLASS}`;
+    /**
+     * If the input is a match for the props.inputPattern regular expression, then pass on the change
+     *
+     * @param {React.ChangeEvent<HTMLInputElement>} e
+     */
     const changeEvent = (e) => {
         if (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {
             props.onInputChange(e);

package/react/components/legacyControls/FinsembleDialogTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogTextInput.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogTextInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,uBAAuB,GAAG,cAAc,CAAC;AAiB/C,MAAM,CAAC,MAAM,wBAAwB,GAA2D,CAAC,KAAK,EAAE,EAAE;;IACzG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;IAC5E,MAAM,SAAS,GAAgC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAuB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAI9G,MAAM,UAAU,GAAG,GAAG,EAAE;;QACvB,IAAI,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC1D,CAAC,CAAC;IAKF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,KAAK,CAAC,WAAW,EAAE;YACtB,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACtD;QACD,OAAO,GAAG,EAAE;YACX,IAAI,KAAK,CAAC,WAAW,EAAE;gBACtB,eAAe,CAAC,mBAAmB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;aACzD;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACpB,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC9B,YAAY,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;SAChC;IACF,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,IAAI,uBAAuB,EAAE,CAAC;IAOtE,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,IAAI,iBAAiB,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE;YAC/E,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YACvB,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC7B;aAAM;YACN,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAC/B,oCAAoC,CAAC,CAAC,MAAM,CAAC,KAAK,iDAAiD,KAAK,CAAC,YAAY,GAAG,CACxH,CAAC;SACF;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO;QACtB,+BAAO,OAAO,EAAC,cAAc,IAAE,KAAK,CAAC,UAAU,IAAI,EAAE,CAAS;QAC9D,6BAAK,SAAS,EAAC,YAAY;YAC1B,+BACC,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,SAAS,GACf,CACG;QACL,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\nconst DIALOG_INPUT_BASE_CLASS = \"dialog-input\";\n\nexport type FinsembleDialogTextInputProps = {\n\tclassName?: string;\n\tmaxLength?: number;\n\tplaceholder?: string;\n\tautoFocus?: boolean;\n\tfocusOnShow?: boolean;\n\tinputLabel?: string;\n\tvalue?: string;\n\tonInputChange: React.ChangeEventHandler;\n\tinputPattern?: string;\n};\n\n/**\n * A big text field that's shown on dialogs.\n */\nexport const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps> = (props) => {\n\tconst [textValue, setTextValue] = React.useState<string>(props.value ?? \"\");\n\tconst textInput: React.Ref<HTMLInputElement> = React.useRef(null);\n\tconst inputPatternRegEx: RegExp | undefined = props.inputPattern ? new RegExp(props.inputPattern) : undefined;\n\t/**\n\t * Focuses the input field.\n\t */\n\tconst focusInput = () => {\n\t\tif (textInput?.current?.focus) textInput.current.focus();\n\t};\n\n\t/**\n\t * Listens for the shown event so it can focus the input.\n\t */\n\tReact.useEffect(() => {\n\t\tif (props.focusOnShow) {\n\t\t\tfinsembleWindow.addEventListener(\"shown\", focusInput);\n\t\t}\n\t\treturn () => {\n\t\t\tif (props.focusOnShow) {\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", focusInput);\n\t\t\t}\n\t\t};\n\t}, [props.focusOnShow]);\n\n\tReact.useEffect(() => {\n\t\tif (props.value !== textValue) {\n\t\t\tsetTextValue(props.value ?? \"\");\n\t\t}\n\t}, [props.value]);\n\n\tconst placeholder = props.placeholder ?? \"\";\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_INPUT_BASE_CLASS}`;\n\n\t/**\n\t * If the input is a match for the props.inputPattern regular expression, then pass on the change\n\t *\n\t * @param {React.ChangeEvent<HTMLInputElement>} e\n\t */\n\tconst changeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {\n\t\t\tprops.onInputChange(e);\n\t\t\tsetTextValue(e.target.value);\n\t\t} else {\n\t\t\tFSBL.Clients.Logger.system.debug(\n\t\t\t\t`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`\n\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={classes}>\n\t\t\t<label htmlFor=\"single-input\">{props.inputLabel || \"\"}</label>\n\t\t\t<div className=\"form-group\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"single-input\"\n\t\t\t\t\tautoFocus={props.autoFocus}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tmaxLength={props.maxLength}\n\t\t\t\t\tonChange={changeEvent}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tref={textInput}\n\t\t\t\t\tvalue={textValue}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{props.children}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"FinsembleDialogTextInput.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogTextInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,uBAAuB,GAAG,cAAc,CAAC;AAc/C;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAA2D,CAAC,KAAK,EAAE,EAAE;;IACzG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;IAC5E,MAAM,SAAS,GAAgC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAuB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9G;;OAEG;IACH,MAAM,UAAU,GAAG,GAAG,EAAE;;QACvB,IAAI,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC1D,CAAC,CAAC;IAEF;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,KAAK,CAAC,WAAW,EAAE;YACtB,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACtD;QACD,OAAO,GAAG,EAAE;YACX,IAAI,KAAK,CAAC,WAAW,EAAE;gBACtB,eAAe,CAAC,mBAAmB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;aACzD;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACpB,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC9B,YAAY,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;SAChC;IACF,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,IAAI,uBAAuB,EAAE,CAAC;IAEtE;;;;OAIG;IACH,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,IAAI,iBAAiB,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE;YAC/E,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YACvB,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC7B;aAAM;YACN,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAC/B,oCAAoC,CAAC,CAAC,MAAM,CAAC,KAAK,iDAAiD,KAAK,CAAC,YAAY,GAAG,CACxH,CAAC;SACF;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO;QACtB,+BAAO,OAAO,EAAC,cAAc,IAAE,KAAK,CAAC,UAAU,IAAI,EAAE,CAAS;QAC9D,6BAAK,SAAS,EAAC,YAAY;YAC1B,+BACC,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,SAAS,GACf,CACG;QACL,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport * as React from \"react\";\nconst DIALOG_INPUT_BASE_CLASS = \"dialog-input\";\n\nexport type FinsembleDialogTextInputProps = {\n\tclassName?: string;\n\tmaxLength?: number;\n\tplaceholder?: string;\n\tautoFocus?: boolean;\n\tfocusOnShow?: boolean;\n\tinputLabel?: string;\n\tvalue?: string;\n\tonInputChange: React.ChangeEventHandler;\n\tinputPattern?: string;\n};\n\n/**\n * A big text field that's shown on dialogs.\n */\nexport const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps> = (props) => {\n\tconst [textValue, setTextValue] = React.useState<string>(props.value ?? \"\");\n\tconst textInput: React.Ref<HTMLInputElement> = React.useRef(null);\n\tconst inputPatternRegEx: RegExp | undefined = props.inputPattern ? new RegExp(props.inputPattern) : undefined;\n\t/**\n\t * Focuses the input field.\n\t */\n\tconst focusInput = () => {\n\t\tif (textInput?.current?.focus) textInput.current.focus();\n\t};\n\n\t/**\n\t * Listens for the shown event so it can focus the input.\n\t */\n\tReact.useEffect(() => {\n\t\tif (props.focusOnShow) {\n\t\t\tfinsembleWindow.addEventListener(\"shown\", focusInput);\n\t\t}\n\t\treturn () => {\n\t\t\tif (props.focusOnShow) {\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", focusInput);\n\t\t\t}\n\t\t};\n\t}, [props.focusOnShow]);\n\n\tReact.useEffect(() => {\n\t\tif (props.value !== textValue) {\n\t\t\tsetTextValue(props.value ?? \"\");\n\t\t}\n\t}, [props.value]);\n\n\tconst placeholder = props.placeholder ?? \"\";\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_INPUT_BASE_CLASS}`;\n\n\t/**\n\t * If the input is a match for the props.inputPattern regular expression, then pass on the change\n\t *\n\t * @param {React.ChangeEvent<HTMLInputElement>} e\n\t */\n\tconst changeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {\n\t\t\tprops.onInputChange(e);\n\t\t\tsetTextValue(e.target.value);\n\t\t} else {\n\t\t\tFSBL.Clients.Logger.system.debug(\n\t\t\t\t`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`\n\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={classes}>\n\t\t\t<label htmlFor=\"single-input\">{props.inputLabel || \"\"}</label>\n\t\t\t<div className=\"form-group\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"single-input\"\n\t\t\t\t\tautoFocus={props.autoFocus}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tmaxLength={props.maxLength}\n\t\t\t\t\tonChange={changeEvent}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tref={textInput}\n\t\t\t\t\tvalue={textValue}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{props.children}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/legacyControls/FinsembleDnDContext.d.ts

@@ -22,5 +22,24 @@ declare type FinsembleDnDContextProps = {
     className?: string;
     metadata?: Record<string, any> | undefined;
 };
+/**
+ * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.
+ * It wraps its children and allows them to do draggy and droppy things.
+ * It also allows for horizontal containers to provide scrolling functionality.
+ * @param props
+ * @param props.id ID for the container that wraps the sortable container
+ * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling
+ * @param props.showScrollButtonsTooltip
+ * @param props.leftButtonTooltip Tooltip for left scroll button
+ * @param props.rightButtonTooltip Tooltip for right scroll button
+ * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards
+ * @param props.onDragEnd handler for sorting
+ * @param props.onDragBegin handler for sorting
+ * @param props.onDragOver
+ * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect
+ * @param props.distance how far the user has to drag an element to trigger sorting behavior
+ * @param props.axis whether to sort vertically or horizontally.
+ * @param props.className optional styles to pass the the sortable container
+ */
 export declare const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps>;
 export {};

package/react/components/legacyControls/FinsembleDnDContext.js

@@ -27,12 +27,25 @@ const DEFAULT_CONTAINER_MEASUREMENTS = {
     offsetWidth: 0,
 };
 const DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;
+/**
+ * Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.
+ * @param overflowStateSetter
+ */
 const addResizeHandler = (overflowStateSetter) => () => {
     window.addEventListener("resize", overflowStateSetter);
     return () => {
         window.removeEventListener("resize", overflowStateSetter);
     };
 };
+/**
+ * Scrolls forward or back
+ * @param containerRef
+ * @param distance How far to move
+ * @param state Current scroll state
+ * @param stateSetters Scroll state setters
+ * @param scrollDir Whether we're scrolling forward or backwards
+ * @param deltaY The scroll amount that came from the `wheel` event.
+ */
 const scrollHorizontally = (distance, state, stateSetters, scrollDir, deltaY) => {
     const { setScrollLeft } = stateSetters;
     const { containerScrollLeft, containerMeasurements } = state;
@@ -47,15 +60,20 @@ const scrollHorizontally = (distance, state, stateSetters, scrollDir, deltaY) =>
         delta = Math.max(-1, Math.min(1, scrollDir));
     }
     let fakeItemWidth = 0;
+    // advance the scroll position 40 px forward or back, depending on the mouse wheel direction.
+    // eslint-disable-next-line no-mixed-operators
     let newScrollLeft = containerScrollLeft - delta * distance;
     if (scrollAmount >= distance) {
         return fakeItemWidth;
     }
+    // See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you
     const rightEdgeOfScrollingViewport = containerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;
     const rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;
+    // if we've scrolled beyond the right-most edge of the area, calculate the fake item width
     if (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {
         fakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);
     }
+    // if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.
     if (newScrollLeft < 0)
         newScrollLeft = 0;
     if (newScrollLeft !== containerScrollLeft) {
@@ -63,6 +81,10 @@ const scrollHorizontally = (distance, state, stateSetters, scrollDir, deltaY) =>
     }
     return fakeItemWidth;
 };
+/**
+ * Simple component that renders the left and right chevrons.
+ * @param props
+ */
 const ScrollingChevron = (props) => {
     const { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;
     const classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? "greyedOut" : null}`;
@@ -70,6 +92,25 @@ const ScrollingChevron = (props) => {
     return (React.createElement("div", { className: "chevron-container", title: toolTip },
         React.createElement("i", { className: classNames, onClick: scrollFunction })));
 };
+/**
+ * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.
+ * It wraps its children and allows them to do draggy and droppy things.
+ * It also allows for horizontal containers to provide scrolling functionality.
+ * @param props
+ * @param props.id ID for the container that wraps the sortable container
+ * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling
+ * @param props.showScrollButtonsTooltip
+ * @param props.leftButtonTooltip Tooltip for left scroll button
+ * @param props.rightButtonTooltip Tooltip for right scroll button
+ * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards
+ * @param props.onDragEnd handler for sorting
+ * @param props.onDragBegin handler for sorting
+ * @param props.onDragOver
+ * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect
+ * @param props.distance how far the user has to drag an element to trigger sorting behavior
+ * @param props.axis whether to sort vertically or horizontally.
+ * @param props.className optional styles to pass the the sortable container
+ */
 export const FinsembleDnDContext = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { allowHorizontalScroll } = props;
@@ -77,29 +118,88 @@ export const FinsembleDnDContext = (props) => {
     const onDragBegin = (_b = props.onDragStart) !== null && _b !== void 0 ? _b : defaultOnDragBegin;
     const onDragMove = (_c = props.onDragMove) !== null && _c !== void 0 ? _c : defaultOnDrag;
     const onDragOver = (_d = props.onDragOver) !== null && _d !== void 0 ? _d : defaultOnDragOver;
+    // This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.
     const distance = (_e = props.distance) !== null && _e !== void 0 ? _e : SORT_CONTAINER_DRAG_DISTANCE;
     const onLayoutUpdate = (_f = props.onLayoutUpdate) !== null && _f !== void 0 ? _f : defaultOnLayoutUpdate;
+    // This is the stateful variable that holds the active 'scrollLeft' property for the DOM node
+    // that's rendered inside of the sort container.
     const [containerScrollLeft, setContainerScrollLeft] = React.useState(0);
+    // read the comment in doForceUpdate to understand this.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [forceUpdate, setForceUpdate] = React.useState(0);
+    // Index of current visible left item
     const [leftItemIndex, setLeftItemIndex] = React.useState(0);
+    // Width of fake right (last) item to align the position of the left item
     const [fakeItemWidth, setFakeItemWidth] = React.useState(0);
     const containerRef = React.useRef(null);
+    // An object with all of the measurements that we'll need to set chevron visibility.
+    // If you don't understand client vs offset vs scrollWidth/Left,
+    // go check out this image https://i.stack.imgur.com/Cl1IA.png
+    // Here's an interactive version too: https://jsfiddle.net/y8Y32/25/
     const containerMeasurements = containerRef.current
         ? {
             clientLeft: containerRef.current.clientLeft,
             clientWidth: containerRef.current.clientWidth,
             offsetLeft: containerRef.current.offsetLeft,
             offsetWidth: containerRef.current.offsetWidth,
+            // not using the actual container's scrollLeft because it may not have been set yet.
+            // this uses the scrollLeft we have set in state.
             scrollLeft: containerScrollLeft,
             scrollWidth: containerRef.current.scrollWidth,
         }
         : DEFAULT_CONTAINER_MEASUREMENTS;
     const chevronScrollDistance = (_g = props.chevronScrollDistance) !== null && _g !== void 0 ? _g : DEFAULT_CHEVRON_SCROLL_DISTANCE;
-    const isOverflowPresent = containerMeasurements.clientWidth !== 0 &&
+    // Whether the elements inside of the DND container have overflowed the clientWidth.
+    const isOverflowPresent = 
+    // Explicitly made this !== 0 instead of just checking whether clientWidth was truthy
+    // so it was clear why this check was here. If it's not clear,
+    // if the clientWidth of the containerRef is 0, we should not have any chevrons. Ever.
+    // A client width of 0 indicates that the Ref's children haven't fully rendered.
+    containerMeasurements.clientWidth !== 0 &&
+        // On a monitor that's scaled at 100%, when clientWidth and scrollWidth are the same
+        // there is no overflow present. When monitors are NOT scaled at 100%,
+        // there's a chance that these two numbers are off.
         Math.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;
     const showChevrons = allowHorizontalScroll && isOverflowPresent;
+    // disabled === 'grayed out' and onClick won't fire. When you've scrolled all the way to the left,
+    // the left chevron is disabled. If you've scrolled all the way to the right, the right chevron is disabled
     const leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);
     const rightChevronDisabled = !!(showChevrons &&
+        /**
+         * This is a calculation that figures out where the right edge of the current viewport is.
+         * It's a little tricky to imagine. So look at this diagram.
+            +-------------------------------------------scrollWidth-------------------------------------------+
+                                 |----------------------------------------------------|
+                                 |													  |
+            +-------------------------------------------------------------------------------------------------+
+            |(0)                 |(200)                                               |(200)                  |(300)
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    |                       |
+            |                    |                                                    | (A)                   |
+            +-------------------------------------------------------------------------------------------------+
+                                 | 													  |
+                                 +----------------------clientWidth-------------------+
+                                 ^                                                    ^
+                                 |                                                    |
+                                 |                                                    |
+                                 |                                                    |
+                                 +                                                    +
+                                 scrollLeft = 100                                    scrollRight = 200
+
+         * The numbers in parens are the numbers for the 'scroll box'. We're trying to figure out where the point labeled (A) is located.
+         *
+         * Walking through the calculation, we take the scrollWidth and subtract the scrollLeft. This gives us the right edge of the scroll box.
+         * offsetWidth is effectively the right edge of the element. If the right edge of the scroll box and the right edge of the element are the same number,
+         * then we cannot scroll any further, and the chevron should be disabled.
+         */
         containerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0);
     const scrollFunctionState = {
         containerScrollLeft,
@@ -108,6 +208,9 @@ export const FinsembleDnDContext = (props) => {
     const scrollFunctionStateSetters = {
         setScrollLeft: setContainerScrollLeft,
     };
+    /**
+     * Left Chevron's onClickHandler
+     */
     const scrollToLeft = () => {
         var _a, _b;
         if (leftChevronDisabled)
@@ -119,6 +222,9 @@ export const FinsembleDnDContext = (props) => {
             setLeftItemIndex(leftItemIndex - 1);
         }
     };
+    /**
+     * Right Chevron's onClickHandler
+     */
     const scrollToRight = () => {
         var _a, _b;
         if (rightChevronDisabled)
@@ -130,9 +236,14 @@ export const FinsembleDnDContext = (props) => {
             setLeftItemIndex(leftItemIndex + 1);
         }
     };
+    /**
+     * "wheel" handler. scrolls forward or backwards
+     * @param event
+     */
     const scrollme = (event) => {
         if (!event.nativeEvent.deltaY)
             return;
+        // do scroll only if the container is overflowed
         if (isOverflowPresent) {
             event.nativeEvent.deltaY < 0 ? scrollToLeft() : scrollToRight();
         }
@@ -141,22 +252,36 @@ export const FinsembleDnDContext = (props) => {
         if (props.allowHorizontalScroll && containerRef.current)
             containerRef.current.scrollLeft = containerScrollLeft;
     };
+    // This function increments `forceUpdate`, which is a piece of state that's irrelevant to the
+    // rendering of this component. After a resize, we need to re-measure the DOM so we can figure out if
+    // the chevrons are necessary. Because no state changes on a resize. the component doesn't rerender.
+    // This function will change state, which will cause a re-rendering, and the component will be re-measured.
     const doForceUpdate = () => {
         setForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);
     };
+    // This function is needed for correct positioning after resizing the window.
     const scrollToInitialState = () => {
         const calculatedFakeItemWidth = scrollHorizontally(containerScrollLeft, scrollFunctionState, scrollFunctionStateSetters, 1);
         setFakeItemWidth(calculatedFakeItemWidth);
         setLeftItemIndex(0);
         setContainerScrollLeft(0);
     };
+    // After every render, set the actual DOM element's scrollLeft to be whatever we calculated during the previous render.
     React.useLayoutEffect(doDOMManipulation);
+    // after the children change, we need to force an update so that we can re-measure the DOM after the render happens
+    // without this, adding and removing elements from the DNDContext won't recalculate whether the chevrons should render
     React.useEffect(doForceUpdate, [props.children]);
+    // Whenever the window resizes, force an update so that the DOM is re-measured.
     React.useEffect(addResizeHandler(doForceUpdate), []);
+    // Whenever the window resizes, scroll widgets to the left.
     React.useEffect(addResizeHandler(scrollToInitialState), []);
+    /**
+     * Actual container that provides drag and drop functionality
+     */
     const SortContainer = SortableContainer((sortableContainerProps) => (React.createElement("div", { onWheel: scrollme, ref: containerRef, className: props.className },
         sortableContainerProps.children,
         React.createElement("div", { style: { width: `${fakeItemWidth}px`, flexShrink: 0 } }))));
+    // After every render, call onLayoutUpdate function
     React.useLayoutEffect(() => {
         onLayoutUpdate();
     }, [SortContainer]);