@finsemble/finsemble-ui 6.1.4 → 6.3.0-beta.20211008

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

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

package/react/components/legacyControls/FinsembleDraggable.js

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

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

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

package/react/components/legacyControls/FinsembleHoverDetector.js

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

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

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

package/react/components/legacyControls/FinsembleMenuSection.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleMenuSection.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleMenuSection.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { FinsembleDraggable } from \"./FinsembleDraggable\";\r\nimport { FinsembleDnDContext } from \"./FinsembleDnDContext\";\r\nconst SECTION_BASE_CLASS = \"menu-section\";\r\nfunction uuidv4() {\r\n\treturn \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(/[xy]/g, (c) => {\r\n\t\tvar r = (Math.random() * 16) | 0,\r\n\t\t\tv = c === \"x\" ? r : (r & 0x3) | 0x8;\r\n\t\treturn v.toString(16);\r\n\t});\r\n}\r\n\r\ntype FinsembleMenuSectionProps = {\r\n\tscrollable?: boolean;\r\n\tisArrangeable?: boolean;\r\n\tonDragEnd: () => void;\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * The finsembleMenuSection is essentially a little wrapper around a part of a finsemble menu.\r\n * It forces scrolling even when content exceeds the height of a section. It also applies some styling.\r\n */\r\nexport const FinsembleMenuSection: React.FunctionComponent<FinsembleMenuSectionProps> = (props) => {\r\n\tconst [bounds, setBounds] = React.useState({ height: 0 });\r\n\tconst sectionHeight: string | number = \"100%\";\r\n\tconst wrapperRef: React.Ref<HTMLDivElement> = React.useRef(null);\r\n\r\n\t/**\r\n\t * Figures out how large the section can be.\r\n\t */\r\n\tconst calculateSectionHeight = () => {\r\n\t\tlet returnHeight: string | number = sectionHeight;\r\n\t\t// If the section can scroll and there's content to measure, measure it. Otherwise\r\n\t\t// the returnHeight will be 100%.\r\n\t\tif (props.scrollable && wrapperRef?.current?.children) {\r\n\t\t\tconst windowFillHeight = (window as any).portalHeight - wrapperRef.current.offsetTop;\r\n\t\t\t// The maximum height is essentially the amount of real estate from the top of the element to the bottom of the window.\r\n\t\t\tconst calculatedHeight = (Array.from(wrapperRef.current.children) as HTMLElement[])\r\n\t\t\t\t.filter((el) => el)\r\n\t\t\t\t.map((el) => el.offsetHeight)\r\n\t\t\t\t.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\r\n\r\n\t\t\tif (calculatedHeight > windowFillHeight) {\r\n\t\t\t\treturn windowFillHeight;\r\n\t\t\t}\r\n\t\t\t// If we ended up calculating how tall this section should be, we return it.\r\n\t\t\treturnHeight = calculatedHeight;\r\n\t\t}\r\n\t\treturn returnHeight;\r\n\t};\r\n\r\n\t/**\r\n\t * Actually sets the style attribute with the calculated height from above.\r\n\t */\r\n\tconst applySectionHeight = () => {\r\n\t\tif (wrapperRef && wrapperRef.current) {\r\n\t\t\tvar height = calculateSectionHeight();\r\n\t\t\tif (typeof height === \"number\") height = `${height}px`;\r\n\t\t\t// height will either be a number or '100%'.\r\n\t\t\twrapperRef.current.setAttribute(\"style\", `height:${height}`);\r\n\t\t}\r\n\t};\r\n\t/**\r\n\t * Updates the internal state so that our calculations can use the bounds of the window later.\r\n\t */\r\n\tconst onBoundsChanged = async () => {\r\n\t\tconst { bounds: updatedBounds } = await finsembleWindow.getBounds();\r\n\t\tsetBounds(updatedBounds);\r\n\t};\r\n\r\n\t/**\r\n\t * Focuses the window when it's shown.\r\n\t */\r\n\tconst onWindowShown = () => {\r\n\t\tfinsembleWindow.focus();\r\n\t};\r\n\r\n\t/**\r\n\t * On mount (ish) add some listeners. When we unmount (ish), remove those listeners.\r\n\t * Only do this once.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\twindow.addEventListener(\"resize\", onBoundsChanged);\r\n\t\tfinsembleWindow.addEventListener(\"shown\", onWindowShown);\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener(\"resize\", onBoundsChanged);\r\n\t\t\tfinsembleWindow.removeEventListener(\"shown\", onWindowShown);\r\n\t\t};\r\n\t}, []);\r\n\r\n\t/**\r\n\t * When the window's bounds change, recalculate the section height.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tapplySectionHeight();\r\n\t}, [bounds]);\r\n\r\n\t/**\r\n\t * Sets the initial section height.\r\n\t */\r\n\tapplySectionHeight();\r\n\r\n\t/**\r\n\t * If the section isn't arrangeable, just decorate with classes and render the children.\r\n\t */\r\n\tif (!props.isArrangeable) {\r\n\t\tlet classes = props.className ?? SECTION_BASE_CLASS;\r\n\t\tif (classes !== SECTION_BASE_CLASS) {\r\n\t\t\tclasses = `${classes} ${SECTION_BASE_CLASS}`;\r\n\t\t}\r\n\t\tif (props.scrollable) {\r\n\t\t\tclasses = `${classes} menu-section-scrollable`;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<div ref={wrapperRef} className={classes}>\r\n\t\t\t\t{props.children}\r\n\t\t\t</div>\r\n\t\t);\r\n\t} else {\r\n\t\t/**\r\n\t\t * If a menu section allows for reordering, we have to wrap it in all of the DnD components.\r\n\t\t * The inner function is wrapping each child in a Draggable element.\r\n\t\t */\r\n\t\treturn (\r\n\t\t\t<FinsembleDnDContext onDragEnd={props.onDragEnd}>\r\n\t\t\t\t{React.Children.map(props.children, (child: any, i) => {\r\n\t\t\t\t\tlet isDragDisabled = false;\r\n\t\t\t\t\tif (typeof child?.props?.isDragDisabled !== \"undefined\") {\r\n\t\t\t\t\t\t({ isDragDisabled } = child.props);\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<FinsembleDraggable isDragDisabled={isDragDisabled} draggableId={uuidv4()} index={i}>\r\n\t\t\t\t\t\t\t{child}\r\n\t\t\t\t\t\t</FinsembleDraggable>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</FinsembleDnDContext>\r\n\t\t);\r\n\t}\r\n};\r\n"]}
+{"version":3,"file":"FinsembleMenuSection.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleMenuSection.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { FinsembleDraggable } from \"./FinsembleDraggable\";\r\nimport { FinsembleDnDContext } from \"./FinsembleDnDContext\";\r\nconst SECTION_BASE_CLASS = \"menu-section\";\r\nfunction uuidv4() {\r\n\treturn \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(/[xy]/g, (c) => {\r\n\t\tvar r = (Math.random() * 16) | 0,\r\n\t\t\tv = c === \"x\" ? r : (r & 0x3) | 0x8;\r\n\t\treturn v.toString(16);\r\n\t});\r\n}\r\n\r\ntype FinsembleMenuSectionProps = {\r\n\tscrollable?: boolean;\r\n\tisArrangeable?: boolean;\r\n\tonDragEnd: () => void;\r\n\tclassName?: string;\r\n};\r\n\r\n/**\r\n * The finsembleMenuSection is essentially a little wrapper around a part of a finsemble menu.\r\n * It forces scrolling even when content exceeds the height of a section. It also applies some styling.\r\n */\r\nexport const FinsembleMenuSection: React.FunctionComponent<FinsembleMenuSectionProps> = (props) => {\r\n\tconst [bounds, setBounds] = React.useState({ height: 0 });\r\n\tconst sectionHeight: string | number = \"100%\";\r\n\tconst wrapperRef: React.Ref<HTMLDivElement> = React.useRef(null);\r\n\r\n\t/**\r\n\t * Figures out how large the section can be.\r\n\t */\r\n\tconst calculateSectionHeight = () => {\r\n\t\tlet returnHeight: string | number = sectionHeight;\r\n\t\t// If the section can scroll and there's content to measure, measure it. Otherwise\r\n\t\t// the returnHeight will be 100%.\r\n\t\tif (props.scrollable && wrapperRef?.current?.children) {\r\n\t\t\tconst windowFillHeight = (window as any).portalHeight - wrapperRef.current.offsetTop;\r\n\t\t\t// The maximum height is essentially the amount of real estate from the top of the element to the bottom of the window.\r\n\t\t\tconst calculatedHeight = (Array.from(wrapperRef.current.children) as HTMLElement[])\r\n\t\t\t\t.filter((el) => el)\r\n\t\t\t\t.map((el) => el.offsetHeight)\r\n\t\t\t\t.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\r\n\r\n\t\t\tif (calculatedHeight > windowFillHeight) {\r\n\t\t\t\treturn windowFillHeight;\r\n\t\t\t}\r\n\t\t\t// If we ended up calculating how tall this section should be, we return it.\r\n\t\t\treturnHeight = calculatedHeight;\r\n\t\t}\r\n\t\treturn returnHeight;\r\n\t};\r\n\r\n\t/**\r\n\t * Actually sets the style attribute with the calculated height from above.\r\n\t */\r\n\tconst applySectionHeight = () => {\r\n\t\tif (wrapperRef && wrapperRef.current) {\r\n\t\t\tvar height = calculateSectionHeight();\r\n\t\t\tif (typeof height === \"number\") height = `${height}px`;\r\n\t\t\t// height will either be a number or '100%'.\r\n\t\t\twrapperRef.current.setAttribute(\"style\", `height:${height}`);\r\n\t\t}\r\n\t};\r\n\t/**\r\n\t * Updates the internal state so that our calculations can use the bounds of the window later.\r\n\t */\r\n\tconst onBoundsChanged = async () => {\r\n\t\tconst { bounds: updatedBounds } = await finsembleWindow.getBounds();\r\n\t\tsetBounds(updatedBounds);\r\n\t};\r\n\r\n\t/**\r\n\t * Focuses the window when it's shown.\r\n\t */\r\n\tconst onWindowShown = () => {\r\n\t\tfinsembleWindow.focus();\r\n\t};\r\n\r\n\t/**\r\n\t * On mount (ish) add some listeners. When we unmount (ish), remove those listeners.\r\n\t * Only do this once.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\twindow.addEventListener(\"resize\", onBoundsChanged);\r\n\t\tfinsembleWindow.addEventListener(\"shown\", onWindowShown);\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener(\"resize\", onBoundsChanged);\r\n\t\t\tfinsembleWindow.removeEventListener(\"shown\", onWindowShown);\r\n\t\t};\r\n\t}, []);\r\n\r\n\t/**\r\n\t * When the window's bounds change, recalculate the section height.\r\n\t */\r\n\tReact.useEffect(() => {\r\n\t\tapplySectionHeight();\r\n\t}, [bounds]);\r\n\r\n\t/**\r\n\t * Sets the initial section height.\r\n\t */\r\n\tapplySectionHeight();\r\n\r\n\t/**\r\n\t * If the section isn't arrangeable, just decorate with classes and render the children.\r\n\t */\r\n\tif (!props.isArrangeable) {\r\n\t\tlet classes = props.className ?? SECTION_BASE_CLASS;\r\n\t\tif (classes !== SECTION_BASE_CLASS) {\r\n\t\t\tclasses = `${classes} ${SECTION_BASE_CLASS}`;\r\n\t\t}\r\n\t\tif (props.scrollable) {\r\n\t\t\tclasses = `${classes} menu-section-scrollable`;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<div ref={wrapperRef} className={classes}>\r\n\t\t\t\t{props.children}\r\n\t\t\t</div>\r\n\t\t);\r\n\t} else {\r\n\t\t/**\r\n\t\t * If a menu section allows for reordering, we have to wrap it in all of the DnD components.\r\n\t\t * The inner function is wrapping each child in a Draggable element.\r\n\t\t */\r\n\t\treturn (\r\n\t\t\t<FinsembleDnDContext onDragEnd={props.onDragEnd}>\r\n\t\t\t\t{React.Children.map(props.children, (child: any, i) => {\r\n\t\t\t\t\tlet isDragDisabled = false;\r\n\t\t\t\t\tif (typeof child?.props?.isDragDisabled !== \"undefined\") {\r\n\t\t\t\t\t\t({ isDragDisabled } = child.props);\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<FinsembleDraggable isDragDisabled={isDragDisabled} draggableId={uuidv4()} index={i}>\r\n\t\t\t\t\t\t\t{child}\r\n\t\t\t\t\t\t</FinsembleDraggable>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</FinsembleDnDContext>\r\n\t\t);\r\n\t}\r\n};\r\n"]}

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

@@ -9,7 +9,7 @@ export default {
 };
 const Template = (args) => {
     initFSBL(window);
-    return React.createElement(FinsembleDialog, { ...args });
+    return React.createElement(FinsembleDialog, Object.assign({}, args));
 };
 export const Basic = Template.bind({});
 Basic.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialog.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,eAAe;CAC1B,CAAC;AAEF,MAAM,QAAQ,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC5E,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,OAAO,oBAAC,eAAe,OAAK,IAAI,GAAI,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,MAAM;IACjB,eAAe,EAAE,MAAM,CAAC,gBAAgB,CAAC;IACzC,QAAQ,EAAE,gBAAgB;CAC1B,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialog, FinsembleDialogProps } from \"../FinsembleDialog\";\r\nimport { initFSBL } from \"../../common/helpers\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialog\",\r\n\tcomponent: FinsembleDialog,\r\n};\r\n\r\nconst Template: Story<FinsembleDialogProps> = (args: FinsembleDialogProps) => {\r\n\tinitFSBL(window);\r\n\r\n\treturn <FinsembleDialog {...args} />;\r\n};\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tisModal: false,\r\n\tclassName: \"Test\",\r\n\tonShowRequested: action(\"Show requested\"),\r\n\tchildren: \"This is a test\",\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDialog.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,eAAe;CAC1B,CAAC;AAEF,MAAM,QAAQ,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC5E,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,OAAO,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,MAAM;IACjB,eAAe,EAAE,MAAM,CAAC,gBAAgB,CAAC;IACzC,QAAQ,EAAE,gBAAgB;CAC1B,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialog, FinsembleDialogProps } from \"../FinsembleDialog\";\r\nimport { initFSBL } from \"../../common/helpers\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialog\",\r\n\tcomponent: FinsembleDialog,\r\n};\r\n\r\nconst Template: Story<FinsembleDialogProps> = (args: FinsembleDialogProps) => {\r\n\tinitFSBL(window);\r\n\r\n\treturn <FinsembleDialog {...args} />;\r\n};\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tisModal: false,\r\n\tclassName: \"Test\",\r\n\tonShowRequested: action(\"Show requested\"),\r\n\tchildren: \"This is a test\",\r\n};\r\n"]}

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

@@ -6,7 +6,7 @@ export default {
     title: "FinsembleDialog/FinsemleDialogButton",
     component: FinsembleDialogButton,
 };
-const Template = (args) => (React.createElement(FinsembleDialogButton, { ...args }));
+const Template = (args) => (React.createElement(FinsembleDialogButton, Object.assign({}, args)));
 export const Basic = Template.bind({});
 Basic.args = {
     show: true,

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogButton.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAA8B,MAAM,0BAA0B,CAAC;AAE7F,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,qBAAqB;CAChC,CAAC;AAOF,MAAM,QAAQ,GAA4C,CAAC,IAAsC,EAAE,EAAE,CAAC,CACrG,oBAAC,qBAAqB,OAAK,IAAI,GAAI,CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI;CACV,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,MAAM;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE,MAAM;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,MAAM;CAChB,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogButton, FinsembleDialogButtonProps } from \"../FinsembleDialogButton\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsemleDialogButton\",\r\n\tcomponent: FinsembleDialogButton,\r\n};\r\n\r\nexport type tmp = {\r\n\tchildren: any;\r\n\tonClick?: () => void;\r\n};\r\n\r\nconst Template: Story<FinsembleDialogButtonProps & tmp> = (args: FinsembleDialogButtonProps & tmp) => (\r\n\t<FinsembleDialogButton {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tshow: true,\r\n\tchildren: \"Test\",\r\n\tonClick: action(\"onClick\"),\r\n};\r\nexport const NoChildren = Template.bind({});\r\nNoChildren.args = {\r\n\tshow: true,\r\n};\r\nexport const NoShow = Template.bind({});\r\nNoShow.args = {\r\n\tshow: false,\r\n\tchildren: \"Test\",\r\n};\r\nexport const CustomClass = Template.bind({});\r\nCustomClass.args = {\r\n\tshow: true,\r\n\tclassName: \"fsbl-button-affirmative\",\r\n\tchildren: \"Test\",\r\n};\r\nexport const AltButtonSize = Template.bind({});\r\nAltButtonSize.args = {\r\n\tshow: true,\r\n\tbuttonSize: \"lg\",\r\n\tchildren: \"Test\",\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDialogButton.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAA8B,MAAM,0BAA0B,CAAC;AAE7F,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,qBAAqB;CAChC,CAAC;AAOF,MAAM,QAAQ,GAA4C,CAAC,IAAsC,EAAE,EAAE,CAAC,CACrG,oBAAC,qBAAqB,oBAAK,IAAI,EAAI,CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI;CACV,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,MAAM;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE,MAAM;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,MAAM;CAChB,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogButton, FinsembleDialogButtonProps } from \"../FinsembleDialogButton\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsemleDialogButton\",\r\n\tcomponent: FinsembleDialogButton,\r\n};\r\n\r\nexport type tmp = {\r\n\tchildren: any;\r\n\tonClick?: () => void;\r\n};\r\n\r\nconst Template: Story<FinsembleDialogButtonProps & tmp> = (args: FinsembleDialogButtonProps & tmp) => (\r\n\t<FinsembleDialogButton {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tshow: true,\r\n\tchildren: \"Test\",\r\n\tonClick: action(\"onClick\"),\r\n};\r\nexport const NoChildren = Template.bind({});\r\nNoChildren.args = {\r\n\tshow: true,\r\n};\r\nexport const NoShow = Template.bind({});\r\nNoShow.args = {\r\n\tshow: false,\r\n\tchildren: \"Test\",\r\n};\r\nexport const CustomClass = Template.bind({});\r\nCustomClass.args = {\r\n\tshow: true,\r\n\tclassName: \"fsbl-button-affirmative\",\r\n\tchildren: \"Test\",\r\n};\r\nexport const AltButtonSize = Template.bind({});\r\nAltButtonSize.args = {\r\n\tshow: true,\r\n\tbuttonSize: \"lg\",\r\n\tchildren: \"Test\",\r\n};\r\n"]}

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

@@ -5,7 +5,7 @@ export default {
     title: "FinsembleDialog/FinsembleDialogQuestion",
     component: FinsembleDialogQuestion,
 };
-const Template = (args) => (React.createElement(FinsembleDialogQuestion, { ...args }));
+const Template = (args) => (React.createElement(FinsembleDialogQuestion, Object.assign({}, args)));
 export const Basic = Template.bind({});
 Basic.args = {
     className: "test",

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogQuestion.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogQuestion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAgC,MAAM,4BAA4B,CAAC;AAEnG,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,uBAAuB;CAClC,CAAC;AAOF,MAAM,QAAQ,GAA8C,CAAC,IAAwC,EAAE,EAAE,CAAC,CACzG,oBAAC,uBAAuB,OAAK,IAAI,GAAI,CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,IAAI;CACd,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogQuestion, FinsembleDialogQuestionProps } from \"../FinsembleDialogQuestion\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialogQuestion\",\r\n\tcomponent: FinsembleDialogQuestion,\r\n};\r\n\r\nexport type tmp = {\r\n\tchildren: any;\r\n\tonClick?: () => void;\r\n};\r\n\r\nconst Template: Story<FinsembleDialogQuestionProps & tmp> = (args: FinsembleDialogQuestionProps & tmp) => (\r\n\t<FinsembleDialogQuestion {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tclassName: \"test\",\r\n\tquestion: \"Hello World?\",\r\n\tchildren: \"42\",\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDialogQuestion.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogQuestion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAgC,MAAM,4BAA4B,CAAC;AAEnG,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,uBAAuB;CAClC,CAAC;AAOF,MAAM,QAAQ,GAA8C,CAAC,IAAwC,EAAE,EAAE,CAAC,CACzG,oBAAC,uBAAuB,oBAAK,IAAI,EAAI,CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,IAAI;CACd,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogQuestion, FinsembleDialogQuestionProps } from \"../FinsembleDialogQuestion\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialogQuestion\",\r\n\tcomponent: FinsembleDialogQuestion,\r\n};\r\n\r\nexport type tmp = {\r\n\tchildren: any;\r\n\tonClick?: () => void;\r\n};\r\n\r\nconst Template: Story<FinsembleDialogQuestionProps & tmp> = (args: FinsembleDialogQuestionProps & tmp) => (\r\n\t<FinsembleDialogQuestion {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tclassName: \"test\",\r\n\tquestion: \"Hello World?\",\r\n\tchildren: \"42\",\r\n};\r\n"]}

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

@@ -6,7 +6,7 @@ export default {
     title: "FinsembleDialog/FinsembleDialogTextInput",
     component: FinsembleDialogTextInput,
 };
-const Template = (args) => (React.createElement(FinsembleDialogTextInput, { ...args }));
+const Template = (args) => (React.createElement(FinsembleDialogTextInput, Object.assign({}, args)));
 export const Basic = Template.bind({});
 Basic.args = {
     autoFocus: false,

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogTextInput.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogTextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAiC,MAAM,6BAA6B,CAAC;AAEtG,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,wBAAwB;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAyC,CAAC,IAAmC,EAAE,EAAE,CAAC,CAC/F,oBAAC,wBAAwB,OAAK,IAAI,GAAI,CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;CAC/B,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,wBAAwB;CACpC,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,WAAW,EAAE,eAAe;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,UAAU,EAAE,aAAa;CACzB,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACtB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,KAAK,EAAE,YAAY;CACnB,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,YAAY,EAAE,UAAU;CACxB,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogTextInput, FinsembleDialogTextInputProps } from \"../FinsembleDialogTextInput\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialogTextInput\",\r\n\tcomponent: FinsembleDialogTextInput,\r\n};\r\n\r\nconst Template: Story<FinsembleDialogTextInputProps> = (args: FinsembleDialogTextInputProps) => (\r\n\t<FinsembleDialogTextInput {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n};\r\n\r\nexport const AutoFocus = Template.bind({});\r\nAutoFocus.args = {\r\n\tautoFocus: true,\r\n\tonInputChange: action(\"change\"),\r\n};\r\nexport const MaxLength = Template.bind({});\r\nMaxLength.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tmaxLength: 5,\r\n\tinputLabel: \"No more than 5 letters\",\r\n};\r\nexport const Placeholder = Template.bind({});\r\nPlaceholder.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tplaceholder: \"Say something\",\r\n};\r\nexport const WithLabel = Template.bind({});\r\nWithLabel.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tinputLabel: \"First Name:\",\r\n};\r\nexport const WithPresetValue = Template.bind({});\r\nWithPresetValue.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tvalue: \"John Smith\",\r\n};\r\nexport const NumbersOnly = Template.bind({});\r\nNumbersOnly.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tinputPattern: \"^[0-9]*$\",\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDialogTextInput.stories.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/stories/FinsembleDialogTextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAiC,MAAM,6BAA6B,CAAC;AAEtG,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iCAAiC,CAAC;AAEzC,eAAe;IACd,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,wBAAwB;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAyC,CAAC,IAAmC,EAAE,EAAE,CAAC,CAC/F,oBAAC,wBAAwB,oBAAK,IAAI,EAAI,CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;CAC/B,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,wBAAwB;CACpC,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,WAAW,EAAE,eAAe;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,UAAU,EAAE,aAAa;CACzB,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACtB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,KAAK,EAAE,YAAY;CACnB,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC/B,YAAY,EAAE,UAAU;CACxB,CAAC","sourcesContent":["import React from \"react\";\r\nimport { FinsembleDialogTextInput, FinsembleDialogTextInputProps } from \"../FinsembleDialogTextInput\";\r\nimport { Story } from \"@storybook/react/types-6-0\";\r\nimport { action } from \"@storybook/addon-actions\";\r\nimport \"../../../assets/css/dialogs.css\";\r\n\r\nexport default {\r\n\ttitle: \"FinsembleDialog/FinsembleDialogTextInput\",\r\n\tcomponent: FinsembleDialogTextInput,\r\n};\r\n\r\nconst Template: Story<FinsembleDialogTextInputProps> = (args: FinsembleDialogTextInputProps) => (\r\n\t<FinsembleDialogTextInput {...args} />\r\n);\r\n\r\nexport const Basic = Template.bind({});\r\nBasic.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n};\r\n\r\nexport const AutoFocus = Template.bind({});\r\nAutoFocus.args = {\r\n\tautoFocus: true,\r\n\tonInputChange: action(\"change\"),\r\n};\r\nexport const MaxLength = Template.bind({});\r\nMaxLength.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tmaxLength: 5,\r\n\tinputLabel: \"No more than 5 letters\",\r\n};\r\nexport const Placeholder = Template.bind({});\r\nPlaceholder.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tplaceholder: \"Say something\",\r\n};\r\nexport const WithLabel = Template.bind({});\r\nWithLabel.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tinputLabel: \"First Name:\",\r\n};\r\nexport const WithPresetValue = Template.bind({});\r\nWithPresetValue.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tvalue: \"John Smith\",\r\n};\r\nexport const NumbersOnly = Template.bind({});\r\nNumbersOnly.args = {\r\n\tautoFocus: false,\r\n\tonInputChange: action(\"change\"),\r\n\tinputPattern: \"^[0-9]*$\",\r\n};\r\n"]}

