@babylonjs/shared-ui-components 8.16.0 → 8.16.2

package/fluent/primitives/input.js

@@ -5,11 +5,11 @@ const useInputStyles = makeStyles({
     text: {
         height: "auto",
         textAlign: "right",
+        minWidth: "100px", // Min width for text input
     },
-    float: {
+    number: {
         height: "auto",
-        width: "80px", // Fixed width for number input
-        flexShrink: 0,
+        minWidth: "40px", // Min width for number input
     },
 });
 /**
@@ -17,22 +17,25 @@ const useInputStyles = makeStyles({
  * @param props
  * @returns
  */
-export const Input = (props) => {
+const Input = (props) => {
     const classes = useInputStyles();
     const [value, setValue] = useState(props.value ?? "");
-    const type = typeof props.value === "number" ? "number" : "text";
     useEffect(() => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
     const handleChange = (event, _) => {
         event.stopPropagation(); // Prevent event propagation
-        const value = type === "number" ? Number(event.target.value) : String(event.target.value);
+        const value = props.type === "number" ? Number(event.target.value) : String(event.target.value);
         props.onChange(value); // Call the original onChange handler passed as prop
         setValue(value); // Update local state with the new value
     };
     const handleKeyDown = (event) => {
         event.stopPropagation(); // Prevent event propagation
     };
-    return (_jsx(FluentInput, { ...props, type: type, size: "small", value: value.toString(), className: typeof props.value === "number" ? classes.float : classes.text, onChange: handleChange, onKeyDown: handleKeyDown }));
+    return (_jsx(FluentInput, { ...props, size: "small", value: value.toString(), className: props.type === "number" ? classes.number : classes.text, onChange: handleChange, onKeyDown: handleKeyDown }));
 };
+const NumberInputCast = Input;
+const TextInputCast = Input;
+export const NumberInput = (props) => _jsx(NumberInputCast, { ...props, type: "number" });
+export const TextInput = (props) => _jsx(TextInputCast, { ...props, type: "text" });
 //# sourceMappingURL=input.js.map

package/fluent/primitives/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;KACrB;IACD,KAAK,EAAE;QACH,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,CAAU,EAAE,EAAE;QACtE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,MAAM,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1F,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC3E,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC7D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EACzE,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,GAC1B,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n        textAlign: \"right\",\r\n    },\r\n    float: {\r\n        height: \"auto\",\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type InputProps<T extends string | number> = BaseComponentProps<T> & {\r\n    step?: number;\r\n    placeholder?: string;\r\n    min?: number;\r\n    max?: number;\r\n};\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nexport const Input: FunctionComponent<InputProps<string | number>> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    const type = typeof props.value === \"number\" ? \"number\" : \"text\";\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, _: unknown) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        const value = type === \"number\" ? Number(event.target.value) : String(event.target.value);\r\n        props.onChange(value); // Call the original onChange handler passed as prop\r\n        setValue(value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n    };\r\n\r\n    return (\r\n        <FluentInput\r\n            {...props}\r\n            type={type}\r\n            size=\"small\"\r\n            value={value.toString()}\r\n            className={typeof props.value === \"number\" ? classes.float : classes.text}\r\n            onChange={handleChange}\r\n            onKeyDown={handleKeyDown}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,OAAO,EAAE,2BAA2B;KACjD;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM,EAAE,6BAA6B;KAClD;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,KAAK,GAAiF,CAAC,KAAK,EAAE,EAAE;IAClG,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,CAAU,EAAE,EAAE;QACtE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAChG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC3E,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC7D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,OACJ,KAAK,EACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAClE,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,GAC1B,CACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,KAAmE,CAAC;AAC5F,MAAM,aAAa,GAAG,KAAiE,CAAC;AAExF,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,eAAe,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;AAC1H,MAAM,CAAC,MAAM,SAAS,GAA0C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,KAAK,EAAE,IAAI,EAAC,MAAM,GAAG,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n        textAlign: \"right\",\r\n        minWidth: \"100px\", // Min width for text input\r\n    },\r\n    number: {\r\n        height: \"auto\",\r\n        minWidth: \"40px\", // Min width for number input\r\n    },\r\n});\r\n\r\nexport type InputProps<T extends string | number> = BaseComponentProps<T> & {\r\n    step?: number;\r\n    placeholder?: string;\r\n    min?: number;\r\n    max?: number;\r\n};\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nconst Input: FunctionComponent<InputProps<string | number> & { type: \"text\" | \"number\" }> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, _: unknown) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        const value = props.type === \"number\" ? Number(event.target.value) : String(event.target.value);\r\n        props.onChange(value); // Call the original onChange handler passed as prop\r\n        setValue(value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n    };\r\n\r\n    return (\r\n        <FluentInput\r\n            {...props}\r\n            size=\"small\"\r\n            value={value.toString()}\r\n            className={props.type === \"number\" ? classes.number : classes.text}\r\n            onChange={handleChange}\r\n            onKeyDown={handleKeyDown}\r\n        />\r\n    );\r\n};\r\n\r\nconst NumberInputCast = Input as FunctionComponent<InputProps<number> & { type: \"number\" }>;\r\nconst TextInputCast = Input as FunctionComponent<InputProps<string> & { type: \"text\" }>;\r\n\r\nexport const NumberInput: FunctionComponent<InputProps<number>> = (props) => <NumberInputCast {...props} type=\"number\" />;\r\nexport const TextInput: FunctionComponent<InputProps<string>> = (props) => <TextInputCast {...props} type=\"text\" />;\r\n"]}

package/fluent/primitives/list.d.ts

@@ -0,0 +1,26 @@
+import type { FunctionComponent, ReactNode } from "react";
+/**
+ * Represents an item in a list
+ */
+export type ListItem<T = any> = {
+    /** Unique identifier for the item */
+    id: number;
+    /** The data associated with the item */
+    data: T;
+    /** Value to use for sorting the list */
+    sortBy: number;
+};
+type ListProps<T = any> = {
+    items: ListItem<T>[];
+    renderItem: (item: ListItem<T>, index: number) => ReactNode;
+    onDelete: (item: ListItem<T>, index: number) => void;
+    onAdd: (item?: ListItem<T>) => void;
+    addButtonLabel?: string;
+};
+/**
+ * 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
+ * @returns A React component that renders a list of items with add/delete functionality
+ * @param props - The properties for the List component
+ */
+export declare const List: FunctionComponent<ListProps<any>>;
+export {};

package/fluent/primitives/list.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyRegular, DeleteRegular } from "@fluentui/react-icons";
+import { ButtonLine } from "../hoc/buttonLine.js";
+import { Body1Strong, makeStyles, tokens } from "@fluentui/react-components";
+const useListStyles = makeStyles({
+    item: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row", // Arrange items horizontally
+        alignItems: "center", // Center items vertically
+        gap: tokens.spacingHorizontalS, // Add space between elements
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    },
+    itemId: {
+        width: tokens.spacingHorizontalM,
+    },
+    itemContent: {
+        flex: 1, // Take up remaining space
+        minWidth: 0, // Prevent flex item from overflowing
+    },
+    iconContainer: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS, // Small gap between icons
+        alignItems: "center",
+        flexShrink: 0, // Prevent shrinking
+    },
+    list: {
+        padding: tokens.spacingVerticalS,
+    },
+});
+/**
+ * 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
+ * @returns A React component that renders a list of items with add/delete functionality
+ * @param props - The properties for the List component
+ */
+export const List = (props) => {
+    const { items, renderItem, onDelete, onAdd, addButtonLabel = "Add new item" } = props;
+    const classes = useListStyles();
+    return (_jsxs("div", { children: [_jsx(ButtonLine, { label: addButtonLabel, onClick: () => props.onAdd() }), _jsx("div", { className: classes.list, children: items
+                    .sort((a, b) => a.sortBy - b.sortBy)
+                    .map((item, index) => (_jsxs("div", { className: classes.item, children: [_jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), _jsx("div", { className: classes.itemContent, children: renderItem(item, index) }), _jsxs("div", { className: classes.iconContainer, children: [_jsx(CopyRegular, { onClick: () => onAdd(item) }), _jsx(DeleteRegular, { onClick: () => onDelete(item, index) })] })] }, item.id))) })] }));
+};
+//# sourceMappingURL=list.js.map

