@finsemble/finsemble-ui 6.2.1 → 6.3.1-beta-1

package/react/components/icon/Icon.js

@@ -5,11 +5,11 @@ export const iconFromConfig = (config, title) => {
         name: title,
         category: "Application",
     };
-    if (config?.iconClass) {
+    if (config === null || config === void 0 ? void 0 : config.iconClass) {
         icon.imageType = "fonticon";
         icon.path = config.iconClass;
     }
-    if (config?.iconURL) {
+    if (config === null || config === void 0 ? void 0 : config.iconURL) {
         icon.imageType = "url";
         icon.path = config.iconURL;
     }
@@ -26,9 +26,10 @@ const deriveClasses = (imageType, className = "") => {
     return classes;
 };
 export const Icon = (props) => {
+    var _a, _b;
     let avatar;
     if (props.imageType === "initials") {
-        const name = props.name ?? "";
+        const name = (_a = props.name) !== null && _a !== void 0 ? _a : "";
         const initials = name
             .split(" ")
             .map((substr) => substr[0])
@@ -42,7 +43,7 @@ export const Icon = (props) => {
     if (props.imageType === "url") {
         avatar = React.createElement("img", { src: props.path });
     }
-    const imageType = props.imageType ?? "initials";
+    const imageType = (_b = props.imageType) !== null && _b !== void 0 ? _b : "initials";
     const classes = deriveClasses(imageType, props.className);
     return (React.createElement("div", { className: classes, "data-category": props.category }, avatar));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,KAAa,EAAE,EAAE;IAE5D,IAAI,IAAI,GAAQ;QACf,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,aAAa;KACvB,CAAC;IAIF,IAAI,MAAM,EAAE,SAAS,EAAE;QACtB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC;KAC7B;IACD,IAAI,MAAM,EAAE,OAAO,EAAE;QACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;KAC3B;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAU,EAAE;IAC3E,IAAI,OAAO,GAAG,uBAAuB,SAAS,EAAE,CAAC;IACjD,IAAI,SAAS,KAAK,KAAK,EAAE;QACxB,OAAO,GAAG,GAAG,OAAO,kBAAkB,CAAC;KACvC;SAAM;QACN,OAAO,GAAG,GAAG,OAAO,cAAc,CAAC;KACnC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,IAAI,GAAgD,CAAC,KAAK,EAAE,EAAE;IAC1E,IAAI,MAAM,CAAC;IACX,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;QAC9B,MAAM,QAAQ,GAAG,IAAI;aACnB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAClC,IAAI,CAAC,EAAE,CAAC;aACR,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,MAAM,GAAG,kCAAO,QAAQ,CAAQ,CAAC;KACjC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,GAAG,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,GAAM,CAAC;KACxC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;QAC9B,MAAM,GAAG,6BAAK,GAAG,EAAE,KAAK,CAAC,IAAI,GAAI,CAAC;KAClC;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,UAAU,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE1D,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO,mBAAiB,KAAK,CAAC,QAAQ,IACpD,MAAM,CACF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { Icon as IconType } from \"../../types/iconTypes\";\r\n\r\n/**\r\n * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\r\n * @param config A finsemble config entry from \"foreign.components.Toolbar\"\r\n * @param title The title for the icon\r\n */\r\nexport const iconFromConfig = (config: any, title: string) => {\r\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\r\n\tlet icon: any = {\r\n\t\timageType: \"initials\",\r\n\t\tname: title,\r\n\t\tcategory: \"Application\",\r\n\t};\r\n\r\n\t// Use any iconography that is available in Finsemble's config for this component\r\n\t// This typically comes from the component's \"foreign.components.Toolbar\" section\r\n\tif (config?.iconClass) {\r\n\t\ticon.imageType = \"fonticon\";\r\n\t\ticon.path = config.iconClass;\r\n\t}\r\n\tif (config?.iconURL) {\r\n\t\ticon.imageType = \"url\";\r\n\t\ticon.path = config.iconURL;\r\n\t}\r\n\treturn icon;\r\n};\r\n\r\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\r\n\tlet classes = `icon-avatar-wrapper ${className}`;\r\n\tif (imageType === \"url\") {\r\n\t\tclasses = `${classes} entity-with-img`;\r\n\t} else {\r\n\t\tclasses = `${classes} icon-avatar`;\r\n\t}\r\n\treturn classes;\r\n};\r\n\r\ntype IconProps = IconType & {\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * An icon to accompany Finsemble components or workspaces.\r\n * @param {string} [imageType] - \"fonticon\" | \"url\" | \"initials\" - Determines how the icon is generated.\r\n * @param {string} [path] - The path of the image.\r\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\r\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\r\n * @param {string} [className] - Optional class to be appended.\r\n */\r\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\r\n\tlet avatar;\r\n\tif (props.imageType === \"initials\") {\r\n\t\tconst name = props.name ?? \"\";\r\n\t\tconst initials = name\r\n\t\t\t.split(\" \")\r\n\t\t\t.map((substr: string) => substr[0])\r\n\t\t\t.join(\"\")\r\n\t\t\t.substr(0, 2);\r\n\t\tavatar = <span>{initials}</span>;\r\n\t}\r\n\tif (props.imageType === \"fonticon\") {\r\n\t\tavatar = <i className={props.path}></i>;\r\n\t}\r\n\tif (props.imageType === \"url\") {\r\n\t\tavatar = <img src={props.path} />;\r\n\t}\r\n\tconst imageType = props.imageType ?? \"initials\";\r\n\tconst classes = deriveClasses(imageType, props.className);\r\n\r\n\treturn (\r\n\t\t<div className={classes} data-category={props.category}>\r\n\t\t\t{avatar}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\n/*\r\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\r\n\tlet className = \"\";\r\n\tif(props.category == \"Application\")\r\n\t\tclassName=`entity-component ${props.className}`;\r\n\tif(props.category == \"Workspace\")\r\n\t\tclassName=`entity-workspace ${props.className}`;\r\n\treturn (\r\n\t\t<Icon {...props} {...className} />\r\n\t)\r\n}\r\n*/\r\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,KAAa,EAAE,EAAE;IAE5D,IAAI,IAAI,GAAQ;QACf,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,aAAa;KACvB,CAAC;IAIF,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,EAAE;QACtB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC;KAC7B;IACD,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;QACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;KAC3B;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAU,EAAE;IAC3E,IAAI,OAAO,GAAG,uBAAuB,SAAS,EAAE,CAAC;IACjD,IAAI,SAAS,KAAK,KAAK,EAAE;QACxB,OAAO,GAAG,GAAG,OAAO,kBAAkB,CAAC;KACvC;SAAM;QACN,OAAO,GAAG,GAAG,OAAO,cAAc,CAAC;KACnC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,IAAI,GAAgD,CAAC,KAAK,EAAE,EAAE;;IAC1E,IAAI,MAAM,CAAC;IACX,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC;QAC9B,MAAM,QAAQ,GAAG,IAAI;aACnB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAClC,IAAI,CAAC,EAAE,CAAC;aACR,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,MAAM,GAAG,kCAAO,QAAQ,CAAQ,CAAC;KACjC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,GAAG,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,GAAM,CAAC;KACxC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;QAC9B,MAAM,GAAG,6BAAK,GAAG,EAAE,KAAK,CAAC,IAAI,GAAI,CAAC;KAClC;IACD,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,UAAU,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE1D,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO,mBAAiB,KAAK,CAAC,QAAQ,IACpD,MAAM,CACF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { Icon as IconType } from \"../../types/iconTypes\";\r\n\r\n/**\r\n * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\r\n * @param config A finsemble config entry from \"foreign.components.Toolbar\"\r\n * @param title The title for the icon\r\n */\r\nexport const iconFromConfig = (config: any, title: string) => {\r\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\r\n\tlet icon: any = {\r\n\t\timageType: \"initials\",\r\n\t\tname: title,\r\n\t\tcategory: \"Application\",\r\n\t};\r\n\r\n\t// Use any iconography that is available in Finsemble's config for this component\r\n\t// This typically comes from the component's \"foreign.components.Toolbar\" section\r\n\tif (config?.iconClass) {\r\n\t\ticon.imageType = \"fonticon\";\r\n\t\ticon.path = config.iconClass;\r\n\t}\r\n\tif (config?.iconURL) {\r\n\t\ticon.imageType = \"url\";\r\n\t\ticon.path = config.iconURL;\r\n\t}\r\n\treturn icon;\r\n};\r\n\r\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\r\n\tlet classes = `icon-avatar-wrapper ${className}`;\r\n\tif (imageType === \"url\") {\r\n\t\tclasses = `${classes} entity-with-img`;\r\n\t} else {\r\n\t\tclasses = `${classes} icon-avatar`;\r\n\t}\r\n\treturn classes;\r\n};\r\n\r\ntype IconProps = IconType & {\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * An icon to accompany Finsemble components or workspaces.\r\n * @param {string} [imageType] - \"fonticon\" | \"url\" | \"initials\" - Determines how the icon is generated.\r\n * @param {string} [path] - The path of the image.\r\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\r\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\r\n * @param {string} [className] - Optional class to be appended.\r\n */\r\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\r\n\tlet avatar;\r\n\tif (props.imageType === \"initials\") {\r\n\t\tconst name = props.name ?? \"\";\r\n\t\tconst initials = name\r\n\t\t\t.split(\" \")\r\n\t\t\t.map((substr: string) => substr[0])\r\n\t\t\t.join(\"\")\r\n\t\t\t.substr(0, 2);\r\n\t\tavatar = <span>{initials}</span>;\r\n\t}\r\n\tif (props.imageType === \"fonticon\") {\r\n\t\tavatar = <i className={props.path}></i>;\r\n\t}\r\n\tif (props.imageType === \"url\") {\r\n\t\tavatar = <img src={props.path} />;\r\n\t}\r\n\tconst imageType = props.imageType ?? \"initials\";\r\n\tconst classes = deriveClasses(imageType, props.className);\r\n\r\n\treturn (\r\n\t\t<div className={classes} data-category={props.category}>\r\n\t\t\t{avatar}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\n/*\r\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\r\n\tlet className = \"\";\r\n\tif(props.category == \"Application\")\r\n\t\tclassName=`entity-component ${props.className}`;\r\n\tif(props.category == \"Workspace\")\r\n\t\tclassName=`entity-workspace ${props.className}`;\r\n\treturn (\r\n\t\t<Icon {...props} {...className} />\r\n\t)\r\n}\r\n*/\r\n"]}

package/react/components/legacyControls/FinsembleDialog.js

@@ -21,7 +21,6 @@ export const FinsembleDialog = (props) => {
         userInputTimeout = 10000;
     }
     FSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;
-    FSBL.Clients.DialogManager.isModal = isModal;
     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;QAC1C,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,KAAK,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,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;IAC/D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC;IAM7C,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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nconst DIALOG_BASE_CLASS = \"dialog\";\r\nexport type FinsembleDialogProps = {\r\n\tbehaviorOnResponse?: \"close\" | \"hide\";\r\n\tuserInputTimeout?: number;\r\n\tonShowRequested?: (err: any, response: any) => void;\r\n\tisModal: boolean;\r\n\tclassName?: string;\r\n\tchildren?: any;\r\n};\r\n\r\n/**\r\n * This is a component that adds some baked in behavior that is common accross several\r\n * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.\r\n */\r\nexport const FinsembleDialog: React.FunctionComponent<FinsembleDialogProps> = (props: any) => {\r\n\tlet { userInputTimeout, onShowRequested, isModal, className, children } = props;\r\n\r\n\tconst handleKeyDown = (e: KeyboardEvent) => {\r\n\t\tif (FSBL.Clients.DialogManager.openerMessage === null && e.key === \"Escape\") {\r\n\t\t\tfinsembleWindow.hide();\r\n\t\t}\r\n\t};\r\n\r\n\tfinsembleWindow.setAlwaysOnTop({\r\n\t\talwaysOnTop: true,\r\n\t});\r\n\r\n\tif (typeof onShowRequested === \"undefined\") {\r\n\t\tthrow new Error(\r\n\t\t\t\"No onShowRequested passed to FinsembleDialog. Pass onShowRequested as a property to the FinsembleDialog component.\"\r\n\t\t);\r\n\t}\r\n\r\n\t/*if (typeof behaviorOnResponse === \"undefined\") {\r\n\t\tbehaviorOnResponse = \"hide\";\r\n\t}*/\r\n\r\n\tif (typeof userInputTimeout === \"undefined\") {\r\n\t\tuserInputTimeout = 10000;\r\n\t}\r\n\r\n\tFSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;\r\n\tFSBL.Clients.DialogManager.isModal = isModal;\r\n\t//FSBL.Clients.DialogManager.behaviorOnResponse = behaviorOnResponse;\r\n\r\n\t/**\r\n\t * Registers some event listeners the first time this component is rendered.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tdocument.body.addEventListener(\"keydown\", handleKeyDown);\r\n\t\tdocument.body.className = `${document.body.className} dialog`;\r\n\r\n\t\tFSBL.Clients.DialogManager.registerDialogCallback(onShowRequested);\r\n\r\n\t\tif (isModal) {\r\n\t\t\tfinsembleWindow.addEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\r\n\t\t\tfinsembleWindow.addEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\r\n\t\t}\r\n\r\n\t\treturn () => {\r\n\t\t\tif (isModal) {\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst classes = `${className} ${DIALOG_BASE_CLASS}`;\r\n\treturn <div className={classes}>{children}</div>;\r\n};\r\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;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;QAC1C,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,KAAK,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nconst DIALOG_BASE_CLASS = \"dialog\";\r\nexport type FinsembleDialogProps = {\r\n\tbehaviorOnResponse?: \"close\" | \"hide\";\r\n\tuserInputTimeout?: number;\r\n\tonShowRequested?: (err: any, response: any) => void;\r\n\tisModal: boolean;\r\n\tclassName?: string;\r\n\tchildren?: any;\r\n};\r\n\r\n/**\r\n * This is a component that adds some baked in behavior that is common accross several\r\n * of the finsemble dialogs. Hiding/closing on blur, timing out, etc.\r\n */\r\nexport const FinsembleDialog: React.FunctionComponent<FinsembleDialogProps> = (props: any) => {\r\n\tlet { userInputTimeout, onShowRequested, isModal, className, children } = props;\r\n\r\n\tconst handleKeyDown = (e: KeyboardEvent) => {\r\n\t\tif (FSBL.Clients.DialogManager.openerMessage === null && e.key === \"Escape\") {\r\n\t\t\tfinsembleWindow.hide();\r\n\t\t}\r\n\t};\r\n\r\n\tfinsembleWindow.setAlwaysOnTop({\r\n\t\talwaysOnTop: true,\r\n\t});\r\n\r\n\tif (typeof onShowRequested === \"undefined\") {\r\n\t\tthrow new Error(\r\n\t\t\t\"No onShowRequested passed to FinsembleDialog. Pass onShowRequested as a property to the FinsembleDialog component.\"\r\n\t\t);\r\n\t}\r\n\r\n\t/*if (typeof behaviorOnResponse === \"undefined\") {\r\n\t\tbehaviorOnResponse = \"hide\";\r\n\t}*/\r\n\r\n\tif (typeof userInputTimeout === \"undefined\") {\r\n\t\tuserInputTimeout = 10000;\r\n\t}\r\n\r\n\tFSBL.Clients.DialogManager.userInputTimeout = userInputTimeout;\r\n\t//FSBL.Clients.DialogManager.behaviorOnResponse = behaviorOnResponse;\r\n\r\n\t/**\r\n\t * Registers some event listeners the first time this component is rendered.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tdocument.body.addEventListener(\"keydown\", handleKeyDown);\r\n\t\tdocument.body.className = `${document.body.className} dialog`;\r\n\r\n\t\tFSBL.Clients.DialogManager.registerDialogCallback(onShowRequested);\r\n\r\n\t\tif (isModal) {\r\n\t\t\tfinsembleWindow.addEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\r\n\t\t\tfinsembleWindow.addEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\r\n\t\t}\r\n\r\n\t\treturn () => {\r\n\t\t\tif (isModal) {\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", FSBL.Clients.DialogManager.showModal);\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"hidden\", FSBL.Clients.DialogManager.hideModal);\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst classes = `${className} ${DIALOG_BASE_CLASS}`;\r\n\treturn <div className={classes}>{children}</div>;\r\n};\r\n"]}

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

@@ -6,7 +6,7 @@ import * as React from "react";
 export declare type FinsembleDialogButtonProps = {
     buttonSize?: string;
     className?: string;
-    show: boolean;
+    show?: boolean;
     onClick?: Function;
 };
 export declare const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps>;

package/react/components/legacyControls/FinsembleDialogButton.js

@@ -4,8 +4,9 @@
  */
 import * as React from "react";
 export const FinsembleDialogButton = (props) => {
-    const size = props.buttonSize ?? "md";
-    const classes = `fsbl-button fsbl-button-${size} ${props.className ?? ""}`;
-    return props.show !== false ? (React.createElement("div", { ...props, className: classes }, props.children)) : null;
+    var _a, _b;
+    const size = (_a = props.buttonSize) !== null && _a !== void 0 ? _a : "md";
+    const classes = `fsbl-button fsbl-button-${size} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`;
+    return props.show !== false ? (React.createElement("div", Object.assign({}, props, { className: classes }), props.children)) : null;
 };
 //# sourceMappingURL=FinsembleDialogButton.js.map

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,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC;IACtC,MAAM,OAAO,GAAG,2BAA2B,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC;IAC3E,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7B,gCAAS,KAAK,EAAE,SAAS,EAAE,OAAO,IAChC,KAAK,CAAC,QAAQ,CACV,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\n\r\nexport type FinsembleDialogButtonProps = {\r\n\tbuttonSize?: string;\r\n\tclassName?: string;\r\n\tshow: boolean;\r\n\tonClick?: Function;\r\n};\r\n\r\n/**\r\n * Button that is rendered on a dialog.\r\n */\r\nexport const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps> = (props: any) => {\r\n\t// Default size is medium.\r\n\r\n\t// @TODO: [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.\r\n\tconst size = props.buttonSize ?? \"md\"; // `fsbl-button-md` css doesn't exist anywhere?\r\n\tconst classes = `fsbl-button fsbl-button-${size} ${props.className ?? \"\"}`;\r\n\treturn props.show !== false ? (\r\n\t\t<div {...props} className={classes}>\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t) : null;\r\n};\r\n"]}
+{"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,6CAAS,KAAK,IAAE,SAAS,EAAE,OAAO,KAChC,KAAK,CAAC,QAAQ,CACV,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\n\r\nexport type FinsembleDialogButtonProps = {\r\n\tbuttonSize?: string;\r\n\tclassName?: string;\r\n\tshow?: boolean;\r\n\tonClick?: Function;\r\n};\r\n\r\n/**\r\n * Button that is rendered on a dialog.\r\n */\r\nexport const FinsembleDialogButton: React.FunctionComponent<FinsembleDialogButtonProps> = (props: any) => {\r\n\t// Default size is medium.\r\n\r\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.\r\n\tconst size = props.buttonSize ?? \"md\"; // `fsbl-button-md` css doesn't exist anywhere?\r\n\tconst classes = `fsbl-button fsbl-button-${size} ${props.className ?? \"\"}`;\r\n\treturn props.show !== false ? (\r\n\t\t<div {...props} className={classes}>\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t) : null;\r\n};\r\n"]}

package/react/components/legacyControls/FinsembleDialogQuestion.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 const DIALOG_QUESTION_BASE_CLASS = "dialog-question";
 export const FinsembleDialogQuestion = (props) => {
-    const classes = `${props.className ?? ""} ${DIALOG_QUESTION_BASE_CLASS}`;
+    var _a;
+    const classes = `${(_a = props.className) !== null && _a !== void 0 ? _a : ""} ${DIALOG_QUESTION_BASE_CLASS}`;
     return (React.createElement("div", { className: classes },
         props.question,
         props.children));

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,KAAK,CAAC,SAAS,IAAI,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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\nimport * as React from \"react\";\r\nconst DIALOG_QUESTION_BASE_CLASS = \"dialog-question\";\r\n\r\nexport type FinsembleDialogQuestionProps = {\r\n\tclassName?: string;\r\n\tquestion?: string;\r\n};\r\n\r\n/**\r\n * This component is essentially just a component that adds classes so the styling looks good on dialogs.\r\n */\r\nexport const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps> = (props: any) => {\r\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_QUESTION_BASE_CLASS}`;\r\n\treturn (\r\n\t\t<div className={classes}>\r\n\t\t\t{props.question}\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\nimport * as React from \"react\";\r\nconst DIALOG_QUESTION_BASE_CLASS = \"dialog-question\";\r\n\r\nexport type FinsembleDialogQuestionProps = {\r\n\tclassName?: string;\r\n\tquestion?: string;\r\n};\r\n\r\n/**\r\n * This component is essentially just a component that adds classes so the styling looks good on dialogs.\r\n */\r\nexport const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps> = (props: any) => {\r\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_QUESTION_BASE_CLASS}`;\r\n\treturn (\r\n\t\t<div className={classes}>\r\n\t\t\t{props.question}\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

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

@@ -7,7 +7,7 @@ export declare type FinsembleDialogTextInputProps = {
     className?: string;
     maxLength?: number;
     placeholder?: string;
-    autoFocus: boolean;
+    autoFocus?: boolean;
     focusOnShow?: boolean;
     inputLabel?: string;
     value?: string;

package/react/components/legacyControls/FinsembleDialogTextInput.js

@@ -5,11 +5,13 @@
 import * as React from "react";
 const DIALOG_INPUT_BASE_CLASS = "dialog-input";
 export const FinsembleDialogTextInput = (props) => {
-    const [textValue, setTextValue] = React.useState(props.value ?? "");
+    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;
     const focusInput = () => {
-        if (textInput?.current?.focus)
+        var _a;
+        if ((_a = textInput === null || textInput === void 0 ? void 0 : textInput.current) === null || _a === void 0 ? void 0 : _a.focus)
             textInput.current.focus();
     };
     React.useEffect(() => {
@@ -23,12 +25,13 @@ export const FinsembleDialogTextInput = (props) => {
         };
     }, [props.focusOnShow]);
     React.useEffect(() => {
+        var _a;
         if (props.value !== textValue) {
-            setTextValue(props.value ?? "");
+            setTextValue((_a = props.value) !== null && _a !== void 0 ? _a : "");
         }
     }, [props.value]);
-    const placeholder = props.placeholder ?? "";
-    const classes = `${props.className ?? ""} ${DIALOG_INPUT_BASE_CLASS}`;
+    const placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : "";
+    const classes = `${(_c = props.className) !== null && _c !== void 0 ? _c : ""} ${DIALOG_INPUT_BASE_CLASS}`;
     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,KAAK,CAAC,KAAK,IAAI,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,SAAS,EAAE,OAAO,EAAE,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,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;SAChC;IACF,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,SAAS,IAAI,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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nconst DIALOG_INPUT_BASE_CLASS = \"dialog-input\";\r\n\r\nexport type FinsembleDialogTextInputProps = {\r\n\tclassName?: string;\r\n\tmaxLength?: number;\r\n\tplaceholder?: string;\r\n\tautoFocus: boolean;\r\n\tfocusOnShow?: boolean;\r\n\tinputLabel?: string;\r\n\tvalue?: string;\r\n\tonInputChange: React.ChangeEventHandler;\r\n\tinputPattern?: string;\r\n};\r\n\r\n/**\r\n * A big text field that's shown on dialogs.\r\n */\r\nexport const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps> = (props) => {\r\n\tconst [textValue, setTextValue] = React.useState<string>(props.value ?? \"\");\r\n\tconst textInput: React.Ref<HTMLInputElement> = React.useRef(null);\r\n\tconst inputPatternRegEx: RegExp | undefined = props.inputPattern ? new RegExp(props.inputPattern) : undefined;\r\n\t/**\r\n\t * Focuses the input field.\r\n\t */\r\n\tconst focusInput = () => {\r\n\t\tif (textInput?.current?.focus) textInput.current.focus();\r\n\t};\r\n\r\n\t/**\r\n\t * Listens for the shown event so it can focus the input.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tif (props.focusOnShow) {\r\n\t\t\tfinsembleWindow.addEventListener(\"shown\", focusInput);\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tif (props.focusOnShow) {\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", focusInput);\r\n\t\t\t}\r\n\t\t};\r\n\t}, [props.focusOnShow]);\r\n\r\n\tReact.useEffect(() => {\r\n\t\tif (props.value !== textValue) {\r\n\t\t\tsetTextValue(props.value ?? \"\");\r\n\t\t}\r\n\t}, [props.value]);\r\n\r\n\tconst placeholder = props.placeholder ?? \"\";\r\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_INPUT_BASE_CLASS}`;\r\n\r\n\t/**\r\n\t * If the input is a match for the props.inputPattern regular expression, then pass on the change\r\n\t *\r\n\t * @param {React.ChangeEvent<HTMLInputElement>} e\r\n\t */\r\n\tconst changeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\tif (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {\r\n\t\t\tprops.onInputChange(e);\r\n\t\t\tsetTextValue(e.target.value);\r\n\t\t} else {\r\n\t\t\tFSBL.Clients.Logger.system.debug(\r\n\t\t\t\t`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`\r\n\t\t\t);\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className={classes}>\r\n\t\t\t<label htmlFor=\"single-input\">{props.inputLabel || \"\"}</label>\r\n\t\t\t<div className=\"form-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\tid=\"single-input\"\r\n\t\t\t\t\tautoFocus={props.autoFocus}\r\n\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\tmaxLength={props.maxLength}\r\n\t\t\t\t\tonChange={changeEvent}\r\n\t\t\t\t\tplaceholder={placeholder}\r\n\t\t\t\t\tref={textInput}\r\n\t\t\t\t\tvalue={textValue}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t);\r\n};\r\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;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":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nconst DIALOG_INPUT_BASE_CLASS = \"dialog-input\";\r\n\r\nexport type FinsembleDialogTextInputProps = {\r\n\tclassName?: string;\r\n\tmaxLength?: number;\r\n\tplaceholder?: string;\r\n\tautoFocus?: boolean;\r\n\tfocusOnShow?: boolean;\r\n\tinputLabel?: string;\r\n\tvalue?: string;\r\n\tonInputChange: React.ChangeEventHandler;\r\n\tinputPattern?: string;\r\n};\r\n\r\n/**\r\n * A big text field that's shown on dialogs.\r\n */\r\nexport const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps> = (props) => {\r\n\tconst [textValue, setTextValue] = React.useState<string>(props.value ?? \"\");\r\n\tconst textInput: React.Ref<HTMLInputElement> = React.useRef(null);\r\n\tconst inputPatternRegEx: RegExp | undefined = props.inputPattern ? new RegExp(props.inputPattern) : undefined;\r\n\t/**\r\n\t * Focuses the input field.\r\n\t */\r\n\tconst focusInput = () => {\r\n\t\tif (textInput?.current?.focus) textInput.current.focus();\r\n\t};\r\n\r\n\t/**\r\n\t * Listens for the shown event so it can focus the input.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tif (props.focusOnShow) {\r\n\t\t\tfinsembleWindow.addEventListener(\"shown\", focusInput);\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tif (props.focusOnShow) {\r\n\t\t\t\tfinsembleWindow.removeEventListener(\"shown\", focusInput);\r\n\t\t\t}\r\n\t\t};\r\n\t}, [props.focusOnShow]);\r\n\r\n\tReact.useEffect(() => {\r\n\t\tif (props.value !== textValue) {\r\n\t\t\tsetTextValue(props.value ?? \"\");\r\n\t\t}\r\n\t}, [props.value]);\r\n\r\n\tconst placeholder = props.placeholder ?? \"\";\r\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_INPUT_BASE_CLASS}`;\r\n\r\n\t/**\r\n\t * If the input is a match for the props.inputPattern regular expression, then pass on the change\r\n\t *\r\n\t * @param {React.ChangeEvent<HTMLInputElement>} e\r\n\t */\r\n\tconst changeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\tif (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {\r\n\t\t\tprops.onInputChange(e);\r\n\t\t\tsetTextValue(e.target.value);\r\n\t\t} else {\r\n\t\t\tFSBL.Clients.Logger.system.debug(\r\n\t\t\t\t`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`\r\n\t\t\t);\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className={classes}>\r\n\t\t\t<label htmlFor=\"single-input\">{props.inputLabel || \"\"}</label>\r\n\t\t\t<div className=\"form-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\tid=\"single-input\"\r\n\t\t\t\t\tautoFocus={props.autoFocus}\r\n\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\tmaxLength={props.maxLength}\r\n\t\t\t\t\tonChange={changeEvent}\r\n\t\t\t\t\tplaceholder={placeholder}\r\n\t\t\t\t\tref={textInput}\r\n\t\t\t\t\tvalue={textValue}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t{props.children}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/legacyControls/FinsembleDnDContext.js

@@ -27,12 +27,10 @@ const DEFAULT_CONTAINER_MEASUREMENTS = {
     offsetWidth: 0,
 };
 const DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;
-const addResizeHandler = (overflowStateSetter) => {
+const addResizeHandler = (overflowStateSetter) => () => {
+    window.addEventListener("resize", overflowStateSetter);
     return () => {
-        window.addEventListener("resize", overflowStateSetter);
-        return () => {
-            window.removeEventListener("resize", overflowStateSetter);
-        };
+        window.removeEventListener("resize", overflowStateSetter);
     };
 };
 const scrollHorizontally = (distance, state, stateSetters, scrollDir, deltaY) => {
@@ -73,13 +71,14 @@ const ScrollingChevron = (props) => {
         React.createElement("i", { className: classNames, onClick: scrollFunction })));
 };
 export const FinsembleDnDContext = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { allowHorizontalScroll } = props;
-    const onDragEnd = props.onDragEnd ?? defaultOnDragEnd;
-    const onDragBegin = props.onDragStart ?? defaultOnDragBegin;
-    const onDragMove = props.onDragMove ?? defaultOnDrag;
-    const onDragOver = props.onDragOver ?? defaultOnDragOver;
-    const distance = props.distance ?? SORT_CONTAINER_DRAG_DISTANCE;
-    const onLayoutUpdate = props.onLayoutUpdate ?? defaultOnLayoutUpdate;
+    const onDragEnd = (_a = props.onDragEnd) !== null && _a !== void 0 ? _a : defaultOnDragEnd;
+    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;
+    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;
     const [containerScrollLeft, setContainerScrollLeft] = React.useState(0);
     const [forceUpdate, setForceUpdate] = React.useState(0);
     const [leftItemIndex, setLeftItemIndex] = React.useState(0);
@@ -95,9 +94,9 @@ export const FinsembleDnDContext = (props) => {
             scrollWidth: containerRef.current.scrollWidth,
         }
         : DEFAULT_CONTAINER_MEASUREMENTS;
-    const chevronScrollDistance = props.chevronScrollDistance ?? DEFAULT_CHEVRON_SCROLL_DISTANCE;
+    const chevronScrollDistance = (_g = props.chevronScrollDistance) !== null && _g !== void 0 ? _g : DEFAULT_CHEVRON_SCROLL_DISTANCE;
     const isOverflowPresent = containerMeasurements.clientWidth !== 0 &&
-        Math.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 10;
+        Math.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;
     const showChevrons = allowHorizontalScroll && isOverflowPresent;
     const leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);
     const rightChevronDisabled = !!(showChevrons &&
@@ -110,20 +109,26 @@ export const FinsembleDnDContext = (props) => {
         setScrollLeft: setContainerScrollLeft,
     };
     const scrollToLeft = () => {
+        var _a, _b;
         if (leftChevronDisabled)
             return;
-        let visibleLeftItem = containerRef.current?.childNodes[leftItemIndex - 1];
-        let calculatedFakeItemWidth = scrollHorizontally(visibleLeftItem?.clientWidth ?? chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, 1);
-        setFakeItemWidth(calculatedFakeItemWidth);
-        setLeftItemIndex(leftItemIndex - 1);
+        let visibleLeftItem = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes[leftItemIndex - 1];
+        if (visibleLeftItem) {
+            let calculatedFakeItemWidth = scrollHorizontally((_b = visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, 1);
+            setFakeItemWidth(calculatedFakeItemWidth);
+            setLeftItemIndex(leftItemIndex - 1);
+        }
     };
     const scrollToRight = () => {
+        var _a, _b;
         if (rightChevronDisabled)
             return;
-        let visibleLeftItem = containerRef.current?.childNodes[leftItemIndex];
-        let calculatedFakeItemWidth = scrollHorizontally(visibleLeftItem?.clientWidth ?? chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, -1);
-        setFakeItemWidth(calculatedFakeItemWidth);
-        setLeftItemIndex(leftItemIndex + 1);
+        let visibleLeftItem = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes[leftItemIndex];
+        if (visibleLeftItem) {
+            let calculatedFakeItemWidth = scrollHorizontally((_b = visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, -1);
+            setFakeItemWidth(calculatedFakeItemWidth);
+            setLeftItemIndex(leftItemIndex + 1);
+        }
     };
     const scrollme = (event) => {
         if (!event.nativeEvent.deltaY)
@@ -137,9 +142,16 @@ export const FinsembleDnDContext = (props) => {
     const doForceUpdate = () => {
         setForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);
     };
+    const scrollToInitialState = () => {
+        const calculatedFakeItemWidth = scrollHorizontally(containerScrollLeft, scrollFunctionState, scrollFunctionStateSetters, 1);
+        setFakeItemWidth(calculatedFakeItemWidth);
+        setLeftItemIndex(0);
+        setContainerScrollLeft(0);
+    };
     React.useLayoutEffect(doDOMManipulation);
     React.useEffect(doForceUpdate, [props.children]);
     React.useEffect(addResizeHandler(doForceUpdate), []);
+    React.useEffect(addResizeHandler(scrollToInitialState), []);
     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 } }))));
@@ -148,7 +160,7 @@ export const FinsembleDnDContext = (props) => {
     }, [SortContainer]);
     return (React.createElement("div", { id: props.id },
         showChevrons && (React.createElement(ScrollingChevron, { isDisabled: leftChevronDisabled, chevronDirection: ChevronDirection.left, showToolTip: props.showScrollButtonsTooltip, title: props.leftButtonTooltip, scrollFunction: scrollToLeft })),
-        React.createElement(SortContainer, { onSortEnd: onDragEnd, onSortStart: onDragBegin, onSortMove: onDragMove, onSortOver: onDragOver, distance: distance, axis: props.axis ?? AllowableDnDAxis.y, lockAxis: props.lockAxis }, props.children),
+        React.createElement(SortContainer, { onSortEnd: onDragEnd, onSortStart: onDragBegin, onSortMove: onDragMove, onSortOver: onDragOver, distance: distance, axis: (_h = props.axis) !== null && _h !== void 0 ? _h : AllowableDnDAxis.y, lockAxis: props.lockAxis }, props.children),
         showChevrons && (React.createElement(ScrollingChevron, { isDisabled: rightChevronDisabled, chevronDirection: ChevronDirection.right, showToolTip: props.showScrollButtonsTooltip, title: props.rightButtonTooltip, scrollFunction: scrollToRight }))));
 };
 //# sourceMappingURL=FinsembleDnDContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDnDContext.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SortableContainer } from \"react-sortable-hoc\";\r\nimport * as React from \"react\";\r\ntype ScrollFunctionState = {\r\n\tcontainerScrollLeft: number;\r\n\tcontainerMeasurements: ContainerMeasurements;\r\n};\r\n\r\ntype ScrollFunctionStateSetters = {\r\n\tsetScrollLeft: React.Dispatch<React.SetStateAction<number>>;\r\n};\r\n\r\nenum ChevronDirection {\r\n\tleft = \"left\",\r\n\tright = \"right\",\r\n}\r\n\r\nexport enum AllowableDnDAxis {\r\n\tx = \"x\",\r\n\ty = \"y\",\r\n}\r\n\r\ntype ScrollingChevronProps = {\r\n\tchevronDirection: ChevronDirection;\r\n\tisDisabled: boolean;\r\n\tshowToolTip?: boolean;\r\n\ttitle?: string;\r\n\tscrollFunction: React.MouseEventHandler;\r\n};\r\n\r\nconst SORT_CONTAINER_DRAG_DISTANCE = 10;\r\n\r\nconst defaultOnDragEnd = () => {\r\n\tconsole.warn(\"No onDragEnd passed to FinsembleDnDContext\");\r\n};\r\n\r\nconst defaultOnDragBegin = Function.prototype;\r\nconst defaultOnDrag = Function.prototype;\r\nconst defaultOnDragOver = Function.prototype;\r\nconst defaultOnLayoutUpdate = Function.prototype;\r\n\r\ntype ContainerMeasurements = {\r\n\tclientLeft: number;\r\n\tclientWidth: number;\r\n\tscrollLeft: number;\r\n\tscrollWidth: number;\r\n\toffsetLeft: number;\r\n\toffsetWidth: number;\r\n};\r\n\r\nconst DEFAULT_CONTAINER_MEASUREMENTS: ContainerMeasurements = {\r\n\tclientLeft: 0,\r\n\tclientWidth: 0,\r\n\tscrollLeft: 0,\r\n\tscrollWidth: 0,\r\n\toffsetLeft: 0,\r\n\toffsetWidth: 0,\r\n};\r\n\r\nconst DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;\r\n/**\r\n * Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.\r\n * @param overflowStateSetter\r\n */\r\nconst addResizeHandler = (overflowStateSetter: () => void) => {\r\n\treturn () => {\r\n\t\twindow.addEventListener(\"resize\", overflowStateSetter);\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener(\"resize\", overflowStateSetter);\r\n\t\t};\r\n\t};\r\n};\r\n\r\n/**\r\n * Scrolls forward or back\r\n * @param containerRef\r\n * @param distance How far to move\r\n * @param state Current scroll state\r\n * @param stateSetters Scroll state setters\r\n * @param scrollDir Whether we're scrolling forward or backwards\r\n * @param deltaY The scroll amount that came from the `wheel` event.\r\n */\r\nconst scrollHorizontally = (\r\n\tdistance: number,\r\n\tstate: ScrollFunctionState,\r\n\tstateSetters: ScrollFunctionStateSetters,\r\n\tscrollDir?: number,\r\n\tdeltaY?: number\r\n) => {\r\n\tconst { setScrollLeft } = stateSetters;\r\n\tconst { containerScrollLeft, containerMeasurements } = state;\r\n\r\n\tif (containerMeasurements.scrollWidth === 0) return;\r\n\tlet scrollAmount = 0;\r\n\r\n\tlet delta = 0;\r\n\tif (deltaY) {\r\n\t\tdelta = Math.max(-1, Math.min(1, -deltaY));\r\n\t} else if (scrollDir) {\r\n\t\tdelta = Math.max(-1, Math.min(1, scrollDir));\r\n\t}\r\n\r\n\tlet fakeItemWidth = 0;\r\n\r\n\t// advance the scroll position 40 px forward or back, depending on the mouse wheel direction.\r\n\tlet newScrollLeft = containerScrollLeft - delta * distance;\r\n\r\n\tif (scrollAmount >= distance) {\r\n\t\treturn fakeItemWidth;\r\n\t}\r\n\r\n\t// See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you\r\n\tconst rightEdgeOfScrollingViewport =\r\n\t\tcontainerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;\r\n\r\n\tconst rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;\r\n\r\n\t// if we've scrolled beyond the right-most edge of the area, calculate the fake item width\r\n\tif (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {\r\n\t\tfakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);\r\n\t}\r\n\r\n\t// if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.\r\n\tif (newScrollLeft < 0) newScrollLeft = 0;\r\n\r\n\tif (newScrollLeft !== containerScrollLeft) {\r\n\t\tsetScrollLeft(newScrollLeft);\r\n\t}\r\n\r\n\treturn fakeItemWidth;\r\n};\r\n\r\n/**\r\n * Simple component that renders the left and right chevrons.\r\n * @param props\r\n */\r\nconst ScrollingChevron = (props: ScrollingChevronProps) => {\r\n\tconst { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;\r\n\r\n\tconst classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? \"greyedOut\" : null}`;\r\n\tconst toolTip = showToolTip ? title : \"\";\r\n\treturn (\r\n\t\t<div className=\"chevron-container\" title={toolTip}>\r\n\t\t\t<i className={classNames} onClick={scrollFunction}></i>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\ntype FinsembleDnDContextProps = {\r\n\tid?: string;\r\n\tleftButtonTooltip?: string;\r\n\trightButtonTooltip?: string;\r\n\tallowHorizontalScroll?: boolean;\r\n\tshowScrollButtonsTooltip?: boolean;\r\n\tchevronScrollDistance?: number;\r\n\tonDragEnd?: Function;\r\n\tonDragStart?: Function;\r\n\tonDragMove?: Function;\r\n\tonDragOver?: Function;\r\n\tonLayoutUpdate?: Function;\r\n\ttransitionDuration?: number;\r\n\tdistance?: number;\r\n\taxis?: AllowableDnDAxis;\r\n\tlockAxis?: AllowableDnDAxis;\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.\r\n * It wraps its children and allows them to do draggy and droppy things.\r\n * It also allows for horizontal containers to provide scrolling functionality.\r\n * @param props\r\n * @param props.id ID for the container that wraps the sortable container\r\n * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling\r\n * @param props.showScrollButtonsTooltip\r\n * @param props.leftButtonTooltip Tooltip for left scroll button\r\n * @param props.rightButtonTooltip Tooltip for right scroll button\r\n * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards\r\n * @param props.onDragEnd handler for sorting\r\n * @param props.onDragBegin handler for sorting\r\n * @param props.onDragOver\r\n * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect\r\n * @param props.distance how far the user has to drag an element to trigger sorting behavior\r\n * @param props.axis whether to sort vertically or horizontally.\r\n * @param props.className optional styles to pass the the sortable container\r\n */\r\nexport const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps> = (props) => {\r\n\tconst { allowHorizontalScroll } = props;\r\n\tconst onDragEnd = props.onDragEnd ?? defaultOnDragEnd;\r\n\tconst onDragBegin = props.onDragStart ?? defaultOnDragBegin;\r\n\tconst onDragMove = props.onDragMove ?? defaultOnDrag;\r\n\tconst onDragOver = props.onDragOver ?? defaultOnDragOver;\r\n\t// This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.\r\n\tconst distance = props.distance ?? SORT_CONTAINER_DRAG_DISTANCE;\r\n\tconst onLayoutUpdate = props.onLayoutUpdate ?? defaultOnLayoutUpdate;\r\n\r\n\t// This is the stateful variable that holds the active 'scrollLeft' property for the DOM node\r\n\t// that's rendered inside of the sort container.\r\n\tconst [containerScrollLeft, setContainerScrollLeft] = React.useState(0);\r\n\t// read the comment in doForceUpdate to understand this.\r\n\tconst [forceUpdate, setForceUpdate] = React.useState(0);\r\n\r\n\t// Index of current visible left item\r\n\tconst [leftItemIndex, setLeftItemIndex] = React.useState(0);\r\n\t// Width of fake right (last) item to align the position of the left item\r\n\tconst [fakeItemWidth, setFakeItemWidth] = React.useState(0);\r\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n\t// An object with all of the measurements that we'll need to set chevron visibility.\r\n\t// If you don't understand client vs offset vs scrollWidth/Left,\r\n\t// go check out this image https://i.stack.imgur.com/Cl1IA.png\r\n\t// Here's an interactive version too: https://jsfiddle.net/y8Y32/25/\r\n\tconst containerMeasurements = containerRef.current\r\n\t\t? {\r\n\t\t\t\tclientLeft: containerRef.current.clientLeft,\r\n\t\t\t\tclientWidth: containerRef.current.clientWidth,\r\n\t\t\t\toffsetLeft: containerRef.current.offsetLeft,\r\n\t\t\t\toffsetWidth: containerRef.current.offsetWidth,\r\n\t\t\t\t// not using the actual container's scrollLeft because it may not have been set yet.\r\n\t\t\t\t// this uses the scrollLeft we have set in state.\r\n\t\t\t\tscrollLeft: containerScrollLeft,\r\n\t\t\t\tscrollWidth: containerRef.current.scrollWidth,\r\n\t\t  }\r\n\t\t: DEFAULT_CONTAINER_MEASUREMENTS;\r\n\tconst chevronScrollDistance = props.chevronScrollDistance ?? DEFAULT_CHEVRON_SCROLL_DISTANCE;\r\n\t// Whether the elements inside of the DND container have overflowed the clientWidth.\r\n\tconst isOverflowPresent =\r\n\t\t// Explicitly made this !== 0 instead of just checking whether clientWidth was truthy\r\n\t\t// so it was clear why this check was here. If it's not clear,\r\n\t\t// if the clientWidth of the containerRef is 0, we should not have any chevrons. Ever.\r\n\t\t// A client width of 0 indicates that the Ref's children haven't fully rendered.\r\n\t\tcontainerMeasurements.clientWidth !== 0 &&\r\n\t\t// On a monitor that's scaled at 100%, when clientWidth and scrollWidth are the same\r\n\t\t// there is no overflow present. When monitors are NOT scaled at 100%,\r\n\t\t// there's a chance that these two numbers are off. We'll allow for a 10px variance before\r\n\t\t// showing the scrollbars\r\n\t\t// on a 200% scaled monitor, these two numbers are off by 1.\r\n\t\tMath.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 10;\r\n\r\n\tconst showChevrons = allowHorizontalScroll && isOverflowPresent;\r\n\r\n\t// disabled === 'grayed out' and onClick won't fire. When you've scrolled all the way to the left,\r\n\t// the left chevron is disabled. If you've scrolled all the way to the right, the right chevron is disabled\r\n\tconst leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);\r\n\tconst rightChevronDisabled = !!(\r\n\t\tshowChevrons &&\r\n\t\t/**\r\n\t\t * This is a calculation that figures out where the right edge of the current viewport is.\r\n\t\t * It's a little tricky to imagine. So look at this diagram.\r\n\t\t \t+-------------------------------------------scrollWidth-------------------------------------------+\r\n\t\t\t\t\t\t\t\t |----------------------------------------------------|\r\n\t\t\t\t\t\t\t\t |\t\t\t\t\t\t\t\t\t\t\t\t\t  |\r\n\t\t\t+-------------------------------------------------------------------------------------------------+\r\n\t\t\t|(0)                 |(200)                                               |(200)                  |(300)\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    | (A)                   |\r\n\t\t\t+-------------------------------------------------------------------------------------------------+\r\n\t\t\t\t\t\t\t\t | \t\t\t\t\t\t\t\t\t\t\t\t\t  |\r\n\t\t\t\t\t\t\t\t +----------------------clientWidth-------------------+ \r\n\t\t\t\t\t\t\t\t ^                                                    ^\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t +                                                    +\r\n\t\t\t\t\t\t\t\t scrollLeft = 100                                    scrollRight = 200\r\n\r\n\t\t * The numbers in parens are the numbers for the 'scroll box'. We're trying to figure out where the point labeled (A) is located. \r\n\t\t * \r\n\t\t * Walking through the calculation, we take the scrollWidth and subtract the scrollLeft. This gives us the right edge of the scroll box.\r\n\t\t * 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,\r\n\t\t * then we cannot scroll any further, and the chevron should be disabled.\r\n\t\t */\r\n\t\tcontainerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0\r\n\t);\r\n\r\n\tconst scrollFunctionState = {\r\n\t\tcontainerScrollLeft,\r\n\t\tcontainerMeasurements,\r\n\t};\r\n\r\n\tconst scrollFunctionStateSetters = {\r\n\t\tsetScrollLeft: setContainerScrollLeft,\r\n\t};\r\n\r\n\t/**\r\n\t * Left Chevron's onClickHandler\r\n\t */\r\n\tconst scrollToLeft = () => {\r\n\t\tif (leftChevronDisabled) return;\r\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex - 1] as HTMLDivElement;\r\n\t\tlet calculatedFakeItemWidth = scrollHorizontally(\r\n\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\r\n\t\t\tscrollFunctionState,\r\n\t\t\tscrollFunctionStateSetters,\r\n\t\t\t1\r\n\t\t);\r\n\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\r\n\t\tsetLeftItemIndex(leftItemIndex - 1);\r\n\t};\r\n\r\n\t/**\r\n\t * Right Chevron's onClickHandler\r\n\t */\r\n\tconst scrollToRight = () => {\r\n\t\tif (rightChevronDisabled) return;\r\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex] as HTMLDivElement;\r\n\t\tlet calculatedFakeItemWidth = scrollHorizontally(\r\n\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\r\n\t\t\tscrollFunctionState,\r\n\t\t\tscrollFunctionStateSetters,\r\n\t\t\t-1\r\n\t\t);\r\n\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\r\n\t\tsetLeftItemIndex(leftItemIndex + 1);\r\n\t};\r\n\r\n\t/**\r\n\t * \"wheel\" handler. scrolls forward or backwards\r\n\t * @param event\r\n\t */\r\n\tconst scrollme = (event: React.WheelEvent<HTMLDivElement>) => {\r\n\t\tif (!event.nativeEvent.deltaY) return;\r\n\t\tscrollHorizontally(20, scrollFunctionState, scrollFunctionStateSetters, event.nativeEvent.deltaY);\r\n\t};\r\n\r\n\tconst doDOMManipulation = () => {\r\n\t\tif (props.allowHorizontalScroll && containerRef.current) containerRef.current.scrollLeft = containerScrollLeft;\r\n\t};\r\n\r\n\t// This function increments `forceUpdate`, which is a piece of state that's irrelevant to the\r\n\t// rendering of this component. After a resize, we need to re-measure the DOM so we can figure out if\r\n\t// the chevrons are necessary. Because no state changes on a resize. the component doesn't rerender.\r\n\t// This function will change state, which will cause a re-rendering, and the component will be re-measured.\r\n\tconst doForceUpdate = () => {\r\n\t\tsetForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);\r\n\t};\r\n\r\n\t// After every render, set the actual DOM element's scrollLeft to be whatever we calculated during the previous render.\r\n\tReact.useLayoutEffect(doDOMManipulation);\r\n\t// after the children change, we need to force an update so that we can re-measure the DOM after the render happens\r\n\t// without this, adding and removing elements from the DNDContext won't recalculate whether the chevrons should render\r\n\tReact.useEffect(doForceUpdate, [props.children]);\r\n\t// Whenever the window resizes, force an update so that the DOM is re-measured.\r\n\tReact.useEffect(addResizeHandler(doForceUpdate), []);\r\n\r\n\t/**\r\n\t * Actual container that provides drag and drop functionality\r\n\t */\r\n\tconst SortContainer = SortableContainer((sortableContainerProps: any) => (\r\n\t\t<div onWheel={scrollme} ref={containerRef} className={props.className}>\r\n\t\t\t{sortableContainerProps.children}\r\n\t\t\t{/* fake element for scrolling */}\r\n\t\t\t<div style={{ width: `${fakeItemWidth}px`, flexShrink: 0 }} />\r\n\t\t</div>\r\n\t));\r\n\r\n\t// After every render, call onLayoutUpdate function\r\n\tReact.useLayoutEffect(() => {\r\n\t\tonLayoutUpdate();\r\n\t}, [SortContainer]);\r\n\r\n\treturn (\r\n\t\t<div id={props.id}>\r\n\t\t\t{showChevrons && (\r\n\t\t\t\t<ScrollingChevron\r\n\t\t\t\t\tisDisabled={leftChevronDisabled}\r\n\t\t\t\t\tchevronDirection={ChevronDirection.left}\r\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\r\n\t\t\t\t\ttitle={props.leftButtonTooltip}\r\n\t\t\t\t\tscrollFunction={scrollToLeft}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t<SortContainer\r\n\t\t\t\tonSortEnd={onDragEnd}\r\n\t\t\t\tonSortStart={onDragBegin}\r\n\t\t\t\tonSortMove={onDragMove}\r\n\t\t\t\tonSortOver={onDragOver}\r\n\t\t\t\tdistance={distance}\r\n\t\t\t\taxis={props.axis ?? AllowableDnDAxis.y}\r\n\t\t\t\tlockAxis={props.lockAxis}\r\n\t\t\t>\r\n\t\t\t\t{props.children}\r\n\t\t\t</SortContainer>\r\n\t\t\t{showChevrons && (\r\n\t\t\t\t<ScrollingChevron\r\n\t\t\t\t\tisDisabled={rightChevronDisabled}\r\n\t\t\t\t\tchevronDirection={ChevronDirection.right}\r\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\r\n\t\t\t\t\ttitle={props.rightButtonTooltip}\r\n\t\t\t\t\tscrollFunction={scrollToRight}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDnDContext.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SortableContainer } from \"react-sortable-hoc\";\r\nimport * as React from \"react\";\r\ntype ScrollFunctionState = {\r\n\tcontainerScrollLeft: number;\r\n\tcontainerMeasurements: ContainerMeasurements;\r\n};\r\n\r\ntype ScrollFunctionStateSetters = {\r\n\tsetScrollLeft: React.Dispatch<React.SetStateAction<number>>;\r\n};\r\n\r\nenum ChevronDirection {\r\n\tleft = \"left\",\r\n\tright = \"right\",\r\n}\r\n\r\nexport enum AllowableDnDAxis {\r\n\tx = \"x\",\r\n\ty = \"y\",\r\n}\r\n\r\ntype ScrollingChevronProps = {\r\n\tchevronDirection: ChevronDirection;\r\n\tisDisabled: boolean;\r\n\tshowToolTip?: boolean;\r\n\ttitle?: string;\r\n\tscrollFunction: React.MouseEventHandler;\r\n};\r\n\r\nconst SORT_CONTAINER_DRAG_DISTANCE = 10;\r\n\r\nconst defaultOnDragEnd = () => {\r\n\tconsole.warn(\"No onDragEnd passed to FinsembleDnDContext\");\r\n};\r\n\r\nconst defaultOnDragBegin = Function.prototype;\r\nconst defaultOnDrag = Function.prototype;\r\nconst defaultOnDragOver = Function.prototype;\r\nconst defaultOnLayoutUpdate = Function.prototype;\r\n\r\ntype ContainerMeasurements = {\r\n\tclientLeft: number;\r\n\tclientWidth: number;\r\n\tscrollLeft: number;\r\n\tscrollWidth: number;\r\n\toffsetLeft: number;\r\n\toffsetWidth: number;\r\n};\r\n\r\nconst DEFAULT_CONTAINER_MEASUREMENTS: ContainerMeasurements = {\r\n\tclientLeft: 0,\r\n\tclientWidth: 0,\r\n\tscrollLeft: 0,\r\n\tscrollWidth: 0,\r\n\toffsetLeft: 0,\r\n\toffsetWidth: 0,\r\n};\r\n\r\nconst DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;\r\n/**\r\n * Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.\r\n * @param overflowStateSetter\r\n */\r\nconst addResizeHandler = (overflowStateSetter: () => void) => () => {\r\n\twindow.addEventListener(\"resize\", overflowStateSetter);\r\n\treturn () => {\r\n\t\twindow.removeEventListener(\"resize\", overflowStateSetter);\r\n\t};\r\n};\r\n\r\n/**\r\n * Scrolls forward or back\r\n * @param containerRef\r\n * @param distance How far to move\r\n * @param state Current scroll state\r\n * @param stateSetters Scroll state setters\r\n * @param scrollDir Whether we're scrolling forward or backwards\r\n * @param deltaY The scroll amount that came from the `wheel` event.\r\n */\r\nconst scrollHorizontally = (\r\n\tdistance: number,\r\n\tstate: ScrollFunctionState,\r\n\tstateSetters: ScrollFunctionStateSetters,\r\n\tscrollDir?: number,\r\n\tdeltaY?: number\r\n) => {\r\n\tconst { setScrollLeft } = stateSetters;\r\n\tconst { containerScrollLeft, containerMeasurements } = state;\r\n\r\n\tif (containerMeasurements.scrollWidth === 0) return;\r\n\tlet scrollAmount = 0;\r\n\r\n\tlet delta = 0;\r\n\tif (deltaY) {\r\n\t\tdelta = Math.max(-1, Math.min(1, -deltaY));\r\n\t} else if (scrollDir) {\r\n\t\tdelta = Math.max(-1, Math.min(1, scrollDir));\r\n\t}\r\n\r\n\tlet fakeItemWidth = 0;\r\n\r\n\t// advance the scroll position 40 px forward or back, depending on the mouse wheel direction.\r\n\t// eslint-disable-next-line no-mixed-operators\r\n\tlet newScrollLeft = containerScrollLeft - delta * distance;\r\n\r\n\tif (scrollAmount >= distance) {\r\n\t\treturn fakeItemWidth;\r\n\t}\r\n\r\n\t// See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you\r\n\tconst rightEdgeOfScrollingViewport =\r\n\t\tcontainerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;\r\n\r\n\tconst rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;\r\n\r\n\t// if we've scrolled beyond the right-most edge of the area, calculate the fake item width\r\n\tif (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {\r\n\t\tfakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);\r\n\t}\r\n\r\n\t// if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.\r\n\tif (newScrollLeft < 0) newScrollLeft = 0;\r\n\r\n\tif (newScrollLeft !== containerScrollLeft) {\r\n\t\tsetScrollLeft(newScrollLeft);\r\n\t}\r\n\r\n\treturn fakeItemWidth;\r\n};\r\n\r\n/**\r\n * Simple component that renders the left and right chevrons.\r\n * @param props\r\n */\r\nconst ScrollingChevron = (props: ScrollingChevronProps) => {\r\n\tconst { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;\r\n\r\n\tconst classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? \"greyedOut\" : null}`;\r\n\tconst toolTip = showToolTip ? title : \"\";\r\n\treturn (\r\n\t\t<div className=\"chevron-container\" title={toolTip}>\r\n\t\t\t<i className={classNames} onClick={scrollFunction}></i>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\ntype FinsembleDnDContextProps = {\r\n\tid?: string;\r\n\tleftButtonTooltip?: string;\r\n\trightButtonTooltip?: string;\r\n\tallowHorizontalScroll?: boolean;\r\n\tshowScrollButtonsTooltip?: boolean;\r\n\tchevronScrollDistance?: number;\r\n\tonDragEnd?: Function;\r\n\tonDragStart?: Function;\r\n\tonDragMove?: Function;\r\n\tonDragOver?: Function;\r\n\tonLayoutUpdate?: Function;\r\n\ttransitionDuration?: number;\r\n\tdistance?: number;\r\n\taxis?: AllowableDnDAxis;\r\n\tlockAxis?: AllowableDnDAxis;\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.\r\n * It wraps its children and allows them to do draggy and droppy things.\r\n * It also allows for horizontal containers to provide scrolling functionality.\r\n * @param props\r\n * @param props.id ID for the container that wraps the sortable container\r\n * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling\r\n * @param props.showScrollButtonsTooltip\r\n * @param props.leftButtonTooltip Tooltip for left scroll button\r\n * @param props.rightButtonTooltip Tooltip for right scroll button\r\n * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards\r\n * @param props.onDragEnd handler for sorting\r\n * @param props.onDragBegin handler for sorting\r\n * @param props.onDragOver\r\n * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect\r\n * @param props.distance how far the user has to drag an element to trigger sorting behavior\r\n * @param props.axis whether to sort vertically or horizontally.\r\n * @param props.className optional styles to pass the the sortable container\r\n */\r\nexport const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps> = (props) => {\r\n\tconst { allowHorizontalScroll } = props;\r\n\tconst onDragEnd = props.onDragEnd ?? defaultOnDragEnd;\r\n\tconst onDragBegin = props.onDragStart ?? defaultOnDragBegin;\r\n\tconst onDragMove = props.onDragMove ?? defaultOnDrag;\r\n\tconst onDragOver = props.onDragOver ?? defaultOnDragOver;\r\n\t// This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.\r\n\tconst distance = props.distance ?? SORT_CONTAINER_DRAG_DISTANCE;\r\n\tconst onLayoutUpdate = props.onLayoutUpdate ?? defaultOnLayoutUpdate;\r\n\r\n\t// This is the stateful variable that holds the active 'scrollLeft' property for the DOM node\r\n\t// that's rendered inside of the sort container.\r\n\tconst [containerScrollLeft, setContainerScrollLeft] = React.useState(0);\r\n\t// read the comment in doForceUpdate to understand this.\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tconst [forceUpdate, setForceUpdate] = React.useState(0);\r\n\r\n\t// Index of current visible left item\r\n\tconst [leftItemIndex, setLeftItemIndex] = React.useState(0);\r\n\t// Width of fake right (last) item to align the position of the left item\r\n\tconst [fakeItemWidth, setFakeItemWidth] = React.useState(0);\r\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n\t// An object with all of the measurements that we'll need to set chevron visibility.\r\n\t// If you don't understand client vs offset vs scrollWidth/Left,\r\n\t// go check out this image https://i.stack.imgur.com/Cl1IA.png\r\n\t// Here's an interactive version too: https://jsfiddle.net/y8Y32/25/\r\n\tconst containerMeasurements = containerRef.current\r\n\t\t? {\r\n\t\t\t\tclientLeft: containerRef.current.clientLeft,\r\n\t\t\t\tclientWidth: containerRef.current.clientWidth,\r\n\t\t\t\toffsetLeft: containerRef.current.offsetLeft,\r\n\t\t\t\toffsetWidth: containerRef.current.offsetWidth,\r\n\t\t\t\t// not using the actual container's scrollLeft because it may not have been set yet.\r\n\t\t\t\t// this uses the scrollLeft we have set in state.\r\n\t\t\t\tscrollLeft: containerScrollLeft,\r\n\t\t\t\tscrollWidth: containerRef.current.scrollWidth,\r\n\t\t  }\r\n\t\t: DEFAULT_CONTAINER_MEASUREMENTS;\r\n\tconst chevronScrollDistance = props.chevronScrollDistance ?? DEFAULT_CHEVRON_SCROLL_DISTANCE;\r\n\t// Whether the elements inside of the DND container have overflowed the clientWidth.\r\n\tconst isOverflowPresent =\r\n\t\t// Explicitly made this !== 0 instead of just checking whether clientWidth was truthy\r\n\t\t// so it was clear why this check was here. If it's not clear,\r\n\t\t// if the clientWidth of the containerRef is 0, we should not have any chevrons. Ever.\r\n\t\t// A client width of 0 indicates that the Ref's children haven't fully rendered.\r\n\t\tcontainerMeasurements.clientWidth !== 0 &&\r\n\t\t// On a monitor that's scaled at 100%, when clientWidth and scrollWidth are the same\r\n\t\t// there is no overflow present. When monitors are NOT scaled at 100%,\r\n\t\t// there's a chance that these two numbers are off.\r\n\t\tMath.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;\r\n\r\n\tconst showChevrons = allowHorizontalScroll && isOverflowPresent;\r\n\r\n\t// disabled === 'grayed out' and onClick won't fire. When you've scrolled all the way to the left,\r\n\t// the left chevron is disabled. If you've scrolled all the way to the right, the right chevron is disabled\r\n\tconst leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);\r\n\tconst rightChevronDisabled = !!(\r\n\t\tshowChevrons &&\r\n\t\t/**\r\n\t\t * This is a calculation that figures out where the right edge of the current viewport is.\r\n\t\t * It's a little tricky to imagine. So look at this diagram.\r\n\t\t \t+-------------------------------------------scrollWidth-------------------------------------------+\r\n\t\t\t\t\t\t\t\t |----------------------------------------------------|\r\n\t\t\t\t\t\t\t\t |\t\t\t\t\t\t\t\t\t\t\t\t\t  |\r\n\t\t\t+-------------------------------------------------------------------------------------------------+\r\n\t\t\t|(0)                 |(200)                                               |(200)                  |(300)\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    |                       |\r\n\t\t\t|                    |                                                    | (A)                   |\r\n\t\t\t+-------------------------------------------------------------------------------------------------+\r\n\t\t\t\t\t\t\t\t | \t\t\t\t\t\t\t\t\t\t\t\t\t  |\r\n\t\t\t\t\t\t\t\t +----------------------clientWidth-------------------+ \r\n\t\t\t\t\t\t\t\t ^                                                    ^\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t |                                                    |\r\n\t\t\t\t\t\t\t\t +                                                    +\r\n\t\t\t\t\t\t\t\t scrollLeft = 100                                    scrollRight = 200\r\n\r\n\t\t * The numbers in parens are the numbers for the 'scroll box'. We're trying to figure out where the point labeled (A) is located. \r\n\t\t * \r\n\t\t * Walking through the calculation, we take the scrollWidth and subtract the scrollLeft. This gives us the right edge of the scroll box.\r\n\t\t * 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,\r\n\t\t * then we cannot scroll any further, and the chevron should be disabled.\r\n\t\t */\r\n\t\tcontainerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0\r\n\t);\r\n\r\n\tconst scrollFunctionState = {\r\n\t\tcontainerScrollLeft,\r\n\t\tcontainerMeasurements,\r\n\t};\r\n\r\n\tconst scrollFunctionStateSetters = {\r\n\t\tsetScrollLeft: setContainerScrollLeft,\r\n\t};\r\n\r\n\t/**\r\n\t * Left Chevron's onClickHandler\r\n\t */\r\n\tconst scrollToLeft = () => {\r\n\t\tif (leftChevronDisabled) return;\r\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex - 1] as HTMLDivElement;\r\n\t\tif (visibleLeftItem) {\r\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\r\n\t\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\r\n\t\t\t\tscrollFunctionState,\r\n\t\t\t\tscrollFunctionStateSetters,\r\n\t\t\t\t1\r\n\t\t\t);\r\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\r\n\t\t\tsetLeftItemIndex(leftItemIndex - 1);\r\n\t\t}\r\n\t};\r\n\r\n\t/**\r\n\t * Right Chevron's onClickHandler\r\n\t */\r\n\tconst scrollToRight = () => {\r\n\t\tif (rightChevronDisabled) return;\r\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex] as HTMLDivElement;\r\n\t\tif (visibleLeftItem) {\r\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\r\n\t\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\r\n\t\t\t\tscrollFunctionState,\r\n\t\t\t\tscrollFunctionStateSetters,\r\n\t\t\t\t-1\r\n\t\t\t);\r\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\r\n\t\t\tsetLeftItemIndex(leftItemIndex + 1);\r\n\t\t}\r\n\t};\r\n\r\n\t/**\r\n\t * \"wheel\" handler. scrolls forward or backwards\r\n\t * @param event\r\n\t */\r\n\tconst scrollme = (event: React.WheelEvent<HTMLDivElement>) => {\r\n\t\tif (!event.nativeEvent.deltaY) return;\r\n\t\tscrollHorizontally(20, scrollFunctionState, scrollFunctionStateSetters, event.nativeEvent.deltaY);\r\n\t};\r\n\r\n\tconst doDOMManipulation = () => {\r\n\t\tif (props.allowHorizontalScroll && containerRef.current) containerRef.current.scrollLeft = containerScrollLeft;\r\n\t};\r\n\r\n\t// This function increments `forceUpdate`, which is a piece of state that's irrelevant to the\r\n\t// rendering of this component. After a resize, we need to re-measure the DOM so we can figure out if\r\n\t// the chevrons are necessary. Because no state changes on a resize. the component doesn't rerender.\r\n\t// This function will change state, which will cause a re-rendering, and the component will be re-measured.\r\n\tconst doForceUpdate = () => {\r\n\t\tsetForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);\r\n\t};\r\n\r\n\t// This function is needed for correct positioning after resizing the window.\r\n\tconst scrollToInitialState = () => {\r\n\t\tconst calculatedFakeItemWidth = scrollHorizontally(\r\n\t\t\tcontainerScrollLeft,\r\n\t\t\tscrollFunctionState,\r\n\t\t\tscrollFunctionStateSetters,\r\n\t\t\t1\r\n\t\t);\r\n\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\r\n\t\tsetLeftItemIndex(0);\r\n\t\tsetContainerScrollLeft(0);\r\n\t};\r\n\r\n\t// After every render, set the actual DOM element's scrollLeft to be whatever we calculated during the previous render.\r\n\tReact.useLayoutEffect(doDOMManipulation);\r\n\t// after the children change, we need to force an update so that we can re-measure the DOM after the render happens\r\n\t// without this, adding and removing elements from the DNDContext won't recalculate whether the chevrons should render\r\n\tReact.useEffect(doForceUpdate, [props.children]);\r\n\t// Whenever the window resizes, force an update so that the DOM is re-measured.\r\n\tReact.useEffect(addResizeHandler(doForceUpdate), []);\r\n\t// Whenever the window resizes, scroll widgets to the left.\r\n\tReact.useEffect(addResizeHandler(scrollToInitialState), []);\r\n\r\n\t/**\r\n\t * Actual container that provides drag and drop functionality\r\n\t */\r\n\tconst SortContainer = SortableContainer((sortableContainerProps: any) => (\r\n\t\t<div onWheel={scrollme} ref={containerRef} className={props.className}>\r\n\t\t\t{sortableContainerProps.children}\r\n\t\t\t{/* fake element for scrolling */}\r\n\t\t\t<div style={{ width: `${fakeItemWidth}px`, flexShrink: 0 }} />\r\n\t\t</div>\r\n\t));\r\n\r\n\t// After every render, call onLayoutUpdate function\r\n\tReact.useLayoutEffect(() => {\r\n\t\tonLayoutUpdate();\r\n\t}, [SortContainer]);\r\n\r\n\treturn (\r\n\t\t<div id={props.id}>\r\n\t\t\t{showChevrons && (\r\n\t\t\t\t<ScrollingChevron\r\n\t\t\t\t\tisDisabled={leftChevronDisabled}\r\n\t\t\t\t\tchevronDirection={ChevronDirection.left}\r\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\r\n\t\t\t\t\ttitle={props.leftButtonTooltip}\r\n\t\t\t\t\tscrollFunction={scrollToLeft}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t<SortContainer\r\n\t\t\t\tonSortEnd={onDragEnd}\r\n\t\t\t\tonSortStart={onDragBegin}\r\n\t\t\t\tonSortMove={onDragMove}\r\n\t\t\t\tonSortOver={onDragOver}\r\n\t\t\t\tdistance={distance}\r\n\t\t\t\taxis={props.axis ?? AllowableDnDAxis.y}\r\n\t\t\t\tlockAxis={props.lockAxis}\r\n\t\t\t>\r\n\t\t\t\t{props.children}\r\n\t\t\t</SortContainer>\r\n\t\t\t{showChevrons && (\r\n\t\t\t\t<ScrollingChevron\r\n\t\t\t\t\tisDisabled={rightChevronDisabled}\r\n\t\t\t\t\tchevronDirection={ChevronDirection.right}\r\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\r\n\t\t\t\t\ttitle={props.rightButtonTooltip}\r\n\t\t\t\t\tscrollFunction={scrollToRight}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/legacyControls/FinsembleDraggable.js

