@rh-support/components 2.6.45 → 2.6.49

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.
Files changed (15) hide show
  1. package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts +2 -0
  2. package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map +1 -1
  3. package/lib/esm/Functional/CaseContactsSelectorExternal.js +71 -14
  4. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts +2 -0
  5. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts.map +1 -1
  6. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js +8 -2
  7. package/lib/esm/PhoneInput/CountryData.js +1 -1
  8. package/lib/esm/PhoneInput/PhoneInput.d.ts +13 -0
  9. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  10. package/lib/esm/PhoneInput/PhoneInput.js +32 -10
  11. package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts +4 -0
  12. package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts.map +1 -1
  13. package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js +20 -5
  14. package/lib/esm/index.js +1 -1
  15. package/package.json +5 -5
package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts CHANGED
@@ -27,9 +27,11 @@ interface IProps extends IDClassNameProps {
27
27
  allowCustomEmailAdd?: boolean;
28
28
  isInvalid?: boolean;
29
29
  groupContactsAndEmails?: boolean;
30
+ maxSelections?: number;
30
31
  onNew?: (query: string) => void;
31
32
  canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
32
33
  getCreateNewText?: (query: string) => string;
34
+ noOptionsFoundMessage?: string | ((filter: string) => string);
33
35
  onContactEnriched?: (contact: IContact) => void;
34
36
  contactFilter?: (contact: IContact) => boolean;
35
37
  }
package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAexD,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,CAAC;IACpD,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,IAAI,IAAI,0BAEzE,CAAC;AAMF,QAAA,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,KAAK,EAAE,MAAM,qBA+UlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}
1
+ {"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAgBxD,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,CAAC;IACpD,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,qBAAqB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,IAAI,IAAI,0BAEzE,CAAC;AAMF,QAAA,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,KAAK,EAAE,MAAM,qBAyZlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}
package/lib/esm/Functional/CaseContactsSelectorExternal.js CHANGED
@@ -8,15 +8,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  });
9
9
  };
10
10
  import { useApolloClient } from '@apollo/client/react';
11
+ import { Alert, AlertVariant, Button, ButtonVariant, Skeleton } from '@patternfly/react-core';
11
12
  import { buildAccountWhereForContacts, GET_ACCOUNT_CONTACTS, getApiResourceObject, isEmailValid, } from '@rh-support/utils';
12
13
  import debounce from 'lodash/debounce';
13
14
  import differenceBy from 'lodash/differenceBy';
14
15
  import filter from 'lodash/filter';
15
16
  import isArray from 'lodash/isArray';
16
17
  import isEmpty from 'lodash/isEmpty';
18
+ import isNumber from 'lodash/isNumber';
17
19
  import map from 'lodash/map';
18
20
  import sortBy from 'lodash/sortBy';
19
21
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
+ import { useTranslation } from 'react-i18next';
20
23
  import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
21
24
  export const CONTACTS_PAGE_SIZE = 10;
22
25
  export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
@@ -42,6 +45,8 @@ const getHydraContactLabel = (user) => {
42
45
  return label ? label : '';
43
46
  };
