@fluentui/react-search 9.3.16 → 9.4.0
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 +13 -3
- package/dist/index.d.ts +21 -1
- package/lib/SearchBox.js +1 -1
- package/lib/SearchBox.js.map +1 -1
- package/lib/components/SearchBox/SearchBox.types.js.map +1 -1
- package/lib/components/SearchBox/index.js +1 -1
- package/lib/components/SearchBox/index.js.map +1 -1
- package/lib/components/SearchBox/renderSearchBox.js.map +1 -1
- package/lib/components/SearchBox/useSearchBox.js +28 -8
- package/lib/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/SearchBox.js +3 -0
- package/lib-commonjs/SearchBox.js.map +1 -1
- package/lib-commonjs/components/SearchBox/SearchBox.types.js.map +1 -1
- package/lib-commonjs/components/SearchBox/index.js +3 -0
- package/lib-commonjs/components/SearchBox/index.js.map +1 -1
- package/lib-commonjs/components/SearchBox/renderSearchBox.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBox.js +32 -11
- package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 26 Mar 2026 08:10:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 26 Mar 2026 08:10:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.3.16..@fluentui/react-search_v9.4.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add base hooks for SearchBox ([PR #35825](https://github.com/microsoft/fluentui/pull/35825) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-input to v9.8.0 ([PR #35824](https://github.com/microsoft/fluentui/pull/35824) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.16)
|
|
8
18
|
|
|
9
|
-
Wed, 11 Mar 2026 09:
|
|
19
|
+
Wed, 11 Mar 2026 09:22:22 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.3.15..@fluentui/react-search_v9.3.16)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
13
23
|
|
|
14
|
-
- Bump @fluentui/react-input to v9.7.16 ([PR #
|
|
24
|
+
- Bump @fluentui/react-input to v9.7.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
|
|
15
25
|
|
|
16
26
|
## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.15)
|
|
17
27
|
|
package/dist/index.d.ts
CHANGED
|
@@ -13,13 +13,23 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
13
13
|
/**
|
|
14
14
|
* Render the final JSX of SearchBox
|
|
15
15
|
*/
|
|
16
|
-
export declare const renderSearchBox_unstable: (state:
|
|
16
|
+
export declare const renderSearchBox_unstable: (state: SearchBoxBaseState) => JSXElement;
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* SearchBox component - TODO: add more docs
|
|
20
20
|
*/
|
|
21
21
|
export declare const SearchBox: ForwardRefComponent<SearchBoxProps>;
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* SearchBox base props — excludes design props (appearance, size).
|
|
25
|
+
*/
|
|
26
|
+
export declare type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* SearchBox base state — excludes design props (appearance, size).
|
|
30
|
+
*/
|
|
31
|
+
export declare type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;
|
|
32
|
+
|
|
23
33
|
/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */
|
|
24
34
|
export declare type SearchBoxChangeEvent = React_2.ChangeEvent<HTMLInputElement> | React_2.MouseEvent<HTMLSpanElement>;
|
|
25
35
|
|
|
@@ -61,6 +71,16 @@ export declare type SearchBoxState = ComponentState<SearchBoxSlots> & InputState
|
|
|
61
71
|
*/
|
|
62
72
|
export declare const useSearchBox_unstable: (props: SearchBoxProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxState;
|
|
63
73
|
|
|
74
|
+
/**
|
|
75
|
+
* Base hook for SearchBox component. Manages state related to controlled/uncontrolled
|
|
76
|
+
* value, focus tracking, dismiss button click handling, search icon slot, and
|
|
77
|
+
* input type="search" — without design props (size, appearance).
|
|
78
|
+
*
|
|
79
|
+
* @param props - props from this instance of SearchBox (without size, appearance)
|
|
80
|
+
* @param ref - reference to root HTMLElement of SearchBox
|
|
81
|
+
*/
|
|
82
|
+
export declare const useSearchBoxBase_unstable: (props: SearchBoxBaseProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxBaseState;
|
|
83
|
+
|
|
64
84
|
/**
|
|
65
85
|
* Apply styling to the SearchBox slots based on the state
|
|
66
86
|
*/
|
package/lib/SearchBox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { SearchBox, renderSearchBox_unstable, searchBoxClassNames, useSearchBoxStyles_unstable, useSearchBox_unstable } from './components/SearchBox/index';
|
|
1
|
+
export { SearchBox, renderSearchBox_unstable, searchBoxClassNames, useSearchBoxStyles_unstable, useSearchBox_unstable, useSearchBoxBase_unstable } from './components/SearchBox/index';
|
package/lib/SearchBox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxSlots,\n SearchBoxState,\n} from './components/SearchBox/index';\nexport {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxBaseProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseState,\n} from './components/SearchBox/index';\nexport {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n useSearchBoxBase_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable","useSearchBoxBase_unstable"],"mappings":"AAQA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,+BAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n /** Last element in the input, within the input border */\n dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n Omit<InputProps, 'onChange'> & {\n /**\n * Custom onChange callback.\n * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n * and an empty string as the `value` property of the data parameter\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n };\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n InputState &\n Required<Pick<InputState, 'size'>> &\n Required<Pick<SearchBoxProps, 'disabled'>> & {\n focused: boolean;\n };\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n /** Last element in the input, within the input border */\n dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n Omit<InputProps, 'onChange'> & {\n /**\n * Custom onChange callback.\n * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n * and an empty string as the `value` property of the data parameter\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n };\n\n/**\n * SearchBox base props — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n InputState &\n Required<Pick<InputState, 'size'>> &\n Required<Pick<SearchBoxProps, 'disabled'>> & {\n focused: boolean;\n };\n\n/**\n * SearchBox base state — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { SearchBox } from './SearchBox';
|
|
2
2
|
export { renderSearchBox_unstable } from './renderSearchBox';
|
|
3
|
-
export { useSearchBox_unstable } from './useSearchBox';
|
|
3
|
+
export { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';
|
|
4
4
|
export { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxBaseProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseState,\n} from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","useSearchBoxBase_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AASxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/renderSearchBox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/renderSearchBox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SearchBoxBaseState, SearchBoxSlots } from './SearchBox.types';\n\n/**\n * Render the final JSX of SearchBox\n */\nexport const renderSearchBox_unstable = (state: SearchBoxBaseState): JSXElement => {\n assertSlots<SearchBoxSlots>(state);\n\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && (\n <state.contentAfter>\n {state.contentAfter.children}\n {state.dismiss && <state.dismiss />}\n </state.contentAfter>\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSearchBox_unstable","state","root","contentBefore","input","contentAfter","children","dismiss"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBACjB,MAACJ,MAAMI,YAAY;;oBAChBJ,MAAMI,YAAY,CAACC,QAAQ;oBAC3BL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;;;AAK1C,EAAE"}
|
|
@@ -12,7 +12,33 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
12
12
|
* @param props - props from this instance of SearchBox
|
|
13
13
|
* @param ref - reference to root HTMLElement of SearchBox
|
|
14
14
|
*/ export const useSearchBox_unstable = (props, ref)=>{
|
|
15
|
-
const { size = 'medium',
|
|
15
|
+
const { size = 'medium', appearance = 'outline', ...baseProps } = props;
|
|
16
|
+
const state = useSearchBoxBase_unstable(baseProps, ref);
|
|
17
|
+
if (state.contentBefore) {
|
|
18
|
+
var _state_contentBefore;
|
|
19
|
+
var _children;
|
|
20
|
+
(_children = (_state_contentBefore = state.contentBefore).children) !== null && _children !== void 0 ? _children : _state_contentBefore.children = /*#__PURE__*/ React.createElement(SearchRegular, null);
|
|
21
|
+
}
|
|
22
|
+
if (state.dismiss) {
|
|
23
|
+
var _state_dismiss;
|
|
24
|
+
var _children1;
|
|
25
|
+
(_children1 = (_state_dismiss = state.dismiss).children) !== null && _children1 !== void 0 ? _children1 : _state_dismiss.children = /*#__PURE__*/ React.createElement(DismissRegular, null);
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
...state,
|
|
29
|
+
size,
|
|
30
|
+
appearance
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Base hook for SearchBox component. Manages state related to controlled/uncontrolled
|
|
35
|
+
* value, focus tracking, dismiss button click handling, search icon slot, and
|
|
36
|
+
* input type="search" — without design props (size, appearance).
|
|
37
|
+
*
|
|
38
|
+
* @param props - props from this instance of SearchBox (without size, appearance)
|
|
39
|
+
* @param ref - reference to root HTMLElement of SearchBox
|
|
40
|
+
*/ export const useSearchBoxBase_unstable = (props, ref)=>{
|
|
41
|
+
const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;
|
|
16
42
|
const searchBoxRootRef = React.useRef(null);
|
|
17
43
|
const searchBoxRef = React.useRef(null);
|
|
18
44
|
const [internalValue, setInternalValue] = useControllableState({
|
|
@@ -50,7 +76,6 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
50
76
|
const inputState = useInput_unstable({
|
|
51
77
|
type: 'search',
|
|
52
78
|
disabled,
|
|
53
|
-
size,
|
|
54
79
|
value: internalValue,
|
|
55
80
|
root: slot.always({
|
|
56
81
|
...rootProps,
|
|
@@ -62,9 +87,6 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
62
87
|
}),
|
|
63
88
|
contentBefore: slot.optional(contentBefore, {
|
|
64
89
|
renderByDefault: true,
|
|
65
|
-
defaultProps: {
|
|
66
|
-
children: /*#__PURE__*/ React.createElement(SearchRegular, null)
|
|
67
|
-
},
|
|
68
90
|
elementType: 'span'
|
|
69
91
|
}),
|
|
70
92
|
contentAfter: slot.optional(contentAfter, {
|
|
@@ -90,7 +112,6 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
90
112
|
},
|
|
91
113
|
dismiss: slot.optional(dismiss, {
|
|
92
114
|
defaultProps: {
|
|
93
|
-
children: /*#__PURE__*/ React.createElement(DismissRegular, null),
|
|
94
115
|
role: 'button',
|
|
95
116
|
'aria-label': 'clear',
|
|
96
117
|
tabIndex: -1
|
|
@@ -99,8 +120,7 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
99
120
|
elementType: 'span'
|
|
100
121
|
}),
|
|
101
122
|
disabled,
|
|
102
|
-
focused
|
|
103
|
-
size
|
|
123
|
+
focused
|
|
104
124
|
};
|
|
105
125
|
if (state.dismiss) {
|
|
106
126
|
state.dismiss.onClick = handleDismissClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} 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 { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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 = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\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 searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\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: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,mBAAmB,EACnBC,cAAc,EACdC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AACnC,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,cAAc,EAAEC,aAAa,QAAQ,wBAAwB;AAUtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAClE,MAAMK,QAAQC,0BAA0BF,WAAWH;IAEnD,IAAII,MAAME,aAAa,EAAE;YACvBF;;QAAAA,cAAAA,uBAAAA,MAAME,aAAa,EAACC,yDAApBH,qBAAoBG,yBAAa,oBAACV;IACpC;IAEA,IAAIO,MAAMI,OAAO,EAAE;YACjBJ;;QAAAA,eAAAA,iBAAAA,MAAMI,OAAO,EAACD,2DAAdH,eAAcG,yBAAa,oBAACX;IAC9B;IAEA,OAAO;QACL,GAAGQ,KAAK;QACRH;QACAC;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMG,4BAA4B,CACvCN,OACAC;IAEA,MAAM,EAAES,WAAW,KAAK,EAAEC,IAAI,EAAEJ,aAAa,EAAEE,OAAO,EAAEG,YAAY,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGC,YAAY,GAAGf;IAE7G,MAAMgB,mBAAmB3B,MAAM4B,MAAM,CAAiB;IACtD,MAAMC,eAAe7B,MAAM4B,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,GAAG3B,qBAAqB;QAC7DY,OAAOQ;QACPQ,cAAcP;QACdQ,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAGnC,MAAMoC,QAAQ,CAAC;IAE7C,MAAMC,UAAUrC,MAAMsC,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDvC,MAAMsC,WAAW,CACxEE,CAAAA;YACeb;QAAbQ,WAAW,CAAC,GAACR,4BAAAA,iBAAiBc,OAAO,cAAxBd,gDAAAA,0BAA0Be,QAAQ,CAACF,GAAGG,aAAa;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYzC,KAAK0C,gBAAgB,CAACvB;IAExC,MAAMwB,qBAAqBzC,iBAAiB,CAAC0C;YAM3CpC,iBAEAkB;QAPA,IAAI5B,oBAAoBmB,UAAU;gBAChCA;aAAAA,mBAAAA,QAAQ4B,OAAO,cAAf5B,uCAAAA,sBAAAA,SAAkB2B;QACpB;QACA,MAAME,WAAW;QACjBlB,iBAAiBkB;SACjBtC,kBAAAA,MAAMuC,QAAQ,cAAdvC,sCAAAA,qBAAAA,OAAiBoC,OAAO;YAAEvB,OAAOyB;QAAS;SAE1CpB,wBAAAA,aAAaY,OAAO,cAApBZ,4CAAAA,sBAAsBsB,KAAK;IAC7B;IAEA,MAAMC,aAAa7C,kBACjB;QACE8C,MAAM;QACNhC;QACAG,OAAOM;QACPR,MAAMnB,KAAKmD,MAAM,CACf;YACE,GAAGV,SAAS;YACZhC,KAAKN,cAAcsC,sBAAAA,gCAAAA,UAAWhC,GAAG,EAAEe;YACnCU,SAASnC,eAAe0C,sBAAAA,gCAAAA,UAAWP,OAAO,EAAEA;YAC5CE,QAAQrC,eAAe0C,sBAAAA,gCAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEgB,aAAa;QACf;QAEFrC,eAAef,KAAKqD,QAAQ,CAACtC,eAAe;YAC1CuC,iBAAiB;YACjBF,aAAa;QACf;QACAhC,cAAcpB,KAAKqD,QAAQ,CAACjC,cAAc;YACxCkC,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAG7B,UAAU;QACbwB,UAAU7C,iBAAiBmC,CAAAA;gBAEzB7B;YADA,MAAMsC,WAAWT,GAAGkB,MAAM,CAAClC,KAAK;aAChCb,kBAAAA,MAAMuC,QAAQ,cAAdvC,sCAAAA,qBAAAA,OAAiB6B,IAAI;gBAAEhB,OAAOyB;YAAS;YACvClB,iBAAiBkB;QACnB;IACF,GACA3C,cAAcuB,cAAcjB;IAG9B,MAAMI,QAA4B;QAChC,GAAGoC,UAAU;QACbO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,WAAWO,UAAU;YACxBvC,SAAS;QACX;QACAA,SAASjB,KAAKqD,QAAQ,CAACpC,SAAS;YAC9BwC,cAAc;gBACZC,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAL,iBAAiB;YACjBF,aAAa;QACf;QACAlC;QACAa;IACF;IAEA,IAAIlB,MAAMI,OAAO,EAAE;QACjBJ,MAAMI,OAAO,CAAC4B,OAAO,GAAGF;IAC1B;IAEA,OAAO9B;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { SearchBox, renderSearchBox_unstable, searchBoxClassNames, useSearchBoxStyles_unstable, useSearchBox_unstable } from './SearchBox';
|
|
1
|
+
export { SearchBox, renderSearchBox_unstable, searchBoxClassNames, useSearchBoxStyles_unstable, useSearchBox_unstable, useSearchBoxBase_unstable } from './SearchBox';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n} from './SearchBox';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n useSearchBoxBase_unstable,\n} from './SearchBox';\nexport type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseProps,\n SearchBoxBaseState,\n} from './SearchBox';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable","useSearchBoxBase_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,cAAc"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
searchBoxClassNames: function() {
|
|
19
19
|
return _index.searchBoxClassNames;
|
|
20
20
|
},
|
|
21
|
+
useSearchBoxBase_unstable: function() {
|
|
22
|
+
return _index.useSearchBoxBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useSearchBoxStyles_unstable: function() {
|
|
22
25
|
return _index.useSearchBoxStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxSlots,\n SearchBoxState,\n} from './components/SearchBox/index';\nexport {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxBaseProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseState,\n} from './components/SearchBox/index';\nexport {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n useSearchBoxBase_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable","useSearchBoxBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,gBAAS;;;eACTC,+BAAwB;;;eACxBC,0BAAmB;;;eAGnBG,gCAAyB;;;eAFzBF,kCAA2B;;;eAC3BC,4BAAqB;;;uBAEhB,+BAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n /** Last element in the input, within the input border */\n dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n Omit<InputProps, 'onChange'> & {\n /**\n * Custom onChange callback.\n * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n * and an empty string as the `value` property of the data parameter\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n };\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n InputState &\n Required<Pick<InputState, 'size'>> &\n Required<Pick<SearchBoxProps, 'disabled'>> & {\n focused: boolean;\n };\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n /** Last element in the input, within the input border */\n dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n // `children` is unsupported. The rest of these native props have customized definitions.\n 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n Omit<InputProps, 'onChange'> & {\n /**\n * Custom onChange callback.\n * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n * and an empty string as the `value` property of the data parameter\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n };\n\n/**\n * SearchBox base props — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n InputState &\n Required<Pick<InputState, 'size'>> &\n Required<Pick<SearchBoxProps, 'disabled'>> & {\n focused: boolean;\n };\n\n/**\n * SearchBox base state — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
searchBoxClassNames: function() {
|
|
19
19
|
return _useSearchBoxStylesstyles.searchBoxClassNames;
|
|
20
20
|
},
|
|
21
|
+
useSearchBoxBase_unstable: function() {
|
|
22
|
+
return _useSearchBox.useSearchBoxBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useSearchBoxStyles_unstable: function() {
|
|
22
25
|
return _useSearchBoxStylesstyles.useSearchBoxStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxBaseProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseState,\n} from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","useSearchBoxBase_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eASTC,yCAAwB;;;eAExBG,6CAAmB;;;eADID,uCAAyB;;;eAC3BE,qDAA2B;;;eADhDH,mCAAqB;;;2BAVJ,cAAc;iCASC,oBAAoB;8BACI,iBAAiB;0CACjB,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/renderSearchBox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/renderSearchBox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SearchBoxBaseState, SearchBoxSlots } from './SearchBox.types';\n\n/**\n * Render the final JSX of SearchBox\n */\nexport const renderSearchBox_unstable = (state: SearchBoxBaseState): JSXElement => {\n assertSlots<SearchBoxSlots>(state);\n\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && (\n <state.contentAfter>\n {state.contentAfter.children}\n {state.dismiss && <state.dismiss />}\n </state.contentAfter>\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSearchBox_unstable","state","root","contentBefore","input","contentAfter","children","dismiss"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,aAAa,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,aAAa,EAAA,CAAA;8BAC5C,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXH,MAAMI,YAAY,IAAA,WAAA,OACjB,gBAAA,EAACJ,MAAMI,YAAY,EAAA;;oBAChBJ,MAAMI,YAAY,CAACC,QAAQ;oBAC3BL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;;;AAK1C,EAAE"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useSearchBoxBase_unstable: function() {
|
|
14
|
+
return useSearchBoxBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useSearchBox_unstable: function() {
|
|
9
17
|
return useSearchBox_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -15,7 +23,26 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
15
23
|
const _reactinput = require("@fluentui/react-input");
|
|
16
24
|
const _reacticons = require("@fluentui/react-icons");
|
|
17
25
|
const useSearchBox_unstable = (props, ref)=>{
|
|
18
|
-
const { size = 'medium',
|
|
26
|
+
const { size = 'medium', appearance = 'outline', ...baseProps } = props;
|
|
27
|
+
const state = useSearchBoxBase_unstable(baseProps, ref);
|
|
28
|
+
if (state.contentBefore) {
|
|
29
|
+
var _state_contentBefore;
|
|
30
|
+
var _children;
|
|
31
|
+
(_children = (_state_contentBefore = state.contentBefore).children) !== null && _children !== void 0 ? _children : _state_contentBefore.children = /*#__PURE__*/ _react.createElement(_reacticons.SearchRegular, null);
|
|
32
|
+
}
|
|
33
|
+
if (state.dismiss) {
|
|
34
|
+
var _state_dismiss;
|
|
35
|
+
var _children1;
|
|
36
|
+
(_children1 = (_state_dismiss = state.dismiss).children) !== null && _children1 !== void 0 ? _children1 : _state_dismiss.children = /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null);
|
|
37
|
+
}
|
|
38
|
+
return {
|
|
39
|
+
...state,
|
|
40
|
+
size,
|
|
41
|
+
appearance
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
const useSearchBoxBase_unstable = (props, ref)=>{
|
|
45
|
+
const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;
|
|
19
46
|
const searchBoxRootRef = _react.useRef(null);
|
|
20
47
|
const searchBoxRef = _react.useRef(null);
|
|
21
48
|
const [internalValue, setInternalValue] = (0, _reactutilities.useControllableState)({
|
|
@@ -53,7 +80,6 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
53
80
|
const inputState = (0, _reactinput.useInput_unstable)({
|
|
54
81
|
type: 'search',
|
|
55
82
|
disabled,
|
|
56
|
-
size,
|
|
57
83
|
value: internalValue,
|
|
58
84
|
root: _reactutilities.slot.always({
|
|
59
85
|
...rootProps,
|
|
@@ -65,9 +91,6 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
65
91
|
}),
|
|
66
92
|
contentBefore: _reactutilities.slot.optional(contentBefore, {
|
|
67
93
|
renderByDefault: true,
|
|
68
|
-
defaultProps: {
|
|
69
|
-
children: /*#__PURE__*/ _react.createElement(_reacticons.SearchRegular, null)
|
|
70
|
-
},
|
|
71
94
|
elementType: 'span'
|
|
72
95
|
}),
|
|
73
96
|
contentAfter: _reactutilities.slot.optional(contentAfter, {
|
|
@@ -93,7 +116,6 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
93
116
|
},
|
|
94
117
|
dismiss: _reactutilities.slot.optional(dismiss, {
|
|
95
118
|
defaultProps: {
|
|
96
|
-
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
|
|
97
119
|
role: 'button',
|
|
98
120
|
'aria-label': 'clear',
|
|
99
121
|
tabIndex: -1
|
|
@@ -102,8 +124,7 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
102
124
|
elementType: 'span'
|
|
103
125
|
}),
|
|
104
126
|
disabled,
|
|
105
|
-
focused
|
|
106
|
-
size
|
|
127
|
+
focused
|
|
107
128
|
};
|
|
108
129
|
if (state.dismiss) {
|
|
109
130
|
state.dismiss.onClick = handleDismissClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} 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 { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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 = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\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 searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\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: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
searchBoxClassNames: function() {
|
|
19
19
|
return _SearchBox.searchBoxClassNames;
|
|
20
20
|
},
|
|
21
|
+
useSearchBoxBase_unstable: function() {
|
|
22
|
+
return _SearchBox.useSearchBoxBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useSearchBoxStyles_unstable: function() {
|
|
22
25
|
return _SearchBox.useSearchBoxStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n} from './SearchBox';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SearchBox,\n renderSearchBox_unstable,\n searchBoxClassNames,\n useSearchBoxStyles_unstable,\n useSearchBox_unstable,\n useSearchBoxBase_unstable,\n} from './SearchBox';\nexport type {\n SearchBoxChangeEvent,\n SearchBoxProps,\n SearchBoxSlots,\n SearchBoxState,\n SearchBoxBaseProps,\n SearchBoxBaseState,\n} from './SearchBox';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable","useSearchBoxBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,oBAAS;;;eACTC,mCAAwB;;;eACxBC,8BAAmB;;;eAGnBG,oCAAyB;;;eAFzBF,sCAA2B;;;eAC3BC,gCAAqB;;;2BAEhB,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-search",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.0",
|
|
4
4
|
"description": "Search input for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-icons": "^2.0.245",
|
|
16
|
-
"@fluentui/react-input": "^9.
|
|
16
|
+
"@fluentui/react-input": "^9.8.0",
|
|
17
17
|
"@fluentui/react-jsx-runtime": "^9.4.1",
|
|
18
18
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
19
19
|
"@fluentui/react-theme": "^9.2.1",
|