package/react/components/legacyControls/tests/FinsembleDialog.spec.js

@@ -5,7 +5,7 @@ import { expect } from "chai";
 import { Basic } from "../stories/FinsembleDialog.stories";
 describe("<FinsembleDialog/>", () => {
     it("should display text", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         expect(wrapper.find("div").text()).to.equal("This is a test");
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialog.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialog.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAG3D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,OAAM,KAAK,CAAC,IAA6B,GAAI,CAAC,CAAC;QAC3E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport { Basic } from \"../stories/FinsembleDialog.stories\";\r\nimport { FinsembleDialogProps } from \"../FinsembleDialog\";\r\n\r\ndescribe(\"<FinsembleDialog/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogProps)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.equal(\"This is a test\");\r\n\t});\r\n});\r\n"]}
+{"version":3,"file":"FinsembleDialog.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialog.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAG3D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAA6B,EAAI,CAAC,CAAC;QAC3E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport { Basic } from \"../stories/FinsembleDialog.stories\";\r\nimport { FinsembleDialogProps } from \"../FinsembleDialog\";\r\n\r\ndescribe(\"<FinsembleDialog/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogProps)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.equal(\"This is a test\");\r\n\t});\r\n});\r\n"]}

package/react/components/legacyControls/tests/FinsembleDialogButton.spec.js

@@ -8,28 +8,29 @@ import addons, { mockChannel } from "@storybook/addons";
 addons.setChannel(mockChannel());
 describe("<FinsembleDialogButton/>", () => {
     it("should display text", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         expect(wrapper.find("div").text()).to.equal("Test");
     });
     it("should not be visible if show is false", () => {
-        const wrapper = mount(React.createElement(NoShow, { ...NoShow.args }));
+        const wrapper = mount(React.createElement(NoShow, Object.assign({}, NoShow.args)));
         expect(wrapper.find("div").exists()).to.be.false;
     });
     it("should not display text if none is provided", () => {
-        const wrapper = mount(React.createElement(NoChildren, { ...NoChildren.args }));
+        const wrapper = mount(React.createElement(NoChildren, Object.assign({}, NoChildren.args)));
         expect(wrapper.find("div").text()).to.be.empty;
     });
     it("should include custom class if provided", () => {
-        const wrapper = mount(React.createElement(CustomClass, { ...CustomClass.args }));
-        expect(wrapper.find("div").prop("className")).to.contain(CustomClass.args?.className);
+        var _a;
+        const wrapper = mount(React.createElement(CustomClass, Object.assign({}, CustomClass.args)));
+        expect(wrapper.find("div").prop("className")).to.contain((_a = CustomClass.args) === null || _a === void 0 ? void 0 : _a.className);
     });
     it("should include alternative button size if provided", () => {
-        const wrapper = mount(React.createElement(AltButtonSize, { ...AltButtonSize.args }));
+        const wrapper = mount(React.createElement(AltButtonSize, Object.assign({}, AltButtonSize.args)));
         expect(wrapper.find("div").prop("className")).to.contain("fsbl-button-lg");
     });
     it("should call button click action if available", () => {
         const buttonSpy = sinon.spy(Basic.args, "onClick");
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         wrapper.find("div").simulate("click");
         expect(buttonSpy.calledOnce).to.be.true;
     });

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogButton.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialogButton.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport sinon from \"sinon\";\r\nimport { Basic, NoChildren, NoShow, CustomClass, AltButtonSize, tmp } from \"../stories/FinsembleDialogButton.stories\";\r\nimport { FinsembleDialogButtonProps } from \"../FinsembleDialogButton\";\r\n\r\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\r\nimport addons, { mockChannel } from \"@storybook/addons\";\r\naddons.setChannel(mockChannel());\r\n\r\ndescribe(\"<FinsembleDialogButton/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.equal(\"Test\");\r\n\t});\r\n\r\n\tit(\"should not be visible if show is false\", () => {\r\n\t\tconst wrapper = mount(<NoShow {...(NoShow.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").exists()).to.be.false;\r\n\t});\r\n\r\n\tit(\"should not display text if none is provided\", () => {\r\n\t\tconst wrapper = mount(<NoChildren {...(NoChildren.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.be.empty;\r\n\t});\r\n\r\n\tit(\"should include custom class if provided\", () => {\r\n\t\tconst wrapper = mount(<CustomClass {...(CustomClass.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(CustomClass.args?.className);\r\n\t});\r\n\r\n\tit(\"should include alternative button size if provided\", () => {\r\n\t\tconst wrapper = mount(<AltButtonSize {...(AltButtonSize.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(\"fsbl-button-lg\");\r\n\t});\r\n\r\n\tit(\"should call button click action if available\", () => {\r\n\t\tconst buttonSpy = sinon.spy(Basic.args as FinsembleDialogButtonProps, \"onClick\");\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\twrapper.find(\"div\").simulate(\"click\");\r\n\t\texpect(buttonSpy.calledOnce).to.be.true;\r\n\t});\r\n});\r\n"]}
+{"version":3,"file":"FinsembleDialogButton.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialogButton.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport sinon from \"sinon\";\r\nimport { Basic, NoChildren, NoShow, CustomClass, AltButtonSize, tmp } from \"../stories/FinsembleDialogButton.stories\";\r\nimport { FinsembleDialogButtonProps } from \"../FinsembleDialogButton\";\r\n\r\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\r\nimport addons, { mockChannel } from \"@storybook/addons\";\r\naddons.setChannel(mockChannel());\r\n\r\ndescribe(\"<FinsembleDialogButton/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.equal(\"Test\");\r\n\t});\r\n\r\n\tit(\"should not be visible if show is false\", () => {\r\n\t\tconst wrapper = mount(<NoShow {...(NoShow.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").exists()).to.be.false;\r\n\t});\r\n\r\n\tit(\"should not display text if none is provided\", () => {\r\n\t\tconst wrapper = mount(<NoChildren {...(NoChildren.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text()).to.be.empty;\r\n\t});\r\n\r\n\tit(\"should include custom class if provided\", () => {\r\n\t\tconst wrapper = mount(<CustomClass {...(CustomClass.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(CustomClass.args?.className);\r\n\t});\r\n\r\n\tit(\"should include alternative button size if provided\", () => {\r\n\t\tconst wrapper = mount(<AltButtonSize {...(AltButtonSize.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(\"fsbl-button-lg\");\r\n\t});\r\n\r\n\tit(\"should call button click action if available\", () => {\r\n\t\tconst buttonSpy = sinon.spy(Basic.args as FinsembleDialogButtonProps, \"onClick\");\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogButtonProps & tmp)} />);\r\n\t\twrapper.find(\"div\").simulate(\"click\");\r\n\t\texpect(buttonSpy.calledOnce).to.be.true;\r\n\t});\r\n});\r\n"]}

package/react/components/legacyControls/tests/FinsembleDialogQuestion.spec.js

@@ -5,13 +5,15 @@ import { expect } from "chai";
 import { Basic } from "../stories/FinsembleDialogQuestion.stories";
 describe("<FinsembleDialogQuestion/>", () => {
     it("should display text", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
-        expect(wrapper.find("div").text(), "Includes question").to.contain(Basic.args?.question);
-        expect(wrapper.find("div").text(), "Includes children").to.contain(Basic.args?.children);
+        var _a, _b;
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("div").text(), "Includes question").to.contain((_a = Basic.args) === null || _a === void 0 ? void 0 : _a.question);
+        expect(wrapper.find("div").text(), "Includes children").to.contain((_b = Basic.args) === null || _b === void 0 ? void 0 : _b.children);
     });
     it("should include custom class if provided", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
-        expect(wrapper.find("div").prop("className")).to.contain(Basic.args?.className);
+        var _a;
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("div").prop("className")).to.contain((_a = Basic.args) === null || _a === void 0 ? void 0 : _a.className);
     });
 });
 //# sourceMappingURL=FinsembleDialogQuestion.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDialogQuestion.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialogQuestion.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAO,MAAM,4CAA4C,CAAC;AAGxE,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC3C,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,OAAM,KAAK,CAAC,IAA2C,GAAI,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC1F,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QAClD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,OAAM,KAAK,CAAC,IAA2C,GAAI,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport { Basic, tmp } from \"../stories/FinsembleDialogQuestion.stories\";\r\nimport { FinsembleDialogQuestionProps } from \"../FinsembleDialogQuestion\";\r\n\r\ndescribe(\"<FinsembleDialogQuestion/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogQuestionProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text(), \"Includes question\").to.contain(Basic.args?.question);\r\n\t\texpect(wrapper.find(\"div\").text(), \"Includes children\").to.contain(Basic.args?.children);\r\n\t});\r\n\r\n\tit(\"should include custom class if provided\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogQuestionProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(Basic.args?.className);\r\n\t});\r\n});\r\n"]}
+{"version":3,"file":"FinsembleDialogQuestion.spec.js","sourceRoot":"","sources":["../../../../src/components/legacyControls/tests/FinsembleDialogQuestion.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAO,MAAM,4CAA4C,CAAC;AAGxE,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC3C,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAA2C,EAAI,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,MAAA,KAAK,CAAC,IAAI,0CAAE,QAAQ,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,MAAA,KAAK,CAAC,IAAI,0CAAE,QAAQ,CAAC,CAAC;IAC1F,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;;QAClD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAA2C,EAAI,CAAC,CAAC;QACzF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { mount } from \"enzyme\";\r\nimport { describe, it } from \"mocha\";\r\nimport { expect } from \"chai\";\r\nimport { Basic, tmp } from \"../stories/FinsembleDialogQuestion.stories\";\r\nimport { FinsembleDialogQuestionProps } from \"../FinsembleDialogQuestion\";\r\n\r\ndescribe(\"<FinsembleDialogQuestion/>\", () => {\r\n\tit(\"should display text\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogQuestionProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").text(), \"Includes question\").to.contain(Basic.args?.question);\r\n\t\texpect(wrapper.find(\"div\").text(), \"Includes children\").to.contain(Basic.args?.children);\r\n\t});\r\n\r\n\tit(\"should include custom class if provided\", () => {\r\n\t\tconst wrapper = mount(<Basic {...(Basic.args as FinsembleDialogQuestionProps & tmp)} />);\r\n\t\texpect(wrapper.find(\"div\").prop(\"className\")).to.contain(Basic.args?.className);\r\n\t});\r\n});\r\n"]}

package/react/components/legacyControls/tests/FinsembleDialogTextInput.spec.js

@@ -12,20 +12,20 @@ describe("<FinsembleDialogTextInput/>", () => {
         sinon.restore();
     });
     it("should pass accessibility tests", async () => {
-        const wrapper = mount(React.createElement(WithLabel, { ...WithLabel.args }));
+        const wrapper = mount(React.createElement(WithLabel, Object.assign({}, WithLabel.args)));
         expect(await accessibilityAssessor(wrapper)).to.be.true;
     });
     it("should auto focus when autofocus=true", () => {
-        const wrapper = mount(React.createElement(AutoFocus, { ...AutoFocus.args }));
+        const wrapper = mount(React.createElement(AutoFocus, Object.assign({}, AutoFocus.args)));
         expect(wrapper.find("input").prop("autoFocus")).to.be.true;
     });
     it("should not auto focus when autofocus=false", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         expect(wrapper.find("input").prop("autoFocus")).to.be.false;
     });
     it("should call input callback function", () => {
         const buttonSpy = sinon.spy(Basic.args, "onInputChange");
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         wrapper.find("input").simulate("change", {
             target: {
                 value: "Text",
@@ -34,29 +34,30 @@ describe("<FinsembleDialogTextInput/>", () => {
         expect(buttonSpy.calledOnce).to.be.true;
     });
     it("should include label when provided", () => {
-        const wrapper = mount(React.createElement(WithLabel, { ...WithLabel.args }));
+        const wrapper = mount(React.createElement(WithLabel, Object.assign({}, WithLabel.args)));
         expect(wrapper.find("label").text()).to.not.be.empty;
     });
     it("should not include label when not provided", () => {
-        const wrapper = mount(React.createElement(Basic, { ...Basic.args }));
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
         expect(wrapper.find("label").text()).to.be.empty;
     });
     it("should include placeholder, which is not treated as value", () => {
-        const wrapper = mount(React.createElement(Placeholder, { ...Placeholder.args }));
-        expect(wrapper.find("input").prop("placeholder"), "Has a placeholder property").to.equal(Placeholder.args?.placeholder);
+        var _a;
+        const wrapper = mount(React.createElement(Placeholder, Object.assign({}, Placeholder.args)));
+        expect(wrapper.find("input").prop("placeholder"), "Has a placeholder property").to.equal((_a = Placeholder.args) === null || _a === void 0 ? void 0 : _a.placeholder);
         expect(wrapper.find("input").prop("value"), "Has not set the value property").to.be.empty;
     });
     it("should not allow input of greater than maxLength", () => {
-        const wrapper = mount(React.createElement(MaxLength, { ...MaxLength.args }));
+        const wrapper = mount(React.createElement(MaxLength, Object.assign({}, MaxLength.args)));
         expect(wrapper.find("input").prop("maxLength")).to.equal(5);
     });
     it("should handle presetValue", () => {
-        const wrapper = mount(React.createElement(WithPresetValue, { ...WithPresetValue.args }));
+        const wrapper = mount(React.createElement(WithPresetValue, Object.assign({}, WithPresetValue.args)));
         expect(wrapper.find("input").prop("value"), "Has not set the value property").to.be.not.undefined;
     });
     it("should not display letter inputs when only numbers are allowed", () => {
         const buttonSpy = sinon.spy(NumbersOnly.args, "onInputChange");
-        const wrapper = mount(React.createElement(NumbersOnly, { ...NumbersOnly.args }));
+        const wrapper = mount(React.createElement(NumbersOnly, Object.assign({}, NumbersOnly.args)));
         wrapper.find("input").simulate("change", {
             target: {
                 value: "123Text",
@@ -68,7 +69,7 @@ describe("<FinsembleDialogTextInput/>", () => {
     it("should display number inputs when only numbers are allowed", () => {
         const inputValue = "12345";
         const buttonSpy = sinon.spy(NumbersOnly.args, "onInputChange");
-        const wrapper = mount(React.createElement(NumbersOnly, { ...NumbersOnly.args }));
+        const wrapper = mount(React.createElement(NumbersOnly, Object.assign({}, NumbersOnly.args)));
         wrapper.find("input").simulate("change", {
             target: {
                 value: inputValue,