{"version":3,"file":"Panel.75a28323.js","sources":["../../../node_modules/@fluentui/utilities/lib/dom/getRect.js","../../../node_modules/@fluentui/utilities/lib/getNativeElementProps.js","../../../node_modules/@fluentui/utilities/lib/selection/Selection.types.js","../../../node_modules/@fluentui/utilities/lib/selection/Selection.js","../../../node_modules/@fluentui/react/lib/components/Link/useLink.js","../../../node_modules/@fluentui/react/lib/components/Link/Link.base.js","../../../node_modules/@fluentui/react/lib/components/Link/Link.styles.js","../../../node_modules/@fluentui/react/lib/components/Link/Link.js","../../../node_modules/@fluentui/react/lib/utilities/selection/SelectionZone.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.types.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.types.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupSpacer.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.styles.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.styles.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.styles.js","../../../node_modules/@fluentui/react/lib/components/Check/Check.styles.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.styles.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.styles.js","../../../node_modules/@fluentui/react/lib/components/Check/Check.base.js","../../../node_modules/@fluentui/react/lib/components/Check/Check.js","../../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.types.js","../../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.base.js","../../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.styles.js","../../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.base.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.styles.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.base.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.styles.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.base.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.js","../../../node_modules/@fluentui/react/lib/components/List/List.types.js","../../../node_modules/@fluentui/react/lib/components/List/utils/scroll.js","../../../node_modules/@fluentui/react/lib/components/List/List.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.base.js","../../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.js","../../../node_modules/@fluentui/react/lib/utilities/groupedList/GroupedListUtility.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.js","../../../node_modules/@fluentui/react/lib/utilities/dragdrop/DragDropHelper.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.base.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.styles.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.types.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.base.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowFields.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.base.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.js","../../../node_modules/@fluentui/react/lib/utilities/decorators/withViewport.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.base.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.styles.js","../../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.js","../../../node_modules/@fluentui/react/lib/components/Panel/Panel.types.js","../../../node_modules/@fluentui/react/lib/components/Panel/Panel.base.js","../../../node_modules/@fluentui/react/lib/components/Panel/Panel.styles.js","../../../node_modules/@fluentui/react/lib/components/Panel/Panel.js"],"sourcesContent":["import { getWindow } from './getWindow';\n/**\n * Helper to get bounding client rect. Passing in window will get the window size.\n *\n * @public\n */\nexport function getRect(element, win) {\n var theWin = (win !== null && win !== void 0 ? win : (!element || (element && element.hasOwnProperty('devicePixelRatio'))))\n ? getWindow()\n : getWindow(element);\n var rect;\n if (element) {\n if (element === theWin) {\n rect = {\n left: 0,\n top: 0,\n width: theWin.innerWidth,\n height: theWin.innerHeight,\n right: theWin.innerWidth,\n bottom: theWin.innerHeight,\n };\n }\n else if (element.getBoundingClientRect) {\n rect = element.getBoundingClientRect();\n }\n }\n return rect;\n}\n//# sourceMappingURL=getRect.js.map","import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps, } from './properties';\nvar nativeElementMap = {\n label: labelProperties,\n audio: audioProperties,\n video: videoProperties,\n ol: olProperties,\n li: liProperties,\n a: anchorProperties,\n button: buttonProperties,\n input: inputProperties,\n textarea: textAreaProperties,\n select: selectProperties,\n option: optionProperties,\n table: tableProperties,\n tr: trProperties,\n th: thProperties,\n td: tdProperties,\n colGroup: colGroupProperties,\n col: colProperties,\n form: formProperties,\n iframe: iframeProperties,\n img: imgProperties,\n};\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n * @param tagName - Tag name (e.g. \"div\")\n * @param props - Props object\n * @param excludedPropNames - List of props to disallow\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeElementProps(tagName, props, excludedPropNames) {\n var allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;\n return getNativeProps(props, allowedPropNames, excludedPropNames);\n}\n//# sourceMappingURL=getNativeElementProps.js.map","export var SELECTION_CHANGE = 'change';\nexport var SELECTION_ITEMS_CHANGE = 'items-change';\n/**\n * {@docCategory Selection}\n */\nexport var SelectionMode;\n(function (SelectionMode) {\n SelectionMode[SelectionMode[\"none\"] = 0] = \"none\";\n SelectionMode[SelectionMode[\"single\"] = 1] = \"single\";\n SelectionMode[SelectionMode[\"multiple\"] = 2] = \"multiple\";\n})(SelectionMode || (SelectionMode = {}));\n/**\n * {@docCategory Selection}\n */\nexport var SelectionDirection;\n(function (SelectionDirection) {\n SelectionDirection[SelectionDirection[\"horizontal\"] = 0] = \"horizontal\";\n SelectionDirection[SelectionDirection[\"vertical\"] = 1] = \"vertical\";\n})(SelectionDirection || (SelectionDirection = {}));\n//# sourceMappingURL=Selection.types.js.map","import { SELECTION_CHANGE, SelectionMode, SELECTION_ITEMS_CHANGE } from './Selection.types';\nimport { EventGroup } from '../EventGroup';\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n /**\n * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n * object with a `getKey` implementation. Providing options is optional otherwise.\n * (At most one `options` object is accepted.)\n */\n function Selection() {\n var options = []; // Otherwise, arguments require options with `getKey`.\n for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n ; _i++ // Otherwise, arguments require options with `getKey`.\n ) {\n options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n }\n var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? SelectionMode.multiple : _c;\n this.mode = selectionMode;\n this._getKey = getKey || defaultGetKey;\n this._changeEventSuppressionCount = 0;\n this._exemptedCount = 0;\n this._anchoredIndex = 0;\n this._unselectableCount = 0;\n this._onSelectionChanged = onSelectionChanged;\n this._onItemsChanged = onItemsChanged;\n this._canSelectItem = canSelectItem;\n this._keyToIndexMap = {};\n this._isModal = false;\n this.setItems(items || [], true);\n this.count = this.getSelectedCount();\n }\n Selection.prototype.canSelectItem = function (item, index) {\n if (typeof index === 'number' && index < 0) {\n return false;\n }\n return this._canSelectItem(item, index);\n };\n Selection.prototype.getKey = function (item, index) {\n var key = this._getKey(item, index);\n return typeof key === 'number' || key ? \"\".concat(key) : '';\n };\n Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n this._hasChanged = false;\n if (!suppressChange) {\n this._change();\n }\n }\n };\n Selection.prototype.isModal = function () {\n return this._isModal;\n };\n Selection.prototype.setModal = function (isModal) {\n if (this._isModal !== isModal) {\n this.setChangeEvents(false);\n this._isModal = isModal;\n if (!isModal) {\n this.setAllSelected(false);\n }\n this._change();\n this.setChangeEvents(true);\n }\n };\n /**\n * Selection needs the items, call this method to set them. If the set\n * of items is the same, this will re-evaluate selection and index maps.\n * Otherwise, shouldClear should be set to true, so that selection is\n * cleared.\n */\n Selection.prototype.setItems = function (items, shouldClear) {\n if (shouldClear === void 0) { shouldClear = true; }\n var newKeyToIndexMap = {};\n var newUnselectableIndices = {};\n var hasSelectionChanged = false;\n this.setChangeEvents(false);\n // Reset the unselectable count.\n this._unselectableCount = 0;\n var haveItemsChanged = false;\n // Build lookup table for quick selection evaluation.\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n if (item) {\n var key = this.getKey(item, i);\n if (key) {\n if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n haveItemsChanged = true;\n }\n newKeyToIndexMap[key] = i;\n }\n }\n newUnselectableIndices[i] = item && !this.canSelectItem(item);\n if (newUnselectableIndices[i]) {\n this._unselectableCount++;\n }\n }\n if (shouldClear || items.length === 0) {\n this._setAllSelected(false, true);\n }\n // Check the exemption list for discrepencies.\n var newExemptedIndicies = {};\n var newExemptedCount = 0;\n for (var indexProperty in this._exemptedIndices) {\n if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n var index = Number(indexProperty);\n var item = this._items[index];\n var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n if (newIndex === undefined) {\n // The item has likely been replaced or removed.\n hasSelectionChanged = true;\n }\n else {\n // We know the new index of the item. update the existing exemption table.\n newExemptedIndicies[newIndex] = true;\n newExemptedCount++;\n hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n }\n }\n }\n if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n // If everything was selected but the number of items has changed, selection has changed.\n hasSelectionChanged = true;\n }\n if (!haveItemsChanged) {\n for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n var key = _a[_i];\n if (!(key in newKeyToIndexMap)) {\n haveItemsChanged = true;\n break;\n }\n }\n }\n this._exemptedIndices = newExemptedIndicies;\n this._exemptedCount = newExemptedCount;\n this._keyToIndexMap = newKeyToIndexMap;\n this._unselectableIndices = newUnselectableIndices;\n this._items = items;\n this._selectedItems = null;\n if (hasSelectionChanged) {\n this._updateCount();\n }\n if (haveItemsChanged) {\n EventGroup.raise(this, SELECTION_ITEMS_CHANGE);\n if (this._onItemsChanged) {\n this._onItemsChanged();\n }\n }\n if (hasSelectionChanged) {\n this._change();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.getItems = function () {\n return this._items;\n };\n Selection.prototype.getSelection = function () {\n if (!this._selectedItems) {\n this._selectedItems = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedItems.push(items[i]);\n }\n }\n }\n }\n return this._selectedItems;\n };\n Selection.prototype.getSelectedCount = function () {\n return this._isAllSelected\n ? this._items.length - this._exemptedCount - this._unselectableCount\n : this._exemptedCount;\n };\n Selection.prototype.getSelectedIndices = function () {\n if (!this._selectedIndices) {\n this._selectedIndices = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedIndices.push(i);\n }\n }\n }\n }\n return this._selectedIndices;\n };\n Selection.prototype.getItemIndex = function (key) {\n var index = this._keyToIndexMap[key];\n return index !== null && index !== void 0 ? index : -1;\n };\n Selection.prototype.isRangeSelected = function (fromIndex, count) {\n if (count === 0) {\n return false;\n }\n var endIndex = fromIndex + count;\n for (var i = fromIndex; i < endIndex; i++) {\n if (!this.isIndexSelected(i)) {\n return false;\n }\n }\n return true;\n };\n Selection.prototype.isAllSelected = function () {\n var selectableCount = this._items.length - this._unselectableCount;\n // In single mode, we can only have a max of 1 item.\n if (this.mode === SelectionMode.single) {\n selectableCount = Math.min(selectableCount, 1);\n }\n return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n };\n Selection.prototype.isKeySelected = function (key) {\n var index = this._keyToIndexMap[key];\n return this.isIndexSelected(index);\n };\n Selection.prototype.isIndexSelected = function (index) {\n return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n (!this._isAllSelected && this._exemptedIndices[index]));\n };\n Selection.prototype.setAllSelected = function (isAllSelected) {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n var index = this._keyToIndexMap[key];\n if (index >= 0) {\n this.setIndexSelected(index, isSelected, shouldAnchor);\n }\n };\n Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n index = Math.min(Math.max(0, index), this._items.length - 1);\n // No-op on out of bounds selections.\n if (index < 0 || index >= this._items.length) {\n return;\n }\n this.setChangeEvents(false);\n var isExempt = this._exemptedIndices[index];\n var canSelect = !this._unselectableIndices[index];\n if (canSelect) {\n if (isSelected && this.mode === SelectionMode.single) {\n // If this is single-select, the previous selection should be removed.\n this._setAllSelected(false, true);\n }\n // Determine if we need to remove the exemption.\n if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n delete this._exemptedIndices[index];\n this._exemptedCount--;\n }\n // Determine if we need to add the exemption.\n if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n this._exemptedIndices[index] = true;\n this._exemptedCount++;\n }\n if (shouldAnchor) {\n this._anchoredIndex = index;\n }\n }\n this._updateCount();\n this.setChangeEvents(true);\n };\n Selection.prototype.setRangeSelected = function (fromIndex, count, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n fromIndex = Math.min(Math.max(0, fromIndex), this._items.length - 1);\n // Clamp the range.\n count = Math.min(Math.max(0, count), this._items.length - fromIndex);\n // No-op on out of bounds selections.\n if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {\n return;\n }\n this.setChangeEvents(false);\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = fromIndex;\n var endIndex = fromIndex + count - 1;\n var newAnchorIndex = anchorIndex >= endIndex ? startIndex : endIndex;\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, isSelected, shouldAnchor ? startIndex === newAnchorIndex : false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToKey = function (key, clearSelection) {\n this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n };\n Selection.prototype.selectToRange = function (fromIndex, count, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n if (count === 1) {\n this.setIndexSelected(fromIndex, true, true);\n }\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(fromIndex, anchorIndex);\n var endIndex = Math.max(fromIndex + count - 1, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToIndex = function (index, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n this.setIndexSelected(index, true, true);\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(index, anchorIndex);\n var endIndex = Math.max(index, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.toggleAllSelected = function () {\n this.setAllSelected(!this.isAllSelected());\n };\n Selection.prototype.toggleKeySelected = function (key) {\n this.setKeySelected(key, !this.isKeySelected(key), true);\n };\n Selection.prototype.toggleIndexSelected = function (index) {\n this.setIndexSelected(index, !this.isIndexSelected(index), true);\n };\n Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n var isRangeSelected = this.isRangeSelected(fromIndex, count);\n var endIndex = fromIndex + count;\n if (this.mode === SelectionMode.single && count > 1) {\n return;\n }\n this.setChangeEvents(false);\n for (var i = fromIndex; i < endIndex; i++) {\n this.setIndexSelected(i, !isRangeSelected, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._updateCount = function (preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n var count = this.getSelectedCount();\n if (count !== this.count) {\n this.count = count;\n this._change();\n }\n if (!this.count && !preserveModalState) {\n this.setModal(false);\n }\n };\n Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount(preserveModalState);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._change = function () {\n if (this._changeEventSuppressionCount === 0) {\n this._selectedItems = null;\n this._selectedIndices = undefined;\n EventGroup.raise(this, SELECTION_CHANGE);\n if (this._onSelectionChanged) {\n this._onSelectionChanged();\n }\n }\n else {\n this._hasChanged = true;\n }\n };\n return Selection;\n}());\nexport { Selection };\nfunction defaultGetKey(item, index) {\n // 0 may be used as a key\n var _a = (item || {}).key, key = _a === void 0 ? \"\".concat(index) : _a;\n return key;\n}\n//# sourceMappingURL=Selection.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, useFocusRects } from '@fluentui/utilities';\nvar getClassNames = classNamesFunction();\n/**\n * The useLink hook processes the Link component props and returns\n * state, slots and slotProps for consumption by the component.\n */\nexport var useLink = function (props, forwardedRef) {\n var as = props.as, className = props.className, disabled = props.disabled, href = props.href, onClick = props.onClick, styles = props.styles, theme = props.theme, underline = props.underline;\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n useComponentRef(props, rootRef);\n useFocusRects(rootRef);\n var classNames = getClassNames(styles, {\n className: className,\n isButton: !href,\n isDisabled: disabled,\n isUnderlined: underline,\n theme: theme,\n });\n var _onClick = function (ev) {\n if (disabled) {\n ev.preventDefault();\n }\n else if (onClick) {\n onClick(ev);\n }\n };\n var rootType = as ? as : href ? 'a' : 'button';\n var state = {};\n var slots = { root: rootType };\n var slotProps = {\n root: __assign(__assign({}, adjustPropsForRootType(rootType, props)), { 'aria-disabled': disabled, className: classNames.root, onClick: _onClick, ref: mergedRootRefs }),\n };\n return { state: state, slots: slots, slotProps: slotProps };\n};\nvar useComponentRef = function (props, link) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (link.current) {\n link.current.focus();\n }\n },\n }); }, [link]);\n};\nvar adjustPropsForRootType = function (RootType, props) {\n // Deconstruct the props so we remove props like `as`, `theme` and `styles`\n // as those will always be removed. We also take some props that are optional\n // based on the RootType.\n var as = props.as, disabled = props.disabled, target = props.target, href = props.href, theme = props.theme, getStyles = props.getStyles, styles = props.styles, componentRef = props.componentRef, underline = props.underline, restProps = __rest(props, [\"as\", \"disabled\", \"target\", \"href\", \"theme\", \"getStyles\", \"styles\", \"componentRef\", \"underline\"]);\n // RootType will be a string if we're dealing with an html component\n if (typeof RootType === 'string') {\n // Remove the disabled prop for anchor elements\n if (RootType === 'a') {\n return __assign({ target: target, href: disabled ? undefined : href }, restProps);\n }\n // Add the type='button' prop for button elements\n if (RootType === 'button') {\n return __assign({ type: 'button', disabled: disabled }, restProps);\n }\n // Remove the target and href props for all other non anchor elements\n return __assign(__assign({}, restProps), { disabled: disabled });\n }\n // Retain all props except 'as' for ReactComponents\n return __assign({ target: target, href: href, disabled: disabled }, restProps);\n};\n//# sourceMappingURL=useLink.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useLink } from './useLink';\nexport var LinkBase = React.forwardRef(function (props, ref) {\n var _a = useLink(props, ref), slots = _a.slots, slotProps = _a.slotProps;\n return React.createElement(slots.root, __assign({}, slotProps.root));\n});\nLinkBase.displayName = 'LinkBase';\n//# sourceMappingURL=Link.base.js.map","import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nexport var GlobalClassNames = {\n root: 'ms-Link',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g;\n var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, isUnderlined = props.isUnderlined, theme = props.theme;\n var semanticColors = theme.semanticColors;\n // Tokens\n var linkColor = semanticColors.link;\n var linkInteractedColor = semanticColors.linkHovered;\n var linkDisabledColor = semanticColors.disabledText;\n var focusBorderColor = semanticColors.focusBorder;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: linkColor,\n outline: 'none',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n textDecoration: isUnderlined ? 'underline' : 'none',\n selectors: (_a = {},\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus, :host(.\").concat(IsFocusVisibleClassName, \") &:focus\")] = {\n // Can't use getFocusStyle because it doesn't support wrapping links\n // https://github.com/microsoft/fluentui/issues/4883#issuecomment-406743543\n // Using box-shadow and outline allows the focus rect to wrap links that span multiple lines\n // and helps the focus rect avoid getting clipped.\n boxShadow: \"0 0 0 1px \".concat(focusBorderColor, \" inset\"),\n outline: \"1px auto \".concat(focusBorderColor),\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _b),\n },\n _a[HighContrastSelector] = {\n // For IE high contrast mode\n borderBottom: 'none',\n },\n _a),\n },\n isButton && {\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n display: 'inline',\n margin: 0,\n overflow: 'inherit',\n padding: 0,\n textAlign: 'left',\n textOverflow: 'inherit',\n userSelect: 'text',\n borderBottom: '1px solid transparent', // For Firefox high contrast mode\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'LinkText',\n forcedColorAdjust: 'none',\n },\n _c),\n },\n !isButton && {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n // This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n },\n _d),\n },\n isDisabled && [\n 'is-disabled',\n {\n color: linkDisabledColor,\n cursor: 'default',\n },\n {\n selectors: (_e = {\n '&:link, &:visited': {\n pointerEvents: 'none',\n }\n },\n _e[HighContrastSelector] = {\n // We need to specify the color in High Contrast because of the case of Links rendering as buttons.\n color: 'GrayText',\n },\n _e),\n },\n ],\n !isDisabled && {\n selectors: {\n '&:active, &:hover, &:active:hover': {\n color: linkInteractedColor,\n textDecoration: 'underline',\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'LinkText',\n },\n _f),\n },\n '&:focus': {\n color: linkColor,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n color: 'LinkText',\n },\n _g),\n },\n },\n },\n classNames.root,\n className,\n ],\n };\n};\n//# sourceMappingURL=Link.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { LinkBase } from './Link.base';\nimport { getStyles } from './Link.styles';\nexport var Link = styled(LinkBase, getStyles, undefined, {\n scope: 'Link',\n});\n//# sourceMappingURL=Link.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, KeyCodes, elementContains, findScrollableParent, getParent, getDocument, getWindow, isElementTabbable, css, initializeComponentRef, FocusRects, } from '../../Utilities';\nimport { SelectionMode } from './interfaces';\n// Selection definitions:\n//\n// Anchor index: the point from which a range selection starts.\n// Focus index: the point from which layout movement originates from.\n//\n// These two can differ. Tests:\n//\n// If you start at index 5\n// Shift click to index 10\n// The focus is 10, the anchor is 5.\n// If you shift click at index 0\n// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.\n// If you click index 8\n// The anchor and focus are set to 8.\nvar SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';\nvar SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';\nvar SELECTION_SPAN_ATTRIBUTE_NAME = 'data-selection-span';\nvar SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';\nvar SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';\nvar SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME = 'data-selection-touch-invoke';\nvar SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';\nvar SELECTION_SELECT_ATTRIBUTE_NAME = 'data-selection-select';\n/**\n * {@docCategory Selection}\n */\nvar SelectionZone = /** @class */ (function (_super) {\n __extends(SelectionZone, _super);\n function SelectionZone(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n /**\n * In some cases, the consuming scenario requires to set focus on a row without having SelectionZone\n * react to the event. Note that focus events in IE \\<= 11 will occur asynchronously after .focus() has\n * been called on an element, so we need a flag to store the idea that we will bypass the \"next\"\n * focus event that occurs. This method does that.\n */\n _this.ignoreNextFocus = function () {\n _this._handleNextFocus(false);\n };\n _this._onSelectionChange = function () {\n var selection = _this.props.selection;\n var isModal = selection.isModal && selection.isModal();\n _this.setState({\n isModal: isModal,\n });\n };\n _this._onMouseDownCapture = function (ev) {\n var target = ev.target;\n var win = getWindow(_this._root.current);\n var doc = win === null || win === void 0 ? void 0 : win.document;\n if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) !== target && !elementContains(doc === null || doc === void 0 ? void 0 : doc.activeElement, target)) {\n _this.ignoreNextFocus();\n return;\n }\n if (!elementContains(target, _this._root.current)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n _this.ignoreNextFocus();\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * When we focus an item, for single/multi select scenarios, we should try to select it immediately\n * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them\n * specially.\n */\n _this._onFocus = function (ev) {\n var target = ev.target;\n var selection = _this.props.selection;\n var isToggleModifierPressed = _this._isCtrlPressed || _this._isMetaPressed;\n var selectionMode = _this._getSelectionMode();\n if (_this._shouldHandleFocus && selectionMode !== SelectionMode.none) {\n var isToggle = _this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);\n var itemRoot = _this._findItemRoot(target);\n if (!isToggle && itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n if (span === undefined) {\n if (isToggleModifierPressed) {\n // set anchor only.\n selection.setIndexSelected(index, selection.isIndexSelected(index), true);\n if (_this.props.enterModalOnTouch && _this._isTouch && selection.setModal) {\n selection.setModal(true);\n _this._setIsTouch(false);\n }\n }\n else {\n if (_this.props.isSelectedOnFocus) {\n _this._onItemSurfaceClick('focus', index);\n }\n }\n }\n }\n }\n _this._handleNextFocus(false);\n };\n _this._onMouseDown = function (ev) {\n _this._updateModifiers(ev);\n var toggleWithoutModifierPressed = _this.props.toggleWithoutModifierPressed;\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n // No-op if selection is disabled\n if (_this._isSelectionDisabled(target)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n break;\n }\n else if (itemRoot) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if ((target === itemRoot || _this._shouldAutoSelect(target)) &&\n !_this._isShiftPressed &&\n !_this._isCtrlPressed &&\n !_this._isMetaPressed &&\n !toggleWithoutModifierPressed) {\n _this._onInvokeMouseDown(ev, _this._getItemIndex(itemRoot), _this._getItemSpan(itemRoot));\n break;\n }\n else if (_this.props.disableAutoSelectOnInputElements &&\n (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT')) {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onTouchStartCapture = function (ev) {\n _this._setIsTouch(true);\n };\n _this._onClick = function (ev) {\n var _a = _this.props.enableTouchInvocationTarget, enableTouchInvocationTarget = _a === void 0 ? false : _a;\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n _this._onToggleAllClick(ev);\n }\n break;\n }\n else if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n if (_this._isShiftPressed) {\n _this._onItemSurfaceClick('click', index, span);\n }\n else {\n _this._onToggleClick(ev, index, span);\n }\n }\n break;\n }\n else if ((_this._isTouch &&\n enableTouchInvocationTarget &&\n _this._hasAttribute(target, SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME)) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n if (span === undefined) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n }\n break;\n }\n else if (target === itemRoot) {\n if (!isSelectionDisabled) {\n _this._onItemSurfaceClick('click', index, span);\n }\n break;\n }\n else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onContextMenu = function (ev) {\n var target = ev.target;\n var _a = _this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;\n if (onItemContextMenu) {\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n _this._onInvokeMouseDown(ev, index);\n var skipPreventDefault = onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);\n // In order to keep back compat, if the value here is undefined, then we should still\n // call preventDefault(). Only in the case where true is explicitly returned should\n // the call be skipped.\n if (!skipPreventDefault) {\n ev.preventDefault();\n }\n }\n }\n };\n /**\n * In multi selection, if you double click within an item's root (but not within the invoke element or\n * input elements), we should execute the invoke handler.\n */\n _this._onDoubleClick = function (ev) {\n var target = ev.target;\n var onItemInvoked = _this.props.onItemInvoked;\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot && onItemInvoked && !_this._isInputElement(target)) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (target === itemRoot) {\n _this._onInvokeClick(ev, index);\n break;\n }\n target = getParent(target);\n }\n target = getParent(target);\n }\n };\n _this._onKeyDownCapture = function (ev) {\n _this._updateModifiers(ev);\n _this._handleNextFocus(true);\n };\n _this._onKeyDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n var _a = _this.props, selection = _a.selection, selectionClearedOnEscapePress = _a.selectionClearedOnEscapePress;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n var isSelectAllKey = ev.which === KeyCodes.a && (_this._isCtrlPressed || _this._isMetaPressed);\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n var isClearSelectionKey = ev.which === KeyCodes.escape;\n // Ignore key downs from input elements.\n if (_this._isInputElement(target)) {\n // A key was pressed while an item in this zone was focused.\n return;\n }\n var selectionMode = _this._getSelectionMode();\n // If ctrl-a is pressed, select all (if all are not already selected.)\n if (isSelectAllKey && selectionMode === SelectionMode.multiple && !selection.isAllSelected()) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(true);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n // If escape is pressed and the component is configured to clear on escape press,\n // clear selection (if any are selected.)\n if (selectionClearedOnEscapePress && isClearSelectionKey && selection.getSelectedCount() > 0) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(false);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n var itemRoot = _this._findItemRoot(target);\n // If a key was pressed within an item, we should treat \"enters\" as invokes and \"space\" as toggle\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n // For toggle elements, assuming they are rendered as buttons, they will generate a click event,\n // so we can no-op for any keydowns in this case.\n break;\n }\n else if (_this._shouldAutoSelect(target)) {\n if (!isSelectionDisabled && span === undefined) {\n // If the event went to an element which should trigger auto-select, select it and then let\n // the default behavior kick in.\n _this._onInvokeMouseDown(ev, index, span);\n }\n break;\n }\n else if (\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) &&\n (target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'SUMMARY')) {\n return false;\n }\n else if (target === itemRoot) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if (ev.which === KeyCodes.enter) {\n if (span === undefined) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n ev.preventDefault();\n }\n return;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n }\n else if (ev.which === KeyCodes.space) {\n if (!isSelectionDisabled) {\n _this._onToggleClick(ev, index, span);\n }\n ev.preventDefault();\n return;\n }\n break;\n }\n target = getParent(target);\n }\n }\n };\n _this._events = new EventGroup(_this);\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n var selection = _this.props.selection;\n // Reflect the initial modal state of selection into the state.\n var isModal = selection.isModal && selection.isModal();\n _this.state = {\n isModal: isModal,\n };\n return _this;\n }\n SelectionZone.getDerivedStateFromProps = function (nextProps, prevState) {\n var isModal = nextProps.selection.isModal && nextProps.selection.isModal();\n return __assign(__assign({}, prevState), { isModal: isModal });\n };\n SelectionZone.prototype.componentDidMount = function () {\n var win = getWindow(this._root.current);\n var doc = win === null || win === void 0 ? void 0 : win.document;\n // Track the latest modifier keys globally.\n this._events.on(win, 'keydown, keyup', this._updateModifiers, true);\n this._events.on(doc, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(doc === null || doc === void 0 ? void 0 : doc.body, 'touchstart', this._onTouchStartCapture, true);\n this._events.on(doc === null || doc === void 0 ? void 0 : doc.body, 'touchend', this._onTouchStartCapture, true);\n // Subscribe to the selection to keep modal state updated.\n this._events.on(this.props.selection, 'change', this._onSelectionChange);\n };\n SelectionZone.prototype.render = function () {\n var isModal = this.state.isModal;\n return (React.createElement(\"div\", { className: css('ms-SelectionZone', this.props.className, {\n 'ms-SelectionZone--modal': !!isModal,\n }), ref: this._root, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onKeyDownCapture: this._onKeyDownCapture, onClick: this._onClick, role: \"presentation\", onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu, onMouseDownCapture: this._onMouseDownCapture, onFocusCapture: this._onFocus, \"data-selection-is-modal\": isModal ? true : undefined },\n this.props.children,\n React.createElement(FocusRects, null)));\n };\n SelectionZone.prototype.componentDidUpdate = function (previousProps) {\n var selection = this.props.selection;\n if (selection !== previousProps.selection) {\n // Whenever selection changes, update the subscripton to keep modal state updated.\n this._events.off(previousProps.selection);\n this._events.on(selection, 'change', this._onSelectionChange);\n }\n };\n SelectionZone.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n SelectionZone.prototype._isSelectionDisabled = function (target) {\n if (this._getSelectionMode() === SelectionMode.none) {\n return true;\n }\n while (target !== this._root.current) {\n if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {\n return true;\n }\n target = getParent(target);\n }\n return false;\n };\n SelectionZone.prototype._onToggleAllClick = function (ev) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleAllSelected();\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n SelectionZone.prototype._onToggleClick = function (ev, index, span) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n selection.setChangeEvents(false);\n if (this.props.enterModalOnTouch &&\n this._isTouch &&\n (span !== undefined ? !selection.isRangeSelected(index, span) : !selection.isIndexSelected(index)) &&\n selection.setModal) {\n selection.setModal(true);\n this._setIsTouch(false);\n }\n if (selectionMode === SelectionMode.multiple) {\n if (span !== undefined) {\n selection.toggleRangeSelected(index, span);\n }\n else {\n selection.toggleIndexSelected(index);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n if (span === undefined || span === 1) {\n var isSelected = selection.isIndexSelected(index);\n var isModal = selection.isModal && selection.isModal();\n selection.setAllSelected(false);\n selection.setIndexSelected(index, !isSelected, true);\n if (isModal && selection.setModal) {\n // Since the above call to setAllSelected(false) clears modal state,\n // restore it. This occurs because the SelectionMode of the Selection\n // may differ from the SelectionZone.\n selection.setModal(true);\n }\n }\n }\n else {\n selection.setChangeEvents(true);\n return;\n }\n selection.setChangeEvents(true);\n ev.stopPropagation();\n // NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior\n // for checkboxes if you use a checkbox for the toggle.\n };\n SelectionZone.prototype._onInvokeClick = function (ev, index) {\n var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;\n if (onItemInvoked) {\n onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n SelectionZone.prototype._onItemSurfaceClick = function (type, index, span) {\n var _a;\n var _b = this.props, selection = _b.selection, toggleWithoutModifierPressed = _b.toggleWithoutModifierPressed;\n var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n if (this._isShiftPressed && !this._isTabPressed) {\n if (span !== undefined) {\n (_a = selection.selectToRange) === null || _a === void 0 ? void 0 : _a.call(selection, index, span, !isToggleModifierPressed);\n }\n else {\n selection.selectToIndex(index, !isToggleModifierPressed);\n }\n }\n else if (type === 'click' && (isToggleModifierPressed || toggleWithoutModifierPressed)) {\n if (span !== undefined) {\n selection.toggleRangeSelected(index, span);\n }\n else {\n selection.toggleIndexSelected(index);\n }\n }\n else {\n this._clearAndSelectIndex(index, span);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n this._clearAndSelectIndex(index, span);\n }\n };\n SelectionZone.prototype._onInvokeMouseDown = function (ev, index, span) {\n var selection = this.props.selection;\n if (span !== undefined) {\n if (selection.isRangeSelected(index, span)) {\n return;\n }\n }\n else {\n // Only do work if item is not selected.\n if (selection.isIndexSelected(index)) {\n return;\n }\n }\n this._clearAndSelectIndex(index, span);\n };\n /**\n * To avoid high startup cost of traversing the DOM on component mount,\n * defer finding the scrollable parent until a click interaction.\n *\n * The styles will probably already calculated since we're running in a click handler,\n * so this is less likely to cause layout thrashing then doing it in mount.\n */\n SelectionZone.prototype._findScrollParentAndTryClearOnEmptyClick = function (ev) {\n var win = getWindow(this._root.current);\n var doc = win === null || win === void 0 ? void 0 : win.document;\n var scrollParent = findScrollableParent(this._root.current);\n // unbind this handler and replace binding with a binding on the actual scrollable parent\n this._events.off(doc, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(scrollParent, 'click', this._tryClearOnEmptyClick);\n // If we clicked inside the scrollable parent, call through to the handler on this click.\n if ((scrollParent && ev.target instanceof Node && scrollParent.contains(ev.target)) || scrollParent === ev.target) {\n this._tryClearOnEmptyClick(ev);\n }\n };\n SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {\n if (!this.props.selectionPreservedOnEmptyClick && this._isNonHandledClick(ev.target)) {\n this.props.selection.setAllSelected(false);\n }\n };\n SelectionZone.prototype._clearAndSelectIndex = function (index, span) {\n var _a;\n var _b = this.props, selection = _b.selection, _c = _b.selectionClearedOnSurfaceClick, selectionClearedOnSurfaceClick = _c === void 0 ? true : _c;\n var isAlreadySingleSelected = (span === undefined || span === 1) && selection.getSelectedCount() === 1 && selection.isIndexSelected(index);\n if (!isAlreadySingleSelected && selectionClearedOnSurfaceClick) {\n var isModal = selection.isModal && selection.isModal();\n selection.setChangeEvents(false);\n selection.setAllSelected(false);\n if (span !== undefined) {\n (_a = selection.setRangeSelected) === null || _a === void 0 ? void 0 : _a.call(selection, index, span, true, true);\n }\n else {\n selection.setIndexSelected(index, true, true);\n }\n if (isModal || (this.props.enterModalOnTouch && this._isTouch)) {\n if (selection.setModal) {\n selection.setModal(true);\n }\n if (this._isTouch) {\n this._setIsTouch(false);\n }\n }\n selection.setChangeEvents(true);\n }\n };\n /**\n * We need to track the modifier key states so that when focus events occur, which do not contain\n * modifier states in the Event object, we know how to behave.\n */\n SelectionZone.prototype._updateModifiers = function (ev) {\n this._isShiftPressed = ev.shiftKey;\n this._isCtrlPressed = ev.ctrlKey;\n this._isMetaPressed = ev.metaKey;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n var keyCode = ev.keyCode;\n this._isTabPressed = keyCode ? keyCode === KeyCodes.tab : false;\n };\n SelectionZone.prototype._findItemRoot = function (target) {\n var selection = this.props.selection;\n while (target !== this._root.current) {\n var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);\n var index = Number(indexValue);\n if (indexValue !== null && index >= 0 && index < selection.getItems().length) {\n break;\n }\n target = getParent(target);\n }\n if (target === this._root.current) {\n return undefined;\n }\n return target;\n };\n SelectionZone.prototype._getItemIndex = function (itemRoot) {\n var _a;\n var indexValue = parseInt((_a = itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME)) !== null && _a !== void 0 ? _a : '', 10);\n return isNaN(indexValue) ? -1 : indexValue;\n };\n SelectionZone.prototype._getItemSpan = function (itemRoot) {\n var _a;\n var spanValue = parseInt((_a = itemRoot.getAttribute(SELECTION_SPAN_ATTRIBUTE_NAME)) !== null && _a !== void 0 ? _a : '', 10);\n return isNaN(spanValue) ? undefined : spanValue;\n };\n SelectionZone.prototype._shouldAutoSelect = function (element) {\n return this._hasAttribute(element, SELECTION_SELECT_ATTRIBUTE_NAME);\n };\n SelectionZone.prototype._hasAttribute = function (element, attributeName) {\n var isToggle = false;\n while (!isToggle && element !== this._root.current) {\n var value = element.getAttribute(attributeName);\n if (value === 'false') {\n isToggle = false;\n break;\n }\n isToggle = value === 'true';\n element = getParent(element);\n }\n return isToggle;\n };\n SelectionZone.prototype._isInputElement = function (element) {\n return (element.tagName === 'INPUT' ||\n element.tagName === 'TEXTAREA' ||\n element.getAttribute('contenteditable') === 'true' ||\n element.getAttribute('contenteditable') === '');\n };\n SelectionZone.prototype._isNonHandledClick = function (element) {\n var doc = getDocument();\n if (doc && element) {\n while (element && element !== doc.documentElement) {\n if (isElementTabbable(element) || element.hasAttribute('data-selection-index')) {\n return false;\n }\n element = getParent(element);\n }\n }\n return true;\n };\n SelectionZone.prototype._handleNextFocus = function (handleFocus) {\n var _this = this;\n if (this._shouldHandleFocusTimeoutId) {\n this._async.clearTimeout(this._shouldHandleFocusTimeoutId);\n this._shouldHandleFocusTimeoutId = undefined;\n }\n this._shouldHandleFocus = handleFocus;\n if (handleFocus) {\n this._async.setTimeout(function () {\n _this._shouldHandleFocus = false;\n }, 100);\n }\n };\n SelectionZone.prototype._setIsTouch = function (isTouch) {\n var _this = this;\n if (this._isTouchTimeoutId) {\n this._async.clearTimeout(this._isTouchTimeoutId);\n this._isTouchTimeoutId = undefined;\n }\n this._isTouch = true;\n if (isTouch) {\n this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 300);\n }\n };\n SelectionZone.prototype._getSelectionMode = function () {\n var selection = this.props.selection;\n var _a = this.props.selectionMode, selectionMode = _a === void 0 ? selection ? selection.mode : SelectionMode.none : _a;\n return selectionMode;\n };\n SelectionZone.defaultProps = {\n isSelectedOnFocus: true,\n toggleWithoutModifierPressed: false,\n selectionMode: SelectionMode.multiple,\n selectionClearedOnEscapePress: true,\n };\n return SelectionZone;\n}(React.Component));\nexport { SelectionZone };\n//# sourceMappingURL=SelectionZone.js.map","/**\n * {@docCategory GroupedList}\n */\nexport var CollapseAllVisibility;\n(function (CollapseAllVisibility) {\n CollapseAllVisibility[CollapseAllVisibility[\"hidden\"] = 0] = \"hidden\";\n CollapseAllVisibility[CollapseAllVisibility[\"visible\"] = 1] = \"visible\";\n})(CollapseAllVisibility || (CollapseAllVisibility = {}));\n//# sourceMappingURL=GroupedList.types.js.map","/**\n * Enum to describe how a particular column header behaves.\n * This is used to to specify the property `IColumn.columnActionsMode`.\n * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.\n * {@docCategory DetailsList}\n */\nexport var ColumnActionsMode;\n(function (ColumnActionsMode) {\n /** Renders the column header as disabled. */\n ColumnActionsMode[ColumnActionsMode[\"disabled\"] = 0] = \"disabled\";\n /** Renders the column header as clickable. Default value. */\n ColumnActionsMode[ColumnActionsMode[\"clickable\"] = 1] = \"clickable\";\n /** Renders the column header as clickable and displays the dropdown chevron. */\n ColumnActionsMode[ColumnActionsMode[\"hasDropdown\"] = 2] = \"hasDropdown\";\n})(ColumnActionsMode || (ColumnActionsMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var ConstrainMode;\n(function (ConstrainMode) {\n /** Lets the content grow which allows the page to manage scrolling. */\n ConstrainMode[ConstrainMode[\"unconstrained\"] = 0] = \"unconstrained\";\n /** Constrains the list to the given layout space. */\n ConstrainMode[ConstrainMode[\"horizontalConstrained\"] = 1] = \"horizontalConstrained\";\n})(ConstrainMode || (ConstrainMode = {}));\n/**\n * Enum to describe where the column has been dropped, after starting the drag\n * {@docCategory DetailsList}\n */\nexport var ColumnDragEndLocation;\n(function (ColumnDragEndLocation) {\n /** Drag ended outside of current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"outside\"] = 0] = \"outside\";\n /** Drag ended within current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"surface\"] = 1] = \"surface\";\n /** Drag ended on header */\n ColumnDragEndLocation[ColumnDragEndLocation[\"header\"] = 2] = \"header\";\n})(ColumnDragEndLocation || (ColumnDragEndLocation = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var DetailsListLayoutMode;\n(function (DetailsListLayoutMode) {\n /**\n * Lets the user resize columns and makes not attempt to fit them.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"fixedColumns\"] = 0] = \"fixedColumns\";\n /**\n * Manages which columns are visible, tries to size them according to their min/max rules and drops\n * off columns that can't fit and have isCollapsible set.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"justified\"] = 1] = \"justified\";\n})(DetailsListLayoutMode || (DetailsListLayoutMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var CheckboxVisibility;\n(function (CheckboxVisibility) {\n /** Visible on hover. */\n CheckboxVisibility[CheckboxVisibility[\"onHover\"] = 0] = \"onHover\";\n /** Visible always. */\n CheckboxVisibility[CheckboxVisibility[\"always\"] = 1] = \"always\";\n /** Hide checkboxes. */\n CheckboxVisibility[CheckboxVisibility[\"hidden\"] = 2] = \"hidden\";\n})(CheckboxVisibility || (CheckboxVisibility = {}));\n//# sourceMappingURL=DetailsList.types.js.map","import * as React from 'react';\nexport var SPACER_WIDTH = 36;\nexport var GroupSpacer = function (props) {\n var count = props.count, _a = props.indentWidth, indentWidth = _a === void 0 ? SPACER_WIDTH : _a, _b = props.role, role = _b === void 0 ? 'presentation' : _b;\n var width = count * indentWidth;\n return count > 0 ? (React.createElement(\"span\", { className: 'ms-GroupSpacer', style: { display: 'inline-block', width: width }, role: role })) : null;\n};\n//# sourceMappingURL=GroupSpacer.js.map","import { getGlobalClassNames, AnimationVariables } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-GroupedList',\n compact: 'ms-GroupedList--Compact',\n group: 'ms-GroupedList-group',\n link: 'ms-Link',\n listCell: 'ms-List-cell',\n};\nvar beziers = {\n easeInOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, compact = props.compact;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n selectors: (_a = {},\n _a[\".\".concat(classNames.listCell)] = {\n minHeight: 38, // be consistent with DetailsList styles\n },\n _a),\n },\n compact && [\n classNames.compact,\n {\n selectors: (_b = {},\n _b[\".\".concat(classNames.listCell)] = {\n minHeight: 32, // be consistent with DetailsList styles\n },\n _b),\n },\n ],\n className,\n ],\n group: [\n classNames.group,\n {\n transition: \"background-color \".concat(AnimationVariables.durationValue2, \" \").concat(beziers.easeInOutSine),\n },\n ],\n groupIsDropping: {\n backgroundColor: palette.neutralLight,\n },\n };\n};\n//# sourceMappingURL=GroupedList.styles.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, AnimationStyles, HighContrastSelector, getFocusStyle, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { GlobalClassNames as LinkGlobalClassNames } from '../../components/Link/Link.styles';\nexport var DetailsRowGlobalClassNames = {\n root: 'ms-DetailsRow',\n // TODO: in Fabric 7.0 lowercase the 'Compact' for consistency across other components.\n compact: 'ms-DetailsList--Compact',\n cell: 'ms-DetailsRow-cell',\n cellAnimation: 'ms-DetailsRow-cellAnimation',\n cellCheck: 'ms-DetailsRow-cellCheck',\n check: 'ms-DetailsRow-check',\n cellMeasurer: 'ms-DetailsRow-cellMeasurer',\n listCellFirstChild: 'ms-List-cell:first-child',\n isContentUnselectable: 'is-contentUnselectable',\n isSelected: 'is-selected',\n isCheckVisible: 'is-check-visible',\n isRowHeader: 'is-row-header',\n fields: 'ms-DetailsRow-fields',\n};\nvar IsFocusableSelector = \"[data-is-focusable='true']\";\nexport var DEFAULT_CELL_STYLE_PROPS = {\n cellLeftPadding: 12,\n cellRightPadding: 8,\n cellExtraRightPadding: 24,\n};\n// Source of default row heights to share.\nexport var DEFAULT_ROW_HEIGHTS = {\n rowHeight: 42,\n compactRowHeight: 32,\n};\n// Constant values\nvar values = __assign(__assign({}, DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });\nexport var getDetailsRowStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _q = props.cellStyleProps, cellStyleProps = _q === void 0 ? DEFAULT_CELL_STYLE_PROPS : _q, enableUpdateAnimations = props.enableUpdateAnimations, disabled = props.disabled;\n var palette = theme.palette, fonts = theme.fonts;\n var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;\n var _r = theme.semanticColors, focusBorder = _r.focusBorder, focusedLinkColor = _r.linkHovered;\n var classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);\n var colors = {\n // Default\n defaultHeaderText: neutralPrimary,\n defaultMetaText: neutralSecondary,\n defaultBackground: white,\n // Default Hover\n defaultHoverHeaderText: neutralDark,\n defaultHoverMetaText: neutralPrimary,\n defaultHoverBackground: neutralLighter,\n // Selected\n selectedHeaderText: neutralDark,\n selectedMetaText: neutralPrimary,\n selectedBackground: neutralLight,\n // Selected Hover\n selectedHoverHeaderText: neutralDark,\n selectedHoverMetaText: neutralPrimary,\n selectedHoverBackground: neutralQuaternaryAlt,\n // Focus\n focusHeaderText: neutralDark,\n focusMetaText: neutralPrimary,\n focusBackground: neutralLight,\n focusHoverBackground: neutralQuaternaryAlt,\n };\n var rowHighContrastFocus = {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2,\n };\n // Selected row styles\n var selectedStyles = [\n getFocusStyle(theme, {\n inset: -1,\n borderColor: focusBorder,\n outlineColor: white,\n highContrastStyle: rowHighContrastFocus,\n pointerEvents: 'none',\n }),\n classNames.isSelected,\n {\n color: colors.selectedMetaText,\n background: colors.selectedBackground,\n borderBottom: \"1px solid \".concat(white),\n selectors: (_a = {\n '&:before': {\n position: 'absolute',\n display: 'block',\n top: -1,\n height: 1,\n bottom: 0,\n left: 0,\n right: 0,\n content: '',\n borderTop: \"1px solid \".concat(white),\n }\n },\n _a[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n color: focusedLinkColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _b),\n },\n // Selected State hover\n _a['&:hover'] = {\n background: colors.selectedHoverBackground,\n color: colors.selectedHoverMetaText,\n selectors: (_c = {},\n // Selected State hover meta cell\n _c[HighContrastSelector] = {\n background: 'Highlight',\n selectors: (_d = {},\n _d[\".\".concat(classNames.cell)] = {\n color: 'HighlightText',\n },\n _d[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n forcedColorAdjust: 'none',\n color: 'HighlightText',\n },\n _d),\n },\n // Selected State hover Header cell\n _c[\".\".concat(classNames.isRowHeader)] = {\n color: colors.selectedHoverHeaderText,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _e),\n },\n _c),\n },\n // Focus state\n _a['&:focus'] = {\n background: colors.focusBackground,\n selectors: (_f = {},\n // Selected State hover meta cell\n _f[\".\".concat(classNames.cell)] = {\n color: colors.focusMetaText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText',\n },\n },\n },\n _g),\n },\n // Row header cell\n _f[\".\".concat(classNames.isRowHeader)] = {\n color: colors.focusHeaderText,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _h),\n },\n // Ensure high-contrast mode overrides default focus background\n _f[HighContrastSelector] = {\n background: 'Highlight',\n },\n _f),\n },\n _a[HighContrastSelector] = __assign(__assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { selectors: {\n a: {\n color: 'HighlightText',\n },\n } }),\n // Focus and hover state\n _a['&:focus:hover'] = {\n background: colors.focusHoverBackground,\n },\n _a),\n },\n ];\n var cannotSelectStyles = [\n classNames.isContentUnselectable,\n {\n userSelect: 'none',\n cursor: 'default',\n },\n ];\n var rootCompactStyles = {\n minHeight: values.compactRowHeight,\n border: 0,\n };\n var cellCompactStyles = {\n minHeight: values.compactRowHeight,\n paddingTop: values.compactRowVerticalPadding,\n paddingBottom: values.compactRowVerticalPadding,\n paddingLeft: \"\".concat(cellStyleProps.cellLeftPadding, \"px\"),\n };\n var defaultCellStyles = [\n getFocusStyle(theme, { inset: -1 }),\n classNames.cell,\n {\n display: 'inline-block',\n position: 'relative',\n boxSizing: 'border-box',\n minHeight: values.rowHeight,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingTop: values.rowVerticalPadding,\n paddingBottom: values.rowVerticalPadding,\n paddingLeft: \"\".concat(cellStyleProps.cellLeftPadding, \"px\"),\n selectors: (_j = {\n '& > button': {\n maxWidth: '100%',\n }\n },\n _j[IsFocusableSelector] = getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white }),\n _j),\n },\n isSelected && {\n selectors: (_k = {},\n _k[HighContrastSelector] = __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _k),\n },\n compact && cellCompactStyles,\n disabled && { opacity: 0.5 },\n ];\n return {\n root: [\n classNames.root,\n AnimationClassNames.fadeIn400,\n droppingClassName,\n theme.fonts.small,\n isCheckVisible && classNames.isCheckVisible,\n getFocusStyle(theme, { borderColor: focusBorder, outlineColor: white }),\n {\n borderBottom: \"1px solid \".concat(neutralLighter),\n background: colors.defaultBackground,\n color: colors.defaultMetaText,\n // This ensures that the row always tries to consume is minimum width and does not compress.\n display: 'inline-flex',\n minWidth: '100%',\n minHeight: values.rowHeight,\n whiteSpace: 'nowrap',\n padding: 0,\n boxSizing: 'border-box',\n verticalAlign: 'top',\n textAlign: 'left',\n selectors: (_l = {},\n _l[\".\".concat(classNames.listCellFirstChild, \" &:before\")] = {\n display: 'none',\n },\n _l['&:hover'] = {\n background: colors.defaultHoverBackground,\n color: colors.defaultHoverMetaText,\n selectors: (_m = {},\n _m[\".\".concat(classNames.isRowHeader)] = {\n color: colors.defaultHoverHeaderText,\n },\n _m[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n color: focusedLinkColor,\n },\n _m),\n },\n _l[\"&:hover .\".concat(classNames.check)] = {\n opacity: 1,\n },\n // eslint-disable-next-line @fluentui/max-len\n _l[\".\".concat(IsFocusVisibleClassName, \" &:focus .\").concat(classNames.check, \", :host(.\").concat(IsFocusVisibleClassName, \") &:focus .\").concat(classNames.check)] = {\n opacity: 1,\n },\n _l['.ms-GroupSpacer'] = {\n flexShrink: 0,\n flexGrow: 0,\n },\n _l),\n },\n isSelected && selectedStyles,\n !canSelect && cannotSelectStyles,\n compact && rootCompactStyles,\n className,\n ],\n cellUnpadded: {\n paddingRight: \"\".concat(cellStyleProps.cellRightPadding, \"px\"),\n },\n cellPadded: {\n paddingRight: \"\".concat(cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding, \"px\"),\n selectors: (_o = {},\n _o[\"&.\".concat(classNames.cellCheck)] = {\n paddingRight: 0,\n },\n _o),\n },\n cell: defaultCellStyles,\n cellAnimation: enableUpdateAnimations && AnimationStyles.slideLeftIn40,\n cellMeasurer: [\n classNames.cellMeasurer,\n {\n overflow: 'visible',\n whiteSpace: 'nowrap',\n },\n ],\n checkCell: [\n defaultCellStyles,\n classNames.cellCheck,\n checkboxCellClassName,\n {\n padding: 0,\n // Ensure that the check cell covers the top border of the cell.\n // This ensures the click target does not leave a spot which would\n // cause other items to be deselected.\n paddingTop: 1,\n marginTop: -1,\n flexShrink: 0,\n },\n ],\n fields: [\n classNames.fields,\n {\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n isRowHeader: [\n classNames.isRowHeader,\n {\n color: colors.defaultHeaderText,\n fontSize: fonts.medium.fontSize,\n },\n isSelected && {\n color: colors.selectedHeaderText,\n fontWeight: FontWeights.semibold,\n selectors: (_p = {},\n _p[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _p),\n },\n ],\n isMultiline: [\n defaultCellStyles,\n {\n whiteSpace: 'normal',\n wordBreak: 'break-word',\n textOverflow: 'clip',\n },\n ],\n check: [classNames.check],\n };\n};\n//# sourceMappingURL=DetailsRow.styles.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, focusClear, getGlobalClassNames, HighContrastSelector, hiddenContentStyle, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPANDER_WIDTH } from '../GroupedList/GroupSpacer';\nvar GlobalClassNames = {\n tooltipHost: 'ms-TooltipHost',\n root: 'ms-DetailsHeader',\n cell: 'ms-DetailsHeader-cell',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintCaretStyle: 'ms-DetailsHeader-dropHintCaretStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVertical: 'ms-DetailsColumn-gripperBarVertical',\n checkTooltip: 'ms-DetailsHeader-checkTooltip',\n check: 'ms-DetailsHeader-check',\n};\nexport var HEADER_HEIGHT = 42;\nexport var getCellStyles = function (props) {\n var theme = props.theme, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return [\n classNames.cell,\n getFocusStyle(theme),\n {\n color: semanticColors.bodyText,\n position: 'relative',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: \"0 \".concat(cellStyleProps.cellRightPadding, \"px 0 \").concat(cellStyleProps.cellLeftPadding, \"px\"),\n lineHeight: 'inherit',\n margin: '0',\n height: HEADER_HEIGHT,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'left',\n },\n ];\n};\nexport var getDetailsHeaderStyles = function (props) {\n var _a, _b, _c, _d;\n var theme = props.theme, className = props.className, isAllSelected = props.isAllSelected, isResizingColumn = props.isResizingColumn, isSizing = props.isSizing, isAllCollapsed = props.isAllCollapsed, _e = props.cellStyleProps, cellStyleProps = _e === void 0 ? DEFAULT_CELL_STYLE_PROPS : _e;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var cellSizerFadeInStyles = {\n opacity: 1,\n transition: 'opacity 0.3s linear',\n };\n var cellStyles = getCellStyles(props);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n display: 'inline-block',\n background: colors.headerBackgroundColor,\n position: 'relative',\n minWidth: '100%',\n verticalAlign: 'top',\n height: HEADER_HEIGHT,\n lineHeight: HEADER_HEIGHT,\n whiteSpace: 'nowrap',\n boxSizing: 'content-box',\n paddingBottom: '1px',\n paddingTop: '16px',\n borderBottom: \"1px solid \".concat(semanticColors.bodyDivider),\n cursor: 'default',\n userSelect: 'none',\n selectors: (_a = {},\n _a[\"&:hover .\".concat(classNames.check)] = {\n opacity: 1,\n },\n _a[\"& .\".concat(classNames.tooltipHost, \" .\").concat(classNames.checkTooltip)] = {\n display: 'block',\n },\n _a),\n },\n isAllSelected && classNames.isAllSelected,\n isResizingColumn && classNames.isResizingColumn,\n className,\n ],\n check: [\n classNames.check,\n {\n height: HEADER_HEIGHT,\n },\n {\n selectors: (_b = {},\n _b[\".\".concat(IsFocusVisibleClassName, \" &:focus, :host(.\").concat(IsFocusVisibleClassName, \") &:focus\")] = {\n opacity: 1,\n },\n _b),\n },\n ],\n cellWrapperPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n cellIsCheck: [\n cellStyles,\n classNames.cellIsCheck,\n {\n position: 'relative',\n padding: 0,\n margin: 0,\n display: 'inline-flex',\n alignItems: 'center',\n border: 'none',\n },\n isAllSelected && {\n opacity: 1,\n },\n ],\n cellIsGroupExpander: [\n cellStyles,\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: fonts.small.fontSize,\n padding: 0,\n border: 'none',\n width: GROUP_EXPANDER_WIDTH, // align with GroupedList's first expandIcon cell width.\n color: palette.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: palette.neutralLighter,\n },\n ':active': {\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n cellIsActionable: {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n cellIsEmpty: {\n textOverflow: 'clip',\n },\n cellSizer: [\n classNames.cellSizer,\n focusClear(),\n {\n display: 'inline-block',\n position: 'relative',\n cursor: 'ew-resize',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 'inherit',\n background: 'transparent',\n zIndex: 1,\n width: 16,\n selectors: (_c = {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 1,\n background: colors.resizerColor,\n opacity: 0,\n left: '50%',\n },\n ':focus:after': cellSizerFadeInStyles,\n ':hover:after': cellSizerFadeInStyles\n },\n _c[\"&.\".concat(classNames.isResizing, \":after\")] = [\n cellSizerFadeInStyles,\n {\n boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n },\n ],\n _c),\n },\n ],\n cellIsResizing: classNames.isResizing,\n cellSizerStart: {\n margin: '0 -8px',\n },\n cellSizerEnd: {\n margin: 0,\n marginLeft: -16,\n },\n collapseButton: [\n classNames.collapseButton,\n {\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n isAllCollapsed\n ? [\n classNames.isCollapsed,\n {\n transform: 'rotate(0deg)',\n },\n ]\n : {\n transform: getRTL(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',\n },\n ],\n checkTooltip: classNames.checkTooltip,\n sizingOverlay: isSizing && {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n cursor: 'ew-resize',\n background: 'rgba(255, 255, 255, 0)',\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ background: 'transparent' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n accessibleLabel: hiddenContentStyle,\n dropHintCircleStyle: [\n classNames.dropHintCircleStyle,\n {\n display: 'inline-block',\n visibility: 'hidden',\n position: 'absolute',\n bottom: 0,\n height: 9,\n width: 9,\n borderRadius: '50%',\n marginLeft: -5,\n top: 34,\n overflow: 'visible',\n zIndex: 10,\n border: \"1px solid \".concat(palette.themePrimary),\n background: palette.white,\n },\n ],\n dropHintCaretStyle: [\n classNames.dropHintCaretStyle,\n {\n display: 'none',\n position: 'absolute',\n top: -28,\n left: -6.5,\n fontSize: fonts.medium.fontSize,\n color: palette.themePrimary,\n overflow: 'visible',\n zIndex: 10,\n },\n ],\n dropHintLineStyle: [\n classNames.dropHintLineStyle,\n {\n display: 'none',\n position: 'absolute',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 42,\n width: 1,\n background: palette.themePrimary,\n zIndex: 10,\n },\n ],\n dropHintStyle: {\n display: 'inline-block',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=DetailsHeader.styles.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nexport var CheckGlobalClassNames = {\n root: 'ms-Check',\n circle: 'ms-Check-circle',\n check: 'ms-Check-check',\n /** Must be manually applied to the parent element of the check. */\n checkHost: 'ms-Check-checkHost',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n var _f = props.height, height = _f === void 0 ? props.checkBoxHeight || '18px' : _f, checked = props.checked, className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var isRTL = getRTL(theme);\n var classNames = getGlobalClassNames(CheckGlobalClassNames, theme);\n var sharedCircleCheck = {\n fontSize: height,\n position: 'absolute',\n left: 0,\n top: 0,\n width: height,\n height: height,\n textAlign: 'center',\n // inline-flex prevents the check from shifting with custom line height styles\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n // lineHeight currently needs to be a string to output without 'px'\n lineHeight: '1',\n width: height,\n height: height,\n verticalAlign: 'top',\n position: 'relative',\n userSelect: 'none',\n selectors: (_a = {\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: '1px',\n right: '1px',\n bottom: '1px',\n left: '1px',\n borderRadius: '50%',\n opacity: 1,\n background: semanticColors.bodyBackground,\n }\n },\n _a[\".\".concat(classNames.checkHost, \":hover &, .\").concat(classNames.checkHost, \":focus &, &:hover, &:focus\")] = {\n opacity: 1,\n },\n _a),\n },\n checked && [\n 'is-checked',\n {\n selectors: {\n ':before': {\n background: palette.themePrimary,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n background: 'Window',\n },\n _b),\n },\n },\n },\n ],\n className,\n ],\n circle: [\n classNames.circle,\n sharedCircleCheck,\n {\n color: palette.neutralSecondary,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'WindowText',\n },\n _c),\n },\n checked && {\n color: palette.white,\n },\n ],\n check: [\n classNames.check,\n sharedCircleCheck,\n {\n opacity: 0,\n color: palette.neutralSecondary,\n fontSize: IconFontSizes.medium,\n left: isRTL ? '-0.5px' : '.5px', // for centering the check icon inside the circle.\n top: '-1px', // the check is slightly lower than center compared to the circle.\n selectors: (_d = {\n ':hover': {\n opacity: 1,\n }\n },\n _d[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _d),\n },\n checked && {\n opacity: 1,\n color: palette.white,\n fontWeight: 900,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n color: 'WindowText',\n },\n _e),\n },\n ],\n checkHost: classNames.checkHost,\n };\n};\n//# sourceMappingURL=Check.styles.js.map","import { getGlobalClassNames, getFocusStyle } from '../../Styling';\nimport { DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles';\nimport { HEADER_HEIGHT } from './DetailsHeader.styles';\nimport { CheckGlobalClassNames } from '../../components/Check/Check.styles';\nvar GlobalClassNames = {\n root: 'ms-DetailsRow-check',\n isDisabled: 'ms-DetailsRow-check--isDisabled',\n isHeader: 'ms-DetailsRow-check--isHeader',\n};\nexport var CHECK_CELL_WIDTH = 48;\nexport var getDetailsRowCheckStyles = function (props) {\n var theme = props.theme, className = props.className, isHeader = props.isHeader, selected = props.selected, anySelected = props.anySelected, canSelect = props.canSelect, compact = props.compact, isVisible = props.isVisible;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowHeight = DEFAULT_ROW_HEIGHTS.rowHeight, compactRowHeight = DEFAULT_ROW_HEIGHTS.compactRowHeight;\n var height = isHeader ? HEADER_HEIGHT : compact ? compactRowHeight : rowHeight;\n var isCheckVisible = isVisible || selected || anySelected;\n return {\n root: [classNames.root, className],\n check: [\n !canSelect && classNames.isDisabled,\n isHeader && classNames.isHeader,\n getFocusStyle(theme),\n theme.fonts.small,\n CheckGlobalClassNames.checkHost,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'default',\n boxSizing: 'border-box',\n verticalAlign: 'top',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n opacity: isCheckVisible ? 1 : 0,\n height: height,\n width: CHECK_CELL_WIDTH,\n padding: 0,\n margin: 0,\n },\n ],\n isDisabled: [],\n };\n};\n//# sourceMappingURL=DetailsRowCheck.styles.js.map","import { getGlobalClassNames, getFocusStyle, AnimationVariables, FontWeights, IconFontSizes } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from '../DetailsList/DetailsRow.styles';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as EXPAND_BUTTON_WIDTH } from './GroupSpacer';\nvar GlobalClassNames = {\n root: 'ms-GroupHeader',\n compact: 'ms-GroupHeader--compact',\n check: 'ms-GroupHeader-check',\n dropIcon: 'ms-GroupHeader-dropIcon',\n expand: 'ms-GroupHeader-expand',\n isCollapsed: 'is-collapsed',\n title: 'ms-GroupHeader-title',\n isSelected: 'is-selected',\n iconTag: 'ms-Icon--Tag',\n group: 'ms-GroupedList-group',\n isDropping: 'is-dropping',\n};\nvar beziers = {\n easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n};\nvar DEFAULT_GROUP_HEADER_HEIGHT = 48;\nvar COMPACT_GROUP_HEADER_HEIGHT = 40;\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, className = props.className, selected = props.selected, isCollapsed = props.isCollapsed, compact = props.compact;\n // padding from the source to align GroupHeader title with DetailsRow's first cell.\n var cellLeftPadding = DEFAULT_CELL_STYLE_PROPS.cellLeftPadding;\n var finalRowHeight = compact ? COMPACT_GROUP_HEADER_HEIGHT : DEFAULT_GROUP_HEADER_HEIGHT;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkExpandResetStyles = [\n getFocusStyle(theme),\n {\n cursor: 'default',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0, // cancel default