@@ -10,9 +10,9 @@ const SortableItem = SortableElement(({ onClick, className, children, onKeydown
         }
     } }, children)));
 export const FinsembleDraggable = (props) => {
-    const draggableId = props.draggableId ?? `Id-Unset-${Math.random() * 23214}`;
-    const isDragDisabled = props.isDragDisabled ?? false;
-    const onClick = props.onClick ?? defaultClickHandler;
+    var _a, _b;
+    const draggableId = (_a = props.draggableId) !== null && _a !== void 0 ? _a : `Id-Unset-${Math.random() * 23214}`;
+    const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : defaultClickHandler;
     const className = props.wrapperClass;
     return (React.createElement(SortableItem, { key: draggableId, index: props.index, onClick: onClick, className: className, onKeydown: props.onKeydown }, props.children));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDraggable.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AASrC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAqB,EAAE,EAAE,CAAC,CACxG,6BACC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;QACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YACvC,OAAO,EAAE,CAAC;SACV;QACD,IAAI,SAAS,EAAE;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;SACb;IACF,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC,CAAC;AAKH,MAAM,CAAC,MAAM,kBAAkB,GAA4C,CAAC,KAAK,EAAE,EAAE;IACpF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC7E,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC;IACrD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,mBAAmB,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC;IAErC,OAAO,CACN,oBAAC,YAAY,IACZ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,IAEzB,KAAK,CAAC,QAAQ,CACD,CACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { SortableElement } from \"react-sortable-hoc\";\r\nimport * as React from \"react\";\r\n\r\ntype DraggableProps = {\r\n\tdraggableId: string;\r\n\tisDragDisabled?: boolean;\r\n\tindex: number;\r\n\tonClick?: () => void;\r\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\r\n\twrapperClass?: string;\r\n};\r\n\r\nconst defaultClickHandler = () => {};\r\n\r\ntype SortableItemProps = {\r\n\tonClick: any;\r\n\tclassName: any;\r\n\tchildren: any;\r\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\r\n};\r\n\r\nconst SortableItem = SortableElement(({ onClick, className, children, onKeydown }: SortableItemProps) => (\r\n\t<div\r\n\t\tonClick={onClick}\r\n\t\tclassName={className}\r\n\t\ttabIndex={0}\r\n\t\trole=\"button\"\r\n\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\r\n\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\r\n\t\t\t\tonClick();\r\n\t\t\t}\r\n\t\t\tif (onKeydown) {\r\n\t\t\t\tonKeydown(e);\r\n\t\t\t}\r\n\t\t}}\r\n\t>\r\n\t\t{children}\r\n\t</div>\r\n));\r\n\r\n/**\r\n * A FinsembleDraggable is a helper that makes its children draggable\r\n */\r\nexport const FinsembleDraggable: React.FunctionComponent<DraggableProps> = (props) => {\r\n\tconst draggableId = props.draggableId ?? `Id-Unset-${Math.random() * 23214}`;\r\n\tconst isDragDisabled = props.isDragDisabled ?? false;\r\n\tconst onClick = props.onClick ?? defaultClickHandler;\r\n\tconst className = props.wrapperClass;\r\n\r\n\treturn (\r\n\t\t<SortableItem\r\n\t\t\tkey={draggableId}\r\n\t\t\tindex={props.index}\r\n\t\t\tonClick={onClick}\r\n\t\t\tclassName={className}\r\n\t\t\tonKeydown={props.onKeydown}\r\n\t\t>\r\n\t\t\t{props.children}\r\n\t\t</SortableItem>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDraggable.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AASrC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAqB,EAAE,EAAE,CAAC,CACxG,6BACC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;QACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YACvC,OAAO,EAAE,CAAC;SACV;QACD,IAAI,SAAS,EAAE;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;SACb;IACF,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC,CAAC;AAKH,MAAM,CAAC,MAAM,kBAAkB,GAA4C,CAAC,KAAK,EAAE,EAAE;;IACpF,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC7E,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,mBAAmB,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC;IAErC,OAAO,CACN,oBAAC,YAAY,IACZ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,IAEzB,KAAK,CAAC,QAAQ,CACD,CACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { SortableElement } from \"react-sortable-hoc\";\r\nimport * as React from \"react\";\r\n\r\ntype DraggableProps = {\r\n\tdraggableId: string;\r\n\tisDragDisabled?: boolean;\r\n\tindex: number;\r\n\tonClick?: () => void;\r\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\r\n\twrapperClass?: string;\r\n};\r\n\r\nconst defaultClickHandler = () => {};\r\n\r\ntype SortableItemProps = {\r\n\tonClick: any;\r\n\tclassName: any;\r\n\tchildren: any;\r\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\r\n};\r\n\r\nconst SortableItem = SortableElement(({ onClick, className, children, onKeydown }: SortableItemProps) => (\r\n\t<div\r\n\t\tonClick={onClick}\r\n\t\tclassName={className}\r\n\t\ttabIndex={0}\r\n\t\trole=\"button\"\r\n\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\r\n\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\r\n\t\t\t\tonClick();\r\n\t\t\t}\r\n\t\t\tif (onKeydown) {\r\n\t\t\t\tonKeydown(e);\r\n\t\t\t}\r\n\t\t}}\r\n\t>\r\n\t\t{children}\r\n\t</div>\r\n));\r\n\r\n/**\r\n * A FinsembleDraggable is a helper that makes its children draggable\r\n */\r\nexport const FinsembleDraggable: React.FunctionComponent<DraggableProps> = (props) => {\r\n\tconst draggableId = props.draggableId ?? `Id-Unset-${Math.random() * 23214}`;\r\n\tconst onClick = props.onClick ?? defaultClickHandler;\r\n\tconst className = props.wrapperClass;\r\n\r\n\treturn (\r\n\t\t<SortableItem\r\n\t\t\tkey={draggableId}\r\n\t\t\tindex={props.index}\r\n\t\t\tonClick={onClick}\r\n\t\t\tclassName={className}\r\n\t\t\tonKeydown={props.onKeydown}\r\n\t\t>\r\n\t\t\t{props.children}\r\n\t\t</SortableItem>\r\n\t);\r\n};\r\n"]}

