hrm_ui_lib 4.0.12 → 4.0.13

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/components/MultiSelectV2/MultiSelectV2.js +3 -2
  2. package/components/MultiSelectV2/types.d.ts +2 -0
  3. package/package.json +1 -1
package/components/MultiSelectV2/MultiSelectV2.js CHANGED
@@ -9,7 +9,8 @@ import { Label } from '../../helperComponents/Label';
9
9
  import { ErrorMessage } from '../../helperComponents/ErrorMessage';
10
10
  import { useOnOutsideClick } from '../../hooks';
11
11
  export const MultiSelectV2 = forwardRef((props, ref) => {
12
- const { options, selectedItems, value, onAdd, onRemove, setFieldValue, name, placeholder, hasError, label, labelAddons, required, disabled, error, helperText, className = '', dataTestId = '', size = 'medium', dropdownWidth, translations, dataTestIdPrefix } = props;
12
+ var _a;
13
+ const { options, selectedItems, value, onAdd, onRemove, setFieldValue, name, placeholder, hasError, label, labelAddons, required, disabled, error, helperText, className = '', dataTestId = '', size = 'medium', dropdownWidth, translations, dataTestIdPrefix, isLoading } = props;
13
14
  const [searchQuery, setSearchQuery] = useState('');
14
15
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
15
16
  const containerRef = useRef(null);
@@ -57,6 +58,6 @@ export const MultiSelectV2 = forwardRef((props, ref) => {
57
58
  }), children: [_jsx(Avatar, { initials: item.initials, size: "xsmall" }), _jsx(Text, { size: "small", type: item.highlighted ? 'selected' : undefined, className: "multi-select-v2__chip-name", children: item.name }), item.badge ? (_jsx(BadgeV2, { text: item.badge, size: "small", type: "gray", style: "light", className: "multi-select-v2__chip-badge", dataTestId: prefix ? `${prefix}-badge-${item.id}` : undefined })) : null, _jsx("button", { type: "button", className: "multi-select-v2__chip-remove", disabled: disabled, "data-test-id": prefix ? `${prefix}-chip-remove-${item.id}` : undefined, onClick: () => handleRemove(item.id), children: _jsx(IconDismiss, { size: "xxsmall", type: "tertiary" }) })] }, item.id))), _jsx("div", { className: "multi-select-v2__search-wrap", children: _jsx("input", { ref: ref, className: "multi-select-v2__search", disabled: disabled, "data-test-id": prefix ? `${prefix}-search` : undefined, value: searchQuery, placeholder: placeholder, onChange: (e) => {
58
59
  setSearchQuery(e.target.value);
59
60
  setIsDropdownOpen(true);
60
- }, onFocus: () => setIsDropdownOpen(true) }) }), isDropdownOpen && !disabled ? (_jsx("div", { className: classNames('multi-select-v2__dropdown', 'multi-select-v2__dropdown__options-scroll', 'scrollbar', 'scrollbar--vertical'), style: dropdownWidth ? { width: dropdownWidth, right: 'auto' } : undefined, children: searchResults.length > 0 ? (searchResults.map((option) => (_jsxs("button", { type: "button", className: "multi-select-v2__dropdown-item", "data-test-id": prefix ? `${prefix}-dropdown-item-${option.id}` : undefined, onClick: () => handleAdd(option), children: [_jsx(Avatar, { initials: option.initials, size: "xsmall" }), _jsxs("div", { className: "multi-select-v2__dropdown-info", children: [_jsx(Text, { size: "small", weight: "semibold", children: option.name }), option.meta ? (_jsx(Text, { size: "xsmall", type: "tertiary", children: option.meta })) : null] })] }, option.id)))) : (_jsx(Text, { size: "small", type: "tertiary", className: "multi-select-v2__dropdown-empty", dataTestId: prefix ? `${prefix}-dropdown-empty` : undefined, children: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) })) : null] }), error || helperText ? (_jsxs("div", { className: "multi-select-v2__message mt-8", children: [isErrorVisible && error ? (_jsx(ErrorMessage, { message: error, icon: "infoFilled", dataTestId: dataTestId })) : null, helperText && !(isErrorVisible && error) ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }));
61
+ }, onFocus: () => setIsDropdownOpen(true) }) }), isDropdownOpen && !disabled ? (_jsx("div", { className: classNames('multi-select-v2__dropdown', 'multi-select-v2__dropdown__options-scroll', 'scrollbar', 'scrollbar--vertical'), style: dropdownWidth ? { width: dropdownWidth, right: 'auto' } : undefined, children: isLoading ? (_jsx(Text, { size: "small", type: "tertiary", className: "multi-select-v2__dropdown-empty", dataTestId: prefix ? `${prefix}-dropdown-loading` : undefined, children: (_a = translations === null || translations === void 0 ? void 0 : translations.loadingMessage) !== null && _a !== void 0 ? _a : 'Results loading ...' })) : searchResults.length > 0 ? (searchResults.map((option) => (_jsxs("button", { type: "button", className: "multi-select-v2__dropdown-item", "data-test-id": prefix ? `${prefix}-dropdown-item-${option.id}` : undefined, onClick: () => handleAdd(option), children: [_jsx(Avatar, { initials: option.initials, size: "xsmall" }), _jsxs("div", { className: "multi-select-v2__dropdown-info", children: [_jsx(Text, { size: "small", weight: "semibold", children: option.name }), option.meta ? (_jsx(Text, { size: "xsmall", type: "tertiary", children: option.meta })) : null] })] }, option.id)))) : (_jsx(Text, { size: "small", type: "tertiary", className: "multi-select-v2__dropdown-empty", dataTestId: prefix ? `${prefix}-dropdown-empty` : undefined, children: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) })) : null] }), error || helperText ? (_jsxs("div", { className: "multi-select-v2__message mt-8", children: [isErrorVisible && error ? (_jsx(ErrorMessage, { message: error, icon: "infoFilled", dataTestId: dataTestId })) : null, helperText && !(isErrorVisible && error) ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }));
61
62
  });
62
63
  MultiSelectV2.displayName = 'MultiSelectV2';
package/components/MultiSelectV2/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export type TMultiSelectOption = {
10
10
  };
11
11
  export type TMultiSelectV2Translations = {
12
12
  emptyListMainMessage?: string;
13
+ loadingMessage?: string;
13
14
  };
14
15
  export interface TMultiSelectV2PropTypes extends IFormCompProps {
15
16
  options: TMultiSelectOption[];
@@ -27,4 +28,5 @@ export interface TMultiSelectV2PropTypes extends IFormCompProps {
27
28
  dropdownWidth?: number;
28
29
  translations?: TMultiSelectV2Translations;
29
30
  dataTestIdPrefix?: string;
31
+ isLoading?: boolean;
30
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hrm_ui_lib",
3
- "version": "4.0.12",
3
+ "version": "4.0.13",
4
4
  "description": "UI library for Dino",
5
5
  "main": "./index.cjs",
6
6
  "module": "./index.js",