Skip to content

Commit 08af7bb

Browse files
jzempeljzempel
authored
fix(combobox): stabilize IDs and add missing hint/message props (#1614)
1 parent e3bf11c commit 08af7bb

File tree

9 files changed

+107
-44
lines changed

9 files changed

+107
-44
lines changed

‎packages/dropdowns.next/.size-snapshot.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
{
22
"index.cjs.js": {
3-
"bundled": 55827,
4-
"minified": 40541,
5-
"gzipped": 9265
3+
"bundled": 56744,
4+
"minified": 40969,
5+
"gzipped": 9398
66
},
77
"index.esm.js": {
8-
"bundled": 51178,
9-
"minified": 36136,
10-
"gzipped": 8689,
8+
"bundled": 52071,
9+
"minified": 36540,
10+
"gzipped": 8814,
1111
"treeshaked": {
1212
"rollup": {
13-
"code": 28449,
13+
"code": 28825,
1414
"import_statements": 1064
1515
},
1616
"webpack": {
17-
"code": 31324
17+
"code": 31754
1818
}
1919
}
2020
}

‎packages/dropdowns.next/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"types": "dist/typings/index.d.ts",
2323
"dependencies": {
2424
"@floating-ui/react-dom": "^2.0.0",
25-
"@zendeskgarden/container-combobox": "^1.0.6",
25+
"@zendeskgarden/container-combobox": "^1.0.9",
2626
"@zendeskgarden/container-utilities": "^1.0.0",
2727
"@zendeskgarden/react-forms": "^8.69.9",
2828
"@zendeskgarden/react-tags": "^8.69.9",

‎packages/dropdowns.next/src/context/useFieldContext.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import { LabelHTMLAttributes, createContext, useContext } from 'react';
8+
import { HTMLAttributes, LabelHTMLAttributes, createContext, useContext } from 'react';
99

1010
export const FieldContext = createContext<
1111
| {
1212
labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
1313
setLabelProps: (labelProps?: LabelHTMLAttributes<HTMLLabelElement>) => void;
1414
hasHint: boolean;
1515
setHasHint: (hasHint: boolean) => void;
16+
hintProps?: HTMLAttributes<HTMLDivElement>;
17+
setHintProps: (hintProps?: HTMLAttributes<HTMLDivElement>) => void;
1618
hasMessage: boolean;
1719
setHasMessage: (hasMessage: boolean) => void;
20+
messageProps?: HTMLAttributes<HTMLDivElement>;
21+
setMessageProps: (messageProps?: HTMLAttributes<HTMLDivElement>) => void;
1822
}
1923
| undefined
2024
>(undefined);

‎packages/dropdowns.next/src/elements/combobox/Combobox.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,16 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
8080
},
8181
ref
8282
) => {
83-
const { hasHint, hasMessage, labelProps, setLabelProps } = useFieldContext();
83+
const {
84+
hasHint,
85+
hasMessage,
86+
labelProps,
87+
setLabelProps,
88+
hintProps,
89+
setHintProps,
90+
messageProps,
91+
setMessageProps
92+
} = useFieldContext();
8493
const [isInputHidden, setIsInputHidden] = useState(true);
8594
const [isLabelHovered, setIsLabelHovered] = useState(false);
8695
const [isTagGroupExpanded, setIsTagGroupExpanded] = useState(false);
@@ -108,9 +117,11 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
108117
inputValue,
109118
isExpanded,
110119
getTriggerProps,
120+
getHintProps,
111121
getInputProps,
112122
getLabelProps,
113123
getListboxProps,
124+
getMessageProps,
114125
getOptionProps,
115126
getOptGroupProps,
116127
getTagProps,
@@ -228,6 +239,28 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
228239
return () => labelProps && setLabelProps(undefined);
229240
}, [getLabelProps, labelProps, setLabelProps]);
230241

242+
useEffect(() => {
243+
// context callback
244+
if (!hintProps) {
245+
const _hintProps = getHintProps() as HTMLAttributes<HTMLDivElement>;
246+
247+
setHintProps(_hintProps);
248+
}
249+
250+
return () => hintProps && setHintProps(undefined);
251+
}, [getHintProps, hintProps, setHintProps]);
252+
253+
useEffect(() => {
254+
// context callback
255+
if (!messageProps) {
256+
const _messageProps = getMessageProps() as HTMLAttributes<HTMLDivElement>;
257+
258+
setMessageProps(_messageProps);
259+
}
260+
261+
return () => messageProps && setMessageProps(undefined);
262+
}, [getMessageProps, messageProps, setMessageProps]);
263+
231264
return (
232265
<ComboboxContext.Provider value={contextValue}>
233266
<StyledCombobox

‎packages/dropdowns.next/src/elements/combobox/Field.tsx

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,37 @@ export const Field = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
1616
const [labelProps, setLabelProps] = useState<LabelHTMLAttributes<HTMLLabelElement> | undefined>(
1717
undefined
1818
);
19+
const [hintProps, setHintProps] = useState<HTMLAttributes<HTMLDivElement> | undefined>(undefined);
20+
const [messageProps, setMessageProps] = useState<HTMLAttributes<HTMLDivElement> | undefined>(
21+
undefined
22+
);
1923
const [hasHint, setHasHint] = useState(false);
2024
const [hasMessage, setHasMessage] = useState(false);
2125
const contextValue = useMemo(
22-
() => ({ labelProps, setLabelProps, hasHint, setHasHint, hasMessage, setHasMessage }),
23-
[labelProps, setLabelProps, hasHint, setHasHint, hasMessage, setHasMessage]
26+
() => ({
27+
labelProps,
28+
setLabelProps,
29+
hasHint,
30+
setHasHint,
31+
hintProps,
32+
setHintProps,
33+
hasMessage,
34+
setHasMessage,
35+
messageProps,
36+
setMessageProps
37+
}),
38+
[
39+
labelProps,
40+
setLabelProps,
41+
hasHint,
42+
setHasHint,
43+
hintProps,
44+
setHintProps,
45+
hasMessage,
46+
setHasMessage,
47+
messageProps,
48+
setMessageProps
49+
]
2450
);
2551

2652
return (

‎packages/dropdowns.next/src/elements/combobox/Hint.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ import { StyledHint } from '../../views';
1313
* @extends HTMLAttributes<HTMLDivElement>
1414
*/
1515
export const Hint = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
16-
const { setHasHint } = useFieldContext();
16+
const { hintProps, setHasHint } = useFieldContext();
1717

1818
useEffect(() => {
1919
setHasHint(true);
2020

2121
return () => setHasHint(false);
2222
}, [setHasHint]);
2323

24-
return <StyledHint {...props} ref={ref} />;
24+
return <StyledHint {...hintProps} {...props} ref={ref} />;
2525
});
2626

2727
Hint.displayName = 'Hint';

‎packages/dropdowns.next/src/elements/combobox/Message.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ import { StyledMessage } from '../../views';
1616
* @extends HTMLAttributes<HTMLDivElement>
1717
*/
1818
export const Message = forwardRef<HTMLDivElement, IMessageProps>((props, ref) => {
19-
const { setHasMessage } = useFieldContext();
19+
const { messageProps, setHasMessage } = useFieldContext();
2020

2121
useEffect(() => {
2222
setHasMessage(true);
2323

2424
return () => setHasMessage(false);
2525
}, [setHasMessage]);
2626

27-
return <StyledMessage {...props} ref={ref} />;
27+
return <StyledMessage {...messageProps} {...props} ref={ref} />;
2828
});
2929

3030
Message.displayName = 'Message';

‎packages/dropdowns.next/src/types/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export interface IComboboxProps extends HTMLAttributes<HTMLDivElement> {
116116
*
117117
* @param {number} value The number of hidden items
118118
*
119-
* @returns a replacement for the "+ N more" text
119+
* @returns {string} a replacement for the "+ N more" text
120120
*/
121121
renderExpandTags?: (value: number) => string;
122122
/**
@@ -125,7 +125,7 @@ export interface IComboboxProps extends HTMLAttributes<HTMLDivElement> {
125125
* @param {object|object[]} options.selection Current selection
126126
* @param {string} [options.inputValue] Current input value
127127
*
128-
* @returns content for the current combobox value
128+
* @returns {Object} content for the current combobox value
129129
*/
130130
renderValue?: (options: {
131131
selection: IUseComboboxReturnValue['selection'];

‎packages/dropdowns.next/yarn.lock

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@
4848
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
4949
integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
5050

51-
"@zendeskgarden/container-combobox@^1.0.6":
52-
version "1.0.8"
53-
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-combobox/-/container-combobox-1.0.8.tgz#9ad7d0fe9264542cc643d6bb9ab38df9986b96c4"
54-
integrity sha512-i1CJ2fRzDL1ZsRyaGh2rX/gl3qxe+o5VnuLDlcaBEyalYzWBbWqUagBczxK91cGaWAjqEQAfXY2Vu0NhrcvAfA==
51+
"@zendeskgarden/container-combobox@^1.0.9":
52+
version "1.0.9"
53+
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-combobox/-/container-combobox-1.0.9.tgz#2c20893fb1f95bc6eade3b6e9c598e1674bc98f6"
54+
integrity sha512-YgFu9ajIUgC477uAMs9gt8ZDwzvAxhSD7lZhScR9rww1nevI8f40kTvtkNcuCeW5MrluwIHQiJbyFmHOxb8hbw==
5555
dependencies:
5656
"@babel/runtime" "^7.8.4"
57-
"@zendeskgarden/container-field" "^3.0.9"
57+
"@zendeskgarden/container-field" "^3.0.10"
5858
"@zendeskgarden/container-utilities" "^1.0.10"
5959
downshift "^8.0.0"
6060

@@ -66,10 +66,10 @@
6666
"@babel/runtime" "^7.8.4"
6767
react-uid "^2.2.0"
6868

69-
"@zendeskgarden/container-field@^3.0.9":
70-
version "3.0.9"
71-
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-field/-/container-field-3.0.9.tgz#3741e83c7eb9e28f595610ed8bf443cec62ca98c"
72-
integrity sha512-Y8QnvcfKFnnxDSgAosMYutfJXIggZqS0zWvAdCiFI5SHuYFU4O3Ugj7sXcfNdANBEXH6viT1yod0g5ysge1lSw==
69+
"@zendeskgarden/container-field@^3.0.10":
70+
version "3.0.10"
71+
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-field/-/container-field-3.0.10.tgz#55c0876104b71fe6221a968ff41c19719ba38936"
72+
integrity sha512-TiFqgD1QeSPHm5jwy5SHAbWqZY8pFytyc6PykYRA7kmdEM3pED/ULa4jx5XldZ6OdJXxli+rGaaF64a/Fr2FzQ==
7373
dependencies:
7474
"@babel/runtime" "^7.8.4"
7575
"@zendeskgarden/container-utilities" "^1.0.10"
@@ -106,10 +106,10 @@
106106
"@babel/runtime" "^7.8.4"
107107
"@reach/auto-id" "^0.18.0"
108108

109-
"@zendeskgarden/react-forms@^8.69.8":
110-
version "8.69.8"
111-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.8.tgz#90e1d033a1d74ee4c5a60117f416a909077efbe5"
112-
integrity sha512-IqvKIsrGpb2xbFuLiOxDy+J/PlJfhSwu0WhT2LQ9fwGcnps1O9Z3QbkrPECqXsBddyhq6YvaggHplyLPFuO3zQ==
109+
"@zendeskgarden/react-forms@^8.69.9":
110+
version "8.69.9"
111+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.9.tgz#8036e51cb825934b5de74f3bdee6a8f8293a0913"
112+
integrity sha512-glkLVbYTXOVrkNMi9W0YcAooQ8y8kcTfJhEZMbKCk4ekVpDKk1GmIJtS/nlZYOFQhyAXr913qaiFXnkCih3HbA==
113113
dependencies:
114114
"@zendeskgarden/container-field" "^2.1.0"
115115
"@zendeskgarden/container-slider" "^0.1.1"
@@ -119,30 +119,30 @@
119119
prop-types "^15.5.7"
120120
react-merge-refs "^1.1.0"
121121

122-
"@zendeskgarden/react-tags@^8.69.8":
123-
version "8.69.8"
124-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.8.tgz#f1bc99a0d2fffc3402fa449fe8c0fe47e52f0136"
125-
integrity sha512-4rNJcGe/yIDXURNJpoLprNbypdAuPBCVVV8LPPpBGqxKKciAC7iiMHDiFDOVYN06YTTy43Pbbj9YOdZU/zdQow==
122+
"@zendeskgarden/react-tags@^8.69.9":
123+
version "8.69.9"
124+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.9.tgz#cff6f852ceaaedc4d804d60c0db0aef06c394670"
125+
integrity sha512-8VE0KoHtG7h/IepyseEcbqSDWnWiaoxAL5gXS/TxiCTq2aw1+N3yF9rwJ7VJyf/6wa2QVI3oqfyllBxqny5Cog==
126126
dependencies:
127127
"@zendeskgarden/container-utilities" "^1.0.0"
128128
polished "^4.0.0"
129129
prop-types "^15.5.7"
130130

131-
"@zendeskgarden/react-theming@^8.69.8":
132-
version "8.69.8"
133-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.8.tgz#c98a9a45cba72bb7322e266ca505bd5585b60425"
134-
integrity sha512-TAMpl98UtcdYIp4WFCwf3+CqZSUvfeyagO9kAYoPEks06ypu62+lbiKSVaI565loiK6KpvBQwcpysHwbeXrH4g==
131+
"@zendeskgarden/react-theming@^8.69.9":
132+
version "8.69.9"
133+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.9.tgz#966e5cd4fb4a3ee8e5c0956abf6fb0cf23237952"
134+
integrity sha512-hSYt/tzoHdRfgfSGu33+KwEVjygo3S9IekrAIug6HK0Azg7KmCR5RgtCFjIw52oP9Xp4otMHKU7BgFvMVSdUYQ==
135135
dependencies:
136136
"@zendeskgarden/container-focusvisible" "^1.0.0"
137137
"@zendeskgarden/container-utilities" "^1.0.0"
138138
lodash.memoize "^4.1.2"
139139
polished "^4.0.0"
140140
prop-types "^15.5.7"
141141

142-
"@zendeskgarden/react-tooltips@^8.69.8":
143-
version "8.69.8"
144-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.8.tgz#757d877efc61880ebbb375eb5be175aa691aa62c"
145-
integrity sha512-VPvoDjpdIPFg38zSJ5KRhEqcym8hy4+7bnl0/jTyNUveHlY4BSFe+8y+X8zqTTeSWGh9sw2NHtOE8P+4MUY0sQ==
142+
"@zendeskgarden/react-tooltips@^8.69.9":
143+
version "8.69.9"
144+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.9.tgz#44edbc9bea4090ad95c0e80323218356603e14fa"
145+
integrity sha512-+lLaidUGKfhnaqAA+iJGi4wEN5f9x8XN3AYjhxNtdoA1CP1MMz03xSnBa1o1PS8Htc6cVei8lCIQkAKPC1AnHA==
146146
dependencies:
147147
"@zendeskgarden/container-tooltip" "^1.0.0"
148148
"@zendeskgarden/container-utilities" "^1.0.0"

0 commit comments

Comments
 (0)