@onerjs/shared-ui-components 8.36.1 → 8.36.2
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.
- package/fluent/hoc/propertyLines/stringifiedPropertyLine.js +2 -2
- package/fluent/hoc/propertyLines/stringifiedPropertyLine.js.map +1 -1
- package/fluent/hoc/propertyLines/textPropertyLine.js +1 -1
- package/fluent/hoc/propertyLines/textPropertyLine.js.map +1 -1
- package/fluent/primitives/button.d.ts +2 -2
- package/fluent/primitives/button.js.map +1 -1
- package/fluent/primitives/popover.d.ts +12 -1
- package/fluent/primitives/popover.js +13 -4
- package/fluent/primitives/popover.js.map +1 -1
- package/fluent/primitives/switch.d.ts +6 -1
- package/fluent/primitives/switch.js +2 -2
- package/fluent/primitives/switch.js.map +1 -1
- package/fluent/primitives/syncedSlider.js +2 -2
- package/fluent/primitives/syncedSlider.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,8 +9,8 @@ import { Body1 } from "@fluentui/react-components";
|
|
|
9
9
|
*/
|
|
10
10
|
export const StringifiedPropertyLine = (props) => {
|
|
11
11
|
StringifiedPropertyLine.displayName = "StringifiedPropertyLine";
|
|
12
|
-
const value = props.precision !== undefined ? props.value
|
|
12
|
+
const value = props.precision !== undefined ? props.value?.toFixed(props.precision) : props.value?.toLocaleString();
|
|
13
13
|
const withUnits = props.units ? `${value} ${props.units}` : value;
|
|
14
|
-
return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: props.title, children: withUnits }) }));
|
|
14
|
+
return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: props.title, children: withUnits ?? "" }) }));
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=stringifiedPropertyLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stringifiedPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/stringifiedPropertyLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAQnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC9F,uBAAuB,CAAC,WAAW,GAAG,yBAAyB,CAAC;IAChE,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"stringifiedPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/stringifiedPropertyLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAQnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC9F,uBAAuB,CAAC,WAAW,GAAG,yBAAyB,CAAC;IAChE,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC;IACpH,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,IAAI,EAAE,GAAS,GACzC,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } 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 StringifiedPropertyLine.displayName = \"StringifiedPropertyLine\";\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"]}
|
|
@@ -9,6 +9,6 @@ import { PropertyLine } from "./propertyLine.js";
|
|
|
9
9
|
export const TextPropertyLine = (props) => {
|
|
10
10
|
TextPropertyLine.displayName = "TextPropertyLine";
|
|
11
11
|
const { value, title } = props;
|
|
12
|
-
return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: title, children: value }) }));
|
|
12
|
+
return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: title, children: value ?? "" }) }));
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=textPropertyLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/textPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAmF,CAAC,KAAK,EAAE,EAAE;IACtH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/B,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YAAG,KAAK,GAAS,
|
|
1
|
+
{"version":3,"file":"textPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/textPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAmF,CAAC,KAAK,EAAE,EAAE;IACtH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/B,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YAAG,KAAK,IAAI,EAAE,GAAS,GAC/B,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\n/**\r\n * Wraps text in a property line\r\n * @param props - PropertyLineProps and TextProps\r\n * @returns property-line wrapped text\r\n */\r\nexport const TextPropertyLine: FunctionComponent<PropertyLineProps<string> & ImmutablePrimitiveProps<string>> = (props) => {\r\n TextPropertyLine.displayName = \"TextPropertyLine\";\r\n const { value, title } = props;\r\n return (\r\n <PropertyLine {...props}>\r\n <Body1 title={title}>{value ?? \"\"}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n"]}
|
|
@@ -4,12 +4,12 @@ import type { BasePrimitiveProps } from "./primitive.js";
|
|
|
4
4
|
export type ButtonProps = BasePrimitiveProps & {
|
|
5
5
|
onClick?: (e?: MouseEvent<HTMLButtonElement>) => unknown | Promise<unknown>;
|
|
6
6
|
icon?: FluentIcon;
|
|
7
|
-
appearance?: "subtle" | "transparent" | "primary";
|
|
7
|
+
appearance?: "subtle" | "transparent" | "primary" | "secondary";
|
|
8
8
|
label?: string;
|
|
9
9
|
};
|
|
10
10
|
export declare const Button: import("react").ForwardRefExoticComponent<BasePrimitiveProps & {
|
|
11
11
|
onClick?: (e?: MouseEvent<HTMLButtonElement>) => unknown | Promise<unknown>;
|
|
12
12
|
icon?: FluentIcon;
|
|
13
|
-
appearance?: "subtle" | "transparent" | "primary";
|
|
13
|
+
appearance?: "subtle" | "transparent" | "primary" | "secondary";
|
|
14
14
|
label?: string;
|
|
15
15
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,SAAS,EAAE;QACP,QAAQ,EAAE,QAAQ,CAAC,IAAI;KAC1B;IACD,UAAU,EAAE;QACR,QAAQ,EAAE,QAAQ,CAAC,IAAI;KAC1B;CACJ,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,gEAAgE;IAChE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAElF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAC7B,KAAK,EAAE,CAAgC,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACD,MAAM,MAAM,CAAC;YACjB,CAAC;oBAAS,CAAC;gBACP,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;IAE5E,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,OAAO,KAChB,WAAW,EACf,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI,EAC5F,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,IAAI,aAAa,YAElC,KAAK,IAAI,KAAK,CAAC,KAAK,GACV,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Button as FluentButton, makeStyles, Spinner } from \"@fluentui/react-components\";\r\nimport type { MouseEvent } from \"react\";\r\nimport { forwardRef, useCallback, useContext, useState } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { BasePrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { TokenMap } from \"./utils\";\r\n\r\nconst useButtonStyles = makeStyles({\r\n smallIcon: {\r\n fontSize: TokenMap.px16,\r\n },\r\n mediumIcon: {\r\n fontSize: TokenMap.px20,\r\n },\r\n});\r\n\r\nexport type ButtonProps = BasePrimitiveProps & {\r\n onClick?: (e?: MouseEvent<HTMLButtonElement>) => unknown | Promise<unknown>;\r\n icon?: FluentIcon;\r\n appearance?: \"subtle\" | \"transparent\" | \"primary\";\r\n label?: string;\r\n};\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\r\n const { size } = useContext(ToolContext);\r\n const classes = useButtonStyles();\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const { icon: Icon, label, onClick, disabled, className, ...buttonProps } = props;\r\n\r\n const [isOnClickBusy, setIsOnClickBusy] = useState(false);\r\n const handleOnClick = useCallback(\r\n async (e: MouseEvent<HTMLButtonElement>) => {\r\n const result = onClick?.(e);\r\n if (result instanceof Promise) {\r\n setIsOnClickBusy(true);\r\n try {\r\n await result;\r\n } finally {\r\n setIsOnClickBusy(false);\r\n }\r\n }\r\n },\r\n [onClick]\r\n );\r\n\r\n const iconClass = size === \"small\" ? classes.smallIcon : classes.mediumIcon;\r\n\r\n return (\r\n <FluentButton\r\n ref={ref}\r\n iconPosition=\"after\"\r\n {...buttonProps}\r\n className={className}\r\n size={size}\r\n icon={isOnClickBusy ? <Spinner size=\"extra-tiny\" /> : Icon && <Icon className={iconClass} />}\r\n onClick={handleOnClick}\r\n disabled={disabled || isOnClickBusy}\r\n >\r\n {label && props.label}\r\n </FluentButton>\r\n );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"]}
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,SAAS,EAAE;QACP,QAAQ,EAAE,QAAQ,CAAC,IAAI;KAC1B;IACD,UAAU,EAAE;QACR,QAAQ,EAAE,QAAQ,CAAC,IAAI;KAC1B;CACJ,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,gEAAgE;IAChE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAElF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAC7B,KAAK,EAAE,CAAgC,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACD,MAAM,MAAM,CAAC;YACjB,CAAC;oBAAS,CAAC;gBACP,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;IAE5E,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,OAAO,KAChB,WAAW,EACf,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI,EAC5F,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,IAAI,aAAa,YAElC,KAAK,IAAI,KAAK,CAAC,KAAK,GACV,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Button as FluentButton, makeStyles, Spinner } from \"@fluentui/react-components\";\r\nimport type { MouseEvent } from \"react\";\r\nimport { forwardRef, useCallback, useContext, useState } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { BasePrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { TokenMap } from \"./utils\";\r\n\r\nconst useButtonStyles = makeStyles({\r\n smallIcon: {\r\n fontSize: TokenMap.px16,\r\n },\r\n mediumIcon: {\r\n fontSize: TokenMap.px20,\r\n },\r\n});\r\n\r\nexport type ButtonProps = BasePrimitiveProps & {\r\n onClick?: (e?: MouseEvent<HTMLButtonElement>) => unknown | Promise<unknown>;\r\n icon?: FluentIcon;\r\n appearance?: \"subtle\" | \"transparent\" | \"primary\" | \"secondary\";\r\n label?: string;\r\n};\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\r\n const { size } = useContext(ToolContext);\r\n const classes = useButtonStyles();\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const { icon: Icon, label, onClick, disabled, className, ...buttonProps } = props;\r\n\r\n const [isOnClickBusy, setIsOnClickBusy] = useState(false);\r\n const handleOnClick = useCallback(\r\n async (e: MouseEvent<HTMLButtonElement>) => {\r\n const result = onClick?.(e);\r\n if (result instanceof Promise) {\r\n setIsOnClickBusy(true);\r\n try {\r\n await result;\r\n } finally {\r\n setIsOnClickBusy(false);\r\n }\r\n }\r\n },\r\n [onClick]\r\n );\r\n\r\n const iconClass = size === \"small\" ? classes.smallIcon : classes.mediumIcon;\r\n\r\n return (\r\n <FluentButton\r\n ref={ref}\r\n iconPosition=\"after\"\r\n {...buttonProps}\r\n className={className}\r\n size={size}\r\n icon={isOnClickBusy ? <Spinner size=\"extra-tiny\" /> : Icon && <Icon className={iconClass} />}\r\n onClick={handleOnClick}\r\n disabled={disabled || isOnClickBusy}\r\n >\r\n {label && props.label}\r\n </FluentButton>\r\n );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { PropsWithChildren, ReactElement } from "react";
|
|
2
|
+
import type { PositioningShorthand } from "@fluentui/react-components";
|
|
2
3
|
import type { FluentIcon } from "@fluentui/react-icons";
|
|
3
4
|
type PopoverWithIconProps = {
|
|
4
5
|
icon: FluentIcon;
|
|
@@ -8,6 +9,16 @@ type PopoverWithTriggerProps = {
|
|
|
8
9
|
icon?: never;
|
|
9
10
|
trigger: ReactElement;
|
|
10
11
|
};
|
|
11
|
-
type
|
|
12
|
+
type PopoverBaseProps = {
|
|
13
|
+
/** Controlled open state */
|
|
14
|
+
open?: boolean;
|
|
15
|
+
/** Callback when open state changes */
|
|
16
|
+
onOpenChange?: (open: boolean) => void;
|
|
17
|
+
/** Positioning of the popover */
|
|
18
|
+
positioning?: PositioningShorthand;
|
|
19
|
+
/** Custom class for the surface */
|
|
20
|
+
surfaceClassName?: string;
|
|
21
|
+
};
|
|
22
|
+
type PopoverProps = PopoverBaseProps & (PopoverWithIconProps | PopoverWithTriggerProps);
|
|
12
23
|
export declare const Popover: import("react").ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
13
24
|
export {};
|
|
@@ -15,13 +15,22 @@ const useStyles = makeStyles({
|
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
17
|
export const Popover = forwardRef((props, ref) => {
|
|
18
|
-
const { children } = props;
|
|
19
|
-
const [
|
|
18
|
+
const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
|
|
19
|
+
const [internalOpen, setInternalOpen] = useState(false);
|
|
20
20
|
const classes = useStyles();
|
|
21
|
-
|
|
21
|
+
const isControlled = controlledOpen !== undefined;
|
|
22
|
+
const popoverOpen = isControlled ? controlledOpen : internalOpen;
|
|
23
|
+
const handleOpenChange = (_, data) => {
|
|
24
|
+
if (!isControlled) {
|
|
25
|
+
setInternalOpen(data.open);
|
|
26
|
+
}
|
|
27
|
+
onOpenChange?.(data.open);
|
|
28
|
+
};
|
|
29
|
+
return (_jsxs(FluentPopover, { open: popoverOpen, onOpenChange: handleOpenChange, positioning: positioning ?? {
|
|
22
30
|
align: "start",
|
|
23
31
|
overflowBoundary: document.body,
|
|
24
32
|
autoSize: true,
|
|
25
|
-
},
|
|
33
|
+
}, children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: props.trigger ?? _jsx(Button, { ref: ref, icon: props.icon, onClick: () => handleOpenChange(null, { open: true }) }) }), _jsx(PopoverSurface, { className: surfaceClassName ?? classes.surface, children: _jsx("div", { className: classes.content, children: children }) })] }));
|
|
26
34
|
});
|
|
35
|
+
Popover.displayName = "Popover";
|
|
27
36
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/popover.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/popover.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG1H,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AAEvE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,QAAQ,EAAE,OAAO;KACpB;IACD,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB;QAC5B,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,QAAQ,EAAE,OAAO;KACpB;CACJ,CAAC,CAAC;AAyBH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAqD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjG,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAEjE,MAAM,gBAAgB,GAAG,CAAC,CAAU,EAAE,IAAuB,EAAE,EAAE;QAC7D,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QACD,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,aAAa,IACV,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACP,WAAW,IAAI;YACX,KAAK,EAAE,OAAO;YACd,gBAAgB,EAAE,QAAQ,CAAC,IAAI;YAC/B,QAAQ,EAAE,IAAI;SACjB,aAGL,KAAC,cAAc,IAAC,wBAAwB,kBACnC,KAAK,CAAC,OAAO,IAAI,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAClG,EACjB,KAAC,cAAc,IAAC,SAAS,EAAE,gBAAgB,IAAI,OAAO,CAAC,OAAO,YAC1D,cAAK,SAAS,EAAE,OAAO,CAAC,OAAO,YAAG,QAAQ,GAAO,GACpC,IACL,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import type { PropsWithChildren, ReactElement } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\nimport { Popover as FluentPopover, PopoverTrigger, PopoverSurface, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { PositioningShorthand } from \"@fluentui/react-components\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\n\r\nconst useStyles = makeStyles({\r\n surface: {\r\n maxWidth: \"400px\",\r\n },\r\n content: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: tokens.spacingVerticalM,\r\n padding: tokens.spacingHorizontalL,\r\n minWidth: \"300px\",\r\n },\r\n});\r\n\r\ntype PopoverWithIconProps = {\r\n icon: FluentIcon;\r\n trigger?: never;\r\n};\r\n\r\ntype PopoverWithTriggerProps = {\r\n icon?: never;\r\n trigger: ReactElement;\r\n};\r\n\r\ntype PopoverBaseProps = {\r\n /** Controlled open state */\r\n open?: boolean;\r\n /** Callback when open state changes */\r\n onOpenChange?: (open: boolean) => void;\r\n /** Positioning of the popover */\r\n positioning?: PositioningShorthand;\r\n /** Custom class for the surface */\r\n surfaceClassName?: string;\r\n};\r\n\r\ntype PopoverProps = PopoverBaseProps & (PopoverWithIconProps | PopoverWithTriggerProps);\r\n\r\nexport const Popover = forwardRef<HTMLButtonElement, PropsWithChildren<PopoverProps>>((props, ref) => {\r\n const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;\r\n const [internalOpen, setInternalOpen] = useState(false);\r\n const classes = useStyles();\r\n\r\n const isControlled = controlledOpen !== undefined;\r\n const popoverOpen = isControlled ? controlledOpen : internalOpen;\r\n\r\n const handleOpenChange = (_: unknown, data: { open: boolean }) => {\r\n if (!isControlled) {\r\n setInternalOpen(data.open);\r\n }\r\n onOpenChange?.(data.open);\r\n };\r\n\r\n return (\r\n <FluentPopover\r\n open={popoverOpen}\r\n onOpenChange={handleOpenChange}\r\n positioning={\r\n positioning ?? {\r\n align: \"start\",\r\n overflowBoundary: document.body,\r\n autoSize: true,\r\n }\r\n }\r\n >\r\n <PopoverTrigger disableButtonEnhancement>\r\n {props.trigger ?? <Button ref={ref} icon={props.icon} onClick={() => handleOpenChange(null, { open: true })} />}\r\n </PopoverTrigger>\r\n <PopoverSurface className={surfaceClassName ?? classes.surface}>\r\n <div className={classes.content}>{children}</div>\r\n </PopoverSurface>\r\n </FluentPopover>\r\n );\r\n});\r\n\r\nPopover.displayName = \"Popover\";\r\n"]}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import type { FunctionComponent } from "react";
|
|
2
2
|
import type { PrimitiveProps } from "./primitive.js";
|
|
3
|
-
export type SwitchProps = PrimitiveProps<boolean
|
|
3
|
+
export type SwitchProps = PrimitiveProps<boolean> & {
|
|
4
|
+
/**
|
|
5
|
+
* If true, inverts the switch logic (checked becomes unchecked and vice versa) - only for display purposes!
|
|
6
|
+
*/
|
|
7
|
+
invertedMode?: boolean;
|
|
8
|
+
};
|
|
4
9
|
/**
|
|
5
10
|
* This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
|
|
6
11
|
* @param props
|
|
@@ -30,9 +30,9 @@ export const Switch = (props) => {
|
|
|
30
30
|
}
|
|
31
31
|
}, [props.value]);
|
|
32
32
|
const onChange = (event, _) => {
|
|
33
|
-
props.onChange && props.onChange(event.target.checked);
|
|
33
|
+
props.onChange && props.onChange(props.invertedMode ? !event.target.checked : event.target.checked);
|
|
34
34
|
setChecked(event.target.checked);
|
|
35
35
|
};
|
|
36
|
-
return (_jsx(FluentSwitch, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange }));
|
|
36
|
+
return (_jsx(FluentSwitch, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: props.invertedMode ? !checked : checked, disabled: props.disabled, onChange: onChange }));
|
|
37
37
|
};
|
|
38
38
|
//# sourceMappingURL=switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,WAAW,EAAE;QACT,SAAS,EAAE,YAAY,EAAE,kDAAkD;QAC3E,eAAe,EAAE,OAAO;KAC3B;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,WAAW,EAAE;QACT,SAAS,EAAE,YAAY,EAAE,kDAAkD;QAC3E,eAAe,EAAE,OAAO;KAC3B;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AASH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACpG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,EAChF,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAC3C,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAChD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch, mergeClasses } from \"@fluentui/react-components\";\r\nimport { useContext, useEffect, useState } from \"react\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n switch: {\r\n marginLeft: \"auto\",\r\n },\r\n switchSmall: {\r\n transform: `scale(.85)`, // workaround since we cannot resize fluent switch\r\n transformOrigin: \"right\",\r\n },\r\n indicator: {\r\n margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n },\r\n});\r\n\r\nexport type SwitchProps = PrimitiveProps<boolean> & {\r\n /**\r\n * If true, inverts the switch logic (checked becomes unchecked and vice versa) - only for display purposes!\r\n */\r\n invertedMode?: boolean;\r\n};\r\n\r\n/**\r\n * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n Switch.displayName = \"Switch\";\r\n const { size } = useContext(ToolContext);\r\n const classes = useSwitchStyles();\r\n const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n useEffect(() => {\r\n if (props.value != undefined) {\r\n setChecked(props.value); // Update local state when props.checked changes\r\n }\r\n }, [props.value]);\r\n\r\n const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n props.onChange && props.onChange(props.invertedMode ? !event.target.checked : event.target.checked);\r\n setChecked(event.target.checked);\r\n };\r\n\r\n return (\r\n <FluentSwitch\r\n className={mergeClasses(classes.switch, size === \"small\" && classes.switchSmall)}\r\n indicator={{ className: classes.indicator }}\r\n checked={props.invertedMode ? !checked : checked}\r\n disabled={props.disabled}\r\n onChange={onChange}\r\n />\r\n );\r\n};\r\n"]}
|
|
@@ -47,7 +47,7 @@ export const SyncedSliderInput = (props) => {
|
|
|
47
47
|
const { infoLabel, ...passthroughProps } = props;
|
|
48
48
|
const classes = useSyncedSliderStyles();
|
|
49
49
|
const { size } = useContext(ToolContext);
|
|
50
|
-
const [value, setValue] = useState(props.value);
|
|
50
|
+
const [value, setValue] = useState(props.value ?? 0);
|
|
51
51
|
const pendingValueRef = useRef(undefined);
|
|
52
52
|
const isDraggingRef = useRef(false);
|
|
53
53
|
// NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
|
|
@@ -57,7 +57,7 @@ export const SyncedSliderInput = (props) => {
|
|
|
57
57
|
const max = props.max ?? 100;
|
|
58
58
|
const step = props.step ?? 1;
|
|
59
59
|
useEffect(() => {
|
|
60
|
-
!isDraggingRef.current && setValue(props.value ??
|
|
60
|
+
!isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
|
|
61
61
|
}, [props.value]);
|
|
62
62
|
const handleSliderChange = (_, data) => {
|
|
63
63
|
const newValue = data.value * step;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider } from \"@fluentui/react-components\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef, useContext } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n container: { display: \"flex\", minWidth: 0 },\r\n syncedSlider: {\r\n flex: \"1 1 0\",\r\n flexDirection: \"row\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n minWidth: 0,\r\n },\r\n slider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"75px\",\r\n maxWidth: \"75px\",\r\n },\r\n compactSlider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"50px\", // Allow shrinking for compact mode\r\n maxWidth: \"75px\",\r\n },\r\n growSlider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"50px\",\r\n // No maxWidth - slider grows to fill available space\r\n },\r\n compactSpinButton: {\r\n width: \"65px\",\r\n minWidth: \"65px\",\r\n maxWidth: \"65px\",\r\n },\r\n compactSpinButtonInput: {\r\n minWidth: \"0\",\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = PrimitiveProps<number> & {\r\n /** Minimum value for the slider */\r\n min?: number;\r\n /** Maximum value for the slider */\r\n max?: number;\r\n /** Step size for the slider */\r\n step?: number;\r\n /** Displayed in the ux to indicate unit of measurement */\r\n unit?: string;\r\n /** When true, onChange is only called when the user releases the slider, not during drag */\r\n notifyOnlyOnRelease?: boolean;\r\n /** When true, slider grows to fill space and SpinButton is fixed at 65px */\r\n compact?: boolean;\r\n /** When true, slider grows to fill all available space (no maxWidth constraint) */\r\n growSlider?: boolean;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n SyncedSliderInput.displayName = \"SyncedSliderInput\";\r\n const { infoLabel, ...passthroughProps } = props;\r\n const classes = useSyncedSliderStyles();\r\n const { size } = useContext(ToolContext);\r\n const [value, setValue] = useState<number>(props.value);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value * step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n const handleInputChange = (value: number) => {\r\n setValue(value);\r\n props.onChange(value); // Input always updates immediately\r\n };\r\n\r\n const hasSlider = props.min !== undefined && props.max !== undefined;\r\n\r\n // Determine Slider className based on props\r\n const getSliderClassName = () => {\r\n if (props.growSlider) {\r\n return classes.growSlider;\r\n }\r\n if (props.compact) {\r\n return classes.compactSlider;\r\n }\r\n return classes.slider;\r\n };\r\n\r\n return (\r\n <div className={classes.container}>\r\n {infoLabel && <InfoLabel {...infoLabel} htmlFor={\"syncedSlider\"} />}\r\n <div id=\"syncedSlider\" className={classes.syncedSlider}>\r\n {hasSlider && (\r\n <Slider\r\n {...passthroughProps}\r\n className={getSliderClassName()}\r\n size={size}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerDown={handleSliderPointerDown}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <SpinButton\r\n {...passthroughProps}\r\n className={hasSlider || props.compact ? classes.compactSpinButton : undefined}\r\n inputClassName={hasSlider || props.compact ? classes.compactSpinButtonInput : undefined}\r\n value={value}\r\n onChange={handleInputChange}\r\n step={props.step}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
|
|
1
|
+
{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider } from \"@fluentui/react-components\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef, useContext } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n container: { display: \"flex\", minWidth: 0 },\r\n syncedSlider: {\r\n flex: \"1 1 0\",\r\n flexDirection: \"row\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n minWidth: 0,\r\n },\r\n slider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"75px\",\r\n maxWidth: \"75px\",\r\n },\r\n compactSlider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"50px\", // Allow shrinking for compact mode\r\n maxWidth: \"75px\",\r\n },\r\n growSlider: {\r\n flex: \"1 1 auto\",\r\n minWidth: \"50px\",\r\n // No maxWidth - slider grows to fill available space\r\n },\r\n compactSpinButton: {\r\n width: \"65px\",\r\n minWidth: \"65px\",\r\n maxWidth: \"65px\",\r\n },\r\n compactSpinButtonInput: {\r\n minWidth: \"0\",\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = PrimitiveProps<number> & {\r\n /** Minimum value for the slider */\r\n min?: number;\r\n /** Maximum value for the slider */\r\n max?: number;\r\n /** Step size for the slider */\r\n step?: number;\r\n /** Displayed in the ux to indicate unit of measurement */\r\n unit?: string;\r\n /** When true, onChange is only called when the user releases the slider, not during drag */\r\n notifyOnlyOnRelease?: boolean;\r\n /** When true, slider grows to fill space and SpinButton is fixed at 65px */\r\n compact?: boolean;\r\n /** When true, slider grows to fill all available space (no maxWidth constraint) */\r\n growSlider?: boolean;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n SyncedSliderInput.displayName = \"SyncedSliderInput\";\r\n const { infoLabel, ...passthroughProps } = props;\r\n const classes = useSyncedSliderStyles();\r\n const { size } = useContext(ToolContext);\r\n const [value, setValue] = useState<number>(props.value ?? 0);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value * step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n const handleInputChange = (value: number) => {\r\n setValue(value);\r\n props.onChange(value); // Input always updates immediately\r\n };\r\n\r\n const hasSlider = props.min !== undefined && props.max !== undefined;\r\n\r\n // Determine Slider className based on props\r\n const getSliderClassName = () => {\r\n if (props.growSlider) {\r\n return classes.growSlider;\r\n }\r\n if (props.compact) {\r\n return classes.compactSlider;\r\n }\r\n return classes.slider;\r\n };\r\n\r\n return (\r\n <div className={classes.container}>\r\n {infoLabel && <InfoLabel {...infoLabel} htmlFor={\"syncedSlider\"} />}\r\n <div id=\"syncedSlider\" className={classes.syncedSlider}>\r\n {hasSlider && (\r\n <Slider\r\n {...passthroughProps}\r\n className={getSliderClassName()}\r\n size={size}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerDown={handleSliderPointerDown}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <SpinButton\r\n {...passthroughProps}\r\n className={hasSlider || props.compact ? classes.compactSpinButton : undefined}\r\n inputClassName={hasSlider || props.compact ? classes.compactSpinButtonInput : undefined}\r\n value={value}\r\n onChange={handleInputChange}\r\n step={props.step}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
|