@fluentui/react-migration-v8-v9 1.0.31 → 9.1.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.
Files changed (105) hide show
  1. package/CHANGELOG.json +20 -500
  2. package/CHANGELOG.md +12 -273
  3. package/lib/components/Button/ActionButtonShim.js.map +1 -1
  4. package/lib/components/Button/ButtonShim.js.map +1 -1
  5. package/lib/components/Button/CommandButtonShim.js.map +1 -1
  6. package/lib/components/Button/CompoundButtonShim.js.map +1 -1
  7. package/lib/components/Button/DefaultButtonShim.js.map +1 -1
  8. package/lib/components/Button/MenuButtonShim.js.map +1 -1
  9. package/lib/components/Button/PrimaryButtonShim.js.map +1 -1
  10. package/lib/components/Button/ToggleButtonShim.js.map +1 -1
  11. package/lib/components/Button/index.js.map +1 -1
  12. package/lib/components/Button/shimButtonProps.js.map +1 -1
  13. package/lib/components/Menu/MenuShim.js.map +1 -1
  14. package/lib/components/Menu/index.js.map +1 -1
  15. package/lib/components/Menu/shimMenuProps.js.map +1 -1
  16. package/lib/components/Stack/StackItemShim.js.map +1 -1
  17. package/lib/components/Stack/StackShim.js.map +1 -1
  18. package/lib/components/Stack/index.js.map +1 -1
  19. package/lib/components/Stack/stackUtils.js.map +1 -1
  20. package/lib/components/Theme/index.js.map +1 -1
  21. package/lib/components/Theme/themeDuplicates.js.map +1 -1
  22. package/lib/components/Theme/v8ThemeShim.js +2 -0
  23. package/lib/components/Theme/v8ThemeShim.js.map +1 -1
  24. package/lib/components/Theme/v9BrandVariantsShim.js.map +1 -1
  25. package/lib/components/Theme/v9ThemeShim.js.map +1 -1
  26. package/lib/index.js.map +1 -1
  27. package/lib/stories/ThemeShim/ThemePreviewV8.js +316 -0
  28. package/lib/stories/ThemeShim/ThemePreviewV8.js.map +1 -0
  29. package/lib/stories/ThemeShim/ThemePreviewV9.js +196 -0
  30. package/lib/stories/ThemeShim/ThemePreviewV9.js.map +1 -0
  31. package/lib-commonjs/components/Button/ActionButtonShim.js.map +1 -1
  32. package/lib-commonjs/components/Button/ButtonShim.js.map +1 -1
  33. package/lib-commonjs/components/Button/CommandButtonShim.js.map +1 -1
  34. package/lib-commonjs/components/Button/CompoundButtonShim.js.map +1 -1
  35. package/lib-commonjs/components/Button/DefaultButtonShim.js.map +1 -1
  36. package/lib-commonjs/components/Button/MenuButtonShim.js.map +1 -1
  37. package/lib-commonjs/components/Button/PrimaryButtonShim.js.map +1 -1
  38. package/lib-commonjs/components/Button/ToggleButtonShim.js.map +1 -1
  39. package/lib-commonjs/components/Button/index.js.map +1 -1
  40. package/lib-commonjs/components/Button/shimButtonProps.js.map +1 -1
  41. package/lib-commonjs/components/Menu/MenuShim.js.map +1 -1
  42. package/lib-commonjs/components/Menu/index.js.map +1 -1
  43. package/lib-commonjs/components/Menu/shimMenuProps.js.map +1 -1
  44. package/lib-commonjs/components/Stack/StackItemShim.js.map +1 -1
  45. package/lib-commonjs/components/Stack/StackShim.js.map +1 -1
  46. package/lib-commonjs/components/Stack/index.js.map +1 -1
  47. package/lib-commonjs/components/Stack/stackUtils.js.map +1 -1
  48. package/lib-commonjs/components/Theme/index.js.map +1 -1
  49. package/lib-commonjs/components/Theme/themeDuplicates.js.map +1 -1
  50. package/lib-commonjs/components/Theme/v8ThemeShim.js +2 -0
  51. package/lib-commonjs/components/Theme/v8ThemeShim.js.map +1 -1
  52. package/lib-commonjs/components/Theme/v9BrandVariantsShim.js.map +1 -1
  53. package/lib-commonjs/components/Theme/v9ThemeShim.js.map +1 -1
  54. package/lib-commonjs/index.js.map +1 -1
  55. package/lib-commonjs/stories/ThemeShim/ThemePreviewV8.js +323 -0
  56. package/lib-commonjs/stories/ThemeShim/ThemePreviewV8.js.map +1 -0
  57. package/lib-commonjs/stories/ThemeShim/ThemePreviewV9.js +195 -0
  58. package/lib-commonjs/stories/ThemeShim/ThemePreviewV9.js.map +1 -0
  59. package/package.json +9 -6
  60. package/lib-amd/components/Button/ActionButtonShim.js +0 -14
  61. package/lib-amd/components/Button/ActionButtonShim.js.map +0 -1
  62. package/lib-amd/components/Button/ButtonShim.js +0 -17
  63. package/lib-amd/components/Button/ButtonShim.js.map +0 -1
  64. package/lib-amd/components/Button/CommandButtonShim.js +0 -7
  65. package/lib-amd/components/Button/CommandButtonShim.js.map +0 -1
  66. package/lib-amd/components/Button/CompoundButtonShim.js +0 -15
  67. package/lib-amd/components/Button/CompoundButtonShim.js.map +0 -1
  68. package/lib-amd/components/Button/DefaultButtonShim.js +0 -12
  69. package/lib-amd/components/Button/DefaultButtonShim.js.map +0 -1
  70. package/lib-amd/components/Button/MenuButtonShim.js +0 -20
  71. package/lib-amd/components/Button/MenuButtonShim.js.map +0 -1
  72. package/lib-amd/components/Button/PrimaryButtonShim.js +0 -12
  73. package/lib-amd/components/Button/PrimaryButtonShim.js.map +0 -1
  74. package/lib-amd/components/Button/ToggleButtonShim.js +0 -14
  75. package/lib-amd/components/Button/ToggleButtonShim.js.map +0 -1
  76. package/lib-amd/components/Button/index.js +0 -14
  77. package/lib-amd/components/Button/index.js.map +0 -1
  78. package/lib-amd/components/Button/shimButtonProps.js +0 -19
  79. package/lib-amd/components/Button/shimButtonProps.js.map +0 -1
  80. package/lib-amd/components/Menu/MenuShim.js +0 -42
  81. package/lib-amd/components/Menu/MenuShim.js.map +0 -1
  82. package/lib-amd/components/Menu/index.js +0 -7
  83. package/lib-amd/components/Menu/index.js.map +0 -1
  84. package/lib-amd/components/Menu/shimMenuProps.js +0 -30
  85. package/lib-amd/components/Menu/shimMenuProps.js.map +0 -1
  86. package/lib-amd/components/Stack/StackItemShim.js +0 -150
  87. package/lib-amd/components/Stack/StackItemShim.js.map +0 -1
  88. package/lib-amd/components/Stack/StackShim.js +0 -242
  89. package/lib-amd/components/Stack/StackShim.js.map +0 -1
  90. package/lib-amd/components/Stack/index.js +0 -7
  91. package/lib-amd/components/Stack/index.js.map +0 -1
  92. package/lib-amd/components/Stack/stackUtils.js +0 -168
  93. package/lib-amd/components/Stack/stackUtils.js.map +0 -1
  94. package/lib-amd/components/Theme/index.js +0 -9
  95. package/lib-amd/components/Theme/index.js.map +0 -1
  96. package/lib-amd/components/Theme/themeDuplicates.js +0 -864
  97. package/lib-amd/components/Theme/themeDuplicates.js.map +0 -1
  98. package/lib-amd/components/Theme/v8ThemeShim.js +0 -140
  99. package/lib-amd/components/Theme/v8ThemeShim.js.map +0 -1
  100. package/lib-amd/components/Theme/v9BrandVariantsShim.js +0 -75
  101. package/lib-amd/components/Theme/v9BrandVariantsShim.js.map +0 -1
  102. package/lib-amd/components/Theme/v9ThemeShim.js +0 -190
  103. package/lib-amd/components/Theme/v9ThemeShim.js.map +0 -1
  104. package/lib-amd/index.js +0 -38
  105. package/lib-amd/index.js.map +0 -1
@@ -1,30 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react"], function (require, exports, tslib_1, React, react_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.shimMenuHeaderProps = exports.shimMenuItemCheckboxProps = exports.shimMenuItemProps = exports.shimMenuProps = void 0;
5
- var shimMenuProps = function (props) {
6
- return {
7
- hasIcons: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.iconProps; }),
8
- hasCheckmarks: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.canCheck || i.checked; }),
9
- };
10
- };
11
- exports.shimMenuProps = shimMenuProps;
12
- var shimMenuItemProps = function (props) {
13
- //TODO: Handle menuItem.onRenderIcon
14
- var icon = props.iconProps ? React.createElement(react_1.Icon, tslib_1.__assign({}, props.iconProps)) : undefined;
15
- return tslib_1.__assign(tslib_1.__assign({}, props), { 'aria-label': props.ariaLabel, children: props.text, icon: icon, secondaryContent: props.secondaryText });
16
- };
17
- exports.shimMenuItemProps = shimMenuItemProps;
18
- var shimMenuItemCheckboxProps = function (props) {
19
- return tslib_1.__assign(tslib_1.__assign({}, exports.shimMenuItemProps(props)), { name: props.text || 'name', value: props.value || 'value' });
20
- };
21
- exports.shimMenuItemCheckboxProps = shimMenuItemCheckboxProps;
22
- var shimMenuHeaderProps = function (props) {
23
- var _a;
24
- return {
25
- children: (_a = props.sectionProps) === null || _a === void 0 ? void 0 : _a.title,
26
- };
27
- };
28
- exports.shimMenuHeaderProps = shimMenuHeaderProps;
29
- });
30
- //# sourceMappingURL=shimMenuProps.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"shimMenuProps.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Menu/shimMenuProps.tsx"],"names":[],"mappings":";;;;IAMO,IAAM,aAAa,GAAG,UAAC,KAA2B;QACvD,OAAO;YACL,QAAQ,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,EAAX,CAAW,CAAC;YAC7C,aAAa,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,OAAO,EAAvB,CAAuB,CAAC;SAC/D,CAAC;IACJ,CAAC,CAAC;IALW,QAAA,aAAa,iBAKxB;IAEK,IAAM,iBAAiB,GAAG,UAAC,KAA0B;QAC1D,oCAAoC;QACpC,IAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,YAAI,uBAAK,KAAK,CAAC,SAAS,EAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAEzE,OAAO,sCACF,KAAK,KACR,YAAY,EAAE,KAAK,CAAC,SAAS,EAC7B,QAAQ,EAAE,KAAK,CAAC,IAAI,EACpB,IAAI,MAAA,EACJ,gBAAgB,EAAE,KAAK,CAAC,aAAa,GACrB,CAAC;IACrB,CAAC,CAAC;IAXW,QAAA,iBAAiB,qBAW5B;IAEK,IAAM,yBAAyB,GAAG,UAAC,KAA0B;QAClE,6CACK,yBAAiB,CAAC,KAAK,CAAC,KAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,OAAO,IAC7B;IACJ,CAAC,CAAC;IANW,QAAA,yBAAyB,6BAMpC;IAEK,IAAM,mBAAmB,GAAG,UAAC,KAA0B;;QAC5D,OAAO;YACL,QAAQ,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK;SACpC,CAAC;IACJ,CAAC,CAAC;IAJW,QAAA,mBAAmB,uBAI9B","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"]}
@@ -1,150 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@griffel/react"], function (require, exports, tslib_1, React, react_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.StackItemShim = void 0;
5
- var stackItemClassNames = {
6
- root: 'ms-StackItem',
7
- };
8
- var useStackItemShimStyles = react_1.makeStyles({
9
- root: {
10
- height: 'auto',
11
- width: 'auto',
12
- },
13
- disableShrink: {
14
- flexShrink: 0,
15
- },
16
- verticalFill: {
17
- height: '100%',
18
- },
19
- });
20
- var useFlexAlignSelfStyles = react_1.makeStyles({
21
- auto: {
22
- alignSelf: 'auto',
23
- },
24
- baseline: {
25
- alignSelf: 'baseline',
26
- },
27
- center: {
28
- alignSelf: 'center',
29
- },
30
- start: {
31
- alignSelf: 'flex-start',
32
- },
33
- end: {
34
- alignSelf: 'flex-end',
35
- },
36
- stretch: {
37
- alignSelf: 'stretch',
38
- },
39
- });
40
- var useFlexGrowStyles = react_1.makeStyles({
41
- inherit: {
42
- flexGrow: 'inherit',
43
- },
44
- initial: {
45
- flexGrow: 'initial',
46
- },
47
- revert: {
48
- flexGrow: 'revert',
49
- },
50
- unset: {
51
- flexGrow: 'unset',
52
- },
53
- '1': {
54
- flexGrow: 1,
55
- },
56
- '2': {
57
- flexGrow: 2,
58
- },
59
- '3': {
60
- flexGrow: 3,
61
- },
62
- });
63
- var useFlexShrinkStyles = react_1.makeStyles({
64
- inherit: {
65
- flexShrink: 'inherit',
66
- },
67
- initial: {
68
- flexShrink: 'initial',
69
- },
70
- revert: {
71
- flexShrink: 'revert',
72
- },
73
- unset: {
74
- flexShrink: 'unset',
75
- },
76
- 0: {
77
- flexShrink: 0,
78
- },
79
- 1: {
80
- flexShrink: 1,
81
- },
82
- 2: {
83
- flexShrink: 2,
84
- },
85
- });
86
- var useFlexOrderStyles = react_1.makeStyles({
87
- inherit: {
88
- order: 'inherit',
89
- },
90
- initial: {
91
- order: 'initial',
92
- },
93
- unset: {
94
- order: 'unset',
95
- },
96
- revert: {
97
- order: 'revert',
98
- },
99
- '-3': {
100
- order: -3,
101
- },
102
- '-2': {
103
- order: -2,
104
- },
105
- '-1': {
106
- order: -1,
107
- },
108
- '0': {
109
- order: 0,
110
- },
111
- '1': {
112
- order: 1,
113
- },
114
- '2': {
115
- order: 2,
116
- },
117
- '3': {
118
- order: 3,
119
- },
120
- });
121
- var StackItemShim = function (props) {
122
- var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className, children = props.children;
123
- var styles = useStackItemShimStyles();
124
- var alignSelfStyles = useFlexAlignSelfStyles();
125
- var shrinkFlexStyles = useFlexShrinkStyles();
126
- var growFlexStyles = useFlexGrowStyles();
127
- var orderFlexStyles = useFlexOrderStyles();
128
- var stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];
129
- if (order) {
130
- stackItemStyles.push(orderFlexStyles[order]);
131
- }
132
- if (grow) {
133
- var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
134
- stackItemStyles.push(flexGrow);
135
- }
136
- if (shrink && !disableShrink) {
137
- stackItemStyles.push(shrinkFlexStyles[1]);
138
- }
139
- else if (disableShrink || (!grow && !shrink)) {
140
- stackItemStyles.push(shrinkFlexStyles[0]);
141
- }
142
- if (disableShrink) {
143
- stackItemStyles.push(styles.disableShrink);
144
- }
145
- var rootStyles = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackItemClassNames.root], stackItemStyles), [className]));
146
- return React.createElement("div", { className: rootStyles }, children);
147
- };
148
- exports.StackItemShim = StackItemShim;
149
- });
150
- //# sourceMappingURL=StackItemShim.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StackItemShim.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/StackItemShim.tsx"],"names":[],"mappings":"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","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"]}
@@ -1,242 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react", "@griffel/react", "./stackUtils"], function (require, exports, tslib_1, React, react_1, react_2, stackUtils_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.StackShim = void 0;
5
- var stackClassNames = {
6
- root: 'ms-Stack',
7
- inner: 'ms-Stack-inner',
8
- };
9
- var getClassNames = react_1.classNamesFunction();
10
- var useStackStyles = react_2.makeStyles({
11
- root: {
12
- display: 'flex',
13
- flexDirection: 'column',
14
- flexWrap: 'nowrap',
15
- width: 'auto',
16
- height: 'auto',
17
- boxSizing: 'border-box',
18
- '> *': {
19
- textOverflow: 'ellipsis',
20
- },
21
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
22
- // @ts-ignore
23
- '> *:not(.ms-StackItem)': {
24
- flexShrink: 1,
25
- },
26
- },
27
- horizontal: {
28
- flexDirection: 'row',
29
- },
30
- verticalFill: {
31
- height: '100%',
32
- },
33
- reversedVertical: {
34
- flexDirection: 'column-reverse',
35
- },
36
- reversedHorizontal: {
37
- flexDirection: 'row-reverse',
38
- },
39
- disableShrink: {
40
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
41
- // @ts-ignore
42
- '> *:not(.ms-StackItem)': {
43
- flexShrink: 0,
44
- },
45
- },
46
- wrap: {
47
- display: 'flex',
48
- flexWrap: 'wrap',
49
- height: '100%',
50
- },
51
- inner: {
52
- display: 'flex',
53
- flexDirection: 'column',
54
- flexWrap: 'wrap',
55
- boxSizing: 'border-box',
56
- maxWidth: '100vw',
57
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
58
- // @ts-ignore
59
- '> *:not(.ms-StackItem)': {
60
- flexShrink: 1,
61
- },
62
- },
63
- innerWidth: {
64
- width: '100%',
65
- },
66
- });
67
- var useFlexGrowStyles = react_2.makeStyles({
68
- inherit: {
69
- flexGrow: 'inherit',
70
- },
71
- initial: {
72
- flexGrow: 'initial',
73
- },
74
- revert: {
75
- flexGrow: 'revert',
76
- },
77
- unset: {
78
- flexGrow: 'unset',
79
- },
80
- '1': {
81
- flexGrow: 1,
82
- },
83
- '2': {
84
- flexGrow: 2,
85
- },
86
- '3': {
87
- flexGrow: 3,
88
- },
89
- });
90
- var useFlexAlignItemsStyles = react_2.makeStyles({
91
- baseline: {
92
- alignItems: 'baseline',
93
- },
94
- center: {
95
- alignItems: 'center',
96
- },
97
- start: {
98
- alignItems: 'flex-start',
99
- },
100
- end: {
101
- alignItems: 'flex-end',
102
- },
103
- stretch: {
104
- alignItems: 'stretch',
105
- },
106
- 'space-between': {
107
- alignItems: 'space-between',
108
- },
109
- 'space-around': {
110
- alignItems: 'space-around',
111
- },
112
- 'space-evenly': {
113
- alignItems: 'space-evenly',
114
- },
115
- });
116
- var useFlexJustifyContentStyles = react_2.makeStyles({
117
- baseline: {
118
- justifyContent: 'baseline',
119
- },
120
- center: {
121
- justifyContent: 'center',
122
- },
123
- start: {
124
- justifyContent: 'flex-start',
125
- },
126
- end: {
127
- justifyContent: 'flex-end',
128
- },
129
- stretch: {
130
- justifyContent: 'stretch',
131
- },
132
- 'space-between': {
133
- justifyContent: 'space-between',
134
- },
135
- 'space-around': {
136
- justifyContent: 'space-around',
137
- },
138
- 'space-evenly': {
139
- justifyContent: 'space-evenly',
140
- },
141
- });
142
- var StackShim = function (props) {
143
- var styles = useStackStyles();
144
- var alignItemsFlexStyles = useFlexAlignItemsStyles();
145
- var justifyContentFlexStyles = useFlexJustifyContentStyles();
146
- var growFlexStyles = useFlexGrowStyles();
147
- var _a = props.as, RootType = _a === void 0 ? 'div' : _a, verticalFill = props.verticalFill, horizontal = props.horizontal, reversed = props.reversed, grow = props.grow, wrap = props.wrap, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, disableShrink = props.disableShrink, className = props.className;
148
- var tokens = tslib_1.__assign({}, props.tokens);
149
- var tokensRootStyles = {};
150
- var tokensInnerStyles = {};
151
- var childrenGapClassName;
152
- if (tokens) {
153
- tokensRootStyles = {
154
- padding: !wrap ? tokens.padding : undefined,
155
- maxHeight: tokens.maxHeight,
156
- maxWidth: tokens.maxWidth,
157
- };
158
- tokensInnerStyles = {
159
- padding: wrap ? tokens.padding : undefined,
160
- };
161
- if (tokens.childrenGap) {
162
- childrenGapClassName = getClassNames(stackUtils_1.getChildrenGapStyles, {
163
- horizontal: horizontal,
164
- reversed: reversed,
165
- tokens: tokens,
166
- });
167
- }
168
- }
169
- var stackStyles = [
170
- wrap ? styles.wrap : styles.root,
171
- horizontal && styles.horizontal,
172
- verticalFill && styles.verticalFill,
173
- ];
174
- var stackInnerStyles = [
175
- styles.inner,
176
- horizontal && styles.horizontal,
177
- (!tokens || !tokens.childrenGap) && styles.innerWidth,
178
- ];
179
- var stackChildren = React.Children.toArray(props.children);
180
- if (stackChildren.length === 1 &&
181
- React.isValidElement(stackChildren[0]) &&
182
- stackChildren[0].type === React.Fragment) {
183
- stackChildren = stackChildren[0].props.children;
184
- }
185
- stackChildren = React.Children.map(stackChildren, function (child) {
186
- if (!child) {
187
- return null;
188
- }
189
- if (child.type && child.type.name === 'StackItemShim') {
190
- var defaultItemProps = {
191
- shrink: !disableShrink,
192
- };
193
- return React.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, defaultItemProps), child.props));
194
- }
195
- return child;
196
- });
197
- if (reversed) {
198
- if (horizontal) {
199
- stackStyles.push(styles.reversedHorizontal);
200
- stackInnerStyles.push(styles.reversedHorizontal);
201
- }
202
- else {
203
- stackStyles.push(styles.reversedVertical);
204
- stackInnerStyles.push(styles.reversedVertical);
205
- }
206
- }
207
- if (grow) {
208
- var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
209
- stackStyles.push(flexGrow);
210
- }
211
- if (disableShrink) {
212
- stackStyles.push(styles.disableShrink);
213
- }
214
- if (horizontalAlign) {
215
- if (horizontal) {
216
- stackStyles.push(justifyContentFlexStyles[horizontalAlign]);
217
- stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);
218
- }
219
- else {
220
- stackStyles.push(alignItemsFlexStyles[horizontalAlign]);
221
- stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);
222
- }
223
- }
224
- if (verticalAlign) {
225
- if (horizontal) {
226
- stackStyles.push(alignItemsFlexStyles[verticalAlign]);
227
- stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);
228
- }
229
- else {
230
- stackStyles.push(justifyContentFlexStyles[verticalAlign]);
231
- stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);
232
- }
233
- }
234
- var rootClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.root], stackStyles), [childrenGapClassName && !wrap && childrenGapClassName.root,
235
- className]));
236
- var innerClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.inner], stackInnerStyles), [childrenGapClassName && wrap && childrenGapClassName.inner]));
237
- return wrap ? (React.createElement(RootType, { className: rootClass, style: tokensRootStyles },
238
- React.createElement("div", { className: innerClass, style: tokensInnerStyles }, stackChildren))) : (React.createElement(RootType, { className: rootClass, style: tokensRootStyles }, stackChildren));
239
- };
240
- exports.StackShim = StackShim;
241
- });
242
- //# sourceMappingURL=StackShim.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StackShim.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/StackShim.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { classNamesFunction } from '@fluentui/react';\nimport type { IStackProps, IStackTokens, IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getChildrenGapStyles } from './stackUtils';\nimport type { StackShimStyles } from './stackUtils';\n\nconst stackClassNames = {\n root: 'ms-Stack',\n inner: 'ms-Stack-inner',\n};\n\nconst getClassNames = classNamesFunction<IStackProps, StackShimStyles>();\n\nconst useStackStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'nowrap',\n width: 'auto',\n height: 'auto',\n boxSizing: 'border-box',\n '> *': {\n textOverflow: 'ellipsis',\n },\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 1,\n },\n },\n horizontal: {\n flexDirection: 'row',\n },\n verticalFill: {\n height: '100%',\n },\n reversedVertical: {\n flexDirection: 'column-reverse',\n },\n reversedHorizontal: {\n flexDirection: 'row-reverse',\n },\n disableShrink: {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 0,\n },\n },\n wrap: {\n display: 'flex',\n flexWrap: 'wrap',\n height: '100%',\n },\n inner: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n maxWidth: '100vw',\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n '> *:not(.ms-StackItem)': {\n flexShrink: 1,\n },\n },\n innerWidth: {\n width: '100%',\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 useFlexAlignItemsStyles = makeStyles({\n baseline: {\n alignItems: 'baseline',\n },\n center: {\n alignItems: 'center',\n },\n start: {\n alignItems: 'flex-start',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n 'space-between': {\n alignItems: 'space-between',\n },\n\n 'space-around': {\n alignItems: 'space-around',\n },\n 'space-evenly': {\n alignItems: 'space-evenly',\n },\n});\n\nconst useFlexJustifyContentStyles = makeStyles({\n baseline: {\n justifyContent: 'baseline',\n },\n center: {\n justifyContent: 'center',\n },\n start: {\n justifyContent: 'flex-start',\n },\n end: {\n justifyContent: 'flex-end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n 'space-between': {\n justifyContent: 'space-between',\n },\n\n 'space-around': {\n justifyContent: 'space-around',\n },\n 'space-evenly': {\n justifyContent: 'space-evenly',\n },\n});\n\nexport const StackShim = (props: IStackProps) => {\n const styles = useStackStyles();\n const alignItemsFlexStyles = useFlexAlignItemsStyles();\n const justifyContentFlexStyles = useFlexJustifyContentStyles();\n const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n\n const {\n as: RootType = 'div',\n verticalFill,\n horizontal,\n reversed,\n grow,\n wrap,\n horizontalAlign,\n verticalAlign,\n disableShrink,\n className,\n } = props;\n\n const tokens: IStackTokens = { ...props.tokens };\n\n let tokensRootStyles = {};\n let tokensInnerStyles = {};\n let childrenGapClassName;\n\n if (tokens) {\n tokensRootStyles = {\n padding: !wrap ? tokens.padding : undefined,\n maxHeight: tokens.maxHeight,\n maxWidth: tokens.maxWidth,\n };\n\n tokensInnerStyles = {\n padding: wrap ? tokens.padding : undefined,\n };\n\n if (tokens.childrenGap) {\n childrenGapClassName = getClassNames(getChildrenGapStyles, {\n horizontal,\n reversed,\n tokens,\n });\n }\n }\n\n const stackStyles = [\n wrap ? styles.wrap : styles.root,\n horizontal && styles.horizontal,\n verticalFill && styles.verticalFill,\n ];\n\n const stackInnerStyles = [\n styles.inner,\n horizontal && styles.horizontal,\n (!tokens || !tokens.childrenGap) && styles.innerWidth,\n ];\n\n let stackChildren = React.Children.toArray(props.children);\n if (\n stackChildren.length === 1 &&\n React.isValidElement(stackChildren[0]) &&\n stackChildren[0].type === React.Fragment\n ) {\n stackChildren = stackChildren[0].props.children;\n }\n\n stackChildren = React.Children.map(\n stackChildren as React.ReactElement[],\n (child: React.ReactElement<IStackItemProps>) => {\n if (!child) {\n return null;\n }\n\n if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') {\n const defaultItemProps: IStackItemProps = {\n shrink: !disableShrink,\n };\n\n return React.cloneElement(child, {\n ...defaultItemProps,\n ...child.props,\n });\n }\n\n return child;\n },\n );\n\n if (reversed) {\n if (horizontal) {\n stackStyles.push(styles.reversedHorizontal);\n stackInnerStyles.push(styles.reversedHorizontal);\n } else {\n stackStyles.push(styles.reversedVertical);\n stackInnerStyles.push(styles.reversedVertical);\n }\n }\n\n if (grow) {\n const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n stackStyles.push(flexGrow);\n }\n\n if (disableShrink) {\n stackStyles.push(styles.disableShrink);\n }\n\n if (horizontalAlign) {\n if (horizontal) {\n stackStyles.push(justifyContentFlexStyles[horizontalAlign]);\n stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);\n } else {\n stackStyles.push(alignItemsFlexStyles[horizontalAlign]);\n stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);\n }\n }\n\n if (verticalAlign) {\n if (horizontal) {\n stackStyles.push(alignItemsFlexStyles[verticalAlign]);\n stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);\n } else {\n stackStyles.push(justifyContentFlexStyles[verticalAlign]);\n stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);\n }\n }\n\n const rootClass = mergeClasses(\n stackClassNames.root,\n ...stackStyles,\n childrenGapClassName && !wrap && childrenGapClassName.root,\n className,\n );\n\n const innerClass = mergeClasses(\n stackClassNames.inner,\n ...stackInnerStyles,\n childrenGapClassName && wrap && childrenGapClassName.inner,\n );\n\n return wrap ? (\n <RootType className={rootClass} style={tokensRootStyles}>\n <div className={innerClass} style={tokensInnerStyles}>\n {stackChildren}\n </div>\n </RootType>\n ) : (\n <RootType className={rootClass} style={tokensRootStyles}>\n {stackChildren}\n </RootType>\n );\n};\n"]}
@@ -1,7 +0,0 @@
1
- define(["require", "exports", "tslib", "./StackItemShim", "./StackShim"], function (require, exports, tslib_1, StackItemShim_1, StackShim_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(StackItemShim_1, exports);
5
- tslib_1.__exportStar(StackShim_1, exports);
6
- });
7
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Stack/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC;IAChC,2CAA4B","sourcesContent":["export * from './StackItemShim';\nexport * from './StackShim';\n"]}
@@ -1,168 +0,0 @@
1
- define(["require", "exports", "tslib", "@fluentui/react"], function (require, exports, tslib_1, react_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.getChildrenGapStyles = exports.parsePadding = exports.parseGap = void 0;
5
- // Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
6
- var getThemedSpacing = function (space, theme) {
7
- if (theme.spacing.hasOwnProperty(space)) {
8
- return theme.spacing[space];
9
- }
10
- return space;
11
- };
12
- // Helper function that takes a gap as a string and converts it into a { value, unit } representation.
13
- var getValueUnitGap = function (gap) {
14
- var numericalPart = parseFloat(gap);
15
- var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
16
- var numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
17
- var unitPart = gap.substring(numericalString.toString().length);
18
- return {
19
- value: numericalValue,
20
- unit: unitPart || 'px',
21
- };
22
- };
23
- /**
24
- * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
25
- * or a key of a themed spacing value (e.g. "s1").
26
- * Returns the separate numerical value of the padding (e.g. 10)
27
- * and the CSS unit (e.g. "px").
28
- */
29
- var parseGap = function (gap, theme) {
30
- if (gap === undefined || gap === '') {
31
- return {
32
- rowGap: {
33
- value: 0,
34
- unit: 'px',
35
- },
36
- columnGap: {
37
- value: 0,
38
- unit: 'px',
39
- },
40
- };
41
- }
42
- if (typeof gap === 'number') {
43
- return {
44
- rowGap: {
45
- value: gap,
46
- unit: 'px',
47
- },
48
- columnGap: {
49
- value: gap,
50
- unit: 'px',
51
- },
52
- };
53
- }
54
- var splitGap = gap.split(' ');
55
- // If the array has more than two values, then return 0px.
56
- if (splitGap.length > 2) {
57
- return {
58
- rowGap: {
59
- value: 0,
60
- unit: 'px',
61
- },
62
- columnGap: {
63
- value: 0,
64
- unit: 'px',
65
- },
66
- };
67
- }
68
- // If the array has two values, then parse each one.
69
- if (splitGap.length === 2) {
70
- return {
71
- rowGap: getValueUnitGap(getThemedSpacing(splitGap[0], theme)),
72
- columnGap: getValueUnitGap(getThemedSpacing(splitGap[1], theme)),
73
- };
74
- }
75
- // Else, parse the numerical value and pass it as both the vertical and horizontal gap.
76
- var calculatedGap = getValueUnitGap(getThemedSpacing(gap, theme));
77
- return {
78
- rowGap: calculatedGap,
79
- columnGap: calculatedGap,
80
- };
81
- };
82
- exports.parseGap = parseGap;
83
- /**
84
- * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
85
- * where the separate padding values can also be the key of a themed spacing value
86
- * (e.g. "s1 m", "10px l1 20px l2", etc.).
87
- * Returns a CSS-style padding.
88
- */
89
- var parsePadding = function (padding, theme) {
90
- if (padding === undefined || typeof padding === 'number' || padding === '') {
91
- return padding;
92
- }
93
- var paddingValues = padding.split(' ');
94
- if (paddingValues.length < 2) {
95
- return getThemedSpacing(padding, theme);
96
- }
97
- return paddingValues.reduce(function (padding1, padding2) {
98
- return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme);
99
- });
100
- };
101
- exports.parsePadding = parsePadding;
102
- /**
103
- *
104
- * getStyles function for Stack.tokens.childrenGap prop styling
105
- */
106
- var getChildrenGapStyles = function (props) {
107
- var theme = react_1.getTheme();
108
- var horizontal = props.horizontal, reversed = props.reversed;
109
- var tokens = tslib_1.__assign({}, props.tokens);
110
- var _a = exports.parseGap(tokens.childrenGap, theme), rowGap = _a.rowGap, columnGap = _a.columnGap;
111
- var horizontalMargin = "" + -0.5 * columnGap.value + columnGap.unit;
112
- var verticalMargin = "" + -0.5 * rowGap.value + rowGap.unit;
113
- return {
114
- root: [
115
- reversed &&
116
- horizontal && {
117
- '> *:not(:last-child)': {
118
- marginLeft: "" + columnGap.value + columnGap.unit,
119
- },
120
- },
121
- reversed &&
122
- !horizontal && {
123
- '> *:not(:last-child)': {
124
- marginTop: "" + rowGap.value + rowGap.unit,
125
- },
126
- },
127
- !reversed &&
128
- horizontal && {
129
- '> *:not(:first-child)': {
130
- marginLeft: "" + columnGap.value + columnGap.unit,
131
- },
132
- },
133
- !reversed &&
134
- !horizontal && {
135
- '> *:not(:first-child)': {
136
- marginTop: "" + rowGap.value + rowGap.unit,
137
- },
138
- },
139
- ],
140
- inner: [
141
- {
142
- marginLeft: horizontalMargin,
143
- marginRight: horizontalMargin,
144
- marginTop: verticalMargin,
145
- marginBottom: verticalMargin,
146
- width: columnGap.value === 0 ? '100%' : "calc(100% + " + columnGap.value + columnGap.unit + ")",
147
- '> *': {
148
- margin: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
149
- },
150
- },
151
- horizontal && {
152
- height: rowGap.value === 0 ? '100%' : "calc(100% + " + rowGap.value + rowGap.unit + ")",
153
- '> *': {
154
- maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - " + columnGap.value + columnGap.unit + ")",
155
- },
156
- },
157
- !horizontal && {
158
- height: "calc(100% + " + rowGap.value + rowGap.unit + ")",
159
- '> *': {
160
- maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - " + rowGap.value + rowGap.unit + ")",
161
- },
162
- },
163
- ],
164
- };
165
- };
166
- exports.getChildrenGapStyles = getChildrenGapStyles;
167
- });
168
- //# sourceMappingURL=stackUtils.js.map