@babylonjs/shared-ui-components 8.16.0 → 8.16.2

package/components/Button.d.ts

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-export type ButtonProps = {
+export type ButtonComponentProps = {
     disabled?: boolean;
     active?: boolean;
     onClick?: () => void;
@@ -8,4 +8,4 @@ export type ButtonProps = {
     title?: string;
     backgroundColor?: string;
 };
-export declare const Button: React.FC<PropsWithChildren<ButtonProps>>;
+export declare const ButtonComponent: React.FC<PropsWithChildren<ButtonComponentProps>>;

package/components/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./Button.module.scss";
 import { ClassNames } from "./classNames.js";
-export const Button = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
+export const ButtonComponent = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
     return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", smaller: size === "smaller", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, style: { backgroundColor }, children: children }));
 };
 //# sourceMappingURL=Button.js.map

package/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,MAAM,CAAC,MAAM,MAAM,GAA6C,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC7I,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CACjB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EACvJ,MAAM,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,YAEzB,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport * as styles from \"./Button.module.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n    disabled?: boolean;\r\n    active?: boolean;\r\n    onClick?: () => void;\r\n    color: \"light\" | \"dark\";\r\n    size: \"default\" | \"small\" | \"wide\" | \"smaller\";\r\n    title?: string;\r\n    backgroundColor?: string;\r\n};\r\n\r\nexport const Button: React.FC<PropsWithChildren<ButtonProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {\r\n    return (\r\n        <button\r\n            className={ClassNames(\r\n                { button: true, active, wide: size === \"wide\", small: size === \"small\", smaller: size === \"smaller\", light: color === \"light\", dark: color === \"dark\" },\r\n                styles\r\n            )}\r\n            disabled={disabled}\r\n            onClick={onClick}\r\n            title={title}\r\n            style={{ backgroundColor }}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa1C,MAAM,CAAC,MAAM,eAAe,GAAsD,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC/J,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CACjB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EACvJ,MAAM,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,YAEzB,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport * as styles from \"./Button.module.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\n// Will be deleted after fluent work complete\r\nexport type ButtonComponentProps = {\r\n    disabled?: boolean;\r\n    active?: boolean;\r\n    onClick?: () => void;\r\n    color: \"light\" | \"dark\";\r\n    size: \"default\" | \"small\" | \"wide\" | \"smaller\";\r\n    title?: string;\r\n    backgroundColor?: string;\r\n};\r\n\r\nexport const ButtonComponent: React.FC<PropsWithChildren<ButtonComponentProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {\r\n    return (\r\n        <button\r\n            className={ClassNames(\r\n                { button: true, active, wide: size === \"wide\", small: size === \"small\", smaller: size === \"smaller\", light: color === \"light\", dark: color === \"dark\" },\r\n                styles\r\n            )}\r\n            disabled={disabled}\r\n            onClick={onClick}\r\n            title={title}\r\n            style={{ backgroundColor }}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n};\r\n"]}

package/components/TextInputWithSubmit.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Button } from "./Button.js";
+import { ButtonComponent } from "./Button.js";
 import { Icon } from "./Icon.js";
 import * as style from "./TextInputWithSubmit.module.scss";
 import submitIcon from "../imgs/confirmGridElementDark.svg";
@@ -27,6 +27,6 @@ export const TextInputWithSubmit = (props) => {
         props.cancelSubmit?.();
         setValue("");
     };
-    return (_jsxs("div", { className: ClassNames({ line: true, valid, invalid: !valid }, style), children: [props.label && _jsx("label", { children: props.label }), _jsx("input", { className: style.input, type: "text", placeholder: props.placeholder, value: value, onChange: onChange }), _jsxs("div", { children: [_jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickSubmit, disabled: !valid, children: _jsx(Icon, { icon: submitIcon, color: "dark" }) }), _jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickCancel, children: _jsx(Icon, { icon: cancelIcon, color: "dark" }) })] })] }));
+    return (_jsxs("div", { className: ClassNames({ line: true, valid, invalid: !valid }, style), children: [props.label && _jsx("label", { children: props.label }), _jsx("input", { className: style.input, type: "text", placeholder: props.placeholder, value: value, onChange: onChange }), _jsxs("div", { children: [_jsx(ButtonComponent, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickSubmit, disabled: !valid, children: _jsx(Icon, { icon: submitIcon, color: "dark" }) }), _jsx(ButtonComponent, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickCancel, children: _jsx(Icon, { icon: cancelIcon, color: "dark" }) })] })] }));
 };
 //# sourceMappingURL=TextInputWithSubmit.js.map

package/components/TextInputWithSubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,mCAAmC,CAAC;AAE3D,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport * as style from \"./TextInputWithSubmit.module.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n    label?: string;\r\n    placeholder?: string;\r\n    submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n    validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n    cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n * @param props properties\r\n * @returns TextInputWithSubmit element\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n    const [value, setValue] = useState(\"\");\r\n    const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n    useEffect(() => {\r\n        setValid(props.validateValue ? props.validateValue(value) : true);\r\n    }, [value]);\r\n\r\n    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n        setValue(event.target.value);\r\n    };\r\n\r\n    const onClickSubmit = () => {\r\n        props.submitValue(value);\r\n    };\r\n\r\n    const onClickCancel = () => {\r\n        props.cancelSubmit?.();\r\n        setValue(\"\");\r\n    };\r\n\r\n    return (\r\n        <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n            {props.label && <label>{props.label}</label>}\r\n            <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n            <div>\r\n                <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n                    <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n                </Button>\r\n                <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n                    <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n                </Button>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,mCAAmC,CAAC;AAE3D,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,eAAe,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YAC5G,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GAC9B,EAClB,KAAC,eAAe,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GAC9B,IAChB,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { ButtonComponent } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport * as style from \"./TextInputWithSubmit.module.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n    label?: string;\r\n    placeholder?: string;\r\n    submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n    validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n    cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n * @param props properties\r\n * @returns TextInputWithSubmit element\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n    const [value, setValue] = useState(\"\");\r\n    const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n    useEffect(() => {\r\n        setValid(props.validateValue ? props.validateValue(value) : true);\r\n    }, [value]);\r\n\r\n    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n        setValue(event.target.value);\r\n    };\r\n\r\n    const onClickSubmit = () => {\r\n        props.submitValue(value);\r\n    };\r\n\r\n    const onClickCancel = () => {\r\n        props.cancelSubmit?.();\r\n        setValue(\"\");\r\n    };\r\n\r\n    return (\r\n        <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n            {props.label && <label>{props.label}</label>}\r\n            <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n            <div>\r\n                <ButtonComponent color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n                    <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n                </ButtonComponent>\r\n                <ButtonComponent color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n                    <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n                </ButtonComponent>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/buttonLine.d.ts

@@ -1,14 +1,8 @@
 import type { FunctionComponent } from "react";
-export type ButtonLineProps = {
-    label: string;
-    onClick: () => void;
-    disabled?: boolean;
-    icon?: string;
-    title?: string;
-};
+import type { ButtonProps } from "../primitives/button.js";
 /**
  * Wraps a button with a label in a line container
  * @param props Button props plus a label
  * @returns A button inside a line
  */
-export declare const ButtonLine: FunctionComponent<ButtonLineProps>;
+export declare const ButtonLine: FunctionComponent<ButtonProps>;

package/fluent/hoc/buttonLine.js

@@ -1,18 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Body1, Button, makeStyles, tokens } from "@fluentui/react-components";
-import { LineContainer } from "./propertyLine.js";
-const useButtonLineStyles = makeStyles({
-    button: {
-        border: `1px solid ${tokens.colorBrandBackground}`,
-    },
-});
+import { LineContainer } from "./propertyLines/propertyLine.js";
+import { Button } from "../primitives/button.js";
 /**
  * Wraps a button with a label in a line container
  * @param props Button props plus a label
  * @returns A button inside a line
  */
 export const ButtonLine = (props) => {
-    const classes = useButtonLineStyles();
-    return (_jsx(LineContainer, { children: _jsx(Button, { className: classes.button, ...props, children: _jsx(Body1, { children: props.label }) }) }));
+    return (_jsx(LineContainer, { children: _jsx(Button, { ...props }) }));
 };
 //# sourceMappingURL=buttonLine.js.map

package/fluent/hoc/buttonLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,mBAAmB,GAAG,UAAU,CAAC;IACnC,MAAM,EAAE;QACJ,MAAM,EAAE,aAAa,MAAM,CAAC,oBAAoB,EAAE;KACrD;CACJ,CAAC,CAAC;AAUH;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,OAAO,CACH,KAAC,aAAa,cACV,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,KAAM,KAAK,YACxC,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACvB,GACG,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1, Button, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { LineContainer } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nconst useButtonLineStyles = makeStyles({\r\n    button: {\r\n        border: `1px solid ${tokens.colorBrandBackground}`,\r\n    },\r\n});\r\n\r\nexport type ButtonLineProps = {\r\n    label: string;\r\n    onClick: () => void;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    title?: string;\r\n};\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {\r\n    const classes = useButtonLineStyles();\r\n    return (\r\n        <LineContainer>\r\n            <Button className={classes.button} {...props}>\r\n                <Body1>{props.label}</Body1>\r\n            </Button>\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAmC,CAAC,KAAK,EAAE,EAAE;IAChE,OAAO,CACH,KAAC,aAAa,cACV,KAAC,MAAM,OAAK,KAAK,GAAI,GACT,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Button } from \"../primitives/button\";\r\nimport type { ButtonProps } from \"../primitives/button\";\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonProps> = (props) => {\r\n    return (\r\n        <LineContainer>\r\n            <Button {...props} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/fileUploadLine.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from "react";
-import type { ButtonLineProps } from "./buttonLine.js";
-type FileUploadLineProps = Omit<ButtonLineProps, "onClick"> & {
+import type { ButtonProps } from "../primitives/button.js";
+type FileUploadLineProps = Omit<ButtonProps, "onClick"> & {
     onClick: (files: FileList) => void;
     accept: string;
 };

package/fluent/hoc/fileUploadLine.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ButtonLine } from "./buttonLine.js";
+import { ArrowUploadRegular } from "@fluentui/react-icons";
 export const FileUploadLine = (props) => {
     const inputRef = useRef(null);
     const handleButtonClick = () => {
@@ -13,6 +14,6 @@ export const FileUploadLine = (props) => {
         }
         evt.target.value = "";
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonLine, { onClick: handleButtonClick, label: props.label }), _jsx("input", { ref: inputRef, type: "file", accept: props.accept, style: { display: "none" }, onChange: handleChange })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonLine, { onClick: handleButtonClick, icon: ArrowUploadRegular, label: props.label }), _jsx("input", { ref: inputRef, type: "file", accept: props.accept, style: { display: "none" }, onChange: handleChange })] }));
 };
 //# sourceMappingURL=fileUploadLine.js.map

package/fluent/hoc/fileUploadLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileUploadLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,GAAwC,EAAE,EAAE;QAC9D,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,8BACI,KAAC,UAAU,IAAC,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAe,EACzE,gBAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAI,IAC/G,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ButtonLine } from \"./buttonLine\";\r\nimport type { ButtonLineProps } from \"./buttonLine\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonLineProps, \"onClick\"> & {\r\n    onClick: (files: FileList) => void;\r\n    accept: string;\r\n};\r\n\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const handleButtonClick = () => {\r\n        inputRef.current?.click();\r\n    };\r\n\r\n    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {\r\n        const files = evt.target.files;\r\n        if (files && files.length) {\r\n            props.onClick(files);\r\n        }\r\n        evt.target.value = \"\";\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <ButtonLine onClick={handleButtonClick} label={props.label}></ButtonLine>\r\n            <input ref={inputRef} type=\"file\" accept={props.accept} style={{ display: \"none\" }} onChange={handleChange} />\r\n        </>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"fileUploadLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAO3D,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,GAAwC,EAAE,EAAE;QAC9D,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,8BACI,KAAC,UAAU,IAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAe,EACnG,gBAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAI,IAC/G,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ButtonLine } from \"./buttonLine\";\r\nimport type { ButtonProps } from \"../primitives/button\";\r\nimport { ArrowUploadRegular } from \"@fluentui/react-icons\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonProps, \"onClick\"> & {\r\n    onClick: (files: FileList) => void;\r\n    accept: string;\r\n};\r\n\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const handleButtonClick = () => {\r\n        inputRef.current?.click();\r\n    };\r\n\r\n    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {\r\n        const files = evt.target.files;\r\n        if (files && files.length) {\r\n            props.onClick(files);\r\n        }\r\n        evt.target.value = \"\";\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <ButtonLine onClick={handleButtonClick} icon={ArrowUploadRegular} label={props.label}></ButtonLine>\r\n            <input ref={inputRef} type=\"file\" accept={props.accept} style={{ display: \"none\" }} onChange={handleChange} />\r\n        </>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/gradientList.d.ts

@@ -0,0 +1,14 @@
+import type { FunctionComponent } from "react";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+type GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {
+    label: string;
+    gradients: Nullable<Array<T>>;
+    addGradient: (step?: T) => void;
+    removeGradient: (step: T) => void;
+    onChange: (newGradient: T) => void;
+};
+export declare const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>>;
+export declare const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>>;
+export declare const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>>;
+export {};

package/fluent/hoc/gradientList.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../primitives/list.js";
+import { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from "../primitives/gradient.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+// Convert gradients to LineList items and sort by gradient value
+function GradientsToListItems(gradients) {
+    return (gradients?.map((gradient, index) => ({
+        id: index,
+        data: gradient,
+        sortBy: gradient.gradient,
+    })) ?? []);
+}
+const GradientList = (props) => {
+    const { gradients, type } = props;
+    const items = GradientsToListItems(gradients);
+    const deleteStep = (step) => {
+        props.removeGradient(step);
+    };
+    const addNewStep = () => {
+        if (items.length === 0) {
+            props.addGradient(); // Default
+        }
+        else {
+            switch (props.type) {
+                case "Factor": {
+                    const newStep = new FactorGradient(1, 1, 1);
+                    props.addGradient(newStep);
+                    break;
+                }
+                case "Color3": {
+                    const newStepColor3 = new Color3Gradient(1, Color3.White());
+                    props.addGradient(newStepColor3);
+                    break;
+                }
+                case "Color4": {
+                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));
+                    props.addGradient(newStepColor);
+                    break;
+                }
+            }
+        }
+    };
+    return (_jsx("div", { children: _jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => deleteStep(item.data), onAdd: addNewStep, renderItem: (item) => {
+                const gradient = item.data;
+                switch (props.type) {
+                    case "Factor":
+                        return (_jsx(FactorGradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.factor1 = newGradient.factor1;
+                                item.data.factor2 = newGradient.factor2;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color3":
+                        return (_jsx(Color3GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color = newGradient.color;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color4":
+                        return (_jsx(Color4GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color1 = newGradient.color1;
+                                item.data.color2 = newGradient.color2;
+                                props.onChange(newGradient);
+                            } }));
+                }
+            } }, type) }));
+};
+const FactorGradientCast = GradientList;
+const Color3GradientCast = GradientList;
+const Color4GradientCast = GradientList;
+export const FactorGradientList = (props) => _jsx(FactorGradientCast, { ...props, type: "Factor" });
+export const Color3GradientList = (props) => _jsx(Color3GradientCast, { ...props, type: "Color3" });
+export const Color4GradientList = (props) => _jsx(Color4GradientCast, { ...props, type: "Color4" });
+//# sourceMappingURL=gradientList.js.map

package/fluent/hoc/gradientList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport type { IValueGradient } from \"core/Misc/gradients\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientTypes = \"Factor\" | \"Color3\" | \"Color4\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n    label: string;\r\n    gradients: Nullable<Array<T>>;\r\n    addGradient: (step?: T) => void;\r\n    removeGradient: (step: T) => void;\r\n    onChange: (newGradient: T) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems(gradients: Nullable<Array<IValueGradient>>) {\r\n    return (\r\n        gradients?.map((gradient, index) => ({\r\n            id: index,\r\n            data: gradient,\r\n            sortBy: gradient.gradient,\r\n        })) ?? []\r\n    );\r\n}\r\n\r\nconst GradientList: FunctionComponent<GradientListProps<FactorGradient | Color3Gradient | Color4Gradient> & { type: GradientTypes }> = (props) => {\r\n    const { gradients, type } = props;\r\n    const items = GradientsToListItems(gradients);\r\n\r\n    const deleteStep = (step: FactorGradient | Color3Gradient | Color4Gradient) => {\r\n        props.removeGradient(step);\r\n    };\r\n\r\n    const addNewStep = () => {\r\n        if (items.length === 0) {\r\n            props.addGradient(); // Default\r\n        } else {\r\n            switch (props.type) {\r\n                case \"Factor\": {\r\n                    const newStep = new FactorGradient(1, 1, 1);\r\n                    props.addGradient(newStep);\r\n                    break;\r\n                }\r\n                case \"Color3\": {\r\n                    const newStepColor3 = new Color3Gradient(1, Color3.White());\r\n                    props.addGradient(newStepColor3);\r\n                    break;\r\n                }\r\n                case \"Color4\": {\r\n                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));\r\n                    props.addGradient(newStepColor);\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div>\r\n            <List\r\n                key={type}\r\n                addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n                items={items}\r\n                onDelete={(item) => deleteStep(item.data)}\r\n                onAdd={addNewStep}\r\n                renderItem={(item) => {\r\n                    const gradient = item.data;\r\n                    switch (props.type) {\r\n                        case \"Factor\":\r\n                            return (\r\n                                <FactorGradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: FactorGradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.factor1 = newGradient.factor1;\r\n                                        item.data.factor2 = newGradient.factor2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n\r\n                        case \"Color3\":\r\n                            return (\r\n                                <Color3GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color3Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color = newGradient.color;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                        case \"Color4\":\r\n                            return (\r\n                                <Color4GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color4Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color1 = newGradient.color1;\r\n                                        item.data.color2 = newGradient.color2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                    }\r\n                }}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst FactorGradientCast = GradientList as FunctionComponent<GradientListProps<FactorGradient> & { type: \"Factor\" }>;\r\nconst Color3GradientCast = GradientList as FunctionComponent<GradientListProps<Color3Gradient> & { type: \"Color3\" }>;\r\nconst Color4GradientCast = GradientList as FunctionComponent<GradientListProps<Color4Gradient> & { type: \"Color4\" }>;\r\n\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => <FactorGradientCast {...props} type=\"Factor\" />;\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => <Color3GradientCast {...props} type=\"Color3\" />;\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => <Color4GradientCast {...props} type=\"Color4\" />;\r\n"]}

