@fluentui/react-table
Advanced tools
Comparing version 0.0.0-nightly-20221019-0421.1 to 0.0.0-nightly-20221020-0424.1
@@ -5,5 +5,5 @@ { | ||
{ | ||
"date": "Wed, 19 Oct 2022 04:26:46 GMT", | ||
"tag": "@fluentui/react-table_v0.0.0-nightly-20221019-0421.1", | ||
"version": "0.0.0-nightly-20221019-0421.1", | ||
"date": "Thu, 20 Oct 2022 04:29:26 GMT", | ||
"tag": "@fluentui/react-table_v0.0.0-nightly-20221020-0424.1", | ||
"version": "0.0.0-nightly-20221020-0424.1", | ||
"comments": { | ||
@@ -20,4 +20,4 @@ "prerelease": [ | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -27,4 +27,4 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -34,4 +34,4 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -41,4 +41,4 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -48,4 +48,4 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -55,4 +55,4 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
@@ -62,4 +62,10 @@ { | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221019-0421.1", | ||
"commit": "c7260e4ea1c03699e681542f8d5c6be32a2828bf" | ||
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221020-0424.1", | ||
"commit": "c01b0fe6741e7dde18f64b821b2e5994a07afcd1" | ||
} | ||
@@ -66,0 +72,0 @@ ] |
# Change Log - @fluentui/react-table | ||
This log was last generated on Wed, 19 Oct 2022 04:26:46 GMT and should not be manually modified. | ||
This log was last generated on Thu, 20 Oct 2022 04:29:26 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [0.0.0-nightly-20221019-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v0.0.0-nightly-20221019-0421.1) | ||
## [0.0.0-nightly-20221020-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v0.0.0-nightly-20221020-0424.1) | ||
Wed, 19 Oct 2022 04:26:46 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.6..@fluentui/react-table_v0.0.0-nightly-20221019-0421.1) | ||
Thu, 20 Oct 2022 04:29:26 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.6..@fluentui/react-table_v0.0.0-nightly-20221020-0424.1) | ||
@@ -15,9 +15,10 @@ ### Changes | ||
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com) | ||
- Bump @fluentui/react-aria to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-avatar to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-checkbox to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-tabster to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-theme to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221019-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/c7260e4ea1c03699e681542f8d5c6be32a2828bf) by beachball) | ||
- Bump @fluentui/react-aria to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-avatar to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-checkbox to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-radio to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-tabster to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-theme to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221020-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/c01b0fe6741e7dde18f64b821b2e5994a07afcd1) by beachball) | ||
@@ -24,0 +25,0 @@ ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.6) |
@@ -10,2 +10,3 @@ /// <reference types="react" /> | ||
import type { ForwardRefComponent } from '@fluentui/react-utilities'; | ||
import type { Radio } from '@fluentui/react-radio'; | ||
import * as React_2 from 'react'; | ||
@@ -366,2 +367,10 @@ import type { Slot } from '@fluentui/react-utilities'; | ||
checked?: CheckboxProps['checked']; | ||
/** | ||
* Only visible when checked or the parent row is hovered | ||
*/ | ||
subtle?: boolean; | ||
/** | ||
* Completely hides the selection cell visually but takes up the same space | ||
*/ | ||
hidden?: boolean; | ||
}; | ||
@@ -377,3 +386,3 @@ | ||
*/ | ||
radioIndicator: Slot<'span'>; | ||
radioIndicator: Slot<typeof Radio>; | ||
} & Pick<TableCellSlots, 'root'>; | ||
@@ -384,3 +393,3 @@ | ||
*/ | ||
export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'> & Pick<TableContextValue, 'noNativeElements'>; | ||
export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> & Pick<TableContextValue, 'noNativeElements'>; | ||
@@ -387,0 +396,0 @@ export declare interface TableSelectionState { |
@@ -11,2 +11,4 @@ "use strict"; | ||
const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext"); | ||
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster"); | ||
/** | ||
@@ -31,2 +33,3 @@ * Create the state required to render TableRow. | ||
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr'; | ||
const focusVisibleRef = react_tabster_1.useFocusVisible(); | ||
return { | ||
@@ -37,3 +40,3 @@ components: { | ||
root: react_utilities_1.getNativeElementProps(rootComponent, { | ||
ref, | ||
ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef), | ||
role: rootComponent === 'div' ? 'row' : undefined, | ||
@@ -40,0 +43,0 @@ ...props |
@@ -14,2 +14,6 @@ "use strict"; | ||
const useTableSelectionCellStyles_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCellStyles"); | ||
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster"); | ||
const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext"); | ||
@@ -64,3 +68,10 @@ | ||
"sj55zd": "f19n0e5", | ||
"B7ck84d": "f1ewtqcl" | ||
"B7ck84d": "f1ewtqcl", | ||
"Befpiv7": "fblfkud", | ||
"Bn4voq9": "fz36nt7", | ||
"g9k6zt": "f9znhxp", | ||
"kdpuga": ["f1o2ludy", "f1kjnpwc"], | ||
"Bw81rd7": ["f1kjnpwc", "f1o2ludy"], | ||
"B6xbmo0": ["fxmnebo", "f1witrsb"], | ||
"dm238s": ["f1witrsb", "fxmnebo"] | ||
}, | ||
@@ -72,6 +83,10 @@ "rootInteractive": { | ||
"B43xm9u": "f15ngxrw", | ||
"Bs8fhbl": "fd28r7f", | ||
"i921ia": "fjbbrdp", | ||
"Jwef8y": "f1t94bn6", | ||
"Bi91k9c": "feu1g3u", | ||
"Bi7d7a3": "f14h8iit", | ||
"Bpt6rm4": "f1uorfem" | ||
"Bi7d7a3": "f1boln4s", | ||
"Bpt6rm4": "f1uorfem", | ||
"Bt8cqyk": "frasl6z", | ||
"ff6mpl": "fw60kww" | ||
}, | ||
@@ -149,5 +164,5 @@ "medium": { | ||
}, { | ||
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", { | ||
@@ -154,0 +169,0 @@ "m": "(forced-colors: active)" |
@@ -8,4 +8,2 @@ "use strict"; | ||
const React = /*#__PURE__*/require("react"); | ||
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); | ||
@@ -15,3 +13,3 @@ | ||
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons"); | ||
const react_radio_1 = /*#__PURE__*/require("@fluentui/react-radio"); | ||
@@ -33,4 +31,2 @@ const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell"); | ||
const useTableSelectionCell_unstable = (props, ref) => { | ||
var _a, _b; | ||
const tableCellState = useTableCell_1.useTableCell_unstable(props, ref); | ||
@@ -40,7 +36,12 @@ const { | ||
} = tableContext_1.useTableContext(); | ||
const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox'; | ||
const { | ||
type = 'checkbox', | ||
checked = false, | ||
subtle = false, | ||
hidden = false | ||
} = props; | ||
return { ...tableCellState, | ||
components: { ...tableCellState.components, | ||
checkboxIndicator: react_checkbox_1.Checkbox, | ||
radioIndicator: 'span' | ||
radioIndicator: react_radio_1.Radio | ||
}, | ||
@@ -56,8 +57,10 @@ checkboxIndicator: react_utilities_1.resolveShorthand(props.checkboxIndicator, { | ||
defaultProps: { | ||
children: React.createElement(react_icons_1.CheckmarkFilled, null) | ||
checked: !!checked | ||
} | ||
}), | ||
type, | ||
checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false, | ||
noNativeElements | ||
checked, | ||
noNativeElements, | ||
subtle, | ||
hidden | ||
}; | ||
@@ -64,0 +67,0 @@ }; |
@@ -10,2 +10,4 @@ "use strict"; | ||
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster"); | ||
exports.tableSelectionCellClassNames = { | ||
@@ -61,2 +63,8 @@ root: 'fui-TableSelectionCell', | ||
}, | ||
"subtle": { | ||
"abs64n": "fk73vx1", | ||
"Brovlpu": "ftqa4ok", | ||
"B486eqv": "f2hkw1w", | ||
"B113ap8": "f1upwfw9" | ||
}, | ||
"hidden": { | ||
@@ -66,3 +74,5 @@ "Bcdw1i0": "fd7fpy0" | ||
}, { | ||
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fd7fpy0{visibility:hidden;}"] | ||
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"], | ||
"f": [".ftqa4ok:focus{outline-style:none;}"], | ||
"i": [".f2hkw1w:focus-visible{outline-style:none;}"] | ||
}); | ||
@@ -80,3 +90,3 @@ /** | ||
}; | ||
state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className); | ||
state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className); | ||
@@ -88,3 +98,3 @@ if (state.checkboxIndicator) { | ||
if (state.radioIndicator) { | ||
state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.checked === false && styles.hidden, state.radioIndicator.className); | ||
state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className); | ||
} | ||
@@ -91,0 +101,0 @@ |
@@ -1,3 +0,4 @@ | ||
import { getNativeElementProps } from '@fluentui/react-utilities'; | ||
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; | ||
import { useTableContext } from '../../contexts/tableContext'; | ||
import { useFocusVisible } from '@fluentui/react-tabster'; | ||
/** | ||
@@ -21,2 +22,3 @@ * Create the state required to render TableRow. | ||
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr'; | ||
const focusVisibleRef = useFocusVisible(); | ||
return { | ||
@@ -27,3 +29,3 @@ components: { | ||
root: getNativeElementProps(rootComponent, { | ||
ref, | ||
ref: useMergedRefs(ref, focusVisibleRef), | ||
role: rootComponent === 'div' ? 'row' : undefined, | ||
@@ -30,0 +32,0 @@ ...props |
import { __styles, mergeClasses, shorthands } from '@griffel/react'; | ||
import { tokens } from '@fluentui/react-theme'; | ||
import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles'; | ||
import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles'; | ||
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; | ||
import { useIsInTableHeader } from '../../contexts/tableHeaderContext'; | ||
@@ -52,3 +54,10 @@ export const tableRowClassName = 'fui-TableRow'; | ||
"sj55zd": "f19n0e5", | ||
"B7ck84d": "f1ewtqcl" | ||
"B7ck84d": "f1ewtqcl", | ||
"Befpiv7": "fblfkud", | ||
"Bn4voq9": "fz36nt7", | ||
"g9k6zt": "f9znhxp", | ||
"kdpuga": ["f1o2ludy", "f1kjnpwc"], | ||
"Bw81rd7": ["f1kjnpwc", "f1o2ludy"], | ||
"B6xbmo0": ["fxmnebo", "f1witrsb"], | ||
"dm238s": ["f1witrsb", "fxmnebo"] | ||
}, | ||
@@ -60,6 +69,10 @@ "rootInteractive": { | ||
"B43xm9u": "f15ngxrw", | ||
"Bs8fhbl": "fd28r7f", | ||
"i921ia": "fjbbrdp", | ||
"Jwef8y": "f1t94bn6", | ||
"Bi91k9c": "feu1g3u", | ||
"Bi7d7a3": "f14h8iit", | ||
"Bpt6rm4": "f1uorfem" | ||
"Bi7d7a3": "f1boln4s", | ||
"Bpt6rm4": "f1uorfem", | ||
"Bt8cqyk": "frasl6z", | ||
"ff6mpl": "fw60kww" | ||
}, | ||
@@ -137,5 +150,5 @@ "medium": { | ||
}, { | ||
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"], | ||
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", { | ||
@@ -142,0 +155,0 @@ "m": "(forced-colors: active)" |
@@ -1,5 +0,4 @@ | ||
import * as React from 'react'; | ||
import { resolveShorthand } from '@fluentui/react-utilities'; | ||
import { Checkbox } from '@fluentui/react-checkbox'; | ||
import { CheckmarkFilled } from '@fluentui/react-icons'; | ||
import { Radio } from '@fluentui/react-radio'; | ||
import { useTableCell_unstable } from '../TableCell/useTableCell'; | ||
@@ -18,4 +17,2 @@ import { useTableContext } from '../../contexts/tableContext'; | ||
export const useTableSelectionCell_unstable = (props, ref) => { | ||
var _a, _b; | ||
const tableCellState = useTableCell_unstable(props, ref); | ||
@@ -25,7 +22,12 @@ const { | ||
} = useTableContext(); | ||
const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox'; | ||
const { | ||
type = 'checkbox', | ||
checked = false, | ||
subtle = false, | ||
hidden = false | ||
} = props; | ||
return { ...tableCellState, | ||
components: { ...tableCellState.components, | ||
checkboxIndicator: Checkbox, | ||
radioIndicator: 'span' | ||
radioIndicator: Radio | ||
}, | ||
@@ -41,10 +43,12 @@ checkboxIndicator: resolveShorthand(props.checkboxIndicator, { | ||
defaultProps: { | ||
children: /*#__PURE__*/React.createElement(CheckmarkFilled, null) | ||
checked: !!checked | ||
} | ||
}), | ||
type, | ||
checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false, | ||
noNativeElements | ||
checked, | ||
noNativeElements, | ||
subtle, | ||
hidden | ||
}; | ||
}; | ||
//# sourceMappingURL=useTableSelectionCell.js.map |
import { __styles, mergeClasses, shorthands } from '@griffel/react'; | ||
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; | ||
export const tableSelectionCellClassNames = { | ||
@@ -52,2 +53,8 @@ root: 'fui-TableSelectionCell', | ||
}, | ||
"subtle": { | ||
"abs64n": "fk73vx1", | ||
"Brovlpu": "ftqa4ok", | ||
"B486eqv": "f2hkw1w", | ||
"B113ap8": "f1upwfw9" | ||
}, | ||
"hidden": { | ||
@@ -57,3 +64,5 @@ "Bcdw1i0": "fd7fpy0" | ||
}, { | ||
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fd7fpy0{visibility:hidden;}"] | ||
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"], | ||
"f": [".ftqa4ok:focus{outline-style:none;}"], | ||
"i": [".f2hkw1w:focus-visible{outline-style:none;}"] | ||
}); | ||
@@ -71,3 +80,3 @@ /** | ||
}; | ||
state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className); | ||
state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className); | ||
@@ -79,3 +88,3 @@ if (state.checkboxIndicator) { | ||
if (state.radioIndicator) { | ||
state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.checked === false && styles.hidden, state.radioIndicator.className); | ||
state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className); | ||
} | ||
@@ -82,0 +91,0 @@ |
{ | ||
"name": "@fluentui/react-table", | ||
"version": "0.0.0-nightly-20221019-0421.1", | ||
"version": "0.0.0-nightly-20221020-0424.1", | ||
"description": "React components for building web experiences", | ||
@@ -29,13 +29,14 @@ "main": "lib-commonjs/index.js", | ||
"@fluentui/react-conformance": "*", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/scripts": "^1.0.0" | ||
}, | ||
"dependencies": { | ||
"@fluentui/react-aria": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-avatar": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-checkbox": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-aria": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-avatar": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-checkbox": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-icons": "^2.0.175", | ||
"@fluentui/react-tabster": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-theme": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-utilities": "0.0.0-nightly-20221019-0421.1", | ||
"@fluentui/react-radio": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-tabster": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-theme": "0.0.0-nightly-20221020-0424.1", | ||
"@fluentui/react-utilities": "0.0.0-nightly-20221020-0424.1", | ||
"@griffel/react": "^1.4.1", | ||
@@ -42,0 +43,0 @@ "tslib": "^2.1.0" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
515205
5860
14
+ Added@fluentui/keyboard-keys@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-aria@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-avatar@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-badge@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-checkbox@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-context-selector@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-icons@2.0.270(transitive)
+ Added@fluentui/react-label@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-popover@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-portal@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-positioning@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-radio@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-shared-contexts@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-tabster@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-theme@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-tooltip@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@fluentui/react-utilities@0.0.0-nightly-20221020-0424.1(transitive)
+ Added@types/react@18.3.18(transitive)
- Removed@fluentui/keyboard-keys@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-aria@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-avatar@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-badge@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-checkbox@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-context-selector@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-icons@2.0.269(transitive)
- Removed@fluentui/react-label@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-popover@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-portal@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-positioning@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-shared-contexts@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-tabster@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-theme@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-tooltip@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@fluentui/react-utilities@0.0.0-nightly-20221019-0421.1(transitive)
- Removed@types/react@17.0.8318.3.17(transitive)
- Removed@types/scheduler@0.16.8(transitive)
- Removedreact@17.0.2(transitive)
Updated@fluentui/react-checkbox@0.0.0-nightly-20221020-0424.1
Updated@fluentui/react-tabster@0.0.0-nightly-20221020-0424.1
Updated@fluentui/react-utilities@0.0.0-nightly-20221020-0424.1