package/react/components/legacyControls/FinsembleHoverDetector.js

@@ -1,12 +1,13 @@
 import * as React from "react";
 export const FinsembleHoverDetector = (props) => {
+    var _a;
     const onMouseEnter = () => {
         props.hoverAction("true");
     };
     const onMouseLeave = () => {
         props.hoverAction("false");
     };
-    let edge = props.edge ?? "";
+    let edge = (_a = props.edge) !== null && _a !== void 0 ? _a : "";
     let top = 5, bottom = 5, left = 5, right = 5;
     if (edge !== "") {
         top = bottom = left = right = 0;

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleHoverDetector.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleHoverDetector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,CAAC,MAAM,sBAAsB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAMrG,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC;IAOF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;IAC5B,IAAI,GAAG,GAAG,CAAC,EACV,MAAM,GAAG,CAAC,EACV,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,CAAC;IAEX,IAAI,IAAI,KAAK,EAAE,EAAE;QAChB,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC;QAC5C,IAAI,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAAE,MAAM,GAAG,CAAC,CAAC;QAClD,IAAI,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAAE,IAAI,GAAG,CAAC,CAAC;QAC9C,IAAI,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAAE,KAAK,GAAG,CAAC,CAAC;KAChD;IAED,OAAO,CACN,6BACC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,KAAK;YACZ,GAAG,EAAE,GAAG;YACR,MAAM,EAAE,MAAM;SACd,GACK,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\nimport * as React from \"react\";\r\n\r\ntype FinsembleHoverDetectorProps = {\r\n\thoverAction: (hovering: string) => void;\r\n\tedge: string;\r\n};\r\n/**\r\n * This detects mouseover and mouseout and reacts by setting the hover attribute of the parent. We use this because the :hover pseudo-class doesn't detect\r\n * when the mouse leaves if it is on the edge of a finsemble window. This class requires the property \"hoverAction\" which should point back to a function\r\n * in the parent class to call to toggle the hover state. Also requires the property \"edge\" which can be \"right\",\"left\",\"top\",\"bottom\" or a combination (separated by whitespace).\r\n * The hover detector will set its positioning within the parent element depending on which edges are enabled. If edge is not specified, then 5 pixels will be left on every edge.\r\n *\r\n * The parent element must have position: relative or position: absolute!\r\n *\r\n * @since version 3.1.1 FinsembleHoverDetector is now in the finsemble-react-controls repo\r\n * @since version 3.1.1 FinsembleHoverDetector now uses dynamic styles. The fsbl-hover-detector-* css classes are deprecated.\r\n */\r\nexport const FinsembleHoverDetector: React.FunctionComponent<FinsembleHoverDetectorProps> = (props) => {\r\n\t/**\r\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\r\n\t *\r\n\t * @memberof FinsembleHoverDetector\r\n\t */\r\n\tconst onMouseEnter = () => {\r\n\t\tprops.hoverAction(\"true\");\r\n\t};\r\n\r\n\t/**\r\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\r\n\t *\r\n\t * @memberof FinsembleHoverDetector\r\n\t */\r\n\tconst onMouseLeave = () => {\r\n\t\tprops.hoverAction(\"false\");\r\n\t};\r\n\r\n\tlet edge = props.edge ?? \"\";\r\n\tlet top = 5,\r\n\t\tbottom = 5,\r\n\t\tleft = 5,\r\n\t\tright = 5;\r\n\r\n\tif (edge !== \"\") {\r\n\t\ttop = bottom = left = right = 0;\r\n\t\tconst splitEdge = edge.split(/[ ,]+/); // split by whitespace or commas\r\n\t\tif (splitEdge.indexOf(\"top\") != -1) top = 5;\r\n\t\tif (splitEdge.indexOf(\"bottom\") != -1) bottom = 5;\r\n\t\tif (splitEdge.indexOf(\"left\") != -1) left = 5;\r\n\t\tif (splitEdge.indexOf(\"right\") != -1) right = 5;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tonMouseEnter={onMouseEnter}\r\n\t\t\tonMouseLeave={onMouseLeave}\r\n\t\t\tstyle={{\r\n\t\t\t\tposition: \"absolute\",\r\n\t\t\t\tleft: left,\r\n\t\t\t\tright: right,\r\n\t\t\t\ttop: top,\r\n\t\t\t\tbottom: bottom,\r\n\t\t\t}}\r\n\t\t></div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleHoverDetector.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleHoverDetector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,CAAC,MAAM,sBAAsB,GAAyD,CAAC,KAAK,EAAE,EAAE;;IAMrG,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC;IAOF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAI,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC;IAC5B,IAAI,GAAG,GAAG,CAAC,EACV,MAAM,GAAG,CAAC,EACV,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,CAAC;IAEX,IAAI,IAAI,KAAK,EAAE,EAAE;QAChB,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC;QAC5C,IAAI,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAAE,MAAM,GAAG,CAAC,CAAC;QAClD,IAAI,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAAE,IAAI,GAAG,CAAC,CAAC;QAC9C,IAAI,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAAE,KAAK,GAAG,CAAC,CAAC;KAChD;IAED,OAAO,CACN,6BACC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,KAAK;YACZ,GAAG,EAAE,GAAG;YACR,MAAM,EAAE,MAAM;SACd,GACK,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\nimport * as React from \"react\";\r\n\r\ntype FinsembleHoverDetectorProps = {\r\n\thoverAction: (hovering: string) => void;\r\n\tedge: string;\r\n};\r\n/**\r\n * This detects mouseover and mouseout and reacts by setting the hover attribute of the parent. We use this because the :hover pseudo-class doesn't detect\r\n * when the mouse leaves if it is on the edge of a finsemble window. This class requires the property \"hoverAction\" which should point back to a function\r\n * in the parent class to call to toggle the hover state. Also requires the property \"edge\" which can be \"right\",\"left\",\"top\",\"bottom\" or a combination (separated by whitespace).\r\n * The hover detector will set its positioning within the parent element depending on which edges are enabled. If edge is not specified, then 5 pixels will be left on every edge.\r\n *\r\n * The parent element must have position: relative or position: absolute!\r\n *\r\n * @since version 3.1.1 FinsembleHoverDetector is now in the finsemble-react-controls repo\r\n * @since version 3.1.1 FinsembleHoverDetector now uses dynamic styles. The fsbl-hover-detector-* css classes are deprecated.\r\n */\r\nexport const FinsembleHoverDetector: React.FunctionComponent<FinsembleHoverDetectorProps> = (props) => {\r\n\t/**\r\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\r\n\t *\r\n\t * @memberof FinsembleHoverDetector\r\n\t */\r\n\tconst onMouseEnter = () => {\r\n\t\tprops.hoverAction(\"true\");\r\n\t};\r\n\r\n\t/**\r\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\r\n\t *\r\n\t * @memberof FinsembleHoverDetector\r\n\t */\r\n\tconst onMouseLeave = () => {\r\n\t\tprops.hoverAction(\"false\");\r\n\t};\r\n\r\n\tlet edge = props.edge ?? \"\";\r\n\tlet top = 5,\r\n\t\tbottom = 5,\r\n\t\tleft = 5,\r\n\t\tright = 5;\r\n\r\n\tif (edge !== \"\") {\r\n\t\ttop = bottom = left = right = 0;\r\n\t\tconst splitEdge = edge.split(/[ ,]+/); // split by whitespace or commas\r\n\t\tif (splitEdge.indexOf(\"top\") != -1) top = 5;\r\n\t\tif (splitEdge.indexOf(\"bottom\") != -1) bottom = 5;\r\n\t\tif (splitEdge.indexOf(\"left\") != -1) left = 5;\r\n\t\tif (splitEdge.indexOf(\"right\") != -1) right = 5;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tonMouseEnter={onMouseEnter}\r\n\t\t\tonMouseLeave={onMouseLeave}\r\n\t\t\tstyle={{\r\n\t\t\t\tposition: \"absolute\",\r\n\t\t\t\tleft: left,\r\n\t\t\t\tright: right,\r\n\t\t\t\ttop: top,\r\n\t\t\t\tbottom: bottom,\r\n\t\t\t}}\r\n\t\t></div>\r\n\t);\r\n};\r\n"]}

package/react/components/legacyControls/FinsembleMenuSection.js

@@ -13,12 +13,14 @@ function uuidv4() {
     });
 }
 export const FinsembleMenuSection = (props) => {
+    var _a;
     const [bounds, setBounds] = React.useState({ height: 0 });
     const sectionHeight = "100%";
     const wrapperRef = React.useRef(null);
     const calculateSectionHeight = () => {
+        var _a;
         let returnHeight = sectionHeight;
-        if (props.scrollable && wrapperRef?.current?.children) {
+        if (props.scrollable && ((_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.children)) {
             const windowFillHeight = window.portalHeight - wrapperRef.current.offsetTop;
             const calculatedHeight = Array.from(wrapperRef.current.children)
                 .filter((el) => el)
@@ -40,8 +42,9 @@ export const FinsembleMenuSection = (props) => {
         }
     };
     const onBoundsChanged = async () => {
-        const { bounds: updatedBounds } = await finsembleWindow.getBounds();
-        setBounds(updatedBounds);
+        const { data: updatedBounds } = await finsembleWindow.getBounds();
+        if (updatedBounds)
+            setBounds(updatedBounds);
     };
     const onWindowShown = () => {
         finsembleWindow.focus();
@@ -59,7 +62,7 @@ export const FinsembleMenuSection = (props) => {
     }, [bounds]);
     applySectionHeight();
     if (!props.isArrangeable) {
-        let classes = props.className ?? SECTION_BASE_CLASS;
+        let classes = (_a = props.className) !== null && _a !== void 0 ? _a : SECTION_BASE_CLASS;
         if (classes !== SECTION_BASE_CLASS) {
             classes = `${classes} ${SECTION_BASE_CLASS}`;
         }
@@ -70,8 +73,9 @@ export const FinsembleMenuSection = (props) => {
     }
     else {
         return (React.createElement(FinsembleDnDContext, { onDragEnd: props.onDragEnd }, React.Children.map(props.children, (child, i) => {
+            var _a;
             let isDragDisabled = false;
-            if (typeof child?.props?.isDragDisabled !== "undefined") {
+            if (typeof ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.isDragDisabled) !== "undefined") {
                 ({ isDragDisabled } = child.props);
             }
             return (React.createElement(FinsembleDraggable, { isDragDisabled: isDragDisabled, draggableId: uuidv4(), index: i }, child));