@daoyi/nmtl-ui 2.0.1-beta.13 → 2.0.1-beta.130

package/lib/components/ForwardLink-5fbd2705.js

@@ -0,0 +1,184 @@
+import { c as _objectWithoutProperties } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { q as queryString } from './index-b47819f3.js';
+import { useHistory } from 'react-router-dom';
+import { Tooltip } from '@material-ui/core';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".forwardLink {\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: 100%;\n  display: flex;\n}\n.forwardLink__link {\n  color: unset;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n}\n.forwardLink__link--disabled {\n  cursor: not-allowed;\n}";
+styleInject(css_248z);
+
+var _excluded = ["className", "linkClassName", "title", "target", "disabled", "children", "tip", "onClick"];
+
+/*
+ * 導頁前綴沿用目前網址的語系段（/en/…、/zh-tw/…）。
+ * 原本寫死 '/zh-tw'（2023-03-18 暫時寫死），英文頁上的 ForwardLink 一律把使用者帶回中文站（nmtl-web i18n 盤點 D2）。
+ * history.location.pathname 不含 Router basename（各站 contextRoot），第一段就是語系；
+ * 只接受已知語系代碼，避免把 hr／lg／ra 這類兩個字母的子站代碼誤認成語系。
+ */
+var KNOWN_LOCALES = ['zh-tw', 'zh-cn', 'en', 'en-us'];
+var DEFAULT_LOCALE = 'zh-tw';
+var getLocalePrefix = function getLocalePrefix(pathname) {
+  var firstSegment = (pathname || '').split('/').filter(Boolean)[0];
+  return "/".concat(firstSegment && KNOWN_LOCALES.includes(firstSegment.toLowerCase()) ? firstSegment : DEFAULT_LOCALE);
+};
+
+/*
+ * ⚠️ 本元件刻意「不輸出 href 屬性」，請勿改回 <a> 或 react-router <Link>。
+ *
+ * 原因（2026-09-04 開發團隊決議，見 nmtl-web/docs/a11y/freego-scan-scope-plan-2026-09-04.md）：
+ * 無障礙檢測工具 Freego 只抽取 DOM 中真實存在的 a[href]/area[href]/iframe[src]/frame[src]，
+ * 且去重是完整網址字串精確比對。本元件產生的是 ?id= 明細頁連結，資料有幾筆就展開幾頁，
+ * 再乘上九個子站前綴，測試站實測達 3297 頁 / 約 24 小時。改為程式導頁後，
+ * 內容明細頁不再進入爬取佇列，只留主選單、麵包屑、網站導覽等結構性連結（仍為真 <a href>）。
+ *
+ * 可及性補償：以 role="link" 保留連結語意（非 role="button"，遵循規範 03-aria-patterns §1
+ * 「導覽連結不可掛 role=button」），並自備 tabIndex 與 Enter 鍵啟動，
+ * 讀屏軟體仍會朗讀為連結、鍵盤仍可操作。焦點框由各站 a11y.scss 的
+ * [tabindex]:focus / [role='link']:focus 規則涵蓋。
+ * 已知取捨：失去中鍵／Ctrl+點擊另開分頁、右鍵複製網址等瀏覽器原生行為。
+ */
+var ForwardLink = function ForwardLink(_ref) {
+  var className = _ref.className,
+    linkClassName = _ref.linkClassName,
+    title = _ref.title,
+    target = _ref.target,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    tip = _ref.tip,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var history = useHistory();
+  var _useMemo = useMemo(function () {
+      var _rest$pathname;
+      if (disabled) return {};
+      /*
+       * 若將 search 寫在 pathname 中，意即 pathname=/asd?zxc=qwe
+       * 會導致換頁時 React route dom 無法匹配 => 空白畫面
+       * 若真有此情況發生 需把 search 提領出來
+       */
+      var foundIndex = (_rest$pathname = rest.pathname) === null || _rest$pathname === void 0 ? void 0 : _rest$pathname.indexOf('?');
+      if (foundIndex > -1) return {
+        pathname: rest.pathname.substring(0, foundIndex),
+        search: rest.pathname.substring(foundIndex)
+      };
+      return {
+        pathname: rest.pathname || '/',
+        search: typeof rest.search === 'string' ? rest.search : queryString.stringify(rest.search)
+      };
+    }, [history, disabled, rest.pathname, rest.search]),
+    _useMemo$pathname = _useMemo.pathname,
+    pathname = _useMemo$pathname === void 0 ? '' : _useMemo$pathname,
+    _useMemo$search = _useMemo.search,
+    search = _useMemo$search === void 0 ? '' : _useMemo$search;
+
+  /* 導頁：target="_blank"（預設值）沿用原本 <a target="_blank"> 的另開分頁行為，
+     其餘 target 走 SPA 換頁。history.createHref 會自動套上 Router 的 basename
+     （各站的 contextRoot），與原本 <Link> 產出的網址一致。 */
+  var go = useCallback(function () {
+    if (onClick && onClick() === false) return;
+    var to = {
+      pathname: "".concat(getLocalePrefix(history.location.pathname)).concat(pathname),
+      search: search
+    };
+    if (target === '_blank') {
+      window.open(history.createHref(to), '_blank', 'noopener,noreferrer');
+      return;
+    }
+    history.push(to);
+  }, [history, onClick, target, pathname, search]);
+
+  /* role="link" 依 ARIA APG 僅以 Enter 啟動（不綁 Space，那是 role="button" 的行為） */
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      go();
+    }
+  }, [go]);
+
+  /* WAVE: Redundant title text — title 與連結內文相同時不輸出，避免輔具重複朗讀 */
+  var domTitle = tip || typeof children === 'string' && children === title ? undefined : title;
+  /* WCAG 3.2.x 另開新視窗預告：target="_blank" 時以 aria-label 註明 */
+  var newWindowLabel = target === '_blank' && (typeof children === 'string' || title) ? "".concat(typeof children === 'string' ? children : title).concat(getIntl().formatMessage({
+    id: 'aria.newWindow'
+  })) : undefined;
+  /* R24：aria-label 已含 title 全文時不再輸出 title 屬性——NVDA 會把 title 屬性當
+     description 接在 aria-label 之後再唸一次，造成「書名 ×2」（abo 首頁推薦卡實測） */
+  var linkTitle = newWindowLabel ? undefined : domTitle;
+
+  /* 沒有可及名稱的連結對所有使用者都無用，且會被判 Freego HM1240401C
+     （實測 ocean books?id=ART469770：某筆資料人名為空 → 連結內容全空）。
+     children 為空字串／空值且無 title 時，改以非互動元素呈現。 */
+  var namelessChildren = children === undefined || children === null || children === false || typeof children === 'string' && !children.trim();
+  var nameless = namelessChildren && !title;
+  var linkComponent = /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "forwardLink"
+  }, disabled || nameless ? /*#__PURE__*/React__default.createElement("div", {
+    title: domTitle,
+    className: classNames('forwardLink__link--disabled', linkClassName)
+  }, children) :
+  /*#__PURE__*/
+  /* linkClassName 直接掛在可聚焦元素上：消費端的 ellipsis/overflow 樣式若掛在
+     外層 className（包裹 div），會裁掉焦點框（WCAG 2.4.7 走查實測）——
+     此類樣式應改傳 linkClassName */
+  React__default.createElement("span", {
+    role: "link",
+    tabIndex: 0,
+    className: classNames('forwardLink__link', linkClassName),
+    title: linkTitle,
+    "aria-label": newWindowLabel,
+    onClick: go,
+    onKeyDown: handleKeyDown
+  }, children)));
+  if (tip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tip,
+      placement: "top"
+    }, linkComponent);
+  }
+  return linkComponent;
+};
+ForwardLink.defaultProps = {
+  className: undefined,
+  linkClassName: undefined,
+  title: undefined,
+  target: '_blank',
+  disabled: undefined,
+  children: undefined,
+  search: undefined,
+  tip: undefined,
+  onClick: function onClick() {
+    return true;
+  }
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ForwardLink.propTypes = {
+  /** Css Name（掛在外層包裹 div；帶 overflow/ellipsis 的樣式請改用 linkClassName，否則會裁掉焦點框） */
+  className: PropTypes.string,
+  /** 直接掛在可聚焦元素上的 Css Name */
+  linkClassName: PropTypes.string,
+  /** DOM title */
+  title: PropTypes.string,
+  /** 導頁方式：'_blank' 另開分頁（預設），其餘走 SPA 換頁 */
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  /** 是否取消點擊 */
+  disabled: PropTypes.bool,
+  /** 子項目 */
+  children: PropTypes.node,
+  /** 欲前往的連結 */
+  pathname: PropTypes.string.isRequired,
+  /** 欲前往連結的參數 */
+  search: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /** 彈跳提示文字 */
+  tip: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** 元件被點即時的callback，返回false會停止元件導向 */
+  onClick: PropTypes.func
+};
+
+export { ForwardLink as F };

package/lib/components/ForwardLink.js

@@ -0,0 +1,10 @@
+export { F as default } from './ForwardLink-5fbd2705.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import './index-b47819f3.js';
+import 'react-router-dom';
+import '@material-ui/core';
+import './globalConfig';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Header.js

@@ -1 +1,233 @@
-import e,{useState as a,useRef as n,useEffect as r}from"react";import t from"prop-types";import{c as o}from"./index-11391ca3.js";import{d as i,K as l}from"./KeywordSearch-5a393f12.js";import{useHistory as s,useRouteMatch as d,NavLink as p}from"react-router-dom";import{List as c,ListItem as m,ListItemIcon as h,ListItemText as g,IconButton as _,Drawer as u,Divider as f,Typography as y}from"@material-ui/core";import{DehazeRounded as w,SearchOutlined as x}from"@material-ui/icons";import{S as k}from"./Select-f2441b83.js";import{s as v}from"./style-inject.es-c875d022.js";import"axios";import"./isObjectLike-2f1983fe.js";import"@material-ui/lab";import"./_rollupPluginBabelHelpers-1b8c042f.js";import"./Empty-54b79907.js";const E=e=>{let{language:a,supportLanguages:n}=e;return n.some((e=>{let{value:n}=e;return n===a}))?a:n[0].value},b=a=>{let{drawerList:n,setOpen:r}=a;const t=s(),{url:o}=d();return e.createElement(c,{className:"drawer__list"},Array.isArray(n)&&n.map(((a,n)=>{let{name:i,icon:l,path:s}=a;return e.createElement(m,{button:!0,key:n.toString(),onClick:()=>{s.indexOf("http")>-1?window.location=s:t.push({pathname:`${o}${s}`}),r(!1)}},l&&e.createElement(h,{style:{marginRight:24}},l),e.createElement(g,{primary:i}))})))};b.defaultProps={},b.propTypes={drawerList:t.arrayOf(t.any).isRequired,setOpen:t.func.isRequired};v(".drawer__icon {\n  display: none !important; }\n\n.drawer__header {\n  display: flex;\n  align-items: center;\n  padding: 20px; }\n  .drawer__header-title {\n    font-size: 18px;\n    font-weight: bold; }\n\n.drawer__list {\n  padding: 10px !important; }\n  .drawer__list .MuiSvgIcon-root {\n    margin-left: 8px; }\n\n.drawer__lang {\n  margin: 24px 36px !important; }\n\n@media screen and (max-width: 768px) {\n  .drawer {\n    display: flex;\n    justify-content: flex-end; }\n    .drawer__icon {\n      display: flex !important; } }\n");const S=n=>{let{title:r,logo:t,locale:o,supportLanguages:i,drawerList:l,onLanguageChange:s}=n;const[d,p]=a(!1);return e.createElement("div",{className:"drawer"},e.createElement(_,{className:"drawer__icon",onClick:()=>p(!0)},e.createElement(w,{fontSize:"large"})),e.createElement(u,{anchor:"right",open:d,onClose:()=>p(!1),onKeyDown:()=>p(!1)},(t||r)&&e.createElement("div",{className:"drawer__header"},e.createElement("div",{className:"drawer__header-logo"},t),e.createElement("div",{className:"drawer__header-title"},r)),e.createElement(f,null),e.createElement(b,{drawerList:(Array.isArray(l)?l:[]).filter((e=>{let{showInHeader:a}=e;return a})),setOpen:p}),e.createElement(f,null),Array.isArray(i)&&i.length>0&&e.createElement(k,{className:"drawer__lang",defaultValue:E({language:o,supportLanguages:i}),onChange:e=>s(e),options:i})))};S.defaultProps={title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],drawerList:void 0,onLanguageChange:()=>{}},S.propTypes={title:t.string,logo:t.node,locale:t.string,supportLanguages:t.arrayOf(t.any),drawerList:t.arrayOf(t.any),onLanguageChange:t.func};v(".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  -webkit-backdrop-filter: blur(4px);\n          backdrop-filter: blur(4px); }\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    .header__logo__img {\n      display: flex;\n      align-items: center; }\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  .header__links {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 14px; }\n    .header__links a {\n      text-decoration: none; }\n    .header__links--full {\n      flex: 1; }\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      .header__links__item--active .header__links__item {\n        font-weight: 800 !important;\n        background: transparent;\n        border-radius: 45px; }\n      .header__links__item:hover {\n        font-weight: 800 !important; }\n  .header__language {\n    min-width: 100px !important; }\n  .header__searchIcon {\n    display: none !important; }\n  @media screen and (max-width: 768px) {\n    .header--smallUseSearchIcon .header__searchIcon {\n      display: flex !important;\n      margin-right: 10px !important; }\n    .header--smallUseSearchIcon .keywordSearch {\n      visibility: hidden;\n      flex: 1;\n      width: 0; } }\n  .header--hide {\n    top: -100px; }\n  .header--focus .header__links {\n    display: none; }\n  .header .MuiTypography-root {\n    width: 100%;\n    display: flex;\n    align-items: center; }\n  .header .autocomplete {\n    float: right; }\n    .header .autocomplete .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n      padding: 1px 8px !important; }\n  .header .keywordSearch {\n    margin-right: 8px; }\n    .header .keywordSearch--focus .autocomplete {\n      width: 100% !important; }\n    .header .keywordSearch--animation .autocomplete {\n      width: 240px;\n      transition: width 0.3s ease-in-out; }\n\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important; }\n    .header__logo {\n      margin-right: 16px !important; }\n      .header__logo__title {\n        display: none !important; }\n    .header__links {\n      display: none; }\n      .header__links__item {\n        font-size: 1rem !important; }\n    .header__language {\n      display: none !important; }\n    .header--focus .header__logo {\n      display: none !important; }\n  .autocomplete__icon {\n    display: none !important; } }\n");const L=t=>{const{title:c,logo:m,locale:h,supportLanguages:g,pages:u,darkMode:f,typographyColor:w,className:v}=t,{searchAPI:b,searchPlaceholder:L,smallUseSearchIcon:C}=t,{onSearch:N,setDarkMode:I,onLanguageChange:A,onSearchIconClick:O}=t,P=s(),{location:{search:z}}=P,{url:M}=d(),[j,T]=a(!1),[U,D]=a(!1),R=n(i((()=>T(window.scrollY>100)),10)).current;return r((()=>(window.addEventListener("scroll",R),()=>{window.removeEventListener("scroll",R)})),[]),r((()=>{D(!1)}),[z]),e.createElement("div",{className:o("MuiPaper-root","header",{"header--smallUseSearchIcon":C},{"header--hide":j},{"header--focus":U},v)},e.createElement("div",{className:"header__logo",onClick:()=>P.push(`/${h}`)},m&&e.createElement("div",{className:"header__logo__img"},m),!U&&c&&e.createElement(y,{color:w,className:"header__logo__title"},c)),b&&e.createElement(l,{animation:!0,searchAPI:b,placeholder:L,menuOpen:U,setMenuOpen:D,onSearch:N}),e.createElement("div",{className:o("header__links",{"header__links--full":!b})},(Array.isArray(u)?u:[]).filter((e=>{let{showInHeader:a}=e;return a})).map(((a,n)=>{let{path:r="",name:t}=a;const o=e.createElement(y,{className:"header__links__item",color:w},t);return r.indexOf("http")>-1?e.createElement("a",{key:n.toString(),href:r,className:"header__links__item--active"},o):e.createElement(p,{key:n.toString(),to:`${M}${r}`,activeClassName:"header__links__item--active"},o)}))),e.createElement(_,{className:"header__searchIcon",onClick:O},e.createElement(x,{fontSize:"large"})),false,Array.isArray(g)&&g.length>0&&e.createElement(k,{className:"header__language",defaultValue:E({language:h,supportLanguages:g}),onChange:e=>A(e),options:g}),e.createElement(S,{title:c,logo:m,drawerList:u,supportLanguages:g}))};L.defaultProps={className:void 0,title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],darkMode:!1,typographyColor:"primary",searchAPI:void 0,searchPlaceholder:void 0,smallUseSearchIcon:void 0,onSearch:()=>{},setDarkMode:()=>{},onLanguageChange:()=>{},onSearchIconClick:()=>{}},L.propTypes={className:t.string,title:t.string,logo:t.node,locale:t.string,supportLanguages:t.arrayOf(t.any),pages:t.arrayOf(t.any).isRequired,darkMode:t.bool,typographyColor:t.oneOf(["initial","inherit","primary","secondary","textPrimary","textSecondary","error"]),searchAPI:t.string,searchPlaceholder:t.string,smallUseSearchIcon:t.bool,onSearch:t.func,setDarkMode:t.func,onLanguageChange:t.func,onSearchIconClick:t.func};export{L as default};
+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-b76a85f4.js';
+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-fec33a2c.js';
+import { S as Select } from './Select-cb3e1ba1.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-629e59c7.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-3b418e5f.js';
+import '@material-ui/lab';
+import './createSvgIcon-e3803ee1.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import './toConsumableArray-dbe8af76.js';
+import './Empty-c6a44967.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}\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  text-decoration: none;\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__extraTools {\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\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  }\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__extraTools {\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);
+
+var showDarkModeSwitch = false;
+var Header = function Header(props) {
+  var title = props.title,
+    logo = props.logo,
+    locale = props.locale,
+    supportLanguages = props.supportLanguages,
+    pages = props.pages;
+    props.darkMode;
+    var typographyColor = props.typographyColor,
+    className = props.className;
+  var searchAPI = props.searchAPI,
+    searchPlaceholder = props.searchPlaceholder,
+    smallUseSearchIcon = props.smallUseSearchIcon;
+  var onSearch = props.onSearch;
+    props.setDarkMode;
+    var onLanguageChange = props.onLanguageChange,
+    onSearchIconClick = props.onSearchIconClick,
+    languageSelectLabel = props.languageSelectLabel,
+    extraTools = props.extraTools;
+  var history = useHistory();
+  var search = history.location.search;
+  var _useRouteMatch = useRouteMatch(),
+    url = _useRouteMatch.url;
+  // const { keyword } = queryString.parse(search);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hideHeader = _useState2[0],
+    setHideHeader = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuOpen = _useState4[0],
+    setMenuOpen = _useState4[1];
+  var handleScroll = useRef(debounce_1(function () {
+    return setHideHeader(window.scrollY > 100);
+  }, 10)).current;
+  useEffect(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  useEffect(function () {
+    setMenuOpen(false);
+  }, [search]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    role: "banner",
+    className: classNames('MuiPaper-root', 'header', {
+      'header--smallUseSearchIcon': smallUseSearchIcon
+    }, {
+      'header--hide': hideHeader
+    }, {
+      'header--focus': menuOpen
+    }, className)
+  }, /*#__PURE__*/React__default.createElement(NavLink, {
+    to: "/".concat(locale, "/main/home"),
+    className: "header__logo",
+    "aria-label": title ? getIntl().formatMessage({
+      id: 'aria.header.logoHomeWithTitle'
+    }, {
+      title: title
+    }) : getIntl().formatMessage({
+      id: 'aria.header.logoHome'
+    })
+  }, logo && /*#__PURE__*/React__default.createElement("div", {
+    className: "header__logo__img"
+  }, logo), !menuOpen && title && /*#__PURE__*/React__default.createElement(Typography, {
+    color: typographyColor,
+    className: "header__logo__title"
+  }, title)), searchAPI && /*#__PURE__*/React__default.createElement(KeywordSearch, {
+    animation: true
+    // keyword={keyword}
+    ,
+    searchAPI: searchAPI,
+    placeholder: searchPlaceholder,
+    menuOpen: menuOpen,
+    setMenuOpen: setMenuOpen,
+    onSearch: onSearch
+  }), /*#__PURE__*/React__default.createElement("nav", {
+    className: classNames('header__links', {
+      'header__links--full': !searchAPI
+    }),
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.navigation'
+    })
+  }, (Array.isArray(pages) ? pages : []).filter(function (_ref) {
+    var showInHeader = _ref.showInHeader;
+    return showInHeader;
+  }).map(function (_ref2, i) {
+    var _ref2$path = _ref2.path,
+      path = _ref2$path === void 0 ? '' : _ref2$path,
+      name = _ref2.name;
+    var label = /*#__PURE__*/React__default.createElement(Typography, {
+      className: "header__links__item",
+      color: typographyColor
+    }, name);
+    return path.indexOf('http') > -1 ?
+    /*#__PURE__*/
+    /* WCAG 3.2.2 外部連結（如文學好臺誌）另開新視窗需預先提示 */
+    React__default.createElement("a", {
+      key: i.toString(),
+      href: path,
+      className: "header__links__item--active",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "".concat(name).concat(getIntl().formatMessage({
+        id: 'aria.newWindow'
+      }))
+    }, label) : /*#__PURE__*/React__default.createElement(NavLink, {
+      key: i.toString(),
+      to: "".concat(url).concat(path),
+      activeClassName: "header__links__item--active"
+    }, label);
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "header__searchIcon",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.searchOpen'
+    }),
+    onClick: onSearchIconClick
+  }, /*#__PURE__*/React__default.createElement(SearchOutlined, {
+    fontSize: "large",
+    "aria-hidden": "true"
+  })), showDarkModeSwitch , extraTools && /*#__PURE__*/React__default.createElement("div", {
+    className: "header__extraTools"
+  }, extraTools), 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
+    }),
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    },
+    options: supportLanguages
+  }), /*#__PURE__*/React__default.createElement(Drawer, {
+    title: title,
+    logo: logo,
+    drawerList: pages,
+    supportLanguages: supportLanguages,
+    onLanguageChange: onLanguageChange,
+    languageSelectLabel: languageSelectLabel,
+    extraTools: extraTools
+  }));
+};
+Header.defaultProps = {
+  className: undefined,
+  title: undefined,
+  logo: undefined,
+  locale: undefined,
+  supportLanguages: defaultSupportLanguage,
+  darkMode: false,
+  typographyColor: 'primary',
+  searchAPI: undefined,
+  searchPlaceholder: undefined,
+  smallUseSearchIcon: undefined,
+  onSearch: function onSearch() {},
+  setDarkMode: function setDarkMode() {},
+  onLanguageChange: function onLanguageChange() {},
+  onSearchIconClick: function onSearchIconClick() {},
+  languageSelectLabel: undefined,
+  extraTools: undefined
+};
+Header.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 標題(通常為網站名稱) */
+  title: PropTypes.string,
+  /** 網站Logo */
+  logo: PropTypes.node,
+  /** 語系 */
+  locale: PropTypes.string,
+  /** 支援的語系 */
+  supportLanguages: PropTypes.arrayOf(PropTypes.any),
+  /** 頁面列表 */
+  pages: PropTypes.arrayOf(PropTypes.any).isRequired,
+  /** 是否為黑暗模式 */
+  darkMode: PropTypes.bool,
+  /** 文字色系() */
+  typographyColor: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
+  /** SearchBar的API */
+  searchAPI: PropTypes.string,
+  /** SearchBar的提示字 */
+  searchPlaceholder: PropTypes.string,
+  /** 是否在小畫面的時候使用SearchIcon取代KeywordSearch */
+  smallUseSearchIcon: PropTypes.bool,
+  /** SearchBar啟動搜尋的callback */
+  onSearch: PropTypes.func,
+  /** 設定黑暗模式的callback */
+  setDarkMode: PropTypes.func,
+  /** 語系變動時的callback */
+  onLanguageChange: PropTypes.func,
+  /** SearchIcon點擊時的callback */
+  onSearchIconClick: PropTypes.func,
+  /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
+  languageSelectLabel: PropTypes.string,
+  /** 呼叫端自訂的工具區（如字級縮放）：寬畫面顯示於語系選單之前，窄畫面隨語系一起收進抽屜 */
+  extraTools: PropTypes.node
+};
+
+export { Header as default };