@babylonjs/shared-ui-components 8.49.1 → 8.49.3
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/icons.d.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
export declare const MeshIcon: import("@fluentui/react-icons").FluentIcon;
|
|
2
2
|
export declare const TranslateIcon: import("@fluentui/react-icons").FluentIcon;
|
|
3
3
|
export declare const MaterialIcon: import("@fluentui/react-icons").FluentIcon;
|
|
4
|
+
export declare const FlatTangentIcon: import("@fluentui/react-icons").FluentIcon;
|
|
5
|
+
export declare const LinearTangentIcon: import("@fluentui/react-icons").FluentIcon;
|
|
6
|
+
export declare const BreakTangentIcon: import("@fluentui/react-icons").FluentIcon;
|
|
7
|
+
export declare const UnifyTangentIcon: import("@fluentui/react-icons").FluentIcon;
|
|
8
|
+
export declare const StepTangentIcon: import("@fluentui/react-icons").FluentIcon;
|
package/fluent/icons.js
CHANGED
|
@@ -2,4 +2,9 @@ import { createFluentIcon } from "@fluentui/react-icons";
|
|
|
2
2
|
export const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z"/>');
|
|
3
3
|
export const TranslateIcon = createFluentIcon("Translate", "24", '<path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" />');
|
|
4
4
|
export const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/>');
|
|
5
|
+
export const FlatTangentIcon = createFluentIcon("FlatTangent", "20", '<g transform="scale(0.5)"><path d="M28,18.5a1.51,1.51,0,0,0-1.41,1H11.5v1H26.59a1.5,1.5,0,1,0,1.41-2Z"/></g>');
|
|
6
|
+
export const LinearTangentIcon = createFluentIcon("LinearTangent", "20", '<g transform="scale(0.5)"><path d="M26,14a1.49,1.49,0,0,0-2.4,1.69l-10,10,.71.71,10-10A1.49,1.49,0,0,0,26,14Z"/></g>');
|
|
7
|
+
export const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="scale(0.5)"><path d="M27.11,13.05a1.49,1.49,0,0,0-2.05.53,1.47,1.47,0,0,0,.14,1.72l-4.78,8L20,22.92l-.42.42-4.78-8a1.47,1.47,0,0,0,.14-1.72,1.49,1.49,0,0,0-2-.53,1.5,1.5,0,0,0,1,2.76l4.91,8.26-1,1L20,27.16,22.12,25l-1-1,4.91-8.26a1.5,1.5,0,0,0,1.05-2.76Z"/></g>');
|
|
8
|
+
export const UnifyTangentIcon = createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
|
|
9
|
+
export const StepTangentIcon = createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
|
|
5
10
|
//# sourceMappingURL=icons.js.map
|
package/fluent/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/fluent/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CACpC,MAAM,EACN,IAAI,EACJ,w0BAAw0B,CAC30B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CACzC,WAAW,EACX,IAAI,EACJ,4hBAA4hB,CAC/hB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CACxC,UAAU,EACV,IAAI,EACJ,i1BAAi1B,CACp1B,CAAC","sourcesContent":["import { createFluentIcon } from \"@fluentui/react-icons\";\r\n\r\nexport const MeshIcon = createFluentIcon(\r\n \"Mesh\",\r\n \"16\",\r\n '<path d=\"M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z\"/>'\r\n);\r\n\r\nexport const TranslateIcon = createFluentIcon(\r\n \"Translate\",\r\n \"24\",\r\n '<path d=\"M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z\" />'\r\n);\r\n\r\nexport const MaterialIcon = createFluentIcon(\r\n \"Material\",\r\n \"16\",\r\n '<path d=\"M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z\"/>'\r\n);\r\n"]}
|
|
1
|
+
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/fluent/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CACpC,MAAM,EACN,IAAI,EACJ,w0BAAw0B,CAC30B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CACzC,WAAW,EACX,IAAI,EACJ,4hBAA4hB,CAC/hB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CACxC,UAAU,EACV,IAAI,EACJ,i1BAAi1B,CACp1B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAC3C,aAAa,EACb,IAAI,EACJ,8GAA8G,CACjH,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAC7C,eAAe,EACf,IAAI,EACJ,sHAAsH,CACzH,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAC5C,cAAc,EACd,IAAI,EACJ,qRAAqR,CACxR,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAC5C,cAAc,EACd,IAAI,EACJ,0KAA0K,CAC7K,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAC3C,aAAa,EACb,IAAI,EACJ,uHAAuH,CAC1H,CAAC","sourcesContent":["import { createFluentIcon } from \"@fluentui/react-icons\";\r\n\r\nexport const MeshIcon = createFluentIcon(\r\n \"Mesh\",\r\n \"16\",\r\n '<path d=\"M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z\"/>'\r\n);\r\n\r\nexport const TranslateIcon = createFluentIcon(\r\n \"Translate\",\r\n \"24\",\r\n '<path d=\"M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z\" />'\r\n);\r\n\r\nexport const MaterialIcon = createFluentIcon(\r\n \"Material\",\r\n \"16\",\r\n '<path d=\"M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z\"/>'\r\n);\r\n\r\nexport const FlatTangentIcon = createFluentIcon(\r\n \"FlatTangent\",\r\n \"20\",\r\n '<g transform=\"scale(0.5)\"><path d=\"M28,18.5a1.51,1.51,0,0,0-1.41,1H11.5v1H26.59a1.5,1.5,0,1,0,1.41-2Z\"/></g>'\r\n);\r\n\r\nexport const LinearTangentIcon = createFluentIcon(\r\n \"LinearTangent\",\r\n \"20\",\r\n '<g transform=\"scale(0.5)\"><path d=\"M26,14a1.49,1.49,0,0,0-2.4,1.69l-10,10,.71.71,10-10A1.49,1.49,0,0,0,26,14Z\"/></g>'\r\n);\r\n\r\nexport const BreakTangentIcon = createFluentIcon(\r\n \"BreakTangent\",\r\n \"20\",\r\n '<g transform=\"scale(0.5)\"><path d=\"M27.11,13.05a1.49,1.49,0,0,0-2.05.53,1.47,1.47,0,0,0,.14,1.72l-4.78,8L20,22.92l-.42.42-4.78-8a1.47,1.47,0,0,0,.14-1.72,1.49,1.49,0,0,0-2-.53,1.5,1.5,0,0,0,1,2.76l4.91,8.26-1,1L20,27.16,22.12,25l-1-1,4.91-8.26a1.5,1.5,0,0,0,1.05-2.76Z\"/></g>'\r\n);\r\n\r\nexport const UnifyTangentIcon = createFluentIcon(\r\n \"UnifyTangent\",\r\n \"20\",\r\n '<g transform=\"scale(0.5)\"><path d=\"M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z\"/></g>'\r\n);\r\n\r\nexport const StepTangentIcon = createFluentIcon(\r\n \"StepTangent\",\r\n \"20\",\r\n '<g transform=\"scale(0.5)\"><path d=\"M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z\"/></g>'\r\n);\r\n"]}
|
|
@@ -3,7 +3,7 @@ import { Button as FluentButton, makeStyles, Spinner } from "@fluentui/react-com
|
|
|
3
3
|
import { forwardRef, useCallback, useContext, useState } from "react";
|
|
4
4
|
import { ToolContext } from "../hoc/fluentToolWrapper.js";
|
|
5
5
|
import { TokenMap } from "./utils.js";
|
|
6
|
-
|
|
6
|
+
import { Tooltip } from "./tooltip.js";
|
|
7
7
|
const useButtonStyles = makeStyles({
|
|
8
8
|
smallIcon: {
|
|
9
9
|
fontSize: TokenMap.px16,
|
|
@@ -31,12 +31,7 @@ export const Button = forwardRef((props, ref) => {
|
|
|
31
31
|
}
|
|
32
32
|
}, [onClick]);
|
|
33
33
|
const iconClass = size === "small" ? classes.smallIcon : classes.mediumIcon;
|
|
34
|
-
return (
|
|
35
|
-
// TODO: Somehow wrapping Button in a Tooltip completely breaks rendering CurveEditor. Need to figure out why.
|
|
36
|
-
// <Tooltip content={title}>
|
|
37
|
-
_jsx(FluentButton, { ref: ref, title: title, iconPosition: "after", ...buttonProps, className: className, size: size, icon: isOnClickBusy ? _jsx(Spinner, { size: "extra-tiny" }) : Icon && _jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label })
|
|
38
|
-
// </Tooltip>
|
|
39
|
-
);
|
|
34
|
+
return (_jsx(Tooltip, { content: title ?? "", children: _jsx(FluentButton, { ref: ref, iconPosition: "after", ...buttonProps, className: className, size: size, icon: isOnClickBusy ? _jsx(Spinner, { size: "extra-tiny" }) : Icon && _jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label }) }));
|
|
40
35
|
});
|
|
41
36
|
Button.displayName = "Button";
|
|
42
37
|
//# sourceMappingURL=button.js.map
|
|
@@ -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;AACnC,
|
|
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;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,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,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAEzF,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,OAAO,IAAC,OAAO,EAAE,KAAK,IAAI,EAAE,YACzB,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,GACT,CACb,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\nimport { Tooltip } from \"./tooltip\";\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, title, ...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 <Tooltip content={title ?? \"\"}>\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 </Tooltip>\r\n );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"]}
|