@fluentui/react-search 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240819-2052.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.md +19 -10
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js +14 -14
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +39 -31
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 19 Aug 2024 20:57:18 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-20240819-2052.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240819-2052.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.
|
|
9
|
+
Mon, 19 Aug 2024 20:57:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.14..@fluentui/react-search_v0.0.0-nightly-20240819-2052.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-input to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime 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 to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-input to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.14)
|
|
23
|
+
|
|
24
|
+
Mon, 05 Aug 2024 22:33:04 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.13..@fluentui/react-search_v9.0.14)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- Bump @fluentui/react-input to v9.4.85 ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by beachball)
|
|
21
30
|
|
|
22
31
|
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.13)
|
|
23
32
|
|
|
@@ -15,23 +15,23 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
small: {
|
|
16
16
|
i8kkvl: "fjuset5",
|
|
17
17
|
B2u0y6b: "f1xzfw5u",
|
|
18
|
-
uwmqm3: ["
|
|
19
|
-
z189sj: ["
|
|
18
|
+
uwmqm3: ["f1yo5xhq", "f11u2m66"],
|
|
19
|
+
z189sj: ["f1czefwt", "fyz03hb"]
|
|
20
20
|
},
|
|
21
21
|
medium: {
|
|
22
22
|
i8kkvl: "fjuset5",
|
|
23
23
|
B2u0y6b: "f1xzfw5u",
|
|
24
|
-
uwmqm3: ["
|
|
25
|
-
z189sj: ["
|
|
24
|
+
uwmqm3: ["fy4mc4l", "fqmi3k8"],
|
|
25
|
+
z189sj: ["f1cper36", "f1y5uc1l"]
|
|
26
26
|
},
|
|
27
27
|
large: {
|
|
28
28
|
i8kkvl: "fjuset5",
|
|
29
29
|
B2u0y6b: "f1xzfw5u",
|
|
30
|
-
uwmqm3: ["
|
|
31
|
-
z189sj: ["
|
|
30
|
+
uwmqm3: ["f1xt971f", "fyp1ehy"],
|
|
31
|
+
z189sj: ["f1lehhk2", "f1auf7rb"]
|
|
32
32
|
},
|
|
33
33
|
input: {
|
|
34
|
-
uwmqm3: ["
|
|
34
|
+
uwmqm3: ["f7mios5", "f1fa2o7t"],
|
|
35
35
|
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
36
36
|
Boqhc8c: "f18izjht",
|
|
37
37
|
B8uat0v: "fcoa6sg"
|
|
@@ -40,7 +40,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
40
40
|
z189sj: ["fhxju0i", "f1cnd47f"]
|
|
41
41
|
}
|
|
42
42
|
}, {
|
|
43
|
-
d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".
|
|
43
|
+
d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".f1yo5xhq{padding-left:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}", ".f11u2m66{padding-right:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}", ".f1czefwt{padding-right:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}", ".fyz03hb{padding-left:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}", ".fy4mc4l{padding-left:var(--1583, var(--1584, var(--spacingHorizontalS)));}", ".fqmi3k8{padding-right:var(--1583, var(--1584, var(--spacingHorizontalS)));}", ".f1cper36{padding-right:var(--1585, var(--1586, var(--spacingHorizontalS)));}", ".f1y5uc1l{padding-left:var(--1585, var(--1586, var(--spacingHorizontalS)));}", ".f1xt971f{padding-left:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}", ".fyp1ehy{padding-right:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}", ".f1lehhk2{padding-right:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}", ".f1auf7rb{padding-left:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}", ".f7mios5{padding-left:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}", ".f1fa2o7t{padding-right:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
|
|
44
44
|
});
|
|
45
45
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
46
46
|
small: {
|
|
@@ -57,8 +57,8 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
57
57
|
});
|
|
58
58
|
const useContentAfterStyles = /*#__PURE__*/__styles({
|
|
59
59
|
contentAfter: {
|
|
60
|
-
uwmqm3: ["
|
|
61
|
-
i8kkvl: "
|
|
60
|
+
uwmqm3: ["f1f19u1p", "fkbs4c"],
|
|
61
|
+
i8kkvl: "fl7yw8l"
|
|
62
62
|
},
|
|
63
63
|
rest: {
|
|
64
64
|
abs64n: "fk73vx1",
|
|
@@ -67,12 +67,12 @@ const useContentAfterStyles = /*#__PURE__*/__styles({
|
|
|
67
67
|
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
|
68
68
|
}
|
|
69
69
|
}, {
|
|
70
|
-
d: [".
|
|
70
|
+
d: [".f1f19u1p{padding-left:var(--1593, var(--1594, var(--spacingHorizontalM)));}", ".fkbs4c{padding-right:var(--1593, var(--1594, var(--spacingHorizontalM)));}", ".fl7yw8l{column-gap:var(--1595, var(--1596, var(--spacingHorizontalXS)));}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}"]
|
|
71
71
|
});
|
|
72
|
-
const useDismissClassName = /*#__PURE__*/__resetStyles("
|
|
72
|
+
const useDismissClassName = /*#__PURE__*/__resetStyles("r153di11", null, [".r153di11{box-sizing:border-box;color:var(--1597, var(--1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}", ".r153di11>svg{font-size:20px;}"]);
|
|
73
73
|
const useDismissStyles = /*#__PURE__*/__styles({
|
|
74
74
|
disabled: {
|
|
75
|
-
sj55zd: "
|
|
75
|
+
sj55zd: "f18ixbzt"
|
|
76
76
|
},
|
|
77
77
|
small: {
|
|
78
78
|
Duoase: "f3qv9w"
|
|
@@ -82,7 +82,7 @@ const useDismissStyles = /*#__PURE__*/__styles({
|
|
|
82
82
|
Duoase: "f16u2scb"
|
|
83
83
|
}
|
|
84
84
|
}, {
|
|
85
|
-
d: [".
|
|
85
|
+
d: [".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
|
|
86
86
|
});
|
|
87
87
|
/**
|
|
88
88
|
* Apply styling to the SearchBox slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1579, var(--1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--1581, var(--1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1583, var(--1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--1585, var(--1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1587, var(--1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--1589, var(--1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--1591, var(--1592, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--1593, var(--1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--1595, var(--1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--1597, var(--1598, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: `var(--1599, var(--1600, ${tokens.colorNeutralForegroundDisabled}))`\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,42 +32,42 @@ const searchBoxClassNames = {
|
|
|
32
32
|
i8kkvl: "fjuset5",
|
|
33
33
|
B2u0y6b: "f1xzfw5u",
|
|
34
34
|
uwmqm3: [
|
|
35
|
-
"
|
|
36
|
-
"
|
|
35
|
+
"f1yo5xhq",
|
|
36
|
+
"f11u2m66"
|
|
37
37
|
],
|
|
38
38
|
z189sj: [
|
|
39
|
-
"
|
|
40
|
-
"
|
|
39
|
+
"f1czefwt",
|
|
40
|
+
"fyz03hb"
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
43
|
medium: {
|
|
44
44
|
i8kkvl: "fjuset5",
|
|
45
45
|
B2u0y6b: "f1xzfw5u",
|
|
46
46
|
uwmqm3: [
|
|
47
|
-
"
|
|
48
|
-
"
|
|
47
|
+
"fy4mc4l",
|
|
48
|
+
"fqmi3k8"
|
|
49
49
|
],
|
|
50
50
|
z189sj: [
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"f1cper36",
|
|
52
|
+
"f1y5uc1l"
|
|
53
53
|
]
|
|
54
54
|
},
|
|
55
55
|
large: {
|
|
56
56
|
i8kkvl: "fjuset5",
|
|
57
57
|
B2u0y6b: "f1xzfw5u",
|
|
58
58
|
uwmqm3: [
|
|
59
|
-
"
|
|
60
|
-
"
|
|
59
|
+
"f1xt971f",
|
|
60
|
+
"fyp1ehy"
|
|
61
61
|
],
|
|
62
62
|
z189sj: [
|
|
63
|
-
"
|
|
64
|
-
"
|
|
63
|
+
"f1lehhk2",
|
|
64
|
+
"f1auf7rb"
|
|
65
65
|
]
|
|
66
66
|
},
|
|
67
67
|
input: {
|
|
68
68
|
uwmqm3: [
|
|
69
|
-
"
|
|
70
|
-
"
|
|
69
|
+
"f7mios5",
|
|
70
|
+
"f1fa2o7t"
|
|
71
71
|
],
|
|
72
72
|
z189sj: [
|
|
73
73
|
"fhxju0i",
|
|
@@ -86,12 +86,20 @@ const searchBoxClassNames = {
|
|
|
86
86
|
d: [
|
|
87
87
|
".fjuset5{column-gap:0;}",
|
|
88
88
|
".f1xzfw5u{max-width:468px;}",
|
|
89
|
-
".
|
|
90
|
-
".
|
|
91
|
-
".
|
|
92
|
-
".
|
|
93
|
-
".
|
|
94
|
-
".
|
|
89
|
+
".f1yo5xhq{padding-left:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
|
|
90
|
+
".f11u2m66{padding-right:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
|
|
91
|
+
".f1czefwt{padding-right:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
|
|
92
|
+
".fyz03hb{padding-left:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
|
|
93
|
+
".fy4mc4l{padding-left:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
|
|
94
|
+
".fqmi3k8{padding-right:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
|
|
95
|
+
".f1cper36{padding-right:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
|
|
96
|
+
".f1y5uc1l{padding-left:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
|
|
97
|
+
".f1xt971f{padding-left:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
|
|
98
|
+
".fyp1ehy{padding-right:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
|
|
99
|
+
".f1lehhk2{padding-right:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
|
|
100
|
+
".f1auf7rb{padding-left:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
|
|
101
|
+
".f7mios5{padding-left:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
|
|
102
|
+
".f1fa2o7t{padding-right:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
|
|
95
103
|
".fhxju0i{padding-right:0;}",
|
|
96
104
|
".f1cnd47f{padding-left:0;}",
|
|
97
105
|
".f18izjht::-webkit-search-decoration{display:none;}",
|
|
@@ -130,10 +138,10 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
130
138
|
const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
131
139
|
contentAfter: {
|
|
132
140
|
uwmqm3: [
|
|
133
|
-
"
|
|
134
|
-
"
|
|
141
|
+
"f1f19u1p",
|
|
142
|
+
"fkbs4c"
|
|
135
143
|
],
|
|
136
|
-
i8kkvl: "
|
|
144
|
+
i8kkvl: "fl7yw8l"
|
|
137
145
|
},
|
|
138
146
|
rest: {
|
|
139
147
|
abs64n: "fk73vx1",
|
|
@@ -146,9 +154,9 @@ const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
146
154
|
}
|
|
147
155
|
}, {
|
|
148
156
|
d: [
|
|
149
|
-
".
|
|
150
|
-
".
|
|
151
|
-
".
|
|
157
|
+
".f1f19u1p{padding-left:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
|
|
158
|
+
".fkbs4c{padding-right:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
|
|
159
|
+
".fl7yw8l{column-gap:var(--1595, var(--1596, var(--spacingHorizontalXS)));}",
|
|
152
160
|
".fk73vx1{opacity:0;}",
|
|
153
161
|
".fniina8{height:0;}",
|
|
154
162
|
".f3tsq5r{width:0;}",
|
|
@@ -156,13 +164,13 @@ const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
156
164
|
".fhxju0i{padding-right:0;}"
|
|
157
165
|
]
|
|
158
166
|
});
|
|
159
|
-
const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
160
|
-
".
|
|
161
|
-
".
|
|
167
|
+
const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r153di11", null, [
|
|
168
|
+
".r153di11{box-sizing:border-box;color:var(--1597, var(--1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
|
|
169
|
+
".r153di11>svg{font-size:20px;}"
|
|
162
170
|
]);
|
|
163
171
|
const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
164
172
|
disabled: {
|
|
165
|
-
sj55zd: "
|
|
173
|
+
sj55zd: "f18ixbzt"
|
|
166
174
|
},
|
|
167
175
|
small: {
|
|
168
176
|
Duoase: "f3qv9w"
|
|
@@ -173,7 +181,7 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
173
181
|
}
|
|
174
182
|
}, {
|
|
175
183
|
d: [
|
|
176
|
-
".
|
|
184
|
+
".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}",
|
|
177
185
|
".f3qv9w>svg{font-size:16px;}",
|
|
178
186
|
".f16u2scb>svg{font-size:24px;}"
|
|
179
187
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge
|
|
1
|
+
{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1579, var(--1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--1581, var(--1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1583, var(--1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--1585, var(--1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1587, var(--1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--1589, var(--1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--1591, var(--1592, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--1593, var(--1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--1595, var(--1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--1597, var(--1598, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: `var(--1599, var(--1600, ${tokens.colorNeutralForegroundDisabled}))`\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","__styles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-search",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240819-2052.1",
|
|
4
4
|
"description": "Search input for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -25,17 +25,17 @@
|
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
28
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240819-2052.1",
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
|
|
30
30
|
"@fluentui/scripts-api-extractor": "*",
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-icons": "^2.0.245",
|
|
35
|
-
"@fluentui/react-input": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-input": "0.0.0-nightly-20240819-2052.1",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
|
|
39
39
|
"@griffel/react": "^1.5.22",
|
|
40
40
|
"@swc/helpers": "^0.5.1"
|
|
41
41
|
},
|