44
47
  function CaseContactsSelectorExternal(props) {
48
+ var _a;
49
+ const { t } = useTranslation();
45
50
  const apolloClient = useApolloClient();
46
51
  const { customEmails, contactSsoUsername, isInvalid, groupContactsAndEmails, selected } = props;
47
52
  const [filteredContacts, setFilteredContacts] = useState([]);
@@ -49,21 +54,24 @@ function CaseContactsSelectorExternal(props) {
49
54
  const [hasNextPage, setHasNextPage] = useState(false);
50
55
  const [endCursor, setEndCursor] = useState(null);
51
56
  const [isLoadingMore, setIsLoadingMore] = useState(false);
57
+ const [hasCompletedInitialLoad, setHasCompletedInitialLoad] = useState(false);
58
+ const showContactsLoadStates = !!props.multiple || isNumber(props.maxSelections);
52
59
  const mapContactEdges = (edges, accountNumber) => edges
53
60
  .filter(({ node }) => { var _a; return (_a = node.SSOUserName__c) === null || _a === void 0 ? void 0 : _a.value; })
54
61
  .map(({ node }) => {
55
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
62
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
56
63
  return ({
57
64
  id: node.Id,
58
65
  ssoUsername: node.SSOUserName__c.value,
59
66
  firstName: (_b = (_a = node.FirstName) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
60
67
  lastName: (_d = (_c = node.LastName) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
61
68
  fullNameCustom: (_f = (_e = node.Name) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
62
- manageSupportCases: (_h = (_g = node.ManageSupportCases__c) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : true,
63
- isInternal: (_k = (_j = node.IsInternal__c) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : false,
64
- isOrgAdmin: (_m = (_l = node.IsOrgAdmin__c) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : false,
65
- phone: (_p = (_o = node.Phone) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : '',
66
- defaultCaseGroup: (_r = (_q = node.DefaultCaseGroup__c) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : null,
69
+ email: (_h = (_g = node.Email) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : '',
70
+ manageSupportCases: (_k = (_j = node.ManageSupportCases__c) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : true,
71
+ isInternal: (_m = (_l = node.IsInternal__c) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : false,
72
+ isOrgAdmin: (_p = (_o = node.IsOrgAdmin__c) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : false,
73
+ phone: (_r = (_q = node.Phone) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : '',
74
+ defaultCaseGroup: (_t = (_s = node.DefaultCaseGroup__c) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : null,
67
75
  accountNumber,
68
76
  });
69
77
  });
@@ -76,7 +84,7 @@ function CaseContactsSelectorExternal(props) {
76
84
  and: [
77
85
  base,
78
86
  {
79
- or: [{ Name: { like: term } }, { SSOUserName__c: { like: term } }],
87
+ or: [{ Name: { like: term } }, { SSOUserName__c: { like: term } }, { Email: { like: term } }],
80
88
  },
81
89
  ],
82
90
  };
@@ -128,8 +136,10 @@ function CaseContactsSelectorExternal(props) {
128
136
  setEndCursor(pageInfo.endCursor);
129
137
  }
130
138
  }
131
- catch (_a) {
132
- setContactList(getApiResourceObject([]));
139
+ catch (e) {
140
+ if (currentSearchQuery.current === query) {
141
+ setContactList(getApiResourceObject([], false, true, e === null || e === void 0 ? void 0 : e.message));
142
+ }
133
143
  }
134
144
  });
135
145
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -139,6 +149,22 @@ function CaseContactsSelectorExternal(props) {
139
149
  debouncedSearch.cancel();
140
150
  searchContacts('');
141
151
  };
152
+ const loadAccountContacts = () => __awaiter(this, void 0, void 0, function* () {
153
+ setContactList(getApiResourceObject([], true));
154
+ setHasNextPage(false);
155
+ setEndCursor(null);
156
+ try {
157
+ const { contacts, pageInfo } = yield fetchContactsPage();
158
+ setContactList(getApiResourceObject(contacts));
159
+ setHasNextPage(pageInfo.hasNextPage);
160
+ setEndCursor(pageInfo.endCursor);
161
+ setHasCompletedInitialLoad(true);
162
+ }
163
+ catch (e) {
164
+ setContactList(getApiResourceObject([], false, true, e === null || e === void 0 ? void 0 : e.message));
165
+ setHasCompletedInitialLoad(true);
166
+ }
167
+ });
142
168
  useEffect(() => {
143
169
  const { selectedAccountNumber, loggedInUserRights, isExportingPDF } = props;
144
170
  const isNonOrgAdminSameAccount = loggedInUserRights.isExternal() && loggedInUserRights.isNonOrgAdminWithSameAccount(selectedAccountNumber);
@@ -146,6 +172,7 @@ function CaseContactsSelectorExternal(props) {
146
172
  return;
147
173
  }
148
174
  let cancelled = false;
175
+ setHasCompletedInitialLoad(false);
149
176
  const fetchAccountContacts = () => __awaiter(this, void 0, void 0, function* () {
150
177
  setContactList(getApiResourceObject([], true));
151
178
  try {
@@ -154,11 +181,13 @@ function CaseContactsSelectorExternal(props) {
154
181
  setContactList(getApiResourceObject(contacts));
155
182
  setHasNextPage(pageInfo.hasNextPage);
156
183
  setEndCursor(pageInfo.endCursor);
184
+ setHasCompletedInitialLoad(true);
157
185
  }
158
186
  }
159
187
  catch (e) {
160
188
  if (!cancelled) {
161
189
  setContactList(getApiResourceObject([], false, true, e.message));
190
+ setHasCompletedInitialLoad(true);
162
191
  }
163
192
  }
164
193
  });
@@ -169,6 +198,8 @@ function CaseContactsSelectorExternal(props) {
169
198
  // eslint-disable-next-line react-hooks/exhaustive-deps
170
199
  }, [apolloClient, props.selectedAccountNumber, props.salesforceAccountId, props.isExportingPDF]);
171
200
  useEffect(() => {
201
+ if (props.multiple)
202
+ return;
172
203
  if (contactList.isFetching || isEmpty(contactList.data) || isEmpty(selected))
173
204
  return;
174
205
  const currentOwner = selected[0];
@@ -185,7 +216,7 @@ function CaseContactsSelectorExternal(props) {
185
216
  : props.onChange && props.onChange([matchedContact]);
186
217
  }
187
218
  // eslint-disable-next-line react-hooks/exhaustive-deps
188
- }, [contactList.data, contactList.isFetching]);
219
+ }, [contactList.data, contactList.isFetching, props.multiple]);
189
220
  const displayedContacts = useMemo(() => {
190
221
  var _a;
191
222
  let contacts = (_a = contactList.data) !== null && _a !== void 0 ? _a : [];
@@ -215,8 +246,11 @@ function CaseContactsSelectorExternal(props) {
215
246
  };
216
247
  const isNonOrgAdminSameAccountDisabled = props.loggedInUserRights.isExternal() &&
217
248
  props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber);
218
- const isDisabled = isNonOrgAdminSameAccountDisabled || props.isUpdating || contactList.isFetching || props.isDisabled;
219
- const isLoading = props.isUpdating || contactList.isFetching;
249
+ const isDisabled = isNonOrgAdminSameAccountDisabled ||
250
+ props.isUpdating ||
251
+ props.isDisabled ||
252
+ (!showContactsLoadStates && contactList.isFetching);
253
+ const isOverMaxSelections = !!props.maxSelections && ((_a = selected === null || selected === void 0 ? void 0 : selected.length) !== null && _a !== void 0 ? _a : 0) > props.maxSelections;
220
254
  const getCustomEmails = useCallback(() => {
221
255
  return sortBy((customEmails || []).map((item) => (Object.assign(Object.assign({}, item), { ssoUsername: item.emailAddress, firstName: item.emailAddress, lastName: item.emailAddress }))), 'emailAddress');
222
256
  }, [customEmails]);
@@ -253,7 +287,17 @@ function CaseContactsSelectorExternal(props) {
253
287
  setFilteredContacts(allOptions);
254
288
  return;
255
289
  }
256
- const localFiltered = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
290
+ const term = query.toLowerCase();
291
+ const localFiltered = filter(allOptions, (option) => {
292
+ const contact = option.contact;
293
+ const label = getHydraContactLabel(contact).toLowerCase();
294
+ const email = (contact.email || '').toLowerCase();
295
+ const name = (contact.fullNameCustom || `${contact.firstName || ''} ${contact.lastName || ''}`)
296
+ .trim()
297
+ .toLowerCase();
298
+ const sso = (contact.ssoUsername || '').toLowerCase();
299
+ return label.includes(term) || email.includes(term) || name.includes(term) || sso.includes(term);
300
+ });
257
301
  setFilteredContacts(localFiltered);
258
302
  debouncedSearch(query);
259
303
  };
@@ -294,6 +338,19 @@ function CaseContactsSelectorExternal(props) {
294
338
  useEffect(() => {
295
339
  setFilteredContacts(allOptions);
296
340
  }, [displayedContacts, customEmails, allOptions, selected]);
297
- return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onOpenChange: onDropdownOpenChange, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: isLoading || isLoadingMore, onHandleLoadMore: loadMoreContacts, isShowMoreOptionVisible: hasNextPage }));
341
+ // Initial-load skeleton only (not every debounced search) — matches the design placeholder under the field.
342
+ const showLoadingSkeleton = showContactsLoadStates &&
343
+ contactList.isFetching &&
344
+ !isLoadingMore &&
345
+ !contactList.isError &&
346
+ !hasCompletedInitialLoad;
347
+ const showLoadError = showContactsLoadStates && contactList.isError && !contactList.isFetching;
348
+ return (React.createElement(React.Fragment, null,
349
+ React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid || isOverMaxSelections || showLoadError ? 'danger' : undefined, maxSelections: props.maxSelections, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onOpenChange: onDropdownOpenChange, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, noOptionsFoundMessage: props.noOptionsFoundMessage, isLoading: props.isUpdating || isLoadingMore || (!showContactsLoadStates && contactList.isFetching), onHandleLoadMore: loadMoreContacts, isShowMoreOptionVisible: hasNextPage }),
350
+ showLoadingSkeleton && (React.createElement(Skeleton, { height: "5rem", width: "100%", className: "pf-v6-u-mt-sm", screenreaderText: t('Loading contacts') })),
351
+ showLoadError && (React.createElement(Alert, { className: "non-bold-alert pf-v6-u-mt-sm", isInline: true, variant: AlertVariant.danger, component: "span", title: React.createElement(React.Fragment, null,
352
+ t("We couldn't load contacts."),
353
+ ' ',
354
+ React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: loadAccountContacts }, t('Try again.'))) }))));
298
355
  }
299
356
  export { CaseContactsSelectorExternal, getHydraContactLabel };
package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts CHANGED
@@ -7,6 +7,8 @@ export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
7
7
  options: IOwnerOption[];
8
8
  contactSsoUsername: string;
9
9
  groupContactsAndEmails?: boolean;
10
+ /** Chips beyond this count are marked invalid (red). */
11
+ maxSelections?: number;
10
12
  onSelect: (contacts: IContact[]) => void;
11
13
  onChipRemoved?: (contact: IContact) => void;
12
14
  isLoading?: boolean;
package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAKlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAcD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBAkIhE"}
1
+ {"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAMlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAcD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBAsIhE"}
package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js CHANGED
@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import filter from 'lodash/filter';
13
13
  import find from 'lodash/find';
14
14
  import isEmpty from 'lodash/isEmpty';
15
+ import isNumber from 'lodash/isNumber';
15
16
  import map from 'lodash/map';
16
17
  import React, { useMemo } from 'react';
17
18
  import { useTranslation } from 'react-i18next';
@@ -28,8 +29,13 @@ function getTypeaheadOptionsFromContacts(contacts, caseContactSsoUsername) {
28
29
  }
29
30
  export function OwnerTypeaheadDropdown(props) {
30
31
  var _a;
31
- const { contactSsoUsername, groupContactsAndEmails, options, selected, onSelect, onToggleClosed, onChipRemoved } = props, restProps = __rest(props, ["contactSsoUsername", "groupContactsAndEmails", "options", "selected", "onSelect", "onToggleClosed", "onChipRemoved"]);
32
- const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected, contactSsoUsername), [selected, contactSsoUsername]);
32
+ const { contactSsoUsername, groupContactsAndEmails, options, selected, onSelect, onToggleClosed, onChipRemoved, maxSelections } = props, restProps = __rest(props, ["contactSsoUsername", "groupContactsAndEmails", "options", "selected", "onSelect", "onToggleClosed", "onChipRemoved", "maxSelections"]);
33
+ const selectedTypeaheadOptions = useMemo(() => {
34
+ const optionsFromContacts = getTypeaheadOptionsFromContacts(selected, contactSsoUsername);
35
+ if (!isNumber(maxSelections))
36
+ return optionsFromContacts;
37
+ return optionsFromContacts.map((option, index) => index >= maxSelections ? Object.assign(Object.assign({}, option), { color: 'red', variant: 'filled' }) : option);
38
+ }, [selected, contactSsoUsername, maxSelections]);
33
39
  const { t } = useTranslation();
34
40
  const { visibleItems, hasMoreItems: hasMoreItemsLocal, onHandleLoadMore: onHandleLoadMoreLocal, resetVisibleItems, } = useProgressiveLoading(options, PAGE_SIZE);
35
41
  const useServerPagination = !!props.onHandleLoadMore;
package/lib/esm/PhoneInput/CountryData.js CHANGED
@@ -193,7 +193,7 @@ export const COUNTRY_DATA = [
193
193
  ['Israel', ['middle-east'], 'il', '972', '... ... ....'],
194
194
  ['Italy', ['europe', 'eu-union'], 'it', '39', '... .......', 0],
195
195
  ['Jamaica', ['america', 'carribean'], 'jm', '1876'],
196
- ['Japan', ['asia'], 'jp', '81', '.. .... ....'],
196
+ ['Japan', ['asia'], 'jp', '81', '... .... ....'],
197
197
  ['Jordan', ['middle-east'], 'jo', '962'],
198
198
  [
199
199
  'Kazakhstan',
package/lib/esm/PhoneInput/PhoneInput.d.ts CHANGED
@@ -11,6 +11,7 @@ interface IProps {
11
11
  isLoading?: boolean;
12
12
  isDisabled?: boolean;
13
13
  shouldNotSetCountryCode?: boolean;
14
+ preferredCountryIso2?: string;
14
15
  }
15
16
  export declare const getExactCountry: (phoneNumber: string) => any[] | {
16
17
  name: string | number | string[];
@@ -27,6 +28,18 @@ export declare const getPhoneObj: (phoneNumber: string) => {
27
28
  countryCode: string;
28
29
  phoneLine: string;
29
30
  };
31
+ export declare const getCountryByIso2: (iso2: string) => {
32
+ name: string | number | string[];
33
+ regions: string | number | string[];
34
+ iso2: string | number | string[];
35
+ countryCode: string | number | string[];
36
+ dialCode: string | number | string[];
37
+ format: string;
38
+ priority: string | number | string[];
39
+ areaCode: string | number | string[];
40
+ phoneInitials: string[];
41
+ };
42
+ export declare const getPreferredCountryIso2FromTimezone: (timezone?: string | null) => string;
30
43
  export declare function PhoneInput(props: IProps): React.JSX.Element;
31
44
  export {};
32
45
  //# sourceMappingURL=PhoneInput.d.ts.map
package/lib/esm/PhoneInput/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAoB3B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAoDD,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM;;;;;;;;;;CAmClD,CAAC;AAyCF,eAAO,MAAM,WAAW,GAAI,aAAa,MAAM;;;CAgB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBA8RvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAoB3B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAoDD,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM;;;;;;;;;;CAmClD,CAAC;AA6CF,eAAO,MAAM,WAAW,GAAI,aAAa,MAAM;;;CAgB9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM;;;;;;;;;;CAG5C,CAAC;AAEF,eAAO,MAAM,mCAAmC,GAAI,WAAW,MAAM,GAAG,IAAI,KAAG,MAK9E,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAoSvC"}
package/lib/esm/PhoneInput/PhoneInput.js CHANGED
@@ -106,6 +106,9 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
106
106
  pattern += localFormat[j];
107
107
  }
108
108
  }
109
+ if (i < (phone === null || phone === void 0 ? void 0 : phone.length)) {
110
+ pattern += (pattern && !pattern.endsWith(' ') ? ' ' : '') + phone.slice(i);
111
+ }
109
112
  const isPatternWithPrefix = (_a = pattern === null || pattern === void 0 ? void 0 : pattern.replace(/\s+/g, '')) === null || _a === void 0 ? void 0 : _a.startsWith(PREFIX);
110
113
  // TODO: Temporary — return pattern without forcing + prefix for portal phone without country code.
111
114
  pattern = isPatternWithPrefix ? pattern : pattern;
@@ -131,8 +134,21 @@ export const getPhoneObj = (phoneNumber) => {
131
134
  phoneLine: localPhone === null || localPhone === void 0 ? void 0 : localPhone.substring((_a = trimAndReplacePlusFromPhone(countryCode)) === null || _a === void 0 ? void 0 : _a.length, localPhone === null || localPhone === void 0 ? void 0 : localPhone.length),
132
135
  };
133
136
  };
137
+ export const getCountryByIso2 = (iso2) => {
138
+ if (!iso2)
139
+ return undefined;
140
+ return initializedCountries.find((country) => isEqual(country.iso2, iso2.toLowerCase()));
141
+ };
142
+ export const getPreferredCountryIso2FromTimezone = (timezone) => {
143
+ if (!timezone)
144
+ return '';
145
+ const tz = timezone.toLowerCase();
146
+ if (tz.includes('tokyo') || tz.includes('osaka') || tz.endsWith('/japan'))
147
+ return 'jp';
148
+ return '';
149
+ };
134
150
  export function PhoneInput(props) {
135
- const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, shouldNotSetCountryCode, } = props;
151
+ const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, shouldNotSetCountryCode, preferredCountryIso2, } = props;
136
152
  const { t } = useTranslation();
137
153
  const [isOpen, setIsOpen] = useState(false);
138
154
  const [iso2, setIso2] = useState('');
@@ -182,10 +198,10 @@ export function PhoneInput(props) {
182
198
  !(phone === null || phone === void 0 ? void 0 : phone.trim().startsWith(PREFIX)) &&
183
199
  regex.test(phone) &&
184
200
  !isEqual(phone, '-')) {
185
- onPhoneValueChange(PREFIX + (phone === null || phone === void 0 ? void 0 : phone.trim()));
201
+ onPhoneValueChange(_formattedNumber || PREFIX + (phone === null || phone === void 0 ? void 0 : phone.trim()));
186
202
  }
187
203
  else {
188
- onPhoneValueChange(phone === null || phone === void 0 ? void 0 : phone.slice(0, localFormat === null || localFormat === void 0 ? void 0 : localFormat.length));
204
+ onPhoneValueChange(_formattedNumber || phone);
189
205
  }
190
206
  /* TODO: Revert to previous logic after phone format handling is finalized.
191
207
  if (!phone?.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
@@ -208,8 +224,12 @@ export function PhoneInput(props) {
208
224
  : '';
209
225
  const phoneWithoutCountryCode = (_b = removeAllChars(phoneValue)) === null || _b === void 0 ? void 0 : _b.replace(prevCountryCode, '');
210
226
  const formattedPhone = `${PREFIX}${selection.countryCode}${phoneWithoutCountryCode}`;
211
- const localFormattedPhone = setLocalFormat(formattedPhone);
212
- onPhoneValueChange(formatNumber(formattedPhone, localFormattedPhone));
227
+ setIso2(String(selection.iso2));
228
+ onCountryCodeChange && onCountryCodeChange(PREFIX + selection.dialCode.toString());
229
+ const localFormattedPhone = selection.format.toString();
230
+ const formatted = formatNumber(formattedPhone, localFormattedPhone);
231
+ setFormattedNumber(formatted);
232
+ onPhoneValueChange(formatted);
213
233
  setIsOpen(false);
214
234
  setActiveItem(itemId);
215
235
  }
@@ -233,11 +253,12 @@ export function PhoneInput(props) {
233
253
  React.createElement("div", { className: "pf-v6-c-menu__item-main" },
234
254
  React.createElement("div", { className: "pf-v6-c-menu__item-text" }, t('No results found')))));
235
255
  }
256
+ const displayIso2 = iso2 || preferredCountryIso2 || '';
236
257
  const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
237
258
  React.createElement("div", { className: "pf-v6-u-display-inline-flex" },
238
259
  React.createElement("svg", { className: "flag-class-selected" },
239
- React.createElement("use", { xlinkHref: `#cc_${iso2}` })),
240
- iso2.toUpperCase())));
260
+ React.createElement("use", { xlinkHref: `#cc_${displayIso2}` })),
261
+ displayIso2.toUpperCase())));
241
262
  useEffect(() => {
242
263
  // when user types +, it will be replaced by empty string
243
264
  if (isEqual(phoneValue === null || phoneValue === void 0 ? void 0 : phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
@@ -275,8 +296,9 @@ export function PhoneInput(props) {
275
296
  setIso2('');
276
297
  onCountryCodeChange && onCountryCodeChange('');
277
298
  }
278
- else {
279
- onCountryCodeChange && onCountryCodeChange(PREFIX + countryCode);
299
+ else if (!isEmpty(countryCode)) {
300
+ const normalizedCountryCode = countryCode.startsWith(PREFIX) ? countryCode : PREFIX + countryCode;
301
+ onCountryCodeChange && onCountryCodeChange(normalizedCountryCode);
280
302
  }
281
303
  // TODO: Temporary — strip leading + when shouldNotSetCountryCode is true.
282
304
  const normalizedPhone = shouldNotSetCountryCode
@@ -294,7 +316,7 @@ export function PhoneInput(props) {
294
316
  */
295
317
  // eslint-disable-next-line react-hooks/exhaustive-deps
296
318
  }, [shouldNotSetCountryCode]);
297
- const toggle = (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen(!isOpen), isExpanded: isOpen, className: "phone-number-select", "data-tracking-id": "case-phone-number-country-code", isDisabled: props.isDisabled, "aria-label": "Country Code" }, iso2 && phoneValue !== '' ? placeholder : t('Country Code')));
319
+ const toggle = (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen(!isOpen), isExpanded: isOpen, className: "phone-number-select", "data-tracking-id": "case-phone-number-country-code", isDisabled: props.isDisabled, "aria-label": "Country Code" }, (iso2 && phoneValue !== '') || preferredCountryIso2 ? placeholder : t('Country Code')));
298
320
  const menu = (React.createElement(Menu, { ref: menuRef, onSelect: onCountrySelect, activeItemId: activeItem, isScrollable: true },
299
321
  React.createElement(MenuSearch, null,
300
322
  React.createElement(MenuSearchInput, null,
package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts CHANGED
@@ -25,12 +25,15 @@ export interface ITypeaheadDropdownProps {
25
25
  onNew?: (query: string) => void;
26
26
  canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
27
27
  getCreateNewText?: (query: string) => string;
28
+ noOptionsFoundMessage?: string | ((filter: string) => string);
28
29
  }
29
30
  export interface ITypeaheadDropdownOption {
30
31
  value: any;
31
32
  label: string;
32
33
  group?: string;
33
34
  disableDelete?: boolean;
35
+ color?: LabelProps['color'];
36
+ variant?: LabelProps['variant'];
34
37
  }
35
38
  export interface ITypeaheadDropdownGroup {
36
39
  groupLabel: string;
@@ -39,5 +42,6 @@ export interface ITypeaheadDropdownGroup {
39
42
  export type ITypeaheadDropdownGroupOrOption = ITypeaheadDropdownOption | ITypeaheadDropdownGroup;
40
43
  export declare const VIEW_MORE_OPTION_VALUE = "view-more-option-value";
41
44
  export declare const ADD_NEW_OPTION_VALUE = "new-option-value";
45
+ export declare const NO_RESULTS_OPTION_VALUE = "no-results-option-value";
42
46
  export declare function TypeaheadDropdown(props: ITypeaheadDropdownProps): React.JSX.Element;
43
47
  //# sourceMappingURL=TypeaheadDropdown.d.ts.map
package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAWb,MAAM,wBAAwB,CAAC;AAOhC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBA6V/D"}
1
+ {"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAWb,MAAM,wBAAwB,CAAC;AAOhC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,qBAAqB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AA2BjE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBA+W/D"}
package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js CHANGED
@@ -11,6 +11,7 @@ import { usePrevious } from '../hooks/usePrevious';
11
11
  import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
12
12
  export const VIEW_MORE_OPTION_VALUE = 'view-more-option-value';
13
13
  export const ADD_NEW_OPTION_VALUE = 'new-option-value';
14
+ export const NO_RESULTS_OPTION_VALUE = 'no-results-option-value';
14
15
  const VIEW_MORE_OPTION = { label: 'View more', value: VIEW_MORE_OPTION_VALUE };
15
16
  const ADD_NEW_OPTION = { label: 'Create new option', value: ADD_NEW_OPTION_VALUE };
16
17
  function isDropdownGroup(option) {
@@ -34,7 +35,7 @@ function flattenOptions(options) {
34
35
  }
35
36
  export function TypeaheadDropdown(props) {
36
37
  var _a;
37
- const { color, options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, status, onSelect, onBlur, onToggleClosed, onClearQuery, onChipRemoved, onQueryUpdated, onHandleLoadMore, onOpenChange, onNew, canAddNew, getCreateNewText, isLoading, } = props;
38
+ const { color, options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, status, onSelect, onBlur, onToggleClosed, onClearQuery, onChipRemoved, onQueryUpdated, onHandleLoadMore, onOpenChange, onNew, canAddNew, getCreateNewText, noOptionsFoundMessage, isLoading, } = props;
38
39
  const { t } = useTranslation();
39
40
  const [isOpen, setIsOpen] = useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false);
40
41
  const [query, setQuery] = useState(!multiple ? (!isEmpty(selected) ? selected[0].label : '') : '');
@@ -129,6 +130,9 @@ export function TypeaheadDropdown(props) {
129
130
  !!onHandleLoadMore && onHandleLoadMore(event);
130
131
  return;
131
132
  }
133
+ if (value === NO_RESULTS_OPTION_VALUE) {
134
+ return;
135
+ }
132
136
  if (value === ADD_NEW_OPTION_VALUE) {
133
137
  !!onNew && onNew(query);
134
138
  setQuery('');
@@ -156,10 +160,13 @@ export function TypeaheadDropdown(props) {
156
160
  const toggle = (toggleRef) => {
157
161
  return (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled, status: status },
158
162
  React.createElement(TextInputGroup, { isPlain: true },
159
- React.createElement(TextInputGroupMain, { value: query, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t(`Search by name or username`), innerRef: inputRef, onChange: updateQuery, onClick: handleInputToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, "aria-controls": inputAriaControls, role: "combobox" }, !!multiple && (React.createElement(LabelGroup, { "aria-label": "Current selections" }, selected.map((option, index) => (React.createElement(Label, { key: index, variant: "outline", onClick: haltEvent, color: color !== null && color !== void 0 ? color : 'blue', isDisabled: isDisabled || (option === null || option === void 0 ? void 0 : option.disableDelete), onClose: (ev) => {
160
- haltEvent(ev);
161
- !!onChipRemoved && onChipRemoved(option);
162
- } }, option.label)))))),
163
+ React.createElement(TextInputGroupMain, { value: query, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t(`Search by name or username`), innerRef: inputRef, onChange: updateQuery, onClick: handleInputToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, "aria-controls": inputAriaControls, role: "combobox" }, !!multiple && (React.createElement(LabelGroup, { "aria-label": "Current selections" }, selected.map((option, index) => {
164
+ var _a, _b, _c;
165
+ return (React.createElement(Label, { key: index, variant: (_a = option.variant) !== null && _a !== void 0 ? _a : 'outline', onClick: haltEvent, color: (_c = (_b = option.color) !== null && _b !== void 0 ? _b : color) !== null && _c !== void 0 ? _c : 'blue', isDisabled: isDisabled || (option === null || option === void 0 ? void 0 : option.disableDelete), onClose: (ev) => {
166
+ haltEvent(ev);
167
+ !!onChipRemoved && onChipRemoved(option);
168
+ } }, option.label));
169
+ })))),
163
170
  React.createElement(TextInputGroupUtilities, null,
164
171
  query && hasClearButton && !isDisabled && (React.createElement(Button, { icon: React.createElement(TimesCircleIcon, null), "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled })),
165
172
  isLoading && React.createElement(Spinner, { size: "sm" })))));
@@ -193,6 +200,14 @@ export function TypeaheadDropdown(props) {
193
200
  if (!!canAddNew && canAddNew(options, query)) {
194
201
  optionElements.push(getOptionElement(ADD_NEW_OPTION, currentIndex));
195
202
  }
203
+ if (optionElements.length === 0 && !!query.trim() && !isLoading) {
204
+ const message = typeof noOptionsFoundMessage === 'function'
205
+ ? noOptionsFoundMessage(query)
206
+ : noOptionsFoundMessage || t('No results found');
207
+ // Avoiding isDisabled 'No results found' as PF mutes disabled option text too much for this empty state.
208
+ optionElements.push(React.createElement(SelectOption, { key: NO_RESULTS_OPTION_VALUE, value: NO_RESULTS_OPTION_VALUE },
209
+ React.createElement("span", { className: "pf-v6-u-text-color-regular" }, message)));
210
+ }
196
211
  return optionElements;
197
212
  };
198
213
  /**
package/lib/esm/index.js CHANGED
@@ -36,4 +36,4 @@ export * from './TagsSelector';
36
36
  export * from './SingleSelectDropdown';
37
37
  export * from './OwnerTypeaheadDropdown';
38
38
  export * from './CaseLabelLoadErrorModal';
39
- // dummy change for publish
39
+ // dummy change
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.6.45",
3
+ "version": "2.6.49",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -61,9 +61,9 @@
61
61
  "@patternfly/react-core": "6.2.1",
62
62
  "@patternfly/react-icons": "6.2.1",
63
63
  "@patternfly/react-table": "6.2.1",
64
- "@rh-support/types": "2.0.31",
65
- "@rh-support/user-permissions": "2.6.42",
66
- "@rh-support/utils": "2.6.41",
64
+ "@rh-support/types": "2.0.33",
65
+ "@rh-support/user-permissions": "2.6.46",
66
+ "@rh-support/utils": "2.6.45",
67
67
  "dompurify": "^2.2.6",
68
68
  "js-worker-search": "^1.4.1",
69
69
  "lazysizes": "^5.3.2",
@@ -103,5 +103,5 @@
103
103
  "defaults and supports es6-module",
104
104
  "maintained node versions"
105
105
  ],
106
- "gitHead": "45704746d332e15fd54506984909bc91452ef4a9"
106
+ "gitHead": "dd818edf4098c866388b59af94b99d889a004681"
107
107
  }