armtek-uikit-react 1.0.99 → 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 (2) hide show
  1. package/package.json +1 -1
  2. package/ui/Form/Select/Select.js +64 -45
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.99","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.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";
@@ -46,6 +47,7 @@ function Select(props) {
46
47
  let [focused, setFocused] = useState(false);
47
48
  let [q, setQ] = useState('');
48
49
  const [anchorEl, setAnchorEl] = useState(null);
50
+ const inlineOptRef = useClickOutside(handleClose);
49
51
  const handleOpen = e => {
50
52
  if (!inputProps.disabled) {
51
53
  setActive(true);
@@ -115,53 +117,70 @@ function Select(props) {
115
117
  if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
116
118
  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
117
119
  let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
118
- const handleClose = () => {
120
+ function handleClose() {
119
121
  if (onClose) onClose();else setActive(false);
120
- };
121
- return /*#__PURE__*/_jsxs(_Fragment, {
122
- children: [/*#__PURE__*/_jsxs("div", {
123
- className: css.select,
124
- children: [/*#__PURE__*/_jsx("div", {
125
- className: css.select__input_wrapper,
126
- onClick: handleOpen,
127
- children: /*#__PURE__*/_jsx(TextField, {
128
- ...inputProps,
129
- onChange: handleSearch,
130
- focused: focused,
131
- onFocus: handleFocus,
132
- onBlur: handleBlur,
133
- value: !search ? selectedText : q,
134
- className: clsx(css.select__input, className),
135
- endAdornment: selectEndAdornment,
136
- style: {
137
- pointerEvents: 'none'
138
- },
139
- editable: !!search
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
140
167
  })
141
- }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
142
- options: selectedOptions,
143
- disabled: inputProps.disabled,
144
- onDelete: handleSelect
145
- })]
146
- }), realActive && anchorEl && /*#__PURE__*/_jsx(Popover, {
147
- matchWidth: true,
148
- anchorEl: anchorEl,
149
- open: realActive,
150
- onClose: handleClose,
151
- placement: 'bottom-start',
152
- children: /*#__PURE__*/_jsx(SelectOptions, {
153
- disabled: inputProps.disabled,
154
- options: options,
155
- multiple: multiple,
156
- value: realValue,
157
- inline: inline,
158
- listStyle: listStyle,
159
- onClick: handleSelect,
160
- onClearAll: handleResetAll,
161
- onSelectAll: handleSelectAll,
162
- onSubmit: handleSubmit
163
- })
164
- })]
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
+ })
165
184
  });
166
185
  }
167
186
  const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {