@fluentui/react-select 0.0.0-nightly-20230427-0418.1 → 0.0.0-nightly-20230428-0419.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 +15 -15
- package/CHANGELOG.md +10 -10
- package/package.json +7 -7
- package/dist/index.d.ts +0 -77
- package/lib/Select.js +0 -2
- package/lib/Select.js.map +0 -1
- package/lib/components/Select/Select.js +0 -16
- package/lib/components/Select/Select.js.map +0 -1
- package/lib/components/Select/Select.types.js +0 -2
- package/lib/components/Select/Select.types.js.map +0 -1
- package/lib/components/Select/index.js +0 -6
- package/lib/components/Select/index.js.map +0 -1
- package/lib/components/Select/renderSelect.js +0 -13
- package/lib/components/Select/renderSelect.js.map +0 -1
- package/lib/components/Select/useSelect.js +0 -74
- package/lib/components/Select/useSelect.js.map +0 -1
- package/lib/components/Select/useSelectStyles.js +0 -293
- package/lib/components/Select/useSelectStyles.js.map +0 -1
- package/lib/index.js +0 -2
- package/lib/index.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-select_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 28 Apr 2023 04:25:23 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v0.0.0-nightly-20230428-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230428-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,38 +16,38 @@
|
|
|
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-20230428-0419.1",
|
|
20
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-select",
|
|
25
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230428-0419.1",
|
|
26
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-select",
|
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230428-0419.1",
|
|
32
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-select",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230428-0419.1",
|
|
38
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-select",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230428-0419.1",
|
|
44
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-select",
|
|
49
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230428-0419.1",
|
|
50
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
51
51
|
}
|
|
52
52
|
]
|
|
53
53
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 28 Apr 2023 04:25:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230428-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v0.0.0-nightly-20230428-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.11..@fluentui/react-select_v0.0.0-nightly-
|
|
9
|
+
Fri, 28 Apr 2023 04:25:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.11..@fluentui/react-select_v0.0.0-nightly-20230428-0419.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-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
21
21
|
|
|
22
22
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.11)
|
|
23
23
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230428-0419.1",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,17 +27,17 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230428-0419.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20230428-0419.1",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.196",
|
|
37
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230428-0419.1",
|
|
38
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230428-0419.1",
|
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230428-0419.1",
|
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230428-0419.1",
|
|
41
41
|
"@griffel/react": "^1.5.2",
|
|
42
42
|
"@swc/helpers": "^0.4.14"
|
|
43
43
|
},
|
package/dist/index.d.ts
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
4
|
-
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
6
|
-
import * as React_2 from 'react';
|
|
7
|
-
import type { Slot } from '@fluentui/react-utilities';
|
|
8
|
-
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Render the final JSX of Select
|
|
12
|
-
*/
|
|
13
|
-
export declare const renderSelect_unstable: (state: SelectState) => JSX.Element;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Select component
|
|
17
|
-
*/
|
|
18
|
-
export declare const Select: ForwardRefComponent<SelectProps>;
|
|
19
|
-
|
|
20
|
-
export declare const selectClassNames: SlotClassNames<SelectSlots>;
|
|
21
|
-
|
|
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'> & {
|
|
33
|
-
/**
|
|
34
|
-
* Controls the colors and borders of the Select.
|
|
35
|
-
*
|
|
36
|
-
* @default 'outline'
|
|
37
|
-
*/
|
|
38
|
-
appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
|
|
39
|
-
/**
|
|
40
|
-
* Called when the user changes the select element's value by selecting an option.
|
|
41
|
-
*/
|
|
42
|
-
onChange?: (ev: React_2.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;
|
|
43
|
-
/**
|
|
44
|
-
* Matches the Input sizes
|
|
45
|
-
*
|
|
46
|
-
* @default 'medium'
|
|
47
|
-
*/
|
|
48
|
-
size?: 'small' | 'medium' | 'large';
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export declare type SelectSlots = {
|
|
52
|
-
root: NonNullable<Slot<'span'>>;
|
|
53
|
-
/** Primary slot: the actual `<select>` element */
|
|
54
|
-
select: NonNullable<Slot<'select'>>;
|
|
55
|
-
/** the icon, typically a down arrow */
|
|
56
|
-
icon: Slot<'span'>;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Create the state required to render Select.
|
|
63
|
-
*
|
|
64
|
-
* The returned state can be modified with hooks such as useSelectStyles,
|
|
65
|
-
* before being passed to renderSelect.
|
|
66
|
-
*
|
|
67
|
-
* @param props - props from this instance of Select
|
|
68
|
-
* @param ref - reference to the `<select>` element in Select
|
|
69
|
-
*/
|
|
70
|
-
export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Apply styling to the Select slots based on the state
|
|
74
|
-
*/
|
|
75
|
-
export declare const useSelectStyles_unstable: (state: SelectState) => SelectState;
|
|
76
|
-
|
|
77
|
-
export { }
|
package/lib/Select.js
DELETED
package/lib/Select.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/Select.ts"],"sourcesContent":["export * from './components/Select/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1,16 +0,0 @@
|
|
|
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 { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
|
-
/**
|
|
7
|
-
* Select component
|
|
8
|
-
*/
|
|
9
|
-
export const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
-
const state = useSelect_unstable(props, ref);
|
|
11
|
-
useSelectStyles_unstable(state);
|
|
12
|
-
useCustomStyleHook_unstable('useSelectStyles_unstable')(state);
|
|
13
|
-
return renderSelect_unstable(state);
|
|
14
|
-
});
|
|
15
|
-
Select.displayName = 'Select';
|
|
16
|
-
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"sources":["../../../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 { useCustomStyleHook_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 useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzBL,2BAAA,CAA4B,4BAA4BK,KAAA;EAExD,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOK,WAAW,GAAG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React"],"sources":["../../../src/components/Select/Select.types.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Select/index.ts"],"sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Render the final JSX of Select
|
|
5
|
-
*/
|
|
6
|
-
export const renderSelect_unstable = state => {
|
|
7
|
-
const {
|
|
8
|
-
slots,
|
|
9
|
-
slotProps
|
|
10
|
-
} = getSlotsNext(state);
|
|
11
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.select, slotProps.select, slotProps.select.children), /*#__PURE__*/createElement(slots.icon, slotProps.icon));
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=renderSelect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","getSlotsNext","renderSelect_unstable","state","slots","slotProps","root","select","children","icon"],"sources":["../../../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EACvD,oBACEH,aAbJ,CAaKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BN,aAdN,CAcOI,KAAA,CAAMG,MAAM,EAAKF,SAAA,CAAUE,MAAM,EAAGF,SAAA,CAAUE,MAAM,CAACC,QAAQ,gBAC9DR,aAfN,CAeOI,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGpC"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useFieldControlProps_unstable } from '@fluentui/react-field';
|
|
3
|
-
import { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
|
|
4
|
-
import { ChevronDownRegular } from '@fluentui/react-icons';
|
|
5
|
-
import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
|
|
6
|
-
/**
|
|
7
|
-
* Create the state required to render Select.
|
|
8
|
-
*
|
|
9
|
-
* The returned state can be modified with hooks such as useSelectStyles,
|
|
10
|
-
* before being passed to renderSelect.
|
|
11
|
-
*
|
|
12
|
-
* @param props - props from this instance of Select
|
|
13
|
-
* @param ref - reference to the `<select>` element in Select
|
|
14
|
-
*/
|
|
15
|
-
export const useSelect_unstable = (props, ref) => {
|
|
16
|
-
// Merge props from surrounding <Field>, if any
|
|
17
|
-
props = useFieldControlProps_unstable(props, {
|
|
18
|
-
supportsLabelFor: true,
|
|
19
|
-
supportsRequired: true,
|
|
20
|
-
supportsSize: true
|
|
21
|
-
});
|
|
22
|
-
const overrides = useOverrides();
|
|
23
|
-
var _overrides_inputDefaultAppearance;
|
|
24
|
-
const {
|
|
25
|
-
defaultValue,
|
|
26
|
-
value,
|
|
27
|
-
select,
|
|
28
|
-
icon,
|
|
29
|
-
root,
|
|
30
|
-
appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline',
|
|
31
|
-
onChange,
|
|
32
|
-
size = 'medium'
|
|
33
|
-
} = props;
|
|
34
|
-
const nativeProps = getPartitionedNativeProps({
|
|
35
|
-
props,
|
|
36
|
-
primarySlotTagName: 'select',
|
|
37
|
-
excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
|
|
38
|
-
});
|
|
39
|
-
const state = {
|
|
40
|
-
size,
|
|
41
|
-
appearance,
|
|
42
|
-
components: {
|
|
43
|
-
root: 'span',
|
|
44
|
-
select: 'select',
|
|
45
|
-
icon: 'span'
|
|
46
|
-
},
|
|
47
|
-
select: resolveShorthand(select, {
|
|
48
|
-
required: true,
|
|
49
|
-
defaultProps: {
|
|
50
|
-
defaultValue,
|
|
51
|
-
value,
|
|
52
|
-
ref,
|
|
53
|
-
...nativeProps.primary
|
|
54
|
-
}
|
|
55
|
-
}),
|
|
56
|
-
icon: resolveShorthand(icon, {
|
|
57
|
-
required: true,
|
|
58
|
-
defaultProps: {
|
|
59
|
-
children: /*#__PURE__*/React.createElement(ChevronDownRegular, null)
|
|
60
|
-
}
|
|
61
|
-
}),
|
|
62
|
-
root: resolveShorthand(root, {
|
|
63
|
-
required: true,
|
|
64
|
-
defaultProps: nativeProps.root
|
|
65
|
-
})
|
|
66
|
-
};
|
|
67
|
-
state.select.onChange = useEventCallback(event => {
|
|
68
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
|
|
69
|
-
value: event.target.value
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
return state;
|
|
73
|
-
};
|
|
74
|
-
//# sourceMappingURL=useSelect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","resolveShorthand","useEventCallback","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","_overrides_inputDefaultAppearance","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","required","defaultProps","primary","children","createElement","event","target"],"sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\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,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ;AAC9E,SAASC,kBAAkB,QAAQ;AAEnC,SAASC,qBAAA,IAAyBC,YAAY,QAAQ;AAEtD;;;;;;;;;AASA,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAAmD;EACxG;EACAD,KAAA,GAAQR,6BAAA,CAA8BQ,KAAA,EAAO;IAAEE,gBAAA,EAAkB,IAAI;IAAEC,gBAAA,EAAkB,IAAI;IAAEC,YAAA,EAAc;EAAK;EAElH,MAAMC,SAAA,GAAYP,YAAA;MAQHQ,iCAAA;EANf,MAAM;IACJC,YAAA;IACAC,KAAA;IACAC,MAAA;IACAC,IAAA;IACAC,IAAA;IACAC,UAAA,GAAa,CAAAN,iCAAA,GAAAD,SAAA,CAAUQ,sBAAsB,cAAhCP,iCAAA,cAAAA,iCAAA,GAAoC,SAAS;IAE1DQ,QAAA;IACAC,IAAA,GAAO;EAAQ,CAChB,GAAGf,KAAA;EAEJ,MAAMgB,WAAA,GAAcvB,yBAAA,CAA0B;IAC5CO,KAAA;IACAiB,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,cAAc,gBAAgB,YAAY,QAAQ;EACxE;EAEA,MAAMC,KAAA,GAAqB;IACzBJ,IAAA;IACAH,UAAA;IACAQ,UAAA,EAAY;MACVT,IAAA,EAAM;MACNF,MAAA,EAAQ;MACRC,IAAA,EAAM;IACR;IACAD,MAAA,EAAQf,gBAAA,CAAiBe,MAAA,EAAQ;MAC/BY,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZf,YAAA;QACAC,KAAA;QACAP,GAAA;QACA,GAAGe,WAAA,CAAYO;MACjB;IACF;IACAb,IAAA,EAAMhB,gBAAA,CAAiBgB,IAAA,EAAM;MAC3BW,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QAAEE,QAAA,eAAUjC,KAAA,CAAAkC,aAAA,CAAC7B,kBAAA;MAAsB;IACnD;IACAe,IAAA,EAAMjB,gBAAA,CAAiBiB,IAAA,EAAM;MAC3BU,QAAA,EAAU,IAAI;MACdC,YAAA,EAAcN,WAAA,CAAYL;IAC5B;EACF;EAEAQ,KAAA,CAAMV,MAAM,CAACK,QAAQ,GAAGnB,gBAAA,CAAiB+B,KAAA,IAAS;IAChDZ,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWY,KAAA,EAAO;MAAElB,KAAA,EAAOkB,KAAC,CAAMC,MAAM,CAAuBnB;IAAM;EACvE;EAEA,OAAOW,KAAA;AACT"}
|
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
-
export const selectClassNames = {
|
|
4
|
-
root: 'fui-Select',
|
|
5
|
-
select: 'fui-Select__select',
|
|
6
|
-
icon: 'fui-Select__icon'
|
|
7
|
-
};
|
|
8
|
-
const iconSizes = {
|
|
9
|
-
small: '16px',
|
|
10
|
-
medium: '20px',
|
|
11
|
-
large: '24px'
|
|
12
|
-
};
|
|
13
|
-
//TODO: Should fieldHeights be a set of global design tokens or constants?
|
|
14
|
-
const fieldHeights = {
|
|
15
|
-
small: '24px',
|
|
16
|
-
medium: '32px',
|
|
17
|
-
large: '40px'
|
|
18
|
-
};
|
|
19
|
-
/* Since the <select> element must span the full width and cannot have children,
|
|
20
|
-
* the right padding needs to be calculated from the sum of the following:
|
|
21
|
-
* 1. Field padding-right
|
|
22
|
-
* 2. Icon width
|
|
23
|
-
* 3. Content-icon spacing
|
|
24
|
-
* 4. Content inner padding
|
|
25
|
-
*/
|
|
26
|
-
const paddingRight = {
|
|
27
|
-
small: `calc(${tokens.spacingHorizontalSNudge}
|
|
28
|
-
+ ${iconSizes.small}
|
|
29
|
-
+ ${tokens.spacingHorizontalXXS}
|
|
30
|
-
+ ${tokens.spacingHorizontalXXS})`,
|
|
31
|
-
medium: `calc(${tokens.spacingHorizontalMNudge}
|
|
32
|
-
+ ${iconSizes.medium}
|
|
33
|
-
+ ${tokens.spacingHorizontalXXS}
|
|
34
|
-
+ ${tokens.spacingHorizontalXXS})`,
|
|
35
|
-
large: `calc(${tokens.spacingHorizontalM}
|
|
36
|
-
+ ${iconSizes.large}
|
|
37
|
-
+ ${tokens.spacingHorizontalSNudge}
|
|
38
|
-
+ ${tokens.spacingHorizontalSNudge})`
|
|
39
|
-
};
|
|
40
|
-
/* Left padding is calculated from the outer padding + inner content padding values
|
|
41
|
-
* since <select> can't have additional child content or custom inner layout */
|
|
42
|
-
const paddingLeft = {
|
|
43
|
-
small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
44
|
-
medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
45
|
-
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
|
|
46
|
-
};
|
|
47
|
-
/* end of shared values */
|
|
48
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
|
49
|
-
base: {
|
|
50
|
-
Bt984gj: "f122n59",
|
|
51
|
-
B7ck84d: "f1ewtqcl",
|
|
52
|
-
mc9l5x: "f22iagw",
|
|
53
|
-
Eh141a: "flvyvdh",
|
|
54
|
-
Bahqtrf: "fk6fouc",
|
|
55
|
-
qhf8xq: "f10pi13n",
|
|
56
|
-
h62rwi: "f7ll8cq",
|
|
57
|
-
B3778ie: ["f1ibwz09", "f1kp91vd"],
|
|
58
|
-
d9w3h3: ["f1kp91vd", "f1ibwz09"],
|
|
59
|
-
Bl18szs: ["f18vqdqu", "f53nyzz"],
|
|
60
|
-
B4j8arr: ["f53nyzz", "f18vqdqu"],
|
|
61
|
-
li1rpt: "f1gw3sf2",
|
|
62
|
-
Bsft5z2: "f13zj6fq",
|
|
63
|
-
Dlnsje: "fhwjr99",
|
|
64
|
-
E3zdtr: "f1mdlcz9",
|
|
65
|
-
By385i5: "fo72kxq",
|
|
66
|
-
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
|
|
67
|
-
B1piin3: ["f15yvnhg", "f1n6gb5g"],
|
|
68
|
-
b1kco5: "f1yk9hq",
|
|
69
|
-
Ba2ppi3: "fhwpy7i",
|
|
70
|
-
F2fol1: "f14ee0xe",
|
|
71
|
-
lck23g: "f1xhbsuh",
|
|
72
|
-
df92cz: "fv8e3ye",
|
|
73
|
-
I188md: "ftb5wc6",
|
|
74
|
-
umuwi5: "fjw5xc1",
|
|
75
|
-
Blcqepd: "f1xdyd5c",
|
|
76
|
-
nplu4u: "fatpbeo",
|
|
77
|
-
Bioka5o: "fb7uyps",
|
|
78
|
-
H713fs: "f1cmft4k",
|
|
79
|
-
B9ooomg: "f1x58t8o"
|
|
80
|
-
}
|
|
81
|
-
}, {
|
|
82
|
-
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);}"],
|
|
83
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
84
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
85
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
|
|
86
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
87
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
|
|
88
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
89
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
90
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
91
|
-
}]],
|
|
92
|
-
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);}"]
|
|
93
|
-
});
|
|
94
|
-
const useSelectStyles = /*#__PURE__*/__styles({
|
|
95
|
-
base: {
|
|
96
|
-
Bowrso0: "fqrijq1",
|
|
97
|
-
B4j52fo: "f5ogflp",
|
|
98
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
99
|
-
Bn0qgzm: "f1f09k3d",
|
|
100
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
101
|
-
icvyot: "fzkkow9",
|
|
102
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
103
|
-
oivjwe: "fg706s2",
|
|
104
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
105
|
-
g2u3we: "f1p3nwhy",
|
|
106
|
-
h3c5rm: ["f11589ue", "f1pdflbu"],
|
|
107
|
-
B9xav0g: "f1q5o8ev",
|
|
108
|
-
zhjwy3: ["f1pdflbu", "f11589ue"],
|
|
109
|
-
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
110
|
-
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
111
|
-
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
112
|
-
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
113
|
-
E5pizo: "f1couhl3",
|
|
114
|
-
B7ck84d: "f1ewtqcl",
|
|
115
|
-
sj55zd: "f19n0e5",
|
|
116
|
-
Bceei9c: "f1k6fduh",
|
|
117
|
-
Bh6795r: "fqerorx",
|
|
118
|
-
B2u0y6b: "f6dzj5z",
|
|
119
|
-
Byoj8tv: "f1qch9an",
|
|
120
|
-
z8tnut: "f1g0x7ka",
|
|
121
|
-
B3aqqti: "fatbyko",
|
|
122
|
-
Brovlpu: "f1grzc83",
|
|
123
|
-
Bxa1mx5: "f19shzzi"
|
|
124
|
-
},
|
|
125
|
-
disabled: {
|
|
126
|
-
De3pzq: "f1c21dwh",
|
|
127
|
-
g2u3we: "f1jj8ep1",
|
|
128
|
-
h3c5rm: ["f15xbau", "fy0fskl"],
|
|
129
|
-
B9xav0g: "f4ikngz",
|
|
130
|
-
zhjwy3: ["fy0fskl", "f15xbau"],
|
|
131
|
-
sj55zd: "f1s2aq7o",
|
|
132
|
-
Bceei9c: "fdrzuqr",
|
|
133
|
-
Bjwas2f: "fg455y9",
|
|
134
|
-
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
|
|
135
|
-
Bxeuatn: "f1cwzwz",
|
|
136
|
-
n51gp8: ["f14g86mu", "f1rvyvqg"]
|
|
137
|
-
},
|
|
138
|
-
disabledUnderline: {
|
|
139
|
-
g2u3we: "fgig46g",
|
|
140
|
-
h3c5rm: ["f1mxt3zg", "fziff3p"],
|
|
141
|
-
B9xav0g: "f4ikngz",
|
|
142
|
-
zhjwy3: ["fziff3p", "f1mxt3zg"]
|
|
143
|
-
},
|
|
144
|
-
small: {
|
|
145
|
-
Bqenvij: "frvgh55",
|
|
146
|
-
uwmqm3: ["f1xile11", "fqznh8f"],
|
|
147
|
-
z189sj: ["fiqd4sw", "f11fkzut"],
|
|
148
|
-
Bahqtrf: "fk6fouc",
|
|
149
|
-
Be2twd7: "fy9rknc",
|
|
150
|
-
Bhrd7zp: "figsok6",
|
|
151
|
-
Bg96gwp: "fwrc4pm"
|
|
152
|
-
},
|
|
153
|
-
medium: {
|
|
154
|
-
Bqenvij: "f1d2rq10",
|
|
155
|
-
uwmqm3: ["f1e60jzv", "f135dnwl"],
|
|
156
|
-
z189sj: ["f154vowv", "flqamny"],
|
|
157
|
-
Bahqtrf: "fk6fouc",
|
|
158
|
-
Be2twd7: "fkhj508",
|
|
159
|
-
Bhrd7zp: "figsok6",
|
|
160
|
-
Bg96gwp: "f1i3iumi"
|
|
161
|
-
},
|
|
162
|
-
large: {
|
|
163
|
-
Bqenvij: "fbhnoac",
|
|
164
|
-
uwmqm3: ["fnphzt9", "flt1dlf"],
|
|
165
|
-
z189sj: ["f1xi5ia2", "f1xi1l47"],
|
|
166
|
-
Bahqtrf: "fk6fouc",
|
|
167
|
-
Be2twd7: "fod5ikn",
|
|
168
|
-
Bhrd7zp: "figsok6",
|
|
169
|
-
Bg96gwp: "faaz57k"
|
|
170
|
-
},
|
|
171
|
-
outline: {
|
|
172
|
-
De3pzq: "fxugw4r",
|
|
173
|
-
B4j52fo: "f5ogflp",
|
|
174
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
175
|
-
Bn0qgzm: "f1f09k3d",
|
|
176
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
177
|
-
icvyot: "fzkkow9",
|
|
178
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
179
|
-
oivjwe: "fg706s2",
|
|
180
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
181
|
-
g2u3we: "fj3muxo",
|
|
182
|
-
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
183
|
-
B9xav0g: "f1c1zstj",
|
|
184
|
-
zhjwy3: ["f1lxtadh", "f1akhkt"]
|
|
185
|
-
},
|
|
186
|
-
outlineInteractive: {
|
|
187
|
-
Bgoe8wy: "fvcxoqz",
|
|
188
|
-
Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
|
|
189
|
-
oetu4i: "flmw63s",
|
|
190
|
-
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
|
|
191
|
-
B6oc9vd: "fvs00aa",
|
|
192
|
-
ak43y8: ["f1assf6x", "f4ruux4"],
|
|
193
|
-
wmxk5l: "fqhmt4z",
|
|
194
|
-
B50zh58: ["f4ruux4", "f1assf6x"]
|
|
195
|
-
},
|
|
196
|
-
underline: {
|
|
197
|
-
De3pzq: "f1c21dwh",
|
|
198
|
-
Bn0qgzm: "f1f09k3d",
|
|
199
|
-
oivjwe: "fg706s2",
|
|
200
|
-
B9xav0g: "f1c1zstj",
|
|
201
|
-
Bbmb7ep: ["f1krrbdw", "f1deotkl"],
|
|
202
|
-
Beyfa6y: ["f1deotkl", "f1krrbdw"],
|
|
203
|
-
B7oj6ja: ["f10ostut", "f1ozlkrg"],
|
|
204
|
-
Btl43ni: ["f1ozlkrg", "f10ostut"]
|
|
205
|
-
},
|
|
206
|
-
"filled-lighter": {
|
|
207
|
-
De3pzq: "fxugw4r"
|
|
208
|
-
},
|
|
209
|
-
"filled-darker": {
|
|
210
|
-
De3pzq: "f16xq7d1"
|
|
211
|
-
},
|
|
212
|
-
invalid: {
|
|
213
|
-
tvckwq: "fs4k3qj",
|
|
214
|
-
gk2u95: ["fcee079", "fmyw78r"],
|
|
215
|
-
hhx65j: "f1fgmyf4",
|
|
216
|
-
Bxowmz0: ["fmyw78r", "fcee079"]
|
|
217
|
-
},
|
|
218
|
-
invalidUnderline: {
|
|
219
|
-
hhx65j: "f1fgmyf4"
|
|
220
|
-
}
|
|
221
|
-
}, {
|
|
222
|
-
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);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".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;}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".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);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
|
|
223
|
-
f: [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
224
|
-
m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
|
|
225
|
-
m: "(forced-colors: active)"
|
|
226
|
-
}], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
|
|
227
|
-
m: "(forced-colors: active)"
|
|
228
|
-
}], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
|
|
229
|
-
m: "(forced-colors: active)"
|
|
230
|
-
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
|
|
231
|
-
m: "(forced-colors: active)"
|
|
232
|
-
}]],
|
|
233
|
-
h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
|
|
234
|
-
a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
|
|
235
|
-
});
|
|
236
|
-
const useIconStyles = /*#__PURE__*/__styles({
|
|
237
|
-
icon: {
|
|
238
|
-
B7ck84d: "f1ewtqcl",
|
|
239
|
-
sj55zd: "fxkbij4",
|
|
240
|
-
mc9l5x: "ftgm304",
|
|
241
|
-
qhf8xq: "f1euv43f",
|
|
242
|
-
Bkecrkj: "f1aehjj5",
|
|
243
|
-
Bo70h7d: "fvc9v3g"
|
|
244
|
-
},
|
|
245
|
-
disabled: {
|
|
246
|
-
sj55zd: "f1s2aq7o",
|
|
247
|
-
Bbusuzp: "f1dcs8yz"
|
|
248
|
-
},
|
|
249
|
-
small: {
|
|
250
|
-
Be2twd7: "f4ybsrx",
|
|
251
|
-
Bqenvij: "fd461yt",
|
|
252
|
-
j35jbq: ["f13lnp83", "f1i5nn0v"],
|
|
253
|
-
a9b677: "fjw5fx7"
|
|
254
|
-
},
|
|
255
|
-
medium: {
|
|
256
|
-
Be2twd7: "fe5j1ua",
|
|
257
|
-
Bqenvij: "fjamq6b",
|
|
258
|
-
j35jbq: ["fnyteob", "f1enpzzf"],
|
|
259
|
-
a9b677: "f64fuq3"
|
|
260
|
-
},
|
|
261
|
-
large: {
|
|
262
|
-
Be2twd7: "f1rt2boy",
|
|
263
|
-
Bqenvij: "frvgh55",
|
|
264
|
-
j35jbq: ["f8b87gs", "fedtrts"],
|
|
265
|
-
a9b677: "fq4mcun"
|
|
266
|
-
}
|
|
267
|
-
}, {
|
|
268
|
-
d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
|
|
269
|
-
m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
270
|
-
m: "(forced-colors: active)"
|
|
271
|
-
}]]
|
|
272
|
-
});
|
|
273
|
-
/**
|
|
274
|
-
* Apply styling to the Select slots based on the state
|
|
275
|
-
*/
|
|
276
|
-
export const useSelectStyles_unstable = state => {
|
|
277
|
-
const {
|
|
278
|
-
size,
|
|
279
|
-
appearance
|
|
280
|
-
} = state;
|
|
281
|
-
const disabled = state.select.disabled;
|
|
282
|
-
const invalid = `${state.select['aria-invalid']}` === 'true';
|
|
283
|
-
const iconStyles = useIconStyles();
|
|
284
|
-
const rootStyles = useRootStyles();
|
|
285
|
-
const selectStyles = useSelectStyles();
|
|
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 === '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
|
-
if (state.icon) {
|
|
289
|
-
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
290
|
-
}
|
|
291
|
-
return state;
|
|
292
|
-
};
|
|
293
|
-
//# sourceMappingURL=useSelectStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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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"}
|
package/lib/index.js
DELETED
package/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"sources":["../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"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb"}
|