@finsemble/finsemble-ui 1.0.0-beta-5 → 1.0.0-beta-9

package/react/components/legacyControls/FinsembleDialogTextInput.js

@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * 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, _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) {
+            FEAGlobals.finsembleWindow.addEventListener("shown", focusInput);
+        }
+        return () => {
+            if (props.focusOnShow) {
+                FEAGlobals.finsembleWindow.removeEventListener("shown", focusInput);
+            }
+        };
+    }, [props.focusOnShow]);
+    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("div", { className: "form-group" },
+            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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,46 @@
+import React 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;
+};
+/**
+ * The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.
+ * It wraps its children and allows them to do draggy and droppy things.
+ * It also allows for horizontal containers to provide scrolling functionality.
+ * @param props
+ * @param props.id ID for the container that wraps the sortable container
+ * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling
+ * @param props.showScrollButtonsTooltip
+ * @param props.leftButtonTooltip Tooltip for left scroll button
+ * @param props.rightButtonTooltip Tooltip for right scroll button
+ * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards
+ * @param props.onDragEnd handler for sorting
+ * @param props.onDragBegin handler for sorting
+ * @param props.onDragOver
+ * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect
+ * @param props.distance how far the user has to drag an element to trigger sorting behavior
+ * @param props.axis whether to sort vertically or horizontally.
+ * @param props.className optional styles to pass the the sortable container
+ */
+export declare const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps>;
+export {};
+//# 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,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,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;CAC3C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CA8OjF,CAAC"}

package/react/components/legacyControls/FinsembleDnDContext.js

