first commit

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.base.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { Point, IRectangle } from '../../Utilities';
+import type { IMarqueeSelectionProps } from './MarqueeSelection.types';
+import type { JSXElement } from '@fluentui/utilities';
+export interface IMarqueeSelectionState {
+    dragOrigin?: Point;
+    dragRect?: IRectangle;
+}
+/**
+ * MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
+ * Elements which have data-selectable-index attributes are queried and measured once to determine if they
+ * fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
+ * so if the items change sizes while dragging, that could cause incorrect results.
+ */
+export declare class MarqueeSelectionBase extends React.Component<IMarqueeSelectionProps, IMarqueeSelectionState> {
+    static defaultProps: {
+        rootTagName: string;
+        rootProps: {};
+        isEnabled: boolean;
+    };
+    static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
+    context: any;
+    private _async;
+    private _events;
+    private _root;
+    private _dragOrigin;
+    private _rootRect;
+    private _lastMouseEvent;
+    private _autoScroll;
+    private _selectedIndicies;
+    private _preservedIndicies;
+    private _itemRectCache;
+    private _allSelectedIndices;
+    private _scrollableParent?;
+    private _scrollableSurface?;
+    private _scrollTop;
+    private _scrollLeft;
+    private _isTouch;
+    constructor(props: IMarqueeSelectionProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSXElement;
+    /** Determine if the mouse event occured on a scrollbar of the target element. */
+    private _isMouseEventOnScrollbar;
+    private _onMouseDown;
+    private _onTouchStart;
+    private _onPointerDown;
+    private _getRootRect;
+    private _onAsyncMouseMove;
+    private _onMouseMove;
+    private _onMouseUp;
+    private _isPointInRectangle;
+    /**
+     * We do not want to start the marquee if we're trying to marquee
+     * from within an existing marquee selection.
+     */
+    private _isDragStartInSelection;
+    private _isInSelectionToggle;
+    private _evaluateSelection;
+}

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.base.js

@@ -0,0 +1,346 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarqueeSelectionBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("../../Utilities");
+var react_window_provider_1 = require("@fluentui/react-window-provider");
+var dom_1 = require("../../utilities/dom");
+var getClassNames = (0, Utilities_1.classNamesFunction)();
+// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start
+// the drag even if they just click an item without moving.
+var MIN_DRAG_DISTANCE = 5;
+/**
+ * MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
+ * Elements which have data-selectable-index attributes are queried and measured once to determine if they
+ * fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
+ * so if the items change sizes while dragging, that could cause incorrect results.
+ */
+var MarqueeSelectionBase = /** @class */ (function (_super) {
+    tslib_1.__extends(MarqueeSelectionBase, _super);
+    function MarqueeSelectionBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._root = React.createRef();
+        _this._onMouseDown = function (ev) {
+            var _a = _this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;
+            // Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
+            if (_this._isMouseEventOnScrollbar(ev)) {
+                return;
+            }
+            if (_this._isInSelectionToggle(ev)) {
+                return;
+            }
+            if (!_this._isTouch &&
+                isEnabled &&
+                !_this._isDragStartInSelection(ev) &&
+                (!onShouldStartSelection || onShouldStartSelection(ev))) {
+                if (_this._scrollableSurface && ev.button === 0 && _this._root.current) {
+                    var win = (0, dom_1.getWindowEx)(_this.context);
+                    _this._selectedIndicies = {};
+                    _this._preservedIndicies = undefined;
+                    _this._events.on(win, 'mousemove', _this._onAsyncMouseMove, true);
+                    _this._events.on(_this._scrollableParent, 'scroll', _this._onAsyncMouseMove);
+                    _this._events.on(win, 'click', _this._onMouseUp, true);
+                    _this._autoScroll = new Utilities_1.AutoScroll(_this._root.current, win);
+                    _this._scrollTop = _this._scrollableSurface.scrollTop;
+                    _this._scrollLeft = _this._scrollableSurface.scrollLeft;
+                    _this._rootRect = _this._root.current.getBoundingClientRect();
+                    _this._onMouseMove(ev);
+                }
+            }
+        };
+        _this._onTouchStart = function (ev) {
+            _this._isTouch = true;
+            _this._async.setTimeout(function () {
+                _this._isTouch = false;
+            }, 0);
+        };
+        _this._onPointerDown = function (ev) {
+            if (ev.pointerType === 'touch') {
+                _this._isTouch = true;
+                _this._async.setTimeout(function () {
+                    _this._isTouch = false;
+                }, 0);
+            }
+        };
+        (0, Utilities_1.initializeComponentRef)(_this);
+        _this._async = new Utilities_1.Async(_this);
+        _this._events = new Utilities_1.EventGroup(_this);
+        _this.state = {
+            dragRect: undefined,
+        };
+        return _this;
+    }
+    MarqueeSelectionBase.prototype.componentDidMount = function () {
+        var win = (0, dom_1.getWindowEx)(this.context);
+        var doc = (0, dom_1.getDocumentEx)(this.context);
+        this._scrollableParent = (0, Utilities_1.findScrollableParent)(this._root.current);
+        this._scrollableSurface = this._scrollableParent === win ? doc === null || doc === void 0 ? void 0 : doc.body : this._scrollableParent;
+        // When scroll events come from window, we need to read scrollTop values from the body.
+        var hitTarget = this.props.isDraggingConstrainedToRoot ? this._root.current : this._scrollableSurface;
+        this._events.on(hitTarget, 'mousedown', this._onMouseDown);
+        this._events.on(hitTarget, 'touchstart', this._onTouchStart, true);
+        this._events.on(hitTarget, 'pointerdown', this._onPointerDown, true);
+    };
+    MarqueeSelectionBase.prototype.componentWillUnmount = function () {
+        if (this._autoScroll) {
+            this._autoScroll.dispose();
+        }
+        delete this._scrollableParent;
+        delete this._scrollableSurface;
+        this._events.dispose();
+        this._async.dispose();
+    };
+    MarqueeSelectionBase.prototype.render = function () {
+        var _a = this.props, rootProps = _a.rootProps, children = _a.children, theme = _a.theme, className = _a.className, styles = _a.styles;
+        var dragRect = this.state.dragRect;
+        var classNames = getClassNames(styles, {
+            theme: theme,
+            className: className,
+        });
+        return (React.createElement("div", tslib_1.__assign({}, rootProps, { className: classNames.root, ref: this._root }),
+            children,
+            dragRect && React.createElement("div", { className: classNames.dragMask }),
+            dragRect && (React.createElement("div", { className: classNames.box, style: dragRect },
+                React.createElement("div", { className: classNames.boxFill })))));
+    };
+    /** Determine if the mouse event occured on a scrollbar of the target element. */
+    MarqueeSelectionBase.prototype._isMouseEventOnScrollbar = function (ev) {
+        var targetElement = ev.target;
+        var targetScrollbarWidth = targetElement.offsetWidth - targetElement.clientWidth;
+        var targetScrollbarHeight = targetElement.offsetHeight - targetElement.clientHeight;
+        if (targetScrollbarWidth || targetScrollbarHeight) {
+            var targetRect = targetElement.getBoundingClientRect();
+            // Check vertical scroll
+            if ((0, Utilities_1.getRTL)(this.props.theme)) {
+                if (ev.clientX < targetRect.left + targetScrollbarWidth) {
+                    return true;
+                }
+            }
+            else {
+                if (ev.clientX > targetRect.left + targetElement.clientWidth) {
+                    return true;
+                }
+            }
+            // Check horizontal scroll
+            if (ev.clientY > targetRect.top + targetElement.clientHeight) {
+                return true;
+            }
+        }
+        return false;
+    };
+    MarqueeSelectionBase.prototype._getRootRect = function () {
+        return {
+            left: this._rootRect.left +
+                (this._scrollableSurface ? this._scrollLeft - this._scrollableSurface.scrollLeft : this._scrollLeft),
+            top: this._rootRect.top +
+                (this._scrollableSurface ? this._scrollTop - this._scrollableSurface.scrollTop : this._scrollTop),
+            width: this._rootRect.width,
+            height: this._rootRect.height,
+        };
+    };
+    MarqueeSelectionBase.prototype._onAsyncMouseMove = function (ev) {
+        var _this = this;
+        this._async.requestAnimationFrame(function () {
+            _this._onMouseMove(ev);
+        });
+        ev.stopPropagation();
+        ev.preventDefault();
+    };
+    MarqueeSelectionBase.prototype._onMouseMove = function (ev) {
+        if (!this._autoScroll) {
+            return;
+        }
+        if (ev.clientX !== undefined) {
+            this._lastMouseEvent = ev;
+        }
+        var rootRect = this._getRootRect();
+        var currentPoint = { left: ev.clientX - rootRect.left, top: ev.clientY - rootRect.top };
+        if (!this._dragOrigin) {
+            this._dragOrigin = currentPoint;
+        }
+        if (ev.buttons !== undefined && ev.buttons === 0) {
+            this._onMouseUp(ev);
+        }
+        else {
+            if (this.state.dragRect || (0, Utilities_1.getDistanceBetweenPoints)(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {
+                if (!this.state.dragRect) {
+                    var selection = this.props.selection;
+                    if (!ev.shiftKey) {
+                        selection.setAllSelected(false);
+                    }
+                    this._preservedIndicies = selection && selection.getSelectedIndices && selection.getSelectedIndices();
+                }
+                // We need to constrain the current point to the rootRect boundaries.
+                var constrainedPoint = this.props.isDraggingConstrainedToRoot
+                    ? {
+                        left: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),
+                        top: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top)),
+                    }
+                    : {
+                        left: this._lastMouseEvent.clientX - rootRect.left,
+                        top: this._lastMouseEvent.clientY - rootRect.top,
+                    };
+                var dragRect = {
+                    left: Math.min(this._dragOrigin.left || 0, constrainedPoint.left),
+                    top: Math.min(this._dragOrigin.top || 0, constrainedPoint.top),
+                    width: Math.abs(constrainedPoint.left - (this._dragOrigin.left || 0)),
+                    height: Math.abs(constrainedPoint.top - (this._dragOrigin.top || 0)),
+                };
+                this._evaluateSelection(dragRect, rootRect);
+                this.setState({ dragRect: dragRect });
+            }
+        }
+        return false;
+    };
+    MarqueeSelectionBase.prototype._onMouseUp = function (ev) {
+        var win = (0, dom_1.getWindowEx)(this.context);
+        this._events.off(win);
+        this._events.off(this._scrollableParent, 'scroll');
+        if (this._autoScroll) {
+            this._autoScroll.dispose();
+        }
+        this._autoScroll = this._dragOrigin = this._lastMouseEvent = undefined;
+        this._selectedIndicies = this._itemRectCache = undefined;
+        if (this.state.dragRect) {
+            this.setState({
+                dragRect: undefined,
+            });
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+    MarqueeSelectionBase.prototype._isPointInRectangle = function (rectangle, point) {
+        return (!!point.top &&
+            rectangle.top < point.top &&
+            rectangle.bottom > point.top &&
+            !!point.left &&
+            rectangle.left < point.left &&
+            rectangle.right > point.left);
+    };
+    /**
+     * We do not want to start the marquee if we're trying to marquee
+     * from within an existing marquee selection.
+     */
+    MarqueeSelectionBase.prototype._isDragStartInSelection = function (ev) {
+        var selection = this.props.selection;
+        if (!this._root.current || (selection && selection.getSelectedCount() === 0)) {
+            return false;
+        }
+        var allElements = this._root.current.querySelectorAll('[data-selection-index]');
+        for (var i = 0; i < allElements.length; i++) {
+            var element = allElements[i];
+            var index = Number(element.getAttribute('data-selection-index'));
+            if (selection.isIndexSelected(index)) {
+                var itemRect = element.getBoundingClientRect();
+                if (this._isPointInRectangle(itemRect, { left: ev.clientX, top: ev.clientY })) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    MarqueeSelectionBase.prototype._isInSelectionToggle = function (ev) {
+        var element = ev.target;
+        while (element && element !== this._root.current) {
+            if (element.getAttribute('data-selection-toggle') === 'true') {
+                return true;
+            }
+            element = element.parentElement;
+        }
+        return false;
+    };
+    MarqueeSelectionBase.prototype._evaluateSelection = function (dragRect, rootRect) {
+        // Break early if we don't need to evaluate.
+        if (!dragRect || !this._root.current) {
+            return;
+        }
+        var selection = this.props.selection;
+        var allElements = this._root.current.querySelectorAll('[data-selection-index]');
+        if (!this._itemRectCache) {
+            this._itemRectCache = {};
+        }
+        for (var i = 0; i < allElements.length; i++) {
+            var element = allElements[i];
+            var index = element.getAttribute('data-selection-index');
+            // Pull the memoized rectangle for the item, or the get the rect and memoize.
+            var itemRect = this._itemRectCache[index];
+            if (!itemRect) {
+                itemRect = element.getBoundingClientRect();
+                // Normalize the item rect to the dragRect coordinates.
+                itemRect = {
+                    left: itemRect.left - rootRect.left,
+                    top: itemRect.top - rootRect.top,
+                    width: itemRect.width,
+                    height: itemRect.height,
+                    right: itemRect.left - rootRect.left + itemRect.width,
+                    bottom: itemRect.top - rootRect.top + itemRect.height,
+                };
+                if (itemRect.width > 0 && itemRect.height > 0) {
+                    this._itemRectCache[index] = itemRect;
+                }
+            }
+            if (itemRect.top < dragRect.top + dragRect.height &&
+                itemRect.bottom > dragRect.top &&
+                itemRect.left < dragRect.left + dragRect.width &&
+                itemRect.right > dragRect.left) {
+                this._selectedIndicies[index] = true;
+            }
+            else {
+                delete this._selectedIndicies[index];
+            }
+        }
+        // set previousSelectedIndices to be all of the selected indices from last time
+        var previousSelectedIndices = this._allSelectedIndices || {};
+        this._allSelectedIndices = {};
+        // set all indices that are supposed to be selected in _allSelectedIndices
+        for (var index in this._selectedIndicies) {
+            if (this._selectedIndicies.hasOwnProperty(index)) {
+                this._allSelectedIndices[index] = true;
+            }
+        }
+        if (this._preservedIndicies) {
+            for (var _i = 0, _a = this._preservedIndicies; _i < _a.length; _i++) {
+                var index = _a[_i];
+                this._allSelectedIndices[index] = true;
+            }
+        }
+        // check if needs to update selection, only when current _allSelectedIndices
+        // is different than previousSelectedIndices
+        var needToUpdate = false;
+        for (var index in this._allSelectedIndices) {
+            if (this._allSelectedIndices[index] !== previousSelectedIndices[index]) {
+                needToUpdate = true;
+                break;
+            }
+        }
+        if (!needToUpdate) {
+            for (var index in previousSelectedIndices) {
+                if (this._allSelectedIndices[index] !== previousSelectedIndices[index]) {
+                    needToUpdate = true;
+                    break;
+                }
+            }
+        }
+        // only update selection when needed
+        if (needToUpdate) {
+            // Stop change events, clear selection to re-populate.
+            selection.setChangeEvents(false);
+            selection.setAllSelected(false);
+            for (var _b = 0, _c = Object.keys(this._allSelectedIndices); _b < _c.length; _b++) {
+                var index = _c[_b];
+                selection.setIndexSelected(Number(index), true, false);
+            }
+            selection.setChangeEvents(true);
+        }
+    };
+    MarqueeSelectionBase.defaultProps = {
+        rootTagName: 'div',
+        rootProps: {},
+        isEnabled: true,
+    };
+    MarqueeSelectionBase.contextType = react_window_provider_1.WindowContext;
+    return MarqueeSelectionBase;
+}(React.Component));
+exports.MarqueeSelectionBase = MarqueeSelectionBase;
+//# sourceMappingURL=MarqueeSelection.base.js.map

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IMarqueeSelectionProps } from './MarqueeSelection.types';
+export declare const MarqueeSelection: React.FunctionComponent<IMarqueeSelectionProps>;

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarqueeSelection = void 0;
+var Utilities_1 = require("../../Utilities");
+var MarqueeSelection_base_1 = require("./MarqueeSelection.base");
+var MarqueeSelection_styles_1 = require("./MarqueeSelection.styles");
+exports.MarqueeSelection = 
+// TODO: MarqueeSelectionBase defaultProps are not lining up with IMarqueeSelectionProps, so we have to be explicit
+// with styled here. defaultProps.rootTagName doesn't appear to be used anywhere and defaultProps.rootProps is not
+// in IMarqueeSelectionProps.
+(0, Utilities_1.styled)(MarqueeSelection_base_1.MarqueeSelectionBase, MarqueeSelection_styles_1.getStyles, undefined, {
+    scope: 'MarqueeSelection',
+});
+//# sourceMappingURL=MarqueeSelection.js.map

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeSelection.js","sourceRoot":"../src/","sources":["components/MarqueeSelection/MarqueeSelection.tsx"],"names":[],"mappings":";;;AACA,6CAAyC;AACzC,iEAA+D;AAC/D,qEAAsD;AAOzC,QAAA,gBAAgB;AAC3B,mHAAmH;AACnH,kHAAkH;AAClH,6BAA6B;AAC7B,IAAA,kBAAM,EACJ,4CAAoB,EACpB,mCAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,kBAAkB;CAC1B,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { MarqueeSelectionBase } from './MarqueeSelection.base';\nimport { getStyles } from './MarqueeSelection.styles';\nimport type {\n  IMarqueeSelectionProps,\n  IMarqueeSelectionStyleProps,\n  IMarqueeSelectionStyles,\n} from './MarqueeSelection.types';\n\nexport const MarqueeSelection: React.FunctionComponent<IMarqueeSelectionProps> =\n  // TODO: MarqueeSelectionBase defaultProps are not lining up with IMarqueeSelectionProps, so we have to be explicit\n  // with styled here. defaultProps.rootTagName doesn't appear to be used anywhere and defaultProps.rootProps is not\n  // in IMarqueeSelectionProps.\n  styled<IMarqueeSelectionProps, IMarqueeSelectionStyleProps, IMarqueeSelectionStyles>(\n    MarqueeSelectionBase,\n    getStyles,\n    undefined,\n    {\n      scope: 'MarqueeSelection',\n    },\n  );\n"]}

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types';
+export declare const getStyles: (props: IMarqueeSelectionStyleProps) => IMarqueeSelectionStyles;

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.styles.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var Styling_1 = require("../../Styling");
+var getStyles = function (props) {
+    var _a, _b, _c;
+    var theme = props.theme, className = props.className;
+    var palette = theme.palette;
+    return {
+        root: [
+            className,
+            {
+                position: 'relative',
+                cursor: 'default',
+            },
+        ],
+        dragMask: [
+            {
+                position: 'absolute',
+                background: 'rgba(255, 0, 0, 0)',
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelector] = {
+                        background: 'none',
+                        backgroundColor: 'transparent',
+                    },
+                    _a),
+            },
+        ],
+        box: [
+            {
+                position: 'absolute',
+                boxSizing: 'border-box',
+                border: "1px solid ".concat(palette.themePrimary),
+                pointerEvents: 'none',
+                zIndex: 10,
+                selectors: (_b = {},
+                    _b[Styling_1.HighContrastSelector] = {
+                        borderColor: 'Highlight',
+                    },
+                    _b),
+            },
+        ],
+        boxFill: [
+            {
+                position: 'absolute',
+                boxSizing: 'border-box',
+                backgroundColor: palette.themePrimary,
+                opacity: 0.1,
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                selectors: (_c = {},
+                    _c[Styling_1.HighContrastSelector] = {
+                        background: 'none',
+                        backgroundColor: 'transparent',
+                    },
+                    _c),
+            },
+        ],
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=MarqueeSelection.styles.js.map

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeSelection.styles.js","sourceRoot":"../src/","sources":["components/MarqueeSelection/MarqueeSelection.styles.tsx"],"names":[],"mappings":";;;AAAA,yCAAqD;AAG9C,IAAM,SAAS,GAAG,UAAC,KAAkC;;IAClD,IAAA,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAC3B,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,OAAO;QACL,IAAI,EAAE;YACJ,SAAS;YACT;gBACE,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,SAAS;aAClB;SACF;QACD,QAAQ,EAAE;YACR;gBACE,QAAQ,EAAE,UAAU;gBACpB,UAAU,EAAE,oBAAoB;gBAChC,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,UAAU,EAAE,MAAM;wBAClB,eAAe,EAAE,aAAa;qBAC/B;uBACF;aACF;SACF;QACD,GAAG,EAAE;YACH;gBACE,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,oBAAa,OAAO,CAAC,YAAY,CAAE;gBAC3C,aAAa,EAAE,MAAM;gBACrB,MAAM,EAAE,EAAE;gBACV,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,WAAW,EAAE,WAAW;qBACzB;uBACF;aACF;SACF;QACD,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,YAAY;gBACvB,eAAe,EAAE,OAAO,CAAC,YAAY;gBACrC,OAAO,EAAE,GAAG;gBACZ,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,UAAU,EAAE,MAAM;wBAClB,eAAe,EAAE,aAAa;qBAC/B;uBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AA7DW,QAAA,SAAS,aA6DpB","sourcesContent":["import { HighContrastSelector } from '../../Styling';\nimport type { IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types';\n\nexport const getStyles = (props: IMarqueeSelectionStyleProps): IMarqueeSelectionStyles => {\n  const { theme, className } = props;\n  const { palette } = theme;\n\n  return {\n    root: [\n      className,\n      {\n        position: 'relative',\n        cursor: 'default',\n      },\n    ],\n    dragMask: [\n      {\n        position: 'absolute',\n        background: 'rgba(255, 0, 0, 0)',\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        selectors: {\n          [HighContrastSelector]: {\n            background: 'none',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    ],\n    box: [\n      {\n        position: 'absolute',\n        boxSizing: 'border-box',\n        border: `1px solid ${palette.themePrimary}`,\n        pointerEvents: 'none',\n        zIndex: 10,\n        selectors: {\n          [HighContrastSelector]: {\n            borderColor: 'Highlight',\n          },\n        },\n      },\n    ],\n    boxFill: [\n      {\n        position: 'absolute',\n        boxSizing: 'border-box',\n        backgroundColor: palette.themePrimary,\n        opacity: 0.1,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        selectors: {\n          [HighContrastSelector]: {\n            background: 'none',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    ],\n  };\n};\n"]}

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.types.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { ISelection } from '../../utilities/selection/interfaces';
+import type { ITheme, IStyle } from '../../Styling';
+import type { IRefObject, IStyleFunction } from '../../Utilities';
+/**
+ * {@docCategory MarqueeSelection}
+ */
+export interface IMarqueeSelection {
+}
+/**
+ * {@docCategory MarqueeSelection}
+ */
+export interface IMarqueeSelectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional callback to access the IMarqueeSelection interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IMarqueeSelection>;
+    /**
+     * The selection object to interact with when updating selection changes.
+     */
+    selection: ISelection;
+    /**
+     * Optional props to mix into the root DIV element.
+     */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Optional callback that is called, when the mouse down event occurs, in order to determine
+     * if we should start a marquee selection. If true is returned, we will cancel the mousedown
+     * event to prevent upstream mousedown handlers from executing.
+     */
+    onShouldStartSelection?: (ev: MouseEvent) => boolean;
+    /**
+     * Optional flag to control the enabled state of marquee selection. This allows you to render
+     * it and have events all ready to go, but conditionally disable it. That way transitioning
+     * between enabled/disabled generate no difference in the DOM.
+     * @defaultvalue true
+     */
+    isEnabled?: boolean;
+    /**
+     * Optional flag to restrict the drag rect to the root element, instead of allowing the drag
+     * rect to start outside of the root element boundaries.
+     * @defaultvalue false
+     */
+    isDraggingConstrainedToRoot?: boolean;
+    /**
+     * Additional CSS class(es) to apply to the MarqueeSelection.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunction<IMarqueeSelectionStyleProps, IMarqueeSelectionStyles>;
+}
+/**
+ * {@docCategory MarqueeSelection}
+ */
+export interface IMarqueeSelectionStyleProps {
+    theme: ITheme;
+    className?: string;
+}
+/**
+ * {@docCategory MarqueeSelection}
+ */
+export interface IMarqueeSelectionStyles {
+    root?: IStyle;
+    dragMask?: IStyle;
+    box?: IStyle;
+    boxFill?: IStyle;
+}

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=MarqueeSelection.types.js.map

node_modules/@fluentui/react/lib-commonjs/components/MarqueeSelection/MarqueeSelection.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeSelection.types.js","sourceRoot":"../src/","sources":["components/MarqueeSelection/MarqueeSelection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ISelection } from '../../utilities/selection/interfaces';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IRefObject, IStyleFunction } from '../../Utilities';\n\n/**\n * {@docCategory MarqueeSelection}\n */\nexport interface IMarqueeSelection {}\n\n/**\n * {@docCategory MarqueeSelection}\n */\nexport interface IMarqueeSelectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional callback to access the IMarqueeSelection interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IMarqueeSelection>;\n\n  /**\n   * The selection object to interact with when updating selection changes.\n   */\n  selection: ISelection;\n\n  /**\n   * Optional props to mix into the root DIV element.\n   */\n  rootProps?: React.HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * Optional callback that is called, when the mouse down event occurs, in order to determine\n   * if we should start a marquee selection. If true is returned, we will cancel the mousedown\n   * event to prevent upstream mousedown handlers from executing.\n   */\n  onShouldStartSelection?: (ev: MouseEvent) => boolean;\n\n  /**\n   * Optional flag to control the enabled state of marquee selection. This allows you to render\n   * it and have events all ready to go, but conditionally disable it. That way transitioning\n   * between enabled/disabled generate no difference in the DOM.\n   * @defaultvalue true\n   */\n  isEnabled?: boolean;\n\n  /**\n   * Optional flag to restrict the drag rect to the root element, instead of allowing the drag\n   * rect to start outside of the root element boundaries.\n   * @defaultvalue false\n   */\n  isDraggingConstrainedToRoot?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the MarqueeSelection.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunction<IMarqueeSelectionStyleProps, IMarqueeSelectionStyles>;\n}\n\n/**\n * {@docCategory MarqueeSelection}\n */\nexport interface IMarqueeSelectionStyleProps {\n  theme: ITheme;\n  className?: string;\n}\n\n/**\n * {@docCategory MarqueeSelection}\n */\nexport interface IMarqueeSelectionStyles {\n  root?: IStyle;\n  dragMask?: IStyle;\n  box?: IStyle;\n  boxFill?: IStyle;\n}\n"]}