@daoyi/nmtl-ui 2.0.1-beta.97 → 2.0.1-beta.98

package/lib/components/{ContactModal-7427edd0.js → ContactModal-c006ed2c.js}

@@ -7,7 +7,12 @@ import { M as Modal } from './Modal-777fe87d.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { c as classNames } from './index-b76a85f4.js';
 import { Input, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
-import { S as Select } from './Select-ac580a1f.js';
+import './defaultTheme-ed7746fe.js';
+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-e0790135.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
@@ -11624,6 +11629,12 @@ const FormItem = _ref => {
   };
   /* 這些欄位型別會渲染帶 inputId 的 input，標題才能用 label htmlFor；其餘型別改以 aria-labelledby 關聯 */
   const hasInputId = ['input', 'textarea', 'datePicker', 'email', 'vcode'].includes(type);
+  /* WCAG 1.4.3 必填星號依主題深淺自動選色：formItem.scss 的 #b91c1c 只適用淺底 Modal，
+     深色主題（如 ocean Paper #30353d）對比僅約 1.5:1（WAVE 實測被抓）→ 深色用 #ff8a80（約 5.4:1） */
+  const theme = useTheme();
+  const starStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#ff8a80'
+  } : undefined;
   const render = field => {
     let component;
     switch (type) {
@@ -11721,12 +11732,14 @@ const FormItem = _ref => {
         htmlFor: inputId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
+        style: starStyle,
         "aria-hidden": "true"
       }, "*")) : /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title",
         id: labelId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
+        style: starStyle,
         "aria-hidden": "true"
       }, "*"))), hint && /*#__PURE__*/React__default.createElement(Box, {
         my: 1

package/lib/components/ContactModal.js

@@ -1,4 +1,4 @@
-export { C as default } from './ContactModal-7427edd0.js';
+export { C as default } from './ContactModal-c006ed2c.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -14,9 +14,11 @@ import './style-inject.es-1f59c1d0.js';
 import './Spin-8dc60bfe.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './Select-ac580a1f.js';
-import './Empty-bf77164f.js';
-import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
+import './Select-e0790135.js';
+import './Empty-bf77164f.js';
+import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/{Drawer-41d3a91f.js → Drawer-2cbcec04.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-ac580a1f.js';
+import { S as Select } from './Select-e0790135.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/Drawer.js

@@ -1,11 +1,16 @@
-export { D as default } from './Drawer-41d3a91f.js';
+export { D as default } from './Drawer-2cbcec04.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-ac580a1f.js';
+import './Select-e0790135.js';
 import './index-b76a85f4.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import './Empty-bf77164f.js';
 import './style-inject.es-1f59c1d0.js';
 import 'react-router-dom';

package/lib/components/{ExtraTools-8d2ef84d.js → ExtraTools-55f66039.js}

@@ -3143,7 +3143,7 @@ const ResetMobileIcon = _ref => {
   })));
 };
 
-var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .font-size-up,\n.extraTools .font-size-down {\n  height: 32px;\n  line-height: 32px !important;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
+var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n  padding-bottom: 6px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .font-size-up,\n.extraTools .font-size-down {\n  height: 32px;\n  line-height: 32px !important;\n}\n.extraTools .font-size-changer .font-size-changer-buttons > div {\n  float: none;\n  height: 32px;\n  line-height: 32px !important;\n  align-self: center;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
 styleInject(css_248z);
 
 /* eslint-disable prefer-destructuring */

package/lib/components/ExtraTools.js

@@ -1,4 +1,4 @@
-export { E as default } from './ExtraTools-8d2ef84d.js';
+export { E as default } from './ExtraTools-55f66039.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import './index-b76a85f4.js';

package/lib/components/Footer.js

@@ -3,7 +3,7 @@ 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-7427edd0.js';
+import { C as ContactModal } from './ContactModal-c006ed2c.js';
 import { S as Spin } from './Spin-8dc60bfe.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
@@ -14,11 +14,13 @@ import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './Select-ac580a1f.js';
-import './Empty-bf77164f.js';
-import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
+import './Select-e0790135.js';
+import './Empty-bf77164f.js';
+import './createSvgIcon-e3803ee1.js';
 import 'react-dom';
 
 /* eslint-disable max-len */

package/lib/components/Header.js

@@ -7,8 +7,8 @@ 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-33341dd3.js';
-import { S as Select } from './Select-ac580a1f.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-41d3a91f.js';
+import { S as Select } from './Select-e0790135.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-2cbcec04.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
@@ -23,6 +23,8 @@ import '@material-ui/styles';
 import 'react-dom';
 import './toConsumableArray-dbe8af76.js';
 import './Empty-bf77164f.js';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 
 var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n}\n.header__logo {\n  display: flex;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  margin-right: 30px !important;\n  cursor: pointer;\n}\n.header__logo__img {\n  display: flex;\n  align-items: center;\n}\n.header__logo__title {\n  white-space: nowrap;\n  margin-left: 1rem !important;\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links {\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 14px;\n}\n.header__links a {\n  text-decoration: none;\n}\n.header__links--full {\n  flex: 1;\n}\n.header__links__item {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 1.125rem !important;\n  font-weight: 500 !important;\n  white-space: nowrap;\n  padding: 6px 14px;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links__item--active .header__links__item {\n  font-weight: 800 !important;\n  background: transparent;\n  border-radius: 45px;\n}\n.header__links__item:hover {\n  font-weight: 800 !important;\n}\n.header__language {\n  min-width: 100px !important;\n}\n.header__searchIcon {\n  display: none !important;\n}\n@media screen and (max-width: 768px) {\n  .header--smallUseSearchIcon .header__searchIcon {\n    display: flex !important;\n    margin-right: 10px !important;\n  }\n  .header--smallUseSearchIcon .keywordSearch {\n    visibility: hidden;\n    flex: 1;\n    width: 0;\n  }\n}\n.header--hide {\n  top: -100px;\n}\n.header--focus .header__links {\n  display: none;\n}\n.header .MuiTypography-root {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.header .autocomplete {\n  float: right;\n}\n.header .autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  padding: 1px 8px !important;\n}\n.header .keywordSearch {\n  margin-right: 8px;\n}\n.header .keywordSearch--focus .autocomplete {\n  width: 100% !important;\n}\n.header .keywordSearch--animation .autocomplete {\n  width: 240px;\n  transition: width 0.3s ease-in-out;\n}\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important;\n  }\n  .header__logo {\n    margin-right: 16px !important;\n  }\n  .header__logo__title {\n    display: none !important;\n  }\n  .header__links {\n    display: none;\n  }\n  .header__links__item {\n    font-size: 1rem !important;\n  }\n  .header__language {\n    display: none !important;\n  }\n  .header--focus .header__logo {\n    display: none !important;\n  }\n\n  .autocomplete__icon {\n    display: none !important;\n  }\n}";
 styleInject(css_248z);

package/lib/components/Pagination.js

@@ -2,12 +2,13 @@ import { c as _objectWithoutProperties$1 } from './_rollupPluginBabelHelpers-a52
 import * as React$2 from 'react';
 import React__default, { Children, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { d as defaultTheme, k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
+import { k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
 import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import 'react-is';
-import { useTheme as useTheme$1 } from '@material-ui/styles';
+import '@material-ui/styles';
 import './withTheme-2d778133.js';
 import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
+import { u as useTheme } from './useTheme-d16d02d9.js';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { c as classNames } from './index-b76a85f4.js';
@@ -15,12 +16,6 @@ import { IconButton } from '@material-ui/core';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_commonjsHelpers-70de2c37.js';
 
-function useTheme() {
-  var theme = useTheme$1() || defaultTheme;
-
-  return theme;
-}
-
 function usePagination() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 

package/lib/components/SNA.js

@@ -2,7 +2,7 @@ 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-8d2ef84d.js';
+import { E as ExtraTools } from './ExtraTools-55f66039.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/{Select-ac580a1f.js → Select-e0790135.js}

@@ -3,6 +3,11 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import { E as Empty } from './Empty-bf77164f.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
@@ -25,6 +30,12 @@ var Select = function Select(props) {
     _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;
@@ -52,9 +63,12 @@ var Select = function Select(props) {
     renderValue: function renderValue(id) {
       var finder = itemFind(id);
       var content = _typeof(finder) === 'object' ? finder.label : finder;
-      if (!id && id !== 0 || id.length === 0) content = /*#__PURE__*/React__default.createElement("span", {
-        className: "select__placeholder"
-      }, placeholder);
+      if (!id && id !== 0 || id.length === 0) {
+        content = /*#__PURE__*/React__default.createElement("span", {
+          className: "select__placeholder",
+          style: placeholderStyle
+        }, placeholder);
+      }
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
         size: 16,
         style: {

package/lib/components/Select.js

@@ -1,8 +1,13 @@
-export { S as default } from './Select-ac580a1f.js';
+export { S as default } from './Select-e0790135.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import '@material-ui/core';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import './Empty-bf77164f.js';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/useTheme-d16d02d9.js

@@ -0,0 +1,11 @@
+import { useTheme as useTheme$1 } from '@material-ui/styles';
+import 'react';
+import { d as defaultTheme } from './defaultTheme-ed7746fe.js';
+
+function useTheme() {
+  var theme = useTheme$1() || defaultTheme;
+
+  return theme;
+}
+
+export { useTheme as u };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.97",
+	"version": "2.0.1-beta.98",
 	"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",