@babylonjs/shared-ui-components 8.23.2 → 8.24.1
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/primitives/collapse.d.ts +1 -0
- package/fluent/primitives/collapse.js +2 -1
- package/fluent/primitives/collapse.js.map +1 -1
- package/fluent/primitives/toggleButton.d.ts +1 -0
- package/fluent/primitives/toggleButton.js +2 -2
- package/fluent/primitives/toggleButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { FunctionComponent, PropsWithChildren } from "react";
|
|
2
2
|
type CollapseProps = {
|
|
3
3
|
visible: boolean;
|
|
4
|
+
orientation?: "horizontal" | "vertical";
|
|
4
5
|
};
|
|
5
6
|
/**
|
|
6
7
|
* Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes
|
|
@@ -4,6 +4,7 @@ import { Collapse as FluentCollapse } from "@fluentui/react-motion-components-pr
|
|
|
4
4
|
const useCollapseStyles = makeStyles({
|
|
5
5
|
collapseContent: {
|
|
6
6
|
overflow: "hidden",
|
|
7
|
+
display: "flex",
|
|
7
8
|
},
|
|
8
9
|
});
|
|
9
10
|
/**
|
|
@@ -14,6 +15,6 @@ const useCollapseStyles = makeStyles({
|
|
|
14
15
|
*/
|
|
15
16
|
export const Collapse = (props) => {
|
|
16
17
|
const classes = useCollapseStyles();
|
|
17
|
-
return (_jsx(FluentCollapse, { visible: props.visible, children: _jsx("div", { className: classes.collapseContent, children: props.children }) }));
|
|
18
|
+
return (_jsx(FluentCollapse, { visible: props.visible, orientation: props.orientation, children: _jsx("div", { className: classes.collapseContent, children: props.children }) }));
|
|
18
19
|
};
|
|
19
20
|
//# sourceMappingURL=collapse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAQvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,YAClE,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,KAAK,CAAC,QAAQ,GAAO,GAClD,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n visible: boolean;\r\n orientation?: \"horizontal\" | \"vertical\";\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n collapseContent: {\r\n overflow: \"hidden\",\r\n display: \"flex\",\r\n },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n const classes = useCollapseStyles();\r\n return (\r\n <FluentCollapse visible={props.visible} orientation={props.orientation}>\r\n <div className={classes.collapseContent}>{props.children}</div>\r\n </FluentCollapse>\r\n );\r\n};\r\n"]}
|
|
@@ -4,6 +4,7 @@ import type { FluentIcon } from "@fluentui/react-icons";
|
|
|
4
4
|
type ToggleButtonProps = PrimitiveProps<boolean> & {
|
|
5
5
|
enabledIcon: FluentIcon;
|
|
6
6
|
disabledIcon?: FluentIcon;
|
|
7
|
+
appearance?: "subtle" | "transparent";
|
|
7
8
|
};
|
|
8
9
|
/**
|
|
9
10
|
* Toggles between two states using a button with icons.
|
|
@@ -9,7 +9,7 @@ import { useCallback, useEffect, useState } from "react";
|
|
|
9
9
|
* @returns
|
|
10
10
|
*/
|
|
11
11
|
export const ToggleButton = (props) => {
|
|
12
|
-
const { value, onChange, title } = props;
|
|
12
|
+
const { value, onChange, title, appearance = "subtle" } = props;
|
|
13
13
|
const [checked, setChecked] = useState(value);
|
|
14
14
|
const toggle = useCallback(() => {
|
|
15
15
|
setChecked((prev) => {
|
|
@@ -21,6 +21,6 @@ export const ToggleButton = (props) => {
|
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
setChecked(props.value);
|
|
23
23
|
}, [props.value]);
|
|
24
|
-
return (_jsx(FluentToggleButton, { title: title, icon: checked ? _jsx(props.enabledIcon, {}) : props.disabledIcon ? _jsx(props.disabledIcon, {
|
|
24
|
+
return (_jsx(FluentToggleButton, { title: title, icon: checked ? _jsx(props.enabledIcon, {}) : props.disabledIcon ? _jsx(props.disabledIcon, {}) : _jsx(props.enabledIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
|
|
25
25
|
};
|
|
26
26
|
//# sourceMappingURL=toggleButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUzD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,kBAAkB,IACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,YAAY,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC3G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { useCallback, useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\n\r\ntype ToggleButtonProps = PrimitiveProps<boolean> & {\r\n enabledIcon: FluentIcon; // Intentionally using FluentIcon so that we can control the visual toggle look/feel\r\n disabledIcon?: FluentIcon;\r\n appearance?: \"subtle\" | \"transparent\";\r\n};\r\n\r\n/**\r\n * Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n const { value, onChange, title, appearance = \"subtle\" } = props;\r\n const [checked, setChecked] = useState(value);\r\n const toggle = useCallback(() => {\r\n setChecked((prev) => {\r\n const enabled = !prev;\r\n onChange(enabled);\r\n return enabled;\r\n });\r\n }, [setChecked]);\r\n\r\n useEffect(() => {\r\n setChecked(props.value);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentToggleButton\r\n title={title}\r\n icon={checked ? <props.enabledIcon /> : props.disabledIcon ? <props.disabledIcon /> : <props.enabledIcon />}\r\n appearance={appearance}\r\n checked={checked}\r\n onClick={toggle}\r\n />\r\n );\r\n};\r\n"]}
|