glints-aries 4.0.341 → 4.0.342

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 (7) hide show
  1. package/es/@next/Select/Select.d.ts +7 -1
  2. package/es/@next/Select/Select.js +10 -1
  3. package/es/@next/Select/Select.stories.d.ts +1 -0
  4. package/lib/@next/Select/Select.d.ts +7 -1
  5. package/lib/@next/Select/Select.js +10 -1
  6. package/lib/@next/Select/Select.stories.d.ts +1 -0
  7. package/package.json +1 -1
package/es/@next/Select/Select.d.ts CHANGED
@@ -7,6 +7,10 @@ interface SearchableProps {
7
7
  /** onChange of TextInput activator when Select is searchable */
8
8
  onInputChange?(value: string): void;
9
9
  }
10
+ interface OptionsPlaceholderProps {
11
+ idle?: React.ReactNode;
12
+ noResult?: React.ReactNode;
13
+ }
10
14
  export interface SelectProps {
11
15
  allowMultiple?: boolean;
12
16
  customActivatorIcon?: IconNames;
@@ -37,6 +41,8 @@ export interface SelectProps {
37
41
  searchable?: boolean;
38
42
  /** props used for searchable Select */
39
43
  searchableProps?: SearchableProps;
44
+ optionsPlaceholderProps?: OptionsPlaceholderProps;
45
+ showPopoverOnFocus?: boolean;
40
46
  /** true = Allow vertical scroll, default by 6 options. */
41
47
  scrollable?: boolean;
42
48
  sections?: Section[];
@@ -46,5 +52,5 @@ export interface SelectProps {
46
52
  /** sets z-index override for option list dropdown. z-index default to 400 */
47
53
  zIndexOverride?: number;
48
54
  }
49
- export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
55
+ export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
50
56
  export {};
package/es/@next/Select/Select.js CHANGED
@@ -34,6 +34,9 @@ export var Select = function Select(_ref) {
34
34
  _ref$searchable = _ref.searchable,
35
35
  searchable = _ref$searchable === void 0 ? false : _ref$searchable,
36
36
  searchableProps = _ref.searchableProps,
37
+ optionsPlaceholderProps = _ref.optionsPlaceholderProps,
38
+ _ref$showPopoverOnFoc = _ref.showPopoverOnFocus,
39
+ showPopoverOnFocus = _ref$showPopoverOnFoc === void 0 ? false : _ref$showPopoverOnFoc,
37
40
  _ref$scrollable = _ref.scrollable,
38
41
  scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
39
42
  sections = _ref.sections,
@@ -74,6 +77,10 @@ export var Select = function Select(_ref) {
74
77
  onClose == null ? void 0 : onClose();
75
78
  };
76
79
  var handleFocus = function handleFocus() {
80
+ if (showPopoverOnFocus) {
81
+ setPopoverActive(true);
82
+ return;
83
+ }
77
84
  if (options.length < 1) {
78
85
  setPopoverActive(false);
79
86
  return;
@@ -87,13 +94,14 @@ export var Select = function Select(_ref) {
87
94
  setMenuOptions(options);
88
95
  }, [options]);
89
96
  useEffect(function () {
97
+ if (showPopoverOnFocus) return;
90
98
  if (inputValue != '' && optionsLength > 0) {
91
99
  setPopoverActive(true);
92
100
  }
93
101
  if (inputValue === '' && optionsLength < 1) {
94
102
  setPopoverActive(false);
95
103
  }
96
- }, [inputValue, optionsLength]);
104
+ }, [inputValue, optionsLength, showPopoverOnFocus]);
97
105
  useEffect(function () {
98
106
  if (listHeight) {
99
107
  setOptionListHeight(listHeight + 24 + "px");
@@ -174,6 +182,7 @@ export var Select = function Select(_ref) {
174
182
  selectedValues: selectedValues,
175
183
  width: width,
176
184
  onMenuClose: handleClose,
185
+ noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
177
186
  updateSearchableSelectState: function updateSearchableSelectState(newState) {
178
187
  return _updateSearchableSelectState(newState);
179
188
  }
package/es/@next/Select/Select.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const SearchableSingleSelectWithOverflowingInputState: any;
12
12
  export declare const SearchableSingleSelectWithInitialValue: any;
13
13
  export declare const SearchableSingleWithInputState: any;
14
14
  export declare const AsyncSearchableSingleWithInputState: any;
15
+ export declare const AsyncSearchableSingleWithInputStateCustomPopoverPlaceholder: any;
15
16
  export declare const MultiSelectScrollable: any;
16
17
  export declare const WithInlineError: any;
17
18
  export declare const SearchableDisabled: any;
package/lib/@next/Select/Select.d.ts CHANGED
@@ -7,6 +7,10 @@ interface SearchableProps {
7
7
  /** onChange of TextInput activator when Select is searchable */
8
8
  onInputChange?(value: string): void;
9
9
  }
10
+ interface OptionsPlaceholderProps {
11
+ idle?: React.ReactNode;
12
+ noResult?: React.ReactNode;
13
+ }
10
14
  export interface SelectProps {
11
15
  allowMultiple?: boolean;
12
16
  customActivatorIcon?: IconNames;
@@ -37,6 +41,8 @@ export interface SelectProps {
37
41
  searchable?: boolean;
38
42
  /** props used for searchable Select */
39
43
  searchableProps?: SearchableProps;
44
+ optionsPlaceholderProps?: OptionsPlaceholderProps;
45
+ showPopoverOnFocus?: boolean;
40
46
  /** true = Allow vertical scroll, default by 6 options. */
41
47
  scrollable?: boolean;
42
48
  sections?: Section[];
@@ -46,5 +52,5 @@ export interface SelectProps {
46
52
  /** sets z-index override for option list dropdown. z-index default to 400 */
47
53
  zIndexOverride?: number;
48
54
  }
49
- export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
55
+ export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
50
56
  export {};
package/lib/@next/Select/Select.js CHANGED
@@ -40,6 +40,9 @@ var Select = function Select(_ref) {
40
40
  _ref$searchable = _ref.searchable,
41
41
  searchable = _ref$searchable === void 0 ? false : _ref$searchable,
42
42
  searchableProps = _ref.searchableProps,
43
+ optionsPlaceholderProps = _ref.optionsPlaceholderProps,
44
+ _ref$showPopoverOnFoc = _ref.showPopoverOnFocus,
45
+ showPopoverOnFocus = _ref$showPopoverOnFoc === void 0 ? false : _ref$showPopoverOnFoc,
43
46
  _ref$scrollable = _ref.scrollable,
44
47
  scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
45
48
  sections = _ref.sections,
@@ -80,6 +83,10 @@ var Select = function Select(_ref) {
80
83
  onClose == null ? void 0 : onClose();
81
84
  };
82
85
  var handleFocus = function handleFocus() {
86
+ if (showPopoverOnFocus) {
87
+ setPopoverActive(true);
88
+ return;
89
+ }
83
90
  if (options.length < 1) {
84
91
  setPopoverActive(false);
85
92
  return;
@@ -93,13 +100,14 @@ var Select = function Select(_ref) {
93
100
  setMenuOptions(options);
94
101
  }, [options]);
95
102
  (0, _react.useEffect)(function () {
103
+ if (showPopoverOnFocus) return;
96
104
  if (inputValue != '' && optionsLength > 0) {
97
105
  setPopoverActive(true);
98
106
  }
99
107
  if (inputValue === '' && optionsLength < 1) {
100
108
  setPopoverActive(false);
101
109
  }
102
- }, [inputValue, optionsLength]);
110
+ }, [inputValue, optionsLength, showPopoverOnFocus]);
103
111
  (0, _react.useEffect)(function () {
104
112
  if (listHeight) {
105
113
  setOptionListHeight(listHeight + 24 + "px");
@@ -180,6 +188,7 @@ var Select = function Select(_ref) {
180
188
  selectedValues: selectedValues,
181
189
  width: width,
182
190
  onMenuClose: handleClose,
191
+ noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
183
192
  updateSearchableSelectState: function updateSearchableSelectState(newState) {
184
193
  return _updateSearchableSelectState(newState);
185
194
  }
package/lib/@next/Select/Select.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const SearchableSingleSelectWithOverflowingInputState: any;
12
12
  export declare const SearchableSingleSelectWithInitialValue: any;
13
13
  export declare const SearchableSingleWithInputState: any;
14
14
  export declare const AsyncSearchableSingleWithInputState: any;
15
+ export declare const AsyncSearchableSingleWithInputStateCustomPopoverPlaceholder: any;
15
16
  export declare const MultiSelectScrollable: any;
16
17
  export declare const WithInlineError: any;
17
18
  export declare const SearchableDisabled: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.341",
3
+ "version": "4.0.342",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",