@daoyi/nmtl-ui 2.0.1-beta.90 → 2.0.1-beta.92

package/README.md

@@ -1,45 +1,45 @@
-# react-storybook-jsx-starter
-
-This project based 
-
-This project is bootstrapped with the following
-- [Create React App](https://github.com/facebook/create-react-app)
-- [Storybook/react v.6.3.5](https://storybook.js.org/)
-- [Rollup v.2.54.0](https://rollupjs.org/guide/en/)
-- [Airbnb esint config v.18.0.0](https://www.npmjs.com/package/eslint-config-airbnb)
-
-## Getting Started
-
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start` and `yarn storybook`
-
-Runs storybook.<br>
-Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
-The page will reload if you make component edits.
-
-### `yarn create`
-
-Help you create component or util. It will automatic generate `folder`, `JSX`, `.store.jsx`.
-
-### `yarn lint`
-
-Runs airbnb linting config.<br>
-Please refer to `.eslintrc` for more details in rules that are excluded/added from the initial Airbnb configuration, which can be found [here](https://www.npmjs.com/package/eslint-config-airbnb)
-Notice: If developer using visual code IDE, download `eslint` and `prettier` extensions to help you develop.
-
-### `yarn build`
-
-Builds the component library using rollup.<br>
-This runs a set of defined configurations under `rollup.config.js` file.<br>
-Index.js & index.ts will automatic generated by `rollup.index.js` file.
-
-
-### `yarn build-storybook`
-
-Builds static files for storybook site. This is so it can be deployed as the docs source for the component library.
-
-
+# react-storybook-jsx-starter
+
+This project based 
+
+This project is bootstrapped with the following
+- [Create React App](https://github.com/facebook/create-react-app)
+- [Storybook/react v.6.3.5](https://storybook.js.org/)
+- [Rollup v.2.54.0](https://rollupjs.org/guide/en/)
+- [Airbnb esint config v.18.0.0](https://www.npmjs.com/package/eslint-config-airbnb)
+
+## Getting Started
+
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start` and `yarn storybook`
+
+Runs storybook.<br>
+Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
+The page will reload if you make component edits.
+
+### `yarn create`
+
+Help you create component or util. It will automatic generate `folder`, `JSX`, `.store.jsx`.
+
+### `yarn lint`
+
+Runs airbnb linting config.<br>
+Please refer to `.eslintrc` for more details in rules that are excluded/added from the initial Airbnb configuration, which can be found [here](https://www.npmjs.com/package/eslint-config-airbnb)
+Notice: If developer using visual code IDE, download `eslint` and `prettier` extensions to help you develop.
+
+### `yarn build`
+
+Builds the component library using rollup.<br>
+This runs a set of defined configurations under `rollup.config.js` file.<br>
+Index.js & index.ts will automatic generated by `rollup.index.js` file.
+
+
+### `yarn build-storybook`
+
+Builds static files for storybook site. This is so it can be deployed as the docs source for the component library.
+
+

package/lib/components/{Autocomplete-24e9686d.js → Autocomplete-5d6f1df8.js}

@@ -1,18 +1,19 @@
-import { _ as _extends$1, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+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-f491ebce.js';
+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-ff0e3b99.js';
+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-dc5fc2fc.js';
+import { E as Empty } from './Empty-bf77164f.js';
 
 var ArrowDropDown = {};
 
@@ -97,7 +98,8 @@ var useAutocomplete = (_ref => {
     onEnter,
     currentResult,
     setCurrentDefaultValue,
-    arrowIcon
+    arrowIcon,
+    ariaLabel
   } = _ref;
   const getValue = useCallback(data => typeof data === 'object' ? data.value : data, []);
   const getLabel = useCallback(value => {
@@ -114,6 +116,12 @@ var useAutocomplete = (_ref => {
     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)) {
@@ -150,7 +158,13 @@ var useAutocomplete = (_ref => {
   }, getTagProps({
     index
   })))), [options]);
-  const defaultRenderInput = useCallback(params => /*#__PURE__*/React__default.createElement(TextField, _extends$1({}, params, {
+  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: {
@@ -159,8 +173,16 @@ var useAutocomplete = (_ref => {
         className: "autocomplete__icon",
         color: "inherit",
         size: 20
-      }), searchIcon && /*#__PURE__*/React__default.createElement(SearchOutlined, {
+      }), searchIcon &&
+      /*#__PURE__*/
+      // WCAG 2.1.1 / 4.1.2 搜尋圖示為可點擊元素，需可鍵盤操作並有名稱
+      React__default.createElement(SearchOutlined, {
         className: "autocomplete__icon",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": getIntl().formatMessage({
+          id: 'aria.autocomplete.search'
+        }),
         onClick: event => {
           const tmpObj = {
             labels: currentResult || '',
@@ -168,6 +190,17 @@ var useAutocomplete = (_ref => {
           };
           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: {
@@ -177,12 +210,13 @@ var useAutocomplete = (_ref => {
         }
       }, /*#__PURE__*/React__default.createElement(default_1, null)), params.InputProps.endAdornment)
     }
-  })), [loading, searchIcon, arrowIcon]);
+  })), [loading, searchIcon, arrowIcon, ariaLabel, placeholder]);
   return {
     getValue,
     getValueFromOptions,
     defaultTag,
-    defaultRenderInput
+    defaultRenderInput,
+    getUniqueArray
   };
 });
 
@@ -203,7 +237,8 @@ var Autocomplete = function Autocomplete(props) {
     placeholder = props.placeholder,
     searchIcon = props.searchIcon,
     _renderInput = props.renderInput,
-    _renderTags = props.renderTags;
+    _renderTags = props.renderTags,
+    ariaLabel = props.ariaLabel;
   var _onChange = props.onChange,
     onSearch = props.onSearch,
     onFocus = props.onFocus,
@@ -230,7 +265,7 @@ var Autocomplete = function Autocomplete(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     currentDefaultValue = _useState10[0],
     setCurrentDefaultValue = _useState10[1];
-  var _useAutocomplete = useAutocomplete(_objectSpread2({}, {
+  var _useAutocomplete = useAutocomplete(_objectSpread2(_objectSpread2({}, {
       options: options,
       placeholder: placeholder,
       loading: loading,
@@ -240,11 +275,14 @@ var Autocomplete = function Autocomplete(props) {
       onEnter: onEnter,
       setCurrentDefaultValue: setCurrentDefaultValue,
       arrowIcon: arrowIcon
+    }), {}, {
+      ariaLabel: ariaLabel
     })),
     getValue = _useAutocomplete.getValue,
     getValueFromOptions = _useAutocomplete.getValueFromOptions,
     defaultTag = _useAutocomplete.defaultTag,
-    defaultRenderInput = _useAutocomplete.defaultRenderInput;
+    defaultRenderInput = _useAutocomplete.defaultRenderInput,
+    getUniqueArray = _useAutocomplete.getUniqueArray;
   var handleSearch = useRef(debounce_1(function (result) {
     return onSearch(result);
   }, 500)).current;
@@ -345,7 +383,8 @@ var Autocomplete = function Autocomplete(props) {
       return _renderInput && _renderInput(params) || defaultRenderInput(params);
     },
     renderTags: function renderTags(tagValue, getTagProps) {
-      return _renderTags && _renderTags(tagValue, getTagProps) || defaultTag(tagValue, getTagProps);
+      var uniqueArray = getUniqueArray(tagValue) || tagValue;
+      return _renderTags && _renderTags(uniqueArray, getTagProps) || defaultTag(uniqueArray, getTagProps);
     }
     // popupIcon={<ExpandMore />}
     ,
@@ -375,7 +414,8 @@ Autocomplete.defaultProps = {
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
   onEnter: function onEnter() {},
-  arrowIcon: false
+  arrowIcon: false,
+  ariaLabel: undefined
 };
 Autocomplete.propTypes = {
   /** Css名稱 */
@@ -417,7 +457,9 @@ Autocomplete.propTypes = {
   /** 鍵盤輸入Enter的callback */
   onEnter: PropTypes.func,
   /** 是否顯示arrow icon */
-  arrowIcon: PropTypes.bool
+  arrowIcon: PropTypes.bool,
+  /** 輸入框的無障礙名稱(WCAG 3.3.2)，未提供時以placeholder代替 */
+  ariaLabel: PropTypes.string
 };
 
 export { Autocomplete as A };

package/lib/components/Autocomplete.js

@@ -1,19 +1,20 @@
-export { A as default } from './Autocomplete-24e9686d.js';
-import './_rollupPluginBabelHelpers-ed61ffc0.js';
+export { A as default } from './Autocomplete-5d6f1df8.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
-import './index-f491ebce.js';
+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-ff0e3b99.js';
+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-dc5fc2fc.js';
+import './Empty-bf77164f.js';

package/lib/components/Avatar.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as classNames } from './index-f491ebce.js';
+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';

package/lib/components/BackTop.js

@@ -1,10 +1,10 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import { d as debounce_1 } from './debounce-127da66c.js';
 import { Fade, NoSsr, Box } from '@material-ui/core';
-import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-ff0e3b99.js';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/BarChart.js

@@ -1,5 +1,5 @@
 import React__default, { useEffect } from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { g as constant$1, h as interpolateNumber, j as color, k as interpolateRgb, l as interpolateString, n as exponent, o as ordinal, p as initRange, r as map, s as slice$1, u as bisectRight, v as formatSpecifier, w as formatPrefix, x as format, d as d3Select } from './transform-3a04288b.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/Breadcrumbs.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 import { Typography, Breadcrumbs as Breadcrumbs$1 } from '@material-ui/core';

package/lib/components/{Button-430d39e6.js → Button-305b69a0.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import { Button as Button$1, CircularProgress } from '@material-ui/core';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 

package/lib/components/Button.js

@@ -1,6 +1,6 @@
-export { B as default } from './Button-430d39e6.js';
+export { B as default } from './Button-305b69a0.js';
 import 'react';
 import 'prop-types';
-import './index-f491ebce.js';
+import './index-b76a85f4.js';
 import '@material-ui/core';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/Carousel.js

@@ -1,6 +1,6 @@
-import { c as _objectWithoutProperties$1, b as _objectSpread2, _ as _extends$3 } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { c as _objectWithoutProperties$1, b as _objectSpread2, _ as _extends$3 } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { a as classnames, c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -432,65 +432,6 @@ function toNumber(value) {
 
 var lodash_debounce = debounce;
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames() {
-			var classes = [];
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				}
-			}
-
-			return classes.join(' ');
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}());
-} (classnames));
-
 var innerSliderUtils = {};
 
 Object.defineProperty(innerSliderUtils, "__esModule", {

package/lib/components/Checkbox.js

@@ -1,4 +1,4 @@
-import { c as _objectWithoutProperties, _ as _extends } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { c as _objectWithoutProperties, _ as _extends } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { FormControlLabel, Checkbox as Checkbox$1 } from '@material-ui/core';

package/lib/components/CollapseContent.js

@@ -1,9 +1,9 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useRef, useEffect } from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
-import { M as MoreButton } from './MoreButton-4d5d94da.js';
+import { M as MoreButton } from './MoreButton-44d3b4fe.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';