@daoyi/nmtl-ui 2.0.1-beta.12 → 2.0.1-beta.121

package/lib/components/Autocomplete-3b418e5f.js

@@ -0,0 +1,494 @@
+import { _ as _extends$1, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useCallback, useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { d as debounce_1 } from './debounce-127da66c.js';
+import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
+import { Chip, TextField, CircularProgress } from '@material-ui/core';
+import { Close, SearchOutlined } from '@material-ui/icons';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { _ as _extends, m as merge, d as defaultTheme, c as compose, b as borders, a as display, f as flexbox, g as grid, p as positions, e as palette, h as boxShadow, s as sizing, i as spacing, t as typography } from './defaultTheme-ed7746fe.js';
+import 'react-is';
+import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
+import { styled as styled$1 } from '@material-ui/styles';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { E as Empty } from './Empty-c6a44967.js';
+
+var ArrowDropDown = {};
+
+function omit(input, fields) {
+  var output = {};
+  Object.keys(input).forEach(function (prop) {
+    if (fields.indexOf(prop) === -1) {
+      output[prop] = input[prop];
+    }
+  });
+  return output;
+}
+
+function styleFunctionSx(styleFunction) {
+  var newStyleFunction = function newStyleFunction(props) {
+    var output = styleFunction(props);
+
+    if (props.css) {
+      return _extends({}, merge(output, styleFunction(_extends({
+        theme: props.theme
+      }, props.css))), omit(props.css, [styleFunction.filterProps]));
+    }
+
+    if (props.sx) {
+      return _extends({}, merge(output, styleFunction(_extends({
+        theme: props.theme
+      }, props.sx))), omit(props.sx, [styleFunction.filterProps]));
+    }
+
+    return output;
+  };
+
+  newStyleFunction.propTypes = {};
+  newStyleFunction.filterProps = ['css', 'sx'].concat(_toConsumableArray(styleFunction.filterProps));
+  return newStyleFunction;
+}
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(ArrowDropDown, "__esModule", {
+  value: true
+});
+var default_1 = ArrowDropDown.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M7 10l5 5 5-5z"
+}), 'ArrowDropDown');
+
+default_1 = ArrowDropDown.default = _default;
+
+var styled = function styled(Component) {
+  var componentCreator = styled$1(Component);
+  return function (style, options) {
+    return componentCreator(style, _extends({
+      defaultTheme: defaultTheme
+    }, options));
+  };
+};
+
+var styleFunction = styleFunctionSx(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
+/**
+ * @ignore - do not document.
+ */
+
+var Box = styled('div')(styleFunction, {
+  name: 'MuiBox'
+});
+
+var useAutocomplete = (_ref => {
+  let {
+    options,
+    placeholder,
+    loading,
+    searchIcon,
+    labelInValue,
+    onEnter,
+    currentResult,
+    setCurrentDefaultValue,
+    arrowIcon,
+    ariaLabel
+  } = _ref;
+  const getValue = useCallback(data => typeof data === 'object' ? data.value : data, []);
+  const getLabel = useCallback(value => {
+    const finder = (Array.isArray(options) ? options : []).find(item => getValue(item) === getValue(value)
+    // typeof item === 'object' ? item.label === value : item === value
+    );
+
+    // console.log('options', options);
+    // console.log('value', value);
+    // console.log('finder', finder);
+    if (finder) {
+      return typeof finder === 'object' ? finder.label : finder;
+    }
+    return typeof value === 'object' ? value.label : value;
+  }, [options]);
+
+  // Filter duplicate data by each item.value
+  const getUniqueArray = useCallback(result => {
+    if (!Array.isArray(result)) return undefined;
+    return [...new Map(result.map(obj => [obj.value, obj])).values()];
+  }, []);
+
+  /* 若MUI的Autocomplete下方的options列表要勾選已選的項目 必須從options取出才可 */
+  const getValueFromOptions = useCallback(defaultValue => {
+    if (Array.isArray(options)) {
+      if (Array.isArray(defaultValue)) {
+        return defaultValue.map(
+        // item有可能為 object({ label, value }) 或 string(value)
+        item => options.find(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return item === value || item.value === value;
+        }) || item
+        // if (typeof item === 'object') return options.find(({ value }) => item.value === value) || item;
+        // return item;
+        );
+      }
+
+      const result = options.find(_ref3 => {
+        let {
+          value
+        } = _ref3;
+        return defaultValue === value;
+      });
+      return labelInValue ? defaultValue : result || {
+        label: defaultValue,
+        value: defaultValue
+      };
+    }
+    return defaultValue;
+  }, [options, labelInValue]);
+  const defaultTag = useCallback((tagValue, getTagProps) => tagValue.map((option, index) => /*#__PURE__*/React__default.createElement(Chip, _extends$1({
+    label: getLabel(option),
+    deleteIcon: /*#__PURE__*/React__default.createElement(Close, null)
+  }, getTagProps({
+    index
+  })))), [options]);
+  const defaultRenderInput = useCallback(params => /*#__PURE__*/React__default.createElement(TextField
+  // WCAG 3.3.2 輸入框需有可及名稱（placeholder 不是 label），未提供 ariaLabel 時以 placeholder 代替
+  , _extends$1({}, params, {
+    inputProps: {
+      ...params.inputProps,
+      'aria-label': ariaLabel || placeholder
+    },
+    variant: "outlined",
+    placeholder: placeholder,
+    InputProps: {
+      ...params.InputProps,
+      endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+        className: "autocomplete__icon",
+        color: "inherit",
+        size: 20
+        // WCAG 4.1.2 progressbar 需可及名稱（axe aria-progressbar-name）
+        ,
+        "aria-label": getIntl().formatMessage({
+          id: 'aria.loading'
+        })
+      }), searchIcon &&
+      /*#__PURE__*/
+      // WCAG 2.1.1 / 4.1.2 搜尋圖示為可點擊元素，需可鍵盤操作並有名稱；
+      // MUI SvgIcon 預設 aria-hidden="true"，可聚焦元素必須覆蓋（axe aria-hidden-focus）
+      React__default.createElement(SearchOutlined, {
+        className: "autocomplete__icon",
+        role: "button",
+        tabIndex: 0,
+        "aria-hidden": false,
+        "aria-label": getIntl().formatMessage({
+          id: 'aria.autocomplete.search'
+        }),
+        onClick: event => {
+          const tmpObj = {
+            labels: currentResult || '',
+            value: currentResult || ''
+          };
+          setCurrentDefaultValue(tmpObj);
+          return onEnter(event, tmpObj);
+        },
+        onKeyDown: event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const tmpObj = {
+              labels: currentResult || '',
+              value: currentResult || ''
+            };
+            setCurrentDefaultValue(tmpObj);
+            onEnter(event, tmpObj);
+          }
+        }
+      }), !searchIcon && !loading && arrowIcon && /*#__PURE__*/React__default.createElement(Box, {
+        style: {
+          top: 'calc(50% - 14px)',
+          right: '12px',
+          position: 'absolute'
+        }
+      }, /*#__PURE__*/React__default.createElement(default_1, null)), params.InputProps.endAdornment)
+    }
+  })), [loading, searchIcon, arrowIcon, ariaLabel, placeholder]);
+  return {
+    getValue,
+    getValueFromOptions,
+    defaultTag,
+    defaultRenderInput,
+    getUniqueArray
+  };
+});
+
+var css_248z = "@charset \"UTF-8\";\n/* 下拉選項鍵盤高亮可視化（R39）：上下鍵挑選時 MUI 只給 data-focus=\"true\"＋\n   action.hover（4% 黑）底色，對使用者幾乎不可見（WCAG 2.4.7 精神）。\n   比照 R30 選單選項聚焦模式＝亮底＋2px 虛線內縮完整框。\n   顏色不寫死（R30-1a 教訓：彈窗底色各站不同，horror 為深底 paper）：\n   外框 currentColor 跟隨選項文字色（文字對底 ≥4.5:1，外框對比自動達標）、\n   底色用中性半透明灰（深淺底皆可見）。\n   選單以 Popper 掛在 body，選擇器須在 .autocomplete 之外；\n   加 listbox 父層提高特異度（MUI JSS 同名規則注入較晚，同特異度會蓋掉本檔背景色） */\n.MuiAutocomplete-listbox .MuiAutocomplete-option[data-focus=true] {\n  background-color: rgba(127, 127, 127, 0.25);\n  outline: 2px dashed currentColor;\n  outline-offset: -4px;\n}\n\n.autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  flex-wrap: wrap;\n  padding: 0px 8px;\n}\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px;\n}\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px;\n}";
+styleInject(css_248z);
+
+var Autocomplete = function Autocomplete(props) {
+  var options = props.options,
+    defaultValue = props.defaultValue,
+    renderAfterDefaultValueChange = props.renderAfterDefaultValueChange,
+    filterable = props.filterable,
+    loading = props.loading,
+    labelInValue = props.labelInValue,
+    disabled = props.disabled;
+  var className = props.className,
+    multiple = props.multiple,
+    freeTyping = props.freeTyping,
+    placeholder = props.placeholder,
+    searchIcon = props.searchIcon,
+    _renderInput = props.renderInput,
+    _renderTags = props.renderTags,
+    ariaLabel = props.ariaLabel;
+  var _onChange = props.onChange,
+    onSearch = props.onSearch,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onEnter = props.onEnter,
+    _onKeyDown = props.onKeyDown,
+    arrowIcon = props.arrowIcon;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyword = _useState4[0],
+    setKeyword = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentResult = _useState6[0],
+    setCurrentResult = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocusItem = _useState8[0],
+    setFocusItem = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentDefaultValue = _useState10[0],
+    setCurrentDefaultValue = _useState10[1];
+  var _useAutocomplete = useAutocomplete(_objectSpread2(_objectSpread2({}, {
+      options: options,
+      placeholder: placeholder,
+      loading: loading,
+      searchIcon: searchIcon,
+      labelInValue: labelInValue,
+      currentResult: currentResult,
+      onEnter: onEnter,
+      setCurrentDefaultValue: setCurrentDefaultValue,
+      arrowIcon: arrowIcon
+    }), {}, {
+      ariaLabel: ariaLabel
+    })),
+    getValue = _useAutocomplete.getValue,
+    getValueFromOptions = _useAutocomplete.getValueFromOptions,
+    defaultTag = _useAutocomplete.defaultTag,
+    defaultRenderInput = _useAutocomplete.defaultRenderInput,
+    getUniqueArray = _useAutocomplete.getUniqueArray;
+  var handleSearch = useRef(debounce_1(function (result) {
+    return onSearch(result);
+  }, 500)).current;
+  /* WCAG 2.4.3 renderAfterDefaultValueChange 重繪會使焦點掉到 body（NVDA 改從頁面頂端讀起、
+     蓋掉 aria-live 播報）——unmount 前記錄焦點是否在元件內，remount 後還原 */
+  var rootRef = useRef(null);
+  var hadFocusRef = useRef(false);
+
+  // 複選時 defaultValue 必須為Array
+  // const currentDefaultValue = typeof defaultValue === 'string' && multiple ? undefined : getValueFromOptions(defaultValue);
+  useEffect(function () {
+    setCurrentDefaultValue(typeof defaultValue === 'string' && multiple ? {
+      label: keyword,
+      value: keyword
+    } : getValueFromOptions(defaultValue));
+  }, [JSON.stringify(defaultValue)]);
+  useEffect(function () {
+    if (renderAfterDefaultValueChange) {
+      hadFocusRef.current = !!(rootRef.current && rootRef.current.contains(document.activeElement));
+      setRerender(false);
+    }
+  }, [currentDefaultValue]); // defaultValue改變時強制rerender
+  useEffect(function () {
+    if (!rerender) {
+      setRerender(true);
+    } else if (hadFocusRef.current) {
+      // remount 完成後把焦點還給輸入框（初載/返回時焦點不在元件內，不會搶焦點）
+      hadFocusRef.current = false;
+      setTimeout(function () {
+        var input = rootRef.current && rootRef.current.querySelector('input');
+        if (input) input.focus();
+      }, 0);
+    }
+  }, [rerender]);
+  /* 監聽result變化時才觸發onSearch */
+  useEffect(function () {
+    if (currentResult) {
+      setKeyword(currentResult);
+      handleSearch(currentResult);
+    }
+  }, [currentResult]);
+
+  /* 這邊邏輯很複雜 變動需再三確認case */
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: rootRef,
+    className: classNames('autocomplete', {
+      'autocomplete--showSearchIcon': searchIcon
+    }, className)
+  }, rerender && /*#__PURE__*/React__default.createElement(Autocomplete$1, {
+    className: "autocomplete__component",
+    options: Array.isArray(options) && (freeTyping && keyword ? [{
+      label: keyword,
+      value: keyword
+    }].concat(options) : options) || []
+    // value="asd"
+    ,
+    defaultValue: currentDefaultValue,
+    disabled: disabled,
+    multiple: multiple
+    // 篩選機制(依據filterable決定是否要render全部)
+    ,
+    filterOptions: function filterOptions(optionList, input) {
+      var _input$inputValue = input.inputValue,
+        inputValue = _input$inputValue === void 0 ? '' : _input$inputValue;
+      return (Array.isArray(optionList) ? optionList : []).filter(function (item) {
+        var _ref = item || {},
+          _ref$label = _ref.label,
+          label = _ref$label === void 0 ? '' : _ref$label;
+        return filterable ? label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 : true;
+      });
+    },
+    onChange: function onChange(event, result) {
+      if (Array.isArray(result)) {
+        _onChange(result.map(function (item) {
+          return labelInValue ? item : getValue(item);
+        }));
+      } else if (result) {
+        _onChange(labelInValue ? result : getValue(result));
+      }
+    },
+    onInputChange: function onInputChange(event, result, reason) {
+      /* 此callback會經常被觸發  因此需要setState並搭配useEffect穩定觸發 */
+      if (result && typeof result === 'string' && reason === 'input') setCurrentResult(result);
+    },
+    onKeyDown: function onKeyDown(event) {
+      _onKeyDown(event);
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          setFocusItem(true);
+          break;
+        case 'Enter':
+          if (!isFocusItem) {
+            var enterFreeTyping = freeTyping && !multiple;
+            onEnter(event, enterFreeTyping ? {
+              label: keyword,
+              value: keyword
+            } : undefined);
+            if (enterFreeTyping) setCurrentDefaultValue({
+              label: keyword,
+              value: keyword
+            });
+          }
+          break;
+        default:
+          setFocusItem(false);
+      }
+    },
+    getOptionLabel: function getOptionLabel(option) {
+      return option && option.label || '';
+    },
+    getOptionDisabled: function getOptionDisabled(option) {
+      return option.disabled;
+    },
+    renderInput: function renderInput(params) {
+      return _renderInput && _renderInput(params) || defaultRenderInput(params);
+    },
+    renderTags: function renderTags(tagValue, getTagProps) {
+      var uniqueArray = getUniqueArray(tagValue) || tagValue;
+      return _renderTags && _renderTags(uniqueArray, getTagProps) || defaultTag(uniqueArray, getTagProps);
+    }
+    // popupIcon={<ExpandMore />}
+    ,
+    popupIcon: null,
+    noOptionsText: /*#__PURE__*/React__default.createElement(Empty, null),
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+};
+Autocomplete.defaultProps = {
+  className: undefined,
+  defaultValue: undefined,
+  renderAfterDefaultValueChange: false,
+  options: undefined,
+  freeTyping: false,
+  loading: false,
+  disabled: false,
+  labelInValue: true,
+  searchIcon: true,
+  multiple: false,
+  placeholder: 'Search...',
+  filterable: false,
+  renderInput: undefined,
+  renderTags: undefined,
+  onChange: function onChange() {},
+  onSearch: function onSearch() {},
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  onKeyDown: function onKeyDown() {},
+  onEnter: function onEnter() {},
+  arrowIcon: false,
+  ariaLabel: undefined
+};
+Autocomplete.propTypes = {
+  /** Css名稱 */
+  className: PropTypes.string,
+  /** 初始內容值 */
+  defaultValue: PropTypes.any,
+  /** 初始值變動後重新載入元件 */
+  renderAfterDefaultValueChange: PropTypes.bool,
+  /** 下拉選單內容 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** 是否允許自由輸入 */
+  freeTyping: PropTypes.bool,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** onChange時 label value 一起回傳 */
+  labelInValue: PropTypes.bool,
+  /** 搜尋的圖案是否顯示 */
+  searchIcon: PropTypes.bool,
+  /** 是否複選 */
+  multiple: PropTypes.bool,
+  /** 提示字 */
+  placeholder: PropTypes.string,
+  /** 是否要啟動篩選功能(若關閉則option有什麼即顯示什麼) */
+  filterable: PropTypes.bool,
+  /** input客製化 */
+  renderInput: PropTypes.func,
+  /** 已選選項客製化 */
+  renderTags: PropTypes.func,
+  /** 變動時的callback */
+  onChange: PropTypes.func,
+  /** 搜尋時的callback */
+  onSearch: PropTypes.func,
+  /** Input被聚焦時的callback */
+  onFocus: PropTypes.func,
+  /** Input離開時的callback */
+  onBlur: PropTypes.func,
+  /** 鍵盤按下任意鍵的callback（早於內部處理） */
+  onKeyDown: PropTypes.func,
+  /** 鍵盤輸入Enter的callback */
+  onEnter: PropTypes.func,
+  /** 是否顯示arrow icon */
+  arrowIcon: PropTypes.bool,
+  /** 輸入框的無障礙名稱(WCAG 3.3.2)，未提供時以placeholder代替 */
+  ariaLabel: PropTypes.string
+};
+
+export { Autocomplete as A };

