@itwin/core-react 4.10.0-dev.1 → 4.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -1
- package/lib/cjs/core-react/UiCore.d.ts +1 -1
- package/lib/cjs/core-react/UiCore.js +2 -4
- package/lib/cjs/core-react/UiCore.js.map +1 -1
- package/lib/cjs/core-react/autosuggest/AutoSuggest.js +3 -3
- package/lib/cjs/core-react/autosuggest/AutoSuggest.js.map +1 -1
- package/lib/cjs/core-react/badge/BadgeUtilities.d.ts +10 -2
- package/lib/cjs/core-react/badge/BadgeUtilities.d.ts.map +1 -1
- package/lib/cjs/core-react/badge/BadgeUtilities.js +9 -5
- package/lib/cjs/core-react/badge/BadgeUtilities.js.map +1 -1
- package/lib/cjs/core-react/base/Gap.js +1 -1
- package/lib/cjs/core-react/base/Gap.js.map +1 -1
- package/lib/cjs/core-react/button/UnderlinedButton.js +1 -1
- package/lib/cjs/core-react/button/UnderlinedButton.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.d.ts.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.js +11 -8
- package/lib/cjs/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.scss +0 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.d.ts +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.d.ts.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.js +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js +5 -3
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.js +5 -3
- package/lib/cjs/core-react/dialog/Dialog.js.map +1 -1
- package/lib/cjs/core-react/dialog/GlobalDialog.js +2 -1
- package/lib/cjs/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/cjs/core-react/elementseparator/ElementSeparator.d.ts.map +1 -1
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js +5 -5
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.d.ts.map +1 -1
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.js +22 -21
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.js.map +1 -1
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js +2 -1
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js.map +1 -1
- package/lib/cjs/core-react/inputs/input-label.scss +1 -2
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.js +4 -4
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.js.map +1 -1
- package/lib/cjs/core-react/inputs/variables.scss +0 -2
- package/lib/cjs/core-react/listbox/Listbox.js +7 -6
- package/lib/cjs/core-react/listbox/Listbox.js.map +1 -1
- package/lib/cjs/core-react/notification/MessageRenderer.js +1 -1
- package/lib/cjs/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/cjs/core-react/popup/Popup.d.ts.map +1 -1
- package/lib/cjs/core-react/popup/Popup.js +11 -6
- package/lib/cjs/core-react/popup/Popup.js.map +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts.map +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.js +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.js.map +1 -1
- package/lib/cjs/core-react/searchbox/SearchBox.js +2 -2
- package/lib/cjs/core-react/searchbox/SearchBox.js.map +1 -1
- package/lib/cjs/core-react/tabs/tabs.scss +1 -1
- package/lib/cjs/core-react/tree/Node.js +2 -1
- package/lib/cjs/core-react/tree/Node.js.map +1 -1
- package/lib/cjs/core-react/useTranslation.d.ts +10 -0
- package/lib/cjs/core-react/useTranslation.d.ts.map +1 -0
- package/lib/cjs/core-react/useTranslation.js +20 -0
- package/lib/cjs/core-react/useTranslation.js.map +1 -0
- package/lib/cjs/core-react/utils/IconWebComponent.js +1 -1
- package/lib/cjs/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/cjs/core-react/utils/getObjectClassName.js +3 -2
- package/lib/cjs/core-react/utils/getObjectClassName.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js +2 -1
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.d.ts.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js +24 -16
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/lib/esm/core-react/UiCore.d.ts +1 -1
- package/lib/esm/core-react/UiCore.js +2 -4
- package/lib/esm/core-react/UiCore.js.map +1 -1
- package/lib/esm/core-react/autosuggest/AutoSuggest.js +3 -3
- package/lib/esm/core-react/autosuggest/AutoSuggest.js.map +1 -1
- package/lib/esm/core-react/badge/BadgeUtilities.d.ts +10 -2
- package/lib/esm/core-react/badge/BadgeUtilities.d.ts.map +1 -1
- package/lib/esm/core-react/badge/BadgeUtilities.js +6 -2
- package/lib/esm/core-react/badge/BadgeUtilities.js.map +1 -1
- package/lib/esm/core-react/base/Gap.js +1 -1
- package/lib/esm/core-react/base/Gap.js.map +1 -1
- package/lib/esm/core-react/button/UnderlinedButton.js +1 -1
- package/lib/esm/core-react/button/UnderlinedButton.js.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.d.ts.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.js +11 -8
- package/lib/esm/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.scss +0 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.d.ts +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.d.ts.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.js +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.js.map +1 -1
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js +5 -3
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.js +5 -3
- package/lib/esm/core-react/dialog/Dialog.js.map +1 -1
- package/lib/esm/core-react/dialog/GlobalDialog.js +2 -1
- package/lib/esm/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/esm/core-react/elementseparator/ElementSeparator.d.ts.map +1 -1
- package/lib/esm/core-react/elementseparator/ElementSeparator.js +5 -5
- package/lib/esm/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.d.ts.map +1 -1
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.js +22 -21
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.js.map +1 -1
- package/lib/esm/core-react/hocs/withOnOutsideClick.js +2 -1
- package/lib/esm/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/esm/core-react/icons/IconComponent.js +1 -1
- package/lib/esm/core-react/icons/IconComponent.js.map +1 -1
- package/lib/esm/core-react/inputs/input-label.scss +1 -2
- package/lib/esm/core-react/inputs/numberinput/NumberInput.js +4 -4
- package/lib/esm/core-react/inputs/numberinput/NumberInput.js.map +1 -1
- package/lib/esm/core-react/inputs/variables.scss +0 -2
- package/lib/esm/core-react/listbox/Listbox.js +7 -6
- package/lib/esm/core-react/listbox/Listbox.js.map +1 -1
- package/lib/esm/core-react/notification/MessageRenderer.js +1 -1
- package/lib/esm/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/esm/core-react/popup/Popup.d.ts.map +1 -1
- package/lib/esm/core-react/popup/Popup.js +11 -6
- package/lib/esm/core-react/popup/Popup.js.map +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.d.ts.map +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.js +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.js.map +1 -1
- package/lib/esm/core-react/searchbox/SearchBox.js +2 -2
- package/lib/esm/core-react/searchbox/SearchBox.js.map +1 -1
- package/lib/esm/core-react/tabs/tabs.scss +1 -1
- package/lib/esm/core-react/tree/Node.js +2 -1
- package/lib/esm/core-react/tree/Node.js.map +1 -1
- package/lib/esm/core-react/useTranslation.d.ts +10 -0
- package/lib/esm/core-react/useTranslation.d.ts.map +1 -0
- package/lib/esm/core-react/useTranslation.js +16 -0
- package/lib/esm/core-react/useTranslation.js.map +1 -0
- package/lib/esm/core-react/utils/IconWebComponent.js +1 -1
- package/lib/esm/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/esm/core-react/utils/getObjectClassName.js +3 -2
- package/lib/esm/core-react/utils/getObjectClassName.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js +2 -1
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useResizeObserver.d.ts.map +1 -1
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js +24 -16
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/package.json +8 -8
|
@@ -11,7 +11,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } f
|
|
|
11
11
|
import classnames from "classnames";
|
|
12
12
|
import { Orientation } from "../enums/Orientation";
|
|
13
13
|
import { useThrottledFn } from "../utils/hooks/useThrottledFn";
|
|
14
|
-
import {
|
|
14
|
+
import { useTranslation } from "../useTranslation";
|
|
15
15
|
function getCurrentGlobalPosition(orientation, e) {
|
|
16
16
|
return orientation === Orientation.Horizontal ? e.clientX : e.clientY;
|
|
17
17
|
}
|
|
@@ -32,8 +32,8 @@ const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResize
|
|
|
32
32
|
const pointerOutOfBounds = useRef(false);
|
|
33
33
|
const [isElementDragged, setIsDragged] = useState(false);
|
|
34
34
|
const [isElementHovered, setIsHovered] = useState(false);
|
|
35
|
-
const isGroupDragged = isResizeHandleBeingDragged
|
|
36
|
-
const isGroupHovered = isResizeHandleHovered
|
|
35
|
+
const isGroupDragged = isResizeHandleBeingDragged !== null && isResizeHandleBeingDragged !== void 0 ? isResizeHandleBeingDragged : isElementDragged;
|
|
36
|
+
const isGroupHovered = isResizeHandleHovered !== null && isResizeHandleHovered !== void 0 ? isResizeHandleHovered : isElementHovered;
|
|
37
37
|
useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
|
|
38
38
|
useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
|
|
39
39
|
if (isGroupHovered && pointerOutOfBounds.current)
|
|
@@ -141,7 +141,7 @@ function getStyle(orientation, separatorSize) {
|
|
|
141
141
|
* @public
|
|
142
142
|
*/
|
|
143
143
|
export const ElementSeparator = (props) => {
|
|
144
|
-
const
|
|
144
|
+
const { translate } = useTranslation();
|
|
145
145
|
const [hasHoverHappened, setHasHoverHappened] = useState(false);
|
|
146
146
|
const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);
|
|
147
147
|
const isHoverNeeded = isHovered || isDragged;
|
|
@@ -161,6 +161,6 @@ export const ElementSeparator = (props) => {
|
|
|
161
161
|
...style,
|
|
162
162
|
...props.style,
|
|
163
163
|
};
|
|
164
|
-
return (React.createElement("button", { style: styles, className: classNames, onPointerDown: onPointerDown, onPointerOver: onPointerOver, onPointerOut: onPointerOut, "aria-label": label
|
|
164
|
+
return (React.createElement("button", { style: styles, className: classNames, onPointerDown: onPointerDown, onPointerOver: onPointerOver, onPointerOut: onPointerOut, "aria-label": translate("elementSeparator.label") }));
|
|
165
165
|
};
|
|
166
166
|
//# sourceMappingURL=ElementSeparator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={label.current}\n />\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { useTranslation } from \"../useTranslation\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const { translate } = useTranslation();\n\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={translate(\"elementSeparator.label\")}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE/D;;GAEG;AACH,qBAAa,qBAAqB;IAQvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IARhD,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,yBAAyB,CAAC,CAAwB;gBAGjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAUhD,qBAAqB;IACrB,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED,8BAA8B;IAC9B,IAAW,WAAW,IAAI,WAAW,CAEpC;IACD,IAAW,WAAW,CAAC,WAAW,EAAE,WAAW,EAE9C;IAED,2GAA2G;IAC3G,IAAW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,CAAC,EAAE,OAAO,EAE9B;IAED,+FAA+F;IAC/F,IAAW,wBAAwB,IAAI,qBAAqB,GAAG,SAAS,CAEvE;IACD,IAAW,wBAAwB,CAAC,CAAC,EAAE,qBAAqB,GAAG,SAAS,EAEvE;IAED,8BAA8B;IACvB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IA6B1E,4BAA4B;IACrB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWxE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAKrB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;OACG;IACH,OAAO,CAAC,sBAAsB;
|
|
1
|
+
{"version":3,"file":"ItemKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE/D;;GAEG;AACH,qBAAa,qBAAqB;IAQvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IARhD,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,yBAAyB,CAAC,CAAwB;gBAGjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAUhD,qBAAqB;IACrB,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED,8BAA8B;IAC9B,IAAW,WAAW,IAAI,WAAW,CAEpC;IACD,IAAW,WAAW,CAAC,WAAW,EAAE,WAAW,EAE9C;IAED,2GAA2G;IAC3G,IAAW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,CAAC,EAAE,OAAO,EAE9B;IAED,+FAA+F;IAC/F,IAAW,wBAAwB,IAAI,qBAAqB,GAAG,SAAS,CAEvE;IACD,IAAW,wBAAwB,CAAC,CAAC,EAAE,qBAAqB,GAAG,SAAS,EAEvE;IAED,8BAA8B;IACvB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IA6B1E,4BAA4B;IACrB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWxE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAKrB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;OACG;IACH,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,YAAY;CAGrB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAQpD"}
|
|
@@ -56,23 +56,23 @@ export class ItemKeyboardNavigator {
|
|
|
56
56
|
handleKeyDownEvent(event, index) {
|
|
57
57
|
const key = event.key;
|
|
58
58
|
switch (key) {
|
|
59
|
-
case Key.Home:
|
|
59
|
+
case Key.Home.valueOf():
|
|
60
60
|
event.preventDefault();
|
|
61
61
|
// Activate first item
|
|
62
62
|
this.focusFirstItem();
|
|
63
63
|
break;
|
|
64
|
-
case Key.End:
|
|
64
|
+
case Key.End.valueOf():
|
|
65
65
|
event.preventDefault();
|
|
66
66
|
// Activate last item
|
|
67
67
|
this.focusLastItem();
|
|
68
68
|
break;
|
|
69
69
|
// Up and down are in keydown
|
|
70
70
|
// because we need to prevent page scroll >:)
|
|
71
|
-
case Key.ArrowUp:
|
|
72
|
-
case Key.ArrowDown:
|
|
71
|
+
case Key.ArrowUp.valueOf():
|
|
72
|
+
case Key.ArrowDown.valueOf():
|
|
73
73
|
this.determineOrientation(event, index);
|
|
74
74
|
break;
|
|
75
|
-
case Key.Enter:
|
|
75
|
+
case Key.Enter.valueOf():
|
|
76
76
|
case " ":
|
|
77
77
|
this.activateItem(index);
|
|
78
78
|
break;
|
|
@@ -82,8 +82,8 @@ export class ItemKeyboardNavigator {
|
|
|
82
82
|
handleKeyUpEvent(event, index) {
|
|
83
83
|
const key = event.key;
|
|
84
84
|
switch (key) {
|
|
85
|
-
case Key.ArrowLeft:
|
|
86
|
-
case Key.ArrowRight:
|
|
85
|
+
case Key.ArrowLeft.valueOf():
|
|
86
|
+
case Key.ArrowRight.valueOf():
|
|
87
87
|
this.determineOrientation(event, index);
|
|
88
88
|
break;
|
|
89
89
|
}
|
|
@@ -104,22 +104,22 @@ export class ItemKeyboardNavigator {
|
|
|
104
104
|
const vertical = this._orientation === Orientation.Vertical;
|
|
105
105
|
let proceed = false;
|
|
106
106
|
if (vertical) {
|
|
107
|
-
if (key === Key.ArrowUp || key === Key.ArrowDown) {
|
|
107
|
+
if (key === Key.ArrowUp.valueOf() || key === Key.ArrowDown.valueOf()) {
|
|
108
108
|
event.preventDefault();
|
|
109
109
|
proceed = true;
|
|
110
110
|
}
|
|
111
111
|
else if (this.crossAxisArrowKeyHandler &&
|
|
112
|
-
(key === Key.ArrowLeft || key === Key.ArrowRight)) {
|
|
113
|
-
this.crossAxisArrowKeyHandler(key === Key.ArrowRight);
|
|
112
|
+
(key === Key.ArrowLeft.valueOf() || key === Key.ArrowRight.valueOf())) {
|
|
113
|
+
this.crossAxisArrowKeyHandler(key === Key.ArrowRight.valueOf());
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
else {
|
|
117
|
-
if (key === Key.ArrowLeft || key === Key.ArrowRight) {
|
|
117
|
+
if (key === Key.ArrowLeft.valueOf() || key === Key.ArrowRight.valueOf()) {
|
|
118
118
|
proceed = true;
|
|
119
119
|
}
|
|
120
120
|
else if (this.crossAxisArrowKeyHandler &&
|
|
121
|
-
(key === Key.ArrowUp || key === Key.ArrowDown)) {
|
|
122
|
-
this.crossAxisArrowKeyHandler(key === Key.ArrowDown);
|
|
121
|
+
(key === Key.ArrowUp.valueOf() || key === Key.ArrowDown.valueOf())) {
|
|
122
|
+
this.crossAxisArrowKeyHandler(key === Key.ArrowDown.valueOf());
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
if (proceed) {
|
|
@@ -141,7 +141,8 @@ export class ItemKeyboardNavigator {
|
|
|
141
141
|
else {
|
|
142
142
|
// istanbul ignore else
|
|
143
143
|
if (this._allowWrap) {
|
|
144
|
-
if (pressed === Key.ArrowLeft
|
|
144
|
+
if (pressed === Key.ArrowLeft.valueOf() ||
|
|
145
|
+
pressed === Key.ArrowUp.valueOf()) {
|
|
145
146
|
this.focusLastItem();
|
|
146
147
|
}
|
|
147
148
|
else {
|
|
@@ -160,15 +161,15 @@ export class ItemKeyboardNavigator {
|
|
|
160
161
|
*/
|
|
161
162
|
export function isNavigationKey(key) {
|
|
162
163
|
return (isArrowKey(key) ||
|
|
163
|
-
key === Key.Home ||
|
|
164
|
-
key === Key.End ||
|
|
164
|
+
key === Key.Home.valueOf() ||
|
|
165
|
+
key === Key.End.valueOf() ||
|
|
165
166
|
key === " " ||
|
|
166
|
-
key === Key.Enter);
|
|
167
|
+
key === Key.Enter.valueOf());
|
|
167
168
|
}
|
|
168
169
|
function isArrowKey(key) {
|
|
169
|
-
return (key === Key.ArrowLeft ||
|
|
170
|
-
key === Key.ArrowRight ||
|
|
171
|
-
key === Key.ArrowUp ||
|
|
172
|
-
key === Key.ArrowDown);
|
|
170
|
+
return (key === Key.ArrowLeft.valueOf() ||
|
|
171
|
+
key === Key.ArrowRight.valueOf() ||
|
|
172
|
+
key === Key.ArrowUp.valueOf() ||
|
|
173
|
+
key === Key.ArrowDown.valueOf());
|
|
173
174
|
}
|
|
174
175
|
//# sourceMappingURL=ItemKeyboardNavigator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemKeyboardNavigator.js","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Focus\n */\n\nimport { Key } from \"ts-key-enum\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Cross-Axis Arrow Key Callback\n * @internal\n */\nexport type CrossAxisArrowKeyFunc = (forward: boolean) => void;\n\n/** Keyboard Navigator for parent components\n * @internal\n */\nexport class ItemKeyboardNavigator {\n private _direction: Map<string, number>;\n private _itemCount = 0;\n private _orientation = Orientation.Horizontal;\n private _allowWrap = true;\n private _crossAxisArrowKeyHandler?: CrossAxisArrowKeyFunc;\n\n constructor(\n public onFocusItem: (index: number) => void,\n public onActivateItem: (index: number) => void\n ) {\n this._direction = new Map<string, number>([\n [Key.ArrowLeft, -1],\n [Key.ArrowUp, -1],\n [Key.ArrowRight, 1],\n [Key.ArrowDown, 1],\n ]);\n }\n\n /** The item count */\n public get itemCount(): number {\n return this._itemCount;\n }\n public set itemCount(count: number) {\n this._itemCount = count;\n }\n\n /** The primary orientation */\n public get orientation(): Orientation {\n return this._orientation;\n }\n public set orientation(orientation: Orientation) {\n this._orientation = orientation;\n }\n\n /** The allow wrap property controls whether the movement will stop at the first and last items or wrap */\n public get allowWrap(): boolean {\n return this._allowWrap;\n }\n public set allowWrap(v: boolean) {\n this._allowWrap = v;\n }\n\n /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */\n public get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined {\n return this._crossAxisArrowKeyHandler;\n }\n public set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined) {\n this._crossAxisArrowKeyHandler = v;\n }\n\n /** Handle KeyDown on items */\n public handleKeyDownEvent(event: React.KeyboardEvent, index: number): void {\n const key = event.key;\n\n switch (key) {\n case Key.Home:\n event.preventDefault();\n // Activate first item\n this.focusFirstItem();\n break;\n case Key.End:\n event.preventDefault();\n // Activate last item\n this.focusLastItem();\n break;\n\n // Up and down are in keydown\n // because we need to prevent page scroll >:)\n case Key.ArrowUp:\n case Key.ArrowDown:\n this.determineOrientation(event, index);\n break;\n\n case Key.Enter:\n case \" \":\n this.activateItem(index);\n break;\n }\n }\n\n /** Handle KeyUp on items */\n public handleKeyUpEvent(event: React.KeyboardEvent, index: number): void {\n const key = event.key;\n\n switch (key) {\n case Key.ArrowLeft:\n case Key.ArrowRight:\n this.determineOrientation(event, index);\n break;\n }\n }\n\n private focusFirstItem(): void {\n this.onFocusItem(0);\n }\n\n private focusLastItem(): void {\n const index = this._itemCount - 1;\n this.onFocusItem(index);\n }\n\n /** When an item list's orientation is set to vertical,\n * only up and down arrow should function.\n * In all other cases only left and right arrow function.\n */\n private determineOrientation(\n event: React.KeyboardEvent,\n index: number\n ): void {\n const key = event.key;\n const vertical = this._orientation === Orientation.Vertical;\n let proceed = false;\n\n if (vertical) {\n if (key === Key.ArrowUp || key === Key.ArrowDown) {\n event.preventDefault();\n proceed = true;\n } else if (\n this.crossAxisArrowKeyHandler &&\n (key === Key.ArrowLeft || key === Key.ArrowRight)\n ) {\n this.crossAxisArrowKeyHandler(key === Key.ArrowRight);\n }\n } else {\n if (key === Key.ArrowLeft || key === Key.ArrowRight) {\n proceed = true;\n } else if (\n this.crossAxisArrowKeyHandler &&\n (key === Key.ArrowUp || key === Key.ArrowDown)\n ) {\n this.crossAxisArrowKeyHandler(key === Key.ArrowDown);\n }\n }\n\n if (proceed) {\n this.switchItemOnArrowPress(event, index);\n }\n }\n\n /** Either focus the next, previous, first, or last item depending on key pressed\n */\n private switchItemOnArrowPress(\n event: React.KeyboardEvent,\n index: number\n ): void {\n // Add or subtract depending on key pressed\n const pressed = event.key;\n const targetDirection = this._direction.get(pressed);\n\n // istanbul ignore else\n if (targetDirection) {\n const newIndex = index + targetDirection;\n\n if (0 <= newIndex && newIndex < this._itemCount) {\n this.onFocusItem(newIndex);\n } else {\n // istanbul ignore else\n if (this._allowWrap) {\n if (pressed === Key.ArrowLeft || pressed === Key.ArrowUp) {\n this.focusLastItem();\n } else {\n this.focusFirstItem();\n }\n }\n }\n }\n }\n\n private activateItem(index: number): void {\n this.onActivateItem(index);\n }\n}\n\n/** Determines if a KeyboardEvent.key is an Item Navigation key\n * @internal\n */\nexport function isNavigationKey(key: string): boolean {\n return (\n isArrowKey(key) ||\n key === Key.Home ||\n key === Key.End ||\n key === \" \" ||\n key === Key.Enter\n );\n}\n\nfunction isArrowKey(key: string): boolean {\n return (\n key === Key.ArrowLeft ||\n key === Key.ArrowRight ||\n key === Key.ArrowUp ||\n key === Key.ArrowDown\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ItemKeyboardNavigator.js","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Focus\n */\n\nimport { Key } from \"ts-key-enum\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Cross-Axis Arrow Key Callback\n * @internal\n */\nexport type CrossAxisArrowKeyFunc = (forward: boolean) => void;\n\n/** Keyboard Navigator for parent components\n * @internal\n */\nexport class ItemKeyboardNavigator {\n private _direction: Map<string, number>;\n private _itemCount = 0;\n private _orientation = Orientation.Horizontal;\n private _allowWrap = true;\n private _crossAxisArrowKeyHandler?: CrossAxisArrowKeyFunc;\n\n constructor(\n public onFocusItem: (index: number) => void,\n public onActivateItem: (index: number) => void\n ) {\n this._direction = new Map<string, number>([\n [Key.ArrowLeft, -1],\n [Key.ArrowUp, -1],\n [Key.ArrowRight, 1],\n [Key.ArrowDown, 1],\n ]);\n }\n\n /** The item count */\n public get itemCount(): number {\n return this._itemCount;\n }\n public set itemCount(count: number) {\n this._itemCount = count;\n }\n\n /** The primary orientation */\n public get orientation(): Orientation {\n return this._orientation;\n }\n public set orientation(orientation: Orientation) {\n this._orientation = orientation;\n }\n\n /** The allow wrap property controls whether the movement will stop at the first and last items or wrap */\n public get allowWrap(): boolean {\n return this._allowWrap;\n }\n public set allowWrap(v: boolean) {\n this._allowWrap = v;\n }\n\n /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */\n public get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined {\n return this._crossAxisArrowKeyHandler;\n }\n public set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined) {\n this._crossAxisArrowKeyHandler = v;\n }\n\n /** Handle KeyDown on items */\n public handleKeyDownEvent(event: React.KeyboardEvent, index: number): void {\n const key = event.key;\n\n switch (key) {\n case Key.Home.valueOf():\n event.preventDefault();\n // Activate first item\n this.focusFirstItem();\n break;\n case Key.End.valueOf():\n event.preventDefault();\n // Activate last item\n this.focusLastItem();\n break;\n\n // Up and down are in keydown\n // because we need to prevent page scroll >:)\n case Key.ArrowUp.valueOf():\n case Key.ArrowDown.valueOf():\n this.determineOrientation(event, index);\n break;\n\n case Key.Enter.valueOf():\n case \" \":\n this.activateItem(index);\n break;\n }\n }\n\n /** Handle KeyUp on items */\n public handleKeyUpEvent(event: React.KeyboardEvent, index: number): void {\n const key = event.key;\n\n switch (key) {\n case Key.ArrowLeft.valueOf():\n case Key.ArrowRight.valueOf():\n this.determineOrientation(event, index);\n break;\n }\n }\n\n private focusFirstItem(): void {\n this.onFocusItem(0);\n }\n\n private focusLastItem(): void {\n const index = this._itemCount - 1;\n this.onFocusItem(index);\n }\n\n /** When an item list's orientation is set to vertical,\n * only up and down arrow should function.\n * In all other cases only left and right arrow function.\n */\n private determineOrientation(\n event: React.KeyboardEvent,\n index: number\n ): void {\n const key = event.key;\n const vertical = this._orientation === Orientation.Vertical;\n let proceed = false;\n\n if (vertical) {\n if (key === Key.ArrowUp.valueOf() || key === Key.ArrowDown.valueOf()) {\n event.preventDefault();\n proceed = true;\n } else if (\n this.crossAxisArrowKeyHandler &&\n (key === Key.ArrowLeft.valueOf() || key === Key.ArrowRight.valueOf())\n ) {\n this.crossAxisArrowKeyHandler(key === Key.ArrowRight.valueOf());\n }\n } else {\n if (key === Key.ArrowLeft.valueOf() || key === Key.ArrowRight.valueOf()) {\n proceed = true;\n } else if (\n this.crossAxisArrowKeyHandler &&\n (key === Key.ArrowUp.valueOf() || key === Key.ArrowDown.valueOf())\n ) {\n this.crossAxisArrowKeyHandler(key === Key.ArrowDown.valueOf());\n }\n }\n\n if (proceed) {\n this.switchItemOnArrowPress(event, index);\n }\n }\n\n /** Either focus the next, previous, first, or last item depending on key pressed\n */\n private switchItemOnArrowPress(\n event: React.KeyboardEvent,\n index: number\n ): void {\n // Add or subtract depending on key pressed\n const pressed = event.key;\n const targetDirection = this._direction.get(pressed);\n\n // istanbul ignore else\n if (targetDirection) {\n const newIndex = index + targetDirection;\n\n if (0 <= newIndex && newIndex < this._itemCount) {\n this.onFocusItem(newIndex);\n } else {\n // istanbul ignore else\n if (this._allowWrap) {\n if (\n pressed === Key.ArrowLeft.valueOf() ||\n pressed === Key.ArrowUp.valueOf()\n ) {\n this.focusLastItem();\n } else {\n this.focusFirstItem();\n }\n }\n }\n }\n }\n\n private activateItem(index: number): void {\n this.onActivateItem(index);\n }\n}\n\n/** Determines if a KeyboardEvent.key is an Item Navigation key\n * @internal\n */\nexport function isNavigationKey(key: string): boolean {\n return (\n isArrowKey(key) ||\n key === Key.Home.valueOf() ||\n key === Key.End.valueOf() ||\n key === \" \" ||\n key === Key.Enter.valueOf()\n );\n}\n\nfunction isArrowKey(key: string): boolean {\n return (\n key === Key.ArrowLeft.valueOf() ||\n key === Key.ArrowRight.valueOf() ||\n key === Key.ArrowUp.valueOf() ||\n key === Key.ArrowDown.valueOf()\n );\n}\n"]}
|
|
@@ -84,8 +84,9 @@ export const withOnOutsideClick = (Component, defaultOnOutsideClick, useCapture
|
|
|
84
84
|
return defaultOnOutsideClick(e);
|
|
85
85
|
}
|
|
86
86
|
getParentDocument() {
|
|
87
|
+
var _a, _b;
|
|
87
88
|
// istanbul ignore next
|
|
88
|
-
return this.outsideClickContainerDiv
|
|
89
|
+
return (_b = (_a = this.outsideClickContainerDiv) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
|
|
89
90
|
}
|
|
90
91
|
componentDidMount() {
|
|
91
92
|
const outsideClickParentDocument = this.getParentDocument();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withOnOutsideClick.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"withOnOutsideClick.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,SAA8C,EAC9C,qBAAkD,EAClD,aAAsB,IAAI,EAC1B,mBAA4B,IAAI,EAChC,EAAE;IACF,OAAO,MAAM,kBAAmB,SAAQ,KAAK,CAAC,aAE7C;QAFM;;YAGL,gBAAgB;YACT,6BAAwB,GAA2B,IAAI,CAAC;YAC/D,gBAAgB;YACT,kBAAa,GAAG,KAAK,CAAC;YAiC7B,gBAAgB;YACT,wBAAmB,GAAG,CAAC,CAAa,EAAE,EAAE;gBAC7C,IACE,CAAC,IAAI,CAAC,wBAAwB;oBAC9B,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC;oBAC3B,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;oBAEhD,OAAO;gBAET,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;YAChC,CAAC,CAAC;YAEF,gBAAgB;YACT,8BAAyB,GAAG,CAAC,CAAe,EAAE,EAAE;gBACrD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;gBAC1B,uBAAuB;gBACvB,IAAI,IAAI,CAAC,wBAAwB,EAAE;oBACjC,6FAA6F;oBAC7F,IAAI,CAAC,aAAa;wBAChB,CAAC,CAAC,CAAC,CAAC,MAAM;4BACV,CAAC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAa,CAAC,CAAC;iBAC5D;YACH,CAAC,CAAC;YAEF,gBAAgB;YACT,4BAAuB,GAAG,CAAC,CAAe,EAAE,EAAE;gBACnD,IAAI,WAAW,GAAG,IAAI,CAAC;gBACvB,uBAAuB;gBACvB,IAAI,IAAI,CAAC,wBAAwB,EAAE;oBACjC,6FAA6F;oBAC7F,WAAW;wBACT,CAAC,CAAC,CAAC,CAAC,MAAM;4BACV,CAAC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAa,CAAC,CAAC;iBAC5D;gBAED,MAAM,cAAc,GAAG,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC;gBACzD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC;YAEK,sCAAiC,GAAG,CACzC,wBAA+C,EAC/C,EAAE;gBACF,IAAI,CAAC,wBAAwB,GAAG,wBAAwB,CAAC;YAC3D,CAAC,CAAC;QA2DJ,CAAC;QAtIC,gBAAgB;QACT,aAAa,CAAC,OAAoB;YACvC,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;gBAC9B,IAAI,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC;oBAC/D,OAAO,IAAI,CAAC;gBACd,IAAI,OAAO,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC;oBACpE,OAAO,IAAI,CAAC;aACf;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,OAAO,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC;oBACpE,OAAO,IAAI,CAAC;aACf;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,gBAAgB;QACT,cAAc,CAAC,CAAa;YACjC,uBAAuB;YACvB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvE,uBAAuB;gBACvB,IACE,CAAC,IAAI,CAAC,KAAK,CAAC,8BAA8B;oBAC1C,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAqB,CAAC;oBAE3C,OAAO;aACV;YAED,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;iBAC9D,IAAI,qBAAqB;gBAAE,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAClE,CAAC;QAgDM,iBAAiB;;YACtB,uBAAuB;YACvB,OAAO,MAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,aAAa,mCAAI,QAAQ,CAAC;QAClE,CAAC;QAEe,iBAAiB;YAC/B,MAAM,0BAA0B,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5D,IAAI,gBAAgB,EAAE;gBACpB,0BAA0B,CAAC,gBAAgB,CACzC,aAAa,EACb,IAAI,CAAC,yBAAyB,EAC9B,UAAU,CACX,CAAC;gBACF,0BAA0B,CAAC,gBAAgB,CACzC,WAAW,EACX,IAAI,CAAC,uBAAuB,EAC5B,UAAU,CACX,CAAC;aACH;;gBACC,0BAA0B,CAAC,gBAAgB,CACzC,OAAO,EACP,IAAI,CAAC,mBAAmB,EACxB,UAAU,CACX,CAAC;QACN,CAAC;QAED,gBAAgB;QACA,oBAAoB;YAClC,MAAM,0BAA0B,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5D,IAAI,gBAAgB,EAAE;gBACpB,0BAA0B,CAAC,mBAAmB,CAC5C,aAAa,EACb,IAAI,CAAC,yBAAyB,EAC9B,UAAU,CACX,CAAC;gBACF,0BAA0B,CAAC,mBAAmB,CAC5C,WAAW,EACX,IAAI,CAAC,uBAAuB,EAC5B,UAAU,CACX,CAAC;aACH;;gBACC,0BAA0B,CAAC,mBAAmB,CAC5C,OAAO,EACP,IAAI,CAAC,mBAAmB,EACxB,UAAU,CACX,CAAC;QACN,CAAC;QAEe,MAAM;YACpB,MAAM,EAAE,cAAc,EAAE,8BAA8B,EAAE,GAAG,KAAK,EAAE,GAChE,IAAI,CAAC,KAAK,CAAC;YACb,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,iCAAiC;gBAC9C,oBAAC,SAAS,OAAM,KAAwB,GAAI,CACxC,CACP,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\nimport * as React from \"react\";\n\n/** Properties for [[withOnOutsideClick]] React higher-order component\n * @public\n */\nexport interface WithOnOutsideClickProps {\n /** Outside click callback function */\n onOutsideClick?: (event: MouseEvent) => any;\n /** If false outside click processing and closing are skipped if click occurs in another Popup component, default to false. */\n closeOnNestedPopupOutsideClick?: boolean;\n}\n\n/** withOnOutsideClick is a React higher-order component that adds outside click support.\n * @public\n */\nexport const withOnOutsideClick = <ComponentProps extends {}>(\n Component: React.ComponentType<ComponentProps>,\n defaultOnOutsideClick?: (event: MouseEvent) => any,\n useCapture: boolean = true,\n usePointerEvents: boolean = true\n) => {\n return class WithOnOutsideClick extends React.PureComponent<\n ComponentProps & WithOnOutsideClickProps\n > {\n /** @internal */\n public outsideClickContainerDiv?: HTMLDivElement | null = null;\n /** @internal */\n public isDownOutside = false;\n\n /** @internal */\n public isInCorePopup(element: HTMLElement): boolean {\n if (element.nodeName === \"DIV\") {\n if (element.classList && element.classList.contains(\"core-popup\"))\n return true;\n if (element.parentElement && this.isInCorePopup(element.parentElement))\n return true;\n } else {\n // istanbul ignore else\n if (element.parentElement && this.isInCorePopup(element.parentElement))\n return true;\n }\n return false;\n }\n\n /** @internal */\n public onOutsideClick(e: MouseEvent) {\n // istanbul ignore else\n if (e.target instanceof Node && e.target.nodeType === Node.ELEMENT_NODE) {\n // istanbul ignore else\n if (\n !this.props.closeOnNestedPopupOutsideClick &&\n this.isInCorePopup(e.target as HTMLElement)\n )\n return;\n }\n\n if (this.props.onOutsideClick) return this.props.onOutsideClick(e);\n else if (defaultOnOutsideClick) return defaultOnOutsideClick(e);\n }\n\n /** @internal */\n public handleDocumentClick = (e: MouseEvent) => {\n if (\n !this.outsideClickContainerDiv ||\n !(e.target instanceof Node) ||\n this.outsideClickContainerDiv.contains(e.target)\n )\n return;\n\n return this.onOutsideClick(e);\n };\n\n /** @internal */\n public handleDocumentPointerDown = (e: PointerEvent) => {\n this.isDownOutside = true;\n // istanbul ignore else\n if (this.outsideClickContainerDiv) {\n // typically e.target test for instance of Node, but this is not working from pop out windows\n this.isDownOutside =\n !!e.target &&\n !this.outsideClickContainerDiv.contains(e.target as any);\n }\n };\n\n /** @internal */\n public handleDocumentPointerUp = (e: PointerEvent) => {\n let isUpOutside = true;\n // istanbul ignore else\n if (this.outsideClickContainerDiv) {\n // typically e.target test for instance of Node, but this is not working from pop out windows\n isUpOutside =\n !!e.target &&\n !this.outsideClickContainerDiv.contains(e.target as any);\n }\n\n const isOutsideClick = isUpOutside && this.isDownOutside;\n this.isDownOutside = false;\n isOutsideClick && this.onOutsideClick(e);\n };\n\n public handleOutsideClickContainerDivSet = (\n outsideClickContainerDiv: HTMLDivElement | null\n ) => {\n this.outsideClickContainerDiv = outsideClickContainerDiv;\n };\n\n public getParentDocument() {\n // istanbul ignore next\n return this.outsideClickContainerDiv?.ownerDocument ?? document;\n }\n\n public override componentDidMount() {\n const outsideClickParentDocument = this.getParentDocument();\n if (usePointerEvents) {\n outsideClickParentDocument.addEventListener(\n \"pointerdown\",\n this.handleDocumentPointerDown,\n useCapture\n );\n outsideClickParentDocument.addEventListener(\n \"pointerup\",\n this.handleDocumentPointerUp,\n useCapture\n );\n } else\n outsideClickParentDocument.addEventListener(\n \"click\",\n this.handleDocumentClick,\n useCapture\n );\n }\n\n /** @internal */\n public override componentWillUnmount() {\n const outsideClickParentDocument = this.getParentDocument();\n if (usePointerEvents) {\n outsideClickParentDocument.removeEventListener(\n \"pointerdown\",\n this.handleDocumentPointerDown,\n useCapture\n );\n outsideClickParentDocument.removeEventListener(\n \"pointerup\",\n this.handleDocumentPointerUp,\n useCapture\n );\n } else\n outsideClickParentDocument.removeEventListener(\n \"click\",\n this.handleDocumentClick,\n useCapture\n );\n }\n\n public override render() {\n const { onOutsideClick, closeOnNestedPopupOutsideClick, ...props } =\n this.props;\n return (\n <div ref={this.handleOutsideClickContainerDivSet}>\n <Component {...(props as ComponentProps)} />\n </div>\n );\n }\n };\n};\n"]}
|
|
@@ -41,7 +41,7 @@ export function Icon(props) {
|
|
|
41
41
|
// the esm build of dompurify has a default import but the cjs build does not
|
|
42
42
|
// if there is a default export, use it (likely esm), otherwise use the namespace
|
|
43
43
|
// istanbul ignore next
|
|
44
|
-
const sanitizer = DOMPurify
|
|
44
|
+
const sanitizer = DOMPurify !== null && DOMPurify !== void 0 ? DOMPurify : DOMPurifyNS;
|
|
45
45
|
const sanitizerConfig = {
|
|
46
46
|
ALLOWED_TAGS: ["svg-loader"],
|
|
47
47
|
ADD_URI_SAFE_ATTR: definitiveIconString.startsWith("data:")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,SAAS,EAAE,KAAK,WAAW,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AA0B5D,qDAAqD;AACrD,SAAS,qBAAqB,CAAC,QAAgB;IAC7C,IAAI,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACzD,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC1B;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,UAAU,GACd,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ;QAClC,KAAK,CAAC,QAAQ,YAAY,sBAAsB;QAC9C,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,UAAU,EAAE;QACd,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAE7D,IACE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC;YAC9B,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC3B,kBAAkB,EAClB;YACA,MAAM,oBAAoB,GAAG,kBAAkB;gBAC7C,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,UAAU,CAAC;YACf,MAAM,SAAS,GAAG,oBAAoB,oBAAoB,iBAAiB,CAAC;YAC5E,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport \"./IconComponent.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ConditionalStringValue } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"../utils/Props\";\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\nimport { ConditionalIconItem } from \"./ConditionalIconItem\";\n\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\n * Strings are expected to be one of the following:\n * - Created by `IconSpecUtilities.createWebComponentIconSpec` in appui-abstract (deprecated).\n * - A URL to a SVG file (must end with \".svg\").\n * - A dataURI with MimeTypes `image/svg+xml` (ensure valid dataURI encoding) or `image/svg+xml;base64`;\n * - Anything else will be treated as a class name and be directly added to the `class` attribute.\n * @public\n */\nexport type IconSpec =\n | string\n | ConditionalStringValue\n | React.ReactNode\n | ConditionalIconItem;\n\n/** Properties for the [[Icon]] React component\n * @public\n */\nexport interface IconProps extends CommonProps {\n /** CSS class name or SvgPath for icon. This is optional because it is improperly\n * used to extend other interfaces and changing it would break existing API.\n */\n iconSpec?: IconSpec;\n}\n\n/** Get the SVG Source from an svg-loader IconSpec */\nfunction getWebComponentSource(iconSpec: string): string | undefined {\n if (iconSpec.startsWith(\"webSvg:\") && iconSpec.length > 7) {\n return iconSpec.slice(7);\n }\n\n return undefined;\n}\n\n/** Icon Functional component displays an icon based on an [[IconSpec]].\n * @public\n */\nexport function Icon(props: IconProps) {\n if (!props.iconSpec) return null;\n\n const iconString =\n typeof props.iconSpec === \"string\" ||\n props.iconSpec instanceof ConditionalStringValue\n ? ConditionalStringValue.getValue(props.iconSpec)\n : undefined;\n\n if (iconString) {\n const webComponentString = getWebComponentSource(iconString);\n\n if (\n iconString.startsWith(\"data:\") ||\n iconString.endsWith(\".svg\") ||\n webComponentString\n ) {\n const definitiveIconString = webComponentString\n ? webComponentString\n : iconString;\n const svgLoader = `<svg-loader src=\"${definitiveIconString}\"></svg-loader>`;\n const svgDiv = `<div>${svgLoader}</div>`;\n // the esm build of dompurify has a default import but the cjs build does not\n // if there is a default export, use it (likely esm), otherwise use the namespace\n // istanbul ignore next\n const sanitizer = DOMPurify ?? DOMPurifyNS;\n\n const sanitizerConfig = {\n ALLOWED_TAGS: [\"svg-loader\"],\n ADD_URI_SAFE_ATTR: definitiveIconString.startsWith(\"data:\")\n ? [\"src\"]\n : [],\n };\n\n const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);\n const webComponentNode = (\n // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\n // eslint-disable-next-line jam3/no-sanitizer-with-danger\n <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>\n );\n return (\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)}>\n {webComponentNode}\n </i>\n );\n }\n return (\n <i\n className={classnames(\"icon\", iconString, props.className)}\n style={props.style}\n />\n );\n }\n\n if (ConditionalIconItem.isConditionalIconItem(props.iconSpec)) {\n return (\n <i\n className={classnames(\"icon\", \"core-svg-icon\", props.className)}\n style={props.style}\n >\n {ConditionalIconItem.getValue(props.iconSpec)}\n </i>\n );\n }\n\n return (\n <i\n className={classnames(\"icon\", \"core-svg-icon\", props.className)}\n style={props.style}\n >\n {props.iconSpec instanceof ConditionalStringValue\n ? undefined\n : props.iconSpec}\n </i>\n );\n}\n"]}
|
|
@@ -109,21 +109,21 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
|
|
|
109
109
|
]);
|
|
110
110
|
const handleKeyDown = React.useCallback((event) => {
|
|
111
111
|
// istanbul ignore else
|
|
112
|
-
if (event.key === Key.Enter) {
|
|
112
|
+
if (event.key === Key.Enter.valueOf()) {
|
|
113
113
|
updateValueFromString(event.currentTarget.value);
|
|
114
114
|
event.preventDefault();
|
|
115
115
|
event.stopPropagation();
|
|
116
116
|
}
|
|
117
|
-
else if (event.key === Key.Escape) {
|
|
117
|
+
else if (event.key === Key.Escape.valueOf()) {
|
|
118
118
|
setFormattedValue(formatInternal(currentValueRef.current));
|
|
119
119
|
event.preventDefault();
|
|
120
120
|
}
|
|
121
|
-
else if (event.key === Key.ArrowDown) {
|
|
121
|
+
else if (event.key === Key.ArrowDown.valueOf()) {
|
|
122
122
|
applyStep(false);
|
|
123
123
|
event.preventDefault();
|
|
124
124
|
event.stopPropagation();
|
|
125
125
|
}
|
|
126
|
-
else if (event.key === Key.ArrowUp) {
|
|
126
|
+
else if (event.key === Key.ArrowUp.valueOf()) {
|
|
127
127
|
applyStep(true);
|
|
128
128
|
event.preventDefault();
|
|
129
129
|
event.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,eAAe,GAChB,MAAM,4BAA4B,CAAC;AAiDpC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,qBAAqB,CAAC,KAAK,EAAE,GAAG;IACzC,MAAM,EACJ,kBAAkB,EAClB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,SAAS,EACT,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C;;;;;;OAMG;IACH,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,CAAS,EAAE,EAAE;QACZ,IAAI,CAA4B,CAAC;QAEjC,IAAI,KAAK;YAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,SAAS,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;YACjC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC5B,CAAC,GAAG,CAAC,CAAC;aACP;SACF;QAED,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAChE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CAAC,CAAC;IACX,CAAC,EACD,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAC7B,CAAC;IAEF;;;OAGG;IACH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,GAA8B,EAAE,EAAE;QACjC,MAAM,cAAc,GAClB,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAChE,MAAM,GAAG,GACP,SAAS,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEvE,IAAI,MAAM;YAAE,OAAO,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAEpC,OAAO,GAAG,CAAC;IACb,CAAC,EACD,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAC9D,cAAc,CAAC,KAAK,CAAC,CACtB,CAAC;IAEF,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACtE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,KAA0C,EAAE,EAAE;QAC7C,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QACzC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1B,YAAY,IAAI,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,aAAa,CAAC,CACxC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,MAAc,EAAE,EAAE;QACjB,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC/C,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAC9C,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B,CAAC;IAEF,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAC7C,CAAC,QAAgB,EAAE,EAAE;QACnB,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,aAAa,EAAE,WAAW,CAAC,CAC7B,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAyC,EAAE,EAAE;QAC5C,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CACrC,CAAC;IAEF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,SAAkB,EAAE,EAAE;QACrB,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1B,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF;;OAEG;IACH,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,SAAkB,EAAE,EAAE;QACrB,MAAM,cAAc,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAEpD,IAAI,GAAG,GACL,aAAa,CAAC,cAAc,CAAC;YAC7B,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACjD,IAAI,IAAI,EAAE;YACR,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;SACzD;QAED,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAElD,WAAW,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EACD;QACE,cAAc;QACd,iBAAiB;QACjB,GAAG;QACH,GAAG;QACH,aAAa;QACb,IAAI;QACJ,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,KAA4C,EAAE,EAAE;QAC/C,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE;YAC3B,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,EAAE;YACnC,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,EAAE;YACtC,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,EAAE;YACpC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,SAAS,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAC9D,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,KAAmD,EAAE,EAAE;QACtD,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,KAAmD,EAAE,EAAE;QACtD,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,KAAyC,EAAE,EAAE;QAC5C,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACzC,MAAM,gBAAgB,GAAG,UAAU,CACjC,6BAA6B,EAC7B,kBAAkB,EAClB,gBAAgB,IAAI,+BAA+B,EACnD,UAAU,IAAI,4BAA4B,CAC3C,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,UAAU,OAAG,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC;IACxE,MAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAG,CAAC;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc;QACrD,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,KAC1C,UAAU,GACd;QACF,6BACE,SAAS,EAAE,UAAU,CACnB,qCAAqC,EACrC,gBAAgB,IAAI,+BAA+B,CACpD;YAGD,6BACE,SAAS,EAAC,sDAAsD,EAChE,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,aAAa,EACtB,IAAI,EAAC,cAAc;gBAEnB,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,GAAI,CACvB;YAEN,6BACE,SAAS,EAAC,wDAAwD,EAClE,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,eAAe,EACxB,IAAI,EAAC,cAAc;gBAEnB,oBAAC,IAAI,IAAC,QAAQ,EAAE,SAAS,GAAI,CACzB,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAES,qBAAqB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { Icon } from \"../../icons/IconComponent\";\nimport {\n SvgCaretDown,\n SvgCaretDownSmall,\n SvgCaretUp,\n SvgCaretUpSmall,\n} from \"@itwin/itwinui-icons-react\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp =\n | number\n | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps\n extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n /** Numeric value, set to `undefined` to show placeholder text */\n value?: number;\n /** CSS class name for the NumberInput component container div */\n containerClassName?: string;\n /** Style for component container div. */\n containerStyle?: React.CSSProperties;\n /** number or function\tNumber.MIN_SAFE_INTEGER */\n min?: number;\n /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n max?: number;\n /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n step?: StepFunctionProp;\n /** number of decimal places, defaults to 0 */\n precision?: number;\n /** function parseFloat */\n parse?: (value: string) => number | null | undefined;\n /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n format?: (num: number | null | undefined, formattedValue: string) => string;\n /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n snap?: boolean;\n /** Function to call when value is changed. */\n onChange?: (value: number | undefined, stringValue: string) => void;\n /** if true up/down buttons are shown larger and side by side */\n showTouchButtons?: boolean;\n /** Provides ability to return reference to HTMLInputElement */\n ref?: React.Ref<HTMLInputElement>;\n /**\n * Makes this component behave as controlled component.\n * @internal\n */\n isControlled?: boolean;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<\n HTMLInputElement,\n NumberInputProps\n>(function ForwardRefNumberInput(props, ref) {\n const {\n containerClassName,\n className,\n value,\n min,\n max,\n precision,\n format,\n parse,\n onChange,\n onBlur,\n onKeyDown,\n step,\n snap,\n showTouchButtons,\n containerStyle,\n isControlled,\n ...otherProps\n } = props;\n const currentValueRef = React.useRef(value);\n\n /**\n * Used internally to parse the argument x to it's numeric representation.\n * If the argument cannot be converted to finite number returns 0; If a\n * \"precision\" prop is specified uses it round the number with that\n * precision (no fixed precision here because the return value is float, not\n * string).\n */\n const parseInternal = React.useCallback(\n (x: string) => {\n let n: number | undefined | null;\n\n if (parse) n = parse(x);\n if (undefined === n || null === n) {\n n = parseFloat(x);\n if (isNaN(n) || !isFinite(n)) {\n n = 0;\n }\n }\n\n const localPrecision = undefined === precision ? 10 : precision;\n const q = Math.pow(10, localPrecision);\n const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n n = Math.min(Math.max(n, localMin), localMax);\n n = Math.round(n * q) / q;\n\n return n;\n },\n [parse, precision, min, max]\n );\n\n /**\n * This is used internally to format a number to its display representation.\n * It will invoke the format function if one is provided.\n */\n const formatInternal = React.useCallback(\n (num: number | undefined | null) => {\n const localPrecision =\n undefined === precision || null === precision ? 0 : precision;\n const str =\n undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n if (format) return format(num, str);\n\n return str;\n },\n [format, precision]\n );\n\n const [formattedValue, setFormattedValue] = React.useState(() =>\n formatInternal(value)\n );\n\n // See if new initialValue props have changed since component mounted\n React.useEffect(() => {\n currentValueRef.current = value;\n const currentFormattedValue = formatInternal(currentValueRef.current);\n setFormattedValue(currentFormattedValue);\n }, [formatInternal, value]);\n\n const handleChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const newVal = event.currentTarget.value;\n setFormattedValue(newVal);\n isControlled && onChange && onChange(parseInternal(newVal), newVal);\n },\n [isControlled, onChange, parseInternal]\n );\n\n const updateValue = React.useCallback(\n (newVal: number) => {\n const newFormattedVal = formatInternal(newVal);\n onChange && onChange(newVal, newFormattedVal);\n setFormattedValue(newFormattedVal);\n },\n [onChange, formatInternal]\n );\n\n const updateValueFromString = React.useCallback(\n (strValue: string) => {\n const newVal = parseInternal(strValue);\n updateValue(newVal);\n },\n [parseInternal, updateValue]\n );\n\n const handleBlur = React.useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n const newVal = parseInternal(event.target.value);\n onBlur && onBlur(event);\n updateValue(newVal);\n },\n [parseInternal, updateValue, onBlur]\n );\n\n const getIncrementValue = React.useCallback(\n (increment: boolean) => {\n if (typeof step === \"function\") {\n const stepVal = step(increment ? \"up\" : \"down\");\n return stepVal ? stepVal : 1;\n }\n\n return !step ? 1 : step;\n },\n [step]\n );\n\n /**\n * The internal method that actually sets the new value on the input\n */\n const applyStep = React.useCallback(\n (increment: boolean) => {\n const incrementValue = getIncrementValue(increment);\n\n let num =\n parseInternal(formattedValue) +\n (increment ? incrementValue : -incrementValue);\n if (snap) {\n num = Math.round(num / incrementValue) * incrementValue;\n }\n\n const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n num = Math.min(Math.max(num, localMin), localMax);\n\n updateValue(num);\n },\n [\n formattedValue,\n getIncrementValue,\n max,\n min,\n parseInternal,\n snap,\n updateValue,\n ]\n );\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n // istanbul ignore else\n if (event.key === Key.Enter) {\n updateValueFromString(event.currentTarget.value);\n event.preventDefault();\n event.stopPropagation();\n } else if (event.key === Key.Escape) {\n setFormattedValue(formatInternal(currentValueRef.current));\n event.preventDefault();\n } else if (event.key === Key.ArrowDown) {\n applyStep(false);\n event.preventDefault();\n event.stopPropagation();\n } else if (event.key === Key.ArrowUp) {\n applyStep(true);\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown && onKeyDown(event);\n },\n [applyStep, formatInternal, updateValueFromString, onKeyDown]\n );\n\n const handleDownClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n applyStep(false);\n event.preventDefault();\n },\n [applyStep]\n );\n\n const handleUpClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n applyStep(true);\n event.preventDefault();\n },\n [applyStep]\n );\n\n const handleFocus = React.useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n event.currentTarget.select();\n },\n []\n );\n\n const isDisabled = !!otherProps.disabled;\n const containerClasses = classnames(\n \"core-number-input-container\",\n containerClassName,\n showTouchButtons && \"core-number-buttons-for-touch\",\n isDisabled && \"core-number-input-disabled\"\n );\n\n const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n return (\n <div className={containerClasses} style={containerStyle}>\n <Input\n ref={ref}\n value={formattedValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n size=\"small\"\n className={classnames(\"core-input\", className)}\n {...otherProps}\n />\n <div\n className={classnames(\n \"core-number-input-buttons-container\",\n showTouchButtons && \"core-number-buttons-for-touch\"\n )}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n className=\"core-number-input-button core-number-input-button-up\"\n tabIndex={-1}\n onClick={handleUpClick}\n role=\"presentation\"\n >\n <Icon iconSpec={caretUp} />\n </div>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n className=\"core-number-input-button core-number-input-button-down\"\n tabIndex={-1}\n onClick={handleDownClick}\n role=\"presentation\"\n >\n <Icon iconSpec={caretDown} />\n </div>\n </div>\n </div>\n );\n});\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (\n props: NumberInputProps\n) => React.ReactElement | null = ForwardRefNumberInput;\n"]}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { Icon } from \"../../icons/IconComponent\";\nimport {\n SvgCaretDown,\n SvgCaretDownSmall,\n SvgCaretUp,\n SvgCaretUpSmall,\n} from \"@itwin/itwinui-icons-react\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp =\n | number\n | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps\n extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n /** Numeric value, set to `undefined` to show placeholder text */\n value?: number;\n /** CSS class name for the NumberInput component container div */\n containerClassName?: string;\n /** Style for component container div. */\n containerStyle?: React.CSSProperties;\n /** number or function\tNumber.MIN_SAFE_INTEGER */\n min?: number;\n /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n max?: number;\n /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n step?: StepFunctionProp;\n /** number of decimal places, defaults to 0 */\n precision?: number;\n /** function parseFloat */\n parse?: (value: string) => number | null | undefined;\n /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n format?: (num: number | null | undefined, formattedValue: string) => string;\n /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n snap?: boolean;\n /** Function to call when value is changed. */\n onChange?: (value: number | undefined, stringValue: string) => void;\n /** if true up/down buttons are shown larger and side by side */\n showTouchButtons?: boolean;\n /** Provides ability to return reference to HTMLInputElement */\n ref?: React.Ref<HTMLInputElement>;\n /**\n * Makes this component behave as controlled component.\n * @internal\n */\n isControlled?: boolean;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<\n HTMLInputElement,\n NumberInputProps\n>(function ForwardRefNumberInput(props, ref) {\n const {\n containerClassName,\n className,\n value,\n min,\n max,\n precision,\n format,\n parse,\n onChange,\n onBlur,\n onKeyDown,\n step,\n snap,\n showTouchButtons,\n containerStyle,\n isControlled,\n ...otherProps\n } = props;\n const currentValueRef = React.useRef(value);\n\n /**\n * Used internally to parse the argument x to it's numeric representation.\n * If the argument cannot be converted to finite number returns 0; If a\n * \"precision\" prop is specified uses it round the number with that\n * precision (no fixed precision here because the return value is float, not\n * string).\n */\n const parseInternal = React.useCallback(\n (x: string) => {\n let n: number | undefined | null;\n\n if (parse) n = parse(x);\n if (undefined === n || null === n) {\n n = parseFloat(x);\n if (isNaN(n) || !isFinite(n)) {\n n = 0;\n }\n }\n\n const localPrecision = undefined === precision ? 10 : precision;\n const q = Math.pow(10, localPrecision);\n const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n n = Math.min(Math.max(n, localMin), localMax);\n n = Math.round(n * q) / q;\n\n return n;\n },\n [parse, precision, min, max]\n );\n\n /**\n * This is used internally to format a number to its display representation.\n * It will invoke the format function if one is provided.\n */\n const formatInternal = React.useCallback(\n (num: number | undefined | null) => {\n const localPrecision =\n undefined === precision || null === precision ? 0 : precision;\n const str =\n undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n if (format) return format(num, str);\n\n return str;\n },\n [format, precision]\n );\n\n const [formattedValue, setFormattedValue] = React.useState(() =>\n formatInternal(value)\n );\n\n // See if new initialValue props have changed since component mounted\n React.useEffect(() => {\n currentValueRef.current = value;\n const currentFormattedValue = formatInternal(currentValueRef.current);\n setFormattedValue(currentFormattedValue);\n }, [formatInternal, value]);\n\n const handleChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const newVal = event.currentTarget.value;\n setFormattedValue(newVal);\n isControlled && onChange && onChange(parseInternal(newVal), newVal);\n },\n [isControlled, onChange, parseInternal]\n );\n\n const updateValue = React.useCallback(\n (newVal: number) => {\n const newFormattedVal = formatInternal(newVal);\n onChange && onChange(newVal, newFormattedVal);\n setFormattedValue(newFormattedVal);\n },\n [onChange, formatInternal]\n );\n\n const updateValueFromString = React.useCallback(\n (strValue: string) => {\n const newVal = parseInternal(strValue);\n updateValue(newVal);\n },\n [parseInternal, updateValue]\n );\n\n const handleBlur = React.useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n const newVal = parseInternal(event.target.value);\n onBlur && onBlur(event);\n updateValue(newVal);\n },\n [parseInternal, updateValue, onBlur]\n );\n\n const getIncrementValue = React.useCallback(\n (increment: boolean) => {\n if (typeof step === \"function\") {\n const stepVal = step(increment ? \"up\" : \"down\");\n return stepVal ? stepVal : 1;\n }\n\n return !step ? 1 : step;\n },\n [step]\n );\n\n /**\n * The internal method that actually sets the new value on the input\n */\n const applyStep = React.useCallback(\n (increment: boolean) => {\n const incrementValue = getIncrementValue(increment);\n\n let num =\n parseInternal(formattedValue) +\n (increment ? incrementValue : -incrementValue);\n if (snap) {\n num = Math.round(num / incrementValue) * incrementValue;\n }\n\n const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n num = Math.min(Math.max(num, localMin), localMax);\n\n updateValue(num);\n },\n [\n formattedValue,\n getIncrementValue,\n max,\n min,\n parseInternal,\n snap,\n updateValue,\n ]\n );\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n // istanbul ignore else\n if (event.key === Key.Enter.valueOf()) {\n updateValueFromString(event.currentTarget.value);\n event.preventDefault();\n event.stopPropagation();\n } else if (event.key === Key.Escape.valueOf()) {\n setFormattedValue(formatInternal(currentValueRef.current));\n event.preventDefault();\n } else if (event.key === Key.ArrowDown.valueOf()) {\n applyStep(false);\n event.preventDefault();\n event.stopPropagation();\n } else if (event.key === Key.ArrowUp.valueOf()) {\n applyStep(true);\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown && onKeyDown(event);\n },\n [applyStep, formatInternal, updateValueFromString, onKeyDown]\n );\n\n const handleDownClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n applyStep(false);\n event.preventDefault();\n },\n [applyStep]\n );\n\n const handleUpClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n applyStep(true);\n event.preventDefault();\n },\n [applyStep]\n );\n\n const handleFocus = React.useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n event.currentTarget.select();\n },\n []\n );\n\n const isDisabled = !!otherProps.disabled;\n const containerClasses = classnames(\n \"core-number-input-container\",\n containerClassName,\n showTouchButtons && \"core-number-buttons-for-touch\",\n isDisabled && \"core-number-input-disabled\"\n );\n\n const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n return (\n <div className={containerClasses} style={containerStyle}>\n <Input\n ref={ref}\n value={formattedValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n size=\"small\"\n className={classnames(\"core-input\", className)}\n {...otherProps}\n />\n <div\n className={classnames(\n \"core-number-input-buttons-container\",\n showTouchButtons && \"core-number-buttons-for-touch\"\n )}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n className=\"core-number-input-button core-number-input-button-up\"\n tabIndex={-1}\n onClick={handleUpClick}\n role=\"presentation\"\n >\n <Icon iconSpec={caretUp} />\n </div>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n className=\"core-number-input-button core-number-input-button-down\"\n tabIndex={-1}\n onClick={handleDownClick}\n role=\"presentation\"\n >\n <Icon iconSpec={caretDown} />\n </div>\n </div>\n </div>\n );\n});\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (\n props: NumberInputProps\n) => React.ReactElement | null = ForwardRefNumberInput;\n"]}
|
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
$uicore-inputs-height: 22px;
|
|
11
11
|
$uicore-inputs-height-large: 40px;
|
|
12
12
|
$uicore-line-height: calc(var(--iui-size-s) * 1.4);
|
|
13
|
-
$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
|
|
14
|
-
$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
|
|
15
13
|
|
|
16
14
|
$uicore-inputs-padding: calc(
|
|
17
15
|
(#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
|
|
@@ -27,7 +27,7 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
|
|
|
27
27
|
let keyProcessed = false;
|
|
28
28
|
let newIndex = itemIndex >= 0 ? itemIndex : 0;
|
|
29
29
|
// Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
|
|
30
|
-
if (key === Key.ArrowDown || key === Key.PageDown) {
|
|
30
|
+
if (key === Key.ArrowDown.valueOf() || key === Key.PageDown.valueOf()) {
|
|
31
31
|
for (let i = itemIndex + 1; i < optionValues.length; i++) {
|
|
32
32
|
if (!optionValues[i].disabled) {
|
|
33
33
|
newIndex = i;
|
|
@@ -36,7 +36,7 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
|
|
|
36
36
|
}
|
|
37
37
|
keyProcessed = true;
|
|
38
38
|
}
|
|
39
|
-
else if (key === Key.ArrowUp || key === Key.PageUp) {
|
|
39
|
+
else if (key === Key.ArrowUp.valueOf() || key === Key.PageUp.valueOf()) {
|
|
40
40
|
for (let i = itemIndex - 1; i >= 0; i--) {
|
|
41
41
|
if (!optionValues[i].disabled) {
|
|
42
42
|
newIndex = i;
|
|
@@ -45,7 +45,7 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
|
|
|
45
45
|
}
|
|
46
46
|
keyProcessed = true;
|
|
47
47
|
}
|
|
48
|
-
else if (key === Key.Home) {
|
|
48
|
+
else if (key === Key.Home.valueOf()) {
|
|
49
49
|
for (let i = 0; i < optionValues.length; i++) {
|
|
50
50
|
if (!optionValues[i].disabled) {
|
|
51
51
|
newIndex = i;
|
|
@@ -54,7 +54,7 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
|
|
|
54
54
|
}
|
|
55
55
|
keyProcessed = true;
|
|
56
56
|
}
|
|
57
|
-
else if (key === Key.End) {
|
|
57
|
+
else if (key === Key.End.valueOf()) {
|
|
58
58
|
for (let i = optionValues.length - 1; i >= 0; i--) {
|
|
59
59
|
if (!optionValues[i].disabled) {
|
|
60
60
|
newIndex = i;
|
|
@@ -73,7 +73,7 @@ export function Listbox(props) {
|
|
|
73
73
|
const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
|
|
74
74
|
const listRef = React.useRef(null);
|
|
75
75
|
const [listId] = React.useState(() => {
|
|
76
|
-
return id
|
|
76
|
+
return id !== null && id !== void 0 ? id : Guid.createValue();
|
|
77
77
|
});
|
|
78
78
|
const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
|
|
79
79
|
const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
|
|
@@ -202,9 +202,10 @@ export function ListboxItem(props) {
|
|
|
202
202
|
const itemRef = React.useRef(null);
|
|
203
203
|
const isSelected = listboxValue === value;
|
|
204
204
|
const handleClick = React.useCallback((event) => {
|
|
205
|
+
var _a, _b;
|
|
205
206
|
event.preventDefault();
|
|
206
207
|
// istanbul ignore next
|
|
207
|
-
const selectedValue = event.currentTarget
|
|
208
|
+
const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
|
|
208
209
|
// istanbul ignore else
|
|
209
210
|
if (undefined !== selectedValue) {
|
|
210
211
|
onListboxValueChange(selectedValue, event.ctrlKey);
|