@cashub/ui 0.20.0 → 0.21.1

package/section/SectionToolbarItem.js

@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var SectionToolbarItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
-
-var _default = SectionToolbarItem;
-exports.default = _default;
+const SectionToolbarItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
+var _default = exports.default = SectionToolbarItem;

package/section/index.js

@@ -5,43 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Section", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Section.default;
   }
 });
 Object.defineProperty(exports, "SectionBody", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _SectionBody.default;
   }
 });
 Object.defineProperty(exports, "SectionHeader", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _SectionHeader.default;
   }
 });
 Object.defineProperty(exports, "SectionToolbar", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _SectionToolbar.default;
   }
 });
 Object.defineProperty(exports, "SectionToolbarItem", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _SectionToolbarItem.default;
   }
 });
-
 var _Section = _interopRequireDefault(require("./Section"));
-
 var _SectionBody = _interopRequireDefault(require("./SectionBody"));
-
 var _SectionHeader = _interopRequireDefault(require("./SectionHeader"));
-
 var _SectionToolbar = _interopRequireDefault(require("./SectionToolbar"));
-
 var _SectionToolbarItem = _interopRequireDefault(require("./SectionToolbarItem"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/select/InputSelect.js

@@ -4,116 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-
 var _hooks = require("@cashub/hooks");
-
 var _utils = require("@cashub/utils");
-
 var _Input = _interopRequireDefault(require("../form/Input"));
-
 var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
-
 var _Option = _interopRequireDefault(require("./subComponent/Option"));
-
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
-var _excluded = ["options", "value", "disabled", "onChange", "onSelect"];
-
 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,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      _onChange = _ref.onChange,
-      onSelect = _ref.onSelect,
-      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];
-
-  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, _hooks.useCustomPopper)(listBoxElement, dropdownElement),
-      styles = _useCustomPopper.styles,
-      attributes = _useCustomPopper.attributes,
-      state = _useCustomPopper.state,
-      update = _useCustomPopper.update;
-
-  var handleKeyUp = function handleKeyUp(event) {
-    var key = event.keyCode;
-
+const InputSelect = _ref => {
+  let {
+    options = [],
+    value,
+    disabled,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  const [displayListBox, setDisplayListBox] = (0, _react.useState)(false);
+  const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
+  const [optionList, setOptionList] = (0, _react.useState)([]);
+  const [focusedOption, setFocusedOption] = (0, _react.useState)(null);
+  const optionsElementRef = (0, _react.useRef)(null);
+  const [listBoxElement, setListBoxElement] = (0, _react.useState)(null);
+  const [dropdownElement, setDropdownElement] = (0, _react.useState)(null);
+  const [listBoxWidth, setListBoxWidth] = (0, _react.useState)(0);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(listBoxElement, dropdownElement);
+  const handleKeyUp = event => {
+    const key = event.keyCode;
     switch (key) {
       case _utils.KEY_CODE.ENTER:
         if (!displayListBox) {
@@ -121,62 +46,47 @@ var InputSelect = function InputSelect(_ref) {
         } else if (focusedOption) {
           handleClickOption(focusedOption.id);
         }
-
         break;
-
       case _utils.KEY_CODE.ESCAPE:
         setDisplayListBox(false);
         break;
-
       case _utils.KEY_CODE.UP:
         {
           if (!focusedOption) return;
-          var previousItem = findPreviousItem(focusedOption);
-
+          const previousItem = findPreviousItem(focusedOption);
           if (previousItem) {
             handleFocusItem(previousItem);
           }
-
           break;
         }
-
       case _utils.KEY_CODE.DOWN:
         {
           if (!focusedOption) return;
-          var nextItem = findNextItem(focusedOption);
-
+          const nextItem = findNextItem(focusedOption);
           if (nextItem) {
             handleFocusItem(nextItem);
           }
-
           break;
         }
-
       case _utils.KEY_CODE.HOME:
         event.preventDefault();
         focusFirstItem();
         break;
-
       case _utils.KEY_CODE.END:
         {
           event.preventDefault();
-          var lastItem = dropdownElement.querySelectorAll('[role="option"]');
-
+          const lastItem = dropdownElement.querySelectorAll('[role="option"]');
           if (lastItem.length) {
             handleFocusItem(lastItem[lastItem.length - 1]);
           }
-
           break;
         }
-
       default:
         break;
     }
   };
-
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.keyCode;
-
+  const handleKeyDown = event => {
+    const key = event.keyCode;
     switch (key) {
       case _utils.KEY_CODE.ENTER:
       case _utils.KEY_CODE.ESCAPE:
@@ -186,184 +96,164 @@ var InputSelect = function InputSelect(_ref) {
       case _utils.KEY_CODE.HOME:
         event.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;
-
+  const findPreviousItem = (0, _react.useCallback)(currentItem => {
+    const allItem = [...dropdownElement.querySelectorAll('[role="option"]')];
+    const currentItemIndex = allItem.indexOf(currentItem);
+    let 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;
-
+  const findNextItem = (0, _react.useCallback)(currentItem => {
+    const allItem = [...dropdownElement.querySelectorAll('[role="option"]')];
+    const currentItemIndex = allItem.indexOf(currentItem);
+    let nextItem = null;
     if (currentItemIndex !== -1 && currentItemIndex !== allItem.length - 1) {
       nextItem = allItem[currentItemIndex + 1];
     }
-
     return nextItem;
-  }, [dropdownElement]); // set focused option
+  }, [dropdownElement]);
 
-  var handleFocusItem = (0, _react.useCallback)(function (element) {
+  // set focused option
+  const handleFocusItem = (0, _react.useCallback)(element => {
     if (!optionsElementRef.current) return;
     setFocusedOption(element);
   }, []);
-  var focusFirstItem = (0, _react.useCallback)(function () {
-    var firstItem = dropdownElement.querySelector('[role="option"]');
-
+  const focusFirstItem = (0, _react.useCallback)(() => {
+    const firstItem = dropdownElement.querySelector('[role="option"]');
     if (firstItem) {
       handleFocusItem(firstItem);
     }
   }, [dropdownElement, handleFocusItem]);
-  var setupFocus = (0, _react.useCallback)(function () {
+  const setupFocus = (0, _react.useCallback)(() => {
     if (!dropdownElement) return;
-    var selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
-
+    const selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
     if (selectedItem) {
       handleFocusItem(selectedItem);
     } else if (optionList.length > 0) {
       focusFirstItem();
     }
   }, [dropdownElement, focusFirstItem, handleFocusItem, optionList]);
-
-  var handleDisplay = function handleDisplay() {
+  const handleDisplay = () => {
     if (filteredOptions.length > 0) {
       setDisplayListBox(true);
       update();
     }
   };
-
-  var handleClickOption = (0, _react.useCallback)(function (packageName) {
+  const handleClickOption = (0, _react.useCallback)(packageName => {
     if (disabled === true) return;
     onSelect(packageName);
     setDisplayListBox(false);
-  }, [onSelect, disabled]); // all option
+  }, [onSelect, disabled]);
+
+  // all option
+  const optionItem = (0, _react.useMemo)(() => {
+    return optionList.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      role: "option",
+      tabIndex: "0",
+      id: option.package_name,
+      selected: option.selected,
+      "aria-selected": option.selected,
+      onClick: () => {
+        handleClickOption(option.package_name);
+      },
+      focus: focusedOption && focusedOption.id === option.package_name.toString(),
+      children: option.package_name
+    }, option.package_name));
+  }, [optionList, handleClickOption, focusedOption]);
 
-  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
+  // parse all value to string
   // for subsequently determine whether it is a selected item
-
-  var parsedSelected = (0, _react.useMemo)(function () {
+  const parsedSelected = (0, _react.useMemo)(() => {
     if (value || value === 0) {
       return value.toString();
     }
-  }, [value]); // observe element resized
+  }, [value]);
 
-  (0, _react.useEffect)(function () {
+  // observe element resized
+  (0, _react.useEffect)(() => {
     if (!listBoxElement) return;
     setListBoxWidth(listBoxElement.clientWidth);
-  }, [listBoxElement]); // 過濾搜尋關鍵字資料
+  }, [listBoxElement]);
 
-  (0, _react.useEffect)(function () {
+  // 過濾搜尋關鍵字資料
+  (0, _react.useEffect)(() => {
     if (!options.length) return;
-    var tmpFilteredChildOptions = options.filter(function (option) {
+    const tmpFilteredChildOptions = options.filter(option => {
       return option.package_name.toLowerCase().includes(value.toLowerCase());
     });
     setFilteredOptions(tmpFilteredChildOptions);
   }, [options, value]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (update) {
-      setTimeout(function () {
+      setTimeout(() => {
         update();
       }, 100);
     }
-  }, [update, listBoxWidth]); // observe element resized
+  }, [update, listBoxWidth]);
 
-  (0, _react.useEffect)(function () {
+  // observe element resized
+  (0, _react.useEffect)(() => {
     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);
-          }
+    const resizeObserverInstance = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target) {
+          const borderBoxSize = entry.target.clientWidth;
+          setListBoxWidth(borderBoxSize);
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     });
     resizeObserverInstance.observe(listBoxElement);
-    return function () {
+    return () => {
       resizeObserverInstance.unobserve(listBoxElement);
     };
   }, [listBoxElement]);
-  (0, _react.useEffect)(function () {
-    var selected = false;
-    setOptionList(filteredOptions.map(function (option) {
+  (0, _react.useEffect)(() => {
+    let selected = false;
+    setOptionList(filteredOptions.map(option => {
       if (parsedSelected === option.package_name) {
         selected = true;
       } else {
         selected = false;
       }
-
-      return _objectSpread(_objectSpread({}, option), {}, {
-        selected: selected
-      });
+      return {
+        ...option,
+        selected
+      };
     }));
   }, [filteredOptions, parsedSelected]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (displayListBox) {
       setupFocus();
     }
   }, [displayListBox, setupFocus, value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-    onOutsideClick: function onOutsideClick() {
+    onOutsideClick: () => {
       setDisplayListBox(false);
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
-      autoComplete: "off"
-    }, props), {}, {
-      onChange: function onChange(event) {
-        _onChange(event);
-
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      autoComplete: "off",
+      ...props,
+      onChange: event => {
+        onChange(event);
         if (!displayListBox) setDisplayListBox(true);
       },
       value: value,
-      ref: setListBoxElement
-    }, attributes.popper), {}, {
+      ref: setListBoxElement,
+      ...attributes.popper,
       placement: state && state.placement,
       onClick: handleDisplay,
       onKeyUp: handleKeyUp,
-      onFocus: function onFocus() {
+      onFocus: () => {
         setDisplayListBox(true);
       },
       onKeyDown: handleKeyDown
-    })), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
+    }), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
       style: styles.popper,
       $display: displayListBox,
       ref: setDropdownElement,
@@ -377,6 +267,4 @@ var InputSelect = function InputSelect(_ref) {
     })]
   });
 };
-
-var _default = InputSelect;
-exports.default = _default;
+var _default = exports.default = InputSelect;