@fluentui/react-select 9.0.0-beta.3 → 9.0.0-beta.6

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.
Files changed (20) hide show
  1. package/CHANGELOG.json +132 -1
  2. package/CHANGELOG.md +42 -2
  3. package/Spec.md +3 -8
  4. package/dist/index.d.ts +16 -7
  5. package/lib/components/Select/Select.js.map +1 -1
  6. package/lib/components/Select/Select.types.js.map +1 -1
  7. package/lib/components/Select/renderSelect.js.map +1 -1
  8. package/lib/components/Select/useSelect.js +15 -6
  9. package/lib/components/Select/useSelect.js.map +1 -1
  10. package/lib/components/Select/useSelectStyles.js +29 -19
  11. package/lib/components/Select/useSelectStyles.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib-commonjs/components/Select/Select.js.map +1 -1
  14. package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
  15. package/lib-commonjs/components/Select/useSelect.js +14 -5
  16. package/lib-commonjs/components/Select/useSelect.js.map +1 -1
  17. package/lib-commonjs/components/Select/useSelectStyles.js +29 -19
  18. package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
  19. package/lib-commonjs/index.js.map +1 -1
  20. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,138 @@
2
2
  "name": "@fluentui/react-select",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 21 Jun 2022 17:09:28 GMT",