package/fluent/primitives/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE7E,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,CAAC,MAAM,IAAI,GAAsC,CAAC,KAAK,EAAsB,EAAE;IACjF,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,OAAO,CACH,0BACI,KAAC,UAAU,IAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAI,EAEnE,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACvB,KAAK;qBACD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;qBACnC,GAAG,CAAC,CAAC,IAAmB,EAAE,KAAa,EAAE,EAAE,CAAC,CACzC,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,GAAO,EACpE,eAAK,SAAS,EAAE,OAAO,CAAC,aAAa,aACjC,KAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,EAC3C,KAAC,aAAa,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,GAAI,IACrD,KANA,IAAI,CAAC,EAAE,CAOX,CACT,CAAC,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { CopyRegular, DeleteRegular } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, ReactNode } from \"react\";\r\nimport { ButtonLine } from \"../hoc/buttonLine\";\r\nimport { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\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 = any> = {\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 = any> = {\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 const List: FunctionComponent<ListProps<any>> = (props): React.ReactElement => {\r\n    const { items, renderItem, onDelete, onAdd, addButtonLabel = \"Add new item\" } = props;\r\n    const classes = useListStyles();\r\n\r\n    return (\r\n        <div>\r\n            <ButtonLine label={addButtonLabel} onClick={() => props.onAdd()} />\r\n\r\n            <div className={classes.list}>\r\n                {items\r\n                    .sort((a, b) => a.sortBy - b.sortBy)\r\n                    .map((item: ListItem<any>, 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, index)}</div>\r\n                            <div className={classes.iconContainer}>\r\n                                <CopyRegular onClick={() => onAdd(item)} />\r\n                                <DeleteRegular onClick={() => onDelete(item, index)} />\r\n                            </div>\r\n                        </div>\r\n                    ))}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/messageBar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles } from "@fluentui/react-components";
+import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from "@fluentui/react-components";
 import { Link } from "./link.js";
 const useClasses = makeStyles({
     container: {
         display: "flex",
         flexDirection: "column",
-        gap: "10px",
+        gap: tokens.spacingVerticalS, // 8px
     },
 });
 export const MessageBar = (props) => {

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,4BAA4B,CAAC;AAEzH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM;KACd;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,iCAAyB,IAC3C,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: \"10px\",\r\n    },\r\n});\r\n\r\ntype MessageBarProps = {\r\n    message: string;\r\n    title: string;\r\n    docLink?: string;\r\n    intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n    const { message, title: header, intent, docLink } = props;\r\n    const classes = useClasses();\r\n\r\n    return (\r\n        <div className={classes.container}>\r\n            <FluentMessageBar intent={intent}>\r\n                <MessageBarBody>\r\n                    <MessageBarTitle>{header}</MessageBarTitle>\r\n                    {message}\r\n                    {docLink && <Link href={docLink}> - Link to Docs!</Link>}\r\n                </MessageBarBody>\r\n            </FluentMessageBar>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,iCAAyB,IAC3C,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalS, // 8px\r\n    },\r\n});\r\n\r\ntype MessageBarProps = {\r\n    message: string;\r\n    title: string;\r\n    docLink?: string;\r\n    intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n    const { message, title: header, intent, docLink } = props;\r\n    const classes = useClasses();\r\n\r\n    return (\r\n        <div className={classes.container}>\r\n            <FluentMessageBar intent={intent}>\r\n                <MessageBarBody>\r\n                    <MessageBarTitle>{header}</MessageBarTitle>\r\n                    {message}\r\n                    {docLink && <Link href={docLink}> - Link to Docs!</Link>}\r\n                </MessageBarBody>\r\n            </FluentMessageBar>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/spinButton.d.ts

@@ -1,4 +1,10 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
-export type SpinButtonProps = BaseComponentProps<number>;
+import type { BaseComponentProps, PropertyLineProps } from "../hoc/propertyLines/propertyLine.js";
+export type SpinButtonProps = BaseComponentProps<number> & {
+    precision?: number;
+    step?: number;
+    min?: number;
+    max?: number;
+};
 export declare const SpinButton: FunctionComponent<SpinButtonProps>;
+export declare const SpinButtonPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps>;

package/fluent/primitives/spinButton.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles, SpinButton as FluentSpinButton } from "@fluentui/react-components";
 import { useCallback, useState } from "react";
+import { PropertyLine } from "../hoc/propertyLines/propertyLine.js";
 const useSpinStyles = makeStyles({
     base: {
         display: "flex",
@@ -13,7 +14,7 @@ export const SpinButton = (props) => {
     const onSpinButtonChange = useCallback((_ev, data) => {
         // Stop propagation of the event to prevent it from bubbling up
         _ev.stopPropagation();
-        if (data.value !== undefined) {
+        if (data.value != null) {
             setSpinButtonValue(data.value);
         }
         else if (data.displayValue !== undefined) {
@@ -23,6 +24,7 @@ export const SpinButton = (props) => {
             }
         }
     }, [setSpinButtonValue]);
-    return (_jsx("div", { className: classes.base, children: _jsx(FluentSpinButton, { value: spinButtonValue, onChange: onSpinButtonChange }) }));
+    return (_jsx("div", { className: classes.base, children: _jsx(FluentSpinButton, { ...props, value: spinButtonValue, onChange: onSpinButtonChange }) }));
 };
+export const SpinButtonPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(SpinButton, { ...props }) }));
 //# sourceMappingURL=spinButton.js.map

package/fluent/primitives/spinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,KAAK,CAAC,KAAK,CAAC,CAAC;IAEnF,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,GAA0B,EAAE,IAA4B,EAAE,EAAE;QACzD,+DAA+D;QAC/D,GAAG,CAAC,eAAe,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3B,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1B,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACxB,KAAC,gBAAgB,IAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,kBAAkB,GAAI,GACxE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles, SpinButton as FluentSpinButton } from \"@fluentui/react-components\";\r\nimport type { SpinButtonOnChangeData, SpinButtonChangeEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSpinStyles = makeStyles({\r\n    base: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\nexport type SpinButtonProps = BaseComponentProps<number>;\r\n\r\nexport const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {\r\n    const classes = useSpinStyles();\r\n\r\n    const [spinButtonValue, setSpinButtonValue] = useState<number | null>(props.value);\r\n\r\n    const onSpinButtonChange = useCallback(\r\n        (_ev: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            // Stop propagation of the event to prevent it from bubbling up\r\n            _ev.stopPropagation();\r\n\r\n            if (data.value !== undefined) {\r\n                setSpinButtonValue(data.value);\r\n            } else if (data.displayValue !== undefined) {\r\n                const newValue = parseFloat(data.displayValue);\r\n                if (!Number.isNaN(newValue)) {\r\n                    setSpinButtonValue(newValue);\r\n                }\r\n            }\r\n        },\r\n        [setSpinButtonValue]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.base}>\r\n            <FluentSpinButton value={spinButtonValue} onChange={onSpinButtonChange} />\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,GAA0B,EAAE,IAA4B,EAAE,EAAE;QACzD,+DAA+D;QAC/D,GAAG,CAAC,eAAe,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YACrB,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1B,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACxB,KAAC,gBAAgB,OAAK,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,kBAAkB,GAAI,GACnF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAA2D,CAAC,KAAK,EAAE,EAAE,CAAC,CACrG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,UAAU,OAAK,KAAK,GAAI,GACd,CAClB,CAAC","sourcesContent":["import { makeStyles, SpinButton as FluentSpinButton } from \"@fluentui/react-components\";\r\nimport type { SpinButtonOnChangeData, SpinButtonChangeEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { BaseComponentProps, PropertyLineProps } from \"../hoc/propertyLines/propertyLine\";\r\nimport { PropertyLine } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useSpinStyles = makeStyles({\r\n    base: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\nexport type SpinButtonProps = BaseComponentProps<number> & {\r\n    precision?: number; // Optional precision for the spin button\r\n    step?: number; // Optional step value for the spin button\r\n    min?: number;\r\n    max?: number;\r\n};\r\n\r\nexport const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {\r\n    const classes = useSpinStyles();\r\n\r\n    const [spinButtonValue, setSpinButtonValue] = useState(props.value);\r\n\r\n    const onSpinButtonChange = useCallback(\r\n        (_ev: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            // Stop propagation of the event to prevent it from bubbling up\r\n            _ev.stopPropagation();\r\n\r\n            if (data.value != null) {\r\n                setSpinButtonValue(data.value);\r\n            } else if (data.displayValue !== undefined) {\r\n                const newValue = parseFloat(data.displayValue);\r\n                if (!Number.isNaN(newValue)) {\r\n                    setSpinButtonValue(newValue);\r\n                }\r\n            }\r\n        },\r\n        [setSpinButtonValue]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.base}>\r\n            <FluentSpinButton {...props} value={spinButtonValue} onChange={onSpinButtonChange} />\r\n        </div>\r\n    );\r\n};\r\n\r\nexport const SpinButtonPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <SpinButton {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/primitives/switch.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type SwitchProps = BaseComponentProps<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":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;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,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,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC1I,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\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 = BaseComponentProps<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    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 <FluentSwitch className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} onChange={onChange} />;\r\n};\r\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;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,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,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC1I,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\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 = BaseComponentProps<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    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 <FluentSwitch className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} onChange={onChange} />;\r\n};\r\n"]}

package/fluent/primitives/syncedSlider.d.ts

@@ -1,12 +1,17 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type SyncedSliderProps = BaseComponentProps<number> & {
+    /** Minimum value for the slider */
     min?: number;
+    /** Maximum value for the slider */
     max?: number;
+    /** Step size for the slider */
     step?: number;
+    /** When true, onChange is only called when the user releases the slider, not during drag */
+    notifyOnlyOnRelease?: boolean;
 };
 /**
- * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
  * @param props
  * @returns SyncedSlider component
  */

package/fluent/primitives/syncedSlider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles, Slider, tokens } from "@fluentui/react-components";
-import { Input } from "./input.js";
-import { useEffect, useState } from "react";
+import { NumberInput } from "./input.js";
+import { useEffect, useState, useRef } from "react";
 const useSyncedSliderStyles = makeStyles({
     syncedSlider: {
         display: "flex",
@@ -11,21 +11,23 @@ const useSyncedSliderStyles = makeStyles({
     },
     slider: {
         flexGrow: 1, // Let slider grow
-        minWidth: 0, // Allow shrink if needed
+        minWidth: "40px", // Minimum width for slider to remain usable
     },
     input: {
-        width: "80px", // Fixed width for number input
+        width: "40px", // Fixed width for input - always 40px
         flexShrink: 0,
     },
 });
 /**
- * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
  * @param props
  * @returns SyncedSlider component
  */
 export const SyncedSliderInput = (props) => {
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);
+    const pendingValueRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
     // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
     // To avoid this, we scale the min/max based on the step so we can always make step undefined.
     // The actual step size in the Fluent slider is 1 when it is ste to undefined.
@@ -33,20 +35,35 @@ export const SyncedSliderInput = (props) => {
     const max = props.max ?? 100;
     const step = props.step ?? 1;
     useEffect(() => {
-        setValue(props.value ?? ""); // Update local state when props.value changes
+        !isDraggingRef.current && setValue(props.value ?? ""); // Update local state when props.value changes as long as user is not actively dragging
     }, [props.value]);
     const handleSliderChange = (_, data) => {
-        const value = data.value * step;
-        setValue(value);
-        props.onChange(value); // Notify parent
+        const newValue = data.value * step;
+        setValue(newValue);
+        if (props.notifyOnlyOnRelease) {
+            // Store the value but don't notify parent yet
+            pendingValueRef.current = newValue;
+            isDraggingRef.current = true;
+        }
+        else {
+            // Notify parent as slider changes
+            props.onChange(newValue);
+        }
+    };
+    const handleSliderPointerUp = () => {
+        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
+            props.onChange(pendingValueRef.current);
+            pendingValueRef.current = undefined;
+            isDraggingRef.current = false;
+        }
     };
     const handleInputChange = (value) => {
         const newValue = Number(value);
         if (!isNaN(newValue)) {
             setValue(newValue);
-            props.onChange(newValue); // Notify parent
+            props.onChange(newValue); // Input always updates immediately
         }
     };
-    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange })), _jsx(Input, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
+    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerUp: handleSliderPointerUp })), _jsx(NumberInput, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
 };
 //# sourceMappingURL=syncedSlider.js.map

