@cashub/ui 0.9.6 → 0.9.8

package/dropzone/ImageDropzone.js

@@ -75,8 +75,6 @@ var ImageDropzone = function ImageDropzone(_ref) {
       addedFiles = _useState6[0],
       setAddedFiles = _useState6[1];
 
-  var refWrapper = (0, _react.useRef)(null);
-
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
       focus = _useState8[0],
@@ -103,7 +101,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
   var handleDragLeave = function handleDragLeave(event) {
     event.preventDefault();
     event.stopPropagation();
-    if (files.length < maxFiles) setDragging(false);
+    setDragging(false);
   };
 
   var handleDrop = function handleDrop(event) {
@@ -225,7 +223,10 @@ var ImageDropzone = function ImageDropzone(_ref) {
 
   var handleBlur = function handleBlur() {
     if (focus) {
-      onBlur();
+      if (onBlur) {
+        onBlur();
+      }
+
       setFocus(false);
     }
   };
@@ -256,6 +257,8 @@ var ImageDropzone = function ImageDropzone(_ref) {
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    tabIndex: "-1",
+    dragging: dragging,
     onClick: handleClick,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
@@ -266,8 +269,6 @@ var ImageDropzone = function ImageDropzone(_ref) {
     onFocus: function onFocus() {
       setFocus(true);
     },
-    ref: refWrapper,
-    tabIndex: "-1",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
       multiple: true,
       ref: inputRef,
@@ -277,9 +278,12 @@ var ImageDropzone = function ImageDropzone(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref2) {
   var reachedLimit = _ref2.reachedLimit;
   return reachedLimit ? 'default' : 'pointer';
+}, function (_ref3) {
+  var dragging = _ref3.dragging;
+  return dragging && 'border-color: var(--color-primary);';
 });
 
 var Image = _styledComponents.default.figure(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 180px;\n  height: 320px;\n  position: relative;\n  margin: var(--spacing-xs);\n\n  > img {\n    width: 100%;\n    height: 100%;\n    border-radius: var(--border-radius);\n  }\n"])));
@@ -290,8 +294,8 @@ var Button = _styledComponents.default.div.attrs(function () {
   return {
     role: 'button'
   };
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: var(--color-white);\n  background: var(--color-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n\n  > svg {\n    color: var(--color-white);\n    margin: 0 auto;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    margin: 0 auto;\n    display: block;\n  }\n\n  &:not(:first-child) {\n    margin-left: var(--spacing-xs);\n  }\n\n  ", "\n"])), function (_ref3) {
-  var danger = _ref3.danger;
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: var(--color-white);\n  background: var(--color-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n\n  > svg {\n    color: var(--color-white);\n    margin: 0 auto;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    margin: 0 auto;\n    display: block;\n  }\n\n  &:not(:first-child) {\n    margin-left: var(--spacing-xs);\n  }\n\n  ", "\n"])), function (_ref4) {
+  var danger = _ref4.danger;
   return danger && 'background: var(--color-danger);';
 });
 

package/image/UploadImage.js

@@ -154,22 +154,22 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
   }, [cropperHandler, handleImageFile]);
 
-  var handleFocus = function handleFocus(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleFocus = function handleFocus(event) {
+    event.preventDefault();
+    event.stopPropagation();
 
-    if (e.target.tagName === 'BUTTON') {
+    if (event.target.tagName === 'BUTTON') {
       setFocusCount(focusCount + 1);
     }
   };
 
-  var handleBlur = function handleBlur(e) {
-    e.preventDefault();
-    e.stopPropagation(); // if click figure,after click button
+  var handleBlur = function handleBlur(event) {
+    event.preventDefault();
+    event.stopPropagation(); // if click figure,after click button
 
-    if (refWrapper.current.contains(e.relatedTarget)) return;
+    if (refWrapper.current.contains(event.relatedTarget)) return;
 
-    if (e.target === refWrapper.current && onBlur) {
+    if (event.target === refWrapper.current && onBlur) {
       onBlur();
     }
   };
@@ -215,8 +215,8 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       ref: ref && ref,
       id: id,
       accept: ".jpeg, .bmp, .jpg, .png",
-      onChange: function onChange(e) {
-        return handleOnChange(e.target.files);
+      onChange: function onChange(event) {
+        return handleOnChange(event.target.files);
       }
     }), ref && ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
       onClick: handleAvatarRemove,

package/map/DrawControl.js

@@ -31,6 +31,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var eventHandlers = {
   onEdited: 'draw:edited',
   onDrawStart: 'draw:drawstart',
@@ -57,9 +69,9 @@ var DrawControl = function DrawControl(props) {
 
   var drawRef = (0, _react.useRef)();
   var propsRef = (0, _react.useRef)(props);
-  var onDrawCreate = (0, _react.useCallback)(function (e) {
+  var onDrawCreate = (0, _react.useCallback)(function (event) {
     var container = layerContainer;
-    container.addLayer(e.layer);
+    container.addLayer(event.layer);
   }, [layerContainer]);
   var enableEdit = (0, _react.useCallback)(function () {
     // programatically enable edit mode
@@ -85,7 +97,9 @@ var DrawControl = function DrawControl(props) {
         });
 
         if (handlers.length === 1) {
-          var handler = handlers[0];
+          var _handlers = _slicedToArray(handlers, 1),
+              handler = _handlers[0];
+
           props[handler] && props[handler](evt);
         }
       });

package/map/LeafletMap.js

@@ -94,26 +94,29 @@ var LeafletMap = function LeafletMap(_ref) {
       return;
     }
 
-    locations.forEach(function (e, index) {
-      if (!e.latitude && e.latitude !== 0 || !e.longitude && e.longitude !== 0 || e.latitude === 0 && e.longitude === 0 || e.latitude === '0' && e.longitude === '0') {
+    locations.forEach(function (location, index) {
+      var latitude = location.latitude,
+          longitude = location.longitude;
+
+      if (!latitude && latitude !== 0 || !longitude && longitude !== 0 || latitude === 0 && longitude === 0 || latitude === '0' && longitude === '0') {
         return;
       } // prevent duplicate LatLngBounds
 
 
       if (!bounds.some(function (LatLng) {
-        return e.latitude === LatLng[0] && e.longitude === LatLng[1];
+        return latitude === LatLng[0] && longitude === LatLng[1];
       })) {
-        bounds.push([e.latitude, e.longitude]);
+        bounds.push([latitude, longitude]);
       }
 
-      arrLatLngs.push([e.latitude, e.longitude]);
+      arrLatLngs.push([latitude, longitude]);
       var popupContent = null;
 
       if (customPopup) {
         popupContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Popup, {
           maxWidth: 400,
           closeButton: false,
-          children: customPopup(e)
+          children: customPopup(location)
         });
       }
 
@@ -122,7 +125,7 @@ var LeafletMap = function LeafletMap(_ref) {
         iconSize: [40, 50]
       });
 
-      if (checkPrimaryLocation && checkPrimaryLocation(e)) {
+      if (checkPrimaryLocation && checkPrimaryLocation(location)) {
         Icon = _leaflet.default.icon({
           iconUrl: _map_icon.default,
           iconSize: [40, 50]
@@ -130,7 +133,7 @@ var LeafletMap = function LeafletMap(_ref) {
       }
 
       markers.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Marker, {
-        position: [e.latitude, e.longitude],
+        position: [latitude, longitude],
         icon: Icon,
         children: popupContent
       }, index));
@@ -188,8 +191,8 @@ var MapInteractor = function MapInteractor(_ref2) {
       defaultPosition = _ref2.defaultPosition,
       position = _ref2.position;
   var map = (0, _reactLeaflet.useMapEvents)({
-    click: function click(e) {
-      e.originalEvent.stopPropagation();
+    click: function click(event) {
+      event.originalEvent.stopPropagation();
     },
     focus: function focus() {
       map.scrollWheelZoom.enable();

package/modal/StateModal.js

@@ -129,7 +129,9 @@ var ModalContent = function ModalContent(_ref2) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
         type: type,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          role: "img"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
           children: title
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
           children: text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",
@@ -16,6 +16,8 @@
     "@yaireo/tagify": "^4.12.0",
     "chart.js": "^3.8.0",
     "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lodash.uniqueid": "^4.0.1",

package/paginate/Paginate.js

@@ -15,7 +15,7 @@ var _hooks = require("@cashub/hooks");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -91,20 +91,19 @@ var Container = _styledComponents.default.ul(_templateObject || (_templateObject
   return alignRight && 'justify-content: flex-end';
 });
 
-var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  line-height: 37px;\n  font-size: var(--font-body1);\n  color: var(--font-on-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  transition: 0.3s;\n\n  &:not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n\n  ", ";\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n  &.paginationDots {\n    cursor: default;\n  }\n"])), function (_ref2) {
+var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  line-height: 37px;\n  font-size: var(--font-body1);\n  color: var(--font-on-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  transition: 0.3s;\n\n  &:not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &.paginationDots {\n    cursor: default;\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: no-drop;\n    "])));
 }, function (_ref3) {
-  var disabled = _ref3.disabled,
-      active = _ref3.active;
-  return !disabled && active && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-color: var(--color-primary);\n    "])));
+  var active = _ref3.active;
+  return active && 'background-color: var(--color-primary)';
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       className = _ref4.className;
-  return !disabled && !className && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background-color: var(--color-primary);\n      "])));
+  return !disabled && !className && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background-color: var(--color-primary);\n      "])));
 });
 
-var Icon = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
+var Icon = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 
 var _default = Paginate;
 exports.default = _default;

package/select/InputSelect.js

@@ -23,7 +23,7 @@ var _Options = _interopRequireDefault(require("./subComponent/Options"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["options", "onSelect", "value", "disabled", "onChange"];
+var _excluded = ["options", "value", "disabled", "onChange", "onSelect"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -62,10 +62,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var InputSelect = function InputSelect(_ref) {
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
-      onSelect = _ref.onSelect,
       value = _ref.value,
       disabled = _ref.disabled,
       _onChange = _ref.onChange,
+      onSelect = _ref.onSelect,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -76,8 +76,7 @@ var InputSelect = function InputSelect(_ref) {
   var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
       filteredOptions = _useState4[0],
-      setFilteredOptions = _useState4[1]; // render時使用的資料
-
+      setFilteredOptions = _useState4[1];
 
   var _useState5 = (0, _react.useState)([]),
       _useState6 = _slicedToArray(_useState5, 2),
@@ -112,8 +111,8 @@ var InputSelect = function InputSelect(_ref) {
       state = _useCustomPopper.state,
       update = _useCustomPopper.update;
 
-  var handleKeyUp = function handleKeyUp(e) {
-    var key = e.keyCode;
+  var handleKeyUp = function handleKeyUp(event) {
+    var key = event.keyCode;
 
     switch (key) {
       case _utils.KEY_CODE.ENTER:
@@ -154,13 +153,13 @@ var InputSelect = function InputSelect(_ref) {
         }
 
       case _utils.KEY_CODE.HOME:
-        e.preventDefault();
+        event.preventDefault();
         focusFirstItem();
         break;
 
       case _utils.KEY_CODE.END:
         {
-          e.preventDefault();
+          event.preventDefault();
           var lastItem = dropdownElement.querySelectorAll('[role="option"]');
 
           if (lastItem.length) {
@@ -175,8 +174,8 @@ var InputSelect = function InputSelect(_ref) {
     }
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
-    var key = e.keyCode;
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.keyCode;
 
     switch (key) {
       case _utils.KEY_CODE.ENTER:
@@ -185,7 +184,7 @@ var InputSelect = function InputSelect(_ref) {
       case _utils.KEY_CODE.DOWN:
       case _utils.KEY_CODE.END:
       case _utils.KEY_CODE.HOME:
-        e.preventDefault();
+        event.preventDefault();
         break;
 
       default:
@@ -216,7 +215,7 @@ var InputSelect = function InputSelect(_ref) {
     }
 
     return nextItem;
-  }, [dropdownElement]); //set focused option
+  }, [dropdownElement]); // set focused option
 
   var handleFocusItem = (0, _react.useCallback)(function (element) {
     if (!optionsElementRef.current) return;
@@ -280,7 +279,7 @@ var InputSelect = function InputSelect(_ref) {
   (0, _react.useEffect)(function () {
     if (!listBoxElement) return;
     setListBoxWidth(listBoxElement.clientWidth);
-  }, [listBoxElement]); //過濾搜尋關鍵字資料
+  }, [listBoxElement]); // 過濾搜尋關鍵字資料
 
   (0, _react.useEffect)(function () {
     if (!options.length) return;
@@ -349,8 +348,8 @@ var InputSelect = function InputSelect(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
       autoComplete: "off"
     }, props), {}, {
-      onChange: function onChange(e) {
-        _onChange(e);
+      onChange: function onChange(event) {
+        _onChange(event);
 
         if (!displayListBox) setDisplayListBox(true);
       },

package/select/Select.js

@@ -104,13 +104,13 @@ var Select = function Select(_ref) {
 
   var _useState5 = (0, _react.useState)(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      listBoxElement = _useState6[0],
-      setListBoxElement = _useState6[1];
+      comboboxElement = _useState6[0],
+      setComboboxElement = _useState6[1];
 
   var _useState7 = (0, _react.useState)(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      dropdownElement = _useState8[0],
-      setDropdownElement = _useState8[1];
+      listBoxElement = _useState8[0],
+      setListBoxElement = _useState8[1];
 
   var optionsElementRef = (0, _react.useRef)(null);
   var searchBoxElement = (0, _react.useRef)(null);
@@ -150,7 +150,7 @@ var Select = function Select(_ref) {
       search = _useState22[0],
       setSearch = _useState22[1];
 
-  var _useCustomPopper = (0, _hooks.useCustomPopper)(listBoxElement, dropdownElement),
+  var _useCustomPopper = (0, _hooks.useCustomPopper)(comboboxElement, listBoxElement),
       styles = _useCustomPopper.styles,
       attributes = _useCustomPopper.attributes,
       state = _useCustomPopper.state,
@@ -159,17 +159,15 @@ var Select = function Select(_ref) {
 
 
   var parsedSelected = (0, _react.useMemo)(function () {
-    if (selected || selected === 0) {
-      // multiple value
-      if (Array.isArray(selected) && selected.length > 0) {
-        return selected.map(function (value) {
-          return value.toString();
-        });
-      } // single value
+    // multiple value
+    if (Array.isArray(selected)) {
+      return selected.map(function (value) {
+        return value.toString();
+      });
+    } // single value
 
 
-      return selected.toString();
-    }
+    return selected.toString();
   }, [selected]); // set focused option
 
   var handleFocusItem = (0, _react.useCallback)(function (element) {
@@ -189,15 +187,15 @@ var Select = function Select(_ref) {
     }
   }, []);
   var focusFirstItem = (0, _react.useCallback)(function () {
-    var firstItem = dropdownElement.querySelector('[role="option"]');
+    var firstItem = listBoxElement.querySelector('[role="option"]');
 
     if (firstItem) {
       handleFocusItem(firstItem);
     }
-  }, [dropdownElement, handleFocusItem]);
+  }, [listBoxElement, handleFocusItem]);
   var setupFocus = (0, _react.useCallback)(function () {
-    if (!dropdownElement) return;
-    var selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
+    if (!listBoxElement) return;
+    var selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
 
     if (selectedItem) {
       handleFocusItem(selectedItem);
@@ -206,9 +204,9 @@ var Select = function Select(_ref) {
     } else {
       setFocusedOption(null);
     }
-  }, [dropdownElement, handleFocusItem, focusFirstItem, optionList]);
+  }, [listBoxElement, handleFocusItem, focusFirstItem, optionList]);
   var findPreviousItem = (0, _react.useCallback)(function (currentItem) {
-    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+    var allItem = _toConsumableArray(listBoxElement.querySelectorAll('[role="option"]'));
 
     var currentItemIndex = allItem.indexOf(currentItem);
     var previousItem = null;
@@ -218,9 +216,9 @@ var Select = function Select(_ref) {
     }
 
     return previousItem;
-  }, [dropdownElement]);
+  }, [listBoxElement]);
   var findNextItem = (0, _react.useCallback)(function (currentItem) {
-    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+    var allItem = _toConsumableArray(listBoxElement.querySelectorAll('[role="option"]'));
 
     var currentItemIndex = allItem.indexOf(currentItem);
     var nextItem = null;
@@ -230,15 +228,15 @@ var Select = function Select(_ref) {
     }
 
     return nextItem;
-  }, [dropdownElement]);
+  }, [listBoxElement]);
   var handleOnSelect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
     if (disabled === true) return;
     onSelect(value);
-    listBoxElement.focus();
+    comboboxElement.focus();
     setSearch('');
     setDisplay(false);
-  }, [disabled, onSelect, listBoxElement]);
+  }, [disabled, onSelect, comboboxElement]);
   var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
     if (disabled === true) return;
@@ -305,8 +303,8 @@ var Select = function Select(_ref) {
         children: option.text
       }, option.id);
     });
-  }, [optionList, focusedOption, handleOnSelect]); // show or hide dropdown
-  // and set dropdown width according to listbox current width
+  }, [optionList, focusedOption, handleOnSelect]); // show or hide listbox
+  // and set listbox width according to combobox current width
 
   var handleToggle = function handleToggle() {
     if (disabled === true) return;
@@ -374,7 +372,7 @@ var Select = function Select(_ref) {
       case _utils.KEY_CODE.END:
         {
           event.preventDefault();
-          var itemList = dropdownElement.querySelectorAll('[role="option"]');
+          var itemList = listBoxElement.querySelectorAll('[role="option"]');
 
           if (itemList.length) {
             handleFocusItem(itemList[itemList.length - 1]);
@@ -416,9 +414,9 @@ var Select = function Select(_ref) {
     setSearch(event.target.value);
   };
 
-  var handleFocus = function handleFocus(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleFocus = function handleFocus(event) {
+    event.preventDefault();
+    event.stopPropagation();
     setIsFocusCombobox(true);
   }; // determine selected option(s)
 
@@ -456,7 +454,7 @@ var Select = function Select(_ref) {
   }, [update, listBoxWidth]); // observe element resized
 
   (0, _react.useEffect)(function () {
-    if (!listBoxElement) return;
+    if (!comboboxElement) return;
     var resizeObserverInstance = new ResizeObserver(function (entries) {
       var _iterator = _createForOfIteratorHelper(entries),
           _step;
@@ -476,12 +474,12 @@ var Select = function Select(_ref) {
         _iterator.f();
       }
     });
-    resizeObserverInstance.observe(listBoxElement);
+    resizeObserverInstance.observe(comboboxElement);
     return function () {
       // unobserve element
-      resizeObserverInstance.unobserve(listBoxElement);
+      resizeObserverInstance.unobserve(comboboxElement);
     };
-  }, [listBoxElement]); // re-setup focus when option list changed and update popper position
+  }, [comboboxElement]); // re-setup focus when option list changed and update popper position
 
   (0, _react.useEffect)(function () {
     setupFocus();
@@ -564,7 +562,7 @@ var Select = function Select(_ref) {
       "aria-haspopup": "listbox",
       "aria-expanded": display,
       "aria-owns": id,
-      ref: setListBoxElement,
+      ref: setComboboxElement,
       onClick: handleToggle,
       onKeyUp: handleKeyUp,
       onKeyDown: handleKeyDown,
@@ -587,7 +585,7 @@ var Select = function Select(_ref) {
       role: "listbox",
       tabIndex: "0",
       id: id,
-      ref: setDropdownElement,
+      ref: setListBoxElement,
       onKeyUp: handleKeyUp,
       onKeyDown: handleKeyDown,
       width: listBoxWidth,