@rh-support/react-context 2.1.29 → 2.1.30

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 (3) hide show
  1. package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts.map +1 -1
  2. package/lib/esm/components/AccountSelector/AccountSelectorInternal.js +20 -18
  3. package/package.json +3 -3
package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAehF,OAAO,EAAE,kBAAkB,EAA8B,MAAM,wBAAwB,CAAC;AAQxF,UAAU,MAAO,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IACjD,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAmS7C;kBAnSQ,uBAAuB;;;AAsShC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
1
+ {"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAgBhF,OAAO,EAAE,kBAAkB,EAA8B,MAAM,wBAAwB,CAAC;AAQxF,UAAU,MAAO,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IACjD,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAmS7C;kBAnSQ,uBAAuB;;;AAsShC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
package/lib/esm/components/AccountSelector/AccountSelectorInternal.js CHANGED
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  });
9
9
  };
10
10
  import { accounts } from '@cee-eng/hydrajs';
11
- import { Button, Flex, FlexItem, MenuToggle, Select, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
11
+ import { Button, Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
12
12
  import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
13
13
  import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
14
14
  import { LoadingIndicator, useFetch } from '@rh-support/components';
@@ -53,15 +53,19 @@ function AccountSelectorInternal(props) {
53
53
  const [items, setItems] = useState([]);
54
54
  const [selectedItems, setSelectedItems] = useState([]);
55
55
  const [isOpen, setIsOpen] = useState(false);
56
+ const [isQueryChanged, setIsQueryChanged] = useState(false);
56
57
  const [query, setQuery] = useState('');
57
58
  const [focusedItemIndex, setFocusedItemIndex] = useState(null);
58
- const abortControllerRef = useRef(undefined);
59
59
  const textInputRef = useRef();
60
60
  const inputGroupRef = useRef();
61
61
  const { t } = useTranslation();
62
62
  const bookmarkedAccountsDeduped = uniqBy(props.bookmarkedAccounts, (b) => b.accountNumber);
63
63
  const pageSize = 20;
64
64
  const [resultSize, setResultSize] = useState(pageSize);
65
+ const setQueryLabel = (selectedItems) => {
66
+ const item = !isEmpty(selectedItems) && !props.multiple ? selectedItems[0] : {};
67
+ setQuery(getDisplayName(item));
68
+ };
65
69
  const itemsToRender = useMemo(() => (isEmpty(items) ? bookmarkedAccountsDeduped : items.slice(0, props.paginate ? resultSize : items.length)), [items, bookmarkedAccountsDeduped, props.paginate, resultSize]);
66
70
  useEffect(() => {
67
71
  if (!props.multiple) {
@@ -73,8 +77,8 @@ function AccountSelectorInternal(props) {
73
77
  }
74
78
  }, [props.selectedAccounts, props.multiple]);
75
79
  useEffect(() => {
76
- const item = !isEmpty(selectedItems) && !props.multiple ? selectedItems[0] : {};
77
- setQuery(getDisplayName(item));
80
+ setQueryLabel(selectedItems);
81
+ // eslint-disable-next-line react-hooks/exhaustive-deps
78
82
  }, [selectedItems, props.multiple]);
79
83
  const onDisplayMoreClick = (e) => {
80
84
  e.stopPropagation();
@@ -82,12 +86,12 @@ function AccountSelectorInternal(props) {
82
86
  setIsOpen(true);
83
87
  };
84
88
  const dropdownOptions = useMemo(() => {
85
- if (isFetching && isEmpty(itemsToRender)) {
86
- return (React.createElement(SelectOption, { key: "searching" },
89
+ if (isFetching) {
90
+ return (React.createElement("div", { key: "searching", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
87
91
  React.createElement(Trans, null, "Searching...")));
88
92
  }
89
- if (!isEmpty(query) && isEmpty(itemsToRender)) {
90
- return (React.createElement(SelectOption, { key: "no-results" },
93
+ if (isQueryChanged && isEmpty(items)) {
94
+ return (React.createElement("div", { key: "no-results", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
91
95
  React.createElement(Trans, null, "No results found")));
92
96
  }
93
97
  return [
@@ -109,18 +113,11 @@ function AccountSelectorInternal(props) {
109
113
  ];
110
114
  },
111
115
  // eslint-disable-next-line react-hooks/exhaustive-deps
112
- [items, bookmarkedAccountsDeduped]);
116
+ [items, bookmarkedAccountsDeduped, isFetching, itemsToRender, isQueryChanged]);
113
117
  const fetchAccounts = (query) => __awaiter(this, void 0, void 0, function* () {
114
118
  if (isEmpty(query)) {
115
119
  return;
116
120
  }
117
- if (abortControllerRef.current !== undefined) {
118
- // Cancel the previous request
119
- abortControllerRef.current.abort();
120
- }
121
- // recreate a new AbortController for each call
122
- let controller = new AbortController();
123
- abortControllerRef.current = controller;
124
121
  const fields = ['accountNumber', 'accountId', 'name', 'subscriptionAbuse'].join(',');
125
122
  // Initialize Params
126
123
  let params = {
@@ -136,11 +133,12 @@ function AccountSelectorInternal(props) {
136
133
  params.accountNumberLike = query;
137
134
  }
138
135
  const queryParams = params;
139
- const response = request && (yield request(queryParams, controller.signal));
136
+ const response = request && (yield request(queryParams));
140
137
  const options = response && response.items && response.items.length ? response.items : [];
141
138
  setItems(options);
142
139
  });
143
140
  const onOuterClick = () => {
141
+ setQueryLabel(props.selectedAccounts || []);
144
142
  setSelectedItems(props.selectedAccounts || []);
145
143
  };
146
144
  useEffect(() => {
@@ -175,6 +173,7 @@ function AccountSelectorInternal(props) {
175
173
  };
176
174
  const onFilter = (_event, value) => {
177
175
  setQuery(value);
176
+ setIsQueryChanged(!isEmpty(value));
178
177
  fetchAccounts(value);
179
178
  setResultSize(pageSize);
180
179
  setFocusedItemIndex(null);
@@ -187,6 +186,8 @@ function AccountSelectorInternal(props) {
187
186
  e.stopPropagation();
188
187
  setIsOpen(true);
189
188
  setSelectedItems([]);
189
+ setItems([]);
190
+ setIsQueryChanged(false);
190
191
  (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
191
192
  };
192
193
  const onSelect = (selection) => {
@@ -244,7 +245,8 @@ function AccountSelectorInternal(props) {
244
245
  React.createElement(TextInputGroup, { isPlain: true, innerRef: inputGroupRef },
245
246
  React.createElement(TextInputGroupMain, { value: query, onClick: onToggleClick, onKeyDown: onInputKeyDown, onChange: onFilter, placeholder: t(props.placeholder || ''), isExpanded: isOpen, innerRef: textInputRef, "aria-controls": `select${props.multiple ? '-multi' : ''}-typeahead-listbox` }),
246
247
  React.createElement(TextInputGroupUtilities, null, !isEmpty(query) && (React.createElement(Button, { variant: "plain", onClick: onClearSelection, isDisabled: isFetching, "aria-label": t('Clear') }, isFetching ? React.createElement(LoadingIndicator, { show: true, size: "sm" }) : React.createElement(TimesCircleIcon, { "aria-hidden": true })))))));
247
- return (React.createElement(Select, { "data-tracking-id": "account-selector-dropdown", isOpen: isOpen, onOpenChange: () => setIsOpen(false), id: props.id, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, onSelect: (_e, v) => onSelect(v), selected: selectedItems, isScrollable: true }, dropdownOptions));
248
+ return (React.createElement(Select, { "data-tracking-id": "account-selector-dropdown", isOpen: isOpen, onOpenChange: () => setIsOpen(false), id: props.id, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, onSelect: (_e, v) => onSelect(v), selected: selectedItems, isScrollable: true },
249
+ React.createElement(SelectList, null, dropdownOptions)));
248
250
  }
249
251
  AccountSelectorInternal.defaultProps = defaultProps;
250
252
  export { AccountSelectorInternal };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/react-context",
3
- "version": "2.1.29",
3
+ "version": "2.1.30",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org"
@@ -40,7 +40,7 @@
40
40
  "@cee-eng/hydrajs": "4.16.33",
41
41
  "@patternfly/react-core": "5.1.1",
42
42
  "@patternfly/react-icons": "5.1.1",
43
- "@rh-support/components": "2.1.26",
43
+ "@rh-support/components": "2.1.27",
44
44
  "@rh-support/types": "2.0.2",
45
45
  "@rh-support/user-permissions": "2.1.19",
46
46
  "@rh-support/utils": "2.1.12",
@@ -85,5 +85,5 @@
85
85
  "defaults and supports es6-module",
86
86
  "maintained node versions"
87
87
  ],
88
- "gitHead": "ed9cba460bdbf0d0104fe6e8f21a0ca554bdaee8"
88
+ "gitHead": "c70ed8ffa9b5dbe8abdd50e1549e92b8af2a6f27"
89
89
  }