package/fluent/primitives/syncedSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM;QACxC,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,CAAC,EAAE,yBAAyB;KACzC;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IAExD,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,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB;IAC3C,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CACnD,KAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CACtK,EACD,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IAC7H,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { Input } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalXXS, // 2px\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: 0, // Allow shrink if needed\r\n    },\r\n    input: {\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n    min?: number;\r\n    max?: number;\r\n    step?: number;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change a value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\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 ste 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        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const value = data.value * step;\r\n        setValue(value);\r\n        props.onChange(value); // Notify parent\r\n    };\r\n\r\n    const handleInputChange = (value: string | number) => {\r\n        const newValue = Number(value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Notify parent\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            {props.min !== undefined && props.max !== undefined && (\r\n                <Slider {...props} size=\"small\" className={classes.slider} min={min / step} max={max / step} step={undefined} value={value / step} onChange={handleSliderChange} />\r\n            )}\r\n            <Input {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { NumberInput } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalXXS, // 2px\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: \"40px\", // Minimum width for slider to remain usable\r\n    },\r\n    input: {\r\n        width: \"40px\", // Fixed width for input - always 40px\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<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};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\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 ste 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 ?? \"\"); // 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            isDraggingRef.current = true;\r\n        } else {\r\n            // Notify parent as slider changes\r\n            props.onChange(newValue);\r\n        }\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            isDraggingRef.current = false;\r\n        }\r\n    };\r\n\r\n    const handleInputChange = (value: string | number) => {\r\n        const newValue = Number(value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Input always updates immediately\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            {props.min !== undefined && props.max !== undefined && (\r\n                <Slider\r\n                    {...props}\r\n                    size=\"small\"\r\n                    className={classes.slider}\r\n                    min={min / step}\r\n                    max={max / step}\r\n                    step={undefined}\r\n                    value={value / step}\r\n                    onChange={handleSliderChange}\r\n                    onPointerUp={handleSliderPointerUp}\r\n                />\r\n            )}\r\n            <NumberInput {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/textarea.d.ts