5
+ "date": "Thu, 14 Jul 2022 17:03:31 GMT",
6
+ "tag": "@fluentui/react-select_v9.0.0-beta.6",
7
+ "version": "9.0.0-beta.6",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "ololubek@microsoft.com",
12
+ "package": "@fluentui/react-select",
13
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
14
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-select",
19
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
20
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-select",
25
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
26
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 28 Jun 2022 17:39:51 GMT",
33
+ "tag": "@fluentui/react-select_v9.0.0-beta.5",
34
+ "version": "9.0.0-beta.5",
35
+ "comments": {
36
+ "prerelease": [
37
+ {
38
+ "author": "lingfangao@hotmail.com",
39
+ "package": "@fluentui/react-select",
40
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
41
+ "comment": "fix: Use caret dependency range for Griffel"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-select",
46
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
47
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
48
+ }
49
+ ]
50
+ }
51
+ },
52
+ {
53
+ "date": "Tue, 28 Jun 2022 15:13:55 GMT",
54
+ "tag": "@fluentui/react-select_v9.0.0-beta.4",
55
+ "version": "9.0.0-beta.4",
56
+ "comments": {
57
+ "prerelease": [
58
+ {
59
+ "author": "lingfangao@hotmail.com",
60
+ "package": "@fluentui/react-select",
61
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
62
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
63
+ },
64
+ {
65
+ "author": "sarah.higley@microsoft.com",
66
+ "package": "@fluentui/react-select",
67
+ "commit": "81a5050ea49ca9dfe6eff602d3e680901ce39254",
68
+ "comment": "export change data type from select"
69
+ },
70
+ {
71
+ "author": "olfedias@microsoft.com",
72
+ "package": "@fluentui/react-select",
73
+ "commit": "aa6ff59c3664e5e29402debcc1a4d4a65a8e65c1",
74
+ "comment": "fix: handle \"defaultValue\""
75
+ },
76
+ {
77
+ "author": "lingfangao@hotmail.com",
78
+ "package": "@fluentui/react-select",
79
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
80
+ "comment": "Bump Griffel dependencies"
81
+ },
82
+ {
83
+ "author": "olfedias@microsoft.com",
84
+ "package": "@fluentui/react-select",
85
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
86
+ "comment": "chore: Update @fluentui/react-icons to latest version"
87
+ },
88
+ {
89
+ "author": "Humberto.Morimoto@microsoft.com",
90
+ "package": "@fluentui/react-select",
91
+ "commit": "09f58dcbef2306875046261dc0b7821283ccc287",
92
+ "comment": "chore: Using ::before and ::after instead of :before and :after."
93
+ },
94
+ {
95
+ "author": "sarah.higley@microsoft.com",
96
+ "package": "@fluentui/react-select",
97
+ "commit": "66dc6e9684baf35e7930622e1f3accdb51ba8516",
98
+ "comment": "add custom onChange with value data to react-select"
99
+ },
100
+ {
101
+ "author": "sarah.higley@microsoft.com",
102
+ "package": "@fluentui/react-select",
103
+ "commit": "0d4794d3924d648c788993e087a48dd45fe10a1b",
104
+ "comment": "Remove inline prop from Select"
105
+ },
106
+ {
107
+ "author": "beachball",
108
+ "package": "@fluentui/react-select",
109
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
110
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
111
+ },
112
+ {
113
+ "author": "beachball",
114
+ "package": "@fluentui/react-select",
115
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
116
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
117
+ },
118
+ {
119
+ "author": "beachball",
120
+ "package": "@fluentui/react-select",
121
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
122
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
123
+ }
124
+ ],
125
+ "none": [
126
+ {
127
+ "author": "mgodbolt@microsoft.com",
128
+ "package": "@fluentui/react-select",
129
+ "commit": "e4c4cd20632f733df2985f5a68033181ccc031c4",
130
+ "comment": "chore: update select stories to use index based approach"
131
+ }
132
+ ]
133
+ }
134
+ },
135
+ {
136
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
6
137
  "tag": "@fluentui/react-select_v9.0.0-beta.3",
7
138
  "version": "9.0.0-beta.3",
8
139
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,52 @@
1
1
  # Change Log - @fluentui/react-select
2
2
 
3
- This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 14 Jul 2022 17:03:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.6)
8
+
9
+ Thu, 14 Jul 2022 17:03:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.5..@fluentui/react-select_v9.0.0-beta.6)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
16
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
17
+
18
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.5)
19
+
20
+ Tue, 28 Jun 2022 17:39:51 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.4..@fluentui/react-select_v9.0.0-beta.5)
22
+
23
+ ### Changes
24
+
25
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
27
+
28
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.4)
29
+
30
+ Tue, 28 Jun 2022 15:13:55 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.3..@fluentui/react-select_v9.0.0-beta.4)
32
+
33
+ ### Changes
34
+
35
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
36
+ - export change data type from select ([PR #23701](https://github.com/microsoft/fluentui/pull/23701) by sarah.higley@microsoft.com)
37
+ - fix: handle "defaultValue" ([PR #23463](https://github.com/microsoft/fluentui/pull/23463) by olfedias@microsoft.com)
38
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
39
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
40
+ - chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
41
+ - add custom onChange with value data to react-select ([PR #23399](https://github.com/microsoft/fluentui/pull/23399) by sarah.higley@microsoft.com)
42
+ - Remove inline prop from Select ([PR #23416](https://github.com/microsoft/fluentui/pull/23416) by sarah.higley@microsoft.com)
43
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
44
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
45
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
46
+
7
47
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.3)
8
48
 
9
- Tue, 21 Jun 2022 17:09:28 GMT
49
+ Thu, 23 Jun 2022 14:25:31 GMT
10
50
  [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
51
 
12
52
  ### Changes
package/Spec.md CHANGED
@@ -81,11 +81,11 @@ Select with grouped options:
81
81
  </Select>
82
82
  ```
83
83
 
84
- Inline Select with appearance and size set:
84
+ 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" inline>
88
+ <Select id="selectID" appearance="filledDarker" size="small">
89
89
  <option>Red</option>
90
90
  <option>Green</option>
91
91
  <option>Blue</option>
@@ -105,11 +105,6 @@ Disabled Select with second option selected:
105
105
 
106
106
  ## Variants
107
107
 
108
- ### Layout
109
-
110
- - Block (default)
111
- - Inline
112
-
113
108
  ### Size
114
109
 
115
110
  - Small
@@ -219,7 +214,7 @@ The Select component is a new approach that was not present in `@fluentui/react`
219
214
  | n/a | headerMessage | optgroup child with `name` |
220
215
  | n/a | highlightFirstItemOnOpen | n/a |
221
216
  | n/a | highlightedIndex | n/a |
222
- | n/a | inline | inline |
217
+ | n/a | inline | use custom styles |
223
218
  | n/a | inverted | n/a |
224
219
  | n/a | loading | n/a |
225
220
  | n/a | noResultsMessage | use children |
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import type { ComponentProps } from '@fluentui/react-utilities';
2
4
  import type { ComponentState } from '@fluentui/react-utilities';
3
5
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -17,7 +19,17 @@ export declare const Select: ForwardRefComponent<SelectProps>;
17
19
 
18
20
  export declare const selectClassNames: SlotClassNames<SelectSlots>;
19
21
 
20
- export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
22
+ /**
23
+ * Data passed to the `onChange` callback when a new option is selected.
24
+ */
25
+ export 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'> & {
21
33
  /**
22
34
  * Controls the colors and borders of the Select.
23
35
  *
@@ -25,12 +37,9 @@ export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'sel
25
37
  */
26
38
  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
27
39
  /**
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
40
+ * Called when the user changes the select element's value by selecting an option.
32
41
  */
33
- inline?: boolean;
42
+ onChange?: (ev: React_2.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;
34
43
  /**
35
44
  * Matches the Input sizes
36
45
  *
@@ -47,7 +56,7 @@ export declare type SelectSlots = {
47
56
  icon: Slot<'span'>;
48
57
  };
49
58
 
50
- export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'inline' | 'size'>>;
59
+ export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
51
60
 
52
61
  /**
53
62
  * Create the state required to render Select.
package/lib/components/Select/Select.js.map CHANGED
@@ -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;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
+ {"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;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":"../src/"}
package/lib/components/Select/Select.types.js.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"file":"Select.types.js","sourceRoot":"../src/","sources":["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"]}
package/lib/components/Select/renderSelect.js.map CHANGED
@@ -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;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
+ {"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;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":"../src/"}
package/lib/components/Select/useSelect.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';
2
+ import { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
3
3
  import { ChevronDownRegular } from '@fluentui/react-icons';
4
4
  /**
5
5
  * Create the state required to render Select.
@@ -13,22 +13,23 @@ import { ChevronDownRegular } from '@fluentui/react-icons';
13
13
 
14
14
  export const useSelect_unstable = (props, ref) => {
15
15
  const {
16
+ defaultValue,
17
+ value,
16
18
  select,
17
19
  icon,
18
20
  root,
19
- size = 'medium',
20
21
  appearance = 'outline',
21
- inline = false
22
+ onChange,
23
+ size = 'medium'
22
24
  } = props;
23
25
  const nativeProps = getPartitionedNativeProps({
24
26
  props,
25
27
  primarySlotTagName: 'select',
26
- excludedPropNames: ['appearance', 'inline', 'size']
28
+ excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
27
29
  });
28
- return {
30
+ const state = {
29
31
  size,
30
32
  appearance,
31
- inline,
32
33
  components: {
33
34
  root: 'span',
34
35
  select: 'select',
@@ -37,6 +38,8 @@ export const useSelect_unstable = (props, ref) => {
37
38
  select: resolveShorthand(select, {
38
39
  required: true,
39
40
  defaultProps: {
41
+ defaultValue,
42
+ value,
40
43
  ref,
41
44
  ...nativeProps.primary
42
45
  }
@@ -52,5 +55,11 @@ export const useSelect_unstable = (props, ref) => {
52
55
  defaultProps: nativeProps.root
53
56
  })
54
57
  };
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;
55
64
  };
56
65
  //# sourceMappingURL=useSelect.js.map
package/lib/components/Select/useSelect.js.map CHANGED
@@ -1 +1 @@
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/"}
1
+ {"version":3,"sources":["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":"../src/"}
package/lib/components/Select/useSelectStyles.js CHANGED
@@ -34,29 +34,29 @@ const useRootStyles = /*#__PURE__*/__styles({
34
34
  "Eh141a": "flvyvdh",
35
35
  "Bahqtrf": "fk6fouc",
36
36
  "qhf8xq": "f10pi13n",
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",
37
+ "h62rwi": "f7ll8cq",
38
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
39
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
40
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
41
+ "B4j8arr": ["f53nyzz", "f18vqdqu"],
42
+ "li1rpt": "f1gw3sf2",
43
+ "Bsft5z2": "f13zj6fq",
44
+ "Dlnsje": "fhwjr99",
45
+ "E3zdtr": "f1mdlcz9",
46
+ "By385i5": "fo72kxq",
47
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
48
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
49
+ "b1kco5": "f1yk9hq",
50
+ "Ba2ppi3": "fhwpy7i",
51
+ "F2fol1": "f14ee0xe",
52
+ "lck23g": "f1xhbsuh",
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;}", ".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);}"],
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;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::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
 
@@ -173,7 +173,15 @@ const useSelectStyles = /*#__PURE__*/__styles({
173
173
  }, {
174
174
  "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
175
175
  "f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
176
- "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
176
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
177
+ "m": "(forced-colors: active)"
178
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
179
+ "m": "(forced-colors: active)"
180
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
181
+ "m": "(forced-colors: active)"
182
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
183
+ "m": "(forced-colors: active)"
184
+ }]]
177
185
  });
178
186
 
179
187
  const useIconStyles = /*#__PURE__*/__styles({
@@ -213,7 +221,9 @@ const useIconStyles = /*#__PURE__*/__styles({
213
221
  }
214
222
  }, {
215
223
  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"],
216
- "t": ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}"]
224
+ "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
225
+ "m": "(forced-colors: active)"
226
+ }]]
217
227
  });
218
228
  /**
219
229
  * Apply styling to the Select slots based on the state
package/lib/components/Select/useSelectStyles.js.map CHANGED
@@ -1 +1 @@
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
+ {"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/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP","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/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP","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"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Select/Select.js.map CHANGED
@@ -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;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
+ {"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;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":"../src/"}
package/lib-commonjs/components/Select/renderSelect.js.map CHANGED
@@ -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;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/"}
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;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":"../src/"}
package/lib-commonjs/components/Select/useSelect.js CHANGED
@@ -23,22 +23,23 @@ 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,
26
28
  select,
27
29
  icon,
28
30
  root,
29
- size = 'medium',
30
31
  appearance = 'outline',
31
- inline = false
32
+ onChange,
33
+ size = 'medium'
32
34
  } = props;
33
35
  const nativeProps = react_utilities_1.getPartitionedNativeProps({
34
36
  props,
35
37
  primarySlotTagName: 'select',
36
- excludedPropNames: ['appearance', 'inline', 'size']
38
+ excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
37
39
  });
38
- return {
40
+ const state = {
39
41
  size,
40
42
  appearance,
41
- inline,
42
43
  components: {
43
44
  root: 'span',
44
45
  select: 'select',
@@ -47,6 +48,8 @@ const useSelect_unstable = (props, ref) => {
47
48
  select: react_utilities_1.resolveShorthand(select, {
48
49
  required: true,
49
50
  defaultProps: {
51
+ defaultValue,
52
+ value,
50
53
  ref,
51
54
  ...nativeProps.primary
52
55
  }
@@ -62,6 +65,12 @@ const useSelect_unstable = (props, ref) => {
62
65
  defaultProps: nativeProps.root
63
66
  })
64
67
  };
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;
65
74
  };
66
75
 
67
76
  exports.useSelect_unstable = useSelect_unstable;
package/lib-commonjs/components/Select/useSelect.js.map CHANGED
@@ -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;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/"}
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;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":"../src/"}
package/lib-commonjs/components/Select/useSelectStyles.js CHANGED
@@ -43,29 +43,29 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
43
43
  "Eh141a": "flvyvdh",
44
44
  "Bahqtrf": "fk6fouc",
45
45
  "qhf8xq": "f10pi13n",
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",
46
+ "h62rwi": "f7ll8cq",
47
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
48
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
49
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
50
+ "B4j8arr": ["f53nyzz", "f18vqdqu"],
51
+ "li1rpt": "f1gw3sf2",
52
+ "Bsft5z2": "f13zj6fq",
53
+ "Dlnsje": "fhwjr99",
54
+ "E3zdtr": "f1mdlcz9",
55
+ "By385i5": "fo72kxq",
56
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
57
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
58
+ "b1kco5": "f1yk9hq",
59
+ "Ba2ppi3": "fhwpy7i",
60
+ "F2fol1": "f14ee0xe",
61
+ "lck23g": "f1xhbsuh",
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;}", ".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);}"],
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;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::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
 
@@ -182,7 +182,15 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
182
182
  }, {
183
183
  "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
184
184
  "f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
185
- "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
185
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
186
+ "m": "(forced-colors: active)"
187
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
188
+ "m": "(forced-colors: active)"
189
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
190
+ "m": "(forced-colors: active)"
191
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
192
+ "m": "(forced-colors: active)"
193
+ }]]
186
194
  });
187
195
 
188
196
  const useIconStyles = /*#__PURE__*/react_1.__styles({
@@ -222,7 +230,9 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
222
230
  }
223
231
  }, {
224
232
  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"],
225
- "t": ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}"]
233
+ "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
234
+ "m": "(forced-colors: active)"
235
+ }]]
226
236
  });
227
237
  /**
228
238
  * Apply styling to the Select slots based on the state
package/lib-commonjs/components/Select/useSelectStyles.js.map CHANGED
@@ -1 +1 @@
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
+ {"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/"}
package/lib-commonjs/index.js.map CHANGED
@@ -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;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/"}
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;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","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"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-select",
3
- "version": "9.0.0-beta.3",
3
+ "version": "9.0.0-beta.6",
4
4
  "description": "Fluent UI React Select component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,13 +28,13 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.8"
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.11"
32
32
  },
33
33
  "dependencies": {
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
- "@griffel/react": "1.1.0",
34
+ "@fluentui/react-icons": "^2.0.175",
35
+ "@fluentui/react-theme": "^9.0.0",
36
+ "@fluentui/react-utilities": "^9.0.1-0",
37
+ "@griffel/react": "^1.2.0",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {