@finsemble/finsemble-ui 1.0.0-beta-1

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

@@ -0,0 +1,45 @@
+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 {};

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

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

@@ -0,0 +1,14 @@
+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 {};

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/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","sourcesContent":["import { SortableElement } from \"react-sortable-hoc\";\nimport * as React from \"react\";\n\ntype DraggableProps = {\n\tdraggableId: string;\n\tisDragDisabled?: boolean;\n\tindex: number;\n\tonClick?: () => void;\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n\twrapperClass?: string;\n};\n\nconst defaultClickHandler = () => {};\n\ntype SortableItemProps = {\n\tonClick: any;\n\tclassName: any;\n\tchildren: any;\n\tonKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n};\n\nconst SortableItem = SortableElement(({ onClick, className, children, onKeydown }: SortableItemProps) => (\n\t<div\n\t\tonClick={onClick}\n\t\tclassName={className}\n\t\ttabIndex={0}\n\t\trole=\"button\"\n\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\tonClick();\n\t\t\t}\n\t\t\tif (onKeydown) {\n\t\t\t\tonKeydown(e);\n\t\t\t}\n\t\t}}\n\t>\n\t\t{children}\n\t</div>\n));\n\n/**\n * A FinsembleDraggable is a helper that makes its children draggable\n */\nexport const FinsembleDraggable: React.FunctionComponent<DraggableProps> = (props) => {\n\tconst draggableId = props.draggableId ?? `Id-Unset-${Math.random() * 23214}`;\n\tconst onClick = props.onClick ?? defaultClickHandler;\n\tconst className = props.wrapperClass;\n\n\treturn (\n\t\t<SortableItem\n\t\t\tkey={draggableId}\n\t\t\tindex={props.index}\n\t\t\tonClick={onClick}\n\t\t\tclassName={className}\n\t\t\tonKeydown={props.onKeydown}\n\t\t>\n\t\t\t{props.children}\n\t\t</SortableItem>\n\t);\n};\n"]}

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

@@ -0,0 +1,22 @@
+/*!
+ * 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 {};

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/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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport * as React from \"react\";\n\ntype FinsembleHoverDetectorProps = {\n\thoverAction: (hovering: string) => void;\n\tedge: string;\n};\n/**\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\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\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).\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.\n *\n * The parent element must have position: relative or position: absolute!\n *\n * @since version 3.1.1 FinsembleHoverDetector is now in the finsemble-react-controls repo\n * @since version 3.1.1 FinsembleHoverDetector now uses dynamic styles. The fsbl-hover-detector-* css classes are deprecated.\n */\nexport const FinsembleHoverDetector: React.FunctionComponent<FinsembleHoverDetectorProps> = (props) => {\n\t/**\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\n\t *\n\t * @memberof FinsembleHoverDetector\n\t */\n\tconst onMouseEnter = () => {\n\t\tprops.hoverAction(\"true\");\n\t};\n\n\t/**\n\t * When the mouse enters the hoverDetector, we fire off the action that's passed in from the parent.\n\t *\n\t * @memberof FinsembleHoverDetector\n\t */\n\tconst onMouseLeave = () => {\n\t\tprops.hoverAction(\"false\");\n\t};\n\n\tlet edge = props.edge ?? \"\";\n\tlet top = 5,\n\t\tbottom = 5,\n\t\tleft = 5,\n\t\tright = 5;\n\n\tif (edge !== \"\") {\n\t\ttop = bottom = left = right = 0;\n\t\tconst splitEdge = edge.split(/[ ,]+/); // split by whitespace or commas\n\t\tif (splitEdge.indexOf(\"top\") != -1) top = 5;\n\t\tif (splitEdge.indexOf(\"bottom\") != -1) bottom = 5;\n\t\tif (splitEdge.indexOf(\"left\") != -1) left = 5;\n\t\tif (splitEdge.indexOf(\"right\") != -1) right = 5;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tonMouseEnter={onMouseEnter}\n\t\t\tonMouseLeave={onMouseLeave}\n\t\t\tstyle={{\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tleft: left,\n\t\t\t\tright: right,\n\t\t\t\ttop: top,\n\t\t\t\tbottom: bottom,\n\t\t\t}}\n\t\t></div>\n\t);\n};\n"]}

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

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+declare type FinsembleMenuSectionProps = {
+    scrollable?: boolean;
+    isArrangeable?: boolean;
+    onDragEnd: () => void;
+    className?: string;
+};
+/**
+ * The finsembleMenuSection is essentially a little wrapper around a part of a finsemble menu.
+ * It forces scrolling even when content exceeds the height of a section. It also applies some styling.
+ */
+export declare const FinsembleMenuSection: React.FunctionComponent<FinsembleMenuSectionProps>;
+export {};