@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

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;AAW/B,MAAM,CAAC,MAAM,qBAAqB,GAAwD,CAAC,KAAK,EAAE,EAAE;;IAEnG,MAAM,IAAI,SAAG,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\ntype FinsembleDialogButtonProps = {\r\n\tbuttonSize?: string;\r\n\tclassName?: string;\r\n\tshow: boolean;\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) => {\r\n\t// Default size is medium.\r\n\tconst size = props.buttonSize ?? \"md\";\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/ui/components/legacyControls/FinsembleDialogButton.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAE,EAAE;IAC1E,0BAA0B;;IAE1B,oLAAoL;IACpL,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC,CAAC,+CAA+C;IACtF,MAAM,OAAO,GAAG,2BAA2B,IAAI,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,EAAE,CAAC;IAC3E,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7B,6BACC,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACtB,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,qDAAI,CAAC;aACnB;QACF,CAAC,IAEA,KAAK,CAAC,QAAQ,CACV,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AACV,CAAC,CAAC"}

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

@@ -1,7 +1,15 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import * as React from "react";
-declare type FinsembleDialogQuestionProps = {
+export declare type FinsembleDialogQuestionProps = {
     className?: string;
-    question: string;
+    question?: string;
+    children?: React.ReactNode;
 };
-export declare const FinsembleDialogQuestion: React.FunctionComponent<FinsembleDialogQuestionProps>;
-export {};
+/**
+ * This component is essentially just a component that adds classes so the styling looks good on dialogs.
+ */
+export declare const FinsembleDialogQuestion: (props: FinsembleDialogQuestionProps) => JSX.Element;
+//# sourceMappingURL=FinsembleDialogQuestion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDialogQuestion.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDialogQuestion.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,oBAAY,4BAA4B,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,UAAW,4BAA4B,gBAQ1E,CAAC"}

package/react/components/legacyControls/FinsembleDialogQuestion.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogQuestion.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDialogQuestion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAUrD,MAAM,CAAC,MAAM,uBAAuB,GAA0D,CAAC,KAAK,EAAE,EAAE;;IACvG,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\ntype 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) => {\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/ui/components/legacyControls/FinsembleDialogQuestion.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAQrD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;;IAC9E,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"}

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

@@ -3,15 +3,21 @@
  * All rights reserved.
  */
 import * as React from "react";
-declare type FinsembleDialogTextInputProps = {
+export declare type FinsembleDialogTextInputProps = {
     className?: string;
     maxLength?: number;
     placeholder?: string;
-    autoFocus: boolean;
+    autoFocus?: boolean;
     focusOnShow?: boolean;
-    inputLabel: string;
+    inputLabel?: string;
     value?: string;
-    onInputChange: React.ChangeEventHandler;
+    onInputChange: React.ChangeEventHandler<HTMLInputElement>;
+    inputPattern?: string;
+    ariaLabel?: string;
+    children?: React.ReactNode;
 };
-export declare const FinsembleDialogTextInput: React.FunctionComponent<FinsembleDialogTextInputProps>;
-export {};
+/**
+ * A big text field that's shown on dialogs.
+ */
+export declare const FinsembleDialogTextInput: (props: FinsembleDialogTextInputProps) => JSX.Element;
+//# sourceMappingURL=FinsembleDialogTextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDialogTextInput.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDialogTextInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oBAAY,6BAA6B,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBAqE5E,CAAC"}

package/react/components/legacyControls/FinsembleDialogTextInput.js

@@ -3,31 +3,63 @@
  * All rights reserved.
  */
 import * as React from "react";
+import { FEAGlobals } from "../../../common/Globals";
 const DIALOG_INPUT_BASE_CLASS = "dialog-input";
+/**
+ * A big text field that's shown on dialogs.
+ */
 export const FinsembleDialogTextInput = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
+    const [textValue, setTextValue] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
     const textInput = React.useRef(null);
+    const inputPatternRegEx = props.inputPattern ? new RegExp(props.inputPattern) : undefined;
+    /**
+     * Focuses the input field.
+     */
     const focusInput = () => {
         var _a;
         if ((_a = textInput === null || textInput === void 0 ? void 0 : textInput.current) === null || _a === void 0 ? void 0 : _a.focus)
             textInput.current.focus();
     };
+    /**
+     * Listens for the shown event so it can focus the input.
+     */
     React.useEffect(() => {
         if (props.focusOnShow) {
-            finsembleWindow.addEventListener("shown", focusInput);
+            FEAGlobals.finsembleWindow.addEventListener("shown", focusInput);
         }
         return () => {
             if (props.focusOnShow) {
-                finsembleWindow.removeEventListener("shown", focusInput);
+                FEAGlobals.finsembleWindow.removeEventListener("shown", focusInput);
             }
         };
     }, [props.focusOnShow]);
-    const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : "";
-    const classes = `${(_b = props.className) !== null && _b !== void 0 ? _b : ""} ${DIALOG_INPUT_BASE_CLASS}`;
+    React.useEffect(() => {
+        var _a;
+        if (props.value !== textValue) {
+            setTextValue((_a = props.value) !== null && _a !== void 0 ? _a : "");
+        }
+    }, [props.value]);
+    const placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : "";
+    const classes = `${(_c = props.className) !== null && _c !== void 0 ? _c : ""} ${DIALOG_INPUT_BASE_CLASS}`;
+    /**
+     * If the input is a match for the props.inputPattern regular expression, then pass on the change
+     *
+     * @param {React.ChangeEvent<HTMLInputElement>} e
+     */
+    const changeEvent = (e) => {
+        if (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {
+            props.onInputChange(e);
+            setTextValue(e.target.value);
+        }
+        else {
+            FEAGlobals.FSBL.Clients.Logger.system.debug(`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`);
+        }
+    };
     return (React.createElement("div", { className: classes },
-        React.createElement("label", { htmlFor: "single-input" }, props.inputLabel),
+        React.createElement("label", { htmlFor: "single-input" }, props.inputLabel || ""),
         React.createElement("div", { className: "form-group" },
-            React.createElement("input", { autoFocus: props.autoFocus, type: "text", maxLength: props.maxLength, onChange: props.onInputChange, placeholder: placeholder, ref: textInput, value: props.value })),
+            React.createElement("input", { id: "single-input", autoFocus: props.autoFocus, type: "text", maxLength: props.maxLength, onChange: changeEvent, placeholder: placeholder, ref: textInput, value: textValue, "aria-label": props.ariaLabel })),
         props.children));
 };
 //# sourceMappingURL=FinsembleDialogTextInput.js.map

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;AAgB/C,MAAM,CAAC,MAAM,wBAAwB,GAA2D,CAAC,KAAK,EAAE,EAAE;;IACzG,MAAM,SAAS,GAAgC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAIlE,MAAM,UAAU,GAAG,GAAG,EAAE;;QACvB,UAAI,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,MAAM,WAAW,SAAG,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,IAAI,uBAAuB,EAAE,CAAC;IACtE,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO;QACtB,+BAAO,OAAO,EAAC,cAAc,IAAE,KAAK,CAAC,UAAU,CAAS;QACxD,6BAAK,SAAS,EAAC,YAAY;YAC1B,+BACC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,CAAC,KAAK,GACjB,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\ntype 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};\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 textInput: React.Ref<HTMLInputElement> = React.useRef(null);\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\tconst placeholder = props.placeholder ?? \"\";\r\n\tconst classes = `${props.className ?? \"\"} ${DIALOG_INPUT_BASE_CLASS}`;\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\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={props.onInputChange}\r\n\t\t\t\t\tplaceholder={placeholder}\r\n\t\t\t\t\tref={textInput}\r\n\t\t\t\t\tvalue={props.value}\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/ui/components/legacyControls/FinsembleDialogTextInput.tsx"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,47 @@
-import * as React from "react";
+import { ReactNode } from "react";
 export declare enum AllowableDnDAxis {
     x = "x",
     y = "y"
 }
 declare type FinsembleDnDContextProps = {
     id?: string;
+    leftButtonTooltip?: string;
+    rightButtonTooltip?: string;
     allowHorizontalScroll?: boolean;
+    showScrollButtonsTooltip?: boolean;
     chevronScrollDistance?: number;
     onDragEnd?: Function;
+    onDragStart?: Function;
+    onDragMove?: Function;
+    onDragOver?: Function;
+    onLayoutUpdate?: Function;
+    transitionDuration?: number;
     distance?: number;
     axis?: AllowableDnDAxis;
+    lockAxis?: AllowableDnDAxis;
     className?: string;
+    metadata?: Record<string, any> | undefined;
+    children?: ReactNode;
 };
-export declare const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps>;
+/**
+ * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.
+ * It wraps its children and allows them to do draggy and droppy things.
+ * It also allows for horizontal containers to provide scrolling functionality.
+ * @param props
+ * @param props.id ID for the container that wraps the sortable container
+ * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling
+ * @param props.showScrollButtonsTooltip
+ * @param props.leftButtonTooltip Tooltip for left scroll button
+ * @param props.rightButtonTooltip Tooltip for right scroll button
+ * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards
+ * @param props.onDragEnd handler for sorting
+ * @param props.onDragBegin handler for sorting
+ * @param props.onDragOver
+ * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect
+ * @param props.distance how far the user has to drag an element to trigger sorting behavior
+ * @param props.axis whether to sort vertically or horizontally.
+ * @param props.className optional styles to pass the the sortable container
+ */
+export declare const FinsembleDnDContext: (props: FinsembleDnDContextProps) => JSX.Element;
 export {};
+//# sourceMappingURL=FinsembleDnDContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDnDContext.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBzC,oBAAY,gBAAgB;IAC3B,CAAC,MAAM;IACP,CAAC,MAAM;CACP;AA+HD,aAAK,wBAAwB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBA6PlE,CAAC"}

package/react/components/legacyControls/FinsembleDnDContext.js

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