@onerjs/shared-ui-components 8.38.4 → 8.38.6

package/fluent/primitives/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AccordionToggleData, AccordionToggleEvent, AccordionProps as FluentAccordionProps } from \"@fluentui/react-components\";\r\nimport type { ForwardRefExoticComponent, FunctionComponent, PropsWithChildren, RefAttributes } from \"react\";\r\n\r\nimport { Children, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { AccordionHeader, AccordionItem, AccordionPanel, Divider, Accordion as FluentAccordion, Subtitle2Stronger, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { CustomTokens } from \"./utils\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        overflowX: \"hidden\",\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM, // bottom padding since there is no divider at the bottom\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        height: \"100%\",\r\n    },\r\n    divider: {\r\n        paddingTop: CustomTokens.dividerGap,\r\n        paddingBottom: CustomTokens.dividerGap,\r\n    },\r\n    dividerSmall: {\r\n        paddingTop: CustomTokens.dividerGapSmall,\r\n        paddingBottom: CustomTokens.dividerGapSmall,\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n    highlightDiv: {\r\n        borderRadius: tokens.borderRadiusLarge,\r\n        animationDuration: \"1s\",\r\n        animationTimingFunction: \"ease-in-out\",\r\n        animationIterationCount: \"5\",\r\n        animationFillMode: \"forwards\",\r\n        animationName: {\r\n            from: {\r\n                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,\r\n            },\r\n            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n            \"50%\": {\r\n                boxShadow: `inset 0 0 12px ${tokens.colorBrandBackground}`,\r\n            },\r\n            to: {\r\n                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,\r\n            },\r\n        },\r\n    },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n    title: string;\r\n    collapseByDefault?: boolean;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    AccordionSection.displayName = \"AccordionSection\";\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport type AccordionProps = {\r\n    highlightSections?: readonly string[];\r\n};\r\n\r\nconst StringAccordion = FluentAccordion as ForwardRefExoticComponent<FluentAccordionProps<string> & RefAttributes<HTMLDivElement>>;\r\n\r\nexport const Accordion = forwardRef<HTMLDivElement, PropsWithChildren<AccordionProps>>((props, ref) => {\r\n    Accordion.displayName = \"Accordion\";\r\n    const classes = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n    const { children, highlightSections, ...rest } = props;\r\n    const validChildren = useMemo(() => {\r\n        return (\r\n            Children.map(children, (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as Partial<AccordionSectionProps>;\r\n                    if (childProps.title) {\r\n                        return {\r\n                            title: childProps.title,\r\n                            collapseByDefault: childProps.collapseByDefault,\r\n                            content: child,\r\n                        };\r\n                    }\r\n                }\r\n                return null;\r\n            })?.filter(Boolean) ?? []\r\n        );\r\n    }, [children]);\r\n\r\n    // Tracks open items, and used to tell the Accordion which sections should be expanded.\r\n    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));\r\n\r\n    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state\r\n    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.\r\n    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));\r\n\r\n    const internalOpenItemsRef = useRef<string[] | undefined>(openItems);\r\n\r\n    // When highlight sections is requested, we temporarily override the open items, but if highlight sections is cleared,\r\n    // then we revert back to the normal open items tracking.\r\n    useLayoutEffect(() => {\r\n        if (highlightSections) {\r\n            internalOpenItemsRef.current = [...openItems];\r\n            setOpenItems([...highlightSections]);\r\n        } else {\r\n            setOpenItems([...(internalOpenItemsRef.current ?? [])]);\r\n            internalOpenItemsRef.current = undefined;\r\n        }\r\n    }, [highlightSections]);\r\n\r\n    useEffect(() => {\r\n        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {\r\n            // If a child is not marked as collapseByDefault, then it should be opened by default, and\r\n            // it is only \"default\" if it hasn't already been explicitly added to the opened or closed list.\r\n            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {\r\n                setOpenItems((prev) => [...prev, defaultOpenItem]);\r\n            }\r\n        }\r\n    }, [validChildren]);\r\n\r\n    const onToggle = useCallback((event: AccordionToggleEvent, data: AccordionToggleData<string>) => {\r\n        if (data.openItems.includes(data.value)) {\r\n            setOpenItems((prev) => [...prev, data.value]);\r\n            setClosedItems((prev) => prev.filter((item) => item !== data.value));\r\n        } else {\r\n            setClosedItems((prev) => [...prev, data.value]);\r\n            setOpenItems((prev) => prev.filter((item) => item !== data.value));\r\n        }\r\n    }, []);\r\n\r\n    return (\r\n        <StringAccordion ref={ref} className={classes.accordion} collapsible multiple onToggle={onToggle} openItems={openItems} {...rest}>\r\n            {validChildren.map((child, index) => {\r\n                const isHighlighted = highlightSections?.includes(child.title);\r\n                return (\r\n                    <AccordionItem key={child.content.key ?? child.title} value={child.title}>\r\n                        <div className={isHighlighted ? classes.highlightDiv : undefined}>\r\n                            <AccordionHeader size={size}>\r\n                                <Subtitle2Stronger>{child.title}</Subtitle2Stronger>\r\n                            </AccordionHeader>\r\n                            <AccordionPanel>\r\n                                <div className={classes.panelDiv}>{child.content}</div>\r\n                            </AccordionPanel>\r\n                        </div>\r\n                        {index < validChildren.length - 1 && <Divider inset={true} className={size === \"small\" ? classes.dividerSmall : classes.divider} />}\r\n                    </AccordionItem>\r\n                );\r\n            })}\r\n        </StringAccordion>\r\n    );\r\n});\r\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AccordionPanelProps, AccordionToggleData, AccordionToggleEvent, AccordionProps as FluentAccordionProps } from \"@fluentui/react-components\";\r\nimport type { ForwardRefExoticComponent, FunctionComponent, PropsWithChildren, RefAttributes } from \"react\";\r\n\r\nimport {\r\n    AccordionHeader,\r\n    AccordionItem,\r\n    AccordionPanel,\r\n    Divider,\r\n    Accordion as FluentAccordion,\r\n    MessageBar,\r\n    MessageBarBody,\r\n    Portal,\r\n    SearchBox,\r\n    Subtitle2Stronger,\r\n    makeStyles,\r\n    tokens,\r\n} from \"@fluentui/react-components\";\r\nimport { ArrowCircleUpRegular, CheckmarkFilled, EditRegular, EyeFilled, EyeOffRegular, FilterRegular, PinFilled, PinRegular } from \"@fluentui/react-icons\";\r\nimport { Children, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\nimport {\r\n    AccordionContext,\r\n    AccordionItemDepthContext,\r\n    AccordionSectionBlockContext,\r\n    useAccordionContext,\r\n    useAccordionSectionBlockContext,\r\n    useAccordionSectionItemState,\r\n} from \"./accordion.contexts\";\r\nimport { Button } from \"./button\";\r\nimport { CustomTokens } from \"./utils\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        height: \"100%\",\r\n    },\r\n    accordionBody: {\r\n        overflowX: \"hidden\",\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM, // bottom padding since there is no divider at the bottom\r\n    },\r\n    divider: {\r\n        paddingTop: CustomTokens.dividerGap,\r\n        paddingBottom: CustomTokens.dividerGap,\r\n    },\r\n    dividerSmall: {\r\n        paddingTop: CustomTokens.dividerGapSmall,\r\n        paddingBottom: CustomTokens.dividerGapSmall,\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n    highlightDiv: {\r\n        borderRadius: tokens.borderRadiusLarge,\r\n        animationDuration: \"1s\",\r\n        animationTimingFunction: \"ease-in-out\",\r\n        animationIterationCount: \"5\",\r\n        animationFillMode: \"forwards\",\r\n        animationName: {\r\n            from: {\r\n                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,\r\n            },\r\n            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n            \"50%\": {\r\n                boxShadow: `inset 0 0 12px ${tokens.colorBrandBackground}`,\r\n            },\r\n            to: {\r\n                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,\r\n            },\r\n        },\r\n    },\r\n    menuBar: {\r\n        display: \"flex\",\r\n    },\r\n    menuBarControls: {\r\n        display: \"flex\",\r\n        flexGrow: 1,\r\n        justifyContent: \"end\",\r\n    },\r\n    sectionEmpty: {\r\n        display: \"none\",\r\n    },\r\n    sectionItemContainer: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n    },\r\n    sectionItemButtons: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        alignItems: \"start\",\r\n        marginRight: tokens.spacingHorizontalXS,\r\n    },\r\n    pinnedContainer: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n    pinnedContainerEmpty: {\r\n        \"&:not(:only-child)\": {\r\n            display: \"none\",\r\n        },\r\n    },\r\n    searchBox: {\r\n        width: \"100%\",\r\n    },\r\n});\r\n\r\n/**\r\n * Renders the menu bar and control buttons.\r\n *\r\n * @returns `div`, or `undefined` if all features are disabled.\r\n */\r\nconst AccordionMenuBar: FunctionComponent = () => {\r\n    AccordionMenuBar.displayName = \"AccordionMenuBar\";\r\n    const classes = useStyles();\r\n    const accordionCtx = useContext(AccordionContext);\r\n\r\n    if (!accordionCtx) {\r\n        return null;\r\n    }\r\n\r\n    const { state, dispatch, features } = accordionCtx;\r\n    const { editMode } = state;\r\n\r\n    return (\r\n        <div className={classes.menuBar}>\r\n            <AccordionSearchBox />\r\n            <div className={classes.menuBarControls}>\r\n                {features.hiding && editMode && (\r\n                    <>\r\n                        <Button title=\"Show all\" icon={EyeFilled} appearance=\"subtle\" onClick={() => dispatch({ type: \"SHOW_ALL\" })} />\r\n                        <Button\r\n                            title=\"Hide all\"\r\n                            icon={EyeOffRegular}\r\n                            appearance=\"subtle\"\r\n                            onClick={() => {\r\n                                // Hide all visible items - we pass all non-hidden, matching items\r\n                                // For simplicity, we dispatch with an empty array; the actual filtering\r\n                                // would need to be done with knowledge of all registered items.\r\n                                // This is a limitation - in a full implementation, you'd track registered items.\r\n                                dispatch({ type: \"HIDE_ALL_VISIBLE\", visibleItemIds: [] });\r\n                            }}\r\n                        />\r\n                    </>\r\n                )}\r\n                {(features.pinning || features.hiding) && (\r\n                    <Button\r\n                        title=\"Edit mode\"\r\n                        icon={editMode ? CheckmarkFilled : EditRegular}\r\n                        appearance={editMode ? \"primary\" : \"subtle\"}\r\n                        onClick={() => dispatch({ type: \"SET_EDIT_MODE\", enabled: !editMode })}\r\n                    />\r\n                )}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\n/**\r\n * Props: `AccordionSectionBlock`.\r\n */\r\nexport type AccordionSectionBlockProps = {\r\n    /** The ID of the `AccordionSectionBlock`, unique within the `Accordion` instance. */\r\n    sectionId: string;\r\n};\r\n\r\n/**\r\n * Wrapper component that must encapsulate the section headers and panels.\r\n * - Stores the section ID for use in `AccordionSectionItem`.\r\n *\r\n * @param props - `AccordionSectionBlockProps`\r\n * @returns `AccordionSectionBlockContext.Provider`, or `AccordionItem` if all features are disabled.\r\n */\r\nconst AccordionSectionBlock: FunctionComponent<PropsWithChildren<AccordionSectionBlockProps>> = (props) => {\r\n    AccordionSectionBlock.displayName = \"AccordionSectionBlock\";\r\n    const { children, sectionId } = props;\r\n    const accordionCtx = useContext(AccordionContext);\r\n    const sectionContext = useAccordionSectionBlockContext(props);\r\n\r\n    if (accordionCtx) {\r\n        return (\r\n            <AccordionSectionBlockContext.Provider value={sectionContext}>\r\n                <AccordionItem value={sectionId}>{children}</AccordionItem>\r\n            </AccordionSectionBlockContext.Provider>\r\n        );\r\n    }\r\n\r\n    return <AccordionItem value={sectionId}>{children}</AccordionItem>;\r\n};\r\n\r\n/**\r\n * Props: `AccordionSectionItem`.\r\n */\r\nexport type AccordionSectionItemProps = {\r\n    /** The ID of the `AccordionSectionItem`, unique within the `AccordionSectionBlock` instance. */\r\n    uniqueId: string;\r\n    /** The searchable text label for the item. */\r\n    label?: string;\r\n    /** Whether the item is not interactable. */\r\n    staticItem?: boolean;\r\n};\r\n\r\n/**\r\n * Wrapper component that must encapsulate individual items.\r\n * - Renders the pin button and tracks the pinned state of the item.\r\n * - Renders the hide button and tracks the hidden state of the item.\r\n * - Filters items based on the current search term.\r\n *\r\n * @param props - `AccordionSectionItemProps`\r\n * @returns `Portal` if pinned; `null` if hidden/filtered; `children` otherwise.\r\n */\r\nexport const AccordionSectionItem: FunctionComponent<PropsWithChildren<AccordionSectionItemProps>> = (props) => {\r\n    AccordionSectionItem.displayName = \"AccordionSectionItem\";\r\n    const { children, staticItem } = props;\r\n    const classes = useStyles();\r\n    const accordionCtx = useContext(AccordionContext);\r\n    const itemState = useAccordionSectionItemState(props);\r\n    const [ctrlMode, setCtrlMode] = useState(false);\r\n\r\n    // If static item or no context, just render children\r\n    if (staticItem || !accordionCtx || !itemState) {\r\n        return <>{children}</>;\r\n    }\r\n\r\n    const { pinnedContainerRef, features } = accordionCtx;\r\n    const { isNested, isPinned, isHidden, isMatch, pinnedIndex, inEditMode, actions } = itemState;\r\n\r\n    // Nested items just render children (don't show controls)\r\n    if (isNested) {\r\n        return <>{children}</>;\r\n    }\r\n\r\n    // If hidden (and not in edit mode) or doesn't match search, don't render\r\n    if ((isHidden && !inEditMode) || !isMatch) {\r\n        return null;\r\n    }\r\n\r\n    const pinnedContainer = isPinned ? pinnedContainerRef.current : null;\r\n    const showControls = inEditMode || ctrlMode;\r\n\r\n    const ctrlPressed = useKeyState(\"Control\");\r\n    const [mouseOver, setMouseOver] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setCtrlMode(ctrlPressed && mouseOver);\r\n    }, [ctrlPressed, mouseOver]);\r\n\r\n    const itemElement = (\r\n        <div\r\n            className={classes.sectionItemContainer}\r\n            style={isPinned ? { order: pinnedIndex } : undefined}\r\n            onMouseMove={() => setMouseOver(true)}\r\n            onMouseLeave={() => setMouseOver(false)}\r\n        >\r\n            {showControls && (\r\n                <div className={classes.sectionItemButtons}>\r\n                    {features.hiding && (\r\n                        <Button title={isHidden ? \"Unhide\" : \"Hide\"} icon={isHidden ? EyeOffRegular : EyeFilled} appearance=\"transparent\" onClick={actions.toggleHidden} />\r\n                    )}\r\n                    {features.pinning && (\r\n                        <>\r\n                            <Button title={isPinned ? \"Unpin\" : \"Pin\"} icon={isPinned ? PinFilled : PinRegular} appearance=\"transparent\" onClick={actions.togglePinned} />\r\n                            {isPinned && (\r\n                                <Button title=\"Move up\" icon={ArrowCircleUpRegular} appearance=\"transparent\" disabled={pinnedIndex === 0} onClick={actions.movePinnedUp} />\r\n                            )}\r\n                        </>\r\n                    )}\r\n                </div>\r\n            )}\r\n            <AccordionItemDepthContext.Provider value={true}>{children}</AccordionItemDepthContext.Provider>\r\n        </div>\r\n    );\r\n\r\n    return pinnedContainer ? <Portal mountNode={pinnedContainer}>{itemElement}</Portal> : itemElement;\r\n};\r\n\r\n/**\r\n * Renders the Pinned section container and defines the portal target for the pinned items.\r\n *\r\n * @returns `div`\r\n */\r\nconst AccordionPinnedContainer: FunctionComponent = () => {\r\n    AccordionPinnedContainer.displayName = \"AccordionPinnedContainer\";\r\n    const classes = useStyles();\r\n    const accordionCtx = useContext(AccordionContext);\r\n\r\n    return (\r\n        <div ref={accordionCtx?.pinnedContainerRef} className={classes.pinnedContainer}>\r\n            <MessageBar className={classes.pinnedContainerEmpty}>\r\n                <MessageBarBody>No pinned items</MessageBarBody>\r\n            </MessageBar>\r\n        </div>\r\n    );\r\n};\r\n\r\n/**\r\n * Renders the search box for filtering items.\r\n *\r\n * @returns `SearchBox`, or `null` if the feature is disabled.\r\n */\r\nconst AccordionSearchBox: FunctionComponent = () => {\r\n    AccordionSearchBox.displayName = \"AccordionSearchBox\";\r\n    const classes = useStyles();\r\n    const accordionCtx = useContext(AccordionContext);\r\n\r\n    if (!accordionCtx?.features.search) {\r\n        return null;\r\n    }\r\n\r\n    const { state, dispatch } = accordionCtx;\r\n\r\n    return (\r\n        <SearchBox\r\n            className={classes.searchBox}\r\n            appearance=\"underline\"\r\n            contentBefore={<FilterRegular />}\r\n            placeholder=\"Filter\"\r\n            value={state.searchTerm}\r\n            onChange={(_, data) => dispatch({ type: \"SET_SEARCH_TERM\", term: data.value })}\r\n        />\r\n    );\r\n};\r\n\r\n/**\r\n * Props: `AccordionSection`.\r\n */\r\nexport type AccordionSectionProps = {\r\n    /** The text label shown in the section header. */\r\n    title: string;\r\n    /** Indicates whether the `AccordionSection` is initially collapsed. */\r\n    collapseByDefault?: boolean;\r\n};\r\n\r\n/**\r\n * Wrapper component that must encapsulate the section body.\r\n *\r\n * @param props - `AccordionSectionProps`\r\n * @returns `div`\r\n */\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    AccordionSection.displayName = \"AccordionSection\";\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\n/**\r\n * Props: `Accordion`.\r\n */\r\nexport type AccordionProps = {\r\n    /** The unique ID of the `Accordion` instance. */\r\n    uniqueId?: string;\r\n    /** The list of sections to be highlighted. */\r\n    highlightSections?: readonly string[];\r\n    /** Enables the pinned items feature. */\r\n    enablePinnedItems?: boolean;\r\n    /** Enables the hidden items feature. */\r\n    enableHiddenItems?: boolean;\r\n    /** Enables the search items feature. */\r\n    enableSearchItems?: boolean;\r\n};\r\n\r\nconst StringAccordion = FluentAccordion as ForwardRefExoticComponent<FluentAccordionProps<string> & RefAttributes<HTMLDivElement>>;\r\n\r\nexport const Accordion = forwardRef<HTMLDivElement, PropsWithChildren<AccordionProps>>((props, ref) => {\r\n    Accordion.displayName = \"Accordion\";\r\n    const { children, highlightSections, ...rest } = props;\r\n    const classes = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n    const accordionCtx = useAccordionContext(props);\r\n    const hasPinning = accordionCtx?.features.pinning ?? false;\r\n\r\n    const pinnedSectionElement = useMemo(() => {\r\n        return (\r\n            hasPinning && (\r\n                <AccordionSection title=\"Pinned\" collapseByDefault={false}>\r\n                    <AccordionPinnedContainer />\r\n                </AccordionSection>\r\n            )\r\n        );\r\n    }, [hasPinning]);\r\n\r\n    // Prevents sections contents from unmounting when closed, allowing their elements to be used in the Pinned section.\r\n    const preventUnmountMotion: AccordionPanelProps[\"collapseMotion\"] = useMemo(() => {\r\n        // https://github.com/microsoft/fluentui/issues/34309#issuecomment-2824364945\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        return hasPinning ? { children: (Component, props) => <Component {...props} unmountOnExit={false} /> } : undefined;\r\n    }, [hasPinning]);\r\n\r\n    const validChildren = useMemo(() => {\r\n        return (\r\n            Children.map([pinnedSectionElement, children], (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as Partial<AccordionSectionProps>;\r\n                    if (childProps.title) {\r\n                        return {\r\n                            title: childProps.title,\r\n                            collapseByDefault: childProps.collapseByDefault,\r\n                            content: child,\r\n                        };\r\n                    }\r\n                }\r\n                return null;\r\n            })?.filter(Boolean) ?? []\r\n        );\r\n    }, [children]);\r\n\r\n    // Tracks open items, and used to tell the Accordion which sections should be expanded.\r\n    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));\r\n\r\n    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state\r\n    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.\r\n    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));\r\n\r\n    const internalOpenItemsRef = useRef<string[] | undefined>(openItems);\r\n\r\n    // When highlight sections is requested, we temporarily override the open items, but if highlight sections is cleared,\r\n    // then we revert back to the normal open items tracking.\r\n    useLayoutEffect(() => {\r\n        if (highlightSections) {\r\n            internalOpenItemsRef.current = [...openItems];\r\n            setOpenItems([...highlightSections]);\r\n        } else {\r\n            setOpenItems([...(internalOpenItemsRef.current ?? [])]);\r\n            internalOpenItemsRef.current = undefined;\r\n        }\r\n    }, [highlightSections]);\r\n\r\n    useEffect(() => {\r\n        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {\r\n            // If a child is not marked as collapseByDefault, then it should be opened by default, and\r\n            // it is only \"default\" if it hasn't already been explicitly added to the opened or closed list.\r\n            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {\r\n                setOpenItems((prev) => [...prev, defaultOpenItem]);\r\n            }\r\n        }\r\n    }, [validChildren]);\r\n\r\n    const onToggle = useCallback((event: AccordionToggleEvent, data: AccordionToggleData<string>) => {\r\n        if (data.openItems.includes(data.value)) {\r\n            setOpenItems((prev) => [...prev, data.value]);\r\n            setClosedItems((prev) => prev.filter((item) => item !== data.value));\r\n        } else {\r\n            setClosedItems((prev) => [...prev, data.value]);\r\n            setOpenItems((prev) => prev.filter((item) => item !== data.value));\r\n        }\r\n    }, []);\r\n\r\n    return (\r\n        <StringAccordion ref={ref} className={classes.accordion} collapsible multiple onToggle={onToggle} openItems={openItems} {...rest}>\r\n            <AccordionContext.Provider value={accordionCtx}>\r\n                <AccordionMenuBar />\r\n                <div className={classes.accordionBody}>\r\n                    {validChildren.map((child, index) => {\r\n                        const isHighlighted = highlightSections?.includes(child.title);\r\n                        return (\r\n                            <AccordionSectionBlock key={child.content.key ?? child.title} sectionId={child.title}>\r\n                                <div className={isHighlighted ? classes.highlightDiv : undefined}>\r\n                                    <AccordionHeader size={size}>\r\n                                        <Subtitle2Stronger>{child.title}</Subtitle2Stronger>\r\n                                    </AccordionHeader>\r\n                                    <AccordionPanel collapseMotion={preventUnmountMotion}>\r\n                                        <div className={classes.panelDiv}>{child.content}</div>\r\n                                    </AccordionPanel>\r\n                                </div>\r\n                                {index < validChildren.length - 1 && <Divider inset={true} className={size === \"small\" ? classes.dividerSmall : classes.divider} />}\r\n                            </AccordionSectionBlock>\r\n                        );\r\n                    })}\r\n                </div>\r\n            </AccordionContext.Provider>\r\n        </StringAccordion>\r\n    );\r\n});\r\n"]}

