glints-aries 4.0.340 → 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 (9) hide show
  1. package/es/@next/Bar/Bar.js +13 -3
  2. package/es/@next/Select/Select.d.ts +7 -1
  3. package/es/@next/Select/Select.js +10 -1
  4. package/es/@next/Select/Select.stories.d.ts +1 -0
  5. package/lib/@next/Bar/Bar.js +13 -3
  6. package/lib/@next/Select/Select.d.ts +7 -1
  7. package/lib/@next/Select/Select.js +10 -1
  8. package/lib/@next/Select/Select.stories.d.ts +1 -0
  9. package/package.json +1 -1
package/es/@next/Bar/Bar.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["onClick", "action"];
2
4
  import React from 'react';
3
5
  import { Breakpoints, Colors } from '..';
4
6
  import { Button, PrimaryButton } from '../Button';
@@ -40,6 +42,14 @@ export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
40
42
  width = _useWindowSize.width;
41
43
  var breakpointWidth = parseInt(Breakpoints.large.slice(0, -2));
42
44
  var buttonSize = width <= breakpointWidth ? 'default' : 'large';
45
+ function makeButtonProps(buttonAction) {
46
+ var onClick = buttonAction.onClick,
47
+ action = buttonAction.action,
48
+ otherProps = _objectWithoutPropertiesLoose(buttonAction, _excluded);
49
+ return _extends({
50
+ onClick: onClick || action
51
+ }, otherProps);
52
+ }
43
53
  return /*#__PURE__*/React.createElement(StyledBar, {
44
54
  "data-align": position,
45
55
  ref: ref
@@ -47,11 +57,11 @@ export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
47
57
  onClick: onBack
48
58
  }, /*#__PURE__*/React.createElement(Icon, {
49
59
  name: "ri-arrow-left-line"
50
- })), /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, tertiaryAction, {
60
+ })), /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, makeButtonProps(tertiaryAction), {
51
61
  size: buttonSize
52
- }), tertiaryAction.label), secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, secondaryAction, {
62
+ }), tertiaryAction.label), secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, makeButtonProps(secondaryAction), {
53
63
  size: buttonSize
54
- }), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, primaryAction, {
64
+ }), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, makeButtonProps(primaryAction), {
55
65
  size: buttonSize
56
66
  }), primaryAction.label)))));
57
67
  });
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/Bar/Bar.js CHANGED
@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  exports.__esModule = true;
5
5
  exports.Bar = void 0;
6
6
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
7
8
  var _react = _interopRequireDefault(require("react"));
8
9
  var _ = require("..");
9
10
  var _Button = require("../Button");
@@ -12,6 +13,7 @@ var _Icon = require("../Icon");
12
13
  var _Typography = require("../Typography");
13
14
  var _BarStyle = require("./BarStyle");
14
15
  var _useWindowSize2 = require("./useWindowSize");
16
+ var _excluded = ["onClick", "action"];
15
17
  var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
16
18
  var heading = _ref.heading,
17
19
  subheading = _ref.subheading,
@@ -45,6 +47,14 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
45
47
  width = _useWindowSize.width;
46
48
  var breakpointWidth = parseInt(_.Breakpoints.large.slice(0, -2));
47
49
  var buttonSize = width <= breakpointWidth ? 'default' : 'large';
50
+ function makeButtonProps(buttonAction) {
51
+ var onClick = buttonAction.onClick,
52
+ action = buttonAction.action,
53
+ otherProps = (0, _objectWithoutPropertiesLoose2["default"])(buttonAction, _excluded);
54
+ return (0, _extends2["default"])({
55
+ onClick: onClick || action
56
+ }, otherProps);
57
+ }
48
58
  return /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBar, {
49
59
  "data-align": position,
50
60
  ref: ref
@@ -52,11 +62,11 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
52
62
  onClick: onBack
53
63
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
54
64
  name: "ri-arrow-left-line"
55
- })), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, tertiaryAction, {
65
+ })), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, makeButtonProps(tertiaryAction), {
56
66
  size: buttonSize
57
- }), tertiaryAction.label), secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, secondaryAction, {
67
+ }), tertiaryAction.label), secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, makeButtonProps(secondaryAction), {
58
68
  size: buttonSize
59
- }), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({}, primaryAction, {
69
+ }), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({}, makeButtonProps(primaryAction), {
60
70
  size: buttonSize
61
71
  }), primaryAction.label)))));
62
72
  });
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.340",
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",