package/fluent/hoc/{readonlyBooleanLine.d.ts → propertyLines/booleanBadgePropertyLine.d.ts}

@@ -5,6 +5,6 @@ import type { PropertyLineProps } from "./propertyLine.js";
  * @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 ReadonlyBooleanLine: FunctionComponent<PropertyLineProps & {
+export declare const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps & {
     value: boolean;
 }>;

package/fluent/hoc/{readonlyBooleanLine.js → propertyLines/booleanBadgePropertyLine.js}

@@ -6,5 +6,5 @@ import { PropertyLine } from "./propertyLine.js";
  * @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 const ReadonlyBooleanLine = (props) => (_jsx(PropertyLine, { label: props.label, children: _jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
-//# sourceMappingURL=readonlyBooleanLine.js.map
+export const BooleanBadgePropertyLine = (props) => (_jsx(PropertyLine, { label: props.label, children: _jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
+//# sourceMappingURL=booleanBadgePropertyLine.js.map

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

@@ -0,0 +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"]}

package/fluent/hoc/{checkboxPropertyLine.d.ts → propertyLines/checkboxPropertyLine.d.ts}

@@ -1,6 +1,6 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-import type { CheckboxProps } from "../primitives/checkbox.js";
+import type { CheckboxProps } from "../../primitives/checkbox.js";
 /**
  * Wraps a checkbox in a property line
  * @param props - PropertyLineProps and CheckboxProps

package/fluent/hoc/{checkboxPropertyLine.js → propertyLines/checkboxPropertyLine.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { Checkbox } from "../primitives/checkbox.js";
+import { Checkbox } from "../../primitives/checkbox.js";
 /**
  * Wraps a checkbox in a property line
  * @param props - PropertyLineProps and CheckboxProps

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

@@ -0,0 +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"]}

package/fluent/hoc/{colorPropertyLine.d.ts → propertyLines/colorPropertyLine.d.ts}

@@ -2,7 +2,7 @@ import type { FunctionComponent } from "react";
 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";
+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>;

package/fluent/hoc/{colorPropertyLine.js → propertyLines/colorPropertyLine.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { PropertyLine } from "./propertyLine.js";
-import { SyncedSliderLine } from "./syncedSliderLine.js";
+import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { ColorPickerPopup } from "../primitives/colorPicker.js";
+import { ColorPickerPopup } from "../../primitives/colorPicker.js";
 /**
  * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
  * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
@@ -28,7 +28,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
         setColor(newColor);
         props.onChange(newColor);
     };
-    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
 });
 export const Color3PropertyLine = ColorPropertyLine;
 export const Color4PropertyLine = ColorPropertyLine;

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

@@ -0,0 +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"]}

package/fluent/hoc/{dropdownPropertyLine.d.ts → propertyLines/dropdownPropertyLine.d.ts}

@@ -1,9 +1,8 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { AcceptedDropdownValue, DropdownProps } from "../primitives/dropdown.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;
-export declare const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>>;
 /**
  * Dropdown component for explicitly defined number values.
  * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.

package/fluent/hoc/{dropdownPropertyLine.js → propertyLines/dropdownPropertyLine.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown } from "../primitives/dropdown.js";
+import { Dropdown } from "../../primitives/dropdown.js";
 import { PropertyLine } from "./propertyLine.js";
 /**
  * Wraps a dropdown in a property line
@@ -9,7 +9,7 @@ import { PropertyLine } from "./propertyLine.js";
 const DropdownPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
 };
-export const NullableDropdownPropertyLine = (props) => (_jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" }));
+const NullableDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" });
 const OptionalDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "undefined" });
 /**
  * Dropdown component for explicitly defined number values.

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

@@ -0,0 +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"]}

package/fluent/hoc/{hexLineComponent.d.ts → propertyLines/hexPropertyLine.d.ts}

@@ -1,6 +1,6 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-import type { InputHexProps } from "../primitives/colorPicker.js";
+import type { InputHexProps } from "../../primitives/colorPicker.js";
 /**
  * Wraps a hex input in a property line
  * @param props - PropertyLineProps and InputHexProps

package/fluent/hoc/{hexLineComponent.js → propertyLines/hexPropertyLine.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { InputHexField } from "../primitives/colorPicker.js";
+import { InputHexField } from "../../primitives/colorPicker.js";
 /**
  * Wraps a hex input in a property line
  * @param props - PropertyLineProps and InputHexProps
@@ -9,4 +9,4 @@ import { InputHexField } from "../primitives/colorPicker.js";
 export const HexPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(InputHexField, { ...props }) }));
 };
-//# sourceMappingURL=hexLineComponent.js.map
+//# sourceMappingURL=hexPropertyLine.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,15 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { InputProps } from "../../primitives/input.js";
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
+/**
+ * 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>;

package/fluent/hoc/propertyLines/inputPropertyLine.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { NumberInput, TextInput } from "../../primitives/input.js";
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export const TextInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props }) }));
+/**
+ * Wraps a number input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export const NumberInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(NumberInput, { ...props }) }));
+//# sourceMappingURL=inputPropertyLine.js.map

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

@@ -0,0 +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"]}

package/fluent/hoc/{linkPropertyLine.js → propertyLines/linkPropertyLine.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine.js";
-import { Link } from "../primitives/link.js";
+import { Link } from "../../primitives/link.js";
 /**
  * Wraps a link in a property line
  * @param props - PropertyLineProps and LinkProps

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

@@ -0,0 +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"]}

package/fluent/hoc/{propertyLine.js → propertyLines/propertyLine.js}

@@ -3,20 +3,20 @@ import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles,
 import { Collapse } from "@fluentui/react-motion-components-preview";
 import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
 import { useContext, useState, forwardRef } from "react";
-import { copyCommandToClipboard } from "../../copyCommandToClipboard.js";
-import { ToolContext } from "./fluentToolWrapper.js";
+import { copyCommandToClipboard } from "../../../copyCommandToClipboard.js";
+import { ToolContext } from "../fluentToolWrapper.js";
 const usePropertyLineStyles = makeStyles({
     container: {
         width: "100%",
         display: "flex",
         flexDirection: "column", // Stack line + expanded content
+        padding: `${tokens.spacingVerticalXS} 0px`,
         borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     },
     line: {
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-start",
-        padding: `${tokens.spacingVerticalXS} 0px`,
         width: "100%",
     },
     label: {

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

@@ -0,0 +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     * 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     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text\r\n     */\r\n    docLink?: string;\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(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"]}

package/fluent/hoc/{switchPropertyLine.d.ts → propertyLines/switchPropertyLine.d.ts}

@@ -1,6 +1,6 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-import type { SwitchProps } from "../primitives/switch.js";
+import type { SwitchProps } from "../../primitives/switch.js";
 /**
  * Wraps a switch in a property line
  * @param props - The properties for the switch and property line

package/fluent/hoc/{switchPropertyLine.js → propertyLines/switchPropertyLine.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { Switch } from "../primitives/switch.js";
+import { Switch } from "../../primitives/switch.js";
 /**
  * Wraps a switch in a property line
  * @param props - The properties for the switch and property line