armtek-uikit-react 1.0.98 → 1.0.100

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 (4) hide show
  1. package/assets/Card.scss +1 -0
  2. package/package.json +1 -1
  3. package/ui/Form/Select/Select.d.ts +2 -0
  4. package/ui/Form/Select/Select.js +68 -44
package/assets/Card.scss CHANGED
@@ -4,4 +4,5 @@
4
4
  padding: $size-step;
5
5
  box-shadow: $box-shadow;
6
6
  border-radius: $radius;
7
+ background-color: #ffffff;
7
8
  }
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.98","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
1
+ {"name":"armtek-uikit-react","version":"1.0.100","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
package/ui/Form/Select/Select.d.ts CHANGED
@@ -6,6 +6,8 @@ type SelectBaseProps = {
6
6
  inline?: boolean;
7
7
  search?: boolean;
8
8
  open?: boolean;
9
+ onClose?: () => void;
10
+ defaultOpen?: boolean;
9
11
  listStyle?: SelectOptionsType<true>['listStyle'];
10
12
  onSelectAll?: () => void;
11
13
  onClearAll?: () => void;
package/ui/Form/Select/Select.js CHANGED
@@ -4,6 +4,7 @@ import TextField from "../TextField/TextField";
4
4
  import { forwardRef, useState } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import ListItem from "../../List/ListItem";
7
+ import useClickOutside from "../../../lib/hooks/useClickOutside";
7
8
  import css from "./Select.module.scss";
8
9
  import ButtonIcon from "../../ButtonIcon";
9
10
  import Adornment from "../../Adornment";
@@ -24,6 +25,7 @@ function Select(props) {
24
25
  var _options$find;
25
26
  let {
26
27
  options,
28
+ defaultOpen,
27
29
  endAdornment,
28
30
  className,
29
31
  inline,
@@ -35,15 +37,17 @@ function Select(props) {
35
37
  open,
36
38
  listStyle,
37
39
  onSubmit,
40
+ onClose,
38
41
  onClearAll,
39
42
  onSelectAll,
40
43
  ...inputProps
41
44
  } = props;
42
- let [active, setActive] = useState(false);
45
+ let [active, setActive] = useState(!!defaultOpen);
43
46
  let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
44
47
  let [focused, setFocused] = useState(false);
45
48
  let [q, setQ] = useState('');
46
49
  const [anchorEl, setAnchorEl] = useState(null);
50
+ const inlineOptRef = useClickOutside(handleClose);
47
51
  const handleOpen = e => {
48
52
  if (!inputProps.disabled) {
49
53
  setActive(true);
@@ -113,50 +117,70 @@ function Select(props) {
113
117
  if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
114
118
  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
115
119
  let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
116
- return /*#__PURE__*/_jsxs(_Fragment, {
117
- children: [/*#__PURE__*/_jsxs("div", {
118
- className: css.select,
119
- children: [/*#__PURE__*/_jsx("div", {
120
- className: css.select__input_wrapper,
121
- onClick: handleOpen,
122
- children: /*#__PURE__*/_jsx(TextField, {
123
- ...inputProps,
124
- onChange: handleSearch,
125
- focused: focused,
126
- onFocus: handleFocus,
127
- onBlur: handleBlur,
128
- value: !search ? selectedText : q,
129
- className: clsx(css.select__input, className),
130
- endAdornment: selectEndAdornment,
131
- style: {
132
- pointerEvents: 'none'
133
- },
134
- editable: !!search
120
+ function handleClose() {
121
+ if (onClose) onClose();else setActive(false);
122
+ }
123
+ return /*#__PURE__*/_jsx(_Fragment, {
124
+ children: /*#__PURE__*/_jsxs("div", {
125
+ className: className,
126
+ children: [/*#__PURE__*/_jsxs("div", {
127
+ className: css.select,
128
+ children: [/*#__PURE__*/_jsx("div", {
129
+ className: css.select__input_wrapper,
130
+ onClick: handleOpen,
131
+ children: /*#__PURE__*/_jsx(TextField, {
132
+ ...inputProps,
133
+ onChange: handleSearch,
134
+ focused: focused,
135
+ onFocus: handleFocus,
136
+ onBlur: handleBlur,
137
+ value: !search ? selectedText : q,
138
+ className: clsx(css.select__input),
139
+ endAdornment: selectEndAdornment,
140
+ style: {
141
+ pointerEvents: 'none'
142
+ },
143
+ editable: !!search
144
+ })
145
+ }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
146
+ options: selectedOptions,
147
+ disabled: inputProps.disabled,
148
+ onDelete: handleSelect
149
+ })]
150
+ }), realActive && anchorEl && (!inline ? /*#__PURE__*/_jsx(Popover, {
151
+ matchWidth: true,
152
+ anchorEl: anchorEl,
153
+ open: realActive,
154
+ onClose: handleClose,
155
+ placement: 'bottom-start',
156
+ children: /*#__PURE__*/_jsx(SelectOptions, {
157
+ disabled: inputProps.disabled,
158
+ options: options,
159
+ multiple: multiple,
160
+ value: realValue,
161
+ inline: inline,
162
+ listStyle: listStyle,
163
+ onClick: handleSelect,
164
+ onClearAll: handleResetAll,
165
+ onSelectAll: handleSelectAll,
166
+ onSubmit: handleSubmit
135
167
  })
136
- }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
137
- options: selectedOptions,
138
- disabled: inputProps.disabled,
139
- onDelete: handleSelect
140
- })]
141
- }), anchorEl && /*#__PURE__*/_jsx(Popover, {
142
- matchWidth: true,
143
- anchorEl: anchorEl,
144
- open: realActive,
145
- onClose: () => setActive(false),
146
- placement: 'bottom-start',
147
- children: /*#__PURE__*/_jsx(SelectOptions, {
148
- disabled: inputProps.disabled,
149
- options: options,
150
- multiple: multiple,
151
- value: realValue,
152
- inline: inline,
153
- listStyle: listStyle,
154
- onClick: handleSelect,
155
- onClearAll: handleResetAll,
156
- onSelectAll: handleSelectAll,
157
- onSubmit: handleSubmit
158
- })
159
- })]
168
+ }) : /*#__PURE__*/_jsx("div", {
169
+ ref: inlineOptRef,
170
+ children: /*#__PURE__*/_jsx(SelectOptions, {
171
+ disabled: inputProps.disabled,
172
+ options: options,
173
+ multiple: multiple,
174
+ value: realValue,
175
+ inline: inline,
176
+ listStyle: listStyle,
177
+ onClick: handleSelect,
178
+ onClearAll: handleResetAll,
179
+ onSelectAll: handleSelectAll,
180
+ onSubmit: handleSubmit
181
+ })
182
+ }))]
183
+ })
160
184
  });
161
185
  }
162
186
  const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {