@daoyi/nmtl-ui 2.0.1-beta.117 → 2.0.1-beta.119

package/lib/components/{Autocomplete-864269ac.js → Autocomplete-3b418e5f.js}

@@ -173,13 +173,20 @@ var useAutocomplete = (_ref => {
         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 搜尋圖示為可點擊元素，需可鍵盤操作並有名稱
+      // 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'
         }),

package/lib/components/Autocomplete.js

@@ -1,4 +1,4 @@
-export { A as default } from './Autocomplete-864269ac.js';
+export { A as default } from './Autocomplete-3b418e5f.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

package/lib/components/Avatar.js

@@ -11,19 +11,22 @@ 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
+    src: src,
+    alt: alt
   }, defaultImg), typeof _onError === 'function' && /*#__PURE__*/React__default.createElement("img", {
     src: src,
     onError: function onError() {
       return _onError();
     },
-    alt: "test",
+    alt: "",
+    "aria-hidden": true,
     style: {
       display: 'none'
     }
@@ -33,6 +36,7 @@ Avatar.defaultProps = {
   className: undefined,
   shape: 'circular',
   src: undefined,
+  alt: undefined,
   onError: undefined,
   defaultImg: undefined
 };
@@ -45,6 +49,8 @@ Avatar.propTypes = {
   shape: PropTypes.oneOf(['circle', 'circular', 'rounded', 'square']),
   /** 圖片來源 */
   src: PropTypes.string,
+  /** 圖片文字替代（WCAG 1.1.1）；裝飾或與相鄰文字重複時傳空字串 */
+  alt: PropTypes.string,
   /** 圖片有錯誤則callback */
   onError: PropTypes.func,
   defaultImg: PropTypes.string

package/lib/components/{ContactModal-7f35b424.js → ContactModal-763fc7cb.js}

@@ -3,7 +3,7 @@ import React__default, { createContext, forwardRef, createElement, useContext, u
 import PropTypes from 'prop-types';
 import { h as hoistNonReactStatics_cjs } from './hoist-non-react-statics.cjs-3f408ad2.js';
 import axios from 'axios';
-import { M as Modal } from './Modal-2451be75.js';
+import { M as Modal } from './Modal-76fef34f.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { c as classNames } from './index-b76a85f4.js';
 import { Input, IconButton, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
@@ -12,7 +12,7 @@ import 'react-is';
 import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import { S as Select } from './Select-52ab5299.js';
+import { S as Select } from './Select-141d7992.js';
 import { VolumeUp } from '@material-ui/icons';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/ContactModal.js

@@ -1,24 +1,24 @@
-export { C as default } from './ContactModal-7f35b424.js';
+export { C as default } from './ContactModal-763fc7cb.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
 import 'axios';
-import './Modal-2451be75.js';
+import './Modal-76fef34f.js';
 import './index-b76a85f4.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './style-inject.es-1f59c1d0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-52ab5299.js';
+import './Select-141d7992.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/{Drawer-43937e1c.js → Drawer-c04df870.js}

@@ -3,7 +3,7 @@ import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
 import { DehazeRounded } from '@material-ui/icons';
-import { S as Select } from './Select-52ab5299.js';
+import { S as Select } from './Select-141d7992.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -82,7 +82,8 @@ var Drawer = function Drawer(_ref) {
     locale = _ref.locale,
     supportLanguages = _ref.supportLanguages,
     drawerList = _ref.drawerList,
-    onLanguageChange = _ref.onLanguageChange;
+    onLanguageChange = _ref.onLanguageChange,
+    languageSelectLabel = _ref.languageSelectLabel;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -108,8 +109,8 @@ var Drawer = function Drawer(_ref) {
     onClose: function onClose() {
       return setOpen(false);
     },
-    onKeyDown: function onKeyDown() {
-      return setOpen(false);
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') setOpen(false);
     }
   }, (logo || title) && /*#__PURE__*/React__default.createElement("div", {
     className: "drawer__header"
@@ -125,6 +126,9 @@ var Drawer = function Drawer(_ref) {
     setOpen: setOpen
   }), /*#__PURE__*/React__default.createElement(Divider, null), Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
     className: "drawer__lang",
+    ariaLabel: languageSelectLabel || getIntl().formatMessage({
+      id: 'aria.header.languageSelect'
+    }),
     defaultValue: checkLanguageSupport({
       language: locale,
       supportLanguages: supportLanguages
@@ -149,7 +153,8 @@ Drawer.defaultProps = {
   ],
 
   drawerList: undefined,
-  onLanguageChange: function onLanguageChange() {}
+  onLanguageChange: function onLanguageChange() {},
+  languageSelectLabel: undefined
 };
 Drawer.propTypes = {
   title: PropTypes.string,
@@ -157,7 +162,9 @@ Drawer.propTypes = {
   locale: PropTypes.string,
   supportLanguages: PropTypes.arrayOf(PropTypes.any),
   drawerList: PropTypes.arrayOf(PropTypes.any),
-  onLanguageChange: PropTypes.func
+  onLanguageChange: PropTypes.func,
+  /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
+  languageSelectLabel: PropTypes.string
 };
 
 export { Drawer as D, checkLanguageSupport as c, defaultSupportLanguage as d };

package/lib/components/Drawer.js

@@ -1,10 +1,10 @@
-export { D as default } from './Drawer-43937e1c.js';
+export { D as default } from './Drawer-c04df870.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-52ab5299.js';
+import './Select-141d7992.js';
 import './index-b76a85f4.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';

package/lib/components/ExportButton.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { ExitToApp } from '@material-ui/icons';
 import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
-import { f as fileDownload, j as jsonTxt, a as jsonExcel } from './dataExport-d55d6fa3.js';
+import { f as fileDownload, j as jsonTxt, a as jsonExcel } from './dataExport-a9e3fae1.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 

package/lib/components/{ExtraTools-55f66039.js → ExtraTools-0f9ca8be.js}

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { Menu, MenuItem, useMediaQuery, IconButton } from '@material-ui/core';
 import { T as Tooltip } from './Tooltip-6ebfa9c1.js';
-import { s as snaToExcel, f as fileDownload$1, a as jsonExcel } from './dataExport-d55d6fa3.js';
+import { s as snaToExcel, f as fileDownload$1, a as jsonExcel } from './dataExport-a9e3fae1.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var __assign$3 = (undefined && undefined.__assign) || function () {
@@ -2872,11 +2872,19 @@ const worksSlider = data => (data || []).map(_ref6 => {
   };
 });
 
+/* \u532F\u51FA\u6A94\u540D\u7684\u65E5\u671F\u5F8C\u7DB4\uFF08YYYY-MM-DD\uFF09\uFF0C
+   \u8207 DownloadMenu \u4E0B\u8F09\u5716\u7247\u5171\u7528 */
+const exportDateSuffix = () => {
+  const now = new Date();
+  const pad = n => String(n).padStart(2, '0');
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+};
 const exportXlsx = _ref => {
   let {
     data,
     dataType,
-    extType = 'xlsx'
+    extType = 'xlsx',
+    fileName = 'output'
   } = _ref;
   let metadata;
   switch (dataType) {
@@ -2887,7 +2895,7 @@ const exportXlsx = _ref => {
       metadata = data;
       break;
   }
-  fileDownload$1(`\uFEFF${jsonExcel(metadata)}`, `output.${extType}`);
+  fileDownload$1(`\uFEFF${jsonExcel(metadata, extType === 'tsv' ? '\t' : ',')}`, `${fileName}_${exportDateSuffix()}.${extType}`);
 };
 
 // 供外部使用dataConvert
@@ -3192,14 +3200,16 @@ const DownloadMenu = _ref2 => {
     data,
     dataType,
     domToImageId,
-    DownloadExcel
+    DownloadExcel,
+    exportFileName
   } = _ref2;
   const [anchorEl, setAnchorEl] = useState(null);
   const hideButton = type => (exclude || []).filter(key => key === type).length > 0;
   const btns = [{
     key: 'downloadImage',
     onClick: () => domToImage({
-      id: domToImageId
+      id: domToImageId,
+      fileName: `${exportFileName}_${exportDateSuffix()}`
     }),
     label: intl ? 'knowledge.writersAndWorksSNA.download.img' : '下載圖片'
   }, {
@@ -3211,7 +3221,8 @@ const DownloadMenu = _ref2 => {
     onClick: () => exportXlsx({
       data,
       dataType,
-      extType: 'tsv'
+      extType: 'tsv',
+      fileName: exportFileName
     }),
     label: intl ? 'knowledge.writersAndWorksSNA.download.tsv' : '下載Tsv'
   }, {
@@ -3279,7 +3290,8 @@ DownloadMenu.defaultProps = {
   dataType: undefined,
   iconColor: '#825c0d',
   domToImageId: 'network-graph',
-  DownloadExcel: undefined
+  DownloadExcel: undefined,
+  exportFileName: 'output'
 };
 
 /* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
@@ -3299,7 +3311,9 @@ DownloadMenu.propTypes = {
   /** 指定dom轉換畫布的DOM ID */
   domToImageId: PropTypes.string,
   /** Download元件, 由外部傳入的原因是需要環境設定 */
-  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** 匯出檔名前綴（下載圖片/Tsv 檔名＝前綴_YYYY-MM-DD） */
+  exportFileName: PropTypes.string
 };
 const FullscreenBtn = _ref4 => {
   let {
@@ -3514,7 +3528,8 @@ var ExtraTools = function ExtraTools(_ref) {
     FontSizeOptions = _ref.FontSizeOptions,
     DownloadExcel = _ref.DownloadExcel,
     fullscreenDomId = _ref.fullscreenDomId,
-    renderSNA = _ref.renderSNA;
+    renderSNA = _ref.renderSNA,
+    exportFileName = _ref.exportFileName;
   var hideButton = function hideButton(keys) {
     return (exclude || []).filter(function (key) {
       return keys.some(function (item) {
@@ -3533,7 +3548,8 @@ var ExtraTools = function ExtraTools(_ref) {
     FontSizeOptions: FontSizeOptions,
     DownloadExcel: DownloadExcel,
     fullscreenDomId: fullscreenDomId,
-    renderSNA: renderSNA
+    renderSNA: renderSNA,
+    exportFileName: exportFileName
   };
   var isIOSMobile = /iPhone|iPad|iPod/i.test(navigator.userAgent);
   var tools = [{
@@ -3585,7 +3601,8 @@ ExtraTools.defaultProps = {
   },
   DownloadExcel: undefined,
   fullscreenDomId: undefined,
-  renderSNA: undefined
+  renderSNA: undefined,
+  exportFileName: 'output'
 };
 
 /* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
@@ -3613,7 +3630,9 @@ ExtraTools.propTypes = {
   /** 全螢幕指定DOM */
   fullscreenDomId: PropTypes.string,
   /** 重設SNA */
-  renderSNA: PropTypes.func
+  renderSNA: PropTypes.func,
+  /** 匯出檔名前綴（下載圖片/Tsv 檔名＝前綴_YYYY-MM-DD） */
+  exportFileName: PropTypes.string
 };
 
 export { ExtraTools as E };

package/lib/components/ExtraTools.js

@@ -1,4 +1,4 @@
-export { E as default } from './ExtraTools-55f66039.js';
+export { E as default } from './ExtraTools-0f9ca8be.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import './index-b76a85f4.js';
@@ -7,4 +7,4 @@ import './_commonjsHelpers-70de2c37.js';
 import '@material-ui/core';
 import './Tooltip-6ebfa9c1.js';
 import './style-inject.es-1f59c1d0.js';
-import './dataExport-d55d6fa3.js';
+import './dataExport-a9e3fae1.js';

package/lib/components/Footer.js

@@ -3,13 +3,13 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-7f35b424.js';
-import { S as Spin } from './Spin-8dc60bfe.js';
+import { C as ContactModal } from './ContactModal-763fc7cb.js';
+import { S as Spin } from './Spin-8f87eadc.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
-import './Modal-2451be75.js';
+import './Modal-76fef34f.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
@@ -18,7 +18,7 @@ import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-52ab5299.js';
+import './Select-141d7992.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/Header.js

@@ -6,15 +6,15 @@ import { d as debounce_1 } from './debounce-127da66c.js';
 import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
-import { K as KeywordSearch } from './KeywordSearch-d12e1b4f.js';
-import { S as Select } from './Select-52ab5299.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-43937e1c.js';
+import { K as KeywordSearch } from './KeywordSearch-fec33a2c.js';
+import { S as Select } from './Select-141d7992.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-c04df870.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import 'axios';
-import './Autocomplete-864269ac.js';
+import './Autocomplete-3b418e5f.js';
 import '@material-ui/lab';
 import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
@@ -45,7 +45,8 @@ var Header = function Header(props) {
   var onSearch = props.onSearch;
     props.setDarkMode;
     var onLanguageChange = props.onLanguageChange,
-    onSearchIconClick = props.onSearchIconClick;
+    onSearchIconClick = props.onSearchIconClick,
+    languageSelectLabel = props.languageSelectLabel;
   var history = useHistory();
   var search = history.location.search;
   var _useRouteMatch = useRouteMatch(),
@@ -150,6 +151,9 @@ var Header = function Header(props) {
     "aria-hidden": "true"
   })), showDarkModeSwitch , Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
     className: "header__language",
+    ariaLabel: languageSelectLabel || getIntl().formatMessage({
+      id: 'aria.header.languageSelect'
+    }),
     defaultValue: checkLanguageSupport({
       language: locale,
       supportLanguages: supportLanguages
@@ -163,7 +167,8 @@ var Header = function Header(props) {
     logo: logo,
     drawerList: pages,
     supportLanguages: supportLanguages,
-    onLanguageChange: onLanguageChange
+    onLanguageChange: onLanguageChange,
+    languageSelectLabel: languageSelectLabel
   }));
 };
 Header.defaultProps = {
@@ -180,7 +185,8 @@ Header.defaultProps = {
   onSearch: function onSearch() {},
   setDarkMode: function setDarkMode() {},
   onLanguageChange: function onLanguageChange() {},
-  onSearchIconClick: function onSearchIconClick() {}
+  onSearchIconClick: function onSearchIconClick() {},
+  languageSelectLabel: undefined
 };
 Header.propTypes = {
   /** Css Name */
@@ -212,7 +218,9 @@ Header.propTypes = {
   /** 語系變動時的callback */
   onLanguageChange: PropTypes.func,
   /** SearchIcon點擊時的callback */
-  onSearchIconClick: PropTypes.func
+  onSearchIconClick: PropTypes.func,
+  /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
+  languageSelectLabel: PropTypes.string
 };
 
 export { Header as default };

package/lib/components/{KeywordSearch-d12e1b4f.js → KeywordSearch-fec33a2c.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import axios from 'axios';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { A as Autocomplete } from './Autocomplete-864269ac.js';
+import { A as Autocomplete } from './Autocomplete-3b418e5f.js';
 
 var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\n.keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  border-radius: 10px;\n  background-color: #ffffff66;\n}";
 styleInject(css_248z);

package/lib/components/KeywordSearch.js

@@ -1,11 +1,11 @@
-export { K as default } from './KeywordSearch-d12e1b4f.js';
+export { K as default } from './KeywordSearch-fec33a2c.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-864269ac.js';
+import './Autocomplete-3b418e5f.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/Keywords.js

@@ -2,14 +2,14 @@ import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
-import { M as Modal } from './Modal-2451be75.js';
+import { M as Modal } from './Modal-76fef34f.js';
 import { Typography } from '@material-ui/core';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './_commonjsHelpers-70de2c37.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';

package/lib/components/Loading.js

@@ -2,6 +2,7 @@ import React__default from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import { CircularProgress } from '@material-ui/core';
 import PropTypes from 'prop-types';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}";
@@ -12,7 +13,10 @@ var Loading = function Loading(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('loadingPage', className)
   }, /*#__PURE__*/React__default.createElement(CircularProgress, {
-    size: 80
+    size: 80,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.loading'
+    })
   }));
 };
 Loading.defaultProps = {

package/lib/components/{Modal-2451be75.js → Modal-76fef34f.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Dialog, DialogTitle, IconButton, DialogContent, DialogActions, CircularProgress } from '@material-ui/core';
 import { CloseSharp } from '@material-ui/icons';
 import { B as Button } from './Button-305b69a0.js';
-import { S as Spin } from './Spin-8dc60bfe.js';
+import { S as Spin } from './Spin-8f87eadc.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 

package/lib/components/Modal.js

@@ -1,4 +1,4 @@
-export { M as default } from './Modal-2451be75.js';
+export { M as default } from './Modal-76fef34f.js';
 import 'react';
 import './index-b76a85f4.js';
 import 'prop-types';
@@ -6,5 +6,5 @@ import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './style-inject.es-1f59c1d0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './globalConfig';

package/lib/components/SNA.js

@@ -2,13 +2,13 @@ import React__default, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { e as event, d as d3Select, a as dispatch, c as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-3a04288b.js';
-import { E as ExtraTools } from './ExtraTools-55f66039.js';
+import { E as ExtraTools } from './ExtraTools-0f9ca8be.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import './_commonjsHelpers-70de2c37.js';
 import '@material-ui/core';
 import './Tooltip-6ebfa9c1.js';
-import './dataExport-d55d6fa3.js';
+import './dataExport-a9e3fae1.js';
 
 function sourceEvent() {
   var current = event, source;
@@ -1408,7 +1408,8 @@ var SNA = function SNA(props) {
     SNAData = props.SNAData,
     handleClickNodeGoto = props.handleClickNodeGoto,
     DownloadExcel = props.DownloadExcel,
-    nodeAriaHint = props.nodeAriaHint;
+    nodeAriaHint = props.nodeAriaHint,
+    exportFileName = props.exportFileName;
   // styles
   var width = props.width,
     height = props.height,
@@ -1662,7 +1663,8 @@ var SNA = function SNA(props) {
     exclude: exclude,
     DownloadExcel: DownloadExcel,
     fullscreenDomId: "sna-graph",
-    renderSNA: renderSNA
+    renderSNA: renderSNA,
+    exportFileName: exportFileName
   }), /*#__PURE__*/React__default.createElement("div", {
     id: "sna-graph"
   }));
@@ -1680,7 +1682,8 @@ SNA.defaultProps = {
   iconColor: '#825c0d',
   exclude: ['downloadXls', 'downloadTsv'],
   handleClickNodeGoto: null,
-  DownloadExcel: undefined
+  DownloadExcel: undefined,
+  exportFileName: 'output'
 };
 
 /* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
@@ -1710,7 +1713,9 @@ SNA.propTypes = {
   /** 按下點後要轉址的功能 */
   handleClickNodeGoto: PropTypes.func,
   /** Download元件, 由外部傳入的原因是需要環境設定 */
-  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** 匯出檔名前綴（下載圖片/Tsv 檔名＝前綴_YYYY-MM-DD） */
+  exportFileName: PropTypes.string
 };
 
 export { SNA as default };

package/lib/components/{Select-52ab5299.js → Select-141d7992.js}

@@ -63,6 +63,12 @@ var Select = function Select(props) {
     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",
@@ -85,9 +91,11 @@ var Select = function Select(props) {
   }, 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)));

package/lib/components/Select.js

@@ -1,4 +1,4 @@
-export { S as default } from './Select-52ab5299.js';
+export { S as default } from './Select-141d7992.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

package/lib/components/{Spin-8dc60bfe.js → Spin-8f87eadc.js}

@@ -2,6 +2,7 @@ import React__default, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.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}";
@@ -49,7 +50,10 @@ var Spin = function Spin(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "customSpin__spin"
   }, /*#__PURE__*/React__default.createElement(CircularProgress, {
-    size: matchSize
+    size: matchSize,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.loading'
+    })
   }))), children);
 };
 Spin.defaultProps = {

package/lib/components/Spin.js

@@ -1,6 +1,7 @@
-export { S as default } from './Spin-8dc60bfe.js';
+export { S as default } from './Spin-8f87eadc.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import '@material-ui/core';
+import './globalConfig';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/{dataExport-d55d6fa3.js → dataExport-a9e3fae1.js}

@@ -34,24 +34,23 @@ var fileDownload = function(data, filename, mime, bom) {
     }
 };
 
-const jsonExcel = json => {
+// delimiter 預設逗號（CSV/EXCEL 沿用既有行為）；.tsv 需傳 '\t'——
+// tsv 以逗號分隔時，試算表軟體會整列擠進單一儲存格。
+// 值內的 tab/換行以空白取代，避免斷欄斷行
+const jsonExcel = function (json) {
+  let delimiter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ',';
+  const cleanCell = value => String(value == null ? '' : value).replace(/[\t\r\n]+/g, ' ');
   let output = '';
   if (Array.isArray(json) && json.length > 0) {
     const keys = Object.keys(json[0]);
-    output += `${keys.toString()}\n`;
+    output += `${keys.map(cleanCell).join(delimiter)}\n`;
     json.forEach(item => {
-      keys.forEach(key => {
-        output += `${item[key]},`;
-      });
-      output += '\n';
+      output += `${keys.map(key => cleanCell(item[key])).join(delimiter)}\n`;
     });
   } else {
     const keys = Object.keys(json);
-    output += `${keys.toString()}\n`;
-    keys.forEach(key => {
-      output += `${json[key]},`;
-    });
-    output += '\n';
+    output += `${keys.map(cleanCell).join(delimiter)}\n`;
+    output += `${keys.map(key => cleanCell(json[key])).join(delimiter)}\n`;
   }
   return output;
 };

package/lib/components/globalConfig.js

@@ -61,7 +61,9 @@ var zhtw = {
 	"aria.header.logoHome": "回首頁",
 	"aria.header.logoHomeWithTitle": "{title}，回首頁",
 	"aria.header.navigation": "主選單",
+	"aria.header.languageSelect": "選擇語言",
 	"aria.autocomplete.search": "執行搜尋",
+	"aria.loading": "載入中",
 	"aria.modal.close": "關閉視窗",
 	"aria.newWindow": "（另開新視窗）",
 	"aria.vcode.image": "驗證碼圖片，如無法辨識可刷新驗證碼",
@@ -142,7 +144,9 @@ var zhcn = {
 	"aria.header.logoHome": "回首页",
 	"aria.header.logoHomeWithTitle": "{title}，回首页",
 	"aria.header.navigation": "主选单",
+	"aria.header.languageSelect": "选择语言",
 	"aria.autocomplete.search": "执行搜寻",
+	"aria.loading": "载入中",
 	"aria.modal.close": "关闭视窗",
 	"aria.newWindow": "（另开新视窗）",
 	"aria.vcode.image": "验证码图片，如无法辨识可刷新验证码",
@@ -223,7 +227,9 @@ var enus = {
 	"aria.header.logoHome": "Back to home",
 	"aria.header.logoHomeWithTitle": "{title}, back to home",
 	"aria.header.navigation": "Main menu",
+	"aria.header.languageSelect": "Select language",
 	"aria.autocomplete.search": "Search",
+	"aria.loading": "Loading",
 	"aria.modal.close": "Close dialog",
 	"aria.newWindow": " (opens in new window)",
 	"aria.vcode.image": "CAPTCHA image, refresh if unreadable",

package/lib/utils/exportXlsx.js

@@ -36,24 +36,29 @@ var fileDownload = function(data, filename, mime, bom) {
     }
 };
 
+// delimiter 預設逗號（CSV/EXCEL 沿用既有行為）；.tsv 需傳 '\t'——
+// tsv 以逗號分隔時，試算表軟體會整列擠進單一儲存格。
+// 值內的 tab/換行以空白取代，避免斷欄斷行
 var jsonExcel = function jsonExcel(json) {
+  var delimiter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ',';
+  var cleanCell = function cleanCell(value) {
+    return String(value == null ? '' : value).replace(/[\t\r\n]+/g, ' ');
+  };
   var output = '';
   if (Array.isArray(json) && json.length > 0) {
     var keys = Object.keys(json[0]);
-    output += "".concat(keys.toString(), "\n");
+    output += "".concat(keys.map(cleanCell).join(delimiter), "\n");
     json.forEach(function (item) {
-      keys.forEach(function (key) {
-        output += "".concat(item[key], ",");
-      });
-      output += '\n';
+      output += "".concat(keys.map(function (key) {
+        return cleanCell(item[key]);
+      }).join(delimiter), "\n");
     });
   } else {
     var _keys = Object.keys(json);
-    output += "".concat(_keys.toString(), "\n");
-    _keys.forEach(function (key) {
-      output += "".concat(json[key], ",");
-    });
-    output += '\n';
+    output += "".concat(_keys.map(cleanCell).join(delimiter), "\n");
+    output += "".concat(_keys.map(function (key) {
+      return cleanCell(json[key]);
+    }).join(delimiter), "\n");
   }
   return output;
 };
@@ -192,11 +197,22 @@ var worksSlider = function worksSlider(data) {
   });
 };
 
+/* \u532F\u51FA\u6A94\u540D\u7684\u65E5\u671F\u5F8C\u7DB4\uFF08YYYY-MM-DD\uFF09\uFF0C
+   \u8207 DownloadMenu \u4E0B\u8F09\u5716\u7247\u5171\u7528 */
+var exportDateSuffix = function exportDateSuffix() {
+  var now = new Date();
+  var pad = function pad(n) {
+    return String(n).padStart(2, '0');
+  };
+  return "".concat(now.getFullYear(), "-").concat(pad(now.getMonth() + 1), "-").concat(pad(now.getDate()));
+};
 var exportXlsx = function exportXlsx(_ref) {
   var data = _ref.data,
     dataType = _ref.dataType,
     _ref$extType = _ref.extType,
-    extType = _ref$extType === void 0 ? 'xlsx' : _ref$extType;
+    extType = _ref$extType === void 0 ? 'xlsx' : _ref$extType,
+    _ref$fileName = _ref.fileName,
+    fileName = _ref$fileName === void 0 ? 'output' : _ref$fileName;
   var metadata;
   switch (dataType) {
     case 'sna':
@@ -206,7 +222,7 @@ var exportXlsx = function exportXlsx(_ref) {
       metadata = data;
       break;
   }
-  fileDownload("\uFEFF".concat(jsonExcel(metadata)), "output.".concat(extType));
+  fileDownload("\uFEFF".concat(jsonExcel(metadata, extType === 'tsv' ? '\t' : ',')), "".concat(fileName, "_").concat(exportDateSuffix(), ".").concat(extType));
 };
 
 // 供外部使用dataConvert
@@ -216,4 +232,4 @@ exportXlsx.mapLgConvert = mapLgConvert;
 exportXlsx.worksBarChart = worksBarChart;
 exportXlsx.worksSlider = worksSlider;
 
-export { exportXlsx as default };
+export { exportXlsx as default, exportDateSuffix };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.117",
+	"version": "2.0.1-beta.119",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",