@fluentui/react-search 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240816-2133.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 +10 -21
- package/lib/components/SearchBox/useSearchBox.js +6 -10
- package/lib/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js +17 -35
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBox.js +6 -10
- package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +43 -77
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,34 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 16 Aug 2024 21:44:11 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-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240816-2133.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.
|
|
9
|
+
Fri, 16 Aug 2024 21:44:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v0.0.0-nightly-20240816-2133.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-
|
|
21
|
-
|
|
22
|
-
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.13)
|
|
23
|
-
|
|
24
|
-
Tue, 30 Jul 2024 18:47:34 GMT
|
|
25
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v9.0.13)
|
|
26
|
-
|
|
27
|
-
### Patches
|
|
28
|
-
|
|
29
|
-
- fix: replace useEventCallback with useCallback for focus ([PR #32079](https://github.com/microsoft/fluentui/pull/32079) by vgenaev@gmail.com)
|
|
30
|
-
- fix: Expand hit target when there's no content after. ([PR #32114](https://github.com/microsoft/fluentui/pull/32114) by estebanmu@microsoft.com)
|
|
31
|
-
- Bump @fluentui/react-input to v9.4.84 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
|
|
15
|
+
- Bump @fluentui/react-input to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
32
21
|
|
|
33
22
|
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.12)
|
|
34
23
|
|
|
@@ -21,17 +21,13 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
21
21
|
});
|
|
22
22
|
// Tracks the focus of the component for the contentAfter and dismiss button
|
|
23
23
|
const [focused, setFocused] = React.useState(false);
|
|
24
|
-
const onFocus =
|
|
24
|
+
const onFocus = useEventCallback(()=>{
|
|
25
25
|
setFocused(true);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
]);
|
|
29
|
-
const onBlur = React.useCallback((ev)=>{
|
|
26
|
+
});
|
|
27
|
+
const onBlur = useEventCallback((ev)=>{
|
|
30
28
|
var _searchBoxRootRef_current;
|
|
31
29
|
setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
|
|
32
|
-
}
|
|
33
|
-
setFocused
|
|
34
|
-
]);
|
|
30
|
+
});
|
|
35
31
|
const rootProps = slot.resolveShorthand(root);
|
|
36
32
|
const handleDismissClick = useEventCallback((event)=>{
|
|
37
33
|
var _props_onChange;
|
|
@@ -53,8 +49,8 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
53
49
|
root: slot.always({
|
|
54
50
|
...rootProps,
|
|
55
51
|
ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
56
|
-
onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
57
|
-
onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
52
|
+
onFocus: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
|
|
53
|
+
onBlur: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
|
|
58
54
|
}, {
|
|
59
55
|
elementType: 'span'
|
|
60
56
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus =
|
|
1
|
+
{"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = useEventCallback(() => {\n setFocused(true);\n });\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n });\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),\n onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -15,64 +15,47 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
small: {
|
|
16
16
|
i8kkvl: "fjuset5",
|
|
17
17
|
B2u0y6b: "f1xzfw5u",
|
|
18
|
-
uwmqm3: ["
|
|
19
|
-
z189sj: ["
|
|
18
|
+
uwmqm3: ["f1xer5qc", "f1vwfgzu"],
|
|
19
|
+
z189sj: ["f1rnmnj3", "frcaq29"]
|
|
20
20
|
},
|
|
21
21
|
medium: {
|
|
22
22
|
i8kkvl: "fjuset5",
|
|
23
23
|
B2u0y6b: "f1xzfw5u",
|
|
24
|
-
uwmqm3: ["
|
|
25
|
-
z189sj: ["
|
|
24
|
+
uwmqm3: ["f1ga1vvr", "f577s3h"],
|
|
25
|
+
z189sj: ["f14olgbc", "f4yg0v8"]
|
|
26
26
|
},
|
|
27
27
|
large: {
|
|
28
28
|
i8kkvl: "fjuset5",
|
|
29
29
|
B2u0y6b: "f1xzfw5u",
|
|
30
|
-
uwmqm3: ["
|
|
31
|
-
z189sj: ["
|
|
30
|
+
uwmqm3: ["fzbt8k8", "fesbjht"],
|
|
31
|
+
z189sj: ["f11w4lch", "f1kw5ojf"]
|
|
32
32
|
},
|
|
33
33
|
input: {
|
|
34
|
-
uwmqm3: ["
|
|
34
|
+
uwmqm3: ["feaks35", "fzcul7f"],
|
|
35
35
|
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
36
36
|
Boqhc8c: "f18izjht",
|
|
37
37
|
B8uat0v: "fcoa6sg"
|
|
38
|
-
},
|
|
39
|
-
unfocusedNoContentAfter: {
|
|
40
|
-
z189sj: ["fhxju0i", "f1cnd47f"]
|
|
41
|
-
}
|
|
42
|
-
}, {
|
|
43
|
-
d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
|
|
44
|
-
});
|
|
45
|
-
const useInputStyles = /*#__PURE__*/__styles({
|
|
46
|
-
small: {
|
|
47
|
-
z189sj: ["fdw0yi8", "fk8j09s"]
|
|
48
|
-
},
|
|
49
|
-
medium: {
|
|
50
|
-
z189sj: ["f1vdfbxk", "f1f5gg8d"]
|
|
51
|
-
},
|
|
52
|
-
large: {
|
|
53
|
-
z189sj: ["f11gcy0p", "f1ng84yb"]
|
|
54
38
|
}
|
|
55
39
|
}, {
|
|
56
|
-
d: [".
|
|
40
|
+
d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".f1xer5qc{padding-left:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}", ".f1vwfgzu{padding-right:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}", ".f1rnmnj3{padding-right:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}", ".frcaq29{padding-left:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}", ".f1ga1vvr{padding-left:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}", ".f577s3h{padding-right:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}", ".f14olgbc{padding-right:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}", ".f4yg0v8{padding-left:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}", ".fzbt8k8{padding-left:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}", ".fesbjht{padding-right:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}", ".f11w4lch{padding-right:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}", ".f1kw5ojf{padding-left:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}", ".feaks35{padding-left:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}", ".fzcul7f{padding-right:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
|
|
57
41
|
});
|
|
58
42
|
const useContentAfterStyles = /*#__PURE__*/__styles({
|
|
59
43
|
contentAfter: {
|
|
60
|
-
uwmqm3: ["
|
|
61
|
-
i8kkvl: "
|
|
44
|
+
uwmqm3: ["f1miqibf", "flcjzay"],
|
|
45
|
+
i8kkvl: "flgljck"
|
|
62
46
|
},
|
|
63
47
|
rest: {
|
|
64
48
|
abs64n: "fk73vx1",
|
|
65
49
|
Bqenvij: "fniina8",
|
|
66
|
-
a9b677: "f3tsq5r"
|
|
67
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
|
50
|
+
a9b677: "f3tsq5r"
|
|
68
51
|
}
|
|
69
52
|
}, {
|
|
70
|
-
d: [".
|
|
53
|
+
d: [".f1miqibf{padding-left:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}", ".flcjzay{padding-right:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}", ".flgljck{column-gap:var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, var(--spacingHorizontalXS)));}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}"]
|
|
71
54
|
});
|
|
72
|
-
const useDismissClassName = /*#__PURE__*/__resetStyles("
|
|
55
|
+
const useDismissClassName = /*#__PURE__*/__resetStyles("r1ogwnmi", null, [".r1ogwnmi{box-sizing:border-box;color:var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}", ".r1ogwnmi>svg{font-size:20px;}"]);
|
|
73
56
|
const useDismissStyles = /*#__PURE__*/__styles({
|
|
74
57
|
disabled: {
|
|
75
|
-
sj55zd: "
|
|
58
|
+
sj55zd: "f4be25j"
|
|
76
59
|
},
|
|
77
60
|
small: {
|
|
78
61
|
Duoase: "f3qv9w"
|
|
@@ -82,7 +65,7 @@ const useDismissStyles = /*#__PURE__*/__styles({
|
|
|
82
65
|
Duoase: "f16u2scb"
|
|
83
66
|
}
|
|
84
67
|
}, {
|
|
85
|
-
d: [".
|
|
68
|
+
d: [".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
|
|
86
69
|
});
|
|
87
70
|
/**
|
|
88
71
|
* Apply styling to the SearchBox slots based on the state
|
|
@@ -96,12 +79,11 @@ export const useSearchBoxStyles_unstable = state => {
|
|
|
96
79
|
size
|
|
97
80
|
} = state;
|
|
98
81
|
const rootStyles = useRootStyles();
|
|
99
|
-
const inputStyles = useInputStyles();
|
|
100
82
|
const contentAfterStyles = useContentAfterStyles();
|
|
101
83
|
const dismissClassName = useDismissClassName();
|
|
102
84
|
const dismissStyles = useDismissStyles();
|
|
103
|
-
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size],
|
|
104
|
-
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input,
|
|
85
|
+
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
|
|
86
|
+
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
|
|
105
87
|
if (state.dismiss) {
|
|
106
88
|
state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
107
89
|
}
|
|
@@ -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","
|
|
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","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","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(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-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});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-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(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-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 contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, 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":[]}
|
|
@@ -24,17 +24,13 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
24
24
|
});
|
|
25
25
|
// Tracks the focus of the component for the contentAfter and dismiss button
|
|
26
26
|
const [focused, setFocused] = _react.useState(false);
|
|
27
|
-
const onFocus =
|
|
27
|
+
const onFocus = (0, _reactutilities.useEventCallback)(()=>{
|
|
28
28
|
setFocused(true);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
]);
|
|
32
|
-
const onBlur = _react.useCallback((ev)=>{
|
|
29
|
+
});
|
|
30
|
+
const onBlur = (0, _reactutilities.useEventCallback)((ev)=>{
|
|
33
31
|
var _searchBoxRootRef_current;
|
|
34
32
|
setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
|
|
35
|
-
}
|
|
36
|
-
setFocused
|
|
37
|
-
]);
|
|
33
|
+
});
|
|
38
34
|
const rootProps = _reactutilities.slot.resolveShorthand(root);
|
|
39
35
|
const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
|
|
40
36
|
var _props_onChange;
|
|
@@ -56,8 +52,8 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
56
52
|
root: _reactutilities.slot.always({
|
|
57
53
|
...rootProps,
|
|
58
54
|
ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
59
|
-
onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
60
|
-
onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
55
|
+
onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
|
|
56
|
+
onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
|
|
61
57
|
}, {
|
|
62
58
|
elementType: 'span'
|
|
63
59
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus =
|
|
1
|
+
{"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = useEventCallback(() => {\n setFocused(true);\n });\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n });\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),\n onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","React","useRef","searchBoxRef","internalValue","setInternalValue","useControllableState","state","defaultState","initialState","focused","setFocused","useState","onFocus","useEventCallback","onBlur","ev","current","contains","relatedTarget","rootProps","slot","resolveShorthand","handleDismissClick","event","isResolvedShorthand","onClick","newValue","onChange","inputState","useInput_unstable","type","always","useMergedRefs","mergeCallbacks","elementType","optional","renderByDefault","defaultProps","children","createElement","SearchRegular","target","components","DismissRegular","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -32,42 +32,42 @@ const searchBoxClassNames = {
|
|
|
32
32
|
i8kkvl: "fjuset5",
|
|
33
33
|
B2u0y6b: "f1xzfw5u",
|
|
34
34
|
uwmqm3: [
|
|
35
|
-
"
|
|
36
|
-
"
|
|
35
|
+
"f1xer5qc",
|
|
36
|
+
"f1vwfgzu"
|
|
37
37
|
],
|
|
38
38
|
z189sj: [
|
|
39
|
-
"
|
|
40
|
-
"
|
|
39
|
+
"f1rnmnj3",
|
|
40
|
+
"frcaq29"
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
43
|
medium: {
|
|
44
44
|
i8kkvl: "fjuset5",
|
|
45
45
|
B2u0y6b: "f1xzfw5u",
|
|
46
46
|
uwmqm3: [
|
|
47
|
-
"
|
|
48
|
-
"
|
|
47
|
+
"f1ga1vvr",
|
|
48
|
+
"f577s3h"
|
|
49
49
|
],
|
|
50
50
|
z189sj: [
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"f14olgbc",
|
|
52
|
+
"f4yg0v8"
|
|
53
53
|
]
|
|
54
54
|
},
|
|
55
55
|
large: {
|
|
56
56
|
i8kkvl: "fjuset5",
|
|
57
57
|
B2u0y6b: "f1xzfw5u",
|
|
58
58
|
uwmqm3: [
|
|
59
|
-
"
|
|
60
|
-
"
|
|
59
|
+
"fzbt8k8",
|
|
60
|
+
"fesbjht"
|
|
61
61
|
],
|
|
62
62
|
z189sj: [
|
|
63
|
-
"
|
|
64
|
-
"
|
|
63
|
+
"f11w4lch",
|
|
64
|
+
"f1kw5ojf"
|
|
65
65
|
]
|
|
66
66
|
},
|
|
67
67
|
input: {
|
|
68
68
|
uwmqm3: [
|
|
69
|
-
"
|
|
70
|
-
"
|
|
69
|
+
"feaks35",
|
|
70
|
+
"fzcul7f"
|
|
71
71
|
],
|
|
72
72
|
z189sj: [
|
|
73
73
|
"fhxju0i",
|
|
@@ -75,94 +75,61 @@ const searchBoxClassNames = {
|
|
|
75
75
|
],
|
|
76
76
|
Boqhc8c: "f18izjht",
|
|
77
77
|
B8uat0v: "fcoa6sg"
|
|
78
|
-
},
|
|
79
|
-
unfocusedNoContentAfter: {
|
|
80
|
-
z189sj: [
|
|
81
|
-
"fhxju0i",
|
|
82
|
-
"f1cnd47f"
|
|
83
|
-
]
|
|
84
78
|
}
|
|
85
79
|
}, {
|
|
86
80
|
d: [
|
|
87
81
|
".fjuset5{column-gap:0;}",
|
|
88
82
|
".f1xzfw5u{max-width:468px;}",
|
|
89
|
-
".
|
|
90
|
-
".
|
|
91
|
-
".
|
|
92
|
-
".
|
|
93
|
-
".
|
|
94
|
-
".
|
|
83
|
+
".f1xer5qc{padding-left:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
|
|
84
|
+
".f1vwfgzu{padding-right:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
|
|
85
|
+
".f1rnmnj3{padding-right:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
|
|
86
|
+
".frcaq29{padding-left:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
|
|
87
|
+
".f1ga1vvr{padding-left:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
|
|
88
|
+
".f577s3h{padding-right:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
|
|
89
|
+
".f14olgbc{padding-right:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
|
|
90
|
+
".f4yg0v8{padding-left:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
|
|
91
|
+
".fzbt8k8{padding-left:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
|
|
92
|
+
".fesbjht{padding-right:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
|
|
93
|
+
".f11w4lch{padding-right:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
|
|
94
|
+
".f1kw5ojf{padding-left:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
|
|
95
|
+
".feaks35{padding-left:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
|
|
96
|
+
".fzcul7f{padding-right:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
|
|
95
97
|
".fhxju0i{padding-right:0;}",
|
|
96
98
|
".f1cnd47f{padding-left:0;}",
|
|
97
99
|
".f18izjht::-webkit-search-decoration{display:none;}",
|
|
98
100
|
".fcoa6sg::-webkit-search-cancel-button{display:none;}"
|
|
99
101
|
]
|
|
100
102
|
});
|
|
101
|
-
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
102
|
-
small: {
|
|
103
|
-
z189sj: [
|
|
104
|
-
"fdw0yi8",
|
|
105
|
-
"fk8j09s"
|
|
106
|
-
]
|
|
107
|
-
},
|
|
108
|
-
medium: {
|
|
109
|
-
z189sj: [
|
|
110
|
-
"f1vdfbxk",
|
|
111
|
-
"f1f5gg8d"
|
|
112
|
-
]
|
|
113
|
-
},
|
|
114
|
-
large: {
|
|
115
|
-
z189sj: [
|
|
116
|
-
"f11gcy0p",
|
|
117
|
-
"f1ng84yb"
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
}, {
|
|
121
|
-
d: [
|
|
122
|
-
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
|
|
123
|
-
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
|
|
124
|
-
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
|
|
125
|
-
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
|
|
126
|
-
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
|
|
127
|
-
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"
|
|
128
|
-
]
|
|
129
|
-
});
|
|
130
103
|
const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
131
104
|
contentAfter: {
|
|
132
105
|
uwmqm3: [
|
|
133
|
-
"
|
|
134
|
-
"
|
|
106
|
+
"f1miqibf",
|
|
107
|
+
"flcjzay"
|
|
135
108
|
],
|
|
136
|
-
i8kkvl: "
|
|
109
|
+
i8kkvl: "flgljck"
|
|
137
110
|
},
|
|
138
111
|
rest: {
|
|
139
112
|
abs64n: "fk73vx1",
|
|
140
113
|
Bqenvij: "fniina8",
|
|
141
|
-
a9b677: "f3tsq5r"
|
|
142
|
-
uwmqm3: [
|
|
143
|
-
"f1cnd47f",
|
|
144
|
-
"fhxju0i"
|
|
145
|
-
]
|
|
114
|
+
a9b677: "f3tsq5r"
|
|
146
115
|
}
|
|
147
116
|
}, {
|
|
148
117
|
d: [
|
|
149
|
-
".
|
|
150
|
-
".
|
|
151
|
-
".
|
|
118
|
+
".f1miqibf{padding-left:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
|
|
119
|
+
".flcjzay{padding-right:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
|
|
120
|
+
".flgljck{column-gap:var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, var(--spacingHorizontalXS)));}",
|
|
152
121
|
".fk73vx1{opacity:0;}",
|
|
153
122
|
".fniina8{height:0;}",
|
|
154
|
-
".f3tsq5r{width:0;}"
|
|
155
|
-
".f1cnd47f{padding-left:0;}",
|
|
156
|
-
".fhxju0i{padding-right:0;}"
|
|
123
|
+
".f3tsq5r{width:0;}"
|
|
157
124
|
]
|
|
158
125
|
});
|
|
159
|
-
const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
160
|
-
".
|
|
161
|
-
".
|
|
126
|
+
const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1ogwnmi", null, [
|
|
127
|
+
".r1ogwnmi{box-sizing:border-box;color:var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
|
|
128
|
+
".r1ogwnmi>svg{font-size:20px;}"
|
|
162
129
|
]);
|
|
163
130
|
const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
164
131
|
disabled: {
|
|
165
|
-
sj55zd: "
|
|
132
|
+
sj55zd: "f4be25j"
|
|
166
133
|
},
|
|
167
134
|
small: {
|
|
168
135
|
Duoase: "f3qv9w"
|
|
@@ -173,7 +140,7 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
173
140
|
}
|
|
174
141
|
}, {
|
|
175
142
|
d: [
|
|
176
|
-
".
|
|
143
|
+
".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}",
|
|
177
144
|
".f3qv9w>svg{font-size:16px;}",
|
|
178
145
|
".f16u2scb>svg{font-size:24px;}"
|
|
179
146
|
]
|
|
@@ -182,12 +149,11 @@ const useSearchBoxStyles_unstable = (state)=>{
|
|
|
182
149
|
'use no memo';
|
|
183
150
|
const { disabled, focused, size } = state;
|
|
184
151
|
const rootStyles = useRootStyles();
|
|
185
|
-
const inputStyles = useInputStyles();
|
|
186
152
|
const contentAfterStyles = useContentAfterStyles();
|
|
187
153
|
const dismissClassName = useDismissClassName();
|
|
188
154
|
const dismissStyles = useDismissStyles();
|
|
189
|
-
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size],
|
|
190
|
-
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input,
|
|
155
|
+
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], state.root.className);
|
|
156
|
+
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, state.input.className);
|
|
191
157
|
if (state.dismiss) {
|
|
192
158
|
state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
193
159
|
}
|
|
@@ -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(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-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});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-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(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-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 contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, 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","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","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-20240816-2133.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-20240816-2133.1",
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.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-20240816-2133.1",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
|
|
39
39
|
"@griffel/react": "^1.5.22",
|
|
40
40
|
"@swc/helpers": "^0.5.1"
|
|
41
41
|
},
|