package/fluent/primitives/collapse.js

@@ -22,6 +22,8 @@ const useCollapseStyles = makeStyles({
 export const Collapse = (props) => {
     Collapse.displayName = "Collapse";
     const classes = useCollapseStyles();
-    return (_jsx(FluentCollapse, { visible: props.visible, orientation: props.orientation, children: _jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
+    // Since portalling breaks DOM hierarchy, `unmountOnExit` is required to ensure descendants are unmounted when the logical ancestor collapses.
+    // If this is a breaking change, the alternative would be creating a context to pass the `visible` state down to the descendants.
+    return (_jsx(FluentCollapse, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: _jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 //# sourceMappingURL=collapse.js.map

package/fluent/primitives/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAQvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;KAClB;IACD,UAAU,EAAE;QACR,aAAa,EAAE,KAAK;KACvB;IACD,QAAQ,EAAE;QACN,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;IAClC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,YAClE,cAAK,SAAS,EAAE,GAAG,OAAO,CAAC,eAAe,IAAI,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAG,KAAK,CAAC,QAAQ,GAAO,GACrI,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n    visible: boolean;\r\n    orientation?: \"horizontal\" | \"vertical\";\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n    collapseContent: {\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n    },\r\n    horizontal: {\r\n        flexDirection: \"row\",\r\n    },\r\n    vertical: {\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n    Collapse.displayName = \"Collapse\";\r\n    const classes = useCollapseStyles();\r\n    return (\r\n        <FluentCollapse visible={props.visible} orientation={props.orientation}>\r\n            <div className={`${classes.collapseContent} ${props.orientation === \"horizontal\" ? classes.horizontal : classes.vertical}`}>{props.children}</div>\r\n        </FluentCollapse>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAQvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;KAClB;IACD,UAAU,EAAE;QACR,aAAa,EAAE,KAAK;KACvB;IACD,QAAQ,EAAE;QACN,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;IAClC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IAEpC,8IAA8I;IAC9I,iIAAiI;IAEjI,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,aAAa,kBACjF,cAAK,SAAS,EAAE,GAAG,OAAO,CAAC,eAAe,IAAI,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAG,KAAK,CAAC,QAAQ,GAAO,GACrI,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n    visible: boolean;\r\n    orientation?: \"horizontal\" | \"vertical\";\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n    collapseContent: {\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n    },\r\n    horizontal: {\r\n        flexDirection: \"row\",\r\n    },\r\n    vertical: {\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n    Collapse.displayName = \"Collapse\";\r\n    const classes = useCollapseStyles();\r\n\r\n    // Since portalling breaks DOM hierarchy, `unmountOnExit` is required to ensure descendants are unmounted when the logical ancestor collapses.\r\n    // If this is a breaking change, the alternative would be creating a context to pass the `visible` state down to the descendants.\r\n\r\n    return (\r\n        <FluentCollapse visible={props.visible} orientation={props.orientation} unmountOnExit>\r\n            <div className={`${classes.collapseContent} ${props.orientation === \"horizontal\" ? classes.horizontal : classes.vertical}`}>{props.children}</div>\r\n        </FluentCollapse>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/comboBox.d.ts

@@ -1,4 +1,3 @@
-import type { FunctionComponent } from "react";
 import type { PrimitiveProps } from "./primitive.js";
 /**
  * An option object for the ComboBox with separate label and value.
@@ -22,10 +21,32 @@ export type ComboBoxProps = PrimitiveProps<string> & {
      * Options to display as label/value pairs
      */
     options: ComboBoxOption[];
+    /**
+     * The default open state when open is uncontrolled
+     */
+    defaultOpen?: boolean;
 };
 /**
  * Wrapper around a Fluent ComboBox that allows for filtering options.
  * @param props
  * @returns
  */
-export declare const ComboBox: FunctionComponent<ComboBoxProps>;
+export declare const ComboBox: import("react").ForwardRefExoticComponent<import("./primitive.js").BasePrimitiveProps & {
+    value: string;
+    infoLabel?: import("./infoLabel.js").InfoLabelParentProps;
+} & {
+    onChange: (value: string) => void;
+} & {
+    /**
+     * Label for the ComboBox
+     */
+    label: string;
+    /**
+     * Options to display as label/value pairs
+     */
+    options: ComboBoxOption[];
+    /**
+     * The default open state when open is uncontrolled
+     */
+    defaultOpen?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/fluent/primitives/comboBox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext, useEffect } from "react";
+import { useState, useContext, useEffect, forwardRef } from "react";
 import { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option } from "@fluentui/react-components";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
 import { CustomTokens } from "./utils.js";
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
  * @param props
  * @returns
  */
-export const ComboBox = (props) => {
+export const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
     const styles = useStyles();
@@ -53,6 +53,6 @@ export const ComboBox = (props) => {
         setQuery(data.optionText ?? "");
         data.optionValue && props.onChange(data.optionValue);
     };
-    return (_jsxs("div", { className: styles.root, children: [_jsx("label", { id: comboId, children: props.label }), _jsx(FluentComboBox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
-};
+    return (_jsxs("div", { className: styles.root, children: [_jsx("label", { id: comboId, children: props.label }), _jsx(FluentComboBox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+});
 //# sourceMappingURL=comboBox.js.map

package/fluent/primitives/comboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useState, useContext, useEffect } from \"react\";\r\nimport { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option } from \"@fluentui/react-components\";\r\nimport type { OptionOnSelectData, SelectionEvents } from \"@fluentui/react-components\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { CustomTokens } from \"./utils\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"grid\",\r\n        gridTemplateRows: \"repeat(1fr)\",\r\n        justifyItems: \"start\",\r\n        gap: \"2px\",\r\n        maxWidth: \"400px\",\r\n    },\r\n    comboBox: {\r\n        width: CustomTokens.inputWidth,\r\n        minWidth: CustomTokens.inputWidth,\r\n        boxSizing: \"border-box\",\r\n    },\r\n    input: {\r\n        minWidth: 0,\r\n    },\r\n    listbox: {\r\n        width: \"fit-content\",\r\n        minWidth: \"fit-content\",\r\n        maxWidth: \"350px\",\r\n    },\r\n});\r\n\r\n/**\r\n * An option object for the ComboBox with separate label and value.\r\n */\r\nexport type ComboBoxOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: string;\r\n};\r\n\r\nexport type ComboBoxProps = PrimitiveProps<string> & {\r\n    /**\r\n     * Label for the ComboBox\r\n     */\r\n    label: string;\r\n    /**\r\n     * Options to display as label/value pairs\r\n     */\r\n    options: ComboBoxOption[];\r\n};\r\n\r\n/**\r\n * Wrapper around a Fluent ComboBox that allows for filtering options.\r\n * @param props\r\n * @returns\r\n */\r\nexport const ComboBox: FunctionComponent<ComboBoxProps> = (props) => {\r\n    ComboBox.displayName = \"ComboBox\";\r\n    const comboId = useId();\r\n    const styles = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    // Find the label for the current value\r\n    const getLabel = (value: string) => props.options.find((opt) => opt.value === value)?.label ?? \"\";\r\n\r\n    const [query, setQuery] = useState(getLabel(props.value ?? \"\"));\r\n\r\n    useEffect(() => {\r\n        setQuery(getLabel(props.value ?? \"\"));\r\n    }, [props.value, props.options]);\r\n\r\n    // Convert to Fluent's { children, value } format\r\n    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));\r\n\r\n    const children = useComboboxFilter(query, normalizedOptions, {\r\n        noOptionsMessage: \"No items match your search.\",\r\n        optionToReactKey: (option) => option.value,\r\n        optionToText: (option) => option.children,\r\n        renderOption: (option) => (\r\n            <Option key={option.value} value={option.value} text={option.children}>\r\n                {option.children}\r\n            </Option>\r\n        ),\r\n    });\r\n\r\n    const onOptionSelect = (_e: SelectionEvents, data: OptionOnSelectData) => {\r\n        setQuery(data.optionText ?? \"\");\r\n        data.optionValue && props.onChange(data.optionValue);\r\n    };\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <label id={comboId}>{props.label}</label>\r\n            <FluentComboBox\r\n                size={size}\r\n                root={{ className: styles.comboBox }}\r\n                input={{ className: styles.input }}\r\n                listbox={{ className: styles.listbox }}\r\n                onOptionSelect={onOptionSelect}\r\n                aria-labelledby={comboId}\r\n                placeholder=\"Search..\"\r\n                onChange={(ev) => setQuery(ev.target.value)}\r\n                value={query}\r\n            >\r\n                {children}\r\n            </FluentComboBox>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useContext, useEffect, forwardRef } from \"react\";\r\nimport { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option } from \"@fluentui/react-components\";\r\nimport type { OptionOnSelectData, SelectionEvents } from \"@fluentui/react-components\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { CustomTokens } from \"./utils\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"grid\",\r\n        gridTemplateRows: \"repeat(1fr)\",\r\n        justifyItems: \"start\",\r\n        gap: \"2px\",\r\n        maxWidth: \"400px\",\r\n    },\r\n    comboBox: {\r\n        width: CustomTokens.inputWidth,\r\n        minWidth: CustomTokens.inputWidth,\r\n        boxSizing: \"border-box\",\r\n    },\r\n    input: {\r\n        minWidth: 0,\r\n    },\r\n    listbox: {\r\n        width: \"fit-content\",\r\n        minWidth: \"fit-content\",\r\n        maxWidth: \"350px\",\r\n    },\r\n});\r\n\r\n/**\r\n * An option object for the ComboBox with separate label and value.\r\n */\r\nexport type ComboBoxOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: string;\r\n};\r\n\r\nexport type ComboBoxProps = PrimitiveProps<string> & {\r\n    /**\r\n     * Label for the ComboBox\r\n     */\r\n    label: string;\r\n    /**\r\n     * Options to display as label/value pairs\r\n     */\r\n    options: ComboBoxOption[];\r\n    /**\r\n     * The default open state when open is uncontrolled\r\n     */\r\n    defaultOpen?: boolean;\r\n};\r\n\r\n/**\r\n * Wrapper around a Fluent ComboBox that allows for filtering options.\r\n * @param props\r\n * @returns\r\n */\r\nexport const ComboBox = forwardRef<HTMLInputElement, ComboBoxProps>((props, ref) => {\r\n    ComboBox.displayName = \"ComboBox\";\r\n    const comboId = useId();\r\n    const styles = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    // Find the label for the current value\r\n    const getLabel = (value: string) => props.options.find((opt) => opt.value === value)?.label ?? \"\";\r\n\r\n    const [query, setQuery] = useState(getLabel(props.value ?? \"\"));\r\n\r\n    useEffect(() => {\r\n        setQuery(getLabel(props.value ?? \"\"));\r\n    }, [props.value, props.options]);\r\n\r\n    // Convert to Fluent's { children, value } format\r\n    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));\r\n\r\n    const children = useComboboxFilter(query, normalizedOptions, {\r\n        noOptionsMessage: \"No items match your search.\",\r\n        optionToReactKey: (option) => option.value,\r\n        optionToText: (option) => option.children,\r\n        renderOption: (option) => (\r\n            <Option key={option.value} value={option.value} text={option.children}>\r\n                {option.children}\r\n            </Option>\r\n        ),\r\n    });\r\n\r\n    const onOptionSelect = (_e: SelectionEvents, data: OptionOnSelectData) => {\r\n        setQuery(data.optionText ?? \"\");\r\n        data.optionValue && props.onChange(data.optionValue);\r\n    };\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <label id={comboId}>{props.label}</label>\r\n            <FluentComboBox\r\n                ref={ref}\r\n                defaultOpen={props.defaultOpen}\r\n                size={size}\r\n                root={{ className: styles.comboBox }}\r\n                input={{ className: styles.input }}\r\n                listbox={{ className: styles.listbox }}\r\n                onOptionSelect={onOptionSelect}\r\n                aria-labelledby={comboId}\r\n                placeholder=\"Search..\"\r\n                onChange={(ev) => setQuery(ev.target.value)}\r\n                value={query}\r\n            >\r\n                {children}\r\n            </FluentComboBox>\r\n        </div>\r\n    );\r\n});\r\n"]}

package/fluent/primitives/entitySelector.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { makeStyles, tokens, Tooltip } from "@fluentui/react-components";
 import { LinkDismissRegular, LinkEditRegular } from "@fluentui/react-icons";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./button.js";
 import { ComboBox } from "./comboBox.js";
 import { Link } from "./link.js";
-import { Button } from "./button.js";
-import { makeStyles, tokens, Tooltip } from "@fluentui/react-components";
+import { useImpulse } from "../hooks/transientStateHooks.js";
 const useStyles = makeStyles({
     linkDiv: {
         display: "flex",
@@ -31,6 +32,7 @@ export function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
     const classes = useStyles();
+    const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
         return getEntities()
@@ -42,6 +44,12 @@ export function EntitySelector(props) {
             .sort((a, b) => a.label.localeCompare(b.label));
     }, [getEntities, getName, filter]);
     const [isEditing, setIsEditing] = useState(false);
+    const [enteringEditMode, pulseEnteringEditMode] = useImpulse();
+    useEffect(() => {
+        if (enteringEditMode) {
+            comboBoxRef.current?.focus();
+        }
+    }, [enteringEditMode]);
     const handleEntitySelect = (key) => {
         const entity = getEntities().find((e) => e.uniqueId.toString() === key);
         onChange?.(entity ?? null);
@@ -54,13 +62,19 @@ export function EntitySelector(props) {
         return (_jsxs("div", { className: classes.linkDiv, children: [_jsx(Tooltip, { content: getName(value), relationship: "label", children: _jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
                     (defaultValue !== undefined ? (
                     // If the defaultValue is specified, then allow resetting to the default
-                    _jsx(Tooltip, { content: "Unlink", relationship: "label", children: _jsx(Button, { icon: LinkDismissRegular, onClick: () => onChange(defaultValue) }) })) : (
+                    _jsx(Tooltip, { content: "Unlink", relationship: "label", children: _jsx(Button, { icon: LinkDismissRegular, onClick: () => {
+                                pulseEnteringEditMode(true);
+                                onChange(defaultValue);
+                            } }) })) : (
                     // Otherwise, just allow editing to a new value
-                    _jsx(Tooltip, { content: "Edit Link", relationship: "label", children: _jsx(Button, { icon: LinkEditRegular, onClick: () => setIsEditing(true) }) })))] }));
+                    _jsx(Tooltip, { content: "Edit Link", relationship: "label", children: _jsx(Button, { icon: LinkEditRegular, onClick: () => {
+                                pulseEnteringEditMode(true);
+                                setIsEditing(true);
+                            } }) })))] }));
     }
     else {
         // Otherwise, show the ComboBox for selection
-        return _jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+        return _jsx(ComboBox, { ref: comboBoxRef, defaultOpen: enteringEditMode, label: "", options: options, value: currentKey, onChange: handleEntitySelect });
     }
 }
 EntitySelector.displayName = "EntitySelector";

package/fluent/primitives/entitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { Button } from \"./button\";\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\n\r\ntype Entity = { uniqueId: number };\r\n\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {\r\n    /**\r\n     * Function to get the list of entities to choose from\r\n     */\r\n    getEntities: () => T[];\r\n    /**\r\n     * Function to get the display name from an entity\r\n     */\r\n    getName: (entity: T) => string;\r\n    /**\r\n     * Optional filter function to filter which entities are shown\r\n     */\r\n    filter?: (entity: T) => boolean;\r\n    /**\r\n     * Callback when the entity link is clicked\r\n     */\r\n    onLink: (entity: T) => void;\r\n    /**\r\n     * Optional default value that enables clearing the current linked entity\r\n     */\r\n    defaultValue?: T;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n    linkDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n    },\r\n    link: {\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n});\r\n\r\n/**\r\n * A generic primitive component with a ComboBox for selecting from a list of entities.\r\n * Supports entities with duplicate names by using uniqueId for identity.\r\n * @param props ChooseEntityProps\r\n * @returns EntitySelector component\r\n */\r\nexport function EntitySelector<T extends Entity>(props: EntitySelectorProps<T>): JSX.Element {\r\n    const { value, onLink, getEntities, getName, filter, defaultValue } = props;\r\n\r\n    const onChange = (props as PrimitiveProps<Nullable<T>>).onChange as PrimitiveProps<Nullable<T>>[\"onChange\"] | undefined;\r\n\r\n    const classes = useStyles();\r\n\r\n    // Build options with uniqueId as key\r\n    const options = useMemo(() => {\r\n        return getEntities()\r\n            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))\r\n            .map((entity) => ({\r\n                label: getName(entity)?.toString() || \"\",\r\n                value: entity.uniqueId.toString(),\r\n            }))\r\n            .sort((a, b) => a.label.localeCompare(b.label));\r\n    }, [getEntities, getName, filter]);\r\n\r\n    const [isEditing, setIsEditing] = useState(false);\r\n\r\n    const handleEntitySelect = (key: string) => {\r\n        const entity = getEntities().find((e) => e.uniqueId.toString() === key);\r\n        onChange?.(entity ?? null);\r\n        setIsEditing(false);\r\n    };\r\n\r\n    // Get current entity key for display\r\n    const currentKey = value ? value.uniqueId.toString() : \"\";\r\n\r\n    if (value && !isEditing) {\r\n        // If there is a value and we are not editing, show the link view\r\n        return (\r\n            <div className={classes.linkDiv}>\r\n                <Tooltip content={getName(value)} relationship=\"label\">\r\n                    <Link className={classes.link} value={getName(value)} onLink={() => onLink(value)} />\r\n                </Tooltip>\r\n                {/* Only allow changing the linked entity if an onChange handler is provided */}\r\n                {onChange &&\r\n                    (defaultValue !== undefined ? (\r\n                        // If the defaultValue is specified, then allow resetting to the default\r\n                        <Tooltip content=\"Unlink\" relationship=\"label\">\r\n                            <Button icon={LinkDismissRegular} onClick={() => onChange(defaultValue)} />\r\n                        </Tooltip>\r\n                    ) : (\r\n                        // Otherwise, just allow editing to a new value\r\n                        <Tooltip content=\"Edit Link\" relationship=\"label\">\r\n                            <Button icon={LinkEditRegular} onClick={() => setIsEditing(true)} />\r\n                        </Tooltip>\r\n                    ))}\r\n            </div>\r\n        );\r\n    } else {\r\n        // Otherwise, show the ComboBox for selection\r\n        return <ComboBox label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n    }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}
+{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AA8B1D,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,kBAAkB;QAC9B,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;KACvB;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAmB,KAA6B;IAC1E,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,QAAQ,GAAI,KAAqC,CAAC,QAA+D,CAAC;IAExH,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,qCAAqC;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,WAAW,EAAE;aACf,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;aACjE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACd,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE;SACpC,CAAC,CAAC;aACF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAQ,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,gBAAgB,EAAE,CAAC;YACnB,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC;QACxE,QAAQ,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,qCAAqC;IACrC,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1D,IAAI,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACtB,iEAAiE;QACjE,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,OAAO,aAC3B,KAAC,OAAO,IAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,YAAY,EAAC,OAAO,YAClD,KAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,GAC/E,EAET,QAAQ;oBACL,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC;oBAC1B,wEAAwE;oBACxE,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,EAAC,YAAY,EAAC,OAAO,YAC1C,KAAC,MAAM,IACH,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,GAAG,EAAE;gCACV,qBAAqB,CAAC,IAAI,CAAC,CAAC;gCAC5B,QAAQ,CAAC,YAAY,CAAC,CAAC;4BAC3B,CAAC,GACH,GACI,CACb,CAAC,CAAC,CAAC;oBACA,+CAA+C;oBAC/C,KAAC,OAAO,IAAC,OAAO,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,YAC7C,KAAC,MAAM,IACH,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE;gCACV,qBAAqB,CAAC,IAAI,CAAC,CAAC;gCAC5B,YAAY,CAAC,IAAI,CAAC,CAAC;4BACvB,CAAC,GACH,GACI,CACb,CAAC,IACJ,CACT,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,6CAA6C;QAC7C,OAAO,KAAC,QAAQ,IAAC,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,EAAC,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CAAC;IACrJ,CAAC;AACL,CAAC;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { useImpulse } from \"../hooks/transientStateHooks\";\r\n\r\ntype Entity = { uniqueId: number };\r\n\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {\r\n    /**\r\n     * Function to get the list of entities to choose from\r\n     */\r\n    getEntities: () => T[];\r\n    /**\r\n     * Function to get the display name from an entity\r\n     */\r\n    getName: (entity: T) => string;\r\n    /**\r\n     * Optional filter function to filter which entities are shown\r\n     */\r\n    filter?: (entity: T) => boolean;\r\n    /**\r\n     * Callback when the entity link is clicked\r\n     */\r\n    onLink: (entity: T) => void;\r\n    /**\r\n     * Optional default value that enables clearing the current linked entity\r\n     */\r\n    defaultValue?: T;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n    linkDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n    },\r\n    link: {\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n});\r\n\r\n/**\r\n * A generic primitive component with a ComboBox for selecting from a list of entities.\r\n * Supports entities with duplicate names by using uniqueId for identity.\r\n * @param props ChooseEntityProps\r\n * @returns EntitySelector component\r\n */\r\nexport function EntitySelector<T extends Entity>(props: EntitySelectorProps<T>): JSX.Element {\r\n    const { value, onLink, getEntities, getName, filter, defaultValue } = props;\r\n\r\n    const onChange = (props as PrimitiveProps<Nullable<T>>).onChange as PrimitiveProps<Nullable<T>>[\"onChange\"] | undefined;\r\n\r\n    const classes = useStyles();\r\n\r\n    const comboBoxRef = useRef<HTMLInputElement>(null);\r\n\r\n    // Build options with uniqueId as key\r\n    const options = useMemo(() => {\r\n        return getEntities()\r\n            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))\r\n            .map((entity) => ({\r\n                label: getName(entity)?.toString() || \"\",\r\n                value: entity.uniqueId.toString(),\r\n            }))\r\n            .sort((a, b) => a.label.localeCompare(b.label));\r\n    }, [getEntities, getName, filter]);\r\n\r\n    const [isEditing, setIsEditing] = useState(false);\r\n\r\n    const [enteringEditMode, pulseEnteringEditMode] = useImpulse<true>();\r\n\r\n    useEffect(() => {\r\n        if (enteringEditMode) {\r\n            comboBoxRef.current?.focus();\r\n        }\r\n    }, [enteringEditMode]);\r\n\r\n    const handleEntitySelect = (key: string) => {\r\n        const entity = getEntities().find((e) => e.uniqueId.toString() === key);\r\n        onChange?.(entity ?? null);\r\n        setIsEditing(false);\r\n    };\r\n\r\n    // Get current entity key for display\r\n    const currentKey = value ? value.uniqueId.toString() : \"\";\r\n\r\n    if (value && !isEditing) {\r\n        // If there is a value and we are not editing, show the link view\r\n        return (\r\n            <div className={classes.linkDiv}>\r\n                <Tooltip content={getName(value)} relationship=\"label\">\r\n                    <Link className={classes.link} value={getName(value)} onLink={() => onLink(value)} />\r\n                </Tooltip>\r\n                {/* Only allow changing the linked entity if an onChange handler is provided */}\r\n                {onChange &&\r\n                    (defaultValue !== undefined ? (\r\n                        // If the defaultValue is specified, then allow resetting to the default\r\n                        <Tooltip content=\"Unlink\" relationship=\"label\">\r\n                            <Button\r\n                                icon={LinkDismissRegular}\r\n                                onClick={() => {\r\n                                    pulseEnteringEditMode(true);\r\n                                    onChange(defaultValue);\r\n                                }}\r\n                            />\r\n                        </Tooltip>\r\n                    ) : (\r\n                        // Otherwise, just allow editing to a new value\r\n                        <Tooltip content=\"Edit Link\" relationship=\"label\">\r\n                            <Button\r\n                                icon={LinkEditRegular}\r\n                                onClick={() => {\r\n                                    pulseEnteringEditMode(true);\r\n                                    setIsEditing(true);\r\n                                }}\r\n                            />\r\n                        </Tooltip>\r\n                    ))}\r\n            </div>\r\n        );\r\n    } else {\r\n        // Otherwise, show the ComboBox for selection\r\n        return <ComboBox ref={comboBoxRef} defaultOpen={enteringEditMode} label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n    }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}

package/fluent/primitives/infoLabel.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState, useEffect } from "react";
-import { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses, useFluent } from "@fluentui/react-components";
+import { useCallback } from "react";
+import { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses } from "@fluentui/react-components";
+import { useKeyState } from "../hooks/keyboardHooks.js";
 const useInfoLabelStyles = makeStyles({
     infoPopup: {
         whiteSpace: "normal",
@@ -27,32 +28,7 @@ const useInfoLabelStyles = makeStyles({
 export const InfoLabel = (props) => {
     InfoLabel.displayName = "InfoLabel";
     const classes = useInfoLabelStyles();
-    const { targetDocument } = useFluent();
-    const [ctrlPressed, setCtrlPressed] = useState(false);
-    useEffect(() => {
-        const targetWindow = targetDocument?.defaultView ?? window;
-        const handleKeyDown = (e) => {
-            if (e.ctrlKey) {
-                setCtrlPressed(true);
-            }
-        };
-        const handleKeyUp = (e) => {
-            if (!e.ctrlKey) {
-                setCtrlPressed(false);
-            }
-        };
-        const handleBlur = () => {
-            setCtrlPressed(false);
-        };
-        targetWindow.addEventListener("keydown", handleKeyDown);
-        targetWindow.addEventListener("keyup", handleKeyUp);
-        targetWindow.addEventListener("blur", handleBlur);
-        return () => {
-            targetWindow.removeEventListener("keydown", handleKeyDown);
-            targetWindow.removeEventListener("keyup", handleKeyUp);
-            targetWindow.removeEventListener("blur", handleBlur);
-        };
-    }, [targetDocument]);
+    const ctrlPressed = useKeyState("Control");
     const infoContent = props.info ? _jsx("div", { className: classes.infoPopup, children: props.info }) : undefined;
     const showCopyCursor = ctrlPressed && props.onContextMenu;
     // Handle Ctrl+click as context menu action

package/fluent/primitives/infoLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"infoLabel.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/infoLabel.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, MouseEvent, MouseEventHandler } from \"react\";\r\nimport { useCallback, useState, useEffect } from \"react\";\r\nimport { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses, useFluent } from \"@fluentui/react-components\";\r\n\r\nexport type InfoLabelProps = {\r\n    htmlFor: string; // required ID of the element whose label we are applying\r\n    info?: JSX.Element;\r\n    label: string;\r\n    className?: string;\r\n    /**\r\n     * When true, applies flex layout styling to the label slot for proper truncation in flex containers\r\n     */\r\n    flexLabel?: boolean;\r\n    /**\r\n     * Handler for right-click context menu. Also triggers on Ctrl+click.\r\n     */\r\n    onContextMenu?: MouseEventHandler;\r\n};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\r\nconst useInfoLabelStyles = makeStyles({\r\n    infoPopup: {\r\n        whiteSpace: \"normal\",\r\n        wordBreak: \"break-word\",\r\n    },\r\n    labelSlot: {\r\n        display: \"flex\",\r\n        minWidth: 0,\r\n    },\r\n    labelText: {\r\n        whiteSpace: \"nowrap\",\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n    },\r\n    copyable: {\r\n        cursor: \"pointer\",\r\n    },\r\n});\r\n/**\r\n * Renders a label with an optional popup containing more info\r\n * @param props\r\n * @returns\r\n */\r\nexport const InfoLabel: FunctionComponent<InfoLabelProps> = (props) => {\r\n    InfoLabel.displayName = \"InfoLabel\";\r\n    const classes = useInfoLabelStyles();\r\n    const { targetDocument } = useFluent();\r\n\r\n    const [ctrlPressed, setCtrlPressed] = useState(false);\r\n\r\n    useEffect(() => {\r\n        const targetWindow = targetDocument?.defaultView ?? window;\r\n\r\n        const handleKeyDown = (e: KeyboardEvent) => {\r\n            if (e.ctrlKey) {\r\n                setCtrlPressed(true);\r\n            }\r\n        };\r\n        const handleKeyUp = (e: KeyboardEvent) => {\r\n            if (!e.ctrlKey) {\r\n                setCtrlPressed(false);\r\n            }\r\n        };\r\n        const handleBlur = () => {\r\n            setCtrlPressed(false);\r\n        };\r\n\r\n        targetWindow.addEventListener(\"keydown\", handleKeyDown);\r\n        targetWindow.addEventListener(\"keyup\", handleKeyUp);\r\n        targetWindow.addEventListener(\"blur\", handleBlur);\r\n\r\n        return () => {\r\n            targetWindow.removeEventListener(\"keydown\", handleKeyDown);\r\n            targetWindow.removeEventListener(\"keyup\", handleKeyUp);\r\n            targetWindow.removeEventListener(\"blur\", handleBlur);\r\n        };\r\n    }, [targetDocument]);\r\n\r\n    const infoContent = props.info ? <div className={classes.infoPopup}>{props.info}</div> : undefined;\r\n\r\n    const showCopyCursor = ctrlPressed && props.onContextMenu;\r\n\r\n    // Handle Ctrl+click as context menu action\r\n    const handleClick = useCallback(\r\n        (e: MouseEvent) => {\r\n            if (e.ctrlKey && props.onContextMenu) {\r\n                props.onContextMenu(e);\r\n            }\r\n        },\r\n        [props.onContextMenu]\r\n    );\r\n\r\n    return infoContent ? (\r\n        <FluentInfoLabel\r\n            htmlFor={props.htmlFor}\r\n            info={infoContent}\r\n            className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)}\r\n            label={props.flexLabel ? { className: classes.labelSlot } : undefined}\r\n            onContextMenu={props.onContextMenu}\r\n            onClick={handleClick}\r\n        >\r\n            <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n        </FluentInfoLabel>\r\n    ) : (\r\n        <Body1Strong className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)} onContextMenu={props.onContextMenu} onClick={handleClick}>\r\n            {props.label}\r\n        </Body1Strong>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"infoLabel.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/infoLabel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAiBrD,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,YAAY;KAC1B;IACD,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CAAC;KACd;IACD,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;IACD,QAAQ,EAAE;QACN,MAAM,EAAE,SAAS;KACpB;CACJ,CAAC,CAAC;AACH;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACpC,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,MAAM,WAAW,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,IAAI,GAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnG,MAAM,cAAc,GAAG,WAAW,IAAI,KAAK,CAAC,aAAa,CAAC;IAE1D,2CAA2C;IAC3C,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,CAAa,EAAE,EAAE;QACd,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;YACnC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACxB,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,eAAe,IACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,OAAO,EAAE,WAAW,YAEpB,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAe,GACxD,CACrB,CAAC,CAAC,CAAC,CACA,KAAC,WAAW,IAAC,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,WAAW,YACzJ,KAAK,CAAC,KAAK,GACF,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, MouseEvent, MouseEventHandler } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses } from \"@fluentui/react-components\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\n\r\nexport type InfoLabelProps = {\r\n    htmlFor: string; // required ID of the element whose label we are applying\r\n    info?: JSX.Element;\r\n    label: string;\r\n    className?: string;\r\n    /**\r\n     * When true, applies flex layout styling to the label slot for proper truncation in flex containers\r\n     */\r\n    flexLabel?: boolean;\r\n    /**\r\n     * Handler for right-click context menu. Also triggers on Ctrl+click.\r\n     */\r\n    onContextMenu?: MouseEventHandler;\r\n};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\r\nconst useInfoLabelStyles = makeStyles({\r\n    infoPopup: {\r\n        whiteSpace: \"normal\",\r\n        wordBreak: \"break-word\",\r\n    },\r\n    labelSlot: {\r\n        display: \"flex\",\r\n        minWidth: 0,\r\n    },\r\n    labelText: {\r\n        whiteSpace: \"nowrap\",\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n    },\r\n    copyable: {\r\n        cursor: \"pointer\",\r\n    },\r\n});\r\n/**\r\n * Renders a label with an optional popup containing more info\r\n * @param props\r\n * @returns\r\n */\r\nexport const InfoLabel: FunctionComponent<InfoLabelProps> = (props) => {\r\n    InfoLabel.displayName = \"InfoLabel\";\r\n    const classes = useInfoLabelStyles();\r\n\r\n    const ctrlPressed = useKeyState(\"Control\");\r\n\r\n    const infoContent = props.info ? <div className={classes.infoPopup}>{props.info}</div> : undefined;\r\n\r\n    const showCopyCursor = ctrlPressed && props.onContextMenu;\r\n\r\n    // Handle Ctrl+click as context menu action\r\n    const handleClick = useCallback(\r\n        (e: MouseEvent) => {\r\n            if (e.ctrlKey && props.onContextMenu) {\r\n                props.onContextMenu(e);\r\n            }\r\n        },\r\n        [props.onContextMenu]\r\n    );\r\n\r\n    return infoContent ? (\r\n        <FluentInfoLabel\r\n            htmlFor={props.htmlFor}\r\n            info={infoContent}\r\n            className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)}\r\n            label={props.flexLabel ? { className: classes.labelSlot } : undefined}\r\n            onContextMenu={props.onContextMenu}\r\n            onClick={handleClick}\r\n        >\r\n            <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n        </FluentInfoLabel>\r\n    ) : (\r\n        <Body1Strong className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)} onContextMenu={props.onContextMenu} onClick={handleClick}>\r\n            {props.label}\r\n        </Body1Strong>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/messageBar.d.ts

@@ -4,6 +4,7 @@ type MessageBarProps = {
     title?: string;
     docLink?: string;
     intent: "info" | "success" | "warning" | "error";
+    staticItem?: boolean;
 };
 export declare const MessageBar: FunctionComponent<MessageBarProps>;
 export {};

package/fluent/primitives/messageBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from "@fluentui/react-components";
 import { Link } from "./link.js";
+import { AccordionSectionItem } from "./accordion.js";
 const useClasses = makeStyles({
     container: {
         display: "flex",
@@ -10,8 +11,8 @@ const useClasses = makeStyles({
 });
 export const MessageBar = (props) => {
     MessageBar.displayName = "MessageBar";
-    const { message, title, intent, docLink } = props;
+    const { message, title, intent, docLink, staticItem } = props;
     const classes = useClasses();
-    return (_jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, layout: "multiline", children: _jsxs(MessageBarBody, { children: [title && _jsx(MessageBarTitle, { children: title }), message, docLink && (_jsxs(_Fragment, { children: [" - ", _jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
+    return (_jsx(AccordionSectionItem, { uniqueId: title ?? message, staticItem: staticItem ?? true, children: _jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, layout: "multiline", children: _jsxs(MessageBarBody, { children: [title && _jsx(MessageBarTitle, { children: title }), message, docLink && (_jsxs(_Fragment, { children: [" - ", _jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }) }));
 };
 //# sourceMappingURL=messageBar.js.map

package/fluent/primitives/messageBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,WAAW,YAChD,MAAC,cAAc,eACV,KAAK,IAAI,KAAC,eAAe,cAAE,KAAK,GAAmB,EACnD,OAAO,EACP,OAAO,IAAI,CACR,8BACK,KAAK,EACN,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,YAAY,GAAG,IAC1C,CACN,IACY,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalS, // 8px\r\n    },\r\n});\r\n\r\ntype MessageBarProps = {\r\n    message: string;\r\n    title?: string;\r\n    docLink?: string;\r\n    intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n    MessageBar.displayName = \"MessageBar\";\r\n    const { message, title, intent, docLink } = props;\r\n    const classes = useClasses();\r\n\r\n    return (\r\n        <div className={classes.container}>\r\n            <FluentMessageBar intent={intent} layout=\"multiline\">\r\n                <MessageBarBody>\r\n                    {title && <MessageBarTitle>{title}</MessageBarTitle>}\r\n                    {message}\r\n                    {docLink && (\r\n                        <>\r\n                            {\" - \"}\r\n                            <Link url={docLink} value=\"Learn More\" />\r\n                        </>\r\n                    )}\r\n                </MessageBarBody>\r\n            </FluentMessageBar>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAUH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,KAAC,oBAAoB,IAAC,QAAQ,EAAE,KAAK,IAAI,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,IAAI,YAC5E,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,WAAW,YAChD,MAAC,cAAc,eACV,KAAK,IAAI,KAAC,eAAe,cAAE,KAAK,GAAmB,EACnD,OAAO,EACP,OAAO,IAAI,CACR,8BACK,KAAK,EACN,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,YAAY,GAAG,IAC1C,CACN,IACY,GACF,GACjB,GACa,CAC1B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\nimport { AccordionSectionItem } from \"./accordion\";\r\n\r\nconst useClasses = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalS, // 8px\r\n    },\r\n});\r\n\r\ntype MessageBarProps = {\r\n    message: string;\r\n    title?: string;\r\n    docLink?: string;\r\n    intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n    staticItem?: boolean;\r\n};\r\n\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n    MessageBar.displayName = \"MessageBar\";\r\n    const { message, title, intent, docLink, staticItem } = props;\r\n    const classes = useClasses();\r\n\r\n    return (\r\n        <AccordionSectionItem uniqueId={title ?? message} staticItem={staticItem ?? true}>\r\n            <div className={classes.container}>\r\n                <FluentMessageBar intent={intent} layout=\"multiline\">\r\n                    <MessageBarBody>\r\n                        {title && <MessageBarTitle>{title}</MessageBarTitle>}\r\n                        {message}\r\n                        {docLink && (\r\n                            <>\r\n                                {\" - \"}\r\n                                <Link url={docLink} value=\"Learn More\" />\r\n                            </>\r\n                        )}\r\n                    </MessageBarBody>\r\n                </FluentMessageBar>\r\n            </div>\r\n        </AccordionSectionItem>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/spinButton.js

@@ -4,6 +4,18 @@ import { forwardRef, useEffect, useState, useRef, useContext } from "react";
 import { InfoLabel } from "./infoLabel.js";
 import { CalculatePrecision, HandleKeyDown, HandleOnBlur, useInputStyles } from "./utils.js";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
+import { useKeyState } from "../hooks/keyboardHooks.js";
+function CoerceStepValue(step, isAltKeyPressed, isShiftKeyPressed) {
+    // When the alt key is pressed, decrease step by a factor of 10.
+    if (isAltKeyPressed) {
+        return step * 0.1;
+    }
+    // When the shift key is pressed, increase step by a factor of 10.
+    if (isShiftKeyPressed) {
+        return step * 10;
+    }
+    return step;
+}
 export const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton";
     const classes = useInputStyles();
@@ -11,9 +23,15 @@ export const SpinButton = forwardRef((props, ref) => {
     const { min, max } = props;
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
+    // When the input does not have keyboard focus
+    const isUnfocusedAltKeyPressed = useKeyState("Alt");
+    const isUnfocusedShiftKeyPressed = useKeyState("Shift");
+    // When the input does have keyboard focus
+    const [isFocusedAltKeyPressed, setIsFocusedAltKeyPressed] = useState(false);
+    const [isFocusedShiftKeyPressed, setIsFocusedShiftKeyPressed] = useState(false);
     // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
-    const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
-    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
+    const step = CoerceStepValue(props.step ?? 1, isUnfocusedAltKeyPressed || isFocusedAltKeyPressed, isUnfocusedShiftKeyPressed || isFocusedShiftKeyPressed);
+    const precision = Math.min(4, Math.max(0, CalculatePrecision(step))); // Cap precision at 4 to avoid wild numbers
     useEffect(() => {
         if (props.value !== lastCommittedValue.current) {
             lastCommittedValue.current = props.value;
@@ -41,10 +59,35 @@ export const SpinButton = forwardRef((props, ref) => {
             tryCommitValue(data.value);
         }
     };
+    const handleKeyDown = (event) => {
+        if (event.key === "Alt") {
+            setIsFocusedAltKeyPressed(true);
+        }
+        else if (event.key === "Shift") {
+            setIsFocusedShiftKeyPressed(true);
+        }
+        HandleKeyDown(event);
+    };
     const handleKeyUp = (event) => {
         event.stopPropagation(); // Prevent event propagation
         if (event.key !== "Enter") {
-            const currVal = parseFloat(event.target.value); // Cannot use currentTarget.value as it won't have the most recently typed value
+            if (event.key === "Alt") {
+                setIsFocusedAltKeyPressed(false);
+            }
+            else if (event.key === "Shift") {
+                setIsFocusedShiftKeyPressed(false);
+            }
+            // Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).
+            // Use Function constructor to safely evaluate the expression without allowing access to scope.
+            // If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.
+            const currVal = ((val) => {
+                try {
+                    return Number(Function(`"use strict";return (${val})`)());
+                }
+                catch {
+                    return NaN;
+                }
+            })(event.target.value);
             setValue(currVal);
             tryCommitValue(currVal);
         }
@@ -55,7 +98,7 @@ export const SpinButton = forwardRef((props, ref) => {
     const inputSlot = {
         className: mergeClasses(classes.inputSlot, props.inputClassName),
     };
-    const spinButton = (_jsx(FluentSpinButton, { ref: ref, ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName }));
+    const spinButton = (_jsx(FluentSpinButton, { ref: ref, ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: HandleOnBlur, className: mergedClassName }));
     return props.infoLabel ? (_jsxs("div", { className: classes.container, children: [_jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), spinButton] })) : (spinButton);
 });
 //# sourceMappingURL=spinButton.js.map