@fluentui/react-tag-picker 9.6.7 → 9.7.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.
- package/CHANGELOG.md +36 -2
- package/lib/TagPicker.js.map +1 -1
- package/lib/TagPickerButton.js.map +1 -1
- package/lib/TagPickerControl.js.map +1 -1
- package/lib/TagPickerGroup.js.map +1 -1
- package/lib/TagPickerInput.js.map +1 -1
- package/lib/TagPickerList.js.map +1 -1
- package/lib/TagPickerOption.js.map +1 -1
- package/lib/TagPickerOptionGroup.js.map +1 -1
- package/lib/components/TagPicker/TagPicker.js.map +1 -1
- package/lib/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib/components/TagPicker/index.js.map +1 -1
- package/lib/components/TagPicker/renderTagPicker.js.map +1 -1
- package/lib/components/TagPicker/useTagPicker.js.map +1 -1
- package/lib/components/TagPicker/useTagPickerContextValues.js.map +1 -1
- package/lib/components/TagPickerButton/TagPickerButton.js.map +1 -1
- package/lib/components/TagPickerButton/TagPickerButton.types.js.map +1 -1
- package/lib/components/TagPickerButton/index.js.map +1 -1
- package/lib/components/TagPickerButton/renderTagPickerButton.js.map +1 -1
- package/lib/components/TagPickerButton/useTagPickerButton.js.map +1 -1
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js +113 -0
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerControl/TagPickerControl.js.map +1 -1
- package/lib/components/TagPickerControl/TagPickerControl.types.js.map +1 -1
- package/lib/components/TagPickerControl/index.js.map +1 -1
- package/lib/components/TagPickerControl/renderTagPickerControl.js.map +1 -1
- package/lib/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js +223 -0
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerGroup/TagPickerGroup.js.map +1 -1
- package/lib/components/TagPickerGroup/TagPickerGroup.types.js.map +1 -1
- package/lib/components/TagPickerGroup/index.js.map +1 -1
- package/lib/components/TagPickerGroup/renderTagPickerGroup.js.map +1 -1
- package/lib/components/TagPickerGroup/useTagPickerGroup.js.map +1 -1
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js +38 -0
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerInput/TagPickerInput.js.map +1 -1
- package/lib/components/TagPickerInput/TagPickerInput.types.js.map +1 -1
- package/lib/components/TagPickerInput/index.js.map +1 -1
- package/lib/components/TagPickerInput/renderTagPickerInput.js.map +1 -1
- package/lib/components/TagPickerInput/useTagPickerInput.js.map +1 -1
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js +65 -0
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerList/TagPickerList.js.map +1 -1
- package/lib/components/TagPickerList/TagPickerList.types.js.map +1 -1
- package/lib/components/TagPickerList/index.js.map +1 -1
- package/lib/components/TagPickerList/renderTagPickerList.js.map +1 -1
- package/lib/components/TagPickerList/useTagPickerList.js.map +1 -1
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.raw.js +26 -0
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerOption/TagPickerOption.js.map +1 -1
- package/lib/components/TagPickerOption/TagPickerOption.types.js.map +1 -1
- package/lib/components/TagPickerOption/index.js.map +1 -1
- package/lib/components/TagPickerOption/renderTagPickerOption.js.map +1 -1
- package/lib/components/TagPickerOption/useTagPickerOption.js.map +1 -1
- package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js +51 -0
- package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js.map +1 -0
- package/lib/components/TagPickerOptionGroup/TagPickerOptionGroup.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/TagPickerOptionGroup.types.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/index.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/renderTagPickerOptionGroup.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroup.js.map +1 -1
- package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js +17 -0
- package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map +1 -0
- package/lib/contexts/TagPickerContext.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/tagPicker2Tag.js.map +1 -1
- package/lib/utils/tokens.js.map +1 -1
- package/lib/utils/useExpandLabel.js.map +1 -1
- package/lib/utils/useResizeObserverRef.js.map +1 -1
- package/lib/utils/useTagPickerFilter.js.map +1 -1
- package/lib-commonjs/TagPicker.js.map +1 -1
- package/lib-commonjs/TagPickerButton.js.map +1 -1
- package/lib-commonjs/TagPickerControl.js.map +1 -1
- package/lib-commonjs/TagPickerGroup.js.map +1 -1
- package/lib-commonjs/TagPickerInput.js.map +1 -1
- package/lib-commonjs/TagPickerList.js.map +1 -1
- package/lib-commonjs/TagPickerOption.js.map +1 -1
- package/lib-commonjs/TagPickerOptionGroup.js.map +1 -1
- package/lib-commonjs/components/TagPicker/TagPicker.js.map +1 -1
- package/lib-commonjs/components/TagPicker/TagPicker.types.js.map +1 -1
- package/lib-commonjs/components/TagPicker/index.js.map +1 -1
- package/lib-commonjs/components/TagPicker/renderTagPicker.js.map +1 -1
- package/lib-commonjs/components/TagPicker/useTagPicker.js.map +1 -1
- package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/TagPickerButton.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/TagPickerButton.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/renderTagPickerButton.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButton.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js +129 -0
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerControl/TagPickerControl.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/TagPickerControl.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/renderTagPickerControl.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js +245 -0
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerGroup/TagPickerGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/TagPickerGroup.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/renderTagPickerGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js +54 -0
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerInput/TagPickerInput.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/TagPickerInput.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/renderTagPickerInput.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js +81 -0
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerList/TagPickerList.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/TagPickerList.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/renderTagPickerList.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/useTagPickerList.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js +42 -0
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerOption/TagPickerOption.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/TagPickerOption.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/renderTagPickerOption.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/useTagPickerOption.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js +67 -0
- package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagPickerOptionGroup/TagPickerOptionGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/TagPickerOptionGroup.types.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/index.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/renderTagPickerOptionGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js +33 -0
- package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/TagPickerContext.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/tagPicker2Tag.js.map +1 -1
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/lib-commonjs/utils/useExpandLabel.js.map +1 -1
- package/lib-commonjs/utils/useResizeObserverRef.js.map +1 -1
- package/lib-commonjs/utils/useTagPickerFilter.js.map +1 -1
- package/package.json +11 -11
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tagPickerInputClassNames: function() {
|
|
13
|
+
return tagPickerInputClassNames;
|
|
14
|
+
},
|
|
15
|
+
useTagPickerInputStyles_unstable: function() {
|
|
16
|
+
return useTagPickerInputStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const _tokens = require("../../utils/tokens");
|
|
22
|
+
const tagPickerInputClassNames = {
|
|
23
|
+
root: 'fui-TagPickerInput'
|
|
24
|
+
};
|
|
25
|
+
const useBaseStyle = (0, _react.makeResetStyles)({
|
|
26
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
27
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
28
|
+
fontFamily: _reacttheme.tokens.fontFamilyBase,
|
|
29
|
+
boxSizing: 'border-box',
|
|
30
|
+
'&:focus': {
|
|
31
|
+
outlineStyle: 'none'
|
|
32
|
+
},
|
|
33
|
+
'&::placeholder': {
|
|
34
|
+
color: _reacttheme.tokens.colorNeutralForeground4,
|
|
35
|
+
opacity: 1
|
|
36
|
+
},
|
|
37
|
+
'&::after': {
|
|
38
|
+
visibility: 'hidden',
|
|
39
|
+
whiteSpace: 'pre-wrap'
|
|
40
|
+
},
|
|
41
|
+
border: 'none',
|
|
42
|
+
minWidth: '24px',
|
|
43
|
+
maxWidth: '100%',
|
|
44
|
+
// by default width is 0,
|
|
45
|
+
// it will be calculated based on the requirement of stretching the component to 100% width
|
|
46
|
+
// see setTagPickerInputStretchStyle method for more details
|
|
47
|
+
width: _tokens.tagPickerInputTokens.width,
|
|
48
|
+
flexGrow: 1
|
|
49
|
+
});
|
|
50
|
+
/**
|
|
51
|
+
* Styles for the root slot
|
|
52
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
53
|
+
// size variants
|
|
54
|
+
medium: {
|
|
55
|
+
..._reacttheme.typographyStyles.body1,
|
|
56
|
+
padding: `${_reacttheme.tokens.spacingVerticalSNudge} 0 ${_reacttheme.tokens.spacingVerticalSNudge} 0`
|
|
57
|
+
},
|
|
58
|
+
large: {
|
|
59
|
+
..._reacttheme.typographyStyles.body1,
|
|
60
|
+
padding: `${_reacttheme.tokens.spacingVerticalMNudge} 0 ${_reacttheme.tokens.spacingVerticalMNudge} 0`
|
|
61
|
+
},
|
|
62
|
+
'extra-large': {
|
|
63
|
+
..._reacttheme.typographyStyles.body1,
|
|
64
|
+
padding: `${_reacttheme.tokens.spacingVerticalM} 0 ${_reacttheme.tokens.spacingVerticalM} 0`
|
|
65
|
+
},
|
|
66
|
+
disabled: {
|
|
67
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
68
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
69
|
+
cursor: 'not-allowed',
|
|
70
|
+
'::placeholder': {
|
|
71
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
const useTagPickerInputStyles_unstable = (state)=>{
|
|
76
|
+
'use no memo';
|
|
77
|
+
const baseStyle = useBaseStyle();
|
|
78
|
+
const styles = useStyles();
|
|
79
|
+
state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
|
|
80
|
+
return state;
|
|
81
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n boxSizing: 'border-box',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n '&::after': {\n visibility: 'hidden',\n whiteSpace: 'pre-wrap',\n },\n border: 'none',\n minWidth: '24px',\n maxWidth: '100%',\n // by default width is 0,\n // it will be calculated based on the requirement of stretching the component to 100% width\n // see setTagPickerInputStretchStyle method for more details\n width: tagPickerInputTokens.width,\n flexGrow: 1,\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n // size variants\n medium: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n },\n large: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`,\n },\n 'extra-large': {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n 'use no memo';\n\n const baseStyle = useBaseStyle();\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerInputClassNames.root,\n baseStyle,\n styles[state.size],\n state.disabled && styles.disabled,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":";;;;;;;;;;;IAMaM,wBAAAA;;;IA6DA+B,gCAAAA;;;;uBAnE6C,iBAAiB;4BAClC,wBAAwB;wBAG5B,qBAAqB;AAEnD,iCAAsE;IAC3E9B,MAAM;AACR,EAAE;AAEF,MAAMC,mBAAeR,sBAAAA,EAAgB;IACnCS,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACrCC,YAAYT,kBAAAA,CAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,kBAAAA,CAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,4BAAAA,CAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,kBAAAA,CAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,kBAAAA,CAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,kBAAAA,CAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC5C1B,iBAAiBL,kBAAAA,CAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC9C;IACF;AACF;AAKO,yCAAyC,CAACG;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACfY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,uBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport type { TagPickerListProps } from './TagPickerList.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */\nexport const TagPickerList: ForwardRefComponent<TagPickerListProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerList_unstable(props, ref);\n\n useTagPickerListStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n return renderTagPickerList_unstable(state);\n});\n\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport type { TagPickerListProps } from './TagPickerList.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */\nexport const TagPickerList: ForwardRefComponent<TagPickerListProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerList_unstable(props, ref);\n\n useTagPickerListStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n return renderTagPickerList_unstable(state);\n});\n\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["React","useTagPickerList_unstable","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useCustomStyleHook_unstable","TagPickerList","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;kCAEW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAEtC,kCAAkC;AAMvE,sBAAMA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,+CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAChCL,gDAAAA,EAA4B,mCAAmCK;IAC/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Listbox } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerListSlots = {\n root: Slot<typeof Listbox>;\n};\n\n/**\n * TagPickerList Props\n */\nexport type TagPickerListProps = ComponentProps<TagPickerListSlots>;\n\n/**\n * State used in rendering TagPickerList\n */\nexport type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Listbox } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerListSlots = {\n root: Slot<typeof Listbox>;\n};\n\n/**\n * TagPickerList Props\n */\nexport type TagPickerListProps = ComponentProps<TagPickerListSlots>;\n\n/**\n * State used in rendering TagPickerList\n */\nexport type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAA0G"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerList/index.ts"],"sourcesContent":["export { TagPickerList } from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\nexport { renderTagPickerList_unstable } from './renderTagPickerList';\nexport { useTagPickerList_unstable } from './useTagPickerList';\nexport { tagPickerListClassNames, useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\n"],"names":["TagPickerList","renderTagPickerList_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/index.ts"],"sourcesContent":["export { TagPickerList } from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\nexport { renderTagPickerList_unstable } from './renderTagPickerList';\nexport { useTagPickerList_unstable } from './useTagPickerList';\nexport { tagPickerListClassNames, useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\n"],"names":["TagPickerList","renderTagPickerList_unstable","useTagPickerList_unstable","tagPickerListClassNames","useTagPickerListStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAEbC,iDAA4B;;;eAE5BE,qDAAuB;;;eAAEC,6DAA+B;;;eADxDF,2CAAyB;;;+BAHJ,kBAAkB;qCAEH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerList/renderTagPickerList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerListState, TagPickerListSlots } from './TagPickerList.types';\n\n/**\n * Render the final JSX of TagPickerList\n */\nexport const renderTagPickerList_unstable = (state: TagPickerListState) => {\n assertSlots<TagPickerListSlots>(state);\n return <state.root />;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/renderTagPickerList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerListState, TagPickerListSlots } from './TagPickerList.types';\n\n/**\n * Render the final JSX of TagPickerList\n */\nexport const renderTagPickerList_unstable = (state: TagPickerListState) => {\n assertSlots<TagPickerListSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerList_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAMjD,MAAMC,+BAA+B,CAACC;QAC3CF,2BAAAA,EAAgCE;IAChC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerList.\n *\n * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n *\n * @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n props: TagPickerListProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n | React.RefObject<HTMLInputElement>\n | React.RefObject<HTMLButtonElement>;\n const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n return {\n open,\n components: {\n root: Listbox,\n },\n root: slot.always(\n {\n ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n state: { multiselect: true },\n triggerRef,\n defaultProps: { id: popoverId },\n }),\n role: 'listbox',\n },\n { elementType: Listbox },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerList.\n *\n * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n *\n * @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n props: TagPickerListProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n | React.RefObject<HTMLInputElement>\n | React.RefObject<HTMLButtonElement>;\n const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n return {\n open,\n components: {\n root: Listbox,\n },\n root: slot.always(\n {\n ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n state: { multiselect: true },\n triggerRef,\n defaultProps: { id: popoverId },\n }),\n role: 'listbox',\n },\n { elementType: Listbox },\n ),\n };\n};\n"],"names":["React","Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":";;;;+BAgBaM;;;;;;;iEAhBU,QAAQ;+BAEP,2BAA2B;kCACN,kCAAkC;gCAC3C,4BAA4B;AAYzD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaP,8CAAAA,EAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,iBAAaT,8CAAAA,EAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,gBAAYV,8CAAAA,EAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,WAAOX,8CAAAA,EAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd,sBAAAA;QACR;QACAc,MAAMZ,oBAAAA,CAAKa,MAAM,CACf;YACE,OAAGX,6BAAAA,EAAeE,WAAOH,6BAAAA,EAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB,sBAAAA;QAAQ;IAE3B;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n collapsed: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n collapsed: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":";;;;;;;;;;;IAEaG,uBAAuB;;;mCAkBY;eAA/Be;;;uBApBwB,gBAAgB;AAElD,gCAAgC;IACnCd,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGpB,mBAAY,EAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IACrI,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tagPickerListClassNames: function() {
|
|
13
|
+
return tagPickerListClassNames;
|
|
14
|
+
},
|
|
15
|
+
useTagPickerListStyles_unstable: function() {
|
|
16
|
+
return useTagPickerListStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const tagPickerListClassNames = {
|
|
22
|
+
root: 'fui-TagPickerList'
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the root slot
|
|
26
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
27
|
+
root: {
|
|
28
|
+
boxShadow: `${_reacttheme.tokens.shadow16}`,
|
|
29
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
30
|
+
maxHeight: '80vh',
|
|
31
|
+
boxSizing: 'border-box'
|
|
32
|
+
},
|
|
33
|
+
collapsed: {
|
|
34
|
+
display: 'none'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const useTagPickerListStyles_unstable = (state)=>{
|
|
38
|
+
'use no memo';
|
|
39
|
+
const styles = useStyles();
|
|
40
|
+
state.root.className = (0, _react.mergeClasses)(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
|
|
41
|
+
return state;
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n collapsed: {\n display: 'none',\n },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerListClassNames.root,\n styles.root,\n !state.open && styles.collapsed,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":";;;;;;;;;;;IAKaG,uBAAAA;;;IAuBAW,+BAAAA;;;;uBA5B4B,iBAAiB;4BACnC,wBAAwB;AAIxC,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,kBAAAA,CAAOK,QAAQ,EAAE;QAC/BC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOption_unstable } from './useTagPickerOption';\nimport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nimport { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\nimport type { TagPickerOptionProps } from './TagPickerOption.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerOption component -\n * A TagPickerOption is a composite component that allows users to select tags.\n */\nexport const TagPickerOption: ForwardRefComponent<TagPickerOptionProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOption_unstable(props, ref);\n\n useTagPickerOptionStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);\n return renderTagPickerOption_unstable(state);\n});\n\nTagPickerOption.displayName = 'TagPickerOption';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOption_unstable } from './useTagPickerOption';\nimport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nimport { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\nimport type { TagPickerOptionProps } from './TagPickerOption.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerOption component -\n * A TagPickerOption is a composite component that allows users to select tags.\n */\nexport const TagPickerOption: ForwardRefComponent<TagPickerOptionProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOption_unstable(props, ref);\n\n useTagPickerOptionStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);\n return renderTagPickerOption_unstable(state);\n});\n\nTagPickerOption.displayName = 'TagPickerOption';\n"],"names":["React","useTagPickerOption_unstable","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useCustomStyleHook_unstable","TagPickerOption","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;oCAEa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAE1C,kCAAkC;AAMvE,wBAAMA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,mDAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAClCL,gDAAAA,EAA4B,qCAAqCK;IACjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.types.ts"],"sourcesContent":["import { OptionSlots, OptionState } from '@fluentui/react-combobox';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {\n media?: Slot<'div'>;\n secondaryContent?: Slot<'span'>;\n};\n\n/**\n * TagPickerOption Props\n */\nexport type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {\n value: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering TagPickerOption\n */\nexport type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.types.ts"],"sourcesContent":["import { OptionSlots, OptionState } from '@fluentui/react-combobox';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {\n media?: Slot<'div'>;\n secondaryContent?: Slot<'span'>;\n};\n\n/**\n * TagPickerOption Props\n */\nexport type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {\n value: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering TagPickerOption\n */\nexport type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;\n"],"names":["React"],"mappings":";;;;;iEAEuB,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOption/index.ts"],"sourcesContent":["export { TagPickerOption } from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nexport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nexport { useTagPickerOption_unstable } from './useTagPickerOption';\nexport { tagPickerOptionClassNames, useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\n"],"names":["TagPickerOption","renderTagPickerOption_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/index.ts"],"sourcesContent":["export { TagPickerOption } from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nexport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nexport { useTagPickerOption_unstable } from './useTagPickerOption';\nexport { tagPickerOptionClassNames, useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\n"],"names":["TagPickerOption","renderTagPickerOption_unstable","useTagPickerOption_unstable","tagPickerOptionClassNames","useTagPickerOptionStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAE9BE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOption/renderTagPickerOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerOptionState, TagPickerOptionSlots } from './TagPickerOption.types';\n\n/**\n * Render the final JSX of TagPickerOption\n */\nexport const renderTagPickerOption_unstable = (state: TagPickerOptionState) => {\n assertSlots<TagPickerOptionSlots>(state);\n\n return (\n <state.root>\n {state.media && <state.media />}\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/renderTagPickerOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerOptionState, TagPickerOptionSlots } from './TagPickerOption.types';\n\n/**\n * Render the final JSX of TagPickerOption\n */\nexport const renderTagPickerOption_unstable = (state: TagPickerOptionState) => {\n assertSlots<TagPickerOptionSlots>(state);\n\n return (\n <state.root>\n {state.media && <state.media />}\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTagPickerOption_unstable","state","root","media","children","secondaryContent"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,uCAAuC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA,CAAA;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOption.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n props: TagPickerOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n const optionState = useOption_unstable(props, ref);\n const state: TagPickerOptionState = {\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...optionState.components,\n media: 'div',\n secondaryContent: 'span',\n },\n media: slot.optional(props.media, {\n elementType: 'div',\n }),\n secondaryContent: slot.optional(props.secondaryContent, {\n elementType: 'span',\n }),\n root: slot.always(\n { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n {\n elementType: 'div',\n },\n ),\n };\n\n return state;\n};\n"],"names":["useTagPickerOption_unstable","props","ref","optionState","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOption.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n props: TagPickerOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n const optionState = useOption_unstable(props, ref);\n const state: TagPickerOptionState = {\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...optionState.components,\n media: 'div',\n secondaryContent: 'span',\n },\n media: slot.optional(props.media, {\n elementType: 'div',\n }),\n secondaryContent: slot.optional(props.secondaryContent, {\n elementType: 'span',\n }),\n root: slot.always(\n { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n {\n elementType: 'div',\n },\n ),\n };\n\n return state;\n};\n"],"names":["React","slot","useOption_unstable","useTagPickerOption_unstable","props","ref","optionState","state","components","media","secondaryContent","optional","elementType","root","always","role"],"mappings":";;;;+BAcaG;;;;;;;iEAdU,QAAQ;gCACV,4BAA4B;+BACd,2BAA2B;AAYvD,oCAAoC,CACzCC,OACAC;IAEA,MAAMC,kBAAcJ,iCAAAA,EAAmBE,OAAOC;IAC9C,MAAME,QAA8B;QAClCC,YAAY;YACV,4DAA4D;YAC5D,GAAGF,YAAYE,UAAU;YACzBC,OAAO;YACPC,kBAAkB;QACpB;QACAD,OAAOR,oBAAAA,CAAKU,QAAQ,CAACP,MAAMK,KAAK,EAAE;YAChCG,aAAa;QACf;QACAF,kBAAkBT,oBAAAA,CAAKU,QAAQ,CAACP,MAAMM,gBAAgB,EAAE;YACtDE,aAAa;QACf;QACAC,MAAMZ,oBAAAA,CAAKa,MAAM,CACf;YAAE,GAAGR,YAAYO,IAAI;YAAEE,MAAM;YAAU,gBAAgBX,KAAK,CAAC,eAAe;QAAC,GAC7E;YACEQ,aAAa;QACf;IAEJ;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":";;;;;;;;;;;IAGaK,yBAAyB;;;IAyBrBW,iCAAiC;;;;uBA5BQ,gBAAgB;+BACjC,0BAA0B;AAE5D,kCAAkC;IACrCV,IAAI,EAAE,qBAAqB;IAC3BC,KAAK,EAAE,4BAA4B;IACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAGxB,CAAC;AACF,MAAMU,aAAa,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAO,gBAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,GAAA,WAAA,OAAGd,oBAAA,EAAA,YAAA,MAAA;IAAA;CAIpC,CAAC;AACF,MAAMe,iBAAiB,GAAA,WAAA,OAAGf,oBAAA,EAAA,WAAA,MAAA;IAAA;CAEzB,CAAC;AAGS,0CAA2CiB,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;IACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;IAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;IAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;IAC1CE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,uBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;QAC/JnB,uCAAwB,EAAC;QACrB,GAAGc,KAAK;QACRM,MAAM,EAAE,KAAK;QACbC,QAAQ,EAAE,KAAK;QACfC,YAAY,EAAE,KAAK;QACnBC,SAAS,EAAEC,SAAS;QACpBC,QAAQ,EAAE;IACd,CAAC,CAAC;IACF,IAAIX,KAAK,CAACV,KAAK,EAAE;QACbU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,uBAAY,EAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;IAChH;IACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;QACxBS,KAAK,CAACT,gBAAgB,CAACc,SAAS,OAAGpB,mBAAY,EAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;IAC5J;IACA,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tagPickerOptionClassNames: function() {
|
|
13
|
+
return tagPickerOptionClassNames;
|
|
14
|
+
},
|
|
15
|
+
useTagPickerOptionStyles_unstable: function() {
|
|
16
|
+
return useTagPickerOptionStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reactcombobox = require("@fluentui/react-combobox");
|
|
21
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
+
const tagPickerOptionClassNames = {
|
|
23
|
+
root: 'fui-TagPickerOption',
|
|
24
|
+
media: 'fui-TagPickerOption__media',
|
|
25
|
+
secondaryContent: 'fui-TagPickerOption__secondaryContent'
|
|
26
|
+
};
|
|
27
|
+
const useRootBaseStyle = (0, _react.makeResetStyles)({
|
|
28
|
+
display: 'flex',
|
|
29
|
+
alignItems: 'center'
|
|
30
|
+
});
|
|
31
|
+
const useRootStyles = (0, _react.makeStyles)({
|
|
32
|
+
secondaryContent: {
|
|
33
|
+
display: 'grid',
|
|
34
|
+
gridTemplateColumns: 'auto 1fr'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const useSecondaryContentBaseStyle = (0, _react.makeResetStyles)({
|
|
38
|
+
gridColumnStart: 2,
|
|
39
|
+
gridRowStart: 2,
|
|
40
|
+
..._reacttheme.typographyStyles.caption1
|
|
41
|
+
});
|
|
42
|
+
const useMediaBaseStyle = (0, _react.makeResetStyles)({
|
|
43
|
+
gridRowStart: 'span 2'
|
|
44
|
+
});
|
|
45
|
+
const useTagPickerOptionStyles_unstable = (state)=>{
|
|
46
|
+
'use no memo';
|
|
47
|
+
const rootBaseStyle = useRootBaseStyle();
|
|
48
|
+
const rootStyles = useRootStyles();
|
|
49
|
+
const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
|
|
50
|
+
const mediaBaseStyle = useMediaBaseStyle();
|
|
51
|
+
state.root.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
|
|
52
|
+
(0, _reactcombobox.useOptionStyles_unstable)({
|
|
53
|
+
...state,
|
|
54
|
+
active: false,
|
|
55
|
+
disabled: false,
|
|
56
|
+
focusVisible: false,
|
|
57
|
+
checkIcon: undefined,
|
|
58
|
+
selected: false
|
|
59
|
+
});
|
|
60
|
+
if (state.media) {
|
|
61
|
+
state.media.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
|
|
62
|
+
}
|
|
63
|
+
if (state.secondaryContent) {
|
|
64
|
+
state.secondaryContent.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
|
|
65
|
+
}
|
|
66
|
+
return state;
|
|
67
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n 'use no memo';\n\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n\n state.root.className = mergeClasses(\n tagPickerOptionClassNames.root,\n rootBaseStyle,\n state.secondaryContent && rootStyles.secondaryContent,\n state.root.className,\n );\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false,\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n tagPickerOptionClassNames.secondaryContent,\n secondaryContentBaseStyle,\n state.secondaryContent.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":";;;;;;;;;;;IAMaK,yBAAAA;;;IA+BAc,iCAAAA;;;;uBArC6C,iBAAiB;+BAGlC,2BAA2B;4BACnC,wBAAwB;AAElD,kCAAwE;IAC7Eb,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAmBT,sBAAAA,EAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,mCAA+Bd,sBAAAA,EAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,4BAAAA,CAAiBa,QAAQ;AAC9B;AAEA,MAAMC,wBAAoBlB,sBAAAA,EAAgB;IACxCgB,cAAc;AAChB;AAKO,0CAA0C,CAACI;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvBE,MAAMd,IAAI,CAACmB,SAAS,OAAGvB,mBAAAA,EACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;QAEtBtB,uCAAAA,EAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACfa,MAAMb,KAAK,CAACkB,SAAS,OAAGvB,mBAAAA,EAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1BY,MAAMZ,gBAAgB,CAACiB,SAAS,OAAGvB,mBAAAA,EACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOptionGroup } from './useTagPickerOptionGroup';\nimport { renderTagPickerOptionGroup } from './renderTagPickerOptionGroup';\nimport { useTagPickerOptionGroupStyles } from './useTagPickerOptionGroupStyles.styles';\nimport type { TagPickerOptionGroupProps } from './TagPickerOptionGroup.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerOptionGroup component -\n * A TagPickerOptionGroup is a composite component that allows users to group TagPickerOptions.\n */\nexport const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOptionGroup(props, ref);\n\n useTagPickerOptionGroupStyles(state);\n useCustomStyleHook_unstable('useTagPickerOptionGroupStyles_unstable')(state);\n return renderTagPickerOptionGroup(state);\n});\n\nTagPickerOptionGroup.displayName = 'TagPickerOptionGroup';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOptionGroup } from './useTagPickerOptionGroup';\nimport { renderTagPickerOptionGroup } from './renderTagPickerOptionGroup';\nimport { useTagPickerOptionGroupStyles } from './useTagPickerOptionGroupStyles.styles';\nimport type { TagPickerOptionGroupProps } from './TagPickerOptionGroup.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerOptionGroup component -\n * A TagPickerOptionGroup is a composite component that allows users to group TagPickerOptions.\n */\nexport const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOptionGroup(props, ref);\n\n useTagPickerOptionGroupStyles(state);\n useCustomStyleHook_unstable('useTagPickerOptionGroupStyles_unstable')(state);\n return renderTagPickerOptionGroup(state);\n});\n\nTagPickerOptionGroup.displayName = 'TagPickerOptionGroup';\n"],"names":["React","useTagPickerOptionGroup","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useCustomStyleHook_unstable","TagPickerOptionGroup","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;yCAES,4BAA4B;4CACzB,+BAA+B;qDAC5B,yCAAyC;qCAE3C,kCAAkC;AAMvE,6BAAMA,WAAAA,GAAuEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,oDAAAA,EAAwBM,OAAOC;QAE7CL,kEAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,0CAA0CK;IACtE,WAAOP,sDAAAA,EAA2BO;AACpC,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts"],"sourcesContent":["import { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';\n\nexport type TagPickerOptionGroupSlots = OptionGroupSlots;\n\n/**\n * TagPickerOptionGroup Props\n */\nexport type TagPickerOptionGroupProps = OptionGroupProps;\n\n/**\n * State used in rendering TagPickerOptionGroup\n */\nexport type TagPickerOptionGroupState = OptionGroupState;\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts"],"sourcesContent":["import { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';\n\nexport type TagPickerOptionGroupSlots = OptionGroupSlots;\n\n/**\n * TagPickerOptionGroup Props\n */\nexport type TagPickerOptionGroupProps = OptionGroupProps;\n\n/**\n * State used in rendering TagPickerOptionGroup\n */\nexport type TagPickerOptionGroupState = OptionGroupState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAyD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/index.ts"],"sourcesContent":["export { TagPickerOptionGroup } from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup.types';\nexport { renderTagPickerOptionGroup } from './renderTagPickerOptionGroup';\nexport { useTagPickerOptionGroup } from './useTagPickerOptionGroup';\nexport { tagPickerOptionGroupClassNames, useTagPickerOptionGroupStyles } from './useTagPickerOptionGroupStyles.styles';\n"],"names":["TagPickerOptionGroup","renderTagPickerOptionGroup","
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/index.ts"],"sourcesContent":["export { TagPickerOptionGroup } from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup.types';\nexport { renderTagPickerOptionGroup } from './renderTagPickerOptionGroup';\nexport { useTagPickerOptionGroup } from './useTagPickerOptionGroup';\nexport { tagPickerOptionGroupClassNames, useTagPickerOptionGroupStyles } from './useTagPickerOptionGroupStyles.styles';\n"],"names":["TagPickerOptionGroup","renderTagPickerOptionGroup","useTagPickerOptionGroup","tagPickerOptionGroupClassNames","useTagPickerOptionGroupStyles"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eAMpBC,sDAA0B;;;eAE1BE,mEAA8B;;;eAD9BD,gDAAuB;;;eACSE,kEAA6B;;;sCARjC,yBAAyB;4CAMnB,+BAA+B;yCAClC,4BAA4B;qDACU,yCAAyC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (\n state: TagPickerOptionGroupState,\n) => // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element = renderOptionGroup_unstable;\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/renderTagPickerOptionGroup.tsx"],"sourcesContent":["import type { TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { renderOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Render the final JSX of TagPickerOptionGroup\n */\nexport const renderTagPickerOptionGroup: (\n state: TagPickerOptionGroupState,\n) => // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element = renderOptionGroup_unstable;\n"],"names":["renderOptionGroup_unstable","renderTagPickerOptionGroup"],"mappings":";;;;;;;;;;+BAC2C,2BAA2B;AAK/D,MAAMC,6BAGCD,yCAAAA,CAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerOptionGroupProps, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerOptionGroup.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,\n * before being passed to renderTagPickerOptionGroup_unstable.\n *\n * @param props - props from this instance of TagPickerOptionGroup\n * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup\n */\nexport const useTagPickerOptionGroup: (\n props: TagPickerOptionGroupProps,\n ref: React.Ref<HTMLDivElement>,\n) => TagPickerOptionGroupState = useOptionGroup_unstable;\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerOptionGroupProps, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerOptionGroup.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,\n * before being passed to renderTagPickerOptionGroup_unstable.\n *\n * @param props - props from this instance of TagPickerOptionGroup\n * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup\n */\nexport const useTagPickerOptionGroup: (\n props: TagPickerOptionGroupProps,\n ref: React.Ref<HTMLDivElement>,\n) => TagPickerOptionGroupState = useOptionGroup_unstable;\n"],"names":["React","useOptionGroup_unstable","useTagPickerOptionGroup"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;+BAES,2BAA2B;AAW5D,MAAME,0BAGoBD,sCAAAA,CAAwB"}
|
package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n 'use no memo';\n useOptionGroupStyles_unstable(state);\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n if (state.label) {\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n 'use no memo';\n useOptionGroupStyles_unstable(state);\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n if (state.label) {\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":";;;;;;;;;;;IAEaE,8BAA8B;;;IAM1BG,6BAA6B;;;;uBARjB,gBAAgB;+BACC,0BAA0B;AACjE,uCAAuC;IAC1CF,IAAI,EAAE,0BAA0B;IAChCC,KAAK,EAAE;AACX,CAAC;AAGU,uCAAuCE,KAAK,IAAG;IACtD,aAAa;QACbL,4CAA6B,EAACK,KAAK,CAAC;IACpCA,KAAK,CAACH,IAAI,CAACI,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;IAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;QACbE,KAAK,CAACF,KAAK,CAACG,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;IACrG;IACA,OAAOD,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tagPickerOptionGroupClassNames: function() {
|
|
13
|
+
return tagPickerOptionGroupClassNames;
|
|
14
|
+
},
|
|
15
|
+
useTagPickerOptionGroupStyles: function() {
|
|
16
|
+
return useTagPickerOptionGroupStyles;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reactcombobox = require("@fluentui/react-combobox");
|
|
21
|
+
const tagPickerOptionGroupClassNames = {
|
|
22
|
+
root: 'fui-TagPickerOptionGroup',
|
|
23
|
+
label: 'fui-TagPickerOptionGroup__label'
|
|
24
|
+
};
|
|
25
|
+
const useTagPickerOptionGroupStyles = (state)=>{
|
|
26
|
+
'use no memo';
|
|
27
|
+
(0, _reactcombobox.useOptionGroupStyles_unstable)(state);
|
|
28
|
+
state.root.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.root, state.root.className);
|
|
29
|
+
if (state.label) {
|
|
30
|
+
state.label.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.label, state.label.className);
|
|
31
|
+
}
|
|
32
|
+
return state;
|
|
33
|
+
};
|
package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n 'use no memo';\n\n useOptionGroupStyles_unstable(state);\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":";;;;;;;;;;;IAKaE,8BAAAA;;;IAQAG,6BAAAA;;;;uBAbgB,iBAAiB;+BAGA,2BAA2B;AAElE,uCAAkF;IACvFF,MAAM;IACNC,OAAO;AACT,EAAE;AAKK,sCAAsC,CAACE;IAC5C;QAEAL,4CAAAA,EAA8BK;IAC9BA,MAAMH,IAAI,CAACI,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACfE,MAAMF,KAAK,CAACG,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n extends Pick<\n ComboboxBaseState,\n | 'open'\n | 'clearSelection'\n | 'getOptionById'\n | 'selectedOptions'\n | 'selectOption'\n | 'setHasFocus'\n | 'setOpen'\n | 'setValue'\n | 'value'\n | 'appearance'\n | 'disabled'\n > {\n triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n popoverRef: React.RefObject<HTMLDivElement>;\n popoverId: string;\n targetRef: React.RefObject<HTMLDivElement>;\n secondaryActionRef: React.RefObject<HTMLSpanElement>;\n tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n size: TagPickerSize;\n noPopover?: boolean;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n triggerRef: React.createRef<HTMLInputElement>(),\n popoverRef: React.createRef<HTMLDivElement>(),\n targetRef: React.createRef<HTMLDivElement>(),\n tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n secondaryActionRef: React.createRef<HTMLDivElement>(),\n open: false,\n clearSelection: () => null,\n getOptionById: () => undefined,\n selectedOptions: [],\n selectOption: () => null,\n setHasFocus: () => null,\n setOpen: () => null,\n setValue: () => null,\n value: undefined,\n popoverId: '',\n size: 'medium',\n appearance: 'outline',\n disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/contexts/TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n extends Pick<\n ComboboxBaseState,\n | 'open'\n | 'clearSelection'\n | 'getOptionById'\n | 'selectedOptions'\n | 'selectOption'\n | 'setHasFocus'\n | 'setOpen'\n | 'setValue'\n | 'value'\n | 'appearance'\n | 'disabled'\n > {\n triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n popoverRef: React.RefObject<HTMLDivElement>;\n popoverId: string;\n targetRef: React.RefObject<HTMLDivElement>;\n secondaryActionRef: React.RefObject<HTMLSpanElement>;\n tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n size: TagPickerSize;\n noPopover?: boolean;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n triggerRef: React.createRef<HTMLInputElement>(),\n popoverRef: React.createRef<HTMLDivElement>(),\n targetRef: React.createRef<HTMLDivElement>(),\n tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n secondaryActionRef: React.createRef<HTMLDivElement>(),\n open: false,\n clearSelection: () => null,\n getOptionById: () => undefined,\n selectedOptions: [],\n selectOption: () => null,\n setHasFocus: () => null,\n setOpen: () => null,\n setValue: () => null,\n value: undefined,\n popoverId: '',\n size: 'medium',\n appearance: 'outline',\n disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","tagPickerContextDefaultValue","triggerRef","createRef","popoverRef","targetRef","tagPickerGroupRef","secondaryActionRef","open","clearSelection","getOptionById","undefined","selectedOptions","selectOption","setHasFocus","setOpen","setValue","value","popoverId","size","appearance","disabled","TagPickerContext","TagPickerContextProvider","Provider","useTagPickerContext_unstable","selector","ctx"],"mappings":";;;;;;;;;;;4BAwDayB;;;IAvBAtB,4BAAAA;;;gCAwBAwB;;;;;iEAzDU,QAAQ;sCACoC,mCAAmC;AAgC/F,qCAA4D;IACjEvB,0BAAYJ,OAAMK,SAAS;IAC3BC,0BAAYN,OAAMK,SAAS;IAC3BE,yBAAWP,OAAMK,SAAS;IAC1BG,iCAAmBR,OAAMK,SAAS;IAClCI,kCAAoBT,OAAMK,SAAS;IACnCK,MAAM;IACNC,gBAAgB,IAAM;IACtBC,eAAe,IAAMC;IACrBC,iBAAiB,EAAE;IACnBC,cAAc,IAAM;IACpBC,aAAa,IAAM;IACnBC,SAAS,IAAM;IACfC,UAAU,IAAM;IAChBC,OAAON;IACPO,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAmBvB,mCAAAA,EAAiDY;AAEnE,MAAMY,2BAA2BD,iBAAiBE,QAAQ,CAAC;AAC3D,MAAMC,+BAA+B,CAAIC,eAC9C1B,wCAAAA,EAAmBsB,kBAAkB,CAACK,MAAM1B,4BAA4B,GAAKyB,SAASC,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './TagPicker';\nexport type {\n TagPickerContextValues,\n TagPickerProps,\n TagPickerSlots,\n TagPickerState,\n TagPickerOnOpenChangeData,\n TagPickerOnOptionSelectData,\n TagPickerSize,\n} from './TagPicker';\nexport {\n TagPickerInput,\n tagPickerInputClassNames,\n renderTagPickerInput_unstable,\n useTagPickerInputStyles_unstable,\n useTagPickerInput_unstable,\n} from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput';\nexport {\n TagPickerList,\n tagPickerListClassNames,\n renderTagPickerList_unstable,\n useTagPickerListStyles_unstable,\n useTagPickerList_unstable,\n} from './TagPickerList';\nexport type { TagPickerListProps, TagPickerListSlots, TagPickerListState } from './TagPickerList';\nexport {\n TagPickerButton,\n tagPickerButtonClassNames,\n renderTagPickerButton_unstable,\n useTagPickerButtonStyles_unstable,\n useTagPickerButton_unstable,\n} from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton';\nexport {\n TagPickerControl,\n tagPickerControlClassNames,\n renderTagPickerControl_unstable,\n useTagPickerControlStyles_unstable,\n useTagPickerControl_unstable,\n} from './TagPickerControl';\nexport type { TagPickerControlProps, TagPickerControlSlots, TagPickerControlState } from './TagPickerControl';\nexport {\n TagPickerOption,\n tagPickerOptionClassNames,\n renderTagPickerOption_unstable,\n useTagPickerOptionStyles_unstable,\n useTagPickerOption_unstable,\n} from './TagPickerOption';\nexport type { TagPickerOptionProps, TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption';\nexport {\n TagPickerGroup,\n tagPickerGroupClassNames,\n renderTagPickerGroup_unstable,\n useTagPickerGroupStyles_unstable,\n useTagPickerGroup_unstable,\n} from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup';\n\nexport {\n TagPickerOptionGroup,\n tagPickerOptionGroupClassNames,\n renderTagPickerOptionGroup,\n useTagPickerOptionGroupStyles,\n useTagPickerOptionGroup,\n} from './TagPickerOptionGroup';\nexport type {\n TagPickerOptionGroupProps,\n TagPickerOptionGroupSlots,\n TagPickerOptionGroupState,\n} from './TagPickerOptionGroup';\n\nexport { useTagPickerFilter } from './utils/useTagPickerFilter';\n\nexport { useTagPickerContext_unstable } from './contexts/TagPickerContext';\nexport type { TagPickerContextValue } from './contexts/TagPickerContext';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","TagPickerInput","tagPickerInputClassNames","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","TagPickerList","tagPickerListClassNames","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useTagPickerList_unstable","TagPickerButton","tagPickerButtonClassNames","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","TagPickerControl","tagPickerControlClassNames","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","TagPickerOption","tagPickerOptionClassNames","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useTagPickerOption_unstable","TagPickerGroup","tagPickerGroupClassNames","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useTagPickerGroup_unstable","TagPickerOptionGroup","tagPickerOptionGroupClassNames","renderTagPickerOptionGroup","useTagPickerOptionGroupStyles","useTagPickerOptionGroup","useTagPickerFilter","useTagPickerContext_unstable"],"mappings":";;;;;;;;;;;aAAkB;eAATA;;;eA2BPa,gCAAe;;;eAQfK,kCAAgB;;;eAgBhBU,8BAAc;;;eAxCdzB,8BAAc;;;eAQdK,4BAAa;;IAwBbe,eAAe;;;wBAiBK;eAApBU;;IA/BAlB;8DAA8B;;;eAQ9BK,iDAA+B;;IAgB/BU,6BAA6B;;;;eAxC7BzB,6CAA6B;;;eAQ7BK,2CAA4B;;IAyC5ByB,0BAA0B;;;;eAjB1BV,+CAA8B;;;eA7CZxB,mCAAwB;;;eA4B1Ca,0CAAyB;;;eAQzBK,4CAA0B;;4BAgBF;eAAxBU;;;eAxCAzB,wCAAwB;;;eAQxBK,sCAAuB;;6BAwBE;eAAzBe;;;eAiBAU,oDAA8B;;qCA/BG;eAAjClB;;;eACAC,4CAA2B;;IA2CpBsB,4BAA4B;;;;eApCnClB,oDAAkC;;IAClCC,4BAA4B;;;sBAiCH;eAAlBgB;;;eAlBPP,gDAAgC;;8BACN;eAA1BC;;;eAzCA1B,gDAAgC;;;eAChCC,0CAA0B;;;eAO1BI,8CAA+B;;;eAC/BC,wCAAyB;;;eAyCzByB,6CAAuB;;;eADvBD,mDAA6B;;;eAjB7BV,kDAAiC;;IACjCC;2DAA2B;;;eA/CiBzB,gCAAqB;;;2BAAQ,cAAc;gCAgBlF,mBAAmB;+BAQnB,kBAAkB;iCAQlB,oBAAoB;kCAQpB,qBAAqB;iCAQrB,oBAAoB;gCAQpB,mBAAmB;sCASnB,yBAAyB;oCAOG,6BAA6B;kCAEnB,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/tagPicker2Tag.ts"],"sourcesContent":["import type { TagAppearance, TagSize } from '@fluentui/react-tags/src/index';\nimport type { TagPickerSize } from '../TagPicker';\nimport { ComboboxBaseProps } from '@fluentui/react-combobox';\n\nexport function tagPickerSizeToTagSize(size: TagPickerSize): TagSize {\n switch (size) {\n case 'medium':\n return 'extra-small';\n case 'large':\n return 'small';\n case 'extra-large':\n return 'medium';\n default:\n return 'extra-small';\n }\n}\n\nexport function tagSizeToTagPickerSize(size: TagSize): TagPickerSize {\n switch (size) {\n case 'extra-small':\n return 'medium';\n case 'small':\n return 'large';\n case 'medium':\n return 'extra-large';\n default:\n return 'medium';\n }\n}\n\nexport function tagPickerAppearanceToTagAppearance(appearance: ComboboxBaseProps['appearance']): TagAppearance {\n switch (appearance) {\n case 'filled-darker':\n return 'outline';\n default:\n return 'filled';\n }\n}\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/utils/tagPicker2Tag.ts"],"sourcesContent":["import type { TagAppearance, TagSize } from '@fluentui/react-tags/src/index';\nimport type { TagPickerSize } from '../TagPicker';\nimport { ComboboxBaseProps } from '@fluentui/react-combobox';\n\nexport function tagPickerSizeToTagSize(size: TagPickerSize): TagSize {\n switch (size) {\n case 'medium':\n return 'extra-small';\n case 'large':\n return 'small';\n case 'extra-large':\n return 'medium';\n default:\n return 'extra-small';\n }\n}\n\nexport function tagSizeToTagPickerSize(size: TagSize): TagPickerSize {\n switch (size) {\n case 'extra-small':\n return 'medium';\n case 'small':\n return 'large';\n case 'medium':\n return 'extra-large';\n default:\n return 'medium';\n }\n}\n\nexport function tagPickerAppearanceToTagAppearance(appearance: ComboboxBaseProps['appearance']): TagAppearance {\n switch (appearance) {\n case 'filled-darker':\n return 'outline';\n default:\n return 'filled';\n }\n}\n"],"names":["tagPickerSizeToTagSize","size","tagSizeToTagPickerSize","tagPickerAppearanceToTagAppearance","appearance"],"mappings":";;;;;;;;;;;sCA8BgBG;;;0BA1BAH;;;0BAaAE;;;;AAbT,SAASF,uBAAuBC,IAAmB;IACxD,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAEO,SAASC,uBAAuBD,IAAa;IAClD,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAEO,SAASE,mCAAmCC,UAA2C;IAC5F,OAAQA;QACN,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/tokens.ts"],"sourcesContent":["export type TagPickerInputTokens = {\n width: string;\n};\n\nexport const tagPickerInputCSSRules: { [Key in keyof TagPickerInputTokens]: `--fluent-TagPickerInput__${Key}` } = {\n width: '--fluent-TagPickerInput__width',\n};\n\nexport const tagPickerInputTokens: Record<keyof TagPickerInputTokens, string> = {\n width: `var(${tagPickerInputCSSRules.width}, 0)`,\n};\n"],"names":["tagPickerInputCSSRules","
|
|
1
|
+
{"version":3,"sources":["../src/utils/tokens.ts"],"sourcesContent":["export type TagPickerInputTokens = {\n width: string;\n};\n\nexport const tagPickerInputCSSRules: { [Key in keyof TagPickerInputTokens]: `--fluent-TagPickerInput__${Key}` } = {\n width: '--fluent-TagPickerInput__width',\n};\n\nexport const tagPickerInputTokens: Record<keyof TagPickerInputTokens, string> = {\n width: `var(${tagPickerInputCSSRules.width}, 0)`,\n};\n"],"names":["tagPickerInputCSSRules","width","tagPickerInputTokens"],"mappings":";;;;;;;;;;;0BAIaA;;;wBAIAE;;;;AAJN,MAAMF,yBAAqG;IAChHC,OAAO;AACT,EAAE;AAEK,MAAMC,uBAAmE;IAC9ED,OAAO,CAAC,IAAI,EAAED,uBAAuBC,KAAK,CAAC,IAAI,CAAC;AAClD,EAAE"}
|