@cashub/ui 0.6.3 → 0.6.5

package/index.js

@@ -1,13 +1,25 @@
 "use strict";
 
+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); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  Dropdown: true
+};
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _dropdown.default;
+  }
+});
 
 var _animate = require("./animate");
 
 Object.keys(_animate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _animate[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +33,7 @@ var _backdrop = require("./backdrop");
 
 Object.keys(_backdrop).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _backdrop[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -34,6 +47,7 @@ var _badge = require("./badge");
 
 Object.keys(_badge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _badge[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,6 +61,7 @@ var _breadcrumb = require("./breadcrumb");
 
 Object.keys(_breadcrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _breadcrumb[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -60,6 +75,7 @@ var _button = require("./button");
 
 Object.keys(_button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -73,6 +89,7 @@ var _callout = require("./callout");
 
 Object.keys(_callout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _callout[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -86,6 +103,7 @@ var _chart = require("./chart");
 
 Object.keys(_chart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _chart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -99,6 +117,7 @@ var _container = require("./container");
 
 Object.keys(_container).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _container[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -112,6 +131,7 @@ var _cropper = require("./cropper");
 
 Object.keys(_cropper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _cropper[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -125,6 +145,7 @@ var _datetimePicker = require("./datetimePicker");
 
 Object.keys(_datetimePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _datetimePicker[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -138,6 +159,7 @@ var _descriptionList = require("./descriptionList");
 
 Object.keys(_descriptionList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _descriptionList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -151,6 +173,7 @@ var _divider = require("./divider");
 
 Object.keys(_divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _divider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -160,10 +183,11 @@ Object.keys(_divider).forEach(function (key) {
   });
 });
 
-var _dropdown = require("./dropdown");
+var _dropdown = _interopRequireWildcard(require("./dropdown"));
 
 Object.keys(_dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _dropdown[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -177,6 +201,7 @@ var _dropzone = require("./dropzone");
 
 Object.keys(_dropzone).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _dropzone[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -190,6 +215,7 @@ var _file = require("./file");
 
 Object.keys(_file).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _file[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -203,6 +229,7 @@ var _form = require("./form");
 
 Object.keys(_form).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _form[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -216,6 +243,7 @@ var _geolocation = require("./geolocation");
 
 Object.keys(_geolocation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _geolocation[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -229,6 +257,7 @@ var _grid = require("./grid");
 
 Object.keys(_grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _grid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -242,6 +271,7 @@ var _heading = require("./heading");
 
 Object.keys(_heading).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _heading[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -255,6 +285,7 @@ var _icon = require("./icon");
 
 Object.keys(_icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _icon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -268,6 +299,7 @@ var _iconbox = require("./iconbox");
 
 Object.keys(_iconbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _iconbox[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -281,6 +313,7 @@ var _image = require("./image");
 
 Object.keys(_image).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _image[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -294,6 +327,7 @@ var _jsoneditor = require("./jsoneditor");
 
 Object.keys(_jsoneditor).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _jsoneditor[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -307,6 +341,7 @@ var _link = require("./link");
 
 Object.keys(_link).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _link[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -320,6 +355,7 @@ var _map = require("./map");
 
 Object.keys(_map).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _map[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -333,6 +369,7 @@ var _modal = require("./modal");
 
 Object.keys(_modal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _modal[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -346,6 +383,7 @@ var _paginate = require("./paginate");
 
 Object.keys(_paginate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _paginate[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -359,6 +397,7 @@ var _popover = require("./popover");
 
 Object.keys(_popover).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _popover[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -372,6 +411,7 @@ var _qrcode = require("./qrcode");
 
 Object.keys(_qrcode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _qrcode[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -385,6 +425,7 @@ var _ribbon = require("./ribbon");
 
 Object.keys(_ribbon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ribbon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -398,6 +439,7 @@ var _section = require("./section");
 
 Object.keys(_section).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _section[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -411,6 +453,7 @@ var _select = require("./select");
 
 Object.keys(_select).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _select[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -424,6 +467,7 @@ var _table = require("./table");
 
 Object.keys(_table).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _table[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -437,6 +481,7 @@ var _Tab = require("./Tab");
 
 Object.keys(_Tab).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tab[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -450,6 +495,7 @@ var _tagify = require("./tagify");
 
 Object.keys(_tagify).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _tagify[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -463,6 +509,7 @@ var _text = require("./text");
 
 Object.keys(_text).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _text[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -476,6 +523,7 @@ var _timeline = require("./timeline");
 
 Object.keys(_timeline).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _timeline[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -489,6 +537,7 @@ var _toast = require("./toast");
 
 Object.keys(_toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _toast[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -502,6 +551,7 @@ var _tooltip = require("./tooltip");
 
 Object.keys(_tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _tooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -515,6 +565,7 @@ var _wizard = require("./wizard");
 
 Object.keys(_wizard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _wizard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -522,4 +573,8 @@ Object.keys(_wizard).forEach(function (key) {
       return _wizard[key];
     }
   });
-});
+});
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/select/InputSelect.js

@@ -0,0 +1,383 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+
+var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
+
+var _keycode = _interopRequireDefault(require("../utils/aria/keycode"));
+
+var _Input = _interopRequireDefault(require("../form/Input"));
+
+var _ListBox = _interopRequireDefault(require("./ListBox"));
+
+var _Option = _interopRequireDefault(require("./Option"));
+
+var _Options = _interopRequireDefault(require("./Options"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["options", "onSelect", "value", "disabled", "onChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayListBox = _useState2[0],
+      setDisplayListBox = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      filteredOptions = _useState4[0],
+      setFilteredOptions = _useState4[1]; // render時使用的資料
+
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      optionList = _useState6[0],
+      setOptionList = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      focusedOption = _useState8[0],
+      setFocusedOption = _useState8[1];
+
+  var optionsElementRef = (0, _react.useRef)(null);
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listBoxElement = _useState10[0],
+      setListBoxElement = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      dropdownElement = _useState12[0],
+      setDropdownElement = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      listBoxWidth = _useState14[0],
+      setListBoxWidth = _useState14[1];
+
+  var _useCustomPopper = (0, _useCustomPopper2.default)(listBoxElement, dropdownElement),
+      styles = _useCustomPopper.styles,
+      attributes = _useCustomPopper.attributes,
+      state = _useCustomPopper.state,
+      update = _useCustomPopper.update;
+
+  var handleKeyUp = function handleKeyUp(e) {
+    var key = e.keyCode;
+
+    switch (key) {
+      case _keycode.default.ENTER:
+        if (!displayListBox) {
+          handleDisplay();
+        } else if (focusedOption) {
+          handleClickOption(focusedOption.id);
+        }
+
+        break;
+
+      case _keycode.default.ESCAPE:
+        setDisplayListBox(false);
+        break;
+
+      case _keycode.default.UP:
+        {
+          if (!focusedOption) return;
+          var previousItem = findPreviousItem(focusedOption);
+
+          if (previousItem) {
+            handleFocusItem(previousItem);
+          }
+
+          break;
+        }
+
+      case _keycode.default.DOWN:
+        {
+          if (!focusedOption) return;
+          var nextItem = findNextItem(focusedOption);
+
+          if (nextItem) {
+            handleFocusItem(nextItem);
+          }
+
+          break;
+        }
+
+      case _keycode.default.HOME:
+        e.preventDefault();
+        focusFirstItem();
+        break;
+
+      case _keycode.default.END:
+        {
+          e.preventDefault();
+          var lastItem = dropdownElement.querySelectorAll('[role="option"]');
+
+          if (lastItem.length) {
+            handleFocusItem(lastItem[lastItem.length - 1]);
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    var key = e.keyCode;
+
+    switch (key) {
+      case _keycode.default.ENTER:
+      case _keycode.default.ESCAPE:
+      case _keycode.default.UP:
+      case _keycode.default.DOWN:
+      case _keycode.default.END:
+      case _keycode.default.HOME:
+        e.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var findPreviousItem = (0, _react.useCallback)(function (currentItem) {
+    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+
+    var currentItemIndex = allItem.indexOf(currentItem);
+    var previousItem = null;
+
+    if (currentItemIndex !== -1 && currentItemIndex > 0) {
+      previousItem = allItem[currentItemIndex - 1];
+    }
+
+    return previousItem;
+  }, [dropdownElement]);
+  var findNextItem = (0, _react.useCallback)(function (currentItem) {
+    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+
+    var currentItemIndex = allItem.indexOf(currentItem);
+    var nextItem = null;
+
+    if (currentItemIndex !== -1 && currentItemIndex !== allItem.length - 1) {
+      nextItem = allItem[currentItemIndex + 1];
+    }
+
+    return nextItem;
+  }, [dropdownElement]); //set focused option
+
+  var handleFocusItem = (0, _react.useCallback)(function (element) {
+    if (!optionsElementRef.current) return;
+    setFocusedOption(element);
+  }, []);
+  var focusFirstItem = (0, _react.useCallback)(function () {
+    var firstItem = dropdownElement.querySelector('[role="option"]');
+
+    if (firstItem) {
+      handleFocusItem(firstItem);
+    }
+  }, [dropdownElement, handleFocusItem]);
+  var setupFocus = (0, _react.useCallback)(function () {
+    if (!dropdownElement) return;
+    var selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
+
+    if (selectedItem) {
+      handleFocusItem(selectedItem);
+    } else if (optionList.length > 0) {
+      focusFirstItem();
+    }
+  }, [dropdownElement, focusFirstItem, handleFocusItem, optionList]);
+
+  var handleDisplay = function handleDisplay() {
+    if (filteredOptions.length > 0) {
+      setDisplayListBox(true);
+      update();
+    }
+  };
+
+  var handleClickOption = (0, _react.useCallback)(function (packageName) {
+    if (disabled === true) return;
+    onSelect(packageName);
+    setDisplayListBox(false);
+  }, [onSelect, disabled]); // all option
+
+  var optionItem = (0, _react.useMemo)(function () {
+    return optionList.map(function (option) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        role: "option",
+        tabIndex: "0",
+        id: option.package_name,
+        selected: option.selected,
+        "aria-selected": option.selected,
+        onClick: function onClick() {
+          handleClickOption(option.package_name);
+        },
+        focus: focusedOption && focusedOption.id === option.package_name.toString(),
+        children: option.package_name
+      }, option.package_name);
+    });
+  }, [optionList, handleClickOption, focusedOption]); // parse all value to string
+  // for subsequently determine whether it is a selected item
+
+  var parsedSelected = (0, _react.useMemo)(function () {
+    if (value || value === 0) {
+      return value.toString();
+    }
+  }, [value]); // observe element resized
+
+  (0, _react.useEffect)(function () {
+    if (!listBoxElement) return;
+    setListBoxWidth(listBoxElement.clientWidth);
+  }, [listBoxElement]); //過濾搜尋關鍵字資料
+
+  (0, _react.useEffect)(function () {
+    if (!options.length) return;
+    var tmpFilteredChildOptions = options.filter(function (option) {
+      return option.package_name.toLowerCase().includes(value.toLowerCase());
+    });
+    setFilteredOptions(tmpFilteredChildOptions);
+  }, [options, value]);
+  (0, _react.useEffect)(function () {
+    if (update) {
+      setTimeout(function () {
+        update();
+      }, 100);
+    }
+  }, [update, listBoxWidth]); // observe element resized
+
+  (0, _react.useEffect)(function () {
+    if (!listBoxElement) return;
+    var resizeObserverInstance = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+
+          if (entry.target) {
+            var borderBoxSize = entry.target.clientWidth;
+            setListBoxWidth(borderBoxSize);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    resizeObserverInstance.observe(listBoxElement);
+    return function () {
+      resizeObserverInstance.unobserve(listBoxElement);
+    };
+  }, [listBoxElement]);
+  (0, _react.useEffect)(function () {
+    var selected = false;
+    setOptionList(filteredOptions.map(function (option) {
+      if (parsedSelected === option.package_name) {
+        selected = true;
+      } else {
+        selected = false;
+      }
+
+      return _objectSpread(_objectSpread({}, option), {}, {
+        selected: selected
+      });
+    }));
+  }, [filteredOptions, parsedSelected]);
+  (0, _react.useEffect)(function () {
+    if (displayListBox) {
+      setupFocus();
+    }
+  }, [displayListBox, setupFocus, value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+    onOutsideClick: function onOutsideClick() {
+      setDisplayListBox(false);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
+      autoComplete: "off"
+    }, props), {}, {
+      onChange: function onChange(e) {
+        _onChange(e);
+
+        if (!displayListBox) setDisplayListBox(true);
+      },
+      value: value,
+      ref: setListBoxElement
+    }, attributes.popper), {}, {
+      placement: state && state.placement,
+      onClick: handleDisplay,
+      onKeyUp: handleKeyUp,
+      onFocus: function onFocus() {
+        setDisplayListBox(true);
+      },
+      onKeyDown: handleKeyDown
+    })), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
+      style: styles.popper,
+      $display: displayListBox,
+      ref: setDropdownElement,
+      width: listBoxWidth,
+      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+        ref: optionsElementRef,
+        children: optionItem
+      })
+    })]
+  });
+};
+
+var _default = InputSelect;
+exports.default = _default;

package/select/ListBox.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  background: var(--color-background1);\n  color: var(--color-white);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  width: ", "px;\n  z-index: 20;\n"])), function (_ref) {
+var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  background: var(--color-background1);\n  color: var(--color-white);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  width: ", "px;\n  z-index: 31;\n"])), function (_ref) {
   var $display = _ref.$display;
   return $display ? 'visible' : 'hidden';
 }, function (_ref2) {

package/select/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "InputSelect", {
+  enumerable: true,
+  get: function get() {
+    return _InputSelect.default;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "Select", {
 
 var _Select = _interopRequireDefault(require("./Select"));
 
+var _InputSelect = _interopRequireDefault(require("./InputSelect"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }