npm - @babylonjs/shared-ui-components - Versions diffs - 8.21.1 → 8.22.0 - Mend

@babylonjs/shared-ui-components 8.21.1 → 8.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

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

@@ -1,7 +1,7 @@
 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<AcceptedDropdownValue>;
+type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = DropdownProps<V> & PropertyLineProps<V>;
 /**
  * Dropdown component for number values.
  */

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

	@@ -1 +1 @@
1	- {"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;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;~~AAMnC~~;;;;GAIG;AAEH,MAAM,oBAAoB,GAAG,UAAU,~~CAAkG~~,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;~~IACpJ~~,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,YAC7B,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH;;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 { forwardRef } from \"react\";\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\n\r\nconst DropdownPropertyLine = forwardRef<HTMLDivElement, ~~DropdownProps~~<AcceptedDropdownValue~~> & PropertyLineProps<AcceptedDropdownValue~~>>((props, ref) => {\r\n return (\r\n <PropertyLine {...props} ref={ref}>\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"]}
1	+ {"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;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAKnC;;;;GAIG;AAEH,MAAM,oBAAoB,GAAG,UAAU,CAAmE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,YAC7B,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH;;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 { forwardRef } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = DropdownProps<V> & PropertyLineProps<V>;\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\n\r\nconst DropdownPropertyLine = forwardRef<HTMLDivElement, DropdownPropertyLineProps<AcceptedDropdownValue>>((props, ref) => {\r\n return (\r\n <PropertyLine {...props} ref={ref}>\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/propertyLine.d.ts CHANGED Viewed

@@ -20,12 +20,21 @@ type BasePropertyLineProps = {
 };
 type NullableProperty<ValueT> = {
     nullable: true;
+    ignoreNullable: false;
     value: ValueT;
     onChange: (value: ValueT) => void;
     defaultValue?: ValueT;
 };
+type IgnoreNullable<ValueT> = {
+    ignoreNullable: true;
+    nullable: false;
+    value: ValueT;
+    onChange: (value: ValueT) => void;
+    defaultValue: ValueT;
+};
 type NonNullableProperty = {
     nullable?: false;
+    ignoreNullable?: false;
 };
 type ExpandableProperty = {
     /**
@@ -40,7 +49,7 @@ type ExpandableProperty = {
 type NonExpandableProperty = {
     expandedContent?: undefined;
 };
-export type PropertyLineProps<ValueT> = BasePropertyLineProps & (NullableProperty<ValueT> | NonNullableProperty) & (ExpandableProperty | NonExpandableProperty);
+export type PropertyLineProps<ValueT> = BasePropertyLineProps & (NullableProperty<ValueT> | NonNullableProperty | IgnoreNullable<ValueT>) & (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.
  *

package/fluent/hoc/propertyLines/propertyLine.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, cloneElement, isValidElement, useRef } from "react";
+import { Collapse } from "../../primitives/collapse.js";
 import { copyCommandToClipboard } from "../../../copyCommandToClipboard.js";
 import { ToolContext } from "../fluentToolWrapper.js";
 const usePropertyLineStyles = makeStyles({
@@ -53,7 +53,9 @@ const usePropertyLineStyles = makeStyles({
     expandButton: {
         margin: 0,
     },
-    expandedContent: {},
+    expandedContent: {
+        paddingLeft: "20px",
+    },
 });
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
@@ -64,22 +66,22 @@ const usePropertyLineStyles = makeStyles({
  */
 export const PropertyLine = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
-    const { label, onCopy, expandedContent, children, nullable } = props;
+    const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = 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);
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
-    const processedChildren = nullable && isValidElement(children)
+    const processedChildren = (nullable || ignoreNullable) && isValidElement(children)
         ? cloneElement(children, {
             ...children.props,
-            disabled: props.value == null || children.props.disabled,
+            disabled: children.props.disabled || (nullable && props.value == null),
             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'
+    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 && !ignoreNullable && (
+                            // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox 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
@@ -93,7 +95,7 @@ export const PropertyLine = forwardRef((props, ref) => {
                                 }, 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 }) })] }));
+                                } })), onCopy && !disableCopy && (_jsx(Button, { className: classes.button, id: "copyProperty", icon: _jsx(CopyRegular, {}), onClick: () => copyCommandToClipboard(onCopy()), title: "Copy to clipboard" }))] })] }), expandedContent && (_jsx(Collapse, { visible: !!expanded, children: _jsx("div", { className: classes.expandedContent, children: expandedContent }) }))] }));
 });
 export const LineContainer = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();

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

	@@ -1 +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, 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"]}
1	+ {"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACrI,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,SAAS,EAAE;QACP,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ,EAAE,gCAAgC;QACzD,OAAO,EAAE,GAAG,MAAM,CAAC,iBAAiB,MAAM;QAC1C,YAAY,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;KAChF;IACD,IAAI,EAAE;QACF,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,YAAY;QAC5B,KAAK,EAAE,MAAM;KAChB;IACD,KAAK,EAAE;QACH,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;IACD,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;KACvB;IACD,YAAY,EAAE;QACV,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,UAAU;QAC1B,GAAG,EAAE,MAAM,CAAC,kBAAkB;KACjC;IACD,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC,oBAAoB;QACvC,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,CAAC;KACd;IACD,2BAA2B,EAAE;QACzB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,UAAU;QAC1B,UAAU,EAAE,QAAQ;KACvB;IACD,YAAY,EAAE;QACV,MAAM,EAAE,CAAC;KACZ;IACD,eAAe,EAAE;QACb,WAAW,EAAE,MAAM;KACtB;CACJ,CAAC,CAAC;AAiEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAA4D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7G,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAErF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,iBAAiB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACrG,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAExD,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,YAAG,KAAK,CAAC,WAAW,IAAI,MAAM,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAE/I,6HAA6H;IAC7H,MAAM,iBAAiB,GACnB,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC;QACpD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE;YACnB,GAAG,QAAQ,CAAC,KAAK;YACjB,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC;YACtE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY;YACxC,YAAY,EAAE,SAAS,EAAE,sIAAsI;SAClK,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEnB,OAAO,CACH,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACnB,eAAK,SAAS,EAAE,OAAO,CAAC,IAAI,aACxB,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAChE,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,GAAe,GACxD,EACZ,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,QAAQ,IAAI,CAAC,cAAc,IAAI;4BAC5B,qIAAqI;4BACrI,KAAC,QAAQ,IACL,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;oCAClB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wCACf,wHAAwH;wCACxH,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;oCACvG,CAAC;yCAAM,CAAC;wCACJ,oHAAoH;wCACpH,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;wCAChC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;oCACzB,CAAC;gCACL,CAAC,EACD,KAAK,EAAC,mBAAmB,GAC3B,CACL,EACD,cAAK,SAAS,EAAE,OAAO,CAAC,2BAA2B,YAAG,iBAAiB,GAAO,EAE7E,eAAe,IAAI,CAChB,KAAC,YAAY,IACT,UAAU,EAAC,aAAa,EACxB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,EACnD,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oCACX,CAAC,CAAC,eAAe,EAAE,CAAC;oCACpB,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;gCACzC,CAAC,GACH,CACL,EAEA,MAAM,IAAI,CAAC,WAAW,IAAI,CACvB,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,EAAC,cAAc,EAAC,IAAI,EAAE,KAAC,WAAW,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,mBAAmB,GAAG,CAC5J,IACC,IACJ,EACL,eAAe,IAAI,CAChB,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,YACzB,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,eAAe,GAAO,GACzD,CACd,IACW,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAA+D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjH,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,KAAM,KAAK,YACjD,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAoE,CAAC,KAAK,EAAE,EAAE;IAC9G,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, Checkbox, makeStyles, tokens } from \"@fluentui/react-components\";\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 { Collapse } from \"../../primitives/collapse\";\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 paddingLeft: \"20px\",\r\n },\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 ignoreNullable: false;\r\n value: ValueT;\r\n onChange: (value: ValueT) => void;\r\n defaultValue?: ValueT;\r\n};\r\n\r\ntype IgnoreNullable<ValueT> = {\r\n ignoreNullable: true;\r\n nullable: false;\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 ignoreNullable?: 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 &\r\n (NullableProperty<ValueT> \| NonNullableProperty \| IgnoreNullable<ValueT>) &\r\n (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, ignoreNullable } = 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 \|\| ignoreNullable) && isValidElement(children)\r\n ? cloneElement(children, {\r\n ...children.props,\r\n disabled: children.props.disabled \|\| (nullable && props.value == null),\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 && !ignoreNullable && (\r\n // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox 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 {expandedContent && (\r\n <Collapse visible={!!expanded}>\r\n <div className={classes.expandedContent}>{expandedContent}</div>\r\n </Collapse>\r\n )}\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/stringifiedPropertyLine.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ImmutablePrimitiveProps } from "../../primitives/primitive.js";
-import type { PropertyLineProps } from "./propertyLine.js";
+import { type PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 type StringifiedPropertyLineProps = PropertyLineProps<number> & ImmutablePrimitiveProps<number> & {
     precision?: number;

package/fluent/hoc/propertyLines/stringifiedPropertyLine.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextPropertyLine } from "./textPropertyLine.js";
+import { PropertyLine } from "./propertyLine.js";
+import { Body1 } from "@fluentui/react-components";
 /**
  * Expects a numerical value and converts it toFixed(if precision is supplied) or toLocaleString
  * Can pass optional units to be appending to the end of the string
@@ -9,6 +10,6 @@ import { TextPropertyLine } from "./textPropertyLine.js";
 export const StringifiedPropertyLine = (props) => {
     const value = props.precision !== undefined ? props.value.toFixed(props.precision) : props.value.toLocaleString();
     const withUnits = props.units ? `${value} ${props.units}` : value;
-    return _jsx(TextPropertyLine, { ...props, nullable: false, value: withUnits });
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: props.title, children: withUnits }) }));
 };
 //# sourceMappingURL=stringifiedPropertyLine.js.map

package/fluent/hoc/propertyLines/stringifiedPropertyLine.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stringifiedPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/stringifiedPropertyLine.tsx"],"names":[],"mappings":";~~AAGA~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAQtD~~;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC9F,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAClH,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAClE,OAAO,KAAC,~~gBAAgB~~,OAAK,KAAK,~~EAAE~~,~~QAAQ~~,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAE~~,SAAS,~~GAAI~~,CAAC;~~AAC9E~~,CAAC,CAAC","sourcesContent":["import type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ~~TextPropertyLine~~ } from \"~~./textPropertyLine~~\";\r\n\r\ntype StringifiedPropertyLineProps = PropertyLineProps<number> &\r\n ImmutablePrimitiveProps<number> & {\r\n precision?: number;\r\n units?: string;\r\n };\r\n\r\n/*\r\n Expects a numerical value and converts it toFixed(if precision is supplied) or toLocaleString\r\n * Can pass optional units to be appending to the end of the string\r\n * @param props\r\n * @returns\r\n */\r\nexport const StringifiedPropertyLine: FunctionComponent<StringifiedPropertyLineProps> = (props) => {\r\n const value = props.precision !== undefined ? props.value.toFixed(props.precision) : props.value.toLocaleString();\r\n const withUnits = props.units ? `${value} ${props.units}` : value;\r\n return <~~TextPropertyLine~~ {...props} ~~nullable~~={~~false~~} ~~value=~~{withUnits} ~~/>;\~~r\n};\r\n"]}
1	+ {"version":3,"file":"stringifiedPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/stringifiedPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAQnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC9F,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAClH,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAClE,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAAG,SAAS,GAAS,GACnC,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport { PropertyLine, type PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Body1 } from \"@fluentui/react-components\";\r\n\r\ntype StringifiedPropertyLineProps = PropertyLineProps<number> &\r\n ImmutablePrimitiveProps<number> & {\r\n precision?: number;\r\n units?: string;\r\n };\r\n\r\n/*\r\n Expects a numerical value and converts it toFixed(if precision is supplied) or toLocaleString\r\n * Can pass optional units to be appending to the end of the string\r\n * @param props\r\n * @returns\r\n */\r\nexport const StringifiedPropertyLine: FunctionComponent<StringifiedPropertyLineProps> = (props) => {\r\n const value = props.precision !== undefined ? props.value.toFixed(props.precision) : props.value.toLocaleString();\r\n const withUnits = props.units ? `${value} ${props.units}` : value;\r\n return (\r\n <PropertyLine {...props}>\r\n <Body1 title={props.title}>{withUnits}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/vectorPropertyLine.js CHANGED Viewed

@@ -49,7 +49,7 @@ export const QuaternionPropertyLine = (props) => {
         setQuat(quat);
         props.onChange(quat);
     };
-    return props.useDegrees ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange })) : (_jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
+    return props.useDegrees ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange })) : (_jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
 };
 export const Vector2PropertyLine = TensorPropertyLine;
 export const Vector3PropertyLine = TensorPropertyLine;

package/fluent/hoc/propertyLines/vectorPropertyLine.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 \| Vector3 \| Vector4 \| Quaternion> = PropertyLineProps<V> &\r\n PrimitiveProps<V> & {\r\n /*\r\n If passed, all sliders will use this for the min value\r\n /\r\n min?: number;\r\n /\r\n If passed, all sliders will use this for the max value\r\n /\r\n max?: number;\r\n /\r\n If passed, the UX will use the conversion functions to display/update values\r\n /\r\n valueConverter?: {\r\n /\r\n Will call from(val) before displaying in the UX\r\n /\r\n from: (val: number) => number;\r\n /\r\n Will call to(val) before calling onChange\r\n /\r\n to: (val: number) => number;\r\n };\r\n };\r\n\r\nconst HasZ = (vector: Vector2 \| Vector3 \| Vector4 \| Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 \| Vector3 \| Vector4 \| Quaternion): vector is Vector4 => vector instanceof Vector4 \|\| vector instanceof Quaternion;\r\n\r\n/\r\n Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n /\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2 \| Vector3 \| Vector4 \| Quaternion>> = (props) => {\r\n const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n const formatted = (val: number) => converted(val).toFixed(2);\r\n\r\n const [vector, setVector] = useState(props.value);\r\n const { min, max } = props;\r\n\r\n const onChange = (val: number, key: \"x\" \| \"y\" \| \"z\" \| \"w\") => {\r\n const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n const newVector = vector.clone();\r\n (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n setVector(newVector);\r\n props.onChange(newVector);\r\n };\r\n\r\n return (\r\n <PropertyLine\r\n {...props}\r\n expandedContent={\r\n <>\r\n <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n {HasZ(vector) && <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />}\r\n {HasW(vector) && <SyncedSliderPropertyLine label=\"W\" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, \"w\")} />}\r\n </>\r\n }\r\n >\r\n <Body1>{`X: ${formatted(props.value.x)} \| Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` \| Z: ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? ` \| W: ${formatted(props.value.w)}` : \"\"}`}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n /\r\n Display angles as degrees instead of radians\r\n /\r\n useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n /\r\n Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n};\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n const [quat, setQuat] = useState(props.value);\r\n\r\n // Extract only the properties that exist on QuaternionPropertyLineProps\r\n const { useDegrees, ...restProps } = props;\r\n\r\n const onQuatChange = (val: Quaternion) => {\r\n setQuat(val);\r\n props.onChange(val);\r\n };\r\n\r\n const onEulerChange = (val: Vector3) => {\r\n const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n setQuat(quat);\r\n props.onChange(quat);\r\n };\r\n\r\n return props.useDegrees ? (\r\n <Vector3PropertyLine {...restProps} nullable={false} value={quat.toEulerAngles()} valueConverter={ToDegreesConverter} min={min} max={max} onChange={onEulerChange} />\r\n ) : (\r\n <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}
1	+ {"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 \| Vector3 \| Vector4 \| Quaternion> = PropertyLineProps<V> &\r\n PrimitiveProps<V> & {\r\n /*\r\n If passed, all sliders will use this for the min value\r\n /\r\n min?: number;\r\n /\r\n If passed, all sliders will use this for the max value\r\n /\r\n max?: number;\r\n /\r\n If passed, the UX will use the conversion functions to display/update values\r\n /\r\n valueConverter?: {\r\n /\r\n Will call from(val) before displaying in the UX\r\n /\r\n from: (val: number) => number;\r\n /\r\n Will call to(val) before calling onChange\r\n /\r\n to: (val: number) => number;\r\n };\r\n };\r\n\r\nconst HasZ = (vector: Vector2 \| Vector3 \| Vector4 \| Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 \| Vector3 \| Vector4 \| Quaternion): vector is Vector4 => vector instanceof Vector4 \|\| vector instanceof Quaternion;\r\n\r\n/\r\n Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n /\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2 \| Vector3 \| Vector4 \| Quaternion>> = (props) => {\r\n const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n const formatted = (val: number) => converted(val).toFixed(2);\r\n\r\n const [vector, setVector] = useState(props.value);\r\n const { min, max } = props;\r\n\r\n const onChange = (val: number, key: \"x\" \| \"y\" \| \"z\" \| \"w\") => {\r\n const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n const newVector = vector.clone();\r\n (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n setVector(newVector);\r\n props.onChange(newVector);\r\n };\r\n\r\n return (\r\n <PropertyLine\r\n {...props}\r\n expandedContent={\r\n <>\r\n <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n {HasZ(vector) && <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />}\r\n {HasW(vector) && <SyncedSliderPropertyLine label=\"W\" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, \"w\")} />}\r\n </>\r\n }\r\n >\r\n <Body1>{`X: ${formatted(props.value.x)} \| Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` \| Z: ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? ` \| W: ${formatted(props.value.w)}` : \"\"}`}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n /\r\n Display angles as degrees instead of radians\r\n /\r\n useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n /\r\n Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n};\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n const [quat, setQuat] = useState(props.value);\r\n\r\n // Extract only the properties that exist on QuaternionPropertyLineProps\r\n const { useDegrees, ...restProps } = props;\r\n\r\n const onQuatChange = (val: Quaternion) => {\r\n setQuat(val);\r\n props.onChange(val);\r\n };\r\n\r\n const onEulerChange = (val: Vector3) => {\r\n const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n setQuat(quat);\r\n props.onChange(quat);\r\n };\r\n\r\n return props.useDegrees ? (\r\n <Vector3PropertyLine\r\n {...restProps}\r\n nullable={false}\r\n ignoreNullable={false}\r\n value={quat.toEulerAngles()}\r\n valueConverter={ToDegreesConverter}\r\n min={min}\r\n max={max}\r\n onChange={onEulerChange}\r\n />\r\n ) : (\r\n <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}

package/fluent/primitives/collapse.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { FunctionComponent, PropsWithChildren } from "react";
+type CollapseProps = {
+    visible: boolean;
+};
+/**
+ * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes
+ * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div
+ * @param props
+ * @returns
+ */
+export declare const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>>;
+export {};

package/fluent/primitives/collapse.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from "@fluentui/react-components";
+import { Collapse as FluentCollapse } from "@fluentui/react-motion-components-preview";
+const useCollapseStyles = makeStyles({
+    collapseContent: {
+        overflow: "hidden",
+    },
+});
+/**
+ * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes
+ * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div
+ * @param props
+ * @returns
+ */
+export const Collapse = (props) => {
+    const classes = useCollapseStyles();
+    return (_jsx(FluentCollapse, { visible: props.visible, children: _jsx("div", { className: classes.collapseContent, children: props.children }) }));
+};
+//# sourceMappingURL=collapse.js.map

package/fluent/primitives/collapse.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAOvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,YAClC,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,KAAK,CAAC,QAAQ,GAAO,GAClD,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n visible: boolean;\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n collapseContent: {\r\n overflow: \"hidden\",\r\n },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n const classes = useCollapseStyles();\r\n return (\r\n <FluentCollapse visible={props.visible}>\r\n <div className={classes.collapseContent}>{props.children}</div>\r\n </FluentCollapse>\r\n );\r\n};\r\n"]}

package/fluent/primitives/dropdown.d.ts CHANGED Viewed

@@ -1,9 +1,7 @@
 import type { FunctionComponent } from "react";
 import type { PrimitiveProps } from "./primitive.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-type DropdownOptionValue = string | number;
-export type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;
-export type DropdownOption = {
+export type AcceptedDropdownValue = string | number;
+export type DropdownOption<T extends AcceptedDropdownValue> = {
     /**
      * Defines the visible part of the option
      */
@@ -11,11 +9,10 @@ export type DropdownOption = {
     /**
      * Defines the value part of the option
      */
-    value: DropdownOptionValue;
+    value: T;
 };
 export type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> & {
-    options: readonly DropdownOption[];
-    includeNullAs?: "null" | "undefined";
+    options: readonly DropdownOption<V>[];
 };
 /**
  * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
@@ -24,4 +21,5 @@ export type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> &
  * @returns dropdown component
  */
 export declare const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>>;
-export {};
+export declare const NumberDropdown: FunctionComponent<DropdownProps<number>>;
+export declare const StringDropdown: FunctionComponent<DropdownProps<string>>;

package/fluent/primitives/dropdown.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 const useDropdownStyles = makeStyles({
     dropdownOption: {
         textAlign: "right",
@@ -16,19 +16,19 @@ const useDropdownStyles = makeStyles({
  */
 export const Dropdown = (props) => {
     const classes = useDropdownStyles();
-    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.
-    const options = useMemo(() => (props.includeNullAs ? [{ label: "<Not defined>", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options), [props.includeNullAs, props.options]);
-    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);
+    const { options, value } = props;
+    const [defaultVal, setDefaultVal] = useState(props.value);
     useEffect(() => {
-        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);
+        setDefaultVal(value);
     }, [props.value]);
-    return (_jsx(FluentDropdown, { size: "small", className: classes.dropdownOption, onOptionSelect: (evt, data) => {
+    return (_jsx(FluentDropdown, { disabled: props.disabled, size: "small", className: classes.dropdownOption, onOptionSelect: (evt, data) => {
             const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
             if (value !== undefined) {
                 setDefaultVal(value);
-                const nullVal = props.includeNullAs === "null" ? null : undefined;
-                value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);
+                props.onChange(value);
             }
         }, selectedOptions: [defaultVal.toString()], value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (_jsx(Option, { className: classes.optionsLine, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
 };
+export const NumberDropdown = Dropdown;
+export const StringDropdown = Dropdown;
 //# sourceMappingURL=dropdown.js.map

package/fluent/primitives/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,~~OAAO,EAAE,~~QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAKrD~~,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;~~AAqBH~~;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,~~mIAAmI;IACnI,~~MAAM,~~OAAO~~,~~GAAG,~~OAAO,~~CACnB,GAAG,~~EAAE,~~CAAC,CAAC,~~KAAK,~~CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,~~EAAE,~~KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,~~GAAG,KAAK,CAAC~~,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC5H,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CACvC,CAAC~~;~~IACF~~,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,~~IAAI,IAAI,~~CAAC,CAAC~~,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC~~;~~IAC1G~~,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,~~KAAK,IAAI,IAAI,~~CAAC~~,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC~~;~~IAC/E~~,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,~~MAAM,OAAO,GAAG,~~KAAK,CAAC,~~aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,~~QAAQ,CAAC,~~OAAO,CAAC,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~QAAQ,~~CAAC~~,KAAK,CAAC,CAAC~~;~~YACxF~~,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,~~MAAsB~~,EAAE,EAAE,CAAC,~~CACrC~~,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, ~~useMemo,~~ useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\~~nimport type { Nullable } from \"core/types\";\r\~~n\r\nconst useDropdownStyles = makeStyles({\r\n dropdownOption: {\r\n textAlign: \"right\",\r\n minWidth: \"40px\",\r\n },\r\n optionsLine: {},\r\n});\r\n\r\~~ntype~~ ~~DropdownOptionValue~~ = string \| number;\r\nexport type ~~AcceptedDropdownValue~~ = ~~Nullable<DropdownOptionValue~~> ~~\| undefined;\r\nexport type DropdownOption~~ = {\r\n /*\r\n Defines the visible part of the option\r\n /\r\n label: string;\r\n /\r\n Defines the value part of the option\r\n /\r\n value: ~~DropdownOptionValue~~;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> & {\r\n options: readonly DropdownOption[];\r\n~~\r\n includeNullAs?: \"null\" \| \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n~~};\r\n\r\n/\r\n Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n const classes = useDropdownStyles();\r\n ~~// This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n~~ const ~~options = useMemo(\r\n () => (props.includeNullAs ? [~~{ ~~label: \"<Not defined>\"~~, value: ~~Number.MAX_SAFE_INTEGER~~ }, ~~...props.options]~~ : props~~.options),\r\n [props.includeNullAs, props.options]\r\n )~~;\r\n const [defaultVal, setDefaultVal] = useState(props.value ~~== null ? Number.MAX_SAFE_INTEGER : props.value~~);\r\n useEffect(() => {\r\n setDefaultVal(~~props.~~value ~~== null ? Number.MAX_SAFE_INTEGER : props.value~~);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentDropdown\r\n size=\"small\"\r\n className={classes.dropdownOption}\r\n onOptionSelect={(evt, data) => {\r\n const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n if (value !== undefined) {\r\n setDefaultVal(value);\r\n ~~const nullVal =~~ props.~~includeNullAs === \"null\" ? null : undefined;\r\n value === Number.MAX_SAFE_INTEGER ? props.~~onChange(~~nullVal) : props.onChange(~~value);\r\n }\r\n }}\r\n selectedOptions={[defaultVal.toString()]}\r\n value={options.find((o) => o.value === defaultVal)?.label}\r\n >\r\n {options.map((option: DropdownOption) => (\r\n <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n {option.label}\r\n </Option>\r\n ))}\r\n </FluentDropdown>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAkBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAA6C,EAAE,EAAE,CAAC,CAC5D,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n dropdownOption: {\r\n textAlign: \"right\",\r\n minWidth: \"40px\",\r\n },\r\n optionsLine: {},\r\n});\r\n\r\nexport type AcceptedDropdownValue = string \| number;\r\nexport type DropdownOption<T extends AcceptedDropdownValue> = {\r\n /*\r\n Defines the visible part of the option\r\n /\r\n label: string;\r\n /\r\n Defines the value part of the option\r\n /\r\n value: T;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> & {\r\n options: readonly DropdownOption<V>[];\r\n};\r\n\r\n/\r\n Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n const classes = useDropdownStyles();\r\n const { options, value } = props;\r\n const [defaultVal, setDefaultVal] = useState(props.value);\r\n\r\n useEffect(() => {\r\n setDefaultVal(value);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentDropdown\r\n disabled={props.disabled}\r\n size=\"small\"\r\n className={classes.dropdownOption}\r\n onOptionSelect={(evt, data) => {\r\n const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n if (value !== undefined) {\r\n setDefaultVal(value);\r\n props.onChange(value);\r\n }\r\n }}\r\n selectedOptions={[defaultVal.toString()]}\r\n value={options.find((o) => o.value === defaultVal)?.label}\r\n >\r\n {options.map((option: DropdownOption<AcceptedDropdownValue>) => (\r\n <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n {option.label}\r\n </Option>\r\n ))}\r\n </FluentDropdown>\r\n );\r\n};\r\n\r\nexport const NumberDropdown = Dropdown as FunctionComponent<DropdownProps<number>>;\r\nexport const StringDropdown = Dropdown as FunctionComponent<DropdownProps<string>>;\r\n"]}

package/package.json CHANGED Viewed

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