@fluentui/react-select 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/SelectField.js +1 -1
- package/lib/SelectField.js.map +1 -1
- package/lib/components/Select/Select.js +6 -6
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Select/Select.types.js +1 -1
- package/lib/components/Select/Select.types.js.map +1 -1
- package/lib/components/Select/index.js +5 -5
- package/lib/components/Select/index.js.map +1 -1
- package/lib/components/Select/renderSelect.js +9 -3
- package/lib/components/Select/renderSelect.js.map +1 -1
- package/lib/components/Select/useSelect.js +13 -12
- package/lib/components/Select/useSelect.js.map +1 -1
- package/lib/components/Select/useSelectStyles.js +13 -13
- package/lib/components/Select/useSelectStyles.js.map +1 -1
- package/lib/components/SelectField/SelectField.js +3 -2
- package/lib/components/SelectField/SelectField.js.map +1 -1
- package/lib/components/SelectField/index.js +1 -1
- package/lib/components/SelectField/index.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Select.js +4 -5
- package/lib-commonjs/Select.js.map +1 -1
- package/lib-commonjs/SelectField.js +4 -5
- package/lib-commonjs/SelectField.js.map +1 -1
- package/lib-commonjs/components/Select/Select.js +20 -19
- package/lib-commonjs/components/Select/Select.js.map +1 -1
- package/lib-commonjs/components/Select/Select.types.js +2 -5
- package/lib-commonjs/components/Select/Select.types.js.map +1 -1
- package/lib-commonjs/components/Select/index.js +8 -9
- package/lib-commonjs/components/Select/index.js.map +1 -1
- package/lib-commonjs/components/Select/renderSelect.js +22 -13
- package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelect.js +69 -59
- package/lib-commonjs/components/Select/useSelect.js.map +1 -1
- package/lib-commonjs/components/Select/useSelectStyles.js +272 -589
- package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/components/SelectField/SelectField.js +11 -17
- package/lib-commonjs/components/SelectField/SelectField.js.map +1 -1
- package/lib-commonjs/components/SelectField/index.js +4 -5
- package/lib-commonjs/components/SelectField/index.js.map +1 -1
- package/lib-commonjs/index.js +49 -21
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
- package/.swcrc +0 -39
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-select_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 21 Mar 2023 04:49:41 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v0.0.0-nightly-20230321-0440.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230321-0440.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-select",
|
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230321-0440.1",
|
|
20
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-select",
|
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1",
|
|
26
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-select",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1",
|
|
32
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-select",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1",
|
|
38
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-select",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1",
|
|
44
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 04:49:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230321-0440.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v0.0.0-nightly-20230321-0440.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.4..@fluentui/react-select_v0.0.0-nightly-
|
|
9
|
+
Tue, 21 Mar 2023 04:49:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.4..@fluentui/react-select_v0.0.0-nightly-20230321-0440.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.4)
|
|
22
22
|
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './components/Select/index';
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/Select.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Select/index';\n"]}
|
package/lib/SelectField.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './components/SelectField/index';
|
|
2
2
|
//# sourceMappingURL=SelectField.js.map
|
package/lib/SelectField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/SelectField.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SelectField/index';\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { useSelect_unstable } from
|
|
3
|
-
import { renderSelect_unstable } from
|
|
4
|
-
import { useSelectStyles_unstable } from
|
|
5
|
-
import { useCustomStyleHooks_unstable } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useSelect_unstable } from './useSelect';
|
|
3
|
+
import { renderSelect_unstable } from './renderSelect';
|
|
4
|
+
import { useSelectStyles_unstable } from './useSelectStyles';
|
|
5
|
+
import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
7
7
|
* Select component
|
|
8
8
|
*/
|
|
@@ -15,5 +15,5 @@ export const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
15
15
|
useCustomStyles(state);
|
|
16
16
|
return renderSelect_unstable(state);
|
|
17
17
|
});
|
|
18
|
-
Select.displayName =
|
|
18
|
+
Select.displayName = 'Select';
|
|
19
19
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHooks_unstable","Select","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHooks_unstable","Select","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n const { useSelectStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,mBAAmB;AAG5D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGR,kBAAkB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE5CL,wBAAwB,CAACM,KAAK,CAAC;EAE/B,MAAM;IAAEN,wBAAwB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACpFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,qBAAqB,CAACO,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACM,WAAW,GAAG,QAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Select.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Called when the user changes the select element's value by selecting an option.\n */\n onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n /**\n * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n */\n value: string;\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
1
|
+
export * from './Select';
|
|
2
|
+
export * from './Select.types';
|
|
3
|
+
export * from './renderSelect';
|
|
4
|
+
export * from './useSelect';
|
|
5
|
+
export * from './useSelectStyles';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getSlots } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Select
|
|
5
5
|
*/
|
|
@@ -8,6 +8,12 @@ export const renderSelect_unstable = state => {
|
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
10
|
} = getSlots(state);
|
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
|
12
|
+
...slotProps.root
|
|
13
|
+
}, /*#__PURE__*/React.createElement(slots.select, {
|
|
14
|
+
...slotProps.select
|
|
15
|
+
}, slotProps.select.children), /*#__PURE__*/React.createElement(slots.icon, {
|
|
16
|
+
...slotProps.icon
|
|
17
|
+
}));
|
|
12
18
|
};
|
|
13
19
|
//# sourceMappingURL=renderSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderSelect_unstable","state","slots","slotProps","createElement","root","select","children","icon"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderSelect_unstable","state","slots","slotProps","createElement","root","select","children","icon"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EACzD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,GAAGH,SAAS,CAACG,MAAM,CAACC,QAAQ,CAAgB,eAC9ET,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACvB;AAEjB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getPartitionedNativeProps, resolveShorthand, useEventCallback } from
|
|
3
|
-
import { ChevronDownRegular } from
|
|
4
|
-
import { useOverrides_unstable as useOverrides } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
+
import { ChevronDownRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render Select.
|
|
7
7
|
*
|
|
@@ -12,6 +12,7 @@ import { useOverrides_unstable as useOverrides } from "@fluentui/react-shared-co
|
|
|
12
12
|
* @param ref - reference to the `<select>` element in Select
|
|
13
13
|
*/
|
|
14
14
|
export const useSelect_unstable = (props, ref) => {
|
|
15
|
+
var _a;
|
|
15
16
|
const overrides = useOverrides();
|
|
16
17
|
const {
|
|
17
18
|
defaultValue,
|
|
@@ -19,22 +20,22 @@ export const useSelect_unstable = (props, ref) => {
|
|
|
19
20
|
select,
|
|
20
21
|
icon,
|
|
21
22
|
root,
|
|
22
|
-
appearance = overrides.inputDefaultAppearance
|
|
23
|
+
appearance = (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline',
|
|
23
24
|
onChange,
|
|
24
|
-
size =
|
|
25
|
+
size = 'medium'
|
|
25
26
|
} = props;
|
|
26
27
|
const nativeProps = getPartitionedNativeProps({
|
|
27
28
|
props,
|
|
28
|
-
primarySlotTagName:
|
|
29
|
-
excludedPropNames: [
|
|
29
|
+
primarySlotTagName: 'select',
|
|
30
|
+
excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
|
|
30
31
|
});
|
|
31
32
|
const state = {
|
|
32
33
|
size,
|
|
33
34
|
appearance,
|
|
34
35
|
components: {
|
|
35
|
-
root:
|
|
36
|
-
select:
|
|
37
|
-
icon:
|
|
36
|
+
root: 'span',
|
|
37
|
+
select: 'select',
|
|
38
|
+
icon: 'span'
|
|
38
39
|
},
|
|
39
40
|
select: resolveShorthand(select, {
|
|
40
41
|
required: true,
|
|
@@ -57,7 +58,7 @@ export const useSelect_unstable = (props, ref) => {
|
|
|
57
58
|
})
|
|
58
59
|
};
|
|
59
60
|
state.select.onChange = useEventCallback(event => {
|
|
60
|
-
onChange
|
|
61
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
61
62
|
value: event.target.value
|
|
62
63
|
});
|
|
63
64
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getPartitionedNativeProps","resolveShorthand","useEventCallback","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","required","defaultProps","primary","children","createElement","event","target"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getPartitionedNativeProps","resolveShorthand","useEventCallback","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","defaultValue","value","select","icon","root","appearance","_a","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","required","defaultProps","primary","children","createElement","event","target"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelect.tsx"],"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';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n const {\n defaultValue,\n value,\n select,\n icon,\n root,\n appearance = overrides.inputDefaultAppearance ?? '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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACzG,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,qBAAqB,IAAIC,YAAY,QAAQ,iCAAiC;AAEvF;;;;;;;;;AASA,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,KAAkB,EAAEC,GAAiC,KAAiB;;EACvG,MAAMC,SAAS,GAAGJ,YAAY,EAAE;EAEhC,MAAM;IACJK,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,IAAI;IACJC,UAAU,GAAG,CAAAC,EAAA,GAAAP,SAAS,CAACQ,sBAAsB,cAAAD,EAAA,cAAAA,EAAA,GAAI,SAAS;IAE1DE,QAAQ;IACRC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,WAAW,GAAGpB,yBAAyB,CAAC;IAC5CO,KAAK;IACLc,kBAAkB,EAAE,QAAQ;IAC5BC,iBAAiB,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO;GAC9E,CAAC;EAEF,MAAMC,KAAK,GAAgB;IACzBJ,IAAI;IACJJ,UAAU;IACVS,UAAU,EAAE;MACVV,IAAI,EAAE,MAAM;MACZF,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE;KACP;IACDD,MAAM,EAAEX,gBAAgB,CAACW,MAAM,EAAE;MAC/Ba,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZhB,YAAY;QACZC,KAAK;QACLH,GAAG;QACH,GAAGY,WAAW,CAACO;;KAElB,CAAC;IACFd,IAAI,EAAEZ,gBAAgB,CAACY,IAAI,EAAE;MAC3BY,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QAAEE,QAAQ,eAAE7B,KAAA,CAAA8B,aAAA,CAAC1B,kBAAkB;MAAG;KACjD,CAAC;IACFW,IAAI,EAAEb,gBAAgB,CAACa,IAAI,EAAE;MAC3BW,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAEN,WAAW,CAACN;KAC3B;GACF;EAEDS,KAAK,CAACX,MAAM,CAACM,QAAQ,GAAGhB,gBAAgB,CAAC4B,KAAK,IAAG;IAC/CZ,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGY,KAAK,EAAE;MAAEnB,KAAK,EAAGmB,KAAK,CAACC,MAA4B,CAACpB;IAAK,CAAE,CAAC;EACzE,CAAC,CAAC;EAEF,OAAOY,KAAK;AACd,CAAC"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from
|
|
2
|
-
import { tokens, typographyStyles } from
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
3
|
export const selectClassNames = {
|
|
4
|
-
root:
|
|
5
|
-
select:
|
|
6
|
-
icon:
|
|
4
|
+
root: 'fui-Select',
|
|
5
|
+
select: 'fui-Select__select',
|
|
6
|
+
icon: 'fui-Select__icon'
|
|
7
7
|
};
|
|
8
8
|
const iconSizes = {
|
|
9
|
-
small:
|
|
10
|
-
medium:
|
|
11
|
-
large:
|
|
9
|
+
small: '16px',
|
|
10
|
+
medium: '20px',
|
|
11
|
+
large: '24px'
|
|
12
12
|
};
|
|
13
13
|
//TODO: Should fieldHeights be a set of global design tokens or constants?
|
|
14
14
|
const fieldHeights = {
|
|
15
|
-
small:
|
|
16
|
-
medium:
|
|
17
|
-
large:
|
|
15
|
+
small: '24px',
|
|
16
|
+
medium: '32px',
|
|
17
|
+
large: '40px'
|
|
18
18
|
};
|
|
19
19
|
/* Since the <select> element must span the full width and cannot have children,
|
|
20
20
|
* the right padding needs to be calculated from the sum of the following:
|
|
@@ -279,12 +279,12 @@ export const useSelectStyles_unstable = state => {
|
|
|
279
279
|
appearance
|
|
280
280
|
} = state;
|
|
281
281
|
const disabled = state.select.disabled;
|
|
282
|
-
const invalid = `${state.select[
|
|
282
|
+
const invalid = `${state.select['aria-invalid']}` === 'true';
|
|
283
283
|
const iconStyles = useIconStyles();
|
|
284
284
|
const rootStyles = useRootStyles();
|
|
285
285
|
const selectStyles = useSelectStyles();
|
|
286
286
|
state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
|
|
287
|
-
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance ===
|
|
287
|
+
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
|
|
288
288
|
if (state.icon) {
|
|
289
289
|
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
290
290
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","B3778ie","d9w3h3","Bl18szs","B4j8arr","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","d","m","w","useSelectStyles","Bowrso0","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","Bbusuzp","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["../../../src/components/Select/useSelectStyles.ts"],"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: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","B3778ie","d9w3h3","Bl18szs","B4j8arr","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","d","m","w","useSelectStyles","Bowrso0","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","Bbusuzp","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"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: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
|
2
|
-
import {
|
|
1
|
+
/* eslint-disable deprecation/deprecation */
|
|
2
|
+
import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
3
|
+
import { Select, selectClassNames } from '../../Select';
|
|
3
4
|
/** @deprecated Use Field with Select: `<Field><Select /></Field>` */
|
|
4
5
|
export const selectFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(selectClassNames.root);
|
|
5
6
|
/** @deprecated Use Field with Select: `<Field><Select /></Field>` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Select","selectClassNames","selectFieldClassNames","root","SelectField"],"sources":["
|
|
1
|
+
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Select","selectClassNames","selectFieldClassNames","root","SelectField"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select, selectClassNames, SelectProps } from '../../Select';\n\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport type SelectFieldProps = DeprecatedFieldProps<SelectProps>;\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const selectFieldClassNames = getDeprecatedFieldClassNames(selectClassNames.root);\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = makeDeprecatedField(Select);\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,MAAM,EAAEC,gBAAgB,QAAqB,cAAc;AAIpE;AACA,OAAO,MAAMC,qBAAqB,gBAAGJ,4BAA4B,CAACG,gBAAgB,CAACE,IAAI,CAAC;AACxF;AACA,OAAO,MAAMC,WAAW,gBAA0CL,mBAAmB,CAACC,MAAM,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './SelectField';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './SelectField';\n"]}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Select, selectClassNames, renderSelect_unstable, useSelectStyles_unstable, useSelect_unstable } from
|
|
1
|
+
export { Select, selectClassNames, renderSelect_unstable, useSelectStyles_unstable, useSelect_unstable } from './Select';
|
|
2
2
|
// eslint-disable-next-line deprecation/deprecation
|
|
3
|
-
export { SelectField as SelectField_unstable, selectFieldClassNames } from
|
|
3
|
+
export { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable","SelectField","SelectField_unstable","selectFieldClassNames"],"sources":["
|
|
1
|
+
{"version":3,"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable","SelectField","SelectField_unstable","selectFieldClassNames"],"sources":["../../../../../../../packages/react-components/react-select/src/index.ts"],"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\n// eslint-disable-next-line deprecation/deprecation\nexport { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAGjB;AACA,SAASC,WAAW,IAAIC,oBAAoB,EAAEC,qBAAqB,QAAQ,eAAe"}
|
package/lib-commonjs/Select.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
//# sourceMappingURL=Select.js.map
|
|
8
|
-
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./components/Select/index"), exports);
|
|
9
8
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-select/src/Select.ts"],"sourcesContent":["export * from './components/Select/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
//# sourceMappingURL=SelectField.js.map
|
|
8
|
-
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./components/SelectField/index"), exports);
|
|
9
8
|
//# sourceMappingURL=SelectField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-select/src/SelectField.ts"],"sourcesContent":["export * from './components/SelectField/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,oCAAAC,OAAA"}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "Select", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>Select
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
exports.Select = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const useSelect_1 = /*#__PURE__*/require("./useSelect");
|
|
9
|
+
const renderSelect_1 = /*#__PURE__*/require("./renderSelect");
|
|
10
|
+
const useSelectStyles_1 = /*#__PURE__*/require("./useSelectStyles");
|
|
11
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
12
|
+
/**
|
|
13
|
+
* Select component
|
|
14
|
+
*/
|
|
15
|
+
exports.Select = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
16
|
+
const state = useSelect_1.useSelect_unstable(props, ref);
|
|
17
|
+
useSelectStyles_1.useSelectStyles_unstable(state);
|
|
18
|
+
const {
|
|
19
|
+
useSelectStyles_unstable: useCustomStyles
|
|
20
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
21
|
+
useCustomStyles(state);
|
|
22
|
+
return renderSelect_1.renderSelect_unstable(state);
|
|
21
23
|
});
|
|
22
|
-
Select.displayName =
|
|
23
|
-
|
|
24
|
+
exports.Select.displayName = 'Select';
|
|
24
25
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","useSelect_1","renderSelect_1","useSelectStyles_1","react_shared_contexts_1","exports","Select","forwardRef","props","ref","state","useSelect_unstable","useSelectStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSelect_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n const { useSelectStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,WAAA,gBAAAD,OAAA;AACA,MAAAE,cAAA,gBAAAF,OAAA;AACA,MAAAG,iBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,MAAM,gBAAqCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGT,WAAA,CAAAU,kBAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE5CN,iBAAA,CAAAS,wBAAwB,CAACF,KAAK,CAAC;EAE/B,MAAM;IAAEE,wBAAwB,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACpFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,cAAA,CAAAa,qBAAqB,CAACL,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFL,OAAA,CAAAC,MAAM,CAACU,WAAW,GAAG,QAAQ"}
|