package/lib/components/Autocomplete.js

@@ -1 +1,20 @@
-import{_ as e,a as n,b as o}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import t,{useCallback as r,useState as a,useRef as l,useEffect as u}from"react";import i from"prop-types";import{c}from"./index-b2745105.js";import{d as p}from"./debounce-c993109b.js";import{Autocomplete as s}from"@material-ui/lab";import{Chip as f,TextField as d,CircularProgress as m}from"@material-ui/core";import{Close as b,SearchOutlined as g}from"@material-ui/icons";import h from"./Empty.js";import{s as y}from"./style-inject.es-1f59c1d0.js";y(".autocomplete .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n  padding: 0px 8px; }\n\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px; }\n\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px; }\n\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px; }\n");var I=function(i){var y=i.options,I=i.defaultValue,v=i.renderAfterDefaultValueChange,A=i.filterable,V=i.loading,x=i.labelInValue,E=i.disabled,w=i.className,C=i.multiple,O=i.freeTyping,T=i.placeholder,_=i.searchIcon,j=i.renderInput,N=i.renderTags,F=i.onChange,S=i.onSearch,D=i.onFocus,B=i.onBlur,M=i.onEnter,P=a(!0),R=n(P,2),k=R[0],L=R[1],z=a(),H=n(z,2),J=H[0],K=H[1],U=a(),q=n(U,2),G=q[0],Q=q[1],W=a(),X=n(W,2),Y=X[0],Z=X[1],$=a(),ee=n($,2),ne=ee[0],oe=ee[1],te=(n=>{let{options:o,placeholder:a,loading:l,searchIcon:u,labelInValue:i}=n;const c=r((e=>"object"==typeof e?e.value:e),[]),p=r((e=>{const n=(Array.isArray(o)?o:[]).find((n=>c(n)===c(e)));return n?"object"==typeof n?n.label:n:"object"==typeof e?e.label:e}),[o]),s=r((e=>{if(Array.isArray(o)){if(Array.isArray(e))return e.map((e=>o.find((n=>{let{value:o}=n;return e===o||e.value===o}))||e));const n=o.find((n=>{let{value:o}=n;return e===o}));return i?e:n||{label:e,value:e}}return e}),[o,i]),h=r(((n,o)=>n.map(((n,r)=>t.createElement(f,e({label:p(n),deleteIcon:t.createElement(b,null)},o({index:r})))))),[o]),y=r((n=>t.createElement(d,e({},n,{variant:"outlined",placeholder:a,InputProps:{...n.InputProps,endAdornment:t.createElement(t.Fragment,null,l&&t.createElement(m,{className:"autocomplete__icon",color:"inherit",size:20}),u&&t.createElement(g,{className:"autocomplete__icon"}),n.InputProps.endAdornment)}}))),[l,u]);return{getValue:c,getValueFromOptions:s,defaultTag:h,defaultRenderInput:y}})(o({},{options:y,placeholder:T,loading:V,searchIcon:_,labelInValue:x})),re=te.getValue,ae=te.getValueFromOptions,le=te.defaultTag,ue=te.defaultRenderInput,ie=l(p((function(e){return S(e)}),500)).current;return u((function(){oe("string"==typeof I&&C?{label:J,value:J}:ae(I))}),[JSON.stringify(I)]),u((function(){v&&L(!1)}),[ne]),u((function(){k||L(!0)}),[k]),u((function(){G&&(K(G),ie(G))}),[G]),t.createElement("div",{className:c("autocomplete",{"autocomplete--showSearchIcon":_},w)},k&&t.createElement(s,{className:"autocomplete__component",options:Array.isArray(y)&&(O&&J?[{label:J,value:J}].concat(y):y)||[],defaultValue:ne,disabled:E,multiple:C,filterOptions:function(e,n){var o=n.inputValue,t=void 0===o?"":o;return(Array.isArray(e)?e:[]).filter((function(e){var n=(e||{}).label;return!A||(void 0===n?"":n).toLowerCase().indexOf(t.toLowerCase())>-1}))},onChange:function(e,n){Array.isArray(n)?F(n.map((function(e){return x?e:re(e)}))):n&&F(x?n:re(n))},onInputChange:function(e,n,o){n&&"string"==typeof n&&"input"===o&&Q(n)},onKeyDown:function(e){switch(e.key){case"ArrowDown":case"ArrowUp":Z(!0);break;case"Enter":if(!Y){var n=O&&!C;M(e,n?{label:J,value:J}:void 0),n&&oe({label:J,value:J})}break;default:Z(!1)}},getOptionLabel:function(e){return e&&e.label||""},getOptionDisabled:function(e){return e.disabled},renderInput:function(e){return j&&j(e)||ue(e)},renderTags:function(e,n){return N&&N(e,n)||le(e,n)},popupIcon:null,noOptionsText:t.createElement(h,null),onFocus:D,onBlur:B}))};I.defaultProps={className:void 0,defaultValue:void 0,renderAfterDefaultValueChange:!1,options:void 0,freeTyping:!1,loading:!1,disabled:!1,labelInValue:!0,searchIcon:!0,multiple:!1,placeholder:"Search...",filterable:!1,renderInput:void 0,renderTags:void 0,onChange:function(){},onSearch:function(){},onFocus:function(){},onBlur:function(){},onEnter:function(){}},I.propTypes={className:i.string,defaultValue:i.any,renderAfterDefaultValueChange:i.bool,options:i.arrayOf(i.any),freeTyping:i.bool,loading:i.bool,disabled:i.bool,labelInValue:i.bool,searchIcon:i.bool,multiple:i.bool,placeholder:i.string,filterable:i.bool,renderInput:i.func,renderTags:i.func,onChange:i.func,onSearch:i.func,onFocus:i.func,onBlur:i.func,onEnter:i.func};export{I as default};
+export { A as default } from './Autocomplete-3b418e5f.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import './debounce-127da66c.js';
+import './isObjectLike-e111475d.js';
+import './_commonjsHelpers-70de2c37.js';
+import '@material-ui/lab';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './createSvgIcon-e3803ee1.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import './toConsumableArray-dbe8af76.js';
+import './globalConfig';
+import './style-inject.es-1f59c1d0.js';
+import './Empty-c6a44967.js';

