@babylonjs/shared-ui-components 9.0.0 → 9.1.0

package/fluent/primitives/list.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Body1Strong, makeStyles, tokens } from "@fluentui/react-components";
 import { AddRegular, CopyRegular, DeleteRegular } from "@fluentui/react-icons";
-import { useMemo } from "react";
 import { ButtonLine } from "../hoc/buttonLine.js";
 const useListStyles = makeStyles({
     item: {

package/fluent/primitives/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/list.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK,EAAE,6BAA6B;QACnD,UAAU,EAAE,QAAQ,EAAE,0BAA0B;QAChD,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,6BAA6B;QAC7D,YAAY,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;KAChF;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC,EAAE,0BAA0B;QACnC,QAAQ,EAAE,CAAC,EAAE,qCAAqC;KACrD;IACD,aAAa,EAAE;QACX,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM,CAAC,mBAAmB,EAAE,0BAA0B;QAC3D,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC,EAAE,oBAAoB;KACtC;IACD,IAAI,EAAE;QACF,OAAO,EAAE,MAAM,CAAC,gBAAgB;KACnC;CACJ,CAAC,CAAC;AAsBH;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAI,KAAmB;IACvC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IACtF,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3F,OAAO,CACH,0BACK,KAAK,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,GAAI,EAEzF,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACvB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE,CAAC,CACnD,eAAmB,SAAS,EAAE,OAAO,CAAC,IAAI,aACtC,MAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,kBAAI,KAAK,IAAe,EAC9D,cAAK,SAAS,EAAE,OAAO,CAAC,WAAW,YAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAO,EAC/F,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACpB,eAAK,SAAS,EAAE,OAAO,CAAC,aAAa,aAChC,KAAK,IAAI,KAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,EACpD,QAAQ,IAAI,KAAC,aAAa,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,IAC9F,CACT,KARK,IAAI,CAAC,EAAE,CASX,CACT,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\r\n\r\nimport { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { AddRegular, CopyRegular, DeleteRegular } from \"@fluentui/react-icons\";\r\nimport { useMemo } from \"react\";\r\n\r\nimport { ButtonLine } from \"../hoc/buttonLine\";\r\n\r\nconst useListStyles = makeStyles({\r\n    item: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"row\", // Arrange items horizontally\r\n        alignItems: \"center\", // Center items vertically\r\n        gap: tokens.spacingHorizontalS, // Add space between elements\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    itemId: {\r\n        width: tokens.spacingHorizontalM,\r\n    },\r\n    itemContent: {\r\n        flex: 1, // Take up remaining space\r\n        minWidth: 0, // Prevent flex item from overflowing\r\n    },\r\n    iconContainer: {\r\n        display: \"flex\",\r\n        gap: tokens.spacingHorizontalXS, // Small gap between icons\r\n        alignItems: \"center\",\r\n        flexShrink: 0, // Prevent shrinking\r\n    },\r\n    list: {\r\n        padding: tokens.spacingVerticalS,\r\n    },\r\n});\r\n\r\n/**\r\n * Represents an item in a list\r\n */\r\nexport type ListItem<T> = {\r\n    /** Unique identifier for the item */\r\n    id: number;\r\n    /** The data associated with the item */\r\n    data: T;\r\n    /** Value to use for sorting the list */\r\n    sortBy: number;\r\n};\r\n\r\ntype ListProps<T> = {\r\n    items: ListItem<T>[];\r\n    renderItem: (item: ListItem<T>, index: number) => ReactNode;\r\n    onDelete?: (item: ListItem<T>, index: number) => void;\r\n    onAdd?: (item?: ListItem<T>) => void;\r\n    addButtonLabel?: string;\r\n};\r\n\r\n/**\r\n * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used\r\n * @returns A React component that renders a list of items with add/delete functionality\r\n * @param props - The properties for the List component\r\n */\r\nexport function List<T>(props: ListProps<T>): ReactElement {\r\n    const { items, renderItem, onDelete, onAdd, addButtonLabel = \"Add new item\" } = props;\r\n    const classes = useListStyles();\r\n\r\n    const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);\r\n\r\n    return (\r\n        <div>\r\n            {onAdd && <ButtonLine label={addButtonLabel} icon={AddRegular} onClick={() => onAdd()} />}\r\n\r\n            <div className={classes.list}>\r\n                {sortedItems.map((item: ListItem<T>, index: number) => (\r\n                    <div key={item.id} className={classes.item}>\r\n                        <Body1Strong className={classes.itemId}>#{index}</Body1Strong>\r\n                        <div className={classes.itemContent}>{renderItem(item, items.indexOf(sortedItems[index]))}</div>\r\n                        {(onAdd || onDelete) && (\r\n                            <div className={classes.iconContainer}>\r\n                                {onAdd && <CopyRegular onClick={() => onAdd(item)} />}\r\n                                {onDelete && <DeleteRegular onClick={() => onDelete(item, items.indexOf(sortedItems[index]))} />}\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK,EAAE,6BAA6B;QACnD,UAAU,EAAE,QAAQ,EAAE,0BAA0B;QAChD,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,6BAA6B;QAC7D,YAAY,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;KAChF;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC,EAAE,0BAA0B;QACnC,QAAQ,EAAE,CAAC,EAAE,qCAAqC;KACrD;IACD,aAAa,EAAE;QACX,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM,CAAC,mBAAmB,EAAE,0BAA0B;QAC3D,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC,EAAE,oBAAoB;KACtC;IACD,IAAI,EAAE;QACF,OAAO,EAAE,MAAM,CAAC,gBAAgB;KACnC;CACJ,CAAC,CAAC;AAsBH;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAI,KAAmB;IACvC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IACtF,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3F,OAAO,CACH,0BACK,KAAK,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,GAAI,EAEzF,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACvB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE,CAAC,CACnD,eAAmB,SAAS,EAAE,OAAO,CAAC,IAAI,aACtC,MAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,kBAAI,KAAK,IAAe,EAC9D,cAAK,SAAS,EAAE,OAAO,CAAC,WAAW,YAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAO,EAC/F,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACpB,eAAK,SAAS,EAAE,OAAO,CAAC,aAAa,aAChC,KAAK,IAAI,KAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,EACpD,QAAQ,IAAI,KAAC,aAAa,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,IAC9F,CACT,KARK,IAAI,CAAC,EAAE,CASX,CACT,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import { type ReactElement, type ReactNode, useMemo } from \"react\";\r\n\r\nimport { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { AddRegular, CopyRegular, DeleteRegular } from \"@fluentui/react-icons\";\r\n\r\nimport { ButtonLine } from \"../hoc/buttonLine\";\r\n\r\nconst useListStyles = makeStyles({\r\n    item: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"row\", // Arrange items horizontally\r\n        alignItems: \"center\", // Center items vertically\r\n        gap: tokens.spacingHorizontalS, // Add space between elements\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    itemId: {\r\n        width: tokens.spacingHorizontalM,\r\n    },\r\n    itemContent: {\r\n        flex: 1, // Take up remaining space\r\n        minWidth: 0, // Prevent flex item from overflowing\r\n    },\r\n    iconContainer: {\r\n        display: \"flex\",\r\n        gap: tokens.spacingHorizontalXS, // Small gap between icons\r\n        alignItems: \"center\",\r\n        flexShrink: 0, // Prevent shrinking\r\n    },\r\n    list: {\r\n        padding: tokens.spacingVerticalS,\r\n    },\r\n});\r\n\r\n/**\r\n * Represents an item in a list\r\n */\r\nexport type ListItem<T> = {\r\n    /** Unique identifier for the item */\r\n    id: number;\r\n    /** The data associated with the item */\r\n    data: T;\r\n    /** Value to use for sorting the list */\r\n    sortBy: number;\r\n};\r\n\r\ntype ListProps<T> = {\r\n    items: ListItem<T>[];\r\n    renderItem: (item: ListItem<T>, index: number) => ReactNode;\r\n    onDelete?: (item: ListItem<T>, index: number) => void;\r\n    onAdd?: (item?: ListItem<T>) => void;\r\n    addButtonLabel?: string;\r\n};\r\n\r\n/**\r\n * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used\r\n * @returns A React component that renders a list of items with add/delete functionality\r\n * @param props - The properties for the List component\r\n */\r\nexport function List<T>(props: ListProps<T>): ReactElement {\r\n    const { items, renderItem, onDelete, onAdd, addButtonLabel = \"Add new item\" } = props;\r\n    const classes = useListStyles();\r\n\r\n    const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);\r\n\r\n    return (\r\n        <div>\r\n            {onAdd && <ButtonLine label={addButtonLabel} icon={AddRegular} onClick={() => onAdd()} />}\r\n\r\n            <div className={classes.list}>\r\n                {sortedItems.map((item: ListItem<T>, index: number) => (\r\n                    <div key={item.id} className={classes.item}>\r\n                        <Body1Strong className={classes.itemId}>#{index}</Body1Strong>\r\n                        <div className={classes.itemContent}>{renderItem(item, items.indexOf(sortedItems[index]))}</div>\r\n                        {(onAdd || onDelete) && (\r\n                            <div className={classes.iconContainer}>\r\n                                {onAdd && <CopyRegular onClick={() => onAdd(item)} />}\r\n                                {onDelete && <DeleteRegular onClick={() => onDelete(item, items.indexOf(sortedItems[index]))} />}\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n"]}

package/fluent/primitives/materialSelector.d.ts

@@ -1,9 +1,9 @@
-import type { FunctionComponent } from "react";
-import type { Scene } from "@babylonjs/core/scene.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { Material } from "@babylonjs/core/Materials/material.js";
-import type { PrimitiveProps } from "./primitive.js";
-import type { EntitySelectorProps } from "./entitySelector.js";
+import { type FunctionComponent } from "react";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Material } from "@babylonjs/core/Materials/material.js";
+import { type PrimitiveProps } from "./primitive.js";
+import { type EntitySelectorProps } from "./entitySelector.js";
 export type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {
     /**
      * The scene to get materials from

package/fluent/primitives/materialSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"materialSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/materialSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Material } from \"core/Materials/material\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {\r\n    /**\r\n     * The scene to get materials from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which materials are shown\r\n     */\r\n    filter?: (material: Material) => boolean;\r\n} & Omit<EntitySelectorProps<Material>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene materials.\r\n * @param props MaterialSelectorProps\r\n * @returns MaterialSelector component\r\n */\r\nexport const MaterialSelector: FunctionComponent<MaterialSelectorProps> = (props) => {\r\n    MaterialSelector.displayName = \"MaterialSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getMaterials = useCallback(() => scene.materials, [scene.materials]);\r\n    const getName = useCallback((material: Material) => material.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getMaterials} getName={getName} />;\r\n};\r\n"]}
+{"version":3,"file":"materialSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/materialSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,EAA4B,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAa5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import { type FunctionComponent, useCallback } from \"react\";\r\nimport { type Scene } from \"core/scene\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { type Material } from \"core/Materials/material\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { type EntitySelectorProps, EntitySelector } from \"./entitySelector\";\r\n\r\nexport type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {\r\n    /**\r\n     * The scene to get materials from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which materials are shown\r\n     */\r\n    filter?: (material: Material) => boolean;\r\n} & Omit<EntitySelectorProps<Material>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene materials.\r\n * @param props MaterialSelectorProps\r\n * @returns MaterialSelector component\r\n */\r\nexport const MaterialSelector: FunctionComponent<MaterialSelectorProps> = (props) => {\r\n    MaterialSelector.displayName = \"MaterialSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getMaterials = useCallback(() => scene.materials, [scene.materials]);\r\n    const getName = useCallback((material: Material) => material.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getMaterials} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/messageBar.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import { type FunctionComponent } from "react";
 type MessageBarProps = {
     message: string;
     title?: string;

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;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"]}
+{"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/nodeSelector.d.ts

@@ -1,9 +1,9 @@
-import type { FunctionComponent } from "react";
-import type { Scene } from "@babylonjs/core/scene.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { Node } from "@babylonjs/core/node.js";
-import type { PrimitiveProps } from "./primitive.js";
-import type { EntitySelectorProps } from "./entitySelector.js";
+import { type FunctionComponent } from "react";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Node } from "@babylonjs/core/node.js";
+import { type PrimitiveProps } from "./primitive.js";
+import { type EntitySelectorProps } from "./entitySelector.js";
 export type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {
     /**
      * The scene to get nodes from

package/fluent/primitives/nodeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/nodeSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACjF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Node } from \"core/node\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {\r\n    /**\r\n     * The scene to get nodes from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which nodes are shown\r\n     */\r\n    filter?: (node: Node) => boolean;\r\n} & Omit<EntitySelectorProps<Node>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene nodes.\r\n * @param props NodeSelectorProps\r\n * @returns NodeSelector component\r\n */\r\nexport const NodeSelector: FunctionComponent<NodeSelectorProps> = (props) => {\r\n    NodeSelector.displayName = \"NodeSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getNodes = useCallback(() => scene.getNodes(), [scene]);\r\n    const getName = useCallback((node: Node) => node.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getNodes} getName={getName} />;\r\n};\r\n"]}
+{"version":3,"file":"nodeSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/nodeSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,EAA4B,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAa5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACjF,CAAC,CAAC","sourcesContent":["import { type FunctionComponent, useCallback } from \"react\";\r\nimport { type Scene } from \"core/scene\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { type Node } from \"core/node\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { type EntitySelectorProps, EntitySelector } from \"./entitySelector\";\r\n\r\nexport type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {\r\n    /**\r\n     * The scene to get nodes from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which nodes are shown\r\n     */\r\n    filter?: (node: Node) => boolean;\r\n} & Omit<EntitySelectorProps<Node>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene nodes.\r\n * @param props NodeSelectorProps\r\n * @returns NodeSelector component\r\n */\r\nexport const NodeSelector: FunctionComponent<NodeSelectorProps> = (props) => {\r\n    NodeSelector.displayName = \"NodeSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getNodes = useCallback(() => scene.getNodes(), [scene]);\r\n    const getName = useCallback((node: Node) => node.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getNodes} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/popover.d.ts

@@ -1,6 +1,6 @@
-import type { PropsWithChildren, ReactElement } from "react";
-import type { PositioningShorthand } from "@fluentui/react-components";
-import type { FluentIcon } from "@fluentui/react-icons";
+import { type PropsWithChildren, type ReactElement } from "react";
+import { type PositioningShorthand } from "@fluentui/react-components";
+import { type FluentIcon } from "@fluentui/react-icons";
 type PopoverWithIconProps = {
     icon: FluentIcon;
     trigger?: never;

package/fluent/primitives/popover.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { Popover as FluentPopover, PopoverTrigger, PopoverSurface, makeStyles, tokens } from "@fluentui/react-components";
-import { Button } from "shared-ui-components/fluent/primitives/button";
+import { Button } from "./button.js";
 const useStyles = makeStyles({
     surface: {
         maxWidth: "400px",

package/fluent/primitives/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/popover.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG1H,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AAEvE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,QAAQ,EAAE,OAAO;KACpB;IACD,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB;QAC5B,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,QAAQ,EAAE,OAAO;KACpB;CACJ,CAAC,CAAC;AAyBH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAqD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjG,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAEjE,MAAM,gBAAgB,GAAG,CAAC,CAAU,EAAE,IAAuB,EAAE,EAAE;QAC7D,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QACD,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,aAAa,IACV,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACP,WAAW,IAAI;YACX,KAAK,EAAE,OAAO;YACd,gBAAgB,EAAE,QAAQ,CAAC,IAAI;YAC/B,QAAQ,EAAE,IAAI;SACjB,aAGL,KAAC,cAAc,IAAC,wBAAwB,kBACnC,KAAK,CAAC,OAAO,IAAI,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAClG,EACjB,KAAC,cAAc,IAAC,SAAS,EAAE,gBAAgB,IAAI,OAAO,CAAC,OAAO,YAC1D,cAAK,SAAS,EAAE,OAAO,CAAC,OAAO,YAAG,QAAQ,GAAO,GACpC,IACL,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import type { PropsWithChildren, ReactElement } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\nimport { Popover as FluentPopover, PopoverTrigger, PopoverSurface, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { PositioningShorthand } from \"@fluentui/react-components\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\n\r\nconst useStyles = makeStyles({\r\n    surface: {\r\n        maxWidth: \"400px\",\r\n    },\r\n    content: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalM,\r\n        padding: tokens.spacingHorizontalL,\r\n        minWidth: \"300px\",\r\n    },\r\n});\r\n\r\ntype PopoverWithIconProps = {\r\n    icon: FluentIcon;\r\n    trigger?: never;\r\n};\r\n\r\ntype PopoverWithTriggerProps = {\r\n    icon?: never;\r\n    trigger: ReactElement;\r\n};\r\n\r\ntype PopoverBaseProps = {\r\n    /** Controlled open state */\r\n    open?: boolean;\r\n    /** Callback when open state changes */\r\n    onOpenChange?: (open: boolean) => void;\r\n    /** Positioning of the popover */\r\n    positioning?: PositioningShorthand;\r\n    /** Custom class for the surface */\r\n    surfaceClassName?: string;\r\n};\r\n\r\ntype PopoverProps = PopoverBaseProps & (PopoverWithIconProps | PopoverWithTriggerProps);\r\n\r\nexport const Popover = forwardRef<HTMLButtonElement, PropsWithChildren<PopoverProps>>((props, ref) => {\r\n    const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;\r\n    const [internalOpen, setInternalOpen] = useState(false);\r\n    const classes = useStyles();\r\n\r\n    const isControlled = controlledOpen !== undefined;\r\n    const popoverOpen = isControlled ? controlledOpen : internalOpen;\r\n\r\n    const handleOpenChange = (_: unknown, data: { open: boolean }) => {\r\n        if (!isControlled) {\r\n            setInternalOpen(data.open);\r\n        }\r\n        onOpenChange?.(data.open);\r\n    };\r\n\r\n    return (\r\n        <FluentPopover\r\n            open={popoverOpen}\r\n            onOpenChange={handleOpenChange}\r\n            positioning={\r\n                positioning ?? {\r\n                    align: \"start\",\r\n                    overflowBoundary: document.body,\r\n                    autoSize: true,\r\n                }\r\n            }\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                {props.trigger ?? <Button ref={ref} icon={props.icon} onClick={() => handleOpenChange(null, { open: true })} />}\r\n            </PopoverTrigger>\r\n            <PopoverSurface className={surfaceClassName ?? classes.surface}>\r\n                <div className={classes.content}>{children}</div>\r\n            </PopoverSurface>\r\n        </FluentPopover>\r\n    );\r\n});\r\n\r\nPopover.displayName = \"Popover\";\r\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA6C,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAA6B,MAAM,4BAA4B,CAAC;AAErJ,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AAEvE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,QAAQ,EAAE,OAAO;KACpB;IACD,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB;QAC5B,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,QAAQ,EAAE,OAAO;KACpB;CACJ,CAAC,CAAC;AAyBH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAqD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjG,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAEjE,MAAM,gBAAgB,GAAG,CAAC,CAAU,EAAE,IAAuB,EAAE,EAAE;QAC7D,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QACD,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,aAAa,IACV,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACP,WAAW,IAAI;YACX,KAAK,EAAE,OAAO;YACd,gBAAgB,EAAE,QAAQ,CAAC,IAAI;YAC/B,QAAQ,EAAE,IAAI;SACjB,aAGL,KAAC,cAAc,IAAC,wBAAwB,kBACnC,KAAK,CAAC,OAAO,IAAI,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAClG,EACjB,KAAC,cAAc,IAAC,SAAS,EAAE,gBAAgB,IAAI,OAAO,CAAC,OAAO,YAC1D,cAAK,SAAS,EAAE,OAAO,CAAC,OAAO,YAAG,QAAQ,GAAO,GACpC,IACL,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import { type PropsWithChildren, type ReactElement, forwardRef, useState } from \"react\";\r\nimport { Popover as FluentPopover, PopoverTrigger, PopoverSurface, makeStyles, tokens, type PositioningShorthand } from \"@fluentui/react-components\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\n\r\nconst useStyles = makeStyles({\r\n    surface: {\r\n        maxWidth: \"400px\",\r\n    },\r\n    content: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalM,\r\n        padding: tokens.spacingHorizontalL,\r\n        minWidth: \"300px\",\r\n    },\r\n});\r\n\r\ntype PopoverWithIconProps = {\r\n    icon: FluentIcon;\r\n    trigger?: never;\r\n};\r\n\r\ntype PopoverWithTriggerProps = {\r\n    icon?: never;\r\n    trigger: ReactElement;\r\n};\r\n\r\ntype PopoverBaseProps = {\r\n    /** Controlled open state */\r\n    open?: boolean;\r\n    /** Callback when open state changes */\r\n    onOpenChange?: (open: boolean) => void;\r\n    /** Positioning of the popover */\r\n    positioning?: PositioningShorthand;\r\n    /** Custom class for the surface */\r\n    surfaceClassName?: string;\r\n};\r\n\r\ntype PopoverProps = PopoverBaseProps & (PopoverWithIconProps | PopoverWithTriggerProps);\r\n\r\nexport const Popover = forwardRef<HTMLButtonElement, PropsWithChildren<PopoverProps>>((props, ref) => {\r\n    const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;\r\n    const [internalOpen, setInternalOpen] = useState(false);\r\n    const classes = useStyles();\r\n\r\n    const isControlled = controlledOpen !== undefined;\r\n    const popoverOpen = isControlled ? controlledOpen : internalOpen;\r\n\r\n    const handleOpenChange = (_: unknown, data: { open: boolean }) => {\r\n        if (!isControlled) {\r\n            setInternalOpen(data.open);\r\n        }\r\n        onOpenChange?.(data.open);\r\n    };\r\n\r\n    return (\r\n        <FluentPopover\r\n            open={popoverOpen}\r\n            onOpenChange={handleOpenChange}\r\n            positioning={\r\n                positioning ?? {\r\n                    align: \"start\",\r\n                    overflowBoundary: document.body,\r\n                    autoSize: true,\r\n                }\r\n            }\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                {props.trigger ?? <Button ref={ref} icon={props.icon} onClick={() => handleOpenChange(null, { open: true })} />}\r\n            </PopoverTrigger>\r\n            <PopoverSurface className={surfaceClassName ?? classes.surface}>\r\n                <div className={classes.content}>{children}</div>\r\n            </PopoverSurface>\r\n        </FluentPopover>\r\n    );\r\n});\r\n\r\nPopover.displayName = \"Popover\";\r\n"]}

package/fluent/primitives/positionedPopover.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren } from "react";
+import { type FunctionComponent, type PropsWithChildren } from "react";
 type PositionedPopoverProps = {
     x: number;
     y: number;

package/fluent/primitives/positionedPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"positionedPopover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/positionedPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGrF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiE,CAAC,KAAK,EAAE,EAAE;IACrG,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,gBAAgB,GAAG,CAAC,CAAoB,EAAE,IAAsB,EAAE,EAAE;QACtE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE;YACT,QAAQ,EAAE,OAAO,EAAE,wDAAwD;YAC3E,QAAQ,EAAE,eAAe,EAAE,qEAAqE;YAChG,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,mFAAmF;SACvI,EACD,SAAS,EAAE,KAAK,aAEhB,KAAC,cAAc,cAEX,cACI,KAAK,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACpB,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACnB,UAAU,EAAE,QAAQ;qBACvB,GACH,GACW,EACjB,KAAC,cAAc,cAAE,KAAK,CAAC,QAAQ,GAAkB,IAC3C,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Popover, PopoverSurface, PopoverTrigger } from \"@fluentui/react-components\";\r\nimport type { OnOpenChangeData, OpenPopoverEvents } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype PositionedPopoverProps = {\r\n    x: number;\r\n    y: number;\r\n    visible: boolean;\r\n    hide: () => void;\r\n};\r\n\r\n/**\r\n * PositionedPopover component that shows a popover at specific coordinates\r\n * @param props - The component props\r\n * @returns The positioned popover component\r\n */\r\nexport const PositionedPopover: FunctionComponent<PropsWithChildren<PositionedPopoverProps>> = (props) => {\r\n    PositionedPopover.displayName = \"PositionedPopover\";\r\n    const [open, setOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setOpen(props.visible);\r\n    }, [props.visible, props.x, props.y]);\r\n\r\n    const handleOpenChange = (_: OpenPopoverEvents, data: OnOpenChangeData) => {\r\n        setOpen(data.open);\r\n\r\n        if (!data.open) {\r\n            props.hide();\r\n        }\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={handleOpenChange}\r\n            positioning={{\r\n                position: \"below\", // Places the popover directly below the trigger element\r\n                autoSize: \"height-always\", //Automatically adjusts the popover height to fit within the viewport\r\n                fallbackPositions: [\"above\", \"after\", \"before\"], //If the primary position doesn't fit, automatically tries these positions in order\r\n            }}\r\n            withArrow={false} // Removes arrow that points to trigger element\r\n        >\r\n            <PopoverTrigger>\r\n                {/* Use the invisible div as the trigger location*/}\r\n                <div\r\n                    style={{\r\n                        position: \"absolute\",\r\n                        left: `${props.x}px`,\r\n                        top: `${props.y}px`,\r\n                        visibility: \"hidden\",\r\n                    }}\r\n                />\r\n            </PopoverTrigger>\r\n            <PopoverSurface>{props.children}</PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"positionedPopover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/positionedPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiD,MAAM,4BAA4B,CAAC;AACpI,OAAO,EAAkD,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5F;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiE,CAAC,KAAK,EAAE,EAAE;IACrG,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,gBAAgB,GAAG,CAAC,CAAoB,EAAE,IAAsB,EAAE,EAAE;QACtE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE;YACT,QAAQ,EAAE,OAAO,EAAE,wDAAwD;YAC3E,QAAQ,EAAE,eAAe,EAAE,qEAAqE;YAChG,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,mFAAmF;SACvI,EACD,SAAS,EAAE,KAAK,aAEhB,KAAC,cAAc,cAEX,cACI,KAAK,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACpB,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACnB,UAAU,EAAE,QAAQ;qBACvB,GACH,GACW,EACjB,KAAC,cAAc,cAAE,KAAK,CAAC,QAAQ,GAAkB,IAC3C,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Popover, PopoverSurface, PopoverTrigger, type OnOpenChangeData, type OpenPopoverEvents } from \"@fluentui/react-components\";\r\nimport { type FunctionComponent, type PropsWithChildren, useState, useEffect } from \"react\";\r\n\r\ntype PositionedPopoverProps = {\r\n    x: number;\r\n    y: number;\r\n    visible: boolean;\r\n    hide: () => void;\r\n};\r\n\r\n/**\r\n * PositionedPopover component that shows a popover at specific coordinates\r\n * @param props - The component props\r\n * @returns The positioned popover component\r\n */\r\nexport const PositionedPopover: FunctionComponent<PropsWithChildren<PositionedPopoverProps>> = (props) => {\r\n    PositionedPopover.displayName = \"PositionedPopover\";\r\n    const [open, setOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setOpen(props.visible);\r\n    }, [props.visible, props.x, props.y]);\r\n\r\n    const handleOpenChange = (_: OpenPopoverEvents, data: OnOpenChangeData) => {\r\n        setOpen(data.open);\r\n\r\n        if (!data.open) {\r\n            props.hide();\r\n        }\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={handleOpenChange}\r\n            positioning={{\r\n                position: \"below\", // Places the popover directly below the trigger element\r\n                autoSize: \"height-always\", //Automatically adjusts the popover height to fit within the viewport\r\n                fallbackPositions: [\"above\", \"after\", \"before\"], //If the primary position doesn't fit, automatically tries these positions in order\r\n            }}\r\n            withArrow={false} // Removes arrow that points to trigger element\r\n        >\r\n            <PopoverTrigger>\r\n                {/* Use the invisible div as the trigger location*/}\r\n                <div\r\n                    style={{\r\n                        position: \"absolute\",\r\n                        left: `${props.x}px`,\r\n                        top: `${props.y}px`,\r\n                        visibility: \"hidden\",\r\n                    }}\r\n                />\r\n            </PopoverTrigger>\r\n            <PopoverSurface>{props.children}</PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/primitive.d.ts

@@ -1,4 +1,4 @@
-import type { InfoLabelParentProps } from "./infoLabel.js";
+import { type InfoLabelParentProps } from "./infoLabel.js";
 export type BasePrimitiveProps = {
     /**
      * Optional flag to disable the component, preventing any interaction.

package/fluent/primitives/primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/primitive.ts"],"names":[],"mappings":"","sourcesContent":["import type { InfoLabelParentProps } from \"./infoLabel\";\r\n\r\nexport type BasePrimitiveProps = {\r\n    /**\r\n     * Optional flag to disable the component, preventing any interaction.\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional class name to apply custom styles to the component.\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional style object to apply custom inline styles to the top-level HTML element.\r\n     */\r\n    style?: React.CSSProperties;\r\n    /**\r\n     * Optional title for the component, used for tooltips or accessibility.\r\n     */\r\n    title?: string;\r\n};\r\n\r\nexport type ImmutablePrimitiveProps<ValueT> = BasePrimitiveProps & {\r\n    /**\r\n     * The value of the property to be displayed and modified.\r\n     */\r\n    value: ValueT;\r\n\r\n    /**\r\n     * Optional information to display as an infoLabel popup aside the component.\r\n     */\r\n    infoLabel?: InfoLabelParentProps;\r\n};\r\n\r\nexport type PrimitiveProps<T> = ImmutablePrimitiveProps<T> & {\r\n    /**\r\n     * Called when the primitive value changes\r\n     */\r\n    onChange: (value: T) => void;\r\n};\r\n"]}
+{"version":3,"file":"primitive.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/primitive.ts"],"names":[],"mappings":"","sourcesContent":["import { type InfoLabelParentProps } from \"./infoLabel\";\r\n\r\nexport type BasePrimitiveProps = {\r\n    /**\r\n     * Optional flag to disable the component, preventing any interaction.\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional class name to apply custom styles to the component.\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional style object to apply custom inline styles to the top-level HTML element.\r\n     */\r\n    style?: React.CSSProperties;\r\n    /**\r\n     * Optional title for the component, used for tooltips or accessibility.\r\n     */\r\n    title?: string;\r\n};\r\n\r\nexport type ImmutablePrimitiveProps<ValueT> = BasePrimitiveProps & {\r\n    /**\r\n     * The value of the property to be displayed and modified.\r\n     */\r\n    value: ValueT;\r\n\r\n    /**\r\n     * Optional information to display as an infoLabel popup aside the component.\r\n     */\r\n    infoLabel?: InfoLabelParentProps;\r\n};\r\n\r\nexport type PrimitiveProps<T> = ImmutablePrimitiveProps<T> & {\r\n    /**\r\n     * Called when the primitive value changes\r\n     */\r\n    onChange: (value: T) => void;\r\n};\r\n"]}

package/fluent/primitives/searchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IAEpC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAgE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACtF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,cACF,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACxG,CACX,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { Field, SearchBox as FluentSearchBox, makeStyles } from \"@fluentui/react-components\";\r\nimport type { InputOnChangeData, SearchBoxChangeEvent } from \"@fluentui/react-components\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SearchProps = {\r\n    onChange: (val: string) => void;\r\n    placeholder?: string;\r\n};\r\nconst useStyles = makeStyles({\r\n    search: {\r\n        minWidth: \"50px\",\r\n    },\r\n});\r\n\r\nexport const SearchBar = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {\r\n    SearchBar.displayName = \"SearchBar\";\r\n\r\n    const classes = useStyles();\r\n    const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {\r\n        props.onChange(data.value);\r\n    };\r\n\r\n    return (\r\n        <Field>\r\n            <FluentSearchBox ref={ref} className={classes.search} placeholder={props.placeholder} onChange={onChange} />\r\n        </Field>\r\n    );\r\n});\r\n"]}
+{"version":3,"file":"searchBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAqD,MAAM,4BAA4B,CAAC;AAChJ,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IAEpC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAgE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACtF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,cACF,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACxG,CACX,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { Field, SearchBox as FluentSearchBox, makeStyles, type InputOnChangeData, type SearchBoxChangeEvent } from \"@fluentui/react-components\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SearchProps = {\r\n    onChange: (val: string) => void;\r\n    placeholder?: string;\r\n};\r\nconst useStyles = makeStyles({\r\n    search: {\r\n        minWidth: \"50px\",\r\n    },\r\n});\r\n\r\nexport const SearchBar = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {\r\n    SearchBar.displayName = \"SearchBar\";\r\n\r\n    const classes = useStyles();\r\n    const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {\r\n        props.onChange(data.value);\r\n    };\r\n\r\n    return (\r\n        <Field>\r\n            <FluentSearchBox ref={ref} className={classes.search} placeholder={props.placeholder} onChange={onChange} />\r\n        </Field>\r\n    );\r\n});\r\n"]}

package/fluent/primitives/searchBox.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import { type FunctionComponent } from "react";
 type SearchBoxProps = {
     items: string[];
     onItemSelected: (item: string) => void;

package/fluent/primitives/searchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { SearchBar } from \"./searchBar\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype SearchBoxProps = {\r\n    items: string[];\r\n    onItemSelected: (item: string) => void;\r\n    title?: string;\r\n};\r\n\r\nconst useSearchBoxStyles = makeStyles({\r\n    searchBox: {\r\n        width: \"300px\",\r\n        height: \"400px\",\r\n        backgroundColor: tokens.colorNeutralBackground1,\r\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke1}`,\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        boxShadow: tokens.shadow16,\r\n        display: \"grid\",\r\n        gridTemplateRows: \"auto auto 1fr\",\r\n        overflow: \"hidden\", // Prevent content overflow\r\n    },\r\n    title: {\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\r\n        margin: tokens.spacingVerticalXS,\r\n        paddingBottom: tokens.spacingVerticalXS,\r\n        color: tokens.colorNeutralForeground1,\r\n        gridRow: \"1\",\r\n        fontSize: tokens.fontSizeBase300,\r\n        fontWeight: tokens.fontWeightSemibold,\r\n    },\r\n    filterContainer: {\r\n        margin: tokens.spacingVerticalXS,\r\n        paddingBottom: tokens.spacingVerticalXS,\r\n        gridRow: \"2\",\r\n    },\r\n    list: {\r\n        gridRow: \"3\",\r\n        overflowY: \"auto\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        maxHeight: \"100%\",\r\n    },\r\n    listItem: {\r\n        marginLeft: tokens.spacingHorizontalXS,\r\n        marginRight: tokens.spacingHorizontalXS,\r\n        cursor: \"pointer\",\r\n        color: tokens.colorNeutralForeground1,\r\n        marginTop: tokens.spacingVerticalXXS,\r\n        marginBottom: tokens.spacingVerticalXXS,\r\n        padding: tokens.spacingVerticalXS,\r\n        borderRadius: tokens.borderRadiusSmall,\r\n\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        \":hover\": {\r\n            backgroundColor: tokens.colorNeutralBackground2Hover,\r\n        },\r\n    },\r\n    listItemSelected: {\r\n        backgroundColor: tokens.colorBrandBackground,\r\n        color: tokens.colorNeutralForegroundOnBrand,\r\n\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        \":hover\": {\r\n            backgroundColor: tokens.colorBrandBackgroundHover,\r\n        },\r\n    },\r\n});\r\n\r\n/**\r\n * SearchBox component that displays a popup with search functionality\r\n * @param props - The component props\r\n * @returns The search box component\r\n */\r\nexport const SearchBox: FunctionComponent<SearchBoxProps> = (props) => {\r\n    SearchBox.displayName = \"SearchBox\";\r\n\r\n    const classes = useSearchBoxStyles();\r\n    const [selectedIndex, setSelectedIndex] = useState(0);\r\n    const [items, setItems] = useState(props.items);\r\n    // In future could replace this with a fluent component like menuList or comboBox depending on desired UX\r\n    const onKeyDown = (evt: React.KeyboardEvent) => {\r\n        if (items.length === 0) {\r\n            return;\r\n        }\r\n        if (evt.code === \"Enter\") {\r\n            props.onItemSelected(items[selectedIndex]);\r\n            return;\r\n        }\r\n\r\n        if (evt.code === \"ArrowDown\") {\r\n            setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1));\r\n            return;\r\n        }\r\n\r\n        if (evt.code === \"ArrowUp\") {\r\n            setSelectedIndex((prev) => Math.max(prev - 1, 0));\r\n            return;\r\n        }\r\n    };\r\n\r\n    const onFilterChange = (filter: string) => {\r\n        const filteredItems = props.items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));\r\n        setItems(filteredItems);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setItems(props.items);\r\n    }, [props.items]);\r\n\r\n    return (\r\n        <div className={classes.searchBox} onKeyDown={onKeyDown}>\r\n            {props.title ? <div className={classes.title}>{props.title}</div> : null}\r\n            <div className={classes.filterContainer}>\r\n                <SearchBar onChange={onFilterChange} placeholder=\"Search...\" />\r\n            </div>\r\n            <div role=\"listbox\" className={classes.list}>\r\n                {items.map((item, index) => (\r\n                    <div\r\n                        role=\"option\"\r\n                        key={item}\r\n                        className={`${classes.listItem} ${index === selectedIndex ? classes.listItemSelected : \"\"}`}\r\n                        onClick={() => props.onItemSelected(item)}\r\n                    >\r\n                        {item}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"searchBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { SearchBar } from \"./searchBar\";\r\nimport { type FunctionComponent, useState, useEffect } from \"react\";\r\n\r\ntype SearchBoxProps = {\r\n    items: string[];\r\n    onItemSelected: (item: string) => void;\r\n    title?: string;\r\n};\r\n\r\nconst useSearchBoxStyles = makeStyles({\r\n    searchBox: {\r\n        width: \"300px\",\r\n        height: \"400px\",\r\n        backgroundColor: tokens.colorNeutralBackground1,\r\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke1}`,\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        boxShadow: tokens.shadow16,\r\n        display: \"grid\",\r\n        gridTemplateRows: \"auto auto 1fr\",\r\n        overflow: \"hidden\", // Prevent content overflow\r\n    },\r\n    title: {\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\r\n        margin: tokens.spacingVerticalXS,\r\n        paddingBottom: tokens.spacingVerticalXS,\r\n        color: tokens.colorNeutralForeground1,\r\n        gridRow: \"1\",\r\n        fontSize: tokens.fontSizeBase300,\r\n        fontWeight: tokens.fontWeightSemibold,\r\n    },\r\n    filterContainer: {\r\n        margin: tokens.spacingVerticalXS,\r\n        paddingBottom: tokens.spacingVerticalXS,\r\n        gridRow: \"2\",\r\n    },\r\n    list: {\r\n        gridRow: \"3\",\r\n        overflowY: \"auto\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        maxHeight: \"100%\",\r\n    },\r\n    listItem: {\r\n        marginLeft: tokens.spacingHorizontalXS,\r\n        marginRight: tokens.spacingHorizontalXS,\r\n        cursor: \"pointer\",\r\n        color: tokens.colorNeutralForeground1,\r\n        marginTop: tokens.spacingVerticalXXS,\r\n        marginBottom: tokens.spacingVerticalXXS,\r\n        padding: tokens.spacingVerticalXS,\r\n        borderRadius: tokens.borderRadiusSmall,\r\n\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        \":hover\": {\r\n            backgroundColor: tokens.colorNeutralBackground2Hover,\r\n        },\r\n    },\r\n    listItemSelected: {\r\n        backgroundColor: tokens.colorBrandBackground,\r\n        color: tokens.colorNeutralForegroundOnBrand,\r\n\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        \":hover\": {\r\n            backgroundColor: tokens.colorBrandBackgroundHover,\r\n        },\r\n    },\r\n});\r\n\r\n/**\r\n * SearchBox component that displays a popup with search functionality\r\n * @param props - The component props\r\n * @returns The search box component\r\n */\r\nexport const SearchBox: FunctionComponent<SearchBoxProps> = (props) => {\r\n    SearchBox.displayName = \"SearchBox\";\r\n\r\n    const classes = useSearchBoxStyles();\r\n    const [selectedIndex, setSelectedIndex] = useState(0);\r\n    const [items, setItems] = useState(props.items);\r\n    // In future could replace this with a fluent component like menuList or comboBox depending on desired UX\r\n    const onKeyDown = (evt: React.KeyboardEvent) => {\r\n        if (items.length === 0) {\r\n            return;\r\n        }\r\n        if (evt.code === \"Enter\") {\r\n            props.onItemSelected(items[selectedIndex]);\r\n            return;\r\n        }\r\n\r\n        if (evt.code === \"ArrowDown\") {\r\n            setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1));\r\n            return;\r\n        }\r\n\r\n        if (evt.code === \"ArrowUp\") {\r\n            setSelectedIndex((prev) => Math.max(prev - 1, 0));\r\n            return;\r\n        }\r\n    };\r\n\r\n    const onFilterChange = (filter: string) => {\r\n        const filteredItems = props.items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));\r\n        setItems(filteredItems);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setItems(props.items);\r\n    }, [props.items]);\r\n\r\n    return (\r\n        <div className={classes.searchBox} onKeyDown={onKeyDown}>\r\n            {props.title ? <div className={classes.title}>{props.title}</div> : null}\r\n            <div className={classes.filterContainer}>\r\n                <SearchBar onChange={onFilterChange} placeholder=\"Search...\" />\r\n            </div>\r\n            <div role=\"listbox\" className={classes.list}>\r\n                {items.map((item, index) => (\r\n                    <div\r\n                        role=\"option\"\r\n                        key={item}\r\n                        className={`${classes.listItem} ${index === selectedIndex ? classes.listItemSelected : \"\"}`}\r\n                        onClick={() => props.onItemSelected(item)}\r\n                    >\r\n                        {item}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/skeletonSelector.d.ts

@@ -1,9 +1,9 @@
-import type { FunctionComponent } from "react";
-import type { Scene } from "@babylonjs/core/scene.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { Skeleton } from "@babylonjs/core/Bones/skeleton.js";
-import type { PrimitiveProps } from "./primitive.js";
-import type { EntitySelectorProps } from "./entitySelector.js";
+import { type FunctionComponent } from "react";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Skeleton } from "@babylonjs/core/Bones/skeleton.js";
+import { type PrimitiveProps } from "./primitive.js";
+import { type EntitySelectorProps } from "./entitySelector.js";
 export type SkeletonSelectorProps = PrimitiveProps<Nullable<Skeleton>> & {
     /**
      * The scene to get skeletons from

package/fluent/primitives/skeletonSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/skeletonSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Skeleton } from \"core/Bones/skeleton\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type SkeletonSelectorProps = PrimitiveProps<Nullable<Skeleton>> & {\r\n    /**\r\n     * The scene to get skeletons from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which skeletons are shown\r\n     */\r\n    filter?: (skeleton: Skeleton) => boolean;\r\n} & Omit<EntitySelectorProps<Skeleton>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene skeletons.\r\n * @param props SkeletonSelectorProps\r\n * @returns SkeletonSelector component\r\n */\r\nexport const SkeletonSelector: FunctionComponent<SkeletonSelectorProps> = (props) => {\r\n    SkeletonSelector.displayName = \"SkeletonSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);\r\n    const getName = useCallback((skeleton: Skeleton) => skeleton.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getSkeletons} getName={getName} />;\r\n};\r\n"]}
+{"version":3,"file":"skeletonSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/skeletonSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,EAA4B,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAa5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import { type FunctionComponent, useCallback } from \"react\";\r\nimport { type Scene } from \"core/scene\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { type Skeleton } from \"core/Bones/skeleton\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { type EntitySelectorProps, EntitySelector } from \"./entitySelector\";\r\n\r\nexport type SkeletonSelectorProps = PrimitiveProps<Nullable<Skeleton>> & {\r\n    /**\r\n     * The scene to get skeletons from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which skeletons are shown\r\n     */\r\n    filter?: (skeleton: Skeleton) => boolean;\r\n} & Omit<EntitySelectorProps<Skeleton>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene skeletons.\r\n * @param props SkeletonSelectorProps\r\n * @returns SkeletonSelector component\r\n */\r\nexport const SkeletonSelector: FunctionComponent<SkeletonSelectorProps> = (props) => {\r\n    SkeletonSelector.displayName = \"SkeletonSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);\r\n    const getName = useCallback((skeleton: Skeleton) => skeleton.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getSkeletons} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/slider.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { PrimitiveProps } from "./primitive.js";
+import { type FunctionComponent } from "react";
+import { type PrimitiveProps } from "./primitive.js";
 export type SliderProps = PrimitiveProps<number> & {
     /** Minimum value for the slider */
     min?: number;

package/fluent/primitives/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/slider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiBvD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAS,SAAS,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,uFAAuF;IACjJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACnC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC5B,8CAA8C;YAC9C,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,kCAAkC;YAClC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,IAAI,KAAK,CAAC,mBAAmB,IAAI,aAAa,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC9F,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACxC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,kBAAkB,EAC5B,aAAa,EAAE,GAAG,EAAE;YAChB,uBAAuB,EAAE,CAAC;YAC1B,KAAK,CAAC,aAAa,EAAE,EAAE,CAAC;QAC5B,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;YACd,qBAAqB,EAAE,CAAC;YACxB,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;QAC1B,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { Slider as FluentSlider } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef, useContext } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type SliderProps = PrimitiveProps<number> & {\r\n    /** Minimum value for the slider */\r\n    min?: number;\r\n    /** Maximum value for the slider */\r\n    max?: number;\r\n    /** Step size for the slider */\r\n    step?: number;\r\n    /** When true, onChange is only called when the user releases the slider, not during drag */\r\n    notifyOnlyOnRelease?: boolean;\r\n    /** Optional pointer down handler */\r\n    onPointerDown?: () => void;\r\n    /** Optional pointer up handler */\r\n    onPointerUp?: () => void;\r\n};\r\n\r\n/**\r\n * A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.\r\n * Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.\r\n * @param props\r\n * @returns Slider component\r\n */\r\nexport const Slider: FunctionComponent<SliderProps> = (props) => {\r\n    Slider.displayName = \"Slider\";\r\n    const { size } = useContext(ToolContext);\r\n    const [value, setValue] = useState<number>(props.value ?? 0);\r\n    const pendingValueRef = useRef<number>(undefined);\r\n    const isDraggingRef = useRef(false);\r\n\r\n    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n    // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n    // The actual step size in the Fluent slider is 1 when it is set to undefined.\r\n    const min = props.min ?? 0;\r\n    const max = props.max ?? 100;\r\n    const step = props.step ?? 1;\r\n\r\n    useEffect(() => {\r\n        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const newValue = data.value * step;\r\n        setValue(newValue);\r\n\r\n        if (props.notifyOnlyOnRelease) {\r\n            // Store the value but don't notify parent yet\r\n            pendingValueRef.current = newValue;\r\n        } else {\r\n            // Notify parent as slider changes\r\n            props.onChange(newValue);\r\n        }\r\n    };\r\n\r\n    const handleSliderPointerDown = () => {\r\n        isDraggingRef.current = true;\r\n    };\r\n\r\n    const handleSliderPointerUp = () => {\r\n        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n            props.onChange(pendingValueRef.current);\r\n            pendingValueRef.current = undefined;\r\n        }\r\n        isDraggingRef.current = false;\r\n    };\r\n\r\n    return (\r\n        <FluentSlider\r\n            className={props.className}\r\n            size={size}\r\n            min={min / step}\r\n            max={max / step}\r\n            step={undefined}\r\n            value={value / step}\r\n            disabled={props.disabled}\r\n            onChange={handleSliderChange}\r\n            onPointerDown={() => {\r\n                handleSliderPointerDown();\r\n                props.onPointerDown?.();\r\n            }}\r\n            onPointerUp={() => {\r\n                handleSliderPointerUp();\r\n                props.onPointerUp?.();\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAA4C,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1G,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiBvD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAS,SAAS,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,uFAAuF;IACjJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACnC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC5B,8CAA8C;YAC9C,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,kCAAkC;YAClC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,IAAI,KAAK,CAAC,mBAAmB,IAAI,aAAa,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC9F,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACxC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,kBAAkB,EAC5B,aAAa,EAAE,GAAG,EAAE;YAChB,uBAAuB,EAAE,CAAC;YAC1B,KAAK,CAAC,aAAa,EAAE,EAAE,CAAC;QAC5B,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;YACd,qBAAqB,EAAE,CAAC;YACxB,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;QAC1B,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type SliderOnChangeData, Slider as FluentSlider } from \"@fluentui/react-components\";\r\nimport { type ChangeEvent, type FunctionComponent, useEffect, useState, useRef, useContext } from \"react\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type SliderProps = PrimitiveProps<number> & {\r\n    /** Minimum value for the slider */\r\n    min?: number;\r\n    /** Maximum value for the slider */\r\n    max?: number;\r\n    /** Step size for the slider */\r\n    step?: number;\r\n    /** When true, onChange is only called when the user releases the slider, not during drag */\r\n    notifyOnlyOnRelease?: boolean;\r\n    /** Optional pointer down handler */\r\n    onPointerDown?: () => void;\r\n    /** Optional pointer up handler */\r\n    onPointerUp?: () => void;\r\n};\r\n\r\n/**\r\n * A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.\r\n * Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.\r\n * @param props\r\n * @returns Slider component\r\n */\r\nexport const Slider: FunctionComponent<SliderProps> = (props) => {\r\n    Slider.displayName = \"Slider\";\r\n    const { size } = useContext(ToolContext);\r\n    const [value, setValue] = useState<number>(props.value ?? 0);\r\n    const pendingValueRef = useRef<number>(undefined);\r\n    const isDraggingRef = useRef(false);\r\n\r\n    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n    // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n    // The actual step size in the Fluent slider is 1 when it is set to undefined.\r\n    const min = props.min ?? 0;\r\n    const max = props.max ?? 100;\r\n    const step = props.step ?? 1;\r\n\r\n    useEffect(() => {\r\n        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const newValue = data.value * step;\r\n        setValue(newValue);\r\n\r\n        if (props.notifyOnlyOnRelease) {\r\n            // Store the value but don't notify parent yet\r\n            pendingValueRef.current = newValue;\r\n        } else {\r\n            // Notify parent as slider changes\r\n            props.onChange(newValue);\r\n        }\r\n    };\r\n\r\n    const handleSliderPointerDown = () => {\r\n        isDraggingRef.current = true;\r\n    };\r\n\r\n    const handleSliderPointerUp = () => {\r\n        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n            props.onChange(pendingValueRef.current);\r\n            pendingValueRef.current = undefined;\r\n        }\r\n        isDraggingRef.current = false;\r\n    };\r\n\r\n    return (\r\n        <FluentSlider\r\n            className={props.className}\r\n            size={size}\r\n            min={min / step}\r\n            max={max / step}\r\n            step={undefined}\r\n            value={value / step}\r\n            disabled={props.disabled}\r\n            onChange={handleSliderChange}\r\n            onPointerDown={() => {\r\n                handleSliderPointerDown();\r\n                props.onPointerDown?.();\r\n            }}\r\n            onPointerUp={() => {\r\n                handleSliderPointerUp();\r\n                props.onPointerUp?.();\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/spinButton.d.ts

@@ -1,4 +1,4 @@
-import type { PrimitiveProps } from "./primitive.js";
+import { type PrimitiveProps } from "./primitive.js";
 export type SpinButtonProps = PrimitiveProps<number> & {
     min?: number;
     max?: number;

package/fluent/primitives/spinButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Input, makeStyles, mergeClasses, tokens, useId, useMergedRefs } from "@fluentui/react-components";
 import { ArrowBidirectionalUpDownFilled } from "@fluentui/react-icons";
 import { Clamp } from "@babylonjs/core/Maths/math.scalar.functions.js";
-import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
 import { useKeyState } from "../hooks/keyboardHooks.js";
 import { InfoLabel } from "./infoLabel.js";

package/fluent/primitives/spinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, FocusEvent, KeyboardEvent, PointerEvent } from \"react\";\r\n\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { Input, makeStyles, mergeClasses, tokens, useId, useMergedRefs } from \"@fluentui/react-components\";\r\nimport { ArrowBidirectionalUpDownFilled } from \"@fluentui/react-icons\";\r\n\r\nimport { Clamp } from \"core/Maths/math.scalar.functions\";\r\nimport { forwardRef, useCallback, useContext, useEffect, useRef, useState } from \"react\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { CalculatePrecision, HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\n\r\nfunction CoerceStepValue(step: number, isFineKeyPressed: boolean, isCourseKeyPressed: boolean): number {\r\n    // When the fine key is pressed, decrease step by a factor of 10.\r\n    if (isFineKeyPressed) {\r\n        return step * 0.1;\r\n    }\r\n\r\n    // When the course key is pressed, increase step by a factor of 10.\r\n    if (isCourseKeyPressed) {\r\n        return step * 10;\r\n    }\r\n\r\n    return step;\r\n}\r\n\r\n// Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).\r\n// Use Function constructor to safely evaluate the expression without allowing access to scope.\r\n// If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.\r\nfunction EvaluateExpression(rawValue: string): number {\r\n    const val = rawValue.trim();\r\n    try {\r\n        return Number(Function(`\"use strict\";return (${val})`)());\r\n    } catch {\r\n        return NaN;\r\n    }\r\n}\r\n\r\nexport type SpinButtonProps = PrimitiveProps<number> & {\r\n    min?: number;\r\n    max?: number;\r\n    /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value)\r\n     * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. */\r\n    step?: number;\r\n    unit?: string;\r\n    forceInt?: boolean;\r\n    validator?: (value: number) => boolean;\r\n    /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */\r\n    precision?: number;\r\n    /** Optional className for the input element */\r\n    inputClassName?: string;\r\n    /** When true, hides the drag-to-scrub button */\r\n    disableDragButton?: boolean;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n    icon: {\r\n        \"&:hover\": {\r\n            color: tokens.colorBrandForeground1,\r\n        },\r\n    },\r\n});\r\n\r\n/**\r\n * A numeric input with a vertical drag-to-scrub icon (ArrowsBidirectionalRegular rotated 90°).\r\n * Click-and-drag up/down on the icon to increment/decrement the value.\r\n */\r\nexport const SpinButton = forwardRef<HTMLInputElement, SpinButtonProps>((props, ref) => {\r\n    SpinButton.displayName = \"SpinButton2\";\r\n    const inputClasses = useInputStyles();\r\n    const classes = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    const { min, max } = props;\r\n    const baseStep = props.step ?? 1;\r\n\r\n    // Local ref for the input element so we can blur it programmatically (e.g. when a drag starts while editing).\r\n    const inputRef = useRef<HTMLInputElement | null>(null);\r\n    const mergedRef = useMergedRefs(ref, inputRef);\r\n\r\n    // Modifier keys for step coercion.\r\n    const isAltKeyPressed = useKeyState(\"Alt\", { preventDefault: true });\r\n    const isShiftKeyPressed = useKeyState(\"Shift\");\r\n\r\n    const step = CoerceStepValue(baseStep, isAltKeyPressed, isShiftKeyPressed);\r\n    const stepPrecision = Math.max(0, CalculatePrecision(step));\r\n\r\n    const [value, setValue] = useState<number>(props.value ?? 0);\r\n    const lastCommittedValue = useRef(props.value);\r\n    const [isDragging, setIsDragging] = useState(false);\r\n    const scrubStartYRef = useRef(0);\r\n    const scrubStartValueRef = useRef(0);\r\n    const lastPointerYRef = useRef(0);\r\n    const [isHovered, setIsHovered] = useState(false);\r\n\r\n    // Editing state: when the user is typing, we show their raw text rather than the formatted value.\r\n    const [isEditing, setIsEditing] = useState(false);\r\n    const [editText, setEditText] = useState(\"\");\r\n\r\n    const valuePrecision = Math.max(0, CalculatePrecision(value));\r\n    // Display precision: controls how many decimals are shown in the formatted displayValue. Cap at 4 to avoid wild numbers.\r\n    // If a fixed precision prop is provided, use it instead.\r\n    const displayPrecision = props.precision ?? Math.min(4, Math.max(stepPrecision, valuePrecision));\r\n\r\n    // Format a number for display: toFixed, then trim trailing zeros and period unless a fixed precision is specified.\r\n    const formatValue = useCallback(\r\n        (v: number) => {\r\n            const fixed = v.toFixed(displayPrecision);\r\n            if (props.precision !== undefined) {\r\n                return fixed;\r\n            }\r\n            return fixed.replace(/(\\.\\d*?)0+$/, \"$1\").replace(/\\.$/, \"\");\r\n        },\r\n        [displayPrecision, props.precision]\r\n    );\r\n\r\n    useEffect(() => {\r\n        if (!isDragging && props.value !== lastCommittedValue.current) {\r\n            lastCommittedValue.current = props.value;\r\n            setValue(props.value ?? 0);\r\n        }\r\n    }, [props.value, isDragging]);\r\n\r\n    const validateValue = useCallback(\r\n        (numericValue: number): boolean => {\r\n            const outOfBounds = (min !== undefined && numericValue < min) || (max !== undefined && numericValue > max);\r\n            const failsValidator = props.validator && !props.validator(numericValue);\r\n            const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;\r\n            const invalid = !!outOfBounds || !!failsValidator || isNaN(numericValue) || !!failsIntCheck;\r\n            return !invalid;\r\n        },\r\n        [min, max, props.validator, props.forceInt]\r\n    );\r\n\r\n    // Constrain a value to the valid range by clamping to [min, max].\r\n    const constrainValue = useCallback((v: number) => Clamp(v, min ?? -Infinity, max ?? Infinity), [min, max]);\r\n\r\n    const tryCommitValue = useCallback(\r\n        (currVal: number) => {\r\n            if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n                lastCommittedValue.current = currVal;\r\n                props.onChange(currVal);\r\n            }\r\n        },\r\n        [validateValue, props.onChange]\r\n    );\r\n\r\n    const handleInputChange = useCallback((_: ChangeEvent, data: { value: string }) => {\r\n        // Just update the raw text — no evaluation or commit until Enter/blur.\r\n        setEditText(data.value);\r\n    }, []);\r\n\r\n    // Evaluate the current edit text and commit the value. Returns the clamped value if valid, or undefined.\r\n    const commitEditText = useCallback(\r\n        (text: string): number | undefined => {\r\n            const numericValue = EvaluateExpression(text);\r\n            if (!isNaN(numericValue) && validateValue(numericValue)) {\r\n                const constrained = constrainValue(numericValue);\r\n                setValue(constrained);\r\n                tryCommitValue(constrained);\r\n                return constrained;\r\n            }\r\n            return undefined;\r\n        },\r\n        [validateValue, constrainValue, tryCommitValue]\r\n    );\r\n\r\n    const handleIconPointerDown = useCallback(\r\n        (e: PointerEvent<Element>) => {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            // If the input was being edited, commit the current text and blur the input\r\n            // so the focus state stays consistent after the drag ends.\r\n            let startValue = value;\r\n            if (isEditing) {\r\n                const committed = commitEditText(editText);\r\n                if (committed !== undefined) {\r\n                    startValue = committed;\r\n                }\r\n                setIsEditing(false);\r\n            }\r\n            // Blur the active element to ensure we can observe document level modifier keys.\r\n            (inputRef.current?.ownerDocument.activeElement as Partial<HTMLElement>)?.blur?.();\r\n            setIsDragging(true);\r\n            scrubStartYRef.current = e.clientY;\r\n            scrubStartValueRef.current = startValue;\r\n            e.currentTarget.setPointerCapture(e.pointerId);\r\n        },\r\n        [value, isEditing, editText, commitEditText]\r\n    );\r\n\r\n    // When the step size changes during a drag (e.g. Shift/Alt pressed or released), reset the scrub reference point\r\n    // to the current value and pointer position so only future movement uses the new step.\r\n    useEffect(() => {\r\n        if (isDragging) {\r\n            scrubStartValueRef.current = value;\r\n            scrubStartYRef.current = lastPointerYRef.current;\r\n        }\r\n    }, [step]);\r\n\r\n    const handleIconPointerMove = useCallback(\r\n        (e: PointerEvent) => {\r\n            if (!isDragging) {\r\n                return;\r\n            }\r\n            lastPointerYRef.current = e.clientY;\r\n            // Dragging up (negative dy) should increment, dragging down should decrement.\r\n            // Scale delta by step but round to display precision (not step) for smooth fine-grained control.\r\n            const dy = scrubStartYRef.current - e.clientY;\r\n            // 5 is just a number that \"feels right\" for the drag sensitivity — it determines how far the user needs to drag to change the value by 1 step.\r\n            const delta = (dy * step) / 5;\r\n            const raw = scrubStartValueRef.current + delta;\r\n            const precisionFactor = Math.pow(10, displayPrecision);\r\n            const rounded = Math.round(raw * precisionFactor) / precisionFactor;\r\n            const constrained = constrainValue(rounded);\r\n            setValue(constrained);\r\n            tryCommitValue(constrained);\r\n        },\r\n        [isDragging, step, displayPrecision, constrainValue, tryCommitValue]\r\n    );\r\n\r\n    const handleIconPointerUp = useCallback((e: PointerEvent<Element>) => {\r\n        setIsDragging(false);\r\n        e.currentTarget.releasePointerCapture(e.pointerId);\r\n    }, []);\r\n\r\n    const handleKeyDown = useCallback(\r\n        (event: KeyboardEvent<HTMLInputElement>) => {\r\n            // Commit on Enter and blur the input if the value is valid.\r\n            if (event.key === \"Enter\") {\r\n                const committed = commitEditText(event.currentTarget.value);\r\n                if (committed !== undefined) {\r\n                    inputRef.current?.blur();\r\n                }\r\n            }\r\n\r\n            if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\r\n                event.preventDefault();\r\n                const direction = event.key === \"ArrowUp\" ? 1 : -1;\r\n                const newValue = constrainValue(Math.round((value + direction * step) / step) * step);\r\n                setValue(newValue);\r\n                tryCommitValue(newValue);\r\n                // Update edit text to reflect the new value so the user sees the change\r\n                setEditText(formatValue(newValue));\r\n            }\r\n\r\n            HandleKeyDown(event);\r\n        },\r\n        [value, step, constrainValue, tryCommitValue, commitEditText, formatValue]\r\n    );\r\n\r\n    const id = useId(\"spin-button2\");\r\n\r\n    // Real-time validation: when editing, validate the expression; otherwise validate the committed value.\r\n    // (validateValue already handles NaN, so no separate isNaN check needed.)\r\n    const isInputInvalid = !validateValue(isEditing ? EvaluateExpression(editText) : value);\r\n\r\n    const mergedClassName = mergeClasses(inputClasses.inputFill, isInputInvalid ? inputClasses.invalid : \"\");\r\n    const inputSlotClassName = mergeClasses(inputClasses.inputSlot, props.inputClassName);\r\n\r\n    const formattedValue = formatValue(value);\r\n\r\n    const handleFocus = useCallback(() => {\r\n        setIsEditing(true);\r\n        setEditText(formattedValue);\r\n    }, [formattedValue]);\r\n\r\n    const handleBlur = useCallback(\r\n        (event: FocusEvent<HTMLInputElement>) => {\r\n            // Skip blur handling if a drag just started (icon pointerDown already committed).\r\n            if (isDragging) {\r\n                return;\r\n            }\r\n            commitEditText(event.target.value);\r\n            setIsEditing(false);\r\n            HandleOnBlur(event);\r\n        },\r\n        [commitEditText, isDragging]\r\n    );\r\n\r\n    const contentBefore =\r\n        !props.disableDragButton && !props.disabled && (isHovered || isDragging) && !isInputInvalid ? (\r\n            <ArrowBidirectionalUpDownFilled\r\n                className={classes.icon}\r\n                style={{ cursor: isDragging ? \"ns-resize\" : \"pointer\" }}\r\n                onPointerDown={handleIconPointerDown}\r\n                onPointerMove={handleIconPointerMove}\r\n                onPointerUp={handleIconPointerUp}\r\n            />\r\n        ) : undefined;\r\n\r\n    const input = (\r\n        <div\r\n            className={props.infoLabel ? undefined : props.className}\r\n            onPointerEnter={(e) => e.pointerType === \"mouse\" && setIsHovered(true)}\r\n            onPointerLeave={() => {\r\n                if (!isDragging) {\r\n                    setIsHovered(false);\r\n                }\r\n            }}\r\n        >\r\n            <Input\r\n                ref={mergedRef}\r\n                id={id}\r\n                appearance=\"outline\"\r\n                size={size}\r\n                className={mergedClassName}\r\n                input={{ className: inputSlotClassName }}\r\n                value={isEditing ? editText : formattedValue}\r\n                disabled={props.disabled}\r\n                onChange={handleInputChange}\r\n                onFocus={handleFocus}\r\n                onKeyDown={handleKeyDown}\r\n                onBlur={handleBlur}\r\n                contentBefore={contentBefore}\r\n                contentAfter={props.unit}\r\n            />\r\n        </div>\r\n    );\r\n\r\n    return props.infoLabel ? (\r\n        <div className={mergeClasses(inputClasses.container, props.className)}>\r\n            <InfoLabel {...props.infoLabel} htmlFor={id} />\r\n            {input}\r\n        </div>\r\n    ) : (\r\n        input\r\n    );\r\n});\r\n"]}
+{"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type ChangeEvent, type FocusEvent, type KeyboardEvent, type PointerEvent, forwardRef, useCallback, useContext, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { type PrimitiveProps } from \"./primitive\";\r\n\r\nimport { Input, makeStyles, mergeClasses, tokens, useId, useMergedRefs } from \"@fluentui/react-components\";\r\nimport { ArrowBidirectionalUpDownFilled } from \"@fluentui/react-icons\";\r\n\r\nimport { Clamp } from \"core/Maths/math.scalar.functions\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { CalculatePrecision, HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\n\r\nfunction CoerceStepValue(step: number, isFineKeyPressed: boolean, isCourseKeyPressed: boolean): number {\r\n    // When the fine key is pressed, decrease step by a factor of 10.\r\n    if (isFineKeyPressed) {\r\n        return step * 0.1;\r\n    }\r\n\r\n    // When the course key is pressed, increase step by a factor of 10.\r\n    if (isCourseKeyPressed) {\r\n        return step * 10;\r\n    }\r\n\r\n    return step;\r\n}\r\n\r\n// Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).\r\n// Use Function constructor to safely evaluate the expression without allowing access to scope.\r\n// If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.\r\nfunction EvaluateExpression(rawValue: string): number {\r\n    const val = rawValue.trim();\r\n    try {\r\n        return Number(Function(`\"use strict\";return (${val})`)());\r\n    } catch {\r\n        return NaN;\r\n    }\r\n}\r\n\r\nexport type SpinButtonProps = PrimitiveProps<number> & {\r\n    min?: number;\r\n    max?: number;\r\n    /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value)\r\n     * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. */\r\n    step?: number;\r\n    unit?: string;\r\n    forceInt?: boolean;\r\n    validator?: (value: number) => boolean;\r\n    /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */\r\n    precision?: number;\r\n    /** Optional className for the input element */\r\n    inputClassName?: string;\r\n    /** When true, hides the drag-to-scrub button */\r\n    disableDragButton?: boolean;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n    icon: {\r\n        \"&:hover\": {\r\n            color: tokens.colorBrandForeground1,\r\n        },\r\n    },\r\n});\r\n\r\n/**\r\n * A numeric input with a vertical drag-to-scrub icon (ArrowsBidirectionalRegular rotated 90°).\r\n * Click-and-drag up/down on the icon to increment/decrement the value.\r\n */\r\nexport const SpinButton = forwardRef<HTMLInputElement, SpinButtonProps>((props, ref) => {\r\n    SpinButton.displayName = \"SpinButton2\";\r\n    const inputClasses = useInputStyles();\r\n    const classes = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    const { min, max } = props;\r\n    const baseStep = props.step ?? 1;\r\n\r\n    // Local ref for the input element so we can blur it programmatically (e.g. when a drag starts while editing).\r\n    const inputRef = useRef<HTMLInputElement | null>(null);\r\n    const mergedRef = useMergedRefs(ref, inputRef);\r\n\r\n    // Modifier keys for step coercion.\r\n    const isAltKeyPressed = useKeyState(\"Alt\", { preventDefault: true });\r\n    const isShiftKeyPressed = useKeyState(\"Shift\");\r\n\r\n    const step = CoerceStepValue(baseStep, isAltKeyPressed, isShiftKeyPressed);\r\n    const stepPrecision = Math.max(0, CalculatePrecision(step));\r\n\r\n    const [value, setValue] = useState<number>(props.value ?? 0);\r\n    const lastCommittedValue = useRef(props.value);\r\n    const [isDragging, setIsDragging] = useState(false);\r\n    const scrubStartYRef = useRef(0);\r\n    const scrubStartValueRef = useRef(0);\r\n    const lastPointerYRef = useRef(0);\r\n    const [isHovered, setIsHovered] = useState(false);\r\n\r\n    // Editing state: when the user is typing, we show their raw text rather than the formatted value.\r\n    const [isEditing, setIsEditing] = useState(false);\r\n    const [editText, setEditText] = useState(\"\");\r\n\r\n    const valuePrecision = Math.max(0, CalculatePrecision(value));\r\n    // Display precision: controls how many decimals are shown in the formatted displayValue. Cap at 4 to avoid wild numbers.\r\n    // If a fixed precision prop is provided, use it instead.\r\n    const displayPrecision = props.precision ?? Math.min(4, Math.max(stepPrecision, valuePrecision));\r\n\r\n    // Format a number for display: toFixed, then trim trailing zeros and period unless a fixed precision is specified.\r\n    const formatValue = useCallback(\r\n        (v: number) => {\r\n            const fixed = v.toFixed(displayPrecision);\r\n            if (props.precision !== undefined) {\r\n                return fixed;\r\n            }\r\n            return fixed.replace(/(\\.\\d*?)0+$/, \"$1\").replace(/\\.$/, \"\");\r\n        },\r\n        [displayPrecision, props.precision]\r\n    );\r\n\r\n    useEffect(() => {\r\n        if (!isDragging && props.value !== lastCommittedValue.current) {\r\n            lastCommittedValue.current = props.value;\r\n            setValue(props.value ?? 0);\r\n        }\r\n    }, [props.value, isDragging]);\r\n\r\n    const validateValue = useCallback(\r\n        (numericValue: number): boolean => {\r\n            const outOfBounds = (min !== undefined && numericValue < min) || (max !== undefined && numericValue > max);\r\n            const failsValidator = props.validator && !props.validator(numericValue);\r\n            const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;\r\n            const invalid = !!outOfBounds || !!failsValidator || isNaN(numericValue) || !!failsIntCheck;\r\n            return !invalid;\r\n        },\r\n        [min, max, props.validator, props.forceInt]\r\n    );\r\n\r\n    // Constrain a value to the valid range by clamping to [min, max].\r\n    const constrainValue = useCallback((v: number) => Clamp(v, min ?? -Infinity, max ?? Infinity), [min, max]);\r\n\r\n    const tryCommitValue = useCallback(\r\n        (currVal: number) => {\r\n            if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n                lastCommittedValue.current = currVal;\r\n                props.onChange(currVal);\r\n            }\r\n        },\r\n        [validateValue, props.onChange]\r\n    );\r\n\r\n    const handleInputChange = useCallback((_: ChangeEvent, data: { value: string }) => {\r\n        // Just update the raw text — no evaluation or commit until Enter/blur.\r\n        setEditText(data.value);\r\n    }, []);\r\n\r\n    // Evaluate the current edit text and commit the value. Returns the clamped value if valid, or undefined.\r\n    const commitEditText = useCallback(\r\n        (text: string): number | undefined => {\r\n            const numericValue = EvaluateExpression(text);\r\n            if (!isNaN(numericValue) && validateValue(numericValue)) {\r\n                const constrained = constrainValue(numericValue);\r\n                setValue(constrained);\r\n                tryCommitValue(constrained);\r\n                return constrained;\r\n            }\r\n            return undefined;\r\n        },\r\n        [validateValue, constrainValue, tryCommitValue]\r\n    );\r\n\r\n    const handleIconPointerDown = useCallback(\r\n        (e: PointerEvent<Element>) => {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            // If the input was being edited, commit the current text and blur the input\r\n            // so the focus state stays consistent after the drag ends.\r\n            let startValue = value;\r\n            if (isEditing) {\r\n                const committed = commitEditText(editText);\r\n                if (committed !== undefined) {\r\n                    startValue = committed;\r\n                }\r\n                setIsEditing(false);\r\n            }\r\n            // Blur the active element to ensure we can observe document level modifier keys.\r\n            (inputRef.current?.ownerDocument.activeElement as Partial<HTMLElement>)?.blur?.();\r\n            setIsDragging(true);\r\n            scrubStartYRef.current = e.clientY;\r\n            scrubStartValueRef.current = startValue;\r\n            e.currentTarget.setPointerCapture(e.pointerId);\r\n        },\r\n        [value, isEditing, editText, commitEditText]\r\n    );\r\n\r\n    // When the step size changes during a drag (e.g. Shift/Alt pressed or released), reset the scrub reference point\r\n    // to the current value and pointer position so only future movement uses the new step.\r\n    useEffect(() => {\r\n        if (isDragging) {\r\n            scrubStartValueRef.current = value;\r\n            scrubStartYRef.current = lastPointerYRef.current;\r\n        }\r\n    }, [step]);\r\n\r\n    const handleIconPointerMove = useCallback(\r\n        (e: PointerEvent) => {\r\n            if (!isDragging) {\r\n                return;\r\n            }\r\n            lastPointerYRef.current = e.clientY;\r\n            // Dragging up (negative dy) should increment, dragging down should decrement.\r\n            // Scale delta by step but round to display precision (not step) for smooth fine-grained control.\r\n            const dy = scrubStartYRef.current - e.clientY;\r\n            // 5 is just a number that \"feels right\" for the drag sensitivity — it determines how far the user needs to drag to change the value by 1 step.\r\n            const delta = (dy * step) / 5;\r\n            const raw = scrubStartValueRef.current + delta;\r\n            const precisionFactor = Math.pow(10, displayPrecision);\r\n            const rounded = Math.round(raw * precisionFactor) / precisionFactor;\r\n            const constrained = constrainValue(rounded);\r\n            setValue(constrained);\r\n            tryCommitValue(constrained);\r\n        },\r\n        [isDragging, step, displayPrecision, constrainValue, tryCommitValue]\r\n    );\r\n\r\n    const handleIconPointerUp = useCallback((e: PointerEvent<Element>) => {\r\n        setIsDragging(false);\r\n        e.currentTarget.releasePointerCapture(e.pointerId);\r\n    }, []);\r\n\r\n    const handleKeyDown = useCallback(\r\n        (event: KeyboardEvent<HTMLInputElement>) => {\r\n            // Commit on Enter and blur the input if the value is valid.\r\n            if (event.key === \"Enter\") {\r\n                const committed = commitEditText(event.currentTarget.value);\r\n                if (committed !== undefined) {\r\n                    inputRef.current?.blur();\r\n                }\r\n            }\r\n\r\n            if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\r\n                event.preventDefault();\r\n                const direction = event.key === \"ArrowUp\" ? 1 : -1;\r\n                const newValue = constrainValue(Math.round((value + direction * step) / step) * step);\r\n                setValue(newValue);\r\n                tryCommitValue(newValue);\r\n                // Update edit text to reflect the new value so the user sees the change\r\n                setEditText(formatValue(newValue));\r\n            }\r\n\r\n            HandleKeyDown(event);\r\n        },\r\n        [value, step, constrainValue, tryCommitValue, commitEditText, formatValue]\r\n    );\r\n\r\n    const id = useId(\"spin-button2\");\r\n\r\n    // Real-time validation: when editing, validate the expression; otherwise validate the committed value.\r\n    // (validateValue already handles NaN, so no separate isNaN check needed.)\r\n    const isInputInvalid = !validateValue(isEditing ? EvaluateExpression(editText) : value);\r\n\r\n    const mergedClassName = mergeClasses(inputClasses.inputFill, isInputInvalid ? inputClasses.invalid : \"\");\r\n    const inputSlotClassName = mergeClasses(inputClasses.inputSlot, props.inputClassName);\r\n\r\n    const formattedValue = formatValue(value);\r\n\r\n    const handleFocus = useCallback(() => {\r\n        setIsEditing(true);\r\n        setEditText(formattedValue);\r\n    }, [formattedValue]);\r\n\r\n    const handleBlur = useCallback(\r\n        (event: FocusEvent<HTMLInputElement>) => {\r\n            // Skip blur handling if a drag just started (icon pointerDown already committed).\r\n            if (isDragging) {\r\n                return;\r\n            }\r\n            commitEditText(event.target.value);\r\n            setIsEditing(false);\r\n            HandleOnBlur(event);\r\n        },\r\n        [commitEditText, isDragging]\r\n    );\r\n\r\n    const contentBefore =\r\n        !props.disableDragButton && !props.disabled && (isHovered || isDragging) && !isInputInvalid ? (\r\n            <ArrowBidirectionalUpDownFilled\r\n                className={classes.icon}\r\n                style={{ cursor: isDragging ? \"ns-resize\" : \"pointer\" }}\r\n                onPointerDown={handleIconPointerDown}\r\n                onPointerMove={handleIconPointerMove}\r\n                onPointerUp={handleIconPointerUp}\r\n            />\r\n        ) : undefined;\r\n\r\n    const input = (\r\n        <div\r\n            className={props.infoLabel ? undefined : props.className}\r\n            onPointerEnter={(e) => e.pointerType === \"mouse\" && setIsHovered(true)}\r\n            onPointerLeave={() => {\r\n                if (!isDragging) {\r\n                    setIsHovered(false);\r\n                }\r\n            }}\r\n        >\r\n            <Input\r\n                ref={mergedRef}\r\n                id={id}\r\n                appearance=\"outline\"\r\n                size={size}\r\n                className={mergedClassName}\r\n                input={{ className: inputSlotClassName }}\r\n                value={isEditing ? editText : formattedValue}\r\n                disabled={props.disabled}\r\n                onChange={handleInputChange}\r\n                onFocus={handleFocus}\r\n                onKeyDown={handleKeyDown}\r\n                onBlur={handleBlur}\r\n                contentBefore={contentBefore}\r\n                contentAfter={props.unit}\r\n            />\r\n        </div>\r\n    );\r\n\r\n    return props.infoLabel ? (\r\n        <div className={mergeClasses(inputClasses.container, props.className)}>\r\n            <InfoLabel {...props.infoLabel} htmlFor={id} />\r\n            {input}\r\n        </div>\r\n    ) : (\r\n        input\r\n    );\r\n});\r\n"]}

package/fluent/primitives/switch.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { PrimitiveProps } from "./primitive.js";
+import { type FunctionComponent } from "react";
+import { type PrimitiveProps } from "./primitive.js";
 export type SwitchProps = PrimitiveProps<boolean>;
 /**
  * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools

package/fluent/primitives/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,WAAW,EAAE;QACT,SAAS,EAAE,YAAY,EAAE,kDAAkD;QAC3E,eAAe,EAAE,OAAO;KAC3B;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,EAChF,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch, mergeClasses } from \"@fluentui/react-components\";\r\nimport { useContext, useEffect, useState } from \"react\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\r\n    },\r\n    switchSmall: {\r\n        transform: `scale(.85)`, // workaround since we cannot resize fluent switch\r\n        transformOrigin: \"right\",\r\n    },\r\n    indicator: {\r\n        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n    },\r\n});\r\n\r\nexport type SwitchProps = PrimitiveProps<boolean>;\r\n\r\n/**\r\n * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n    Switch.displayName = \"Switch\";\r\n    const { size } = useContext(ToolContext);\r\n    const classes = useSwitchStyles();\r\n    const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.value != undefined) {\r\n            setChecked(props.value); // Update local state when props.checked changes\r\n        }\r\n    }, [props.value]);\r\n\r\n    const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n        props.onChange && props.onChange(event.target.checked);\r\n        setChecked(event.target.checked);\r\n    };\r\n\r\n    return (\r\n        <FluentSwitch\r\n            className={mergeClasses(classes.switch, size === \"small\" && classes.switchSmall)}\r\n            indicator={{ className: classes.indicator }}\r\n            checked={checked}\r\n            disabled={props.disabled}\r\n            onChange={onChange}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACvH,OAAO,EAA4C,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,WAAW,EAAE;QACT,SAAS,EAAE,YAAY,EAAE,kDAAkD;QAC3E,eAAe,EAAE,OAAO;KAC3B;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,EAChF,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type SwitchOnChangeData, makeStyles, Switch as FluentSwitch, mergeClasses } from \"@fluentui/react-components\";\r\nimport { type ChangeEvent, type FunctionComponent, useContext, useEffect, useState } from \"react\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\n\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\r\n    },\r\n    switchSmall: {\r\n        transform: `scale(.85)`, // workaround since we cannot resize fluent switch\r\n        transformOrigin: \"right\",\r\n    },\r\n    indicator: {\r\n        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n    },\r\n});\r\n\r\nexport type SwitchProps = PrimitiveProps<boolean>;\r\n\r\n/**\r\n * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n    Switch.displayName = \"Switch\";\r\n    const { size } = useContext(ToolContext);\r\n    const classes = useSwitchStyles();\r\n    const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.value != undefined) {\r\n            setChecked(props.value); // Update local state when props.checked changes\r\n        }\r\n    }, [props.value]);\r\n\r\n    const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n        props.onChange && props.onChange(event.target.checked);\r\n        setChecked(event.target.checked);\r\n    };\r\n\r\n    return (\r\n        <FluentSwitch\r\n            className={mergeClasses(classes.switch, size === \"small\" && classes.switchSmall)}\r\n            indicator={{ className: classes.indicator }}\r\n            checked={checked}\r\n            disabled={props.disabled}\r\n            onChange={onChange}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/syncedSlider.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { PrimitiveProps } from "./primitive.js";
+import { type FunctionComponent } from "react";
+import { type PrimitiveProps } from "./primitive.js";
 export type SyncedSliderProps = PrimitiveProps<number> & {
     /** Minimum value for the slider */
     min?: number;

package/fluent/primitives/syncedSlider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
 import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { SpinButton } from "./spinButton.js";
 import { Slider } from "./slider.js";
-import { useEffect, useState, useRef } from "react";
 import { InfoLabel } from "./infoLabel.js";
 const useSyncedSliderStyles = makeStyles({
     container: { display: "flex", minWidth: 0 },