@fluentui/react-migration-v8-v9 1.0.2 → 1.0.4
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/CHANGELOG.json +37 -1
- package/CHANGELOG.md +21 -2
- package/lib/components/Button/ActionButtonShim.js +18 -0
- package/lib/components/Button/ActionButtonShim.js.map +1 -0
- package/lib/components/Button/ButtonShim.js +25 -0
- package/lib/components/Button/ButtonShim.js.map +1 -0
- package/lib/components/Button/CommandButtonShim.js +5 -0
- package/lib/components/Button/CommandButtonShim.js.map +1 -0
- package/lib/components/Button/CompoundButtonShim.js +21 -0
- package/lib/components/Button/CompoundButtonShim.js.map +1 -0
- package/lib/components/Button/DefaultButtonShim.js +12 -0
- package/lib/components/Button/DefaultButtonShim.js.map +1 -0
- package/lib/components/Button/MenuButtonShim.js +23 -0
- package/lib/components/Button/MenuButtonShim.js.map +1 -0
- package/lib/components/Button/PrimaryButtonShim.js +13 -0
- package/lib/components/Button/PrimaryButtonShim.js.map +1 -0
- package/lib/components/Button/ToggleButtonShim.js +20 -0
- package/lib/components/Button/ToggleButtonShim.js.map +1 -0
- package/lib/components/Button/index.js +10 -0
- package/lib/components/Button/index.js.map +1 -0
- package/lib/components/Button/shimButtonProps.js +24 -0
- package/lib/components/Button/shimButtonProps.js.map +1 -0
- package/lib/components/Menu/MenuShim.js +49 -0
- package/lib/components/Menu/MenuShim.js.map +1 -0
- package/lib/components/Menu/index.js +3 -0
- package/lib/components/Menu/index.js.map +1 -0
- package/lib/components/Menu/shimMenuProps.js +33 -0
- package/lib/components/Menu/shimMenuProps.js.map +1 -0
- package/lib/components/Stack/StackItemShim.js +177 -0
- package/lib/components/Stack/StackItemShim.js.map +1 -0
- package/lib/components/Stack/StackShim.js +260 -0
- package/lib/components/Stack/StackShim.js.map +1 -0
- package/lib/components/Stack/index.js +3 -0
- package/lib/components/Stack/index.js.map +1 -0
- package/lib/components/Stack/stackUtils.js +168 -0
- package/lib/components/Stack/stackUtils.js.map +1 -0
- package/lib/components/Theme/index.js +5 -0
- package/lib/components/Theme/index.js.map +1 -0
- package/lib/components/Theme/themeDuplicates.js +859 -0
- package/lib/components/Theme/themeDuplicates.js.map +1 -0
- package/lib/components/Theme/v8ThemeShim.js +313 -0
- package/lib/components/Theme/v8ThemeShim.js.map +1 -0
- package/lib/components/Theme/v9BrandVariantsShim.js +77 -0
- package/lib/components/Theme/v9BrandVariantsShim.js.map +1 -0
- package/lib/components/Theme/v9ThemeShim.js +195 -0
- package/lib/components/Theme/v9ThemeShim.js.map +1 -0
- package/lib/index.js +5 -0
- package/lib/index.js.map +1 -0
- package/lib/stories/DefaultButtonShim/index.js +51 -0
- package/lib/stories/DefaultButtonShim/index.js.map +1 -0
- package/lib-amd/components/Button/ActionButtonShim.js +14 -0
- package/lib-amd/components/Button/ActionButtonShim.js.map +1 -0
- package/lib-amd/components/Button/ButtonShim.js +17 -0
- package/lib-amd/components/Button/ButtonShim.js.map +1 -0
- package/lib-amd/components/Button/CommandButtonShim.js +7 -0
- package/lib-amd/components/Button/CommandButtonShim.js.map +1 -0
- package/lib-amd/components/Button/CompoundButtonShim.js +15 -0
- package/lib-amd/components/Button/CompoundButtonShim.js.map +1 -0
- package/lib-amd/components/Button/DefaultButtonShim.js +12 -0
- package/lib-amd/components/Button/DefaultButtonShim.js.map +1 -0
- package/lib-amd/components/Button/MenuButtonShim.js +20 -0
- package/lib-amd/components/Button/MenuButtonShim.js.map +1 -0
- package/lib-amd/components/Button/PrimaryButtonShim.js +12 -0
- package/lib-amd/components/Button/PrimaryButtonShim.js.map +1 -0
- package/lib-amd/components/Button/ToggleButtonShim.js +14 -0
- package/lib-amd/components/Button/ToggleButtonShim.js.map +1 -0
- package/lib-amd/components/Button/index.js +14 -0
- package/lib-amd/components/Button/index.js.map +1 -0
- package/lib-amd/components/Button/shimButtonProps.js +19 -0
- package/lib-amd/components/Button/shimButtonProps.js.map +1 -0
- package/lib-amd/components/Menu/MenuShim.js +42 -0
- package/lib-amd/components/Menu/MenuShim.js.map +1 -0
- package/lib-amd/components/Menu/index.js +7 -0
- package/lib-amd/components/Menu/index.js.map +1 -0
- package/lib-amd/components/Menu/shimMenuProps.js +30 -0
- package/lib-amd/components/Menu/shimMenuProps.js.map +1 -0
- package/lib-amd/components/Stack/StackItemShim.js +150 -0
- package/lib-amd/components/Stack/StackItemShim.js.map +1 -0
- package/lib-amd/components/Stack/StackShim.js +242 -0
- package/lib-amd/components/Stack/StackShim.js.map +1 -0
- package/lib-amd/components/Stack/index.js +7 -0
- package/lib-amd/components/Stack/index.js.map +1 -0
- package/lib-amd/components/Stack/stackUtils.js +168 -0
- package/lib-amd/components/Stack/stackUtils.js.map +1 -0
- package/lib-amd/components/Theme/index.js +9 -0
- package/lib-amd/components/Theme/index.js.map +1 -0
- package/lib-amd/components/Theme/themeDuplicates.js +864 -0
- package/lib-amd/components/Theme/themeDuplicates.js.map +1 -0
- package/lib-amd/components/Theme/v8ThemeShim.js +140 -0
- package/lib-amd/components/Theme/v8ThemeShim.js.map +1 -0
- package/lib-amd/components/Theme/v9BrandVariantsShim.js +75 -0
- package/lib-amd/components/Theme/v9BrandVariantsShim.js.map +1 -0
- package/lib-amd/components/Theme/v9ThemeShim.js +188 -0
- package/lib-amd/components/Theme/v9ThemeShim.js.map +1 -0
- package/lib-amd/index.js +38 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-amd/stories/DefaultButtonShim/index.js +44 -0
- package/lib-amd/stories/DefaultButtonShim/index.js.map +1 -0
- package/lib-commonjs/components/Button/ActionButtonShim.js +28 -0
- package/lib-commonjs/components/Button/ActionButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/ButtonShim.js +37 -0
- package/lib-commonjs/components/Button/ButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/CommandButtonShim.js +19 -0
- package/lib-commonjs/components/Button/CommandButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/CompoundButtonShim.js +31 -0
- package/lib-commonjs/components/Button/CompoundButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/DefaultButtonShim.js +21 -0
- package/lib-commonjs/components/Button/DefaultButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/MenuButtonShim.js +32 -0
- package/lib-commonjs/components/Button/MenuButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/PrimaryButtonShim.js +22 -0
- package/lib-commonjs/components/Button/PrimaryButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/ToggleButtonShim.js +30 -0
- package/lib-commonjs/components/Button/ToggleButtonShim.js.map +1 -0
- package/lib-commonjs/components/Button/index.js +26 -0
- package/lib-commonjs/components/Button/index.js.map +1 -0
- package/lib-commonjs/components/Button/shimButtonProps.js +35 -0
- package/lib-commonjs/components/Button/shimButtonProps.js.map +1 -0
- package/lib-commonjs/components/Menu/MenuShim.js +58 -0
- package/lib-commonjs/components/Menu/MenuShim.js.map +1 -0
- package/lib-commonjs/components/Menu/index.js +12 -0
- package/lib-commonjs/components/Menu/index.js.map +1 -0
- package/lib-commonjs/components/Menu/shimMenuProps.js +53 -0
- package/lib-commonjs/components/Menu/shimMenuProps.js.map +1 -0
- package/lib-commonjs/components/Stack/StackItemShim.js +188 -0
- package/lib-commonjs/components/Stack/StackItemShim.js.map +1 -0
- package/lib-commonjs/components/Stack/StackShim.js +273 -0
- package/lib-commonjs/components/Stack/StackShim.js.map +1 -0
- package/lib-commonjs/components/Stack/index.js +12 -0
- package/lib-commonjs/components/Stack/index.js.map +1 -0
- package/lib-commonjs/components/Stack/stackUtils.js +182 -0
- package/lib-commonjs/components/Stack/stackUtils.js.map +1 -0
- package/lib-commonjs/components/Theme/index.js +16 -0
- package/lib-commonjs/components/Theme/index.js.map +1 -0
- package/lib-commonjs/components/Theme/themeDuplicates.js +865 -0
- package/lib-commonjs/components/Theme/themeDuplicates.js.map +1 -0
- package/lib-commonjs/components/Theme/v8ThemeShim.js +324 -0
- package/lib-commonjs/components/Theme/v8ThemeShim.js.map +1 -0
- package/lib-commonjs/components/Theme/v9BrandVariantsShim.js +87 -0
- package/lib-commonjs/components/Theme/v9BrandVariantsShim.js.map +1 -0
- package/lib-commonjs/components/Theme/v9ThemeShim.js +206 -0
- package/lib-commonjs/components/Theme/v9ThemeShim.js.map +1 -0
- package/lib-commonjs/index.js +211 -0
- package/lib-commonjs/index.js.map +1 -0
- package/lib-commonjs/stories/DefaultButtonShim/index.js +64 -0
- package/lib-commonjs/stories/DefaultButtonShim/index.js.map +1 -0
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,43 @@
|
|
|
2
2
|
"name": "@fluentui/react-migration-v8-v9",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 31 Oct 2022 07:44:38 GMT",
|
|
6
|
+
"tag": "@fluentui/react-migration-v8-v9_v1.0.4",
|
|
7
|
+
"version": "1.0.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "gcox@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-migration-v8-v9",
|
|
13
|
+
"commit": "e799d65bcc8a71db789a41bda7240103f3bf5de7",
|
|
14
|
+
"comment": "fix: Updated to tsconfig to publish to dist."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-migration-v8-v9",
|
|
19
|
+
"comment": "Bump @fluentui/react to v8.99.1",
|
|
20
|
+
"commit": "aa6aca3508e3578b5182d82be8173a42eb17d906"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Fri, 28 Oct 2022 07:45:08 GMT",
|
|
27
|
+
"tag": "@fluentui/react-migration-v8-v9_v1.0.3",
|
|
28
|
+
"version": "1.0.3",
|
|
29
|
+
"comments": {
|
|
30
|
+
"patch": [
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-migration-v8-v9",
|
|
34
|
+
"comment": "Bump @fluentui/react to v8.99.0",
|
|
35
|
+
"commit": "6c136eb60ae73382d3336b2ff11b113924d6eddc"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Wed, 26 Oct 2022 07:52:54 GMT",
|
|
6
42
|
"tag": "@fluentui/react-migration-v8-v9_v1.0.2",
|
|
7
43
|
"version": "1.0.2",
|
|
8
44
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-migration-v8-v9
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 31 Oct 2022 07:44:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [1.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.4)
|
|
8
|
+
|
|
9
|
+
Mon, 31 Oct 2022 07:44:38 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v1.0.3..@fluentui/react-migration-v8-v9_v1.0.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Updated to tsconfig to publish to dist. ([PR #25422](https://github.com/microsoft/fluentui/pull/25422) by gcox@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react to v8.99.1 ([PR #25429](https://github.com/microsoft/fluentui/pull/25429) by beachball)
|
|
16
|
+
|
|
17
|
+
## [1.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.3)
|
|
18
|
+
|
|
19
|
+
Fri, 28 Oct 2022 07:45:08 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v1.0.2..@fluentui/react-migration-v8-v9_v1.0.3)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react to v8.99.0 ([PR #25428](https://github.com/microsoft/fluentui/pull/25428) by beachball)
|
|
25
|
+
|
|
7
26
|
## [1.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.2)
|
|
8
27
|
|
|
9
|
-
Wed, 26 Oct 2022 07:
|
|
28
|
+
Wed, 26 Oct 2022 07:52:54 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v1.0.1..@fluentui/react-migration-v8-v9_v1.0.2)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Button } from '@fluentui/react-components';
|
|
3
|
+
import { shimButtonProps } from './shimButtonProps';
|
|
4
|
+
/**
|
|
5
|
+
* Shims a v8 ActionButton to render a v9 Button
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const ActionButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
9
|
+
const variantProps = { ...props,
|
|
10
|
+
variantClassName: 'ms-Button--action ms-Button--command'
|
|
11
|
+
};
|
|
12
|
+
const shimProps = shimButtonProps(variantProps);
|
|
13
|
+
return /*#__PURE__*/React.createElement(Button, { ...props,
|
|
14
|
+
...shimProps,
|
|
15
|
+
appearance: "transparent"
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=ActionButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/ActionButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAIA,SAAS,MAAT,QAAuB,4BAAvB;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAEzB,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;EACnC,MAAM,YAAY,GAAG,EACnB,GAAG,KADgB;IAEnB,gBAAgB,EAAE;EAFC,CAArB;EAKA,MAAM,SAAS,GAAG,eAAe,CAAC,YAAD,CAAjC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,EAAA,GAAM,KAAN;IAAsD,GAAM,SAA5D;IAAuE,UAAU,EAAC;EAAlF,CAAP,CAAP;AACD,CATG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims a v8 ActionButton to render a v9 Button\n */\nexport const ActionButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n const variantProps = {\n ...props,\n variantClassName: 'ms-Button--action ms-Button--command',\n };\n\n const shimProps = shimButtonProps(variantProps);\n\n return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance=\"transparent\" />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Button } from '@fluentui/react-components';
|
|
3
|
+
import { shimButtonProps } from './shimButtonProps';
|
|
4
|
+
import { ToggleButtonShim } from './ToggleButtonShim';
|
|
5
|
+
import { CompoundButtonShim } from './CompoundButtonShim';
|
|
6
|
+
export const ButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
7
|
+
var _a;
|
|
8
|
+
|
|
9
|
+
const shimProps = shimButtonProps(props);
|
|
10
|
+
|
|
11
|
+
if (props.toggle) {
|
|
12
|
+
return /*#__PURE__*/React.createElement(ToggleButtonShim, { ...props
|
|
13
|
+
}, props.children);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
if (props.secondaryText || ((_a = props.onRenderDescription) === null || _a === void 0 ? void 0 : _a.call(props, props))) {
|
|
17
|
+
return /*#__PURE__*/React.createElement(CompoundButtonShim, { ...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return /*#__PURE__*/React.createElement(Button, { ...props,
|
|
22
|
+
...shimProps
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
//# sourceMappingURL=ButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/ButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAIA,SAAS,MAAT,QAAuB,4BAAvB;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA,OAAO,MAAM,UAAU,gBAEnB,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;;;EACnC,MAAM,SAAS,GAAG,eAAe,CAAC,KAAD,CAAjC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,oBAAO,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,EAAA,GAAK;IAAL,CAAjB,EAA8B,KAAK,CAAC,QAApC,CAAP;EACD;;EACD,IAAI,KAAK,CAAC,aAAN,KAAuB,CAAA,EAAA,GAAA,KAAK,CAAC,mBAAN,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,KAAA,CAAzB,GAAyB,EAAA,CAAA,IAAA,CAAzB,KAAyB,EAAG,KAAH,CAAhD,CAAJ,EAA+D;IAC7D,oBAAO,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,EAAA,GAAK;IAAL,CAAnB,CAAP;EACD;;EAED,oBAAO,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,EAAA,GAAM,KAAN;IAAsD,GAAM;EAA5D,CAAP,CAAP;AACD,CAXG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IBaseButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\nimport { ToggleButtonShim } from './ToggleButtonShim';\nimport { CompoundButtonShim } from './CompoundButtonShim';\n\nexport const ButtonShim: React.ForwardRefExoticComponent<\n IBaseButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n const shimProps = shimButtonProps(props);\n\n if (props.toggle) {\n return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;\n }\n if (props.secondaryText || props.onRenderDescription?.(props)) {\n return <CompoundButtonShim {...props} />;\n }\n\n return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandButtonShim.js","sourceRoot":"../src/","sources":["components/Button/CommandButtonShim.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,gBAAgB,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["/**\n * Shims v8 CommandButtonShim to render a v9 Button\n */\nexport { ActionButtonShim as CommandButtonShim } from './ActionButtonShim';\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CompoundButton } from '@fluentui/react-components';
|
|
3
|
+
import { shimButtonProps } from './shimButtonProps';
|
|
4
|
+
/**
|
|
5
|
+
* Shims v8 CompoundButton to render a v9 CompoundButton
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const CompoundButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
9
|
+
var _a;
|
|
10
|
+
|
|
11
|
+
const variantProps = { ...props,
|
|
12
|
+
variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound'
|
|
13
|
+
};
|
|
14
|
+
const shimProps = { ...shimButtonProps(variantProps),
|
|
15
|
+
secondaryContent: props.secondaryText || ((_a = props.onRenderDescription) === null || _a === void 0 ? void 0 : _a.call(props, props))
|
|
16
|
+
};
|
|
17
|
+
return /*#__PURE__*/React.createElement(CompoundButton, { ...props,
|
|
18
|
+
...shimProps
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=CompoundButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/CompoundButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAIA,SAAS,cAAT,QAA+B,4BAA/B;AAGA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAE3B,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;;;EACnC,MAAM,YAAY,GAAG,EACnB,GAAG,KADgB;IAEnB,gBAAgB,EAAE,KAAK,CAAC,OAAN,GAAgB,4BAAhB,GAA+C;EAF9C,CAArB;EAKA,MAAM,SAAS,GAAwB,EACrC,GAAG,eAAe,CAAC,YAAD,CADmB;IAErC,gBAAgB,EAAE,KAAK,CAAC,aAAN,KAAuB,CAAA,EAAA,GAAA,KAAK,CAAC,mBAAN,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,KAAA,CAAzB,GAAyB,EAAA,CAAA,IAAA,CAAzB,KAAyB,EAAG,KAAH,CAAhD;EAFmB,CAAvC;EAKA,oBAAO,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,EAAA,GAAM,KAAN;IAAsD,GAAM;EAA5D,CAAf,CAAP;AACD,CAZG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { CompoundButton } from '@fluentui/react-components';\nimport type { CompoundButtonProps } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims v8 CompoundButton to render a v9 CompoundButton\n */\nexport const CompoundButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n const variantProps = {\n ...props,\n variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',\n };\n\n const shimProps: CompoundButtonProps = {\n ...shimButtonProps(variantProps),\n secondaryContent: props.secondaryText || props.onRenderDescription?.(props),\n };\n\n return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ButtonShim } from './ButtonShim';
|
|
3
|
+
/**
|
|
4
|
+
* Shims a v8 DefaultButton to render a v9 Button
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export const DefaultButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
8
|
+
return /*#__PURE__*/React.createElement(ButtonShim, { ...props,
|
|
9
|
+
variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default'
|
|
10
|
+
});
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=DefaultButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/DefaultButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAIA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,gBAE1B,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;EACnC,oBAAO,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,EAAA,GAAK,KAAL;IAAY,gBAAgB,EAAE,KAAK,CAAC,OAAN,GAAgB,oBAAhB,GAAuC;EAArE,CAAX,CAAP;AACD,CAFG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { ButtonShim } from './ButtonShim';\n\n/**\n * Shims a v8 DefaultButton to render a v9 Button\n */\nexport const DefaultButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { MenuButton, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
|
|
3
|
+
import { MenuItemShim, shimMenuProps } from '../Menu/index';
|
|
4
|
+
import { shimButtonProps } from './shimButtonProps';
|
|
5
|
+
export const MenuButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
6
|
+
var _a;
|
|
7
|
+
|
|
8
|
+
const variantProps = { ...props,
|
|
9
|
+
variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default'
|
|
10
|
+
};
|
|
11
|
+
const shimProps = { ...shimButtonProps(variantProps)
|
|
12
|
+
};
|
|
13
|
+
const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {};
|
|
14
|
+
return /*#__PURE__*/React.createElement(Menu, { ...shimmedMenuProps
|
|
15
|
+
}, /*#__PURE__*/React.createElement(MenuTrigger, null, /*#__PURE__*/React.createElement(MenuButton, { ...shimProps
|
|
16
|
+
})), /*#__PURE__*/React.createElement(MenuPopover, null, /*#__PURE__*/React.createElement(MenuList, null, (_a = props.menuProps) === null || _a === void 0 ? void 0 : _a.items.map(item =>
|
|
17
|
+
/*#__PURE__*/
|
|
18
|
+
// key is added through item spread
|
|
19
|
+
// eslint-disable-next-line react/jsx-key
|
|
20
|
+
React.createElement(MenuItemShim, { ...item
|
|
21
|
+
})))));
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=MenuButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/MenuButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,UAAT,EAAqB,IAArB,EAA2B,QAA3B,EAAqC,WAArC,EAAkD,WAAlD,QAAqE,4BAArE;AAEA,SAAS,YAAT,EAAuB,aAAvB,QAA4C,eAA5C;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAEA,OAAO,MAAM,cAAc,gBAEvB,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;;;EACnC,MAAM,YAAY,GAAG,EACnB,GAAG,KADgB;IAEnB,gBAAgB,EAAE,KAAK,CAAC,OAAN,GAAgB,oBAAhB,GAAuC;EAFtC,CAArB;EAKA,MAAM,SAAS,GAAoB,EACjC,GAAG,eAAe,CAAC,YAAD;EADe,CAAnC;EAIA,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAN,GAAkB,aAAa,CAAC,KAAK,CAAC,SAAP,CAA/B,GAAmD,EAA5E;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,IAAD,EAAK,EAAA,GAAK;EAAL,CAAL,eACE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,eACE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,EAAA,GAAK;EAAL,CAAX,CADF,CADF,eAIE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,EACG,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,KAAF,CAAQ,GAAR,CAAY,IAAI;EAAA;EAC9B;EACA;EACA,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,EAAA,GAAK;EAAL,CAAb,CAHc,CADlB,CADF,CAJF,CADF;AAgBD,CA5BG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\nimport { MenuButton, Menu, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';\nimport type { MenuButtonProps } from '@fluentui/react-components';\nimport { MenuItemShim, shimMenuProps } from '../Menu/index';\n\nimport { shimButtonProps } from './shimButtonProps';\n\nexport const MenuButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n const variantProps = {\n ...props,\n variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default',\n };\n\n const shimProps: MenuButtonProps = {\n ...shimButtonProps(variantProps),\n };\n\n const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {};\n\n return (\n <Menu {...shimmedMenuProps}>\n <MenuTrigger>\n <MenuButton {...shimProps} />\n </MenuTrigger>\n <MenuPopover>\n <MenuList>\n {props.menuProps?.items.map(item => (\n // key is added through item spread\n // eslint-disable-next-line react/jsx-key\n <MenuItemShim {...item} />\n ))}\n </MenuList>\n </MenuPopover>\n </Menu>\n );\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ButtonShim } from './ButtonShim';
|
|
3
|
+
/**
|
|
4
|
+
* Shims v8 PrimaryButton to render a v9 Button
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export const PrimaryButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
8
|
+
return /*#__PURE__*/React.createElement(ButtonShim, { ...props,
|
|
9
|
+
primary: true,
|
|
10
|
+
variantClassName: "ms-Button--primary"
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=PrimaryButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/PrimaryButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,gBAE1B,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;EACnC,oBAAO,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,EAAA,GAAK,KAAL;IAAY,OAAO,EAAA,IAAnB;IAAoB,gBAAgB,EAAC;EAArC,CAAX,CAAP;AACD,CAFG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\nimport { ButtonShim } from './ButtonShim';\n\n/**\n * Shims v8 PrimaryButton to render a v9 Button\n */\nexport const PrimaryButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n return <ButtonShim {...props} primary variantClassName=\"ms-Button--primary\" />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ToggleButton } from '@fluentui/react-components';
|
|
3
|
+
import { shimButtonProps } from './shimButtonProps';
|
|
4
|
+
/**
|
|
5
|
+
* Shims v8 ToggleButton to render a v9 ToggleButton
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const ToggleButtonShim = /*#__PURE__*/React.forwardRef((props, _ref) => {
|
|
9
|
+
const variantProps = { ...props,
|
|
10
|
+
variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound'
|
|
11
|
+
};
|
|
12
|
+
const shimProps = { ...shimButtonProps(variantProps),
|
|
13
|
+
checked: props.checked,
|
|
14
|
+
defaultChecked: props.defaultChecked
|
|
15
|
+
};
|
|
16
|
+
return /*#__PURE__*/React.createElement(ToggleButton, { ...props,
|
|
17
|
+
...shimProps
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=ToggleButtonShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/ToggleButtonShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAIA,SAAS,YAAT,QAA6B,4BAA7B;AAGA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAEzB,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,IAAR,KAAgB;EACnC,MAAM,YAAY,GAAG,EACnB,GAAG,KADgB;IAEnB,gBAAgB,EAAE,KAAK,CAAC,OAAN,GAAgB,4BAAhB,GAA+C;EAF9C,CAArB;EAKA,MAAM,SAAS,GAAsB,EACnC,GAAG,eAAe,CAAC,YAAD,CADiB;IAEnC,OAAO,EAAE,KAAK,CAAC,OAFoB;IAGnC,cAAc,EAAE,KAAK,CAAC;EAHa,CAArC;EAMA,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,EAAA,GAAM,KAAN;IAAsD,GAAM;EAA5D,CAAb,CAAP;AACD,CAbG,CAFG","sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { ToggleButton } from '@fluentui/react-components';\nimport type { ToggleButtonProps } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims v8 ToggleButton to render a v9 ToggleButton\n */\nexport const ToggleButtonShim: React.ForwardRefExoticComponent<\n IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n const variantProps = {\n ...props,\n variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',\n };\n\n const shimProps: ToggleButtonProps = {\n ...shimButtonProps(variantProps),\n checked: props.checked,\n defaultChecked: props.defaultChecked,\n };\n\n return <ToggleButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export * from './ActionButtonShim';
|
|
2
|
+
export * from './ButtonShim';
|
|
3
|
+
export * from './CommandButtonShim';
|
|
4
|
+
export * from './CompoundButtonShim';
|
|
5
|
+
export * from './DefaultButtonShim';
|
|
6
|
+
export * from './MenuButtonShim';
|
|
7
|
+
export * from './PrimaryButtonShim';
|
|
8
|
+
export * from './shimButtonProps';
|
|
9
|
+
export * from './ToggleButtonShim';
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './ActionButtonShim';\nexport * from './ButtonShim';\nexport * from './CommandButtonShim';\nexport * from './CompoundButtonShim';\nexport * from './DefaultButtonShim';\nexport * from './MenuButtonShim';\nexport * from './PrimaryButtonShim';\nexport * from './shimButtonProps';\nexport * from './ToggleButtonShim';\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Icon } from '@fluentui/react';
|
|
3
|
+
export const shimButtonProps = props => {
|
|
4
|
+
var _a; //TODO: Icon shim. This still renders the v8 icon.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const icon = props.onRenderIcon ? props.onRenderIcon(props) : props.iconProps ? /*#__PURE__*/React.createElement(Icon, { ...props.iconProps
|
|
8
|
+
}) : undefined;
|
|
9
|
+
const variantClassName = ((_a = props.variantClassName) !== null && _a !== void 0 ? _a : props.primary) ? 'ms-Button--primary' : 'ms-Button--default';
|
|
10
|
+
const className = [props.baseClassName, variantClassName, props.className].filter(Boolean).join(' ');
|
|
11
|
+
return { // spread incoming props to propagate HTML properties not part of IBaseButtonProps
|
|
12
|
+
...props,
|
|
13
|
+
appearance: props.primary ? 'primary' : undefined,
|
|
14
|
+
className,
|
|
15
|
+
disabled: props.disabled,
|
|
16
|
+
disabledFocusable: props.allowDisabledFocus,
|
|
17
|
+
'aria-hidden': props.ariaHidden,
|
|
18
|
+
'aria-label': props.ariaLabel,
|
|
19
|
+
icon,
|
|
20
|
+
key: props.key || props.uniqueId,
|
|
21
|
+
children: props.onRenderChildren ? props.onRenderChildren(props) : props.onRenderText ? props.onRenderText(props) : props.text || props.children
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=shimButtonProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Button/shimButtonProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,IAAT,QAAqB,iBAArB;AAKA,OAAO,MAAM,eAAe,GAAI,KAAD,IAAkF;SAAA,CAC/G;;;EACA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAN,GACX,KAAK,CAAC,YAAN,CAAmB,KAAnB,CADW,GAET,KAAK,CAAC,SAAN,gBACF,KAAA,CAAA,aAAA,CAAC,IAAD,EAAK,EAAA,GAAK,KAAK,CAAC;EAAX,CAAL,CADE,GAEA,SAJJ;EAMA,MAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,KAAK,CAAC,OAAhC,IAA0C,oBAA1C,GAAiE,oBAA1F;EACA,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,aAAP,EAAsB,gBAAtB,EAAwC,KAAK,CAAC,SAA9C,EAAyD,MAAzD,CAAgE,OAAhE,EAAyE,IAAzE,CAA8E,GAA9E,CAAlB;EAEA,OAAO,EACL;IACA,GAAG,KAFE;IAGL,UAAU,EAAE,KAAK,CAAC,OAAN,GAAgB,SAAhB,GAA4B,SAHnC;IAIL,SAJK;IAKL,QAAQ,EAAE,KAAK,CAAC,QALX;IAML,iBAAiB,EAAE,KAAK,CAAC,kBANpB;IAOL,eAAe,KAAK,CAAC,UAPhB;IAQL,cAAc,KAAK,CAAC,SARf;IASL,IATK;IAUL,GAAG,EAAE,KAAK,CAAC,GAAN,IAAa,KAAK,CAAC,QAVnB;IAWL,QAAQ,EAAE,KAAK,CAAC,gBAAN,GACN,KAAK,CAAC,gBAAN,CAAuB,KAAvB,CADM,GAEN,KAAK,CAAC,YAAN,GACA,KAAK,CAAC,YAAN,CAAmB,KAAnB,CADA,GAEA,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC;EAfnB,CAAP;AAiBD,CA5BM","sourcesContent":["import * as React from 'react';\n\nimport { Icon } from '@fluentui/react';\nimport type { IBaseButtonProps } from '@fluentui/react';\n\nimport type { ButtonProps } from '@fluentui/react-components';\n\nexport const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes<HTMLButtonElement>): ButtonProps => {\n //TODO: Icon shim. This still renders the v8 icon.\n const icon = props.onRenderIcon ? (\n props.onRenderIcon(props)\n ) : props.iconProps ? (\n <Icon {...props.iconProps} />\n ) : undefined;\n\n const variantClassName = props.variantClassName ?? props.primary ? 'ms-Button--primary' : 'ms-Button--default';\n const className = [props.baseClassName, variantClassName, props.className].filter(Boolean).join(' ');\n\n return {\n // spread incoming props to propagate HTML properties not part of IBaseButtonProps\n ...props,\n appearance: props.primary ? 'primary' : undefined,\n className,\n disabled: props.disabled,\n disabledFocusable: props.allowDisabledFocus,\n 'aria-hidden': props.ariaHidden,\n 'aria-label': props.ariaLabel,\n icon,\n key: props.key || props.uniqueId,\n children: props.onRenderChildren\n ? props.onRenderChildren(props)\n : props.onRenderText\n ? props.onRenderText(props)\n : props.text || props.children,\n } as ButtonProps;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ContextualMenuItemType } from '@fluentui/react';
|
|
3
|
+
import { MenuItem, MenuDivider, MenuGroup, MenuGroupHeader, MenuTrigger, Menu, MenuList, MenuPopover, MenuItemCheckbox } from '@fluentui/react-components';
|
|
4
|
+
import { shimMenuHeaderProps, shimMenuItemCheckboxProps, shimMenuItemProps, shimMenuProps } from './shimMenuProps';
|
|
5
|
+
export const MenuItemShim = props => {
|
|
6
|
+
var _a, _b;
|
|
7
|
+
|
|
8
|
+
if (props.itemType === ContextualMenuItemType.Divider) {
|
|
9
|
+
const shimProps = shimMenuItemProps(props);
|
|
10
|
+
return /*#__PURE__*/React.createElement(MenuDivider, { ...shimProps
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
if (props.itemType === ContextualMenuItemType.Section) {
|
|
15
|
+
const shimProps = shimMenuHeaderProps(props);
|
|
16
|
+
return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(MenuGroupHeader, null, shimProps.children), (_a = props.subMenuProps) === null || _a === void 0 ? void 0 : _a.items.map(item =>
|
|
17
|
+
/*#__PURE__*/
|
|
18
|
+
// key is added through item spread
|
|
19
|
+
// eslint-disable-next-line react/jsx-key
|
|
20
|
+
React.createElement(MenuItemShim, { ...item
|
|
21
|
+
})));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (props.canCheck) {
|
|
25
|
+
const shimProps = shimMenuItemCheckboxProps(props);
|
|
26
|
+
return /*#__PURE__*/React.createElement(MenuItemCheckbox, { ...shimProps
|
|
27
|
+
});
|
|
28
|
+
} // Nested Menu to handle submenus
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
if (((_b = props.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) && props.subMenuProps.items.length > 0) {
|
|
32
|
+
const shimmedMenuProps = shimMenuProps(props.subMenuProps);
|
|
33
|
+
const shimmedItemProps = shimMenuItemProps(props);
|
|
34
|
+
return /*#__PURE__*/React.createElement(Menu, { ...shimmedMenuProps
|
|
35
|
+
}, /*#__PURE__*/React.createElement(MenuTrigger, null, /*#__PURE__*/React.createElement(MenuItem, { ...shimmedItemProps,
|
|
36
|
+
hasSubmenu: true
|
|
37
|
+
})), /*#__PURE__*/React.createElement(MenuPopover, null, /*#__PURE__*/React.createElement(MenuList, null, props.subMenuProps.items.map(item =>
|
|
38
|
+
/*#__PURE__*/
|
|
39
|
+
// key is added through item spread
|
|
40
|
+
// eslint-disable-next-line react/jsx-key
|
|
41
|
+
React.createElement(MenuItemShim, { ...item
|
|
42
|
+
})))));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const shimProps = shimMenuItemProps(props);
|
|
46
|
+
return /*#__PURE__*/React.createElement(MenuItem, { ...shimProps
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=MenuShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Menu/MenuShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,sBAAT,QAAuC,iBAAvC;AAEA,SACE,QADF,EAEE,WAFF,EAGE,SAHF,EAIE,eAJF,EAKE,WALF,EAME,IANF,EAOE,QAPF,EAQE,WARF,EASE,gBATF,QAWO,4BAXP;AAaA,SAAS,mBAAT,EAA8B,yBAA9B,EAAyD,iBAAzD,EAA4E,aAA5E,QAAiG,iBAAjG;AAEA,OAAO,MAAM,YAAY,GAAI,KAAD,IAA+B;;;EACzD,IAAI,KAAK,CAAC,QAAN,KAAmB,sBAAsB,CAAC,OAA9C,EAAuD;IACrD,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAD,CAAnC;IACA,oBAAO,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,EAAA,GAAM;IAAN,CAAZ,CAAP;EACD;;EAED,IAAI,KAAK,CAAC,QAAN,KAAmB,sBAAsB,CAAC,OAA9C,EAAuD;IACrD,MAAM,SAAS,GAAG,mBAAmB,CAAC,KAAD,CAArC;IACA,oBACE,KAAA,CAAA,aAAA,CAAC,SAAD,EAAU,IAAV,eACE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB,EAAkB,SAAS,CAAC,QAA5B,CADF,EAGG,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,G,GAAoB,K,CAAM,G,CAAI,IAAI;IAAA;IACjC;IACA;IACA,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,EAAA,GAAK;IAAL,CAAb,C,CANJ,CADF;EAWD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,MAAM,SAAS,GAAG,yBAAyB,CAAC,KAAD,CAA3C;IACA,oBAAO,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,EAAA,GAAK;IAAL,CAAjB,CAAP;EACD,CAxBwD,CA0BzD;;;EACA,IAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAApB,KAA6B,KAAK,CAAC,YAAN,CAAmB,KAAnB,CAAyB,MAAzB,GAAkC,CAAnE,EAAsE;IACpE,MAAM,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,YAAP,CAAtC;IACA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,KAAD,CAA1C;IAEA,oBACE,KAAA,CAAA,aAAA,CAAC,IAAD,EAAK,EAAA,GAAK;IAAL,CAAL,eACE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,EAAA,GAAK,gBAAL;MAAuB,UAAU,EAAA;IAAjC,CAAT,CADF,CADF,eAIE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,EACG,KAAK,CAAC,YAAN,CAAmB,KAAnB,CAAyB,GAAzB,CAA6B,IAAI;IAAA;IAChC;IACA;IACA,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,EAAA,GAAK;IAAL,CAAb,CAHD,CADH,CADF,CAJF,CADF;EAgBD;;EAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAD,CAAnC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,EAAA,GAAK;EAAL,CAAT,CAAP;AACD,CAnDM","sourcesContent":["import * as React from 'react';\n\nimport { ContextualMenuItemType } from '@fluentui/react';\nimport type { IContextualMenuItem } from '@fluentui/react';\nimport {\n MenuItem,\n MenuDivider,\n MenuGroup,\n MenuGroupHeader,\n MenuTrigger,\n Menu,\n MenuList,\n MenuPopover,\n MenuItemCheckbox,\n MenuDividerProps,\n} from '@fluentui/react-components';\n\nimport { shimMenuHeaderProps, shimMenuItemCheckboxProps, shimMenuItemProps, shimMenuProps } from './shimMenuProps';\n\nexport const MenuItemShim = (props: IContextualMenuItem) => {\n if (props.itemType === ContextualMenuItemType.Divider) {\n const shimProps = shimMenuItemProps(props);\n return <MenuDivider {...(shimProps as MenuDividerProps)} />;\n }\n\n if (props.itemType === ContextualMenuItemType.Section) {\n const shimProps = shimMenuHeaderProps(props);\n return (\n <MenuGroup>\n <MenuGroupHeader>{shimProps.children}</MenuGroupHeader>\n {/* //TODO: sectionProps handling */}\n {props.subMenuProps?.items.map(item => (\n // key is added through item spread\n // eslint-disable-next-line react/jsx-key\n <MenuItemShim {...item} />\n ))}\n </MenuGroup>\n );\n }\n\n if (props.canCheck) {\n const shimProps = shimMenuItemCheckboxProps(props);\n return <MenuItemCheckbox {...shimProps} />;\n }\n\n // Nested Menu to handle submenus\n if (props.subMenuProps?.items && props.subMenuProps.items.length > 0) {\n const shimmedMenuProps = shimMenuProps(props.subMenuProps);\n const shimmedItemProps = shimMenuItemProps(props);\n\n return (\n <Menu {...shimmedMenuProps}>\n <MenuTrigger>\n <MenuItem {...shimmedItemProps} hasSubmenu />\n </MenuTrigger>\n <MenuPopover>\n <MenuList>\n {props.subMenuProps.items.map(item => (\n // key is added through item spread\n // eslint-disable-next-line react/jsx-key\n <MenuItemShim {...item} />\n ))}\n </MenuList>\n </MenuPopover>\n </Menu>\n );\n }\n\n const shimProps = shimMenuItemProps(props);\n return <MenuItem {...shimProps} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './MenuShim';\nexport * from './shimMenuProps';\n"]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Icon } from '@fluentui/react';
|
|
3
|
+
export const shimMenuProps = props => {
|
|
4
|
+
return {
|
|
5
|
+
hasIcons: props === null || props === void 0 ? void 0 : props.items.some(i => i.iconProps),
|
|
6
|
+
hasCheckmarks: props === null || props === void 0 ? void 0 : props.items.some(i => i.canCheck || i.checked)
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
export const shimMenuItemProps = props => {
|
|
10
|
+
//TODO: Handle menuItem.onRenderIcon
|
|
11
|
+
const icon = props.iconProps ? /*#__PURE__*/React.createElement(Icon, { ...props.iconProps
|
|
12
|
+
}) : undefined;
|
|
13
|
+
return { ...props,
|
|
14
|
+
'aria-label': props.ariaLabel,
|
|
15
|
+
children: props.text,
|
|
16
|
+
icon,
|
|
17
|
+
secondaryContent: props.secondaryText
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export const shimMenuItemCheckboxProps = props => {
|
|
21
|
+
return { ...shimMenuItemProps(props),
|
|
22
|
+
name: props.text || 'name',
|
|
23
|
+
value: props.value || 'value'
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export const shimMenuHeaderProps = props => {
|
|
27
|
+
var _a;
|
|
28
|
+
|
|
29
|
+
return {
|
|
30
|
+
children: (_a = props.sectionProps) === null || _a === void 0 ? void 0 : _a.title
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=shimMenuProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Menu/shimMenuProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,IAAT,QAAqB,iBAArB;AAIA,OAAO,MAAM,aAAa,GAAI,KAAD,IAAoD;EAC/E,OAAO;IACL,QAAQ,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,CAAa,IAAb,CAAkB,CAAC,IAAI,CAAC,CAAC,SAAzB,CADL;IAEL,aAAa,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,CAAa,IAAb,CAAkB,CAAC,IAAI,CAAC,CAAC,QAAF,IAAc,CAAC,CAAC,OAAvC;EAFV,CAAP;AAID,CALM;AAOP,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA8C;EAC7E;EACA,MAAM,IAAI,GAAG,KAAK,CAAC,SAAN,gBAAkB,KAAA,CAAA,aAAA,CAAC,IAAD,EAAK,EAAA,GAAK,KAAK,CAAC;EAAX,CAAL,CAAlB,GAAkD,SAA/D;EAEA,OAAO,EACL,GAAG,KADE;IAEL,cAAc,KAAK,CAAC,SAFf;IAGL,QAAQ,EAAE,KAAK,CAAC,IAHX;IAIL,IAJK;IAKL,gBAAgB,EAAE,KAAK,CAAC;EALnB,CAAP;AAOD,CAXM;AAaP,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsD;EAC7F,OAAO,EACL,GAAG,iBAAiB,CAAC,KAAD,CADf;IAEL,IAAI,EAAE,KAAK,CAAC,IAAN,IAAc,MAFf;IAGL,KAAK,EAAE,KAAK,CAAC,KAAN,IAAe;EAHjB,CAAP;AAKD,CANM;AAQP,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqD;;;EACtF,OAAO;IACL,QAAQ,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE;EADzB,CAAP;AAGD,CAJM","sourcesContent":["import * as React from 'react';\n\nimport { Icon } from '@fluentui/react';\nimport type { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport type { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu';\n\nexport const shimMenuProps = (props: IContextualMenuProps): Partial<MenuProps> => {\n return {\n hasIcons: props?.items.some(i => i.iconProps),\n hasCheckmarks: props?.items.some(i => i.canCheck || i.checked),\n };\n};\n\nexport const shimMenuItemProps = (props: IContextualMenuItem): MenuItemProps => {\n //TODO: Handle menuItem.onRenderIcon\n const icon = props.iconProps ? <Icon {...props.iconProps} /> : undefined;\n\n return {\n ...props,\n 'aria-label': props.ariaLabel,\n children: props.text,\n icon,\n secondaryContent: props.secondaryText,\n } as MenuItemProps;\n};\n\nexport const shimMenuItemCheckboxProps = (props: IContextualMenuItem): MenuItemCheckboxProps => {\n return {\n ...shimMenuItemProps(props),\n name: props.text || 'name',\n value: props.value || 'value',\n };\n};\n\nexport const shimMenuHeaderProps = (props: IContextualMenuItem): MenuGroupHeaderProps => {\n return {\n children: props.sectionProps?.title,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
3
|
+
const stackItemClassNames = {
|
|
4
|
+
root: 'ms-StackItem'
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
const useStackItemShimStyles = /*#__PURE__*/__styles({
|
|
8
|
+
"root": {
|
|
9
|
+
"Bqenvij": "f11ysow2",
|
|
10
|
+
"a9b677": "f14z66ap"
|
|
11
|
+
},
|
|
12
|
+
"disableShrink": {
|
|
13
|
+
"Bnnss6s": "fi64zpg"
|
|
14
|
+
},
|
|
15
|
+
"verticalFill": {
|
|
16
|
+
"Bqenvij": "f1l02sjl"
|
|
17
|
+
}
|
|
18
|
+
}, {
|
|
19
|
+
"d": [".f11ysow2{height:auto;}", ".f14z66ap{width:auto;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1l02sjl{height:100%;}"]
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
const useFlexAlignSelfStyles = /*#__PURE__*/__styles({
|
|
23
|
+
"auto": {
|
|
24
|
+
"qb2dma": "fio29c6"
|
|
25
|
+
},
|
|
26
|
+
"baseline": {
|
|
27
|
+
"qb2dma": "f18ssl25"
|
|
28
|
+
},
|
|
29
|
+
"center": {
|
|
30
|
+
"qb2dma": "f7nlbp4"
|
|
31
|
+
},
|
|
32
|
+
"start": {
|
|
33
|
+
"qb2dma": "fjgzulp"
|
|
34
|
+
},
|
|
35
|
+
"end": {
|
|
36
|
+
"qb2dma": "fpydfdc"
|
|
37
|
+
},
|
|
38
|
+
"stretch": {
|
|
39
|
+
"qb2dma": "f1ub7u0d"
|
|
40
|
+
}
|
|
41
|
+
}, {
|
|
42
|
+
"d": [".fio29c6{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;}", ".f18ssl25{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".fpydfdc{-webkit-align-self:flex-end;-ms-flex-item-align:flex-end;align-self:flex-end;}", ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}"]
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const useFlexGrowStyles = /*#__PURE__*/__styles({
|
|
46
|
+
"1": {
|
|
47
|
+
"Bh6795r": "fqerorx"
|
|
48
|
+
},
|
|
49
|
+
"2": {
|
|
50
|
+
"Bh6795r": "fv68sux"
|
|
51
|
+
},
|
|
52
|
+
"3": {
|
|
53
|
+
"Bh6795r": "f1g5s877"
|
|
54
|
+
},
|
|
55
|
+
"inherit": {
|
|
56
|
+
"Bh6795r": "fbrulcr"
|
|
57
|
+
},
|
|
58
|
+
"initial": {
|
|
59
|
+
"Bh6795r": "fqq5sy3"
|
|
60
|
+
},
|
|
61
|
+
"revert": {
|
|
62
|
+
"Bh6795r": "f1kc8nlq"
|
|
63
|
+
},
|
|
64
|
+
"unset": {
|
|
65
|
+
"Bh6795r": "fepjonw"
|
|
66
|
+
}
|
|
67
|
+
}, {
|
|
68
|
+
"d": [".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fv68sux{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}", ".f1g5s877{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;}", ".fbrulcr{-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;}", ".fqq5sy3{-webkit-box-flex:initial;-webkit-flex-grow:initial;-ms-flex-positive:initial;flex-grow:initial;}", ".f1kc8nlq{-webkit-box-flex:revert;-webkit-flex-grow:revert;-ms-flex-positive:revert;flex-grow:revert;}", ".fepjonw{-webkit-box-flex:unset;-webkit-flex-grow:unset;-ms-flex-positive:unset;flex-grow:unset;}"]
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
const useFlexShrinkStyles = /*#__PURE__*/__styles({
|
|
72
|
+
"0": {
|
|
73
|
+
"Bnnss6s": "fi64zpg"
|
|
74
|
+
},
|
|
75
|
+
"1": {
|
|
76
|
+
"Bnnss6s": "f1neuvcm"
|
|
77
|
+
},
|
|
78
|
+
"2": {
|
|
79
|
+
"Bnnss6s": "f1nje5c6"
|
|
80
|
+
},
|
|
81
|
+
"inherit": {
|
|
82
|
+
"Bnnss6s": "f11ln2im"
|
|
83
|
+
},
|
|
84
|
+
"initial": {
|
|
85
|
+
"Bnnss6s": "f187621l"
|
|
86
|
+
},
|
|
87
|
+
"revert": {
|
|
88
|
+
"Bnnss6s": "f1jq7m8u"
|
|
89
|
+
},
|
|
90
|
+
"unset": {
|
|
91
|
+
"Bnnss6s": "f10s6wei"
|
|
92
|
+
}
|
|
93
|
+
}, {
|
|
94
|
+
"d": [".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1nje5c6{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;}", ".f11ln2im{-webkit-flex-shrink:inherit;-ms-flex-negative:inherit;flex-shrink:inherit;}", ".f187621l{-webkit-flex-shrink:initial;-ms-flex-negative:initial;flex-shrink:initial;}", ".f1jq7m8u{-webkit-flex-shrink:revert;-ms-flex-negative:revert;flex-shrink:revert;}", ".f10s6wei{-webkit-flex-shrink:unset;-ms-flex-negative:unset;flex-shrink:unset;}"]
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
const useFlexOrderStyles = /*#__PURE__*/__styles({
|
|
98
|
+
"0": {
|
|
99
|
+
"Bxn5svx": "f1ftwmyh"
|
|
100
|
+
},
|
|
101
|
+
"1": {
|
|
102
|
+
"Bxn5svx": "f15wwbgh"
|
|
103
|
+
},
|
|
104
|
+
"2": {
|
|
105
|
+
"Bxn5svx": "f15ak53d"
|
|
106
|
+
},
|
|
107
|
+
"3": {
|
|
108
|
+
"Bxn5svx": "f19x901k"
|
|
109
|
+
},
|
|
110
|
+
"inherit": {
|
|
111
|
+
"Bxn5svx": "ficp5m6"
|
|
112
|
+
},
|
|
113
|
+
"initial": {
|
|
114
|
+
"Bxn5svx": "f1xfv85z"
|
|
115
|
+
},
|
|
116
|
+
"unset": {
|
|
117
|
+
"Bxn5svx": "f1ex5c7r"
|
|
118
|
+
},
|
|
119
|
+
"revert": {
|
|
120
|
+
"Bxn5svx": "fgu8tny"
|
|
121
|
+
},
|
|
122
|
+
"-3": {
|
|
123
|
+
"Bxn5svx": "folhkm8"
|
|
124
|
+
},
|
|
125
|
+
"-2": {
|
|
126
|
+
"Bxn5svx": "f1yml5i9"
|
|
127
|
+
},
|
|
128
|
+
"-1": {
|
|
129
|
+
"Bxn5svx": "f1l5m61u"
|
|
130
|
+
}
|
|
131
|
+
}, {
|
|
132
|
+
"d": [".f1ftwmyh{-webkit-order:0;-ms-flex-order:0;order:0;}", ".f15wwbgh{-webkit-order:1;-ms-flex-order:1;order:1;}", ".f15ak53d{-webkit-order:2;-ms-flex-order:2;order:2;}", ".f19x901k{-webkit-order:3;-ms-flex-order:3;order:3;}", ".ficp5m6{-webkit-order:inherit;-ms-flex-order:inherit;order:inherit;}", ".f1xfv85z{-webkit-order:initial;-ms-flex-order:initial;order:initial;}", ".f1ex5c7r{-webkit-order:unset;-ms-flex-order:unset;order:unset;}", ".fgu8tny{-webkit-order:revert;-ms-flex-order:revert;order:revert;}", ".folhkm8{-webkit-order:-3;-ms-flex-order:-3;order:-3;}", ".f1yml5i9{-webkit-order:-2;-ms-flex-order:-2;order:-2;}", ".f1l5m61u{-webkit-order:-1;-ms-flex-order:-1;order:-1;}"]
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
export const StackItemShim = props => {
|
|
136
|
+
const {
|
|
137
|
+
grow,
|
|
138
|
+
shrink,
|
|
139
|
+
disableShrink,
|
|
140
|
+
align,
|
|
141
|
+
verticalFill,
|
|
142
|
+
order,
|
|
143
|
+
className,
|
|
144
|
+
children
|
|
145
|
+
} = props;
|
|
146
|
+
const styles = useStackItemShimStyles();
|
|
147
|
+
const alignSelfStyles = useFlexAlignSelfStyles();
|
|
148
|
+
const shrinkFlexStyles = useFlexShrinkStyles();
|
|
149
|
+
const growFlexStyles = useFlexGrowStyles();
|
|
150
|
+
const orderFlexStyles = useFlexOrderStyles();
|
|
151
|
+
const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];
|
|
152
|
+
|
|
153
|
+
if (order) {
|
|
154
|
+
stackItemStyles.push(orderFlexStyles[order]);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
if (grow) {
|
|
158
|
+
const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
|
|
159
|
+
stackItemStyles.push(flexGrow);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
if (shrink && !disableShrink) {
|
|
163
|
+
stackItemStyles.push(shrinkFlexStyles[1]);
|
|
164
|
+
} else if (disableShrink || !grow && !shrink) {
|
|
165
|
+
stackItemStyles.push(shrinkFlexStyles[0]);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
if (disableShrink) {
|
|
169
|
+
stackItemStyles.push(styles.disableShrink);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className);
|
|
173
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
174
|
+
className: rootStyles
|
|
175
|
+
}, children);
|
|
176
|
+
};
|
|
177
|
+
//# sourceMappingURL=StackItemShim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Stack/StackItemShim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,MAAM,mBAAmB,GAAG;EAC1B,IAAI,EAAE;AADoB,CAA5B;;AAIA,MAAM,sBAAsB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA/B;;AAaA,MAAM,sBAAsB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA/B;;AAqBA,MAAM,iBAAiB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;;AAwBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAwBA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;AAoCA,OAAO,MAAM,aAAa,GAAI,KAAD,IAA2B;EACtD,MAAM;IAAE,IAAF;IAAQ,MAAR;IAAgB,aAAhB;IAA+B,KAA/B;IAAsC,YAAtC;IAAoD,KAApD;IAA2D,SAA3D;IAAsE;EAAtE,IAAmF,KAAzF;EAEA,MAAM,MAAM,GAAG,sBAAsB,EAArC;EACA,MAAM,eAAe,GAAG,sBAAsB,EAA9C;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EACA,MAAM,cAAc,GAA2B,iBAAiB,EAAhE;EACA,MAAM,eAAe,GAA2B,kBAAkB,EAAlE;EAEA,MAAM,eAAe,GAAG,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,IAAI,eAAe,CAAC,KAAD,CAAtC,EAA+C,YAAY,IAAI,MAAM,CAAC,YAAtE,CAAxB;;EAEA,IAAI,KAAJ,EAAW;IACT,eAAe,CAAC,IAAhB,CAAqB,eAAe,CAAC,KAAD,CAApC;EACD;;EAED,IAAI,IAAJ,EAAU;IACR,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAT,GAAgB,cAAc,CAAC,CAAD,CAA9B,GAAoC,cAAc,CAAC,IAAD,CAAnE;IACA,eAAe,CAAC,IAAhB,CAAqB,QAArB;EACD;;EAED,IAAI,MAAM,IAAI,CAAC,aAAf,EAA8B;IAC5B,eAAe,CAAC,IAAhB,CAAqB,gBAAgB,CAAC,CAAD,CAArC;EACD,CAFD,MAEO,IAAI,aAAa,IAAK,CAAC,IAAD,IAAS,CAAC,MAAhC,EAAyC;IAC9C,eAAe,CAAC,IAAhB,CAAqB,gBAAgB,CAAC,CAAD,CAArC;EACD;;EAED,IAAI,aAAJ,EAAmB;IACjB,eAAe,CAAC,IAAhB,CAAqB,MAAM,CAAC,aAA5B;EACD;;EAED,MAAM,UAAU,GAAG,YAAY,CAAC,mBAAmB,CAAC,IAArB,EAA2B,GAAG,eAA9B,EAA+C,SAA/C,CAA/B;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAE;EAAhB,CAAA,EAA6B,QAA7B,CAAP;AACD,CAjCM","sourcesContent":["import * as React from 'react';\n\nimport { IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nconst stackItemClassNames = {\n root: 'ms-StackItem',\n};\n\nconst useStackItemShimStyles = makeStyles({\n root: {\n height: 'auto',\n width: 'auto',\n },\n disableShrink: {\n flexShrink: 0,\n },\n verticalFill: {\n height: '100%',\n },\n});\n\nconst useFlexAlignSelfStyles = makeStyles({\n auto: {\n alignSelf: 'auto',\n },\n baseline: {\n alignSelf: 'baseline',\n },\n center: {\n alignSelf: 'center',\n },\n start: {\n alignSelf: 'flex-start',\n },\n end: {\n alignSelf: 'flex-end',\n },\n stretch: {\n alignSelf: 'stretch',\n },\n});\n\nconst useFlexGrowStyles = makeStyles({\n inherit: {\n flexGrow: 'inherit',\n },\n initial: {\n flexGrow: 'initial',\n },\n revert: {\n flexGrow: 'revert',\n },\n unset: {\n flexGrow: 'unset',\n },\n '1': {\n flexGrow: 1,\n },\n '2': {\n flexGrow: 2,\n },\n '3': {\n flexGrow: 3,\n },\n});\n\nconst useFlexShrinkStyles = makeStyles({\n inherit: {\n flexShrink: 'inherit',\n },\n initial: {\n flexShrink: 'initial',\n },\n revert: {\n flexShrink: 'revert',\n },\n unset: {\n flexShrink: 'unset',\n },\n 0: {\n flexShrink: 0,\n },\n 1: {\n flexShrink: 1,\n },\n 2: {\n flexShrink: 2,\n },\n});\n\nconst useFlexOrderStyles = makeStyles({\n inherit: {\n order: 'inherit',\n },\n initial: {\n order: 'initial',\n },\n unset: {\n order: 'unset',\n },\n revert: {\n order: 'revert',\n },\n '-3': {\n order: -3,\n },\n '-2': {\n order: -2,\n },\n '-1': {\n order: -1,\n },\n '0': {\n order: 0,\n },\n '1': {\n order: 1,\n },\n '2': {\n order: 2,\n },\n '3': {\n order: 3,\n },\n});\n\nexport const StackItemShim = (props: IStackItemProps) => {\n const { grow, shrink, disableShrink, align, verticalFill, order, className, children } = props;\n\n const styles = useStackItemShimStyles();\n const alignSelfStyles = useFlexAlignSelfStyles();\n const shrinkFlexStyles = useFlexShrinkStyles();\n const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n const orderFlexStyles: Record<string, string> = useFlexOrderStyles();\n\n const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];\n\n if (order) {\n stackItemStyles.push(orderFlexStyles[order]);\n }\n\n if (grow) {\n const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n stackItemStyles.push(flexGrow);\n }\n\n if (shrink && !disableShrink) {\n stackItemStyles.push(shrinkFlexStyles[1]);\n } else if (disableShrink || (!grow && !shrink)) {\n stackItemStyles.push(shrinkFlexStyles[0]);\n }\n\n if (disableShrink) {\n stackItemStyles.push(styles.disableShrink);\n }\n\n const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className);\n\n return <div className={rootStyles}>{children}</div>;\n};\n"],"sourceRoot":"../src/"}
|