package/lib/components/Avatar.js

@@ -1 +1,59 @@
-import r from"react";import{c as a}from"./index-b2745105.js";import e from"prop-types";import{Avatar as s}from"@material-ui/core";import{s as o}from"./style-inject.es-1f59c1d0.js";o("");var t=function(e){var o=e.className,t=e.shape,c=e.src,i=e.onError;return r.createElement(s,{className:a("avatar",o),variant:t,src:c},r.createElement("img",{src:c,onError:function(){return i()},alt:"test",style:{display:"none"}}))};t.defaultProps={className:void 0,shape:"circular",src:void 0,onError:void 0},t.propTypes={className:e.string,shape:e.oneOf(["circle","circular","rounded","square"]),src:e.string,onError:e.func};export{t as default};
+import React__default from 'react';
+import { c as classNames } from './index-b76a85f4.js';
+import PropTypes from 'prop-types';
+import { Avatar as Avatar$1 } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var Avatar = function Avatar(_ref) {
+  var className = _ref.className,
+    shape = _ref.shape,
+    src = _ref.src,
+    alt = _ref.alt,
+    _onError = _ref.onError,
+    _ref$defaultImg = _ref.defaultImg,
+    defaultImg = _ref$defaultImg === void 0 ? '' : _ref$defaultImg;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Avatar$1, {
+    className: classNames('avatar', className),
+    variant: shape,
+    src: src,
+    alt: alt
+  }, defaultImg), typeof _onError === 'function' && /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    onError: function onError() {
+      return _onError();
+    },
+    alt: "",
+    "aria-hidden": true,
+    style: {
+      display: 'none'
+    }
+  }));
+};
+Avatar.defaultProps = {
+  className: undefined,
+  shape: 'circular',
+  src: undefined,
+  alt: undefined,
+  onError: undefined,
+  defaultImg: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Avatar.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 形狀 */
+  shape: PropTypes.oneOf(['circle', 'circular', 'rounded', 'square']),
+  /** 圖片來源 */
+  src: PropTypes.string,
+  /** 圖片文字替代（WCAG 1.1.1）；裝飾或與相鄰文字重複時傳空字串 */
+  alt: PropTypes.string,
+  /** 圖片有錯誤則callback */
+  onError: PropTypes.func,
+  defaultImg: PropTypes.string
+};
+
+export { Avatar as default };