@babylonjs/shared-ui-components 8.18.0 → 8.19.0

package/fluent/hoc/propertyLines/booleanBadgePropertyLine.d.ts

@@ -1,10 +1,9 @@
 import type { FunctionComponent } from "react";
+import type { ImmutablePrimitiveProps } from "../../primitives/primitive.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 /**
  * Displays an icon indicating enabled (green check) or disabled (red cross) state
  * @param props - The properties for the PropertyLine, including the boolean value to display.
  * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
  */
-export declare const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps & {
-    value: boolean;
-}>;
+export declare const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps<boolean> & ImmutablePrimitiveProps<boolean>>;

package/fluent/hoc/propertyLines/booleanBadgePropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanBadgePropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1G,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAC5B,KAAC,aAAa,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,GAAI,GAC/E,CAClB,CAAC","sourcesContent":["import { PresenceBadge } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\n/**\r\n * Displays an icon indicating enabled (green check) or disabled (red cross) state\r\n * @param props - The properties for the PropertyLine, including the boolean value to display.\r\n * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.\r\n */\r\nexport const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps & { value: boolean }> = (props) => (\r\n    <PropertyLine label={props.label}>\r\n        <PresenceBadge status={props.value ? \"available\" : \"do-not-disturb\"} outOfOffice={true} />\r\n    </PropertyLine>\r\n);\r\n"]}
+{"version":3,"file":"booleanBadgePropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAqF,CAAC,KAAK,EAAE,EAAE,CAAC,CACjI,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAC5B,KAAC,aAAa,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,GAAI,GAC/E,CAClB,CAAC","sourcesContent":["import { PresenceBadge } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n/**\r\n * Displays an icon indicating enabled (green check) or disabled (red cross) state\r\n * @param props - The properties for the PropertyLine, including the boolean value to display.\r\n * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.\r\n */\r\nexport const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps<boolean> & ImmutablePrimitiveProps<boolean>> = (props) => (\r\n    <PropertyLine label={props.label}>\r\n        <PresenceBadge status={props.value ? \"available\" : \"do-not-disturb\"} outOfOffice={true} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/hoc/propertyLines/checkboxPropertyLine.d.ts

@@ -1,9 +1,9 @@
+import type { PrimitiveProps } from "../../primitives/primitive.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-import type { CheckboxProps } from "../../primitives/checkbox.js";
 /**
  * Wraps a checkbox in a property line
  * @param props - PropertyLineProps and CheckboxProps
  * @returns property-line wrapped checkbox
  */
-export declare const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps>;
+export declare const CheckboxPropertyLine: FunctionComponent<PropertyLineProps<boolean> & PrimitiveProps<boolean>>;

package/fluent/hoc/propertyLines/checkboxPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Checkbox } from \"../../primitives/checkbox\";\r\nimport type { CheckboxProps } from \"../../primitives/checkbox\";\r\n\r\n/**\r\n * Wraps a checkbox in a property line\r\n * @param props - PropertyLineProps and CheckboxProps\r\n * @returns property-line wrapped checkbox\r\n */\r\nexport const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Checkbox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"checkboxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA4E,CAAC,KAAK,EAAE,EAAE;IACnH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Checkbox } from \"../../primitives/checkbox\";\r\n\r\n/**\r\n * Wraps a checkbox in a property line\r\n * @param props - PropertyLineProps and CheckboxProps\r\n * @returns property-line wrapped checkbox\r\n */\r\nexport const CheckboxPropertyLine: FunctionComponent<PropertyLineProps<boolean> & PrimitiveProps<boolean>> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Checkbox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/colorPropertyLine.d.ts

@@ -3,6 +3,6 @@ import type { PropertyLineProps } from "./propertyLine.js";
 import type { Color3 } from "@babylonjs/core/Maths/math.color.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
 import type { ColorPickerProps } from "../../primitives/colorPicker.js";
-export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;
-export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;
-export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;
+export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;
+export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;
+export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;

package/fluent/hoc/propertyLines/colorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAKhE;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,GAA0B,EAAE,EAAE;QACjE,IAAI,QAAyB,CAAC;QAC9B,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YACd,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACzB,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;QAChC,CAAC;QAED,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C;QAC/D,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,eAAe,EACX,8BACI,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC9H,KAAK,YAAY,MAAM,IAAI,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,IAChK,YAGP,KAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,KAAK,GAAI,GACjE,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC;AACvH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            ref={ref}\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n                    <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n                    <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n                    {color instanceof Color4 && <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;\r\n"]}
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAKhE;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,GAA0B,EAAE,EAAE;QACjE,IAAI,QAAyB,CAAC;QAC9B,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YACd,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACzB,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;QAChC,CAAC;QAED,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C;QAC/D,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,eAAe,EACX,8BACI,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC9H,KAAK,YAAY,MAAM,IAAI,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,IAChK,YAGP,KAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,KAAK,GAAI,GACjE,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA4F,CAAC;AAC/H,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA4F,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            ref={ref}\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n                    <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n                    <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n                    {color instanceof Color4 && <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;\r\n"]}

package/fluent/hoc/propertyLines/dropdownPropertyLine.d.ts

@@ -1,34 +1,13 @@
-import type { Nullable } from "@babylonjs/core/types.js";
 import type { AcceptedDropdownValue, DropdownProps } from "../../primitives/dropdown.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, "includeNullAs"> & PropertyLineProps;
+type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, "includeNullAs"> & PropertyLineProps<AcceptedDropdownValue>;
 /**
- * Dropdown component for explicitly defined number values.
- * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.
- * If value can be null, use NullableNumberDropdownPropertyLine instead.
+ * Dropdown component for number values.
  */
 export declare const NumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<number>>;
 /**
- * Dropdown component for explicitly defined string values.
- * If value can be undefined, use OptionalStringDropdownPropertyLine instead.
- * If value can be null, use NullableStringDropdownPropertyLine instead.
+ * Dropdown component for string values
  */
 export declare const StringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<string>>;
-/**
- * Dropdown component for Nullable<number> values.
- */
-export declare const NullableNumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;
-/**
- * Dropdown component for Nullable<string> values.
- */
-export declare const NullableStringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;
-/**
- * Dropdown component for number | undefined values
- */
-export declare const OptionalNumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<number | undefined>>;
-/**
- * Dropdown component for string | undefined values
- */
-export declare const OptionalStringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<string | undefined>>;
 export {};

package/fluent/hoc/propertyLines/dropdownPropertyLine.js

@@ -9,34 +9,12 @@ import { PropertyLine } from "./propertyLine.js";
 const DropdownPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
 };
-const NullableDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" });
-const OptionalDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "undefined" });
 /**
- * Dropdown component for explicitly defined number values.
- * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.
- * If value can be null, use NullableNumberDropdownPropertyLine instead.
+ * Dropdown component for number values.
  */
 export const NumberDropdownPropertyLine = DropdownPropertyLine;
 /**
- * Dropdown component for explicitly defined string values.
- * If value can be undefined, use OptionalStringDropdownPropertyLine instead.
- * If value can be null, use NullableStringDropdownPropertyLine instead.
+ * Dropdown component for string values
  */
 export const StringDropdownPropertyLine = DropdownPropertyLine;
-/**
- * Dropdown component for Nullable<number> values.
- */
-export const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine;
-/**
- * Dropdown component for Nullable<string> values.
- */
-export const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine;
-/**
- * Dropdown component for number | undefined values
- */
-export const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine;
-/**
- * Dropdown component for string | undefined values
- */
-export const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine;
 //# sourceMappingURL=dropdownPropertyLine.js.map

package/fluent/hoc/propertyLines/dropdownPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAAC;AAC9K,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nconst NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"null\" />;\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAO9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAuG,CAAC,KAAK,EAAE,EAAE;IACvI,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC","sourcesContent":["import { Dropdown } from \"../../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\n// In a follow-up PR i will remove the nullAs concept from dropdown\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps<AcceptedDropdownValue>;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps<AcceptedDropdownValue>> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\n/**\r\n * Dropdown component for number values.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for string values\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n"]}

package/fluent/hoc/propertyLines/hexPropertyLine.d.ts

@@ -1,9 +1,10 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 import type { InputHexProps } from "../../primitives/colorPicker.js";
+import type { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
 /**
  * Wraps a hex input in a property line
  * @param props - PropertyLineProps and InputHexProps
  * @returns property-line wrapped input hex component
  */
-export declare const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps>;
+export declare const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps<Color3 | Color4>>;

package/fluent/hoc/propertyLines/hexPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"hexPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAyD,CAAC,KAAK,EAAE,EAAE;IAC3F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,aAAa,OAAK,KAAK,GAAI,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { InputHexField } from \"../../primitives/colorPicker\";\r\nimport type { InputHexProps } from \"../../primitives/colorPicker\";\r\n\r\n/**\r\n * Wraps a hex input in a property line\r\n * @param props - PropertyLineProps and InputHexProps\r\n * @returns property-line wrapped input hex component\r\n */\r\nexport const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <InputHexField {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"hexPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAI7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAA0E,CAAC,KAAK,EAAE,EAAE;IAC5G,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,aAAa,OAAK,KAAK,GAAI,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { InputHexField } from \"../../primitives/colorPicker\";\r\nimport type { InputHexProps } from \"../../primitives/colorPicker\";\r\nimport type { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\n/**\r\n * Wraps a hex input in a property line\r\n * @param props - PropertyLineProps and InputHexProps\r\n * @returns property-line wrapped input hex component\r\n */\r\nexport const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps<Color3 | Color4>> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <InputHexField {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/inputPropertyLine.d.ts

@@ -6,10 +6,10 @@ import type { InputProps } from "../../primitives/input.js";
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
+export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps<string>>;
 /**
  * Wraps a number input in a property line
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export declare const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;
+export declare const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps<number>>;

package/fluent/hoc/propertyLines/inputPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACvG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACzG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,WAAW,OAAK,KAAK,GAAI,GACf,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { NumberInput, TextInput } from \"../../primitives/input\";\r\nimport type { InputProps } from \"../../primitives/input\";\r\n\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <NumberInput {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}
+{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAsE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC/G,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAsE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,WAAW,OAAK,KAAK,GAAI,GACf,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { NumberInput, TextInput } from \"../../primitives/input\";\r\nimport type { InputProps } from \"../../primitives/input\";\r\n\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps<string>> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps<number>> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <NumberInput {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/hoc/propertyLines/linkPropertyLine.d.ts

@@ -1,8 +1,7 @@
+import type { ImmutablePrimitiveProps } from "../../primitives/primitive.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-type LinkProps = {
-    value: string;
-    tooltip?: string;
+type LinkProps = ImmutablePrimitiveProps<string> & {
     onLink?: () => void;
     url?: string;
 };
@@ -11,5 +10,5 @@ type LinkProps = {
  * @param props - PropertyLineProps and LinkProps
  * @returns property-line wrapped link
  */
-export declare const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps>;
+export declare const LinkPropertyLine: FunctionComponent<PropertyLineProps<string> & LinkProps>;
 export {};

package/fluent/hoc/propertyLines/linkPropertyLine.js

@@ -8,6 +8,6 @@ import { Link } from "../../primitives/link.js";
  * @returns property-line wrapped link
  */
 export const LinkPropertyLine = (props) => {
-    return (_jsx(PropertyLine, { ...props, children: _jsx(Link, { inline: true, appearance: "subtle", onClick: () => props.onLink?.(), href: props.url, title: props.tooltip, children: _jsx(Body1, { children: props.value }) }) }));
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Link, { inline: true, appearance: "subtle", onClick: () => props.onLink?.(), href: props.url, title: props.title, children: _jsx(Body1, { children: props.value }) }) }));
 };
 //# sourceMappingURL=linkPropertyLine.js.map

package/fluent/hoc/propertyLines/linkPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAW7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqD,CAAC,KAAK,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,IAAI,IAAC,MAAM,QAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,YACnG,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACzB,GACI,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { Link } from \"../../primitives/link\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype LinkProps = {\r\n    value: string;\r\n    tooltip?: string;\r\n    onLink?: () => void;\r\n    url?: string;\r\n};\r\n\r\n/**\r\n * Wraps a link in a property line\r\n * @param props - PropertyLineProps and LinkProps\r\n * @returns property-line wrapped link\r\n */\r\nexport const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Link inline appearance=\"subtle\" onClick={() => props.onLink?.()} href={props.url} title={props.tooltip}>\r\n                <Body1>{props.value}</Body1>\r\n            </Link>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"linkPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6D,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,IAAI,IAAC,MAAM,QAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YACjG,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACzB,GACI,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { Link } from \"../../primitives/link\";\r\nimport type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype LinkProps = ImmutablePrimitiveProps<string> & {\r\n    onLink?: () => void;\r\n    url?: string;\r\n};\r\n\r\n/**\r\n * Wraps a link in a property line\r\n * @param props - PropertyLineProps and LinkProps\r\n * @returns property-line wrapped link\r\n */\r\nexport const LinkPropertyLine: FunctionComponent<PropertyLineProps<string> & LinkProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Link inline appearance=\"subtle\" onClick={() => props.onLink?.()} href={props.url} title={props.title}>\r\n                <Body1>{props.value}</Body1>\r\n            </Link>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/propertyLine.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent, HTMLProps, PropsWithChildren } from "react";
-export type PropertyLineProps = {
+import type { PrimitiveProps } from "../../primitives/primitive.js";
+type BasePropertyLineProps = {
     /**
      * The name of the property to display in the property line.
      */
@@ -16,10 +17,17 @@ export type PropertyLineProps = {
      * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text
      */
     docLink?: string;
-} & ({
-    expandedContent?: undefined;
-    expandByDefault?: never;
-} | {
+};
+type NullableProperty<ValueT> = {
+    nullable: true;
+    value: ValueT;
+    onChange: (value: ValueT) => void;
+    defaultValue?: ValueT;
+};
+type NonNullableProperty = {
+    nullable?: false;
+};
+type ExpandableProperty = {
     /**
      * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
      */
@@ -28,26 +36,11 @@ export type PropertyLineProps = {
      * If true, the expanded content will be shown by default.
      */
     expandByDefault?: boolean;
-});
-export declare const LineContainer: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export type BaseComponentProps<T> = {
-    /**
-     * The value of the property to be displayed and modified.
-     */
-    value: T;
-    /**
-     * Callback function to handle changes to the value
-     */
-    onChange: (value: T) => void;
-    /**
-     * Optional flag to disable the component, preventing any interaction.
-     */
-    disabled?: boolean;
-    /**
-     * Optional class name to apply custom styles to the component.
-     */
-    className?: string;
 };
+type NonExpandableProperty = {
+    expandedContent?: undefined;
+};
+export type PropertyLineProps<ValueT> = BasePropertyLineProps & (NullableProperty<ValueT> | NonNullableProperty) & (ExpandableProperty | NonExpandableProperty);
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
  *
@@ -55,5 +48,7 @@ export type BaseComponentProps<T> = {
  * @returns A React element representing the property line.
  *
  */
-export declare const PropertyLine: import("react").ForwardRefExoticComponent<PropsWithChildren<PropertyLineProps> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
+export declare const PropertyLine: import("react").ForwardRefExoticComponent<PropsWithChildren<PropertyLineProps<any>> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LineContainer: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PlaceholderPropertyLine: FunctionComponent<PrimitiveProps<any> & PropertyLineProps<any>>;
+export {};

package/fluent/hoc/propertyLines/propertyLine.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from "@fluentui/react-components";
+import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, Checkbox, makeStyles, tokens } from "@fluentui/react-components";
 import { Collapse } from "@fluentui/react-motion-components-preview";
 import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
-import { useContext, useState, forwardRef } from "react";
+import { useContext, useState, forwardRef, cloneElement, isValidElement, useRef } from "react";
 import { copyCommandToClipboard } from "../../../copyCommandToClipboard.js";
 import { ToolContext } from "../fluentToolWrapper.js";
 const usePropertyLineStyles = makeStyles({
@@ -55,10 +55,6 @@ const usePropertyLineStyles = makeStyles({
     },
     expandedContent: {},
 });
-export const LineContainer = forwardRef((props, ref) => {
-    const classes = usePropertyLineStyles();
-    return (_jsx("div", { ref: ref, className: classes.container, ...props, children: props.children }));
-});
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
  *
@@ -68,15 +64,41 @@ export const LineContainer = forwardRef((props, ref) => {
  */
 export const PropertyLine = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
-    const [expanded, setExpanded] = useState(props.expandByDefault ?? false);
-    const { label, onCopy, expandedContent, children } = props;
+    const { label, onCopy, expandedContent, children, nullable } = props;
+    const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
+    const cachedVal = useRef(nullable ? props.value : null);
     const { disableCopy } = useContext(ToolContext);
     const description = props.description ?? (props.docLink ? _jsx(Link, { href: props.docLink, children: props.description ?? "Docs" }) : props.description);
-    return (_jsxs(LineContainer, { ref: ref, children: [_jsxs("div", { className: classes.line, children: [_jsx(InfoLabel, { className: classes.label, info: description, children: _jsx(Body1Strong, { className: classes.labelText, children: label }) }), _jsxs("div", { className: classes.rightContent, children: [_jsx("div", { className: classes.fillRestOfRightContentWidth, children: children }), expandedContent && (_jsx(ToggleButton, { appearance: "transparent", icon: expanded ? _jsx(SubtractFilled, {}) : _jsx(AddFilled, {}), className: classes.button, checked: expanded, onClick: (e) => {
+    // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
+    const processedChildren = nullable && isValidElement(children)
+        ? cloneElement(children, {
+            ...children.props,
+            disabled: props.value == null || children.props.disabled,
+            value: props.value ?? props.defaultValue,
+            defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
+        })
+        : children;
+    return (_jsxs(LineContainer, { ref: ref, children: [_jsxs("div", { className: classes.line, children: [_jsx(InfoLabel, { className: classes.label, info: description, title: label, children: _jsx(Body1Strong, { className: classes.labelText, children: label }) }), _jsxs("div", { className: classes.rightContent, children: [nullable && (
+                            // Since this checkbox is used to toggle null, 'checked' means 'non null'
+                            _jsx(Checkbox, { checked: !(props.value == null), onChange: (_, data) => {
+                                    if (data.checked) {
+                                        // if checked this means we are returning to non-null, use cached value if exists. If no cached value, use default value
+                                        cachedVal.current != null ? props.onChange(cachedVal.current) : props.onChange(props.defaultValue);
+                                    }
+                                    else {
+                                        // if moving to un-checked state, this means moving to null value. Cache the old value and tell props.onChange(null)
+                                        cachedVal.current = props.value;
+                                        props.onChange(null);
+                                    }
+                                }, title: "Toggle null state" })), _jsx("div", { className: classes.fillRestOfRightContentWidth, children: processedChildren }), expandedContent && (_jsx(ToggleButton, { appearance: "transparent", icon: expanded ? _jsx(SubtractFilled, {}) : _jsx(AddFilled, {}), className: classes.button, checked: expanded, onClick: (e) => {
                                     e.stopPropagation();
                                     setExpanded((expanded) => !expanded);
                                 } })), onCopy && !disableCopy && (_jsx(Button, { className: classes.button, id: "copyProperty", icon: _jsx(CopyRegular, {}), onClick: () => copyCommandToClipboard(onCopy()), title: "Copy to clipboard" }))] })] }), _jsx(Collapse, { visible: expanded && !!expandedContent, children: _jsx("div", { className: classes.expandedContent, children: expandedContent }) })] }));
 });
+export const LineContainer = forwardRef((props, ref) => {
+    const classes = usePropertyLineStyles();
+    return (_jsx("div", { ref: ref, className: classes.container, ...props, children: props.children }));
+});
 export const PlaceholderPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { children: props.value }) }));
 };

package/fluent/hoc/propertyLines/propertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Collapse } from \"@fluentui/react-motion-components-preview\";\r\nimport { AddFilled, CopyRegular, SubtractFilled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, HTMLProps, PropsWithChildren } from \"react\";\r\nimport { useContext, useState, forwardRef } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"../fluentToolWrapper\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n    container: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\", // Stack line + expanded content\r\n        padding: `${tokens.spacingVerticalXS} 0px`,\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    line: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-start\",\r\n        width: \"100%\",\r\n    },\r\n    label: {\r\n        flex: \"1 1 0\",\r\n        minWidth: \"50px\",\r\n        textAlign: \"left\",\r\n        whiteSpace: \"nowrap\",\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n    },\r\n    labelText: {\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n    rightContent: {\r\n        flex: \"0 1 auto\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-end\",\r\n        gap: tokens.spacingHorizontalS,\r\n    },\r\n    button: {\r\n        marginLeft: tokens.spacingHorizontalXXS,\r\n        margin: 0,\r\n        padding: 0,\r\n        border: 0,\r\n        minWidth: 0,\r\n    },\r\n    fillRestOfRightContentWidth: {\r\n        flex: 1,\r\n        display: \"flex\",\r\n        justifyContent: \"flex-end\",\r\n        alignItems: \"center\",\r\n    },\r\n    expandButton: {\r\n        margin: 0,\r\n    },\r\n    expandedContent: {},\r\n});\r\n\r\nexport type PropertyLineProps = {\r\n    /**\r\n     * The name of the property to display in the property line.\r\n     */\r\n    label: string;\r\n    /**\r\n     * Optional description for the property, shown on hover of the info icon\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Optional function returning a string to copy to clipboard.\r\n     */\r\n    onCopy?: () => string;\r\n    /**\r\n     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text\r\n     */\r\n    docLink?: string;\r\n} & (\r\n    | {\r\n          expandedContent?: undefined;\r\n          expandByDefault?: never;\r\n      }\r\n    | {\r\n          /**\r\n           * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n           */\r\n          expandedContent: JSX.Element;\r\n\r\n          /**\r\n           * If true, the expanded content will be shown by default.\r\n           */\r\n          expandByDefault?: boolean;\r\n      }\r\n);\r\n\r\nexport const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren<HTMLProps<HTMLDivElement>>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    return (\r\n        <div ref={ref} className={classes.container} {...props}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n});\r\n\r\nexport type BaseComponentProps<T> = {\r\n    /**\r\n     * The value of the property to be displayed and modified.\r\n     */\r\n    value: T;\r\n    /**\r\n     * Callback function to handle changes to the value\r\n     */\r\n    onChange: (value: T) => void;\r\n    /**\r\n     * Optional flag to disable the component, preventing any interaction.\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional class name to apply custom styles to the component.\r\n     */\r\n    className?: string;\r\n};\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<PropertyLineProps>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    const [expanded, setExpanded] = useState(props.expandByDefault ?? false);\r\n\r\n    const { label, onCopy, expandedContent, children } = props;\r\n\r\n    const { disableCopy } = useContext(ToolContext);\r\n\r\n    const description = props.description ?? (props.docLink ? <Link href={props.docLink}>{props.description ?? \"Docs\"}</Link> : props.description);\r\n\r\n    return (\r\n        <LineContainer ref={ref}>\r\n            <div className={classes.line}>\r\n                <InfoLabel className={classes.label} info={description}>\r\n                    <Body1Strong className={classes.labelText}>{label}</Body1Strong>\r\n                </InfoLabel>\r\n                <div className={classes.rightContent}>\r\n                    <div className={classes.fillRestOfRightContentWidth}>{children}</div>\r\n\r\n                    {expandedContent && (\r\n                        <ToggleButton\r\n                            appearance=\"transparent\"\r\n                            icon={expanded ? <SubtractFilled /> : <AddFilled />}\r\n                            className={classes.button}\r\n                            checked={expanded}\r\n                            onClick={(e) => {\r\n                                e.stopPropagation();\r\n                                setExpanded((expanded) => !expanded);\r\n                            }}\r\n                        />\r\n                    )}\r\n\r\n                    {onCopy && !disableCopy && (\r\n                        <Button className={classes.button} id=\"copyProperty\" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n                    )}\r\n                </div>\r\n            </div>\r\n            <Collapse visible={expanded && !!expandedContent}>\r\n                <div className={classes.expandedContent}>{expandedContent}</div>\r\n            </Collapse>\r\n        </LineContainer>\r\n    );\r\n});\r\n\r\nexport const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Body1>{props.value}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, Checkbox, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Collapse } from \"@fluentui/react-motion-components-preview\";\r\nimport { AddFilled, CopyRegular, SubtractFilled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, HTMLProps, PropsWithChildren } from \"react\";\r\nimport { useContext, useState, forwardRef, cloneElement, isValidElement, useRef } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"../fluentToolWrapper\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n    container: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\", // Stack line + expanded content\r\n        padding: `${tokens.spacingVerticalXS} 0px`,\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    line: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-start\",\r\n        width: \"100%\",\r\n    },\r\n    label: {\r\n        flex: \"1 1 0\",\r\n        minWidth: \"50px\",\r\n        textAlign: \"left\",\r\n        whiteSpace: \"nowrap\",\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n    },\r\n    labelText: {\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n    rightContent: {\r\n        flex: \"0 1 auto\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-end\",\r\n        gap: tokens.spacingHorizontalS,\r\n    },\r\n    button: {\r\n        marginLeft: tokens.spacingHorizontalXXS,\r\n        margin: 0,\r\n        padding: 0,\r\n        border: 0,\r\n        minWidth: 0,\r\n    },\r\n    fillRestOfRightContentWidth: {\r\n        flex: 1,\r\n        display: \"flex\",\r\n        justifyContent: \"flex-end\",\r\n        alignItems: \"center\",\r\n    },\r\n    expandButton: {\r\n        margin: 0,\r\n    },\r\n    expandedContent: {},\r\n});\r\n\r\ntype BasePropertyLineProps = {\r\n    /**\r\n     * The name of the property to display in the property line.\r\n     */\r\n    label: string;\r\n    /**\r\n     * Optional description for the property, shown on hover of the info icon\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Optional function returning a string to copy to clipboard.\r\n     */\r\n    onCopy?: () => string;\r\n    /**\r\n     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text\r\n     */\r\n    docLink?: string;\r\n};\r\n\r\n// Only require value/onChange/defaultValue props if nullable is true\r\ntype NullableProperty<ValueT> = {\r\n    nullable: true;\r\n    value: ValueT;\r\n    onChange: (value: ValueT) => void;\r\n    defaultValue?: ValueT;\r\n};\r\n\r\ntype NonNullableProperty = {\r\n    nullable?: false;\r\n};\r\n\r\n// Only expect optional expandByDefault prop if expandedContent is defined\r\ntype ExpandableProperty = {\r\n    /**\r\n     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n     */\r\n    expandedContent: JSX.Element;\r\n\r\n    /**\r\n     * If true, the expanded content will be shown by default.\r\n     */\r\n    expandByDefault?: boolean;\r\n};\r\n\r\n// If expanded content is undefined, don't expect expandByDefault prop\r\ntype NonExpandableProperty = {\r\n    expandedContent?: undefined;\r\n};\r\n\r\nexport type PropertyLineProps<ValueT> = BasePropertyLineProps & (NullableProperty<ValueT> | NonNullableProperty) & (ExpandableProperty | NonExpandableProperty);\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<PropertyLineProps<any>>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    const { label, onCopy, expandedContent, children, nullable } = props;\r\n\r\n    const [expanded, setExpanded] = useState(\"expandByDefault\" in props ? props.expandByDefault : false);\r\n    const cachedVal = useRef(nullable ? props.value : null);\r\n\r\n    const { disableCopy } = useContext(ToolContext);\r\n\r\n    const description = props.description ?? (props.docLink ? <Link href={props.docLink}>{props.description ?? \"Docs\"}</Link> : props.description);\r\n\r\n    // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value\r\n    const processedChildren =\r\n        nullable && isValidElement(children)\r\n            ? cloneElement(children, {\r\n                  ...children.props,\r\n                  disabled: props.value == null || children.props.disabled,\r\n                  value: props.value ?? props.defaultValue,\r\n                  defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state\r\n              })\r\n            : children;\r\n\r\n    return (\r\n        <LineContainer ref={ref}>\r\n            <div className={classes.line}>\r\n                <InfoLabel className={classes.label} info={description} title={label}>\r\n                    <Body1Strong className={classes.labelText}>{label}</Body1Strong>\r\n                </InfoLabel>\r\n                <div className={classes.rightContent}>\r\n                    {nullable && (\r\n                        // Since this checkbox is used to toggle null, 'checked' means 'non null'\r\n                        <Checkbox\r\n                            checked={!(props.value == null)}\r\n                            onChange={(_, data) => {\r\n                                if (data.checked) {\r\n                                    // if checked this means we are returning to non-null, use cached value if exists. If no cached value, use default value\r\n                                    cachedVal.current != null ? props.onChange(cachedVal.current) : props.onChange(props.defaultValue);\r\n                                } else {\r\n                                    // if moving to un-checked state, this means moving to null value. Cache the old value and tell props.onChange(null)\r\n                                    cachedVal.current = props.value;\r\n                                    props.onChange(null);\r\n                                }\r\n                            }}\r\n                            title=\"Toggle null state\"\r\n                        />\r\n                    )}\r\n                    <div className={classes.fillRestOfRightContentWidth}>{processedChildren}</div>\r\n\r\n                    {expandedContent && (\r\n                        <ToggleButton\r\n                            appearance=\"transparent\"\r\n                            icon={expanded ? <SubtractFilled /> : <AddFilled />}\r\n                            className={classes.button}\r\n                            checked={expanded}\r\n                            onClick={(e) => {\r\n                                e.stopPropagation();\r\n                                setExpanded((expanded) => !expanded);\r\n                            }}\r\n                        />\r\n                    )}\r\n\r\n                    {onCopy && !disableCopy && (\r\n                        <Button className={classes.button} id=\"copyProperty\" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n                    )}\r\n                </div>\r\n            </div>\r\n            <Collapse visible={expanded && !!expandedContent}>\r\n                <div className={classes.expandedContent}>{expandedContent}</div>\r\n            </Collapse>\r\n        </LineContainer>\r\n    );\r\n});\r\n\r\nexport const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren<HTMLProps<HTMLDivElement>>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    return (\r\n        <div ref={ref} className={classes.container} {...props}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n});\r\n\r\nexport const PlaceholderPropertyLine: FunctionComponent<PrimitiveProps<any> & PropertyLineProps<any>> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Body1>{props.value}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/spinButtonPropertyLine.d.ts

@@ -0,0 +1,4 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { SpinButtonProps } from "../../primitives/spinButton.js";
+export declare const SpinButtonPropertyLine: FunctionComponent<PropertyLineProps<number> & SpinButtonProps>;

package/fluent/hoc/propertyLines/spinButtonPropertyLine.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { SpinButton } from "../../primitives/spinButton.js";
+export const SpinButtonPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(SpinButton, { ...props }) }));
+//# sourceMappingURL=spinButtonPropertyLine.js.map

package/fluent/hoc/propertyLines/spinButtonPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinButtonPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/spinButtonPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGzD,MAAM,CAAC,MAAM,sBAAsB,GAAmE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7G,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,UAAU,OAAK,KAAK,GAAI,GACd,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { SpinButton } from \"../../primitives/spinButton\";\r\nimport type { SpinButtonProps } from \"../../primitives/spinButton\";\r\n\r\nexport const SpinButtonPropertyLine: FunctionComponent<PropertyLineProps<number> & SpinButtonProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <SpinButton {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/hoc/propertyLines/switchPropertyLine.d.ts

@@ -6,4 +6,4 @@ import type { SwitchProps } from "../../primitives/switch.js";
  * @param props - The properties for the switch and property line
  * @returns A React element representing the property line with a switch
  */
-export declare const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps>;
+export declare const SwitchPropertyLine: FunctionComponent<PropertyLineProps<boolean> & SwitchProps>;

package/fluent/hoc/propertyLines/switchPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"switchPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAuD,CAAC,KAAK,EAAE,EAAE;IAC5F,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,8FAA8F;IAC9F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,MAAM,OAAK,WAAW,GAAI,GAChB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Switch } from \"../../primitives/switch\";\r\nimport type { SwitchProps } from \"../../primitives/switch\";\r\n/**\r\n * Wraps a switch in a property line\r\n * @param props - The properties for the switch and property line\r\n * @returns A React element representing the property line with a switch\r\n */\r\nexport const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps> = (props) => {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { label, ...switchProps } = props;\r\n    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Switch {...switchProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"switchPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAgE,CAAC,KAAK,EAAE,EAAE;IACrG,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,8FAA8F;IAC9F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,MAAM,OAAK,WAAW,GAAI,GAChB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Switch } from \"../../primitives/switch\";\r\nimport type { SwitchProps } from \"../../primitives/switch\";\r\n\r\n/**\r\n * Wraps a switch in a property line\r\n * @param props - The properties for the switch and property line\r\n * @returns A React element representing the property line with a switch\r\n */\r\nexport const SwitchPropertyLine: FunctionComponent<PropertyLineProps<boolean> & SwitchProps> = (props) => {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { label, ...switchProps } = props;\r\n    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Switch {...switchProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/syncedSliderPropertyLine.d.ts

@@ -1,6 +1,6 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { SyncedSliderProps } from "../../primitives/syncedSlider.js";
-type SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps;
+type SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps<number>;
 /**
  * Renders a simple wrapper around the SyncedSliderInput
  * @param props

package/fluent/hoc/propertyLines/syncedSliderPropertyLine.js

@@ -9,6 +9,6 @@ import { forwardRef } from "react";
  */
 export const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     const { label, description, ...sliderProps } = props;
-    return (_jsx(PropertyLine, { ref: ref, label: label, description: description, children: _jsx(SyncedSliderInput, { ...sliderProps }) }));
+    return (_jsx(PropertyLine, { ref: ref, ...props, children: _jsx(SyncedSliderInput, { ...sliderProps }) }));
 });
 //# sourceMappingURL=syncedSliderPropertyLine.js.map

package/fluent/hoc/propertyLines/syncedSliderPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncedSliderPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,UAAU,CAA4C,CAAC,KAAK,EAAE,GAAG,EAAsB,EAAE;IAC7H,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACH,KAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,YAC1D,KAAC,iBAAiB,OAAK,WAAW,GAAI,GAC3B,CAClB,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { SyncedSliderInput } from \"../../primitives/syncedSlider\";\r\nimport type { SyncedSliderProps } from \"../../primitives/syncedSlider\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps;\r\n/**\r\n * Renders a simple wrapper around the SyncedSliderInput\r\n * @param props\r\n * @returns\r\n */\r\nexport const SyncedSliderPropertyLine = forwardRef<HTMLDivElement, SyncedSliderPropertyProps>((props, ref): React.ReactElement => {\r\n    const { label, description, ...sliderProps } = props;\r\n    return (\r\n        <PropertyLine ref={ref} label={label} description={description}>\r\n            <SyncedSliderInput {...sliderProps} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n"]}
+{"version":3,"file":"syncedSliderPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,UAAU,CAA4C,CAAC,KAAK,EAAE,GAAG,EAAsB,EAAE;IAC7H,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACH,KAAC,YAAY,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YAC7B,KAAC,iBAAiB,OAAK,WAAW,GAAI,GAC3B,CAClB,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { SyncedSliderInput } from \"../../primitives/syncedSlider\";\r\nimport type { SyncedSliderProps } from \"../../primitives/syncedSlider\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps<number>;\r\n/**\r\n * Renders a simple wrapper around the SyncedSliderInput\r\n * @param props\r\n * @returns\r\n */\r\nexport const SyncedSliderPropertyLine = forwardRef<HTMLDivElement, SyncedSliderPropertyProps>((props, ref): React.ReactElement => {\r\n    const { label, description, ...sliderProps } = props;\r\n    return (\r\n        <PropertyLine ref={ref} {...props}>\r\n            <SyncedSliderInput {...sliderProps} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n"]}

package/fluent/hoc/propertyLines/textAreaPropertyLine.d.ts

@@ -0,0 +1,9 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { TextareaProps } from "../../primitives/textarea.js";
+/**
+ * Wraps textarea in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export declare const TextAreaPropertyLine: FunctionComponent<PropertyLineProps<string> & TextareaProps>;

package/fluent/hoc/propertyLines/textAreaPropertyLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { Textarea } from "../../primitives/textarea.js";
+/**
+ * Wraps textarea in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export const TextAreaPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Textarea, { ...props }) }));
+};
+//# sourceMappingURL=textAreaPropertyLine.js.map

package/fluent/hoc/propertyLines/textAreaPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textAreaPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/textAreaPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAiE,CAAC,KAAK,EAAE,EAAE;IACxG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Textarea } from \"../../primitives/textarea\";\r\nimport type { TextareaProps } from \"../../primitives/textarea\";\r\n/**\r\n * Wraps textarea in a property line\r\n * @param props - PropertyLineProps and TextProps\r\n * @returns property-line wrapped text\r\n */\r\nexport const TextAreaPropertyLine: FunctionComponent<PropertyLineProps<string> & TextareaProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Textarea {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/textPropertyLine.d.ts

@@ -1,13 +1,9 @@
+import type { ImmutablePrimitiveProps } from "../../primitives/primitive.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-type TextProps = {
-    value: string;
-    tooltip?: string;
-};
 /**
  * Wraps text in a property line
  * @param props - PropertyLineProps and TextProps
  * @returns property-line wrapped text
  */
-export declare const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps>;
-export {};
+export declare const TextPropertyLine: FunctionComponent<PropertyLineProps<string> & ImmutablePrimitiveProps<string>>;