@fluentui/react-select 0.0.0-nightly-20221115-0423.1 → 0.0.0-nightly-20221118-0422.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.json +40 -11
- package/CHANGELOG.md +18 -8
- package/lib/Select.js.map +1 -1
- package/lib/SelectField.js.map +1 -1
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Select/Select.types.js.map +1 -1
- package/lib/components/Select/index.js.map +1 -1
- package/lib/components/Select/renderSelect.js.map +1 -1
- package/lib/components/Select/useSelect.js.map +1 -1
- package/lib/components/Select/useSelectStyles.js.map +1 -1
- package/lib/components/SelectField/SelectField.js.map +1 -1
- package/lib/components/SelectField/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Select.js.map +1 -1
- package/lib-commonjs/SelectField.js.map +1 -1
- package/lib-commonjs/components/Select/Select.js.map +1 -1
- package/lib-commonjs/components/Select/index.js.map +1 -1
- package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/components/SelectField/SelectField.js.map +1 -1
- package/lib-commonjs/components/SelectField/index.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-select_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 18 Nov 2022 04:30:23 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v0.0.0-nightly-20221118-0422.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221118-0422.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,26 +16,55 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-select",
|
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20221118-0422.1",
|
|
20
|
+
"commit": "57964dd4828d0f5dad5d062b87ec327ab4a22d8a"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-select",
|
|
25
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221118-0422.1",
|
|
26
|
+
"commit": "57964dd4828d0f5dad5d062b87ec327ab4a22d8a"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-select",
|
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221118-0422.1",
|
|
32
|
+
"commit": "57964dd4828d0f5dad5d062b87ec327ab4a22d8a"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-select",
|
|
37
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221118-0422.1",
|
|
38
|
+
"commit": "57964dd4828d0f5dad5d062b87ec327ab4a22d8a"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Thu, 17 Nov 2022 23:05:45 GMT",
|
|
45
|
+
"tag": "@fluentui/react-select_v9.0.0-beta.15",
|
|
46
|
+
"version": "9.0.0-beta.15",
|
|
47
|
+
"comments": {
|
|
48
|
+
"none": [
|
|
49
|
+
{
|
|
50
|
+
"author": "martinhochel@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-select",
|
|
52
|
+
"commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
|
|
53
|
+
"comment": "chore: update package scaffold"
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
"prerelease": [
|
|
57
|
+
{
|
|
58
|
+
"author": "beachball",
|
|
59
|
+
"package": "@fluentui/react-select",
|
|
60
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
|
|
61
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "beachball",
|
|
65
|
+
"package": "@fluentui/react-select",
|
|
66
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.2",
|
|
67
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
39
68
|
}
|
|
40
69
|
]
|
|
41
70
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 18 Nov 2022 04:30:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221118-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v0.0.0-nightly-20221118-0422.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.
|
|
9
|
+
Fri, 18 Nov 2022 04:30:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.15..@fluentui/react-select_v0.0.0-nightly-20221118-0422.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20221118-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/57964dd4828d0f5dad5d062b87ec327ab4a22d8a) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221118-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/57964dd4828d0f5dad5d062b87ec327ab4a22d8a) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221118-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/57964dd4828d0f5dad5d062b87ec327ab4a22d8a) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221118-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/57964dd4828d0f5dad5d062b87ec327ab4a22d8a) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.15)
|
|
21
|
+
|
|
22
|
+
Thu, 17 Nov 2022 23:05:45 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.14..@fluentui/react-select_v9.0.0-beta.15)
|
|
24
|
+
|
|
25
|
+
### Changes
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
19
29
|
|
|
20
30
|
## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.14)
|
|
21
31
|
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/Select.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Select/index';\n"]}
|
package/lib/SelectField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/SelectField.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SelectField/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Called when the user changes the select element's value by selecting an option.\n */\n onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n /**\n * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n */\n value: string;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,CADF;AAMD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,gBAAtD,QAA8E,2BAA9E;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;EACvG,MAAM;IACJ,YADI;IAEJ,KAFI;IAGJ,MAHI;IAIJ,IAJI;IAKJ,IALI;IAMJ,UAAU,GAAG,SANT;IAQJ,QARI;IASJ,IAAI,GAAG;EATH,IAUF,KAVJ;EAYA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,QAFwB;IAG5C,iBAAiB,EAAE,CAAC,YAAD,EAAe,cAAf,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAgB;IACzB,IADyB;IAEzB,UAFyB;IAGzB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,MAAM,EAAE,QAFE;MAGV,IAAI,EAAE;IAHI,CAHa;IAQzB,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,YADY;QAEZ,KAFY;QAGZ,GAHY;QAIZ,GAAG,WAAW,CAAC;MAJH;IAFiB,CAAT,CARC;IAiBzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;MAAZ;IAFa,CAAP,CAjBG;IAqBzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAP;EArBG,CAA3B;EA2BA,KAAK,CAAC,MAAN,CAAa,QAAb,GAAwB,gBAAgB,CAAC,KAAK,IAAG;IAC/C,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,KAAK,EAAG,KAAK,CAAC,MAAN,CAAmC;IAA7C,CAAV,CAAR;EACD,CAFuC,CAAxC;EAIA,OAAO,KAAP;AACD,CAnDM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const {\n defaultValue,\n value,\n select,\n icon,\n root,\n appearance = 'outline',\n\n onChange,\n size = 'medium',\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n });\n\n const state: SelectState = {\n size,\n appearance,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,MAAT,QAAuB,cAAvB;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select } from '../../Select';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './SelectField';\n"]}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-select/src/index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AASA,SAAS,WAAW,IAAI,oBAAxB,EAA8C,qBAA9C,QAA2E,eAA3E","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n\nexport { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';\nexport type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-select/src/Select.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Select/index';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-select/src/SelectField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SelectField/index';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,CADF;AAMD,CARM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;EACvG,MAAM;IACJ,YADI;IAEJ,KAFI;IAGJ,MAHI;IAIJ,IAJI;IAKJ,IALI;IAMJ,UAAU,GAAG,SANT;IAQJ,QARI;IASJ,IAAI,GAAG;EATH,IAUF,KAVJ;EAYA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,QAFwB;IAG5C,iBAAiB,EAAE,CAAC,YAAD,EAAe,cAAf,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAgB;IACzB,IADyB;IAEzB,UAFyB;IAGzB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,MAAM,EAAE,QAFE;MAGV,IAAI,EAAE;IAHI,CAHa;IAQzB,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,YADY;QAEZ,KAFY;QAGZ,GAHY;QAIZ,GAAG,WAAW,CAAC;MAJH;IAFiB,CAAzB,CARiB;IAiBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;MAAZ;IAFa,CAAvB,CAjBmB;IAqBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAvB;EArBmB,CAA3B;EA2BA,KAAK,CAAC,MAAN,CAAa,QAAb,GAAwB,iBAAA,CAAA,gBAAA,CAAiB,KAAK,IAAG;IAC/C,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,KAAK,EAAG,KAAK,CAAC,MAAN,CAAmC;IAA7C,CAAV,CAAR;EACD,CAFuB,CAAxB;EAIA,OAAO,KAAP;AACD,CAnDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const {\n defaultValue,\n value,\n select,\n icon,\n root,\n appearance = 'outline',\n\n onChange,\n size = 'medium',\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n });\n\n const state: SelectState = {\n size,\n appearance,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,QAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,gBAAwB,aAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,QAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select } from '../../Select';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './SelectField';\n"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../../packages/react-components/react-select/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAIF,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AAAqC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n\nexport { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';\nexport type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField';\n"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221118-0422.1",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,21 +20,20 @@
|
|
|
20
20
|
"lint": "just-scripts lint",
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
|
-
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-select/src && yarn docs",
|
|
25
23
|
"storybook": "start-storybook",
|
|
26
|
-
"type-check": "tsc -b tsconfig.json"
|
|
24
|
+
"type-check": "tsc -b tsconfig.json",
|
|
25
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
28
|
"@fluentui/eslint-plugin": "*",
|
|
30
29
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221118-0422.1"
|
|
32
31
|
},
|
|
33
32
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-field": "0.0.0-nightly-20221118-0422.1",
|
|
35
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221118-0422.1",
|
|
36
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221118-0422.1",
|
|
38
37
|
"@griffel/react": "^1.4.2",
|
|
39
38
|
"tslib": "^2.1.0"
|
|
40
39
|
},
|