@@ -1,6 +1,6 @@
 import type { TextareaProps as FluentTextareaProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type TextareaProps = BaseComponentProps<string> & {
     placeholder?: string;
 };

package/fluent/primitives/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    textarea: {},\r\n});\r\n\r\nexport type TextareaProps = BaseComponentProps<string> & {\r\n    placeholder?: string;\r\n};\r\n\r\n/**\r\n * This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n    const classes = useInputStyles();\r\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onChange) {\r\n            props.onChange(event, data); // Call the original onChange handler passed as prop\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onKeyDown) {\r\n            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n        }\r\n    };\r\n\r\n    return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    textarea: {},\r\n});\r\n\r\nexport type TextareaProps = BaseComponentProps<string> & {\r\n    placeholder?: string;\r\n};\r\n\r\n/**\r\n * This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n    const classes = useInputStyles();\r\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onChange) {\r\n            props.onChange(event, data); // Call the original onChange handler passed as prop\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onKeyDown) {\r\n            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n        }\r\n    };\r\n\r\n    return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}

package/lines/booleanLineComponent.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
+import { BooleanBadgePropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class BooleanLineComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     renderFluent() {
-        return _jsx(ReadonlyBooleanLine, { label: this.props.label, value: this.props.value });
+        return _jsx(BooleanBadgePropertyLine, { label: this.props.label, value: this.props.value });
     }
     renderOriginal() {
         const check = this.props.value ? _jsx(FontAwesomeIcon, { icon: faCheck }) : _jsx(FontAwesomeIcon, { icon: faTimesCircle });

package/lines/booleanLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,mBAAmB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IACrF,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { ReadonlyBooleanLine } from \"shared-ui-components/fluent/hoc/readonlyBooleanLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n    renderFluent() {\r\n        return <ReadonlyBooleanLine label={this.props.label} value={this.props.value} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,wEAAwE,CAAC;AAClH,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,wBAAwB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IAC1F,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { BooleanBadgePropertyLine } from \"shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n    renderFluent() {\r\n        return <BooleanBadgePropertyLine label={this.props.label} value={this.props.value} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/buttonLineComponent.js

@@ -7,7 +7,9 @@ export class ButtonLineComponent extends React.Component {
         super(props);
     }
     renderFluent() {
-        return _jsx(ButtonLine, { label: this.props.label, icon: this.props.icon, title: this.props.label, onClick: this.props.onClick, disabled: this.props.isDisabled });
+        // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon
+        const fluentIcon = this.props.icon ? () => _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }) : undefined;
+        return _jsx(ButtonLine, { label: this.props.label, icon: fluentIcon, onClick: this.props.onClick, disabled: this.props.isDisabled });
     }
     renderOriginal() {
         return (_jsxs("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("button", { onClick: () => this.props.onClick(), children: this.props.label })] }));

package/lines/buttonLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;IACjK,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAU,IACtE,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n    label: string;\r\n    onClick: () => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n    constructor(props: IButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    renderFluent() {\r\n        return <ButtonLine label={this.props.label} icon={this.props.icon} title={this.props.label} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n    }\r\n    renderOriginal() {\r\n        return (\r\n            <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,+FAA+F;QAC/F,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9J,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;IACnI,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAU,IACtE,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n    label: string;\r\n    onClick: () => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n    constructor(props: IButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    renderFluent() {\r\n        // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon\r\n        const fluentIcon = this.props.icon ? () => <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" /> : undefined;\r\n        return <ButtonLine label={this.props.label} icon={fluentIcon} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n    }\r\n    renderOriginal() {\r\n        return (\r\n            <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/checkBoxLineComponent.js

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import copyIcon from "../imgs/copy.svg";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
-import { SwitchPropertyLine } from "../fluent/hoc/switchPropertyLine.js";
+import { SwitchPropertyLine } from "../fluent/hoc/propertyLines/switchPropertyLine.js";
 import { Checkbox } from "../fluent/primitives/checkbox.js";
 import toggleOnIcon40px from "../imgs/toggleOnIcon_40px.svg";
 import toggleOffIcon40px from "../imgs/toggleOffIcon_40px.svg";

package/lines/checkBoxLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n    label?: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    isSelected?: boolean | (() => boolean);\r\n    onSelect?: (value: boolean) => void;\r\n    onValueChanged?: () => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n    large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n    size30: {\r\n        on: toggleOnIcon30px,\r\n        mixed: toggleMixedIcon30px,\r\n        off: toggleOffIcon30px,\r\n    },\r\n    size40: {\r\n        on: toggleOnIcon40px,\r\n        mixed: \"\", // unneeded\r\n        off: toggleOffIcon40px,\r\n    },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n    private _localChange = false;\r\n    constructor(props: ICheckBoxLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.isSelected !== undefined) {\r\n            this.state = {\r\n                isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n                isConflict: false,\r\n            };\r\n        } else {\r\n            this.state = {\r\n                isSelected: this.props.target[this.props.propertyName!] === true,\r\n                isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n            };\r\n        }\r\n\r\n        if (this.props.disabled) {\r\n            this.state = { ...this.state, isDisabled: this.props.disabled };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n        let selected: boolean;\r\n\r\n        if (nextProps.isSelected !== undefined) {\r\n            selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n        } else {\r\n            selected = nextProps.target[nextProps.propertyName!] === true;\r\n            if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n                nextState.isConflict = true;\r\n            }\r\n        }\r\n\r\n        if (selected !== nextState.isSelected || this._localChange) {\r\n            nextState.isSelected = selected;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.disabled !== nextState.isDisabled) {\r\n            return true;\r\n        }\r\n\r\n        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n    }\r\n\r\n    onChange() {\r\n        this._localChange = true;\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(!this.state.isSelected);\r\n        } else {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: !this.state.isSelected,\r\n                    initialValue: this.state.isSelected,\r\n                });\r\n            }\r\n\r\n            if (this.props.target && this.props.propertyName) {\r\n                this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n            }\r\n        }\r\n\r\n        if (this.props.onValueChanged) {\r\n            this.props.onValueChanged();\r\n        }\r\n\r\n        this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n    }\r\n\r\n    // Copy to clipboard the code this checkbox actually does\r\n    // Example : mesh.checkCollisions = true;\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName!];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    renderOriginal() {\r\n        const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n        return (\r\n            <div className=\"checkBoxLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"label\" title={this.props.iconLabel}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.faIcons && (\r\n                    <FontAwesomeIcon\r\n                        className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n                        icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n                        onClick={() => !this.props.disabled && this.onChange()}\r\n                    />\r\n                )}\r\n                {!this.props.faIcons && (\r\n                    <div className=\"checkBox\">\r\n                        <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n                                checked={this.state.isSelected}\r\n                                onChange={() => this.onChange()}\r\n                                disabled={!!this.props.disabled}\r\n                            />\r\n                            <img className=\"icon\" src={icon} alt={this.props.label} />\r\n                        </label>\r\n                    </div>\r\n                )}\r\n                <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent() {\r\n        // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n        if (this.props.faIcons) {\r\n            return <Checkbox disabled={this.props.disabled} value={this.state.isSelected} onChange={() => !this.props.disabled && this.onChange()} />;\r\n        }\r\n        return <SwitchPropertyLine label={this.props.label || \"\"} value={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/propertyLines/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n    label?: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    isSelected?: boolean | (() => boolean);\r\n    onSelect?: (value: boolean) => void;\r\n    onValueChanged?: () => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n    large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n    size30: {\r\n        on: toggleOnIcon30px,\r\n        mixed: toggleMixedIcon30px,\r\n        off: toggleOffIcon30px,\r\n    },\r\n    size40: {\r\n        on: toggleOnIcon40px,\r\n        mixed: \"\", // unneeded\r\n        off: toggleOffIcon40px,\r\n    },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n    private _localChange = false;\r\n    constructor(props: ICheckBoxLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.isSelected !== undefined) {\r\n            this.state = {\r\n                isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n                isConflict: false,\r\n            };\r\n        } else {\r\n            this.state = {\r\n                isSelected: this.props.target[this.props.propertyName!] === true,\r\n                isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n            };\r\n        }\r\n\r\n        if (this.props.disabled) {\r\n            this.state = { ...this.state, isDisabled: this.props.disabled };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n        let selected: boolean;\r\n\r\n        if (nextProps.isSelected !== undefined) {\r\n            selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n        } else {\r\n            selected = nextProps.target[nextProps.propertyName!] === true;\r\n            if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n                nextState.isConflict = true;\r\n            }\r\n        }\r\n\r\n        if (selected !== nextState.isSelected || this._localChange) {\r\n            nextState.isSelected = selected;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.disabled !== nextState.isDisabled) {\r\n            return true;\r\n        }\r\n\r\n        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n    }\r\n\r\n    onChange() {\r\n        this._localChange = true;\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(!this.state.isSelected);\r\n        } else {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: !this.state.isSelected,\r\n                    initialValue: this.state.isSelected,\r\n                });\r\n            }\r\n\r\n            if (this.props.target && this.props.propertyName) {\r\n                this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n            }\r\n        }\r\n\r\n        if (this.props.onValueChanged) {\r\n            this.props.onValueChanged();\r\n        }\r\n\r\n        this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n    }\r\n\r\n    // Copy to clipboard the code this checkbox actually does\r\n    // Example : mesh.checkCollisions = true;\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName!];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    renderOriginal() {\r\n        const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n        return (\r\n            <div className=\"checkBoxLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"label\" title={this.props.iconLabel}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.faIcons && (\r\n                    <FontAwesomeIcon\r\n                        className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n                        icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n                        onClick={() => !this.props.disabled && this.onChange()}\r\n                    />\r\n                )}\r\n                {!this.props.faIcons && (\r\n                    <div className=\"checkBox\">\r\n                        <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n                                checked={this.state.isSelected}\r\n                                onChange={() => this.onChange()}\r\n                                disabled={!!this.props.disabled}\r\n                            />\r\n                            <img className=\"icon\" src={icon} alt={this.props.label} />\r\n                        </label>\r\n                    </div>\r\n                )}\r\n                <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent() {\r\n        // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n        if (this.props.faIcons) {\r\n            return <Checkbox disabled={this.props.disabled} value={this.state.isSelected} onChange={() => !this.props.disabled && this.onChange()} />;\r\n        }\r\n        return <SwitchPropertyLine label={this.props.label || \"\"} value={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}