@fluentui/react-select 0.0.0-nightly-20220621-0418.1 → 9.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +5 -35
- package/CHANGELOG.md +5 -10
- package/Spec.md +8 -3
- package/dist/index.d.ts +7 -16
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Select/Select.types.js.map +1 -1
- package/lib/components/Select/renderSelect.js.map +1 -1
- package/lib/components/Select/useSelect.js +6 -15
- package/lib/components/Select/useSelect.js.map +1 -1
- package/lib/components/Select/useSelectStyles.js +17 -17
- package/lib/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/components/Select/Select.js.map +1 -1
- package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelect.js +5 -14
- package/lib-commonjs/components/Select/useSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelectStyles.js +17 -17
- package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,46 +2,16 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue, 21 Jun 2022
|
|
6
|
-
"tag": "@fluentui/react-
|
|
7
|
-
"version": "
|
|
5
|
+
"date": "Tue, 21 Jun 2022 17:09:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v9.0.0-beta.3",
|
|
7
|
+
"version": "9.0.0-beta.3",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
|
-
{
|
|
11
|
-
"author": "olfedias@microsoft.com",
|
|
12
|
-
"package": "@fluentui/react-select",
|
|
13
|
-
"commit": "aa6ff59c3664e5e29402debcc1a4d4a65a8e65c1",
|
|
14
|
-
"comment": "fix: handle \"defaultValue\""
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
"author": "olfedias@microsoft.com",
|
|
18
|
-
"package": "@fluentui/react-select",
|
|
19
|
-
"commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
|
|
20
|
-
"comment": "chore: Update @fluentui/react-icons to latest version"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"author": "Humberto.Morimoto@microsoft.com",
|
|
24
|
-
"package": "@fluentui/react-select",
|
|
25
|
-
"commit": "09f58dcbef2306875046261dc0b7821283ccc287",
|
|
26
|
-
"comment": "chore: Using ::before and ::after instead of :before and :after."
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"author": "sarah.higley@microsoft.com",
|
|
30
|
-
"package": "@fluentui/react-select",
|
|
31
|
-
"commit": "66dc6e9684baf35e7930622e1f3accdb51ba8516",
|
|
32
|
-
"comment": "add custom onChange with value data to react-select"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"author": "sarah.higley@microsoft.com",
|
|
36
|
-
"package": "@fluentui/react-select",
|
|
37
|
-
"commit": "0d4794d3924d648c788993e087a48dd45fe10a1b",
|
|
38
|
-
"comment": "Remove inline prop from Select"
|
|
39
|
-
},
|
|
40
10
|
{
|
|
41
11
|
"author": "beachball",
|
|
42
12
|
"package": "@fluentui/react-select",
|
|
43
|
-
"comment": "Bump @fluentui/react-
|
|
44
|
-
"commit": "
|
|
13
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
14
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
45
15
|
}
|
|
46
16
|
]
|
|
47
17
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue, 21 Jun 2022
|
|
3
|
+
This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [
|
|
7
|
+
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.3)
|
|
8
8
|
|
|
9
|
-
Tue, 21 Jun 2022
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.2..@fluentui/react-
|
|
9
|
+
Tue, 21 Jun 2022 17:09:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.2..@fluentui/react-select_v9.0.0-beta.3)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
|
|
16
|
-
- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
|
|
17
|
-
- add custom onChange with value data to react-select ([PR #23399](https://github.com/microsoft/fluentui/pull/23399) by sarah.higley@microsoft.com)
|
|
18
|
-
- Remove inline prop from Select ([PR #23416](https://github.com/microsoft/fluentui/pull/23416) by sarah.higley@microsoft.com)
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220621-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/20a6af73552945512cd13938d9f74b329961711c) by beachball)
|
|
14
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
20
15
|
|
|
21
16
|
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.2)
|
|
22
17
|
|
package/Spec.md
CHANGED
|
@@ -81,11 +81,11 @@ Select with grouped options:
|
|
|
81
81
|
</Select>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
-
Select with appearance and size set:
|
|
84
|
+
Inline Select with appearance and size set:
|
|
85
85
|
|
|
86
86
|
```tsx
|
|
87
87
|
<label htmlFor="selectID">Choose a color</label>
|
|
88
|
-
<Select id="selectID" appearance="filledDarker" size="small">
|
|
88
|
+
<Select id="selectID" appearance="filledDarker" size="small" inline>
|
|
89
89
|
<option>Red</option>
|
|
90
90
|
<option>Green</option>
|
|
91
91
|
<option>Blue</option>
|
|
@@ -105,6 +105,11 @@ Disabled Select with second option selected:
|
|
|
105
105
|
|
|
106
106
|
## Variants
|
|
107
107
|
|
|
108
|
+
### Layout
|
|
109
|
+
|
|
110
|
+
- Block (default)
|
|
111
|
+
- Inline
|
|
112
|
+
|
|
108
113
|
### Size
|
|
109
114
|
|
|
110
115
|
- Small
|
|
@@ -214,7 +219,7 @@ The Select component is a new approach that was not present in `@fluentui/react`
|
|
|
214
219
|
| n/a | headerMessage | optgroup child with `name` |
|
|
215
220
|
| n/a | highlightFirstItemOnOpen | n/a |
|
|
216
221
|
| n/a | highlightedIndex | n/a |
|
|
217
|
-
| n/a | inline |
|
|
222
|
+
| n/a | inline | inline |
|
|
218
223
|
| n/a | inverted | n/a |
|
|
219
224
|
| n/a | loading | n/a |
|
|
220
225
|
| n/a | noResultsMessage | use children |
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
|
|
3
1
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
4
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
@@ -19,17 +17,7 @@ export declare const Select: ForwardRefComponent<SelectProps>;
|
|
|
19
17
|
|
|
20
18
|
export declare const selectClassNames: SlotClassNames<SelectSlots>;
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
* Data passed to the `onChange` callback when a new option is selected.
|
|
24
|
-
*/
|
|
25
|
-
declare type SelectOnChangeData = {
|
|
26
|
-
/**
|
|
27
|
-
* Updated `<select>` value, taken from either the selected option's value prop or inner text.
|
|
28
|
-
*/
|
|
29
|
-
value: string;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {
|
|
20
|
+
export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
|
|
33
21
|
/**
|
|
34
22
|
* Controls the colors and borders of the Select.
|
|
35
23
|
*
|
|
@@ -37,9 +25,12 @@ export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'sel
|
|
|
37
25
|
*/
|
|
38
26
|
appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
|
|
39
27
|
/**
|
|
40
|
-
*
|
|
28
|
+
* If true, the Select will have an inline `display`, allowing it to be inline with other content.
|
|
29
|
+
* By default, Select has block layout.
|
|
30
|
+
*
|
|
31
|
+
* @default false
|
|
41
32
|
*/
|
|
42
|
-
|
|
33
|
+
inline?: boolean;
|
|
43
34
|
/**
|
|
44
35
|
* Matches the Input sizes
|
|
45
36
|
*
|
|
@@ -56,7 +47,7 @@ export declare type SelectSlots = {
|
|
|
56
47
|
icon: Slot<'span'>;
|
|
57
48
|
};
|
|
58
49
|
|
|
59
|
-
export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
|
|
50
|
+
export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'inline' | 'size'>>;
|
|
60
51
|
|
|
61
52
|
/**
|
|
62
53
|
* Create the state required to render Select.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AACA,SAAO,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":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.types.js","sourceRoot":"../src/","sources":["components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Select.types.js","sourceRoot":"../src/","sources":["components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import 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'> & {\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 * If true, the Select will have an inline `display`, allowing it to be inline with other content.\n * By default, Select has block layout.\n *\n * @default false\n */\n inline?: boolean;\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' | 'inline' | 'size'>>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,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":"../src/"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getPartitionedNativeProps, resolveShorthand
|
|
2
|
+
import { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
3
3
|
import { ChevronDownRegular } from '@fluentui/react-icons';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Select.
|
|
@@ -13,23 +13,22 @@ import { ChevronDownRegular } from '@fluentui/react-icons';
|
|
|
13
13
|
|
|
14
14
|
export const useSelect_unstable = (props, ref) => {
|
|
15
15
|
const {
|
|
16
|
-
defaultValue,
|
|
17
|
-
value,
|
|
18
16
|
select,
|
|
19
17
|
icon,
|
|
20
18
|
root,
|
|
19
|
+
size = 'medium',
|
|
21
20
|
appearance = 'outline',
|
|
22
|
-
|
|
23
|
-
size = 'medium'
|
|
21
|
+
inline = false
|
|
24
22
|
} = props;
|
|
25
23
|
const nativeProps = getPartitionedNativeProps({
|
|
26
24
|
props,
|
|
27
25
|
primarySlotTagName: 'select',
|
|
28
|
-
excludedPropNames: ['appearance', '
|
|
26
|
+
excludedPropNames: ['appearance', 'inline', 'size']
|
|
29
27
|
});
|
|
30
|
-
|
|
28
|
+
return {
|
|
31
29
|
size,
|
|
32
30
|
appearance,
|
|
31
|
+
inline,
|
|
33
32
|
components: {
|
|
34
33
|
root: 'span',
|
|
35
34
|
select: 'select',
|
|
@@ -38,8 +37,6 @@ export const useSelect_unstable = (props, ref) => {
|
|
|
38
37
|
select: resolveShorthand(select, {
|
|
39
38
|
required: true,
|
|
40
39
|
defaultProps: {
|
|
41
|
-
defaultValue,
|
|
42
|
-
value,
|
|
43
40
|
ref,
|
|
44
41
|
...nativeProps.primary
|
|
45
42
|
}
|
|
@@ -55,11 +52,5 @@ export const useSelect_unstable = (props, ref) => {
|
|
|
55
52
|
defaultProps: nativeProps.root
|
|
56
53
|
})
|
|
57
54
|
};
|
|
58
|
-
state.select.onChange = useEventCallback(event => {
|
|
59
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
60
|
-
value: event.target.value
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
return state;
|
|
64
55
|
};
|
|
65
56
|
//# sourceMappingURL=useSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,EAAoC,gBAApC,
|
|
1
|
+
{"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,EAAoC,gBAApC,QAA4D,2BAA5D;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;AACvG,QAAM;AAAE,IAAA,MAAF;AAAU,IAAA,IAAV;AAAgB,IAAA,IAAhB;AAAsB,IAAA,IAAI,GAAG,QAA7B;AAAuC,IAAA,UAAU,GAAG,SAApD;AAA+D,IAAA,MAAM,GAAG;AAAxE,MAAkF,KAAxF;AAEA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,QAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,YAAD,EAAe,QAAf,EAAyB,MAAzB;AAHyB,GAAD,CAA7C;AAMA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAFK;AAGL,IAAA,MAHK;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,IAAI,EAAE;AAHI,KAJP;AASL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE,IADqB;AAE/B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,WAAG,WAAW,CAAC;AAFH;AAFiB,KAAT,CATnB;AAgBL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AAAZ;AAFa,KAAP,CAhBjB;AAoBL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAP;AApBjB,GAAP;AAyBD,CAlCM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand } 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 { select, icon, root, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'inline', 'size'],\n });\n\n return {\n size,\n appearance,\n inline,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\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"],"sourceRoot":"../src/"}
|
|
@@ -34,29 +34,29 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
34
34
|
"Eh141a": "flvyvdh",
|
|
35
35
|
"Bahqtrf": "fk6fouc",
|
|
36
36
|
"qhf8xq": "f10pi13n",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
37
|
+
"Bb096xy": "fw24s6l",
|
|
38
|
+
"frdscb": ["fvxed1z", "f1j2a01o"],
|
|
39
|
+
"B9nohqn": ["f1j2a01o", "fvxed1z"],
|
|
40
|
+
"B1dhsta": ["f1pvm60u", "f179ivkp"],
|
|
41
|
+
"Bjdmjzx": ["f179ivkp", "f1pvm60u"],
|
|
42
|
+
"oqd9ik": "ffdc0f3",
|
|
43
|
+
"Bs6t6z0": "fqc6z8f",
|
|
44
|
+
"mpb1vu": "feciixf",
|
|
45
|
+
"Hdbjpj": "f11ef69",
|
|
46
|
+
"Bj55yzk": "fw2wsqs",
|
|
47
|
+
"jc51t6": ["f1cvlmu2", "f15lyva8"],
|
|
48
|
+
"cnmfks": ["f15lyva8", "f1cvlmu2"],
|
|
49
|
+
"xn0juu": "f1lmmjng",
|
|
50
|
+
"wbfbqe": "fopw4to",
|
|
51
|
+
"mafdb0": "f1jogkkn",
|
|
52
|
+
"s1xtto": "f1hql58f",
|
|
53
53
|
"umuwi5": "fjw5xc1",
|
|
54
54
|
"Blcqepd": "f1xdyd5c",
|
|
55
55
|
"nplu4u": "fatpbeo",
|
|
56
56
|
"Bioka5o": "fb7uyps"
|
|
57
57
|
}
|
|
58
58
|
}, {
|
|
59
|
-
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".
|
|
59
|
+
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".fw24s6l:after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".feciixf:after{height:var(--borderRadiusMedium);}", ".f11ef69:after{position:absolute;}", ".fw2wsqs:after{bottom:0;}", ".f1cvlmu2:after{left:0;}", ".f15lyva8:after{right:0;}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f:after{transition-delay:var(--curveAccelerateMid);}"],
|
|
60
60
|
"w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}"]
|
|
61
61
|
});
|
|
62
62
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,gBAAgB,GAAgC;
|
|
1
|
+
{"version":3,"sources":["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// TODO: 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/* 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\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\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 flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\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 paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\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\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 && selectStyles.disabled,\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":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AACA,SAAO,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":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,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":"../src/"}
|
|
@@ -23,23 +23,22 @@ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
|
23
23
|
|
|
24
24
|
const useSelect_unstable = (props, ref) => {
|
|
25
25
|
const {
|
|
26
|
-
defaultValue,
|
|
27
|
-
value,
|
|
28
26
|
select,
|
|
29
27
|
icon,
|
|
30
28
|
root,
|
|
29
|
+
size = 'medium',
|
|
31
30
|
appearance = 'outline',
|
|
32
|
-
|
|
33
|
-
size = 'medium'
|
|
31
|
+
inline = false
|
|
34
32
|
} = props;
|
|
35
33
|
const nativeProps = react_utilities_1.getPartitionedNativeProps({
|
|
36
34
|
props,
|
|
37
35
|
primarySlotTagName: 'select',
|
|
38
|
-
excludedPropNames: ['appearance', '
|
|
36
|
+
excludedPropNames: ['appearance', 'inline', 'size']
|
|
39
37
|
});
|
|
40
|
-
|
|
38
|
+
return {
|
|
41
39
|
size,
|
|
42
40
|
appearance,
|
|
41
|
+
inline,
|
|
43
42
|
components: {
|
|
44
43
|
root: 'span',
|
|
45
44
|
select: 'select',
|
|
@@ -48,8 +47,6 @@ const useSelect_unstable = (props, ref) => {
|
|
|
48
47
|
select: react_utilities_1.resolveShorthand(select, {
|
|
49
48
|
required: true,
|
|
50
49
|
defaultProps: {
|
|
51
|
-
defaultValue,
|
|
52
|
-
value,
|
|
53
50
|
ref,
|
|
54
51
|
...nativeProps.primary
|
|
55
52
|
}
|
|
@@ -65,12 +62,6 @@ const useSelect_unstable = (props, ref) => {
|
|
|
65
62
|
defaultProps: nativeProps.root
|
|
66
63
|
})
|
|
67
64
|
};
|
|
68
|
-
state.select.onChange = react_utilities_1.useEventCallback(event => {
|
|
69
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
70
|
-
value: event.target.value
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
return state;
|
|
74
65
|
};
|
|
75
66
|
|
|
76
67
|
exports.useSelect_unstable = useSelect_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["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;AACvG,QAAM;AAAE,IAAA,MAAF;AAAU,IAAA,IAAV;AAAgB,IAAA,IAAhB;AAAsB,IAAA,IAAI,GAAG,QAA7B;AAAuC,IAAA,UAAU,GAAG,SAApD;AAA+D,IAAA,MAAM,GAAG;AAAxE,MAAkF,KAAxF;AAEA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,QAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,YAAD,EAAe,QAAf,EAAyB,MAAzB;AAHyB,GAA1B,CAApB;AAMA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAFK;AAGL,IAAA,MAHK;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,IAAI,EAAE;AAHI,KAJP;AASL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE,IADqB;AAE/B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,WAAG,WAAW,CAAC;AAFH;AAFiB,KAAzB,CATH;AAgBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;AAAZ;AAFa,KAAvB,CAhBD;AAoBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAvB;AApBD,GAAP;AAyBD,CAlCM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand } 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 { select, icon, root, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'inline', 'size'],\n });\n\n return {\n size,\n appearance,\n inline,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\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"],"sourceRoot":"../src/"}
|
|
@@ -43,29 +43,29 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
43
43
|
"Eh141a": "flvyvdh",
|
|
44
44
|
"Bahqtrf": "fk6fouc",
|
|
45
45
|
"qhf8xq": "f10pi13n",
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
46
|
+
"Bb096xy": "fw24s6l",
|
|
47
|
+
"frdscb": ["fvxed1z", "f1j2a01o"],
|
|
48
|
+
"B9nohqn": ["f1j2a01o", "fvxed1z"],
|
|
49
|
+
"B1dhsta": ["f1pvm60u", "f179ivkp"],
|
|
50
|
+
"Bjdmjzx": ["f179ivkp", "f1pvm60u"],
|
|
51
|
+
"oqd9ik": "ffdc0f3",
|
|
52
|
+
"Bs6t6z0": "fqc6z8f",
|
|
53
|
+
"mpb1vu": "feciixf",
|
|
54
|
+
"Hdbjpj": "f11ef69",
|
|
55
|
+
"Bj55yzk": "fw2wsqs",
|
|
56
|
+
"jc51t6": ["f1cvlmu2", "f15lyva8"],
|
|
57
|
+
"cnmfks": ["f15lyva8", "f1cvlmu2"],
|
|
58
|
+
"xn0juu": "f1lmmjng",
|
|
59
|
+
"wbfbqe": "fopw4to",
|
|
60
|
+
"mafdb0": "f1jogkkn",
|
|
61
|
+
"s1xtto": "f1hql58f",
|
|
62
62
|
"umuwi5": "fjw5xc1",
|
|
63
63
|
"Blcqepd": "f1xdyd5c",
|
|
64
64
|
"nplu4u": "fatpbeo",
|
|
65
65
|
"Bioka5o": "fb7uyps"
|
|
66
66
|
}
|
|
67
67
|
}, {
|
|
68
|
-
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".
|
|
68
|
+
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".fw24s6l:after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".feciixf:after{height:var(--borderRadiusMedium);}", ".f11ef69:after{position:absolute;}", ".fw2wsqs:after{bottom:0;}", ".f1cvlmu2:after{left:0;}", ".f15lyva8:after{right:0;}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f:after{transition-delay:var(--curveAccelerateMid);}"],
|
|
69
69
|
"w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}"]
|
|
70
70
|
});
|
|
71
71
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;
|
|
1
|
+
{"version":3,"sources":["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// TODO: 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/* 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\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\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 flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\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 paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\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\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 && selectStyles.disabled,\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":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectProps, SelectSlots, SelectState } from './Select';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0-beta.3",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-icons": "^2.0.
|
|
35
|
-
"@fluentui/react-theme": "
|
|
36
|
-
"@fluentui/react-utilities": "
|
|
34
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
35
|
+
"@fluentui/react-theme": "9.0.0-rc.10",
|
|
36
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
37
37
|
"@griffel/react": "1.1.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|