@fluentui/react-table 9.0.0-alpha.2 → 9.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +34 -1
- package/CHANGELOG.md +14 -2
- package/dist/index.d.ts +8 -2
- package/lib/components/TableCellActions/TableCellActions.types.js.map +1 -1
- package/lib/components/TableCellActions/useTableCellActions.js +4 -1
- package/lib/components/TableCellActions/useTableCellActions.js.map +1 -1
- package/lib/components/TableCellActions/useTableCellActionsStyles.js +5 -4
- package/lib/components/TableCellActions/useTableCellActionsStyles.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +2 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.js +3 -1
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActions.js +4 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActions.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js +5 -5
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +2 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +3 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,40 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 20 Sep 2022 20:54:05 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.0.0-alpha.3",
|
|
7
|
+
"version": "9.0.0-alpha.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "30d0ecb1a37bd941f01be0bc4a673374c422752b",
|
|
14
|
+
"comment": "feat: Adds `visible` prop to `TableCellActions`"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "lingfangao@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"commit": "cd9c220e8ca2c6ab0bc4b598801ce38eee21688f",
|
|
20
|
+
"comment": "fix: `TableCellActions` displays correctly inside `TableHeaderCell`"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"comment": "Bump @fluentui/react-checkbox to v9.0.6",
|
|
26
|
+
"commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
|
|
32
|
+
"commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Thu, 15 Sep 2022 09:49:26 GMT",
|
|
6
39
|
"tag": "@fluentui/react-table_v9.0.0-alpha.2",
|
|
7
40
|
"version": "9.0.0-alpha.2",
|
|
8
41
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 20 Sep 2022 20:54:05 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.3)
|
|
8
|
+
|
|
9
|
+
Tue, 20 Sep 2022 20:54:05 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.2..@fluentui/react-table_v9.0.0-alpha.3)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: Adds `visible` prop to `TableCellActions` ([PR #24831](https://github.com/microsoft/fluentui/pull/24831) by lingfangao@hotmail.com)
|
|
15
|
+
- fix: `TableCellActions` displays correctly inside `TableHeaderCell` ([PR #24829](https://github.com/microsoft/fluentui/pull/24829) by lingfangao@hotmail.com)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.0.6 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.2)
|
|
8
20
|
|
|
9
|
-
Thu, 15 Sep 2022 09:
|
|
21
|
+
Thu, 15 Sep 2022 09:49:26 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.1..@fluentui/react-table_v9.0.0-alpha.2)
|
|
11
23
|
|
|
12
24
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -139,7 +139,13 @@ export declare const tableCellActionsClassNames: SlotClassNames<TableCellActions
|
|
|
139
139
|
/**
|
|
140
140
|
* TableCellActions Props
|
|
141
141
|
*/
|
|
142
|
-
export declare type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
|
|
142
|
+
export declare type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
|
|
143
|
+
/**
|
|
144
|
+
* When true, the actions are always visible regardless of row hover.
|
|
145
|
+
* Can be useful keeping the actions visible when a popout surface is opened.
|
|
146
|
+
*/
|
|
147
|
+
visible?: boolean;
|
|
148
|
+
};
|
|
143
149
|
|
|
144
150
|
export declare type TableCellActionsSlots = {
|
|
145
151
|
root: Slot<'div'>;
|
|
@@ -148,7 +154,7 @@ export declare type TableCellActionsSlots = {
|
|
|
148
154
|
/**
|
|
149
155
|
* State used in rendering TableCellActions
|
|
150
156
|
*/
|
|
151
|
-
export declare type TableCellActionsState = ComponentState<TableCellActionsSlots>;
|
|
157
|
+
export declare type TableCellActionsState = ComponentState<TableCellActionsSlots> & Pick<Required<TableCellActionsProps>, 'visible'>;
|
|
152
158
|
|
|
153
159
|
export declare const tableCellClassName = "fui-TableCell";
|
|
154
160
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellActions.types.js","sourceRoot":"../src/","sources":["components/TableCellActions/TableCellActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellActionsSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * TableCellActions Props\n */\nexport type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};\n\n/**\n * State used in rendering TableCellActions\n */\nexport type TableCellActionsState = ComponentState<TableCellActionsSlots>;\n"]}
|
|
1
|
+
{"version":3,"file":"TableCellActions.types.js","sourceRoot":"../src/","sources":["components/TableCellActions/TableCellActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellActionsSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * TableCellActions Props\n */\nexport type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {\n /**\n * When true, the actions are always visible regardless of row hover.\n * Can be useful keeping the actions visible when a popout surface is opened.\n */\n visible?: boolean;\n};\n\n/**\n * State used in rendering TableCellActions\n */\nexport type TableCellActionsState = ComponentState<TableCellActionsSlots> &\n Pick<Required<TableCellActionsProps>, 'visible'>;\n"]}
|
|
@@ -11,6 +11,8 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export const useTableCellActions_unstable = (props, ref) => {
|
|
14
|
+
var _a;
|
|
15
|
+
|
|
14
16
|
return {
|
|
15
17
|
components: {
|
|
16
18
|
root: 'div'
|
|
@@ -18,7 +20,8 @@ export const useTableCellActions_unstable = (props, ref) => {
|
|
|
18
20
|
root: getNativeElementProps('div', {
|
|
19
21
|
ref: useMergedRefs(ref, useFocusWithin()),
|
|
20
22
|
...props
|
|
21
|
-
})
|
|
23
|
+
}),
|
|
24
|
+
visible: (_a = props.visible) !== null && _a !== void 0 ? _a : false
|
|
22
25
|
};
|
|
23
26
|
};
|
|
24
27
|
//# sourceMappingURL=useTableCellActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB
|
|
1
|
+
{"version":3,"sources":["components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,cAAc,EAApB,CADe;MAEjC,GAAG;IAF8B,CAAR,CAJtB;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n props: TableCellActionsProps,\n ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, useFocusWithin()),\n ...props,\n }),\n visible: props.visible ?? false,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
3
2
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
3
|
export const tableCellActionsClassNames = {
|
|
5
4
|
root: 'fui-TableCellActions'
|
|
@@ -16,13 +15,15 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
16
15
|
"Bz10aip": "f188r07x",
|
|
17
16
|
"abs64n": "fk73vx1",
|
|
18
17
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
19
|
-
"De3pzq": "f5gciec",
|
|
20
18
|
"Brovlpu": "ftqa4ok",
|
|
21
19
|
"B486eqv": "f2hkw1w",
|
|
22
20
|
"Bs2wo6l": "f1g03rbe"
|
|
21
|
+
},
|
|
22
|
+
"visible": {
|
|
23
|
+
"abs64n": "f5p0z4x"
|
|
23
24
|
}
|
|
24
25
|
}, {
|
|
25
|
-
"d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".
|
|
26
|
+
"d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g03rbe.fui-focus-within:focus-within{opacity:1;}", ".f5p0z4x{opacity:1;}"],
|
|
26
27
|
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
27
28
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
28
29
|
});
|
|
@@ -33,7 +34,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
33
34
|
|
|
34
35
|
export const useTableCellActionsStyles_unstable = state => {
|
|
35
36
|
const styles = useStyles();
|
|
36
|
-
state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.root.className);
|
|
37
|
+
state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
|
|
37
38
|
return state;
|
|
38
39
|
};
|
|
39
40
|
//# sourceMappingURL=useTableCellActionsStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;
|
|
1
|
+
{"version":3,"sources":["components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,SAAS,+BAAT,QAAgD,yBAAhD;AAEA,OAAO,MAAM,0BAA0B,GAA0C;EAC/E,IAAI,EAAE;AADyE,CAA1E;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,0BAA0B,CAAC,IADM,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: '0px',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 0,\n marginLeft: 'auto',\n\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n visible: {\n opacity: 1,\n },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n tableCellActionsClassNames.root,\n styles.root,\n state.visible && styles.visible,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -41,6 +41,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
41
41
|
"fsow6f": "fgusgyc"
|
|
42
42
|
},
|
|
43
43
|
"button": {
|
|
44
|
+
"qhf8xq": "f10pi13n",
|
|
44
45
|
"a9b677": "fly5x3f",
|
|
45
46
|
"mc9l5x": "f22iagw",
|
|
46
47
|
"Bh6795r": "fqerorx",
|
|
@@ -60,7 +61,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
60
61
|
"Bt984gj": "f122n59"
|
|
61
62
|
}
|
|
62
63
|
}, {
|
|
63
|
-
"d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
|
|
64
|
+
"d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
|
|
64
65
|
});
|
|
65
66
|
/**
|
|
66
67
|
* Apply styling to the TableHeaderCell slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA0CA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAyB,CAAC,IAA3B,EAAiC,MAAM,CAAC,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAnC;EACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n minHeight: '44px',\n ...shorthands.flex(1, 1, '0px'),\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -14,6 +14,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
14
14
|
"mc9l5x": "f1u0rzck",
|
|
15
15
|
"sj55zd": "f19n0e5",
|
|
16
16
|
"Jwef8y": "f1knas48",
|
|
17
|
+
"Bi91k9c": "feu1g3u",
|
|
18
|
+
"Bi7d7a3": "f1boln4s",
|
|
17
19
|
"Bpt6rm4": "f1uorfem"
|
|
18
20
|
},
|
|
19
21
|
"medium": {
|
|
@@ -34,7 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
34
36
|
}
|
|
35
37
|
}, {
|
|
36
38
|
"d": [".f1u0rzck{display:table-row;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ft4266{height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
|
|
37
|
-
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
|
|
39
|
+
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
|
|
38
40
|
});
|
|
39
41
|
/**
|
|
40
42
|
* Apply styling to the TableRow slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA8BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,MAAM,CAAC,KAAK,CAAC,IAAP,CAA7C,EAA2D,KAAK,CAAC,IAAN,CAAW,SAAtE,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-row',\n color: tokens.colorNeutralForeground1,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n height: '44px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n height: '34px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n height: '24px',\n fontSize: tokens.fontSizeBase200,\n },\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -20,6 +20,8 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
const useTableCellActions_unstable = (props, ref) => {
|
|
23
|
+
var _a;
|
|
24
|
+
|
|
23
25
|
return {
|
|
24
26
|
components: {
|
|
25
27
|
root: 'div'
|
|
@@ -27,7 +29,8 @@ const useTableCellActions_unstable = (props, ref) => {
|
|
|
27
29
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
28
30
|
ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()),
|
|
29
31
|
...props
|
|
30
|
-
})
|
|
32
|
+
}),
|
|
33
|
+
visible: (_a = props.visible) !== null && _a !== void 0 ? _a : false
|
|
31
34
|
};
|
|
32
35
|
};
|
|
33
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB
|
|
1
|
+
{"version":3,"sources":["components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,cAAA,EAAnB,CAD4B;MAEjC,GAAG;IAF8B,CAA7B,CAJD;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n props: TableCellActionsProps,\n ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, useFocusWithin()),\n ...props,\n }),\n visible: props.visible ?? false,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,8 +7,6 @@ exports.useTableCellActionsStyles_unstable = exports.tableCellActionsClassNames
|
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
|
-
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
-
|
|
12
10
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
13
11
|
|
|
14
12
|
exports.tableCellActionsClassNames = {
|
|
@@ -26,13 +24,15 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
26
24
|
"Bz10aip": "f188r07x",
|
|
27
25
|
"abs64n": "fk73vx1",
|
|
28
26
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
29
|
-
"De3pzq": "f5gciec",
|
|
30
27
|
"Brovlpu": "ftqa4ok",
|
|
31
28
|
"B486eqv": "f2hkw1w",
|
|
32
29
|
"Bs2wo6l": "f1g03rbe"
|
|
30
|
+
},
|
|
31
|
+
"visible": {
|
|
32
|
+
"abs64n": "f5p0z4x"
|
|
33
33
|
}
|
|
34
34
|
}, {
|
|
35
|
-
"d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".
|
|
35
|
+
"d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g03rbe.fui-focus-within:focus-within{opacity:1;}", ".f5p0z4x{opacity:1;}"],
|
|
36
36
|
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
37
37
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
38
38
|
});
|
|
@@ -43,7 +43,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
43
43
|
|
|
44
44
|
const useTableCellActionsStyles_unstable = state => {
|
|
45
45
|
const styles = useStyles();
|
|
46
|
-
state.root.className = react_1.mergeClasses(exports.tableCellActionsClassNames.root, styles.root, state.root.className);
|
|
46
|
+
state.root.className = react_1.mergeClasses(exports.tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
|
|
47
47
|
return state;
|
|
48
48
|
};
|
|
49
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,0BAAA,GAAoE;EAC/E,IAAI,EAAE;AADyE,CAApE;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACI,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,0BAAA,CAA2B,IADN,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHH,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: '0px',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 0,\n marginLeft: 'auto',\n\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n visible: {\n opacity: 1,\n },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n tableCellActionsClassNames.root,\n styles.root,\n state.visible && styles.visible,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -50,6 +50,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
50
50
|
"fsow6f": "fgusgyc"
|
|
51
51
|
},
|
|
52
52
|
"button": {
|
|
53
|
+
"qhf8xq": "f10pi13n",
|
|
53
54
|
"a9b677": "fly5x3f",
|
|
54
55
|
"mc9l5x": "f22iagw",
|
|
55
56
|
"Bh6795r": "fqerorx",
|
|
@@ -69,7 +70,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
69
70
|
"Bt984gj": "f122n59"
|
|
70
71
|
}
|
|
71
72
|
}, {
|
|
72
|
-
"d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
|
|
73
|
+
"d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
|
|
73
74
|
});
|
|
74
75
|
/**
|
|
75
76
|
* Apply styling to the TableHeaderCell slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;AAMb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;AAMb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA0CA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;EACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,yBAAA,CAA0B,MADH,EAEvB,MAAM,CAAC,WAFgB,EAGvB,MAAM,CAAC,MAHgB,EAIvB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJF,EAKvB,KAAK,CAAC,MAAN,CAAa,SALU,CAAzB;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,yBAAA,CAA0B,QADD,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,CAAe,SAHU,CAA3B;EAKD;;EAED,OAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n minHeight: '44px',\n ...shorthands.flex(1, 1, '0px'),\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -24,6 +24,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
24
24
|
"mc9l5x": "f1u0rzck",
|
|
25
25
|
"sj55zd": "f19n0e5",
|
|
26
26
|
"Jwef8y": "f1knas48",
|
|
27
|
+
"Bi91k9c": "feu1g3u",
|
|
28
|
+
"Bi7d7a3": "f1boln4s",
|
|
27
29
|
"Bpt6rm4": "f1uorfem"
|
|
28
30
|
},
|
|
29
31
|
"medium": {
|
|
@@ -44,7 +46,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
44
46
|
}
|
|
45
47
|
}, {
|
|
46
48
|
"d": [".f1u0rzck{display:table-row;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ft4266{height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
|
|
47
|
-
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
|
|
49
|
+
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
|
|
48
50
|
});
|
|
49
51
|
/**
|
|
50
52
|
* Apply styling to the TableRow slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,2BAAA,gBAAA,OAAA,CAAA,+CAAA,CAAA;;AAEa,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,OAAA,CAAA;AADyD,CAApD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,2BAAA,gBAAA,OAAA,CAAA,+CAAA,CAAA;;AAEa,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,OAAA,CAAA;AADyD,CAApD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA8BA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,MAAM,CAAC,KAAK,CAAC,IAAP,CAAzD,EAAuE,KAAK,CAAC,IAAN,CAAW,SAAlF,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-row',\n color: tokens.colorNeutralForeground1,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n height: '44px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n height: '34px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n height: '24px',\n fontSize: tokens.fontSizeBase200,\n },\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.3",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.14",
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-aria": "^9.2.0",
|
|
35
|
-
"@fluentui/react-checkbox": "^9.0.
|
|
35
|
+
"@fluentui/react-checkbox": "^9.0.6",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.175",
|
|
37
37
|
"@fluentui/react-tabster": "^9.1.1",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.0",
|