@@ -0,0 +1,293 @@
+import React from "react";
+import { SortableContainer } from "react-sortable-hoc";
+var ChevronDirection;
+(function (ChevronDirection) {
+    ChevronDirection["left"] = "left";
+    ChevronDirection["right"] = "right";
+})(ChevronDirection || (ChevronDirection = {}));
+export var AllowableDnDAxis;
+(function (AllowableDnDAxis) {
+    AllowableDnDAxis["x"] = "x";
+    AllowableDnDAxis["y"] = "y";
+})(AllowableDnDAxis || (AllowableDnDAxis = {}));
+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,
+    scrollLeft: 0,
+    scrollWidth: 0,
+    offsetLeft: 0,
+    offsetWidth: 0,
+};
+const DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;
+/**
+ * Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.
+ * @param overflowStateSetter
+ */
+const addResizeHandler = (overflowStateSetter) => () => {
+    window.addEventListener("resize", overflowStateSetter);
+    return () => {
+        window.removeEventListener("resize", overflowStateSetter);
+    };
+};
+/**
+ * Scrolls forward or back
+ * @param containerRef
+ * @param distance How far to move
+ * @param state Current scroll state
+ * @param stateSetters Scroll state setters
+ * @param scrollDir Whether we're scrolling forward or backwards
+ * @param deltaY The scroll amount that came from the `wheel` event.
+ */
+const scrollHorizontally = (distance, state, stateSetters, scrollDir, deltaY) => {
+    const { setScrollLeft } = stateSetters;
+    const { containerScrollLeft, containerMeasurements } = state;
+    if (containerMeasurements.scrollWidth === 0)
+        return;
+    let scrollAmount = 0;
+    let delta = 0;
+    if (deltaY) {
+        delta = Math.max(-1, Math.min(1, -deltaY));
+    }
+    else if (scrollDir) {
+        delta = Math.max(-1, Math.min(1, scrollDir));
+    }
+    let fakeItemWidth = 0;
+    // advance the scroll position 40 px forward or back, depending on the mouse wheel direction.
+    // eslint-disable-next-line no-mixed-operators
+    let newScrollLeft = containerScrollLeft - delta * distance;
+    if (scrollAmount >= distance) {
+        return fakeItemWidth;
+    }
+    // See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you
+    const rightEdgeOfScrollingViewport = containerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;
+    const rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;
+    // if we've scrolled beyond the right-most edge of the area, calculate the fake item width
+    if (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {
+        fakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);
+    }
+    // if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.
+    if (newScrollLeft < 0)
+        newScrollLeft = 0;
+    if (newScrollLeft !== containerScrollLeft) {
+        setScrollLeft(newScrollLeft);
+    }
+    return fakeItemWidth;
+};
+/**
+ * Simple component that renders the left and right chevrons.
+ * @param props
+ */
+const ScrollingChevron = (props) => {
+    const { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;
+    const classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? "greyedOut" : null}`;
+    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, _e, _f, _g, _h;
+    const { allowHorizontalScroll } = props;
+    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;
+    // This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.
+    const distance = (_e = props.distance) !== null && _e !== void 0 ? _e : SORT_CONTAINER_DRAG_DISTANCE;
+    const onLayoutUpdate = (_f = props.onLayoutUpdate) !== null && _f !== void 0 ? _f : defaultOnLayoutUpdate;
+    // This is the stateful variable that holds the active 'scrollLeft' property for the DOM node
+    // that's rendered inside of the sort container.
+    const [containerScrollLeft, setContainerScrollLeft] = React.useState(0);
+    // read the comment in doForceUpdate to understand this.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [forceUpdate, setForceUpdate] = React.useState(0);
+    // Index of current visible left item
+    const [leftItemIndex, setLeftItemIndex] = React.useState(0);
+    // Width of fake right (last) item to align the position of the left item
+    const [fakeItemWidth, setFakeItemWidth] = React.useState(0);
+    const containerRef = React.useRef(null);
+    // An object with all of the measurements that we'll need to set chevron visibility.
+    // If you don't understand client vs offset vs scrollWidth/Left,
+    // go check out this image https://i.stack.imgur.com/Cl1IA.png
+    // Here's an interactive version too: https://jsfiddle.net/y8Y32/25/
+    const containerMeasurements = containerRef.current
+        ? {
+            clientLeft: containerRef.current.clientLeft,
+            clientWidth: containerRef.current.clientWidth,
+            offsetLeft: containerRef.current.offsetLeft,
+            offsetWidth: containerRef.current.offsetWidth,
+            // not using the actual container's scrollLeft because it may not have been set yet.
+            // this uses the scrollLeft we have set in state.
+            scrollLeft: containerScrollLeft,
+            scrollWidth: containerRef.current.scrollWidth,
+        }
+        : DEFAULT_CONTAINER_MEASUREMENTS;
+    const chevronScrollDistance = (_g = props.chevronScrollDistance) !== null && _g !== void 0 ? _g : DEFAULT_CHEVRON_SCROLL_DISTANCE;
+    // 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,
+        containerMeasurements,
+    };
+    const scrollFunctionStateSetters = {
+        setScrollLeft: setContainerScrollLeft,
+    };
+    /**
+     * Left Chevron's onClickHandler
+     */
+    const scrollToLeft = () => {
+        var _a, _b;
+        if (leftChevronDisabled)
+            return;
+        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;
+        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;
+        // 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), []);
+    // 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]);
+    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: (_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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDnDContext.js","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+declare type DraggableProps = {
+    draggableId: string;
+    isDragDisabled?: boolean;
+    index: number;
+    onClick?: () => void;
+    onKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    wrapperClass?: string;
+};
+/**
+ * A FinsembleDraggable is a helper that makes its children draggable
+ */
+export declare const FinsembleDraggable: React.FunctionComponent<DraggableProps>;
+export {};
+//# sourceMappingURL=FinsembleDraggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDraggable.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,cAAc,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA8BF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAgBtE,CAAC"}

package/react/components/legacyControls/FinsembleDraggable.js

@@ -0,0 +1,22 @@
+import { SortableElement } from "react-sortable-hoc";
+import * as React from "react";
+const defaultClickHandler = () => { };
+const SortableItem = SortableElement(({ onClick, className, children, onKeydown }) => (React.createElement("div", { onClick: onClick, className: className, tabIndex: 0, role: "button", onKeyDown: (e) => {
+        if (["Enter", "Space"].includes(e.key)) {
+            onClick();
+        }
+        if (onKeydown) {
+            onKeydown(e);
+        }
+    } }, children)));
+/**
+ * A FinsembleDraggable is a helper that makes its children draggable
+ */
+export const FinsembleDraggable = (props) => {
+    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));
+};
+//# sourceMappingURL=FinsembleDraggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDraggable.js","sourceRoot":"","sources":["../../../../../src/ui/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;AAEH;;GAEG;AACH,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"}

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

@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+declare type FinsembleHoverDetectorProps = {
+    hoverAction: (hovering: string) => void;
+    edge: string;
+};
+/**
+ * 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
+ * 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
+ * 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).
+ * 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.
+ *
+ * The parent element must have position: relative or position: absolute!
+ *
+ * @since version 3.1.1 FinsembleHoverDetector is now in the finsemble-react-controls repo
+ * @since version 3.1.1 FinsembleHoverDetector now uses dynamic styles. The fsbl-hover-detector-* css classes are deprecated.
+ */
+export declare const FinsembleHoverDetector: React.FunctionComponent<FinsembleHoverDetectorProps>;
+export {};
+//# sourceMappingURL=FinsembleHoverDetector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleHoverDetector.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleHoverDetector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,2BAA2B,GAAG;IAClC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AACF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CA+CvF,CAAC"}

package/react/components/legacyControls/FinsembleHoverDetector.js

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+/**
+ * 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
+ * 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
+ * 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).
+ * 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.
+ *
+ * The parent element must have position: relative or position: absolute!
+ *
+ * @since version 3.1.1 FinsembleHoverDetector is now in the finsemble-react-controls repo
+ * @since version 3.1.1 FinsembleHoverDetector now uses dynamic styles. The fsbl-hover-detector-* css classes are deprecated.
+ */
+export const FinsembleHoverDetector = (props) => {
+    var _a;
+    /**
+     * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.
+     *
+     * @memberof FinsembleHoverDetector
+     */
+    const onMouseEnter = () => {
+        props.hoverAction("true");
+    };
+    /**
+     * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.
+     *
+     * @memberof FinsembleHoverDetector
+     */
+    const onMouseLeave = () => {
+        props.hoverAction("false");
+    };
+    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;
+        const splitEdge = edge.split(/[ ,]+/); // split by whitespace or commas
+        if (splitEdge.indexOf("top") != -1)
+            top = 5;
+        if (splitEdge.indexOf("bottom") != -1)
+            bottom = 5;
+        if (splitEdge.indexOf("left") != -1)
+            left = 5;
+        if (splitEdge.indexOf("right") != -1)
+            right = 5;
+    }
+    return (React.createElement("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
+            position: "absolute",
+            left: left,
+            right: right,
+            top: top,
+            bottom: bottom,
+        } }));
+};
+//# sourceMappingURL=FinsembleHoverDetector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleHoverDetector.js","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleHoverDetector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAyD,CAAC,KAAK,EAAE,EAAE;;IACrG;;;;OAIG;IACH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF;;;;OAIG;IACH,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,CAAC,gCAAgC;QACvE,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"}

package/react/components/linker/LinkerMenu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "../../assets/css/linkerWindow.css";
+/**
+ * The Linker icon on the window titlebar that launches the linker menu.
+ */
+export declare const LinkerMenu: () => JSX.Element;
+//# sourceMappingURL=LinkerMenu.d.ts.map

package/react/components/linker/LinkerMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/linker/LinkerMenu.tsx"],"names":[],"mappings":";AAaA,OAAO,mCAAmC,CAAC;AA2L3C;;GAEG;AACH,eAAO,MAAM,UAAU,mBAItB,CAAC"}