@daoyi/nmtl-ui 2.0.1-beta.14 → 2.0.1-beta.140

package/lib/components/SegmentedControl-804da0a6.js

@@ -0,0 +1,113 @@
+import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-c33afcb5.js';
+import { o as getContrastRatio } from './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "@charset \"UTF-8\";\n.segmentedControl__label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 700;\n}\n.segmentedControl__group {\n  display: flex;\n}\n.segmentedControl__btn {\n  flex: 1 1 0;\n  min-width: 0;\n  /* 觸控目標 44px（WCAG 2.5.5） */\n  min-height: 2.75rem;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  cursor: pointer;\n  /* 相鄰框線疊成一條 */\n  /* 焦點框顏色由元件以 outlineColor 給主題文字色；拉到上層避免被相鄰按鈕蓋住 */\n}\n.segmentedControl__btn + .segmentedControl__btn {\n  margin-left: -1px;\n}\n.segmentedControl__btn:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.segmentedControl__btn:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.segmentedControl__btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n.segmentedControl__btn:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline-width: 2px;\n  outline-style: solid;\n  outline-offset: 2px;\n}\n.segmentedControl__btn--active {\n  font-weight: 700;\n}";
+styleInject(css_248z);
+
+/* 每個實例需要唯一 id 才能做 aria-labelledby 串接 */
+var segmentedSeq = 0;
+
+/* 選中底色優先用主題主色（與站台色調一致）；主色配字對比不足 4.5:1（WCAG 1.4.3）
+   或主色框線對紙張不足 3:1（WCAG 1.4.11）時，退回「文字色／紙張色」反白，對比必然足夠 */
+var pickColors = function pickColors(_ref) {
+  var primary = _ref.primary,
+    text = _ref.text,
+    background = _ref.background;
+  var primaryOk = getContrastRatio(primary.main, primary.contrastText) >= 4.5 && getContrastRatio(primary.main, background.paper) >= 3;
+  return primaryOk ? {
+    fill: primary.main,
+    onFill: primary.contrastText
+  } : {
+    fill: text.primary,
+    onFill: background.paper
+  };
+};
+
+/* 分段按鈕（少量互斥選項並排，點一下即切換，如抽屜內的語言、字級）。
+ * - 可見標籤即群組名稱：role="group" + aria-labelledby 指向標籤（WCAG 1.3.1／2.5.3）
+ * - 每個選項是切換鈕，以 aria-pressed 表達目前選中者（WCAG 4.1.2）
+ * - 選中態反白（配色見 pickColors），另加粗體，不只靠顏色區分（WCAG 1.4.1） */
+var SegmentedControl = function SegmentedControl(_ref2) {
+  var className = _ref2.className,
+    label = _ref2.label,
+    options = _ref2.options,
+    value = _ref2.value,
+    onChange = _ref2.onChange;
+  var theme = useTheme();
+  var _pickColors = pickColors(theme.palette),
+    fill = _pickColors.fill,
+    onFill = _pickColors.onFill;
+  var labelIdRef = useRef(null);
+  if (!labelIdRef.current) {
+    segmentedSeq += 1;
+    labelIdRef.current = "nmtl-segmented-".concat(segmentedSeq, "-label");
+  }
+  var labelId = labelIdRef.current;
+  /* 框線、焦點框與選中底色同色（站台若有全域焦點樣式會以 !important 蓋過焦點框色，屬預期） */
+  var baseStyle = {
+    borderColor: fill,
+    outlineColor: fill
+  };
+  var activeStyle = _objectSpread2(_objectSpread2({}, baseStyle), {}, {
+    backgroundColor: fill,
+    color: onFill
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('segmentedControl', className)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    id: labelId,
+    className: "segmentedControl__label"
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: "segmentedControl__group",
+    role: "group",
+    "aria-labelledby": labelId
+  }, options.map(function (option) {
+    var active = option.value === value;
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: option.value,
+      type: "button",
+      className: classNames('segmentedControl__btn', {
+        'segmentedControl__btn--active': active
+      }),
+      "aria-pressed": active,
+      "aria-label": option.ariaLabel,
+      lang: option.lang,
+      style: active ? activeStyle : baseStyle,
+      onClick: function onClick() {
+        if (!active) onChange(option.value);
+      }
+    }, option.label);
+  })));
+};
+SegmentedControl.defaultProps = {
+  className: undefined,
+  value: undefined,
+  onChange: function onChange() {}
+};
+SegmentedControl.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 可見標籤，同時作為群組的可及名稱 */
+  label: PropTypes.string.isRequired,
+  /** 選項：label 為可見文字；ariaLabel 在可見文字對讀屏沒有意義時提供（如 A+）；lang 標示與頁面不同的語言 */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    label: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
+    lang: PropTypes.string
+  })).isRequired,
+  /** 目前選中的值 */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 選擇其他選項時的 callback（點選已選中的選項不會觸發） */
+  onChange: PropTypes.func
+};
+
+export { SegmentedControl as S };

package/lib/components/SegmentedControl.js

@@ -0,0 +1,11 @@
+export { S as default } from './SegmentedControl-804da0a6.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-c33afcb5.js';
+import './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Select-979f7e73.js

@@ -0,0 +1,189 @@
+import { b as _objectSpread2, d as _typeof } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-c33afcb5.js';
+import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
+import './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import { E as Empty } from './Empty-48685dd0.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".select .MuiSelect-nativeInput {\n  visibility: hidden;\n}\n.select__placeholder {\n  color: #6b6130;\n}\n.select--small {\n  width: 100%;\n}\n.select--small .MuiSelect-root {\n  padding: 0.5rem 1.5rem 0.25rem;\n  color: white;\n}\n.select--small .MuiSelect-root .select__placeholder {\n  color: white;\n}\n.select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n  background: transparent;\n}\n.select--small .MuiSvgIcon-root {\n  color: white;\n}\n.select--small .MuiOutlinedInput-root {\n  border-radius: 45px;\n}";
+styleInject(css_248z);
+
+/* 視覺隱藏的可及名稱容器（不依賴各站的 .visually-hidden） */
+var hiddenLabelStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  whiteSpace: 'nowrap'
+};
+
+/* 每個 Select 實例需要唯一 id 才能做 aria-labelledby 串接 */
+var selectSeq = 0;
+var Select = function Select(props) {
+  var style = props.style,
+    className = props.className,
+    labelInValue = props.labelInValue,
+    disabled = props.disabled,
+    loading = props.loading,
+    placeholder = props.placeholder,
+    variantSmall = props.variantSmall,
+    background = props.background,
+    menuItemClass = props.menuItemClass;
+  /* 未指定 placeholder 時走套件 i18n（原本寫死英文 'Please select...'，
+     中文語系也照唸英文，走查回饋 5a） */
+  var placeholderText = placeholder === undefined ? getIntl().formatMessage({
+    id: 'common.select.placeholder'
+  }) : placeholder;
+  var options = props.options,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    _onChange = props.onChange,
+    ariaLabel = props.ariaLabel,
+    ariaLabelledby = props.ariaLabelledby;
+  /* WCAG 1.4.3 提示字顏色依主題深淺自動選色：select.scss 的 #6b6130 只適用淺底，
+     深色主題（palette.type=dark，如 ocean 深色 Modal）需改亮灰（WAVE 實測「請輸入 年齡」被抓） */
+  var theme = useTheme();
+  var placeholderStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#bdbdbd'
+  } : undefined;
+  var itemFind = function itemFind(key) {
+    return (options || []).find(function (option) {
+      return _typeof(option) === 'object' ? key === option.value : key === option;
+    }) || key;
+  };
+
+  /* WCAG 4.1.2／3.3.2 可及名稱＝「這個選單是做什麼的」＋「目前選了什麼」。
+     直接掛 aria-label 會整個蓋掉顯示層的選中值文字（讀屏只唸得出用途、唸不出選了誰），
+     故改採 MUI 原生作法：把用途文字放進視覺隱藏的 label 元素，
+     再以 aria-labelledby="<label id> <顯示層 id>" 串起來（走查回饋 5a）。 */
+  var uidRef = useRef(null);
+  if (!uidRef.current) {
+    selectSeq += 1;
+    uidRef.current = "nmtl-select-".concat(selectSeq);
+  }
+  var uid = uidRef.current;
+  var buttonId = "".concat(uid, "-value");
+  var useHiddenLabel = Boolean(ariaLabel) && !ariaLabelledby;
+  // eslint-disable-next-line no-nested-ternary
+  var labelledby = ariaLabelledby ? "".concat(ariaLabelledby, " ").concat(buttonId) : useHiddenLabel ? "".concat(uid, "-label ").concat(buttonId) : undefined;
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    className: classNames('select', {
+      'select--small': variantSmall
+    }, className),
+    variant: "outlined"
+  }, useHiddenLabel && /*#__PURE__*/React__default.createElement("span", {
+    id: "".concat(uid, "-label"),
+    style: hiddenLabelStyle
+  }, ariaLabel), /*#__PURE__*/React__default.createElement(Select$1, {
+    style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
+      background: background
+    }),
+    displayEmpty: true,
+    disabled: disabled || loading
+    // WCAG 3.3.2 可及名稱：未提供 ariaLabel/ariaLabelledby 時，顯示層(role=button)
+    // 以其文字內容(選中值/placeholder)為名稱；有提供時改為「用途 + 選中值」（見上方 labelledby）。
+    // 隱藏原生 input 由 select.scss 的 visibility:hidden 讓檢測工具略過，無需再標 label。
+    ,
+    SelectDisplayProps: {
+      id: buttonId,
+      'aria-labelledby': labelledby
+    },
+    renderValue: function renderValue(id) {
+      var finder = itemFind(id);
+      var content = _typeof(finder) === 'object' ? finder.label : finder;
+      /* WCAG 3.1.2 局部語言：選項可帶 lang（如語言選單的「English」），顯示值同步標註 */
+      if (_typeof(finder) === 'object' && finder.lang) {
+        content = /*#__PURE__*/React__default.createElement("span", {
+          lang: finder.lang
+        }, content);
+      }
+      if (!id && id !== 0 || id.length === 0) {
+        content = /*#__PURE__*/React__default.createElement("span", {
+          className: "select__placeholder",
+          style: placeholderStyle
+        }, placeholderText);
+      }
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+        size: 16,
+        style: {
+          marginLeft: 8,
+          marginRight: 4
+        }
+      }));
+    },
+    value: value,
+    defaultValue: defaultValue,
+    onChange: function onChange(event) {
+      return _onChange(labelInValue ? itemFind(event.target.value) : event.target.value);
+    }
+  }, Array.isArray(options) && options.length > 0 ? options.map(function (option) {
+    var key = _typeof(option) === 'object' ? option.value : option;
+    var text = _typeof(option) === 'object' ? option.label : option;
+    var optionLang = _typeof(option) === 'object' ? option.lang : undefined;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: key,
+      value: key,
+      lang: optionLang,
+      ListItemClasses: menuItemClass
+    }, text);
+  }) : /*#__PURE__*/React__default.createElement(Empty, null)));
+};
+Select.defaultProps = {
+  style: undefined,
+  className: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  options: undefined,
+  labelInValue: undefined,
+  disabled: undefined,
+  loading: undefined,
+  placeholder: undefined,
+  variantSmall: undefined,
+  background: undefined,
+  menuItemClass: undefined,
+  onChange: function onChange() {},
+  ariaLabel: undefined,
+  ariaLabelledby: undefined
+};
+Select.propTypes = {
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Css Name */
+  className: PropTypes.string,
+  /** 選擇的id */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 預設選擇的id */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 下拉選單清單 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** onChange時 label value 一起回傳 */
+  labelInValue: PropTypes.bool,
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 下拉選單提示字（不給則使用套件 i18n 的「請選擇…」） */
+  placeholder: PropTypes.string,
+  /** 是否使用小size */
+  variantSmall: PropTypes.bool,
+  /** 使用變體後的顏色 */
+  background: PropTypes.string,
+  /** override menuItem class */
+  menuItemClass: PropTypes.objectOf(PropTypes.any),
+  /** 點選後的返回 */
+  onChange: PropTypes.func,
+  /** 無障礙名稱(WCAG 3.3.2)：說明「這個選單是做什麼的」，會與選中值一起被讀出 */
+  ariaLabel: PropTypes.string,
+  /** 以外部元素id作為無障礙名稱 */
+  ariaLabelledby: PropTypes.string
+};
+
+export { Select as S };

package/lib/components/Select.js

@@ -1 +1,14 @@
-import{b as e,d as l}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import a from"react";import t from"prop-types";import{c as n}from"./index-b2745105.js";import{FormControl as o,Select as r,CircularProgress as s,MenuItem as i}from"@material-ui/core";import c from"./Empty.js";import{s as u}from"./style-inject.es-1f59c1d0.js";u(".select__placeholder {\n  color: #999; }\n\n.select--small {\n  width: 100%; }\n  .select--small .MuiSelect-root {\n    padding: 0.5rem 1.5rem 0.25rem;\n    color: white; }\n    .select--small .MuiSelect-root .select__placeholder {\n      color: white; }\n    .select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n      background: transparent; }\n  .select--small .MuiSvgIcon-root {\n    color: white; }\n  .select--small .MuiOutlinedInput-root {\n    border-radius: 45px; }\n");var m=function(t){var u=t.style,m=t.className,d=t.labelInValue,p=t.disabled,b=t.loading,f=t.placeholder,v=t.variantSmall,g=t.background,y=t.menuItemClass,h=t.options,j=t.value,E=t.defaultValue,I=t.onChange,S=function(e){return(h||[]).find((function(a){return"object"===l(a)?e===a.value:e===a}))||e};return a.createElement(o,{className:n("select",{"select--small":v},m),variant:"outlined"},a.createElement(r,{style:e(e({},u||{}),{},{background:g}),displayEmpty:!0,disabled:p||b,renderValue:function(e){var t=S(e),n="object"===l(t)?t.label:t;return(!e&&0!==e||0===e.length)&&(n=a.createElement("span",{className:"select__placeholder"},f)),a.createElement(a.Fragment,null,n,b&&a.createElement(s,{size:16,style:{marginLeft:8,marginRight:4}}))},value:j,defaultValue:E,onChange:function(e){return I(d?S(e.target.value):e.target.value)}},Array.isArray(h)&&h.length>0?h.map((function(e){var t="object"===l(e)?e.value:e,n="object"===l(e)?e.label:e;return a.createElement(i,{key:t,value:t,ListItemClasses:y},n)})):a.createElement(c,null)))};m.defaultProps={style:void 0,className:void 0,value:void 0,defaultValue:void 0,options:void 0,labelInValue:void 0,disabled:void 0,loading:void 0,placeholder:"Please select...",variantSmall:void 0,background:void 0,menuItemClass:void 0,onChange:function(){}},m.propTypes={style:t.objectOf(t.any),className:t.string,value:t.oneOfType([t.string,t.number]),defaultValue:t.oneOfType([t.string,t.number]),options:t.arrayOf(t.any),labelInValue:t.bool,disabled:t.bool,loading:t.bool,placeholder:t.string,variantSmall:t.bool,background:t.string,menuItemClass:t.objectOf(t.any),onChange:t.func};export{m as default};
+export { S as default } from './Select-979f7e73.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-c33afcb5.js';
+import '@material-ui/core';
+import './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import './Empty-48685dd0.js';
+import './style-inject.es-1f59c1d0.js';
+import './globalConfig';

package/lib/components/Spin-07679812.js

@@ -0,0 +1,79 @@
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-c33afcb5.js';
+import { Fade, CircularProgress } from '@material-ui/core';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative;\n}\n.customSpin__spin {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+styleInject(css_248z);
+
+var stringSize = {
+  small: 16,
+  middle: 24,
+  large: 40
+};
+var Spin = function Spin(props) {
+  var className = props.className,
+    spinning = props.spinning,
+    children = props.children,
+    size = props.size,
+    style = props.style;
+  var maxValue = function maxValue(val) {
+    // 極大極小值限制 300/16
+    var min = val < 16 ? 16 : val;
+    var max = min > 300 ? 300 : min;
+    return max;
+  };
+  var matchSize = useMemo(function () {
+    if (typeof size === 'string') {
+      if (Number(size) && typeof Number(size) === 'number') {
+        return maxValue(Number(size));
+      }
+      return stringSize[size] || 40;
+    }
+    if (typeof size === 'number') {
+      return maxValue(size);
+    }
+    // default size is large
+    return 40;
+  }, [size]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('customSpin', className),
+    style: style || {}
+  }, /*#__PURE__*/React__default.createElement(Fade, {
+    in: spinning,
+    style: {
+      transitionDelay: '300ms'
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "customSpin__spin"
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: matchSize,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.loading'
+    })
+  }))), children);
+};
+Spin.defaultProps = {
+  className: undefined,
+  spinning: false,
+  children: null,
+  size: undefined,
+  style: undefined
+};
+Spin.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 是否載入中 */
+  spinning: PropTypes.bool,
+  /** 內容 */
+  children: PropTypes.node,
+  /** 自訂尺寸 */
+  size: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(stringSize)), PropTypes.number]),
+  /** 自訂Style設置 */
+  style: PropTypes.objectOf(PropTypes.any)
+};
+
+export { Spin as S };

package/lib/components/Spin.js

@@ -1 +1,7 @@
-import e,{useMemo as n}from"react";import t from"prop-types";import{c as i}from"./index-b2745105.js";import{Fade as s,CircularProgress as r}from"@material-ui/core";import{s as o}from"./style-inject.es-1f59c1d0.js";o(".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative; }\n  .customSpin__spin {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n");var m={small:16,middle:24,large:40},a=function(t){var o=t.className,a=t.spinning,l=t.children,p=t.size,c=t.style,u=function(e){var n=e<16?16:e;return n>300?300:n},d=n((function(){return"string"==typeof p?Number(p)&&"number"==typeof Number(p)?u(Number(p)):m[p]||40:"number"==typeof p?u(p):40}),[p]);return e.createElement("div",{className:i("customSpin",o),style:c||{}},e.createElement(s,{in:a,style:{transitionDelay:"300ms"},unmountOnExit:!0},e.createElement("div",{className:"customSpin__spin"},e.createElement(r,{size:d}))),l)};a.defaultProps={className:void 0,spinning:!1,children:null,size:void 0,style:void 0},a.propTypes={className:t.string,spinning:t.bool,children:t.node,size:t.oneOfType([t.oneOf(Object.keys(m)),t.number]),style:t.objectOf(t.any)};export{a as default};
+export { S as default } from './Spin-07679812.js';
+import 'react';
+import 'prop-types';
+import './index-c33afcb5.js';
+import '@material-ui/core';
+import './globalConfig';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Table.js

@@ -1 +1,51 @@
-import{c as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import r from"react";import a from"prop-types";import{TableContainer as t,Paper as n,Table as l,TableHead as m,TableRow as o,TableCell as c,TableBody as s}from"@material-ui/core";var p=["render"],u=function(a){var u=a.className,i=a.columns,y=a.data;return r.createElement(t,{className:u,component:n},r.createElement(l,{className:"customTable"},r.createElement(m,null,r.createElement(o,null,Array.isArray(i)&&i.map((function(e){var a=e.field,t=e.headerName;return r.createElement(c,{key:a},t)})))),r.createElement(s,null,Array.isArray(y)&&y.map((function(a,t){return r.createElement(o,{key:t.toString()},Array.isArray(i)&&i.map((function(t){var n=t.render,l=e(t,p).field;return r.createElement(c,{key:l,component:"th",scope:"row"},n&&n(a)||a[l])})))})))))};u.defaultProps={className:void 0,columns:[],data:[]},u.propTypes={className:a.string,columns:a.arrayOf(a.any),data:a.arrayOf(a.any)};export{u as default};
+import { c as _objectWithoutProperties } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { TableContainer, Paper, Table as Table$1, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+
+var _excluded = ["render"];
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    columns = _ref.columns,
+    data = _ref.data;
+  return /*#__PURE__*/React__default.createElement(TableContainer, {
+    className: className,
+    component: Paper
+  }, /*#__PURE__*/React__default.createElement(Table$1, {
+    className: "customTable"
+  }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, Array.isArray(columns) && columns.map(function (_ref2) {
+    var field = _ref2.field,
+      headerName = _ref2.headerName;
+    return /*#__PURE__*/React__default.createElement(TableCell, {
+      key: field
+    }, headerName);
+  }))), /*#__PURE__*/React__default.createElement(TableBody, null, Array.isArray(data) && data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, {
+      key: index.toString()
+    }, Array.isArray(columns) && columns.map(function (_ref3) {
+      var render = _ref3.render,
+        columnProps = _objectWithoutProperties(_ref3, _excluded);
+      var field = columnProps.field;
+      return /*#__PURE__*/React__default.createElement(TableCell, {
+        key: field,
+        component: "th",
+        scope: "row"
+      }, render && render(item) || item[field]);
+    }));
+  }))));
+};
+Table.defaultProps = {
+  className: undefined,
+  columns: [],
+  data: []
+};
+Table.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 欄位列表 */
+  columns: PropTypes.arrayOf(PropTypes.any),
+  /** 表格內容 */
+  data: PropTypes.arrayOf(PropTypes.any)
+};
+
+export { Table as default };

package/lib/components/Tooltip-bbbaa9c7.js

@@ -0,0 +1,70 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip as Tooltip$1 } from '@material-ui/core';
+import { _ as _extends } from './_rollupPluginBabelHelpers-a52356f6.js';
+import { c as classNames } from './index-c33afcb5.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+const TooltipContent = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
+  className: classNames('tooltip', props.className),
+  ref: ref
+}), props.children));
+TooltipContent.defaultProps = {
+  children: undefined,
+  className: undefined
+};
+TooltipContent.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+var css_248z = ".tooltip {\n  width: -moz-fit-content;\n  width: fit-content;\n}";
+styleInject(css_248z);
+
+var placements = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+  topLeft: 'top-start',
+  topRight: 'top-end',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end',
+  leftTop: 'left-start',
+  leftBottom: 'left-end',
+  rightTop: 'right-start',
+  rightBottom: 'right-end'
+};
+var Tooltip = function Tooltip(_ref) {
+  var title = _ref.title,
+    className = _ref.className,
+    placement = _ref.placement,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    arrow: true,
+    title: title || '',
+    placement: placements[placement] || 'top'
+  }, /*#__PURE__*/React__default.createElement(TooltipContent, {
+    className: className
+  }, children));
+};
+Tooltip.defaultProps = {
+  className: undefined,
+  title: undefined,
+  children: 'Tooltip',
+  placement: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Tooltip.propTypes = {
+  /** Css Name */
+  className: PropTypes.node,
+  /** 跳出的內容 */
+  title: PropTypes.node,
+  /** 子層 */
+  children: PropTypes.node,
+  /** 位置 */
+  placement: PropTypes.oneOf(Object.keys(placements))
+};
+
+export { Tooltip as T, placements as p };

package/lib/components/Tooltip.js

@@ -1 +1,7 @@
-import t from"react";import e from"prop-types";import{Tooltip as o}from"@material-ui/core";import{_ as r}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import{c as i}from"./index-b2745105.js";import{s as l}from"./style-inject.es-1f59c1d0.js";const a=t.forwardRef(((e,o)=>t.createElement("div",r({},e,{className:i("tooltip",e.className),ref:o}),e.children)));a.defaultProps={children:void 0,className:void 0},a.propTypes={children:e.node,className:e.string};l(".tooltip {\n  width: -moz-fit-content;\n  width: fit-content; }\n");var s={top:"top",left:"left",right:"right",bottom:"bottom",topLeft:"top-start",topRight:"top-end",bottomLeft:"bottom-start",bottomRight:"bottom-end",leftTop:"left-start",leftBottom:"left-end",rightTop:"right-start",rightBottom:"right-end"},m=function(e){var r=e.title,i=e.className,l=e.placement,m=e.children;return t.createElement(o,{arrow:!0,title:r||"",placement:s[l]||"top"},t.createElement(a,{className:i},m))};m.defaultProps={className:void 0,title:void 0,children:"Tooltip",placement:void 0},m.propTypes={className:e.node,title:e.node,children:e.node,placement:e.oneOf(Object.keys(s))};export{m as default,s as placements};
+export { T as default, p as placements } from './Tooltip-bbbaa9c7.js';
+import 'react';
+import 'prop-types';
+import '@material-ui/core';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import './index-c33afcb5.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/_commonjsHelpers-70de2c37.js

@@ -0,0 +1,28 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function () {
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+export { getDefaultExportFromCjs as a, commonjsGlobal as c, getAugmentedNamespace as g };