@babylonjs/shared-ui-components 8.16.0 → 8.16.1

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/syncedSlider.d.ts

@@ -1,12 +1,17 @@
 import type { FunctionComponent } from "react";
 import type { BaseComponentProps } from "../hoc/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/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/lines/optionsLineComponent.d.ts

@@ -7,7 +7,7 @@ export interface IOptionsLineProps {
     label: string;
     target: any;
     propertyName: string;
-    options: IInspectableOptions[];
+    options: readonly IInspectableOptions[];
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
     extractValue?: (target: any) => number | string;

package/lines/optionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.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 { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\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.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue) => {\r\n                        // val != null captures both null and undefined cases\r\n                        val != null && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </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":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.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 { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: readonly IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\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.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue) => {\r\n                        // val != null captures both null and undefined cases\r\n                        val != null && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </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/textInputLineComponent.js

@@ -4,7 +4,7 @@ import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import { InputArrowsComponent } from "./inputArrowsComponent.js";
 import { PropertyLine } from "../fluent/hoc/propertyLine.js";
 import { Textarea } from "../fluent/primitives/textarea.js";
-import { Input } from "../fluent/primitives/input.js";
+import { TextInput, NumberInput } from "../fluent/primitives/input.js";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 let ThrottleTimerId = -1;
 export class TextInputLineComponent extends Component {
@@ -141,7 +141,7 @@ export class TextInputLineComponent extends Component {
         }
     }
     renderFluent(value, placeholder, step) {
-        return (_jsx(PropertyLine, { label: this.props.label || "", children: this.props.multilines ? (_jsx(Textarea, { value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled })) : (_jsx(Input, { value: value, onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) }));
+        return (_jsx(PropertyLine, { label: this.props.label || "", children: this.props.multilines ? (_jsx(Textarea, { value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled })) : this.props.numeric ? (_jsx(NumberInput, { value: this.getCurrentNumericValue(value), onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) : (_jsx(TextInput, { value: value, onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) }));
     }
     renderOriginal(value, placeholder, step) {
         const className = this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine";

package/lines/textInputLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInputLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textInputLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, KeyboardEvent } from \"react\";\r\nimport { Component } from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Textarea } from \"../fluent/primitives/textarea\";\r\nimport { Input } from \"../fluent/primitives/input\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface ITextInputLineComponentProps {\r\n    label?: string;\r\n    lockObject?: LockObject;\r\n    target?: any;\r\n    propertyName?: string;\r\n    value?: string;\r\n    onChange?: (value: string) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    noUnderline?: boolean;\r\n    numbersOnly?: boolean;\r\n    delayInput?: boolean;\r\n    arrows?: boolean;\r\n    arrowsIncrement?: (amount: number) => void;\r\n    step?: number;\r\n    numeric?: boolean;\r\n    roundValues?: boolean;\r\n    min?: number;\r\n    max?: number;\r\n    placeholder?: string;\r\n    unit?: ReactNode;\r\n    validator?: (value: string) => boolean;\r\n    multilines?: boolean;\r\n    throttlePropertyChangedNotification?: boolean;\r\n    throttlePropertyChangedNotificationDelay?: number;\r\n    disabled?: boolean;\r\n}\r\n\r\nlet ThrottleTimerId = -1;\r\n\r\nexport class TextInputLineComponent extends Component<ITextInputLineComponentProps, { value: string; dragging: boolean }> {\r\n    private _localChange = false;\r\n\r\n    constructor(props: ITextInputLineComponentProps) {\r\n        super(props);\r\n\r\n        const emptyValue = this.props.numeric ? \"0\" : \"\";\r\n\r\n        this.state = {\r\n            value: (this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || emptyValue,\r\n            dragging: false,\r\n        };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.value !== undefined ? nextProps.value : nextProps.target[nextProps.propertyName!];\r\n        if (newValue !== nextState.value) {\r\n            nextState.value = newValue || \"\";\r\n            return true;\r\n        }\r\n\r\n        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: string, previousValue: string) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n            return;\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName!,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    getCurrentNumericValue(value: string) {\r\n        const numeric = parseFloat(value);\r\n        if (!isNaN(numeric)) {\r\n            return numeric;\r\n        }\r\n        if (this.props.placeholder !== undefined) {\r\n            const placeholderNumeric = parseFloat(this.props.placeholder);\r\n            if (!isNaN(placeholderNumeric)) {\r\n                return placeholderNumeric;\r\n            }\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    updateValue(value: string, valueToValidate?: string) {\r\n        if (this.props.disabled) {\r\n            return;\r\n        }\r\n        if (this.props.numbersOnly) {\r\n            if (/[^0-9.px%-]/g.test(value)) {\r\n                return;\r\n            }\r\n            if (!value) {\r\n                value = \"0\";\r\n            }\r\n\r\n            //Removing starting zero if there is a number of a minus after it.\r\n            if (value.search(/0+[0-9-]/g) === 0) {\r\n                value = value.substring(1);\r\n            }\r\n        }\r\n\r\n        if (this.props.numeric) {\r\n            let numericValue = this.getCurrentNumericValue(value);\r\n            if (this.props.roundValues) {\r\n                numericValue = Math.round(numericValue);\r\n            }\r\n            if (this.props.min !== undefined) {\r\n                numericValue = Math.max(this.props.min, numericValue);\r\n            }\r\n            if (this.props.max !== undefined) {\r\n                numericValue = Math.min(this.props.max, numericValue);\r\n            }\r\n            value = numericValue.toString();\r\n        }\r\n\r\n        this._localChange = true;\r\n        const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!];\r\n\r\n        if (this.props.validator && valueToValidate) {\r\n            if (this.props.validator(valueToValidate) == false) {\r\n                value = store;\r\n            }\r\n        }\r\n\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.propertyName && !this.props.delayInput) {\r\n            this.props.target[this.props.propertyName] = value;\r\n        }\r\n\r\n        if (this.props.throttlePropertyChangedNotification) {\r\n            if (ThrottleTimerId >= 0) {\r\n                window.clearTimeout(ThrottleTimerId);\r\n            }\r\n            ThrottleTimerId = window.setTimeout(() => {\r\n                this.raiseOnPropertyChanged(value, store);\r\n            }, this.props.throttlePropertyChangedNotificationDelay ?? 200);\r\n        } else {\r\n            this.raiseOnPropertyChanged(value, store);\r\n        }\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        if (this.props.step) {\r\n            amount *= this.props.step;\r\n        }\r\n        if (this.props.arrowsIncrement) {\r\n            this.props.arrowsIncrement(amount);\r\n            return;\r\n        }\r\n        const currentValue = this.getCurrentNumericValue(this.state.value);\r\n        this.updateValue((currentValue + amount).toFixed(2));\r\n    }\r\n\r\n    onKeyDown(event: KeyboardEvent) {\r\n        if (!this.props.disabled && this.props.arrows) {\r\n            if (event.key === \"ArrowUp\") {\r\n                this.incrementValue(1);\r\n                event.preventDefault();\r\n            }\r\n            if (event.key === \"ArrowDown\") {\r\n                this.incrementValue(-1);\r\n                event.preventDefault();\r\n            }\r\n        }\r\n    }\r\n\r\n    renderFluent(value: string, placeholder: string, step: number) {\r\n        return (\r\n            <PropertyLine label={this.props.label || \"\"}>\r\n                {this.props.multilines ? (\r\n                    <Textarea value={this.state.value} onChange={(evt) => this.updateValue(evt.target.value)} disabled={this.props.disabled} />\r\n                ) : (\r\n                    <Input value={value} onChange={(val) => this.updateValue(val.toString())} step={step} disabled={this.props.disabled} />\r\n                )}\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    renderOriginal(value: string, placeholder: string, step: number) {\r\n        const className = this.props.multilines ? \"textInputArea\" : this.props.unit !== undefined ? \"textInputLine withUnits\" : \"textInputLine\";\r\n        return (\r\n            <div className={className}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                {this.props.label !== undefined && (\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.multilines && (\r\n                    <>\r\n                        <textarea\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={this.state.value}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => {\r\n                                if (evt.keyCode !== 13) {\r\n                                    return;\r\n                                }\r\n                                this.updateValue(this.state.value);\r\n                            }}\r\n                            onBlur={(evt) => {\r\n                                this.updateValue(evt.target.value, evt.target.value);\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                            }}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                    </>\r\n                )}\r\n                {!this.props.multilines && (\r\n                    <div\r\n                        className={`value${this.props.noUnderline === true ? \" noUnderline\" : \"\"}${this.props.arrows ? \" hasArrows\" : \"\"}${this.state.dragging ? \" dragging\" : \"\"}`}\r\n                    >\r\n                        <input\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={value}\r\n                            onBlur={(evt) => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || \"\", evt.target.value);\r\n                            }}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                            placeholder={placeholder}\r\n                            type={this.props.numeric ? \"number\" : \"text\"}\r\n                            step={step}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                        {this.props.arrows && (\r\n                            <InputArrowsComponent incrementValue={(amount) => this.incrementValue(amount)} setDragging={(dragging) => this.setState({ dragging })} />\r\n                        )}\r\n                    </div>\r\n                )}\r\n                {this.props.unit}\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || \"\";\r\n        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);\r\n        return (\r\n            <ToolContext.Consumer>\r\n                {({ useFluent }) => (useFluent ? this.renderFluent(value, placeholder, step) : this.renderOriginal(value, placeholder, step))}\r\n            </ToolContext.Consumer>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"textInputLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textInputLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, KeyboardEvent } from \"react\";\r\nimport { Component } from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Textarea } from \"../fluent/primitives/textarea\";\r\nimport { TextInput, NumberInput } from \"../fluent/primitives/input\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface ITextInputLineComponentProps {\r\n    label?: string;\r\n    lockObject?: LockObject;\r\n    target?: any;\r\n    propertyName?: string;\r\n    value?: string;\r\n    onChange?: (value: string) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    noUnderline?: boolean;\r\n    numbersOnly?: boolean;\r\n    delayInput?: boolean;\r\n    arrows?: boolean;\r\n    arrowsIncrement?: (amount: number) => void;\r\n    step?: number;\r\n    numeric?: boolean;\r\n    roundValues?: boolean;\r\n    min?: number;\r\n    max?: number;\r\n    placeholder?: string;\r\n    unit?: ReactNode;\r\n    validator?: (value: string) => boolean;\r\n    multilines?: boolean;\r\n    throttlePropertyChangedNotification?: boolean;\r\n    throttlePropertyChangedNotificationDelay?: number;\r\n    disabled?: boolean;\r\n}\r\n\r\nlet ThrottleTimerId = -1;\r\n\r\nexport class TextInputLineComponent extends Component<ITextInputLineComponentProps, { value: string; dragging: boolean }> {\r\n    private _localChange = false;\r\n\r\n    constructor(props: ITextInputLineComponentProps) {\r\n        super(props);\r\n\r\n        const emptyValue = this.props.numeric ? \"0\" : \"\";\r\n\r\n        this.state = {\r\n            value: (this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || emptyValue,\r\n            dragging: false,\r\n        };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.value !== undefined ? nextProps.value : nextProps.target[nextProps.propertyName!];\r\n        if (newValue !== nextState.value) {\r\n            nextState.value = newValue || \"\";\r\n            return true;\r\n        }\r\n\r\n        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: string, previousValue: string) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n            return;\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName!,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    getCurrentNumericValue(value: string) {\r\n        const numeric = parseFloat(value);\r\n        if (!isNaN(numeric)) {\r\n            return numeric;\r\n        }\r\n        if (this.props.placeholder !== undefined) {\r\n            const placeholderNumeric = parseFloat(this.props.placeholder);\r\n            if (!isNaN(placeholderNumeric)) {\r\n                return placeholderNumeric;\r\n            }\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    updateValue(value: string, valueToValidate?: string) {\r\n        if (this.props.disabled) {\r\n            return;\r\n        }\r\n        if (this.props.numbersOnly) {\r\n            if (/[^0-9.px%-]/g.test(value)) {\r\n                return;\r\n            }\r\n            if (!value) {\r\n                value = \"0\";\r\n            }\r\n\r\n            //Removing starting zero if there is a number of a minus after it.\r\n            if (value.search(/0+[0-9-]/g) === 0) {\r\n                value = value.substring(1);\r\n            }\r\n        }\r\n\r\n        if (this.props.numeric) {\r\n            let numericValue = this.getCurrentNumericValue(value);\r\n            if (this.props.roundValues) {\r\n                numericValue = Math.round(numericValue);\r\n            }\r\n            if (this.props.min !== undefined) {\r\n                numericValue = Math.max(this.props.min, numericValue);\r\n            }\r\n            if (this.props.max !== undefined) {\r\n                numericValue = Math.min(this.props.max, numericValue);\r\n            }\r\n            value = numericValue.toString();\r\n        }\r\n\r\n        this._localChange = true;\r\n        const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!];\r\n\r\n        if (this.props.validator && valueToValidate) {\r\n            if (this.props.validator(valueToValidate) == false) {\r\n                value = store;\r\n            }\r\n        }\r\n\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.propertyName && !this.props.delayInput) {\r\n            this.props.target[this.props.propertyName] = value;\r\n        }\r\n\r\n        if (this.props.throttlePropertyChangedNotification) {\r\n            if (ThrottleTimerId >= 0) {\r\n                window.clearTimeout(ThrottleTimerId);\r\n            }\r\n            ThrottleTimerId = window.setTimeout(() => {\r\n                this.raiseOnPropertyChanged(value, store);\r\n            }, this.props.throttlePropertyChangedNotificationDelay ?? 200);\r\n        } else {\r\n            this.raiseOnPropertyChanged(value, store);\r\n        }\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        if (this.props.step) {\r\n            amount *= this.props.step;\r\n        }\r\n        if (this.props.arrowsIncrement) {\r\n            this.props.arrowsIncrement(amount);\r\n            return;\r\n        }\r\n        const currentValue = this.getCurrentNumericValue(this.state.value);\r\n        this.updateValue((currentValue + amount).toFixed(2));\r\n    }\r\n\r\n    onKeyDown(event: KeyboardEvent) {\r\n        if (!this.props.disabled && this.props.arrows) {\r\n            if (event.key === \"ArrowUp\") {\r\n                this.incrementValue(1);\r\n                event.preventDefault();\r\n            }\r\n            if (event.key === \"ArrowDown\") {\r\n                this.incrementValue(-1);\r\n                event.preventDefault();\r\n            }\r\n        }\r\n    }\r\n\r\n    renderFluent(value: string, placeholder: string, step: number) {\r\n        return (\r\n            <PropertyLine label={this.props.label || \"\"}>\r\n                {this.props.multilines ? (\r\n                    <Textarea value={this.state.value} onChange={(evt) => this.updateValue(evt.target.value)} disabled={this.props.disabled} />\r\n                ) : this.props.numeric ? (\r\n                    <NumberInput value={this.getCurrentNumericValue(value)} onChange={(val) => this.updateValue(val.toString())} step={step} disabled={this.props.disabled} />\r\n                ) : (\r\n                    <TextInput value={value} onChange={(val) => this.updateValue(val.toString())} step={step} disabled={this.props.disabled} />\r\n                )}\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    renderOriginal(value: string, placeholder: string, step: number) {\r\n        const className = this.props.multilines ? \"textInputArea\" : this.props.unit !== undefined ? \"textInputLine withUnits\" : \"textInputLine\";\r\n        return (\r\n            <div className={className}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                {this.props.label !== undefined && (\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.multilines && (\r\n                    <>\r\n                        <textarea\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={this.state.value}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => {\r\n                                if (evt.keyCode !== 13) {\r\n                                    return;\r\n                                }\r\n                                this.updateValue(this.state.value);\r\n                            }}\r\n                            onBlur={(evt) => {\r\n                                this.updateValue(evt.target.value, evt.target.value);\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                            }}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                    </>\r\n                )}\r\n                {!this.props.multilines && (\r\n                    <div\r\n                        className={`value${this.props.noUnderline === true ? \" noUnderline\" : \"\"}${this.props.arrows ? \" hasArrows\" : \"\"}${this.state.dragging ? \" dragging\" : \"\"}`}\r\n                    >\r\n                        <input\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={value}\r\n                            onBlur={(evt) => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || \"\", evt.target.value);\r\n                            }}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                            placeholder={placeholder}\r\n                            type={this.props.numeric ? \"number\" : \"text\"}\r\n                            step={step}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                        {this.props.arrows && (\r\n                            <InputArrowsComponent incrementValue={(amount) => this.incrementValue(amount)} setDragging={(dragging) => this.setState({ dragging })} />\r\n                        )}\r\n                    </div>\r\n                )}\r\n                {this.props.unit}\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || \"\";\r\n        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);\r\n        return (\r\n            <ToolContext.Consumer>\r\n                {({ useFluent }) => (useFluent ? this.renderFluent(value, placeholder, step) : this.renderOriginal(value, placeholder, step))}\r\n            </ToolContext.Consumer>\r\n        );\r\n    }\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "8.16.0",
+    "version": "8.16.1",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",

package/components/lines/ColorLineComponent.d.ts

@@ -1,38 +0,0 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../../propertyChangedEvent.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
-export interface IColorLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    disableAlpha?: boolean;
-    lockObject: LockObject;
-}
-interface IColorLineComponentState {
-    isExpanded: boolean;
-    color: Color4;
-}
-export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
-    constructor(props: IColorLineComponentProps);
-    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps>): Color4;
-    setColorFromString(colorString: string): void;
-    setColor(newColor: Color4): void;
-    switchExpandState(): void;
-    updateStateR(value: number): void;
-    updateStateG(value: number): void;
-    updateStateB(value: number): void;
-    updateStateA(value: number): void;
-    copyToClipboard(): void;
-    private _convertToColor;
-    private _toColor3;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};