@udi-organization/udi-package 1.0.74 → 1.0.76

package/dist/index.cjs.js

@@ -1,7 +1,15 @@
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var md = require('react-icons/md');
+var moment = require('moment');
+var fa = require('react-icons/fa');
+var material = require('@mui/material');
+var AdapterDateFns = require('@mui/x-date-pickers/AdapterDateFns');
+var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
+var MobileDateTimePicker = require('@mui/x-date-pickers/MobileDateTimePicker');
+var PropTypes = require('prop-types');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -39,8 +47,8 @@ function _asyncToGenerator(n) {
     });
   };
 }
-function _defineProperty$1(e, r, t) {
-  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
     enumerable: true,
     configurable: true,
@@ -80,7 +88,7 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function ownKeys$1(e, r) {
+function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -93,34 +101,14 @@ function ownKeys$1(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) {
-      _defineProperty$1(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
   return e;
 }
-function _objectWithoutProperties$1(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose$1(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose$1(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -235,7 +223,7 @@ function _slicedToArray(r, e) {
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
-function _toPrimitive$1(t, r) {
+function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -245,8 +233,8 @@ function _toPrimitive$1(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-function _toPropertyKey$1(t) {
-  var i = _toPrimitive$1(t, "string");
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
 function _unsupportedIterableToArray(r, a) {
@@ -257,56 +245,6 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var _excluded$1 = ["children", "onClick", "variant", "disabled", "className"];
-var Button = function Button(_ref) {
-  var children = _ref.children,
-    onClick = _ref.onClick,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties$1(_ref, _excluded$1);
-  var baseStyles = {
-    padding: '10px 20px',
-    borderRadius: '6px',
-    border: 'none',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    fontSize: '14px',
-    fontWeight: '500',
-    opacity: disabled ? 0.6 : 1,
-    transition: 'all 0.2s ease'
-  };
-  var variantStyles = {
-    primary: {
-      backgroundColor: '#007bff',
-      color: 'white'
-    },
-    secondary: {
-      backgroundColor: '#6c757d',
-      color: 'white'
-    },
-    success: {
-      backgroundColor: '#28a745',
-      color: 'white'
-    },
-    danger: {
-      backgroundColor: '#dc3545',
-      color: 'white'
-    }
-  };
-  var buttonStyle = _objectSpread2(_objectSpread2({}, baseStyles), variantStyles[variant]);
-  return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread2(_objectSpread2({
-    style: buttonStyle,
-    onClick: onClick,
-    disabled: disabled,
-    className: className
-  }, props), {}, {
-    children: children
-  }));
-};
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -515,72 +453,6 @@ var DesktopPaginationControls = function DesktopPaginationControls(_ref3) {
   });
 };
 
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
-
-var _excluded = ["attr", "size", "title"];
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
-    key: i
-  }, node.attr), Tree2Element(node.child)));
-}
-function GenIcon(data) {
-  return props => /*#__PURE__*/React.createElement(IconBase, _extends({
-    attr: _objectSpread({}, data.attr)
-  }, props), Tree2Element(data.child));
-}
-function IconBase(props) {
-  var elem = conf => {
-    var {
-        attr,
-        size,
-        title
-      } = props,
-      svgProps = _objectWithoutProperties(props, _excluded);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: _objectSpread(_objectSpread({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
-  };
-  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-function MdExpandLess (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"},"child":[]}]})(props);
-}function MdExpandMore (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"},"child":[]}]})(props);
-}function MdOutlineMenuBook (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"},"child":[]},{"tag":"path","attr":{"d":"M17.5 10.5c.88 0 1.73.09 2.5.26V9.24c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99zM13 12.49v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26V11.9c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.3-4.5.83zM17.5 14.33c-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26v-1.52c-.79-.16-1.64-.24-2.5-.24z"},"child":[]}]})(props);
-}
-
 var TableHeader = function TableHeader(_ref) {
   var name = _ref.name,
     _ref$freeActions = _ref.freeActions,
@@ -613,9 +485,9 @@ var TableHeader = function TableHeader(_ref) {
         style: hasTheme ? {
           color: getCSSVariable('--color-text-primary')
         } : {},
-        children: isCollapsed ? /*#__PURE__*/jsxRuntime.jsx(MdExpandMore, {
+        children: isCollapsed ? /*#__PURE__*/jsxRuntime.jsx(md.MdExpandMore, {
           size: 20
-        }) : /*#__PURE__*/jsxRuntime.jsx(MdExpandLess, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(md.MdExpandLess, {
           size: 20
         })
       }), /*#__PURE__*/jsxRuntime.jsx("h3", {
@@ -641,7 +513,7 @@ var TableHeader = function TableHeader(_ref) {
           className: "udi-table-free-action-button",
           style: _objectSpread2({}, action.style),
           disabled: action.disabled,
-          children: action.icon ? action.icon : action.label ? action.label : /*#__PURE__*/jsxRuntime.jsx(MdOutlineMenuBook, {})
+          children: action.icon ? action.icon : action.label ? action.label : /*#__PURE__*/jsxRuntime.jsx(md.MdOutlineMenuBook, {})
         }, index);
       })
     })]
@@ -963,29 +835,29 @@ function useDataRequest(_ref) {
     _ref$isDev = _ref.isDev,
     isDev = _ref$isDev === void 0 ? false : _ref$isDev;
   // 資料狀態
-  var _useState = React.useState([]),
+  var _useState = react.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
     setData = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = react.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
-  var _useState5 = React.useState(0),
+  var _useState5 = react.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
     totalCount = _useState6[0],
     setTotalCount = _useState6[1];
-  var _useState7 = React.useState(null),
+  var _useState7 = react.useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     error = _useState8[0],
     setError = _useState8[1];
-  var _useState9 = React.useState(false),
+  var _useState9 = react.useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
     isInfiniteScroll = _useState0[0],
     setIsInfiniteScroll = _useState0[1];
 
   // 執行資料請求
-  var executeDataRequest = React.useCallback(/*#__PURE__*/function () {
+  var executeDataRequest = react.useCallback(/*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(params) {
       var result, responseData, _t, _t2;
       return _regenerator().w(function (_context) {
@@ -1053,7 +925,7 @@ function useDataRequest(_ref) {
   }(), [onDataRequest, isInfiniteScroll, isDev]);
 
   // 防抖的請求執行
-  var debouncedDataRequest = React.useMemo(function () {
+  var debouncedDataRequest = react.useMemo(function () {
     var timeoutId;
     return function (params) {
       clearTimeout(timeoutId);
@@ -1064,7 +936,7 @@ function useDataRequest(_ref) {
   }, [executeDataRequest]);
 
   // 初始載入
-  var initialLoad = React.useCallback(function (currentPageSize) {
+  var initialLoad = react.useCallback(function (currentPageSize) {
     if (onDataRequest) {
       var params = {
         page: 0,
@@ -1080,7 +952,7 @@ function useDataRequest(_ref) {
   }, [onDataRequest, executeDataRequest]);
 
   // 重置資料
-  var resetData = React.useCallback(function () {
+  var resetData = react.useCallback(function () {
     setData([]);
     setTotalCount(0);
     setError(null);
@@ -1118,7 +990,7 @@ function useTableScroll() {
     _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data;
   // 滾動位置狀態
-  var _useState = React.useState({
+  var _useState = react.useState({
       top: 0,
       left: 0,
       verticalPercent: 0,
@@ -1129,7 +1001,7 @@ function useTableScroll() {
     setScrollPosition = _useState2[1];
 
   // 滾動條資訊
-  var _useState3 = React.useState({
+  var _useState3 = react.useState({
       hasHorizontal: false,
       hasVertical: false,
       maxScrollLeft: 0,
@@ -1140,10 +1012,10 @@ function useTableScroll() {
     setScrollbarInfo = _useState4[1];
 
   // 表格容器 ref
-  var tableWrapperRef = React.useRef(null);
+  var tableWrapperRef = react.useRef(null);
 
   // 滾動事件處理（使用 throttle）
-  React.useEffect(function () {
+  react.useEffect(function () {
     var tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
 
@@ -1224,7 +1096,7 @@ function useTableScroll() {
   }, [data]); // 當數據變化時重新初始化
 
   // 滾動控制函數
-  var scrollControl = React.useCallback(function (axis, value) {
+  var scrollControl = react.useCallback(function (axis, value) {
     var tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     var maxScrollTop = tableWrapper.scrollHeight - tableWrapper.clientHeight;
@@ -1238,7 +1110,7 @@ function useTableScroll() {
   }, []);
 
   // 便捷滾動方法
-  var scrollTo = React.useCallback(function () {
+  var scrollTo = react.useCallback(function () {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var top = options.top,
       left = options.left;
@@ -1247,31 +1119,31 @@ function useTableScroll() {
   }, [scrollControl]);
 
   // 滾動到頂部
-  var scrollToTop = React.useCallback(function () {
+  var scrollToTop = react.useCallback(function () {
     scrollControl("top", 0);
   }, [scrollControl]);
 
   // 滾動到底部
-  var scrollToBottom = React.useCallback(function () {
+  var scrollToBottom = react.useCallback(function () {
     var tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     scrollControl("top", tableWrapper.scrollHeight);
   }, [scrollControl]);
 
   // 滾動到最左邊
-  var scrollToLeft = React.useCallback(function () {
+  var scrollToLeft = react.useCallback(function () {
     scrollControl("left", 0);
   }, [scrollControl]);
 
   // 滾動到最右邊
-  var scrollToRight = React.useCallback(function () {
+  var scrollToRight = react.useCallback(function () {
     var tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     scrollControl("left", tableWrapper.scrollWidth);
   }, [scrollControl]);
 
   // 取得滾動狀態
-  var getScrollState = React.useCallback(function () {
+  var getScrollState = react.useCallback(function () {
     return _objectSpread2(_objectSpread2(_objectSpread2({}, scrollPosition), scrollbarInfo), {}, {
       isAtTop: scrollPosition.verticalPercent === 0,
       isAtBottom: scrollPosition.verticalPercent === 100,
@@ -1309,39 +1181,39 @@ function useTableFilter() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     onFilterChange = _ref.onFilterChange;
   // 基本篩選狀態
-  var _useState = React.useState(""),
+  var _useState = react.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     filterText = _useState2[0],
     setFilterText = _useState2[1];
-  var _useState3 = React.useState("all"),
+  var _useState3 = react.useState("all"),
     _useState4 = _slicedToArray(_useState3, 2),
     filterColumn = _useState4[0],
     setFilterColumn = _useState4[1];
 
   // 進階篩選狀態
-  var _useState5 = React.useState(false),
+  var _useState5 = react.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     showAdvancedFilter = _useState6[0],
     setShowAdvancedFilter = _useState6[1];
-  var _useState7 = React.useState({}),
+  var _useState7 = react.useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
     advancedFilters = _useState8[0],
     setAdvancedFilters = _useState8[1];
 
   // 更新篩選文字
-  var updateFilterText = React.useCallback(function (value) {
+  var updateFilterText = react.useCallback(function (value) {
     setFilterText(value);
     onFilterChange === null || onFilterChange === void 0 || onFilterChange();
   }, [onFilterChange]);
 
   // 更新篩選欄位
-  var updateFilterColumn = React.useCallback(function (value) {
+  var updateFilterColumn = react.useCallback(function (value) {
     setFilterColumn(value);
     onFilterChange === null || onFilterChange === void 0 || onFilterChange();
   }, [onFilterChange]);
 
   // 重置所有篩選
-  var resetFilter = React.useCallback(function () {
+  var resetFilter = react.useCallback(function () {
     setFilterText("");
     setFilterColumn("all");
     setAdvancedFilters({});
@@ -1349,21 +1221,21 @@ function useTableFilter() {
   }, [onFilterChange]);
 
   // 處理進階篩選變更
-  var handleAdvancedFilterChange = React.useCallback(function (columnKey, value) {
+  var handleAdvancedFilterChange = react.useCallback(function (columnKey, value) {
     setAdvancedFilters(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, columnKey, value));
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, columnKey, value));
     });
     onFilterChange === null || onFilterChange === void 0 || onFilterChange();
   }, [onFilterChange]);
 
   // 清除進階篩選
-  var clearAdvancedFilters = React.useCallback(function () {
+  var clearAdvancedFilters = react.useCallback(function () {
     setAdvancedFilters({});
     onFilterChange === null || onFilterChange === void 0 || onFilterChange();
   }, [onFilterChange]);
 
   // 切換進階篩選顯示
-  var toggleAdvancedFilter = React.useCallback(function () {
+  var toggleAdvancedFilter = react.useCallback(function () {
     setShowAdvancedFilter(function (prev) {
       return !prev;
     });
@@ -1380,7 +1252,7 @@ function useTableFilter() {
   }).length + (filterText ? 1 : 0);
 
   // 取得篩選狀態
-  var getFilterState = React.useCallback(function () {
+  var getFilterState = react.useCallback(function () {
     return {
       filterText: filterText,
       filterColumn: filterColumn,
@@ -1435,23 +1307,23 @@ function useResponsive() {
     mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 768 : _ref$mobileBreakpoint,
     _ref$tabletBreakpoint = _ref.tabletBreakpoint,
     tabletBreakpoint = _ref$tabletBreakpoint === void 0 ? 992 : _ref$tabletBreakpoint;
-  var _useState = React.useState(false),
+  var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMobile = _useState2[0],
     setIsMobile = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = react.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isTablet = _useState4[0],
     setIsTablet = _useState4[1];
-  var _useState5 = React.useState(typeof window !== "undefined" ? window.innerWidth : 0),
+  var _useState5 = react.useState(typeof window !== "undefined" ? window.innerWidth : 0),
     _useState6 = _slicedToArray(_useState5, 2),
     screenWidth = _useState6[0],
     setScreenWidth = _useState6[1];
-  var _useState7 = React.useState(typeof window !== "undefined" ? window.innerHeight : 0),
+  var _useState7 = react.useState(typeof window !== "undefined" ? window.innerHeight : 0),
     _useState8 = _slicedToArray(_useState7, 2),
     screenHeight = _useState8[0],
     setScreenHeight = _useState8[1];
-  React.useEffect(function () {
+  react.useEffect(function () {
     var checkScreenSize = function checkScreenSize() {
       var width = window.innerWidth;
       var height = window.innerHeight;
@@ -1475,7 +1347,7 @@ function useResponsive() {
   var isDesktop = !isMobile && !isTablet;
 
   // 取得響應式狀態
-  var getResponsiveState = React.useCallback(function () {
+  var getResponsiveState = react.useCallback(function () {
     return {
       isMobile: isMobile,
       isTablet: isTablet,
@@ -1511,7 +1383,7 @@ function useTableSort() {
     sortable = _ref$sortable === void 0 ? true : _ref$sortable,
     onSortChange = _ref.onSortChange;
   // 排序狀態
-  var _useState = React.useState({
+  var _useState = react.useState({
       key: null,
       direction: "asc"
     }),
@@ -1520,7 +1392,7 @@ function useTableSort() {
     setSortConfig = _useState2[1];
 
   // 處理排序
-  var handleSort = React.useCallback(function (key) {
+  var handleSort = react.useCallback(function (key) {
     if (!sortable) return;
     setSortConfig(function (prev) {
       var direction = "asc";
@@ -1536,7 +1408,7 @@ function useTableSort() {
   }, [sortable, onSortChange]);
 
   // 重置排序
-  var resetSort = React.useCallback(function () {
+  var resetSort = react.useCallback(function () {
     setSortConfig({
       key: null,
       direction: "asc"
@@ -1545,7 +1417,7 @@ function useTableSort() {
   }, [onSortChange]);
 
   // 設定排序
-  var setSort = React.useCallback(function (key) {
+  var setSort = react.useCallback(function (key) {
     var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "asc";
     setSortConfig({
       key: key,
@@ -1555,7 +1427,7 @@ function useTableSort() {
   }, [onSortChange]);
 
   // 切換排序方向
-  var toggleSortDirection = React.useCallback(function () {
+  var toggleSortDirection = react.useCallback(function () {
     setSortConfig(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         direction: prev.direction === "asc" ? "desc" : "asc"
@@ -1570,7 +1442,7 @@ function useTableSort() {
   var sortOrder = sortConfig.direction;
 
   // 取得排序狀態
-  var getSortState = React.useCallback(function () {
+  var getSortState = react.useCallback(function () {
     return {
       sortConfig: sortConfig,
       sortBy: sortBy,
@@ -1627,7 +1499,7 @@ var useTableDimensions = function useTableDimensions(_ref) {
    * 計算每個欄位的實際寬度
    * @returns {Object|null} 欄位寬度映射 { columnId: widthInPx } 或 null（不啟用時）
    */
-  var calculateColumnWidths = React.useMemo(function () {
+  var calculateColumnWidths = react.useMemo(function () {
     // 如果沒有啟用自動寬度，返回 null（使用舊邏輯）
     if (!enableAutoWidth) return null;
 
@@ -1694,7 +1566,7 @@ var useTableDimensions = function useTableDimensions(_ref) {
    * @param {number} singleSize - 單獨尺寸
    * @returns {string} CSS 尺寸值
    */
-  var calculateSize = React.useCallback(function (mainSize, singleSize) {
+  var calculateSize = react.useCallback(function (mainSize, singleSize) {
     if (singleSize) return "".concat(singleSize, "px");
     if (mainSize) return "".concat(mainSize, "px");
     return "auto";
@@ -1705,7 +1577,7 @@ var useTableDimensions = function useTableDimensions(_ref) {
    * @param {number} singleRowHeight - 單獨行高
    * @returns {string} CSS 高度值
    */
-  var rowHeight = React.useCallback(function (singleRowHeight) {
+  var rowHeight = react.useCallback(function (singleRowHeight) {
     return calculateSize(mainRowHeight, singleRowHeight);
   }, [mainRowHeight, calculateSize]);
 
@@ -1714,7 +1586,7 @@ var useTableDimensions = function useTableDimensions(_ref) {
    * @param {number} singleColumnWidth - 單獨欄位寬度
    * @returns {string} CSS 寬度值
    */
-  var columnWidth = React.useCallback(function (singleColumnWidth) {
+  var columnWidth = react.useCallback(function (singleColumnWidth) {
     return calculateSize(mainColumnWidth, singleColumnWidth);
   }, [mainColumnWidth, calculateSize]);
 
@@ -1725,7 +1597,7 @@ var useTableDimensions = function useTableDimensions(_ref) {
    * @param {boolean} options.isTitle - 是否為標題列
    * @returns {Object} CSS 尺寸物件
    */
-  var getGridSize = React.useCallback(function (column) {
+  var getGridSize = react.useCallback(function (column) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var _options$isTitle = options.isTitle,
       isTitle = _options$isTitle === void 0 ? false : _options$isTitle;
@@ -1801,38 +1673,38 @@ var useTablePagination = function useTablePagination(_ref) {
     _ref$totalCount = _ref.totalCount,
     totalCount = _ref$totalCount === void 0 ? 0 : _ref$totalCount;
   // 分頁狀態 (使用 0-based index)
-  var _useState = React.useState(0),
+  var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
     setCurrentPage = _useState2[1];
-  var _useState3 = React.useState(pageSize),
+  var _useState3 = react.useState(pageSize),
     _useState4 = _slicedToArray(_useState3, 2),
     currentPageSize = _useState4[0],
     setCurrentPageSize = _useState4[1];
 
   // 計算總頁數
-  var totalPages = React.useMemo(function () {
+  var totalPages = react.useMemo(function () {
     return Math.ceil(totalCount / currentPageSize);
   }, [totalCount, currentPageSize]);
 
   // 分頁處理
-  var handlePageChange = React.useCallback(function (page) {
+  var handlePageChange = react.useCallback(function (page) {
     setCurrentPage(page);
   }, []);
 
   // 處理每頁顯示數量變更
-  var handlePageSizeChange = React.useCallback(function (newPageSize) {
+  var handlePageSizeChange = react.useCallback(function (newPageSize) {
     setCurrentPageSize(newPageSize);
     setCurrentPage(0); // 重置到第一頁
   }, []);
 
   // 重置分頁到第一頁
-  var resetToFirstPage = React.useCallback(function () {
+  var resetToFirstPage = react.useCallback(function () {
     setCurrentPage(0);
   }, []);
 
   // 分頁資訊（供外部使用）
-  var paginationInfo = React.useMemo(function () {
+  var paginationInfo = react.useMemo(function () {
     return {
       currentPage: currentPage,
       currentPageSize: currentPageSize,
@@ -1930,7 +1802,7 @@ var useTableApi = function useTableApi(_ref) {
         return null;
       }
     } : _ref$themeState;
-  React.useImperativeHandle(ref, function () {
+  react.useImperativeHandle(ref, function () {
     return {
       // ========== 數據操作方法 ==========
 
@@ -2172,17 +2044,17 @@ var useTableInteraction = function useTableInteraction(_ref) {
     _ref$tableWrapperRef = _ref.tableWrapperRef,
     tableWrapperRef = _ref$tableWrapperRef === void 0 ? null : _ref$tableWrapperRef;
   // 互動狀態
-  var _useState = React.useState(false),
+  var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = react.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isDropdownOpen = _useState4[0],
     setIsDropdownOpen = _useState4[1];
 
   // 滑鼠進入處理
-  var handleMouseEnter = React.useCallback(function () {
+  var handleMouseEnter = react.useCallback(function () {
     setIsHovered(true);
     if (syncTableControl && currentTableRef && tableWrapperRef) {
       currentTableRef.current = tableWrapperRef.current;
@@ -2190,19 +2062,19 @@ var useTableInteraction = function useTableInteraction(_ref) {
   }, [syncTableControl, currentTableRef, tableWrapperRef]);
 
   // 滑鼠離開處理（延遲 200ms）
-  var handleMouseLeave = React.useCallback(function () {
+  var handleMouseLeave = react.useCallback(function () {
     setTimeout(function () {
       setIsHovered(false);
     }, 200);
   }, []);
 
   // Dropdown 獲得焦點處理
-  var handleDropdownFocus = React.useCallback(function () {
+  var handleDropdownFocus = react.useCallback(function () {
     setIsDropdownOpen(true);
   }, []);
 
   // Dropdown 失去焦點處理
-  var handleDropdownBlur = React.useCallback(function () {
+  var handleDropdownBlur = react.useCallback(function () {
     setIsDropdownOpen(false);
   }, []);
   return {
@@ -2236,7 +2108,7 @@ var useTableInteraction = function useTableInteraction(_ref) {
 function useThemeDetection() {
   // SSR 保護：確保只在瀏覽器環境執行
   var isBrowser = typeof window !== "undefined";
-  var _useState = React.useState({
+  var _useState = react.useState({
       hasTheme: false,
       // 是否存在主題系統
       themeId: null,
@@ -2253,7 +2125,7 @@ function useThemeDetection() {
    * @param {string} fallback - 預設值（如果找不到 CSS 變數）
    * @returns {string} - CSS 變數值或預設值
    */
-  var getCSSVariable = React.useCallback(function (varName) {
+  var getCSSVariable = react.useCallback(function (varName) {
     var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     if (!isBrowser) return fallback;
     try {
@@ -2269,7 +2141,7 @@ function useThemeDetection() {
    * 偵測主題系統是否存在
    * @returns {Object} - 主題資訊
    */
-  var detectTheme = React.useCallback(function () {
+  var detectTheme = react.useCallback(function () {
     if (!isBrowser) {
       return {
         hasTheme: false,
@@ -2296,7 +2168,7 @@ function useThemeDetection() {
   /**
    * 初始化：偵測主題並設置監聽器
    */
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!isBrowser) return;
 
     // 初始偵測
@@ -2329,7 +2201,7 @@ function useThemeDetection() {
    * 取得完整主題資訊（包含所有主題色彩）
    * @returns {Object} - 完整的主題資訊
    */
-  var getThemeInfo = React.useCallback(function () {
+  var getThemeInfo = react.useCallback(function () {
     if (!themeState.hasTheme) {
       return {
         hasTheme: false,
@@ -2377,7 +2249,7 @@ function useThemeDetection() {
   };
 }
 
-var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var UdiTable = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$current;
   var _ref$onDataRequest = _ref.onDataRequest,
     onDataRequest = _ref$onDataRequest === void 0 ? null : _ref$onDataRequest,
@@ -2421,7 +2293,7 @@ var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$defaultCollapsed = _ref.defaultCollapsed,
     defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed;
   // 摺疊狀態
-  var _useState = React.useState(defaultCollapsed),
+  var _useState = react.useState(defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
     setIsCollapsed = _useState2[1];
@@ -2442,7 +2314,7 @@ var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     getThemeInfo = _useThemeDetection.getThemeInfo;
 
   // 開發模式下顯示主題偵測資訊
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (isDev) {
       console.log('🎨 UdiTable Theme Detection:', {
         hasTheme: hasTheme,
@@ -2547,9 +2419,9 @@ var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     handleDropdownBlur = _useTableInteraction.handleDropdownBlur;
 
   //===========
-  React.useEffect(function () {
+  react.useEffect(function () {
     setTablePage === null || setTablePage === void 0 || setTablePage(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1(_defineProperty$1({}, "".concat(name, "Page"), currentPage), "".concat(name, "PageSize"), currentPageSize));
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty({}, "".concat(name, "Page"), currentPage), "".concat(name, "PageSize"), currentPageSize));
     });
   }, [currentPageSize, currentPage]);
 
@@ -2615,13 +2487,13 @@ var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // 初始載入
   //=======
-  React.useEffect(function () {
+  react.useEffect(function () {
     initialLoad(currentPageSize);
   }, []);
 
   // 監聽篩選和排序變化
   //=======
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!onDataRequest) return;
     var params = {
       page: currentPage,
@@ -2634,14 +2506,14 @@ var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
     debouncedDataRequest(params);
   }, [currentPage, currentPageSize, filterText, filterColumn, advancedFilters, sortConfig]);
-  var freeActions = React.useMemo(function () {
+  var freeActions = react.useMemo(function () {
     return actions.filter(function (action) {
       return action.isFreeAction === true;
     });
   }, [actions]);
 
   // 根據主題生成動態樣式
-  var containerStyles = React.useMemo(function () {
+  var containerStyles = react.useMemo(function () {
     if (!hasTheme) {
       // 沒有主題系統時，使用預設樣式（由 CSS 控制）
       return {};
@@ -2838,8 +2710,8 @@ var throttle$1 = function throttle(func, wait) {
  * 控制滾動同步的內部 Hook
  */
 var useControlScroll = function useControlScroll() {
-  var rafId = React.useRef(null);
-  return React.useCallback(function (sourceRef, targetRef) {
+  var rafId = react.useRef(null);
+  return react.useCallback(function (sourceRef, targetRef) {
     // 取消上一次的動畫幀
     if (rafId.current) {
       cancelAnimationFrame(rafId.current);
@@ -2919,10 +2791,10 @@ var useUdiTableSync$1 = function useUdiTableSync() {
     _options$throttleMs = options.throttleMs,
     throttleMs = _options$throttleMs === void 0 ? 10 : _options$throttleMs;
   var controlScroll = useControlScroll();
-  var mountedRef = React.useRef(false);
+  var mountedRef = react.useRef(false);
 
   // 分頁同步邏輯
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!enabled || !syncPagination) return;
     if (!(importedTableRef !== null && importedTableRef !== void 0 && importedTableRef.current) || !(originalTableRef !== null && originalTableRef !== void 0 && originalTableRef.current)) return;
 
@@ -2930,7 +2802,7 @@ var useUdiTableSync$1 = function useUdiTableSync() {
     controlPagination(importedTableRef, originalTableRef);
     controlPagination(originalTableRef, importedTableRef);
   }, [enabled, syncPagination, importedTableRef, originalTableRef].concat(_toConsumableArray(paginationDeps)));
-  var handleTableMount = React.useCallback(function () {
+  var handleTableMount = react.useCallback(function () {
     var _importedTableRef$cur, _originalTableRef$cur;
     var importedTableElement = importedTableRef === null || importedTableRef === void 0 || (_importedTableRef$cur = importedTableRef.current) === null || _importedTableRef$cur === void 0 ? void 0 : _importedTableRef$cur.getState().tableWrapperRef;
     var originalTableElement = originalTableRef === null || originalTableRef === void 0 || (_originalTableRef$cur = originalTableRef.current) === null || _originalTableRef$cur === void 0 ? void 0 : _originalTableRef$cur.getState().tableWrapperRef;
@@ -2986,7 +2858,7 @@ var useUdiTableSync$1 = function useUdiTableSync() {
   }, [importedTableRef, originalTableRef, controlScroll, correctionDelay, throttleMs]);
 
   // 統一的掛載邏輯（帶重試機制）- 僅用於滾動同步
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!enabled || !syncScroll) {
       return;
     }
@@ -3146,20 +3018,20 @@ var useUdiTableSync = function useUdiTableSync() {
     }
   });
   // 存儲所有已註冊的表格
-  var registeredTablesRef = React.useRef(new Map());
+  var registeredTablesRef = react.useRef(new Map());
   // 存儲滾動處理函數
-  var handlersRef = React.useRef(new Map());
+  var handlersRef = react.useRef(new Map());
   // 存儲修正 timer
-  var timersRef = React.useRef(new Map());
+  var timersRef = react.useRef(new Map());
   // RAF ID
-  var rafIdRef = React.useRef(null);
+  var rafIdRef = react.useRef(null);
   // 防止循環同步的鎖
-  var isSyncingRef = React.useRef(false);
+  var isSyncingRef = react.useRef(false);
 
   /**
    * 分頁同步邏輯 - 處理所有表格的分頁同步
    */
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!enabled || !syncPagination || tables.length < 2) return;
 
     // 檢查所有表格的 ref 是否存在
@@ -3191,7 +3063,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 同步滾動位置到其他所有表格
    */
-  var syncToOthers = React.useCallback(function (sourceId) {
+  var syncToOthers = react.useCallback(function (sourceId) {
     if (!enabled || !syncScroll || isSyncingRef.current) return;
     var sourceTable = registeredTablesRef.current.get(sourceId);
     if (!sourceTable) return;
@@ -3242,7 +3114,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 註冊單個表格
    */
-  var registerTable = React.useCallback(function (id, ref) {
+  var registerTable = react.useCallback(function (id, ref) {
     var _ref$current;
     if (!enabled || !syncScroll) {
       console.warn("滾動同步未啟用");
@@ -3296,7 +3168,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 註銷單個表格
    */
-  var unregisterTable = React.useCallback(function (id) {
+  var unregisterTable = react.useCallback(function (id) {
     var table = registeredTablesRef.current.get(id);
     if (!table) return false;
     var handler = handlersRef.current.get(id);
@@ -3324,7 +3196,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 帶重試機制的註冊
    */
-  var registerWithRetry = React.useCallback(function (id, ref) {
+  var registerWithRetry = react.useCallback(function (id, ref) {
     var retryCount = 0;
     var retryTimer = null;
     var _attemptRegister = function attemptRegister() {
@@ -3350,7 +3222,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 註冊所有表格（滾動同步）
    */
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!enabled || !syncScroll || tables.length === 0) {
       return;
     }
@@ -3375,7 +3247,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 組件卸載時清理所有資源
    */
-  React.useEffect(function () {
+  react.useEffect(function () {
     return function () {
       // 取消 RAF
       if (rafIdRef.current) {
@@ -3405,14 +3277,14 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 獲取已註冊的表格列表
    */
-  var getRegisteredTables = React.useCallback(function () {
+  var getRegisteredTables = react.useCallback(function () {
     return Array.from(registeredTablesRef.current.keys());
   }, []);
 
   /**
    * 手動觸發滾動同步
    */
-  var manualSync = React.useCallback(function (sourceId) {
+  var manualSync = react.useCallback(function (sourceId) {
     if (syncScroll) {
       syncToOthers(sourceId);
     }
@@ -3421,7 +3293,7 @@ var useUdiTableSync = function useUdiTableSync() {
   /**
    * 手動觸發分頁同步
    */
-  var manualSyncPagination = React.useCallback(function () {
+  var manualSyncPagination = react.useCallback(function () {
     if (!syncPagination || tables.length < 2) return;
     var hoveredTable = tables.find(function (table) {
       var _table$ref3;
@@ -3446,17 +3318,244 @@ var useUdiTableSync = function useUdiTableSync() {
   };
 };
 
-function test(name) {
-  return "Hello, ".concat(name, "! this is a test 1208");
+function useDateRangePicker(tableRef, notify) {
+  //============若未來沒bug的話可以刪除
+  //
+  // {{
+  // const [startDate, setStartDate] = useState('');
+  // const [endDate, setEndDate] = useState('');
+  // const [startTimeStamp, setStartTimeStamp] = useState(0);
+  // const [endTimeStamp, setEndTimeStamp] = useState(0);
+
+  //原訂功能:加載頁面後在useEffect中進行日期初始化後戳api,
+  //修改原因:修改為直接在useState就初始化,而首次加載頁面本來就會戳api,應用不明
+
+  // const defaultSet = () => {
+  //     setStartDate(getStartOfDay);
+  //     setEndDate(getEndOfDay);
+  //     setStartTimeStamp(getStartOfDay.unix());
+  //     setEndTimeStamp(getEndOfDay.unix());
+  //     tableRef.current.onQueryChange();
+  // };
+  // }}
+
+  var getStartOfDay = moment().startOf('day');
+  var getEndOfDay = moment().endOf('day');
+  var _useState = react.useState(getStartOfDay),
+    _useState2 = _slicedToArray(_useState, 2),
+    startDate = _useState2[0],
+    setStartDate = _useState2[1];
+  var _useState3 = react.useState(getEndOfDay),
+    _useState4 = _slicedToArray(_useState3, 2),
+    endDate = _useState4[0],
+    setEndDate = _useState4[1];
+  var _useState5 = react.useState(getStartOfDay.unix()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    startTimeStamp = _useState6[0],
+    setStartTimeStamp = _useState6[1];
+  var _useState7 = react.useState(getEndOfDay.unix()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    endTimeStamp = _useState8[0],
+    setEndTimeStamp = _useState8[1];
+
+  //如果選擇的起始日期在結束日期之後，則結束日期會自動變成起始日期的後一天
+  var handleStartChange = function handleStartChange(value, callback) {
+    var _tableRef$current;
+    var startTimestamp = moment(value).unix();
+    if (endTimeStamp > startTimestamp) {
+      setStartDate(value);
+      setStartTimeStamp(startTimestamp);
+    } else {
+      setStartDate(value);
+      setStartTimeStamp(startTimestamp);
+      setEndDate(moment(value).add(1, 'day'));
+      setEndTimeStamp(moment(value).add(1, 'day').unix());
+    }
+    tableRef === null || tableRef === void 0 || (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 || _tableRef$current.onQueryChange();
+  };
+
+  //如果選擇的結束日期在起始日期以前，則不變更值並且跳出error message
+  var handleEndChange = function handleEndChange(value) {
+    var startTimestamp = moment(startDate).unix();
+    var setEndTimestampValue = moment(value).unix();
+    if (setEndTimestampValue > startTimestamp) {
+      var _tableRef$current2;
+      setEndDate(value);
+      setEndTimeStamp(setEndTimestampValue);
+      tableRef === null || tableRef === void 0 || (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 || _tableRef$current2.onQueryChange();
+    } else {
+      notify(tr('End Date Set Error'), /*#__PURE__*/jsxRuntime.jsx(fa.FaClock, {
+        color: "#FF4C4C",
+        fontSize: "20"
+      }));
+    }
+  };
+  return {
+    // defaultSet,    ============若未來沒bug的話可以刪除
+    handleEndChange: handleEndChange,
+    handleStartChange: handleStartChange,
+    setStartDate: setStartDate,
+    setEndDate: setEndDate,
+    setStartTimeStamp: setStartTimeStamp,
+    setEndTimeStamp: setEndTimeStamp,
+    startDate: startDate,
+    endDate: endDate,
+    startTimeStamp: startTimeStamp,
+    endTimeStamp: endTimeStamp
+  };
+}
+
+function timestampFormat() {
+  var timestamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD HH:mm:ss';
+  return timestamp ? moment(timestamp).format(format) : moment().format(format);
+}
+
+function DateRangePicker(_ref) {
+  var _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === void 0 ? true : _ref$showTitle,
+    pickerSize = _ref.pickerSize,
+    handleStartChange = _ref.handleStartChange,
+    handleEndChange = _ref.handleEndChange,
+    classes = _ref.classes,
+    startDate = _ref.startDate,
+    endDate = _ref.endDate;
+  classes = classes || {
+    marginT8: {
+      marginTop: "8px"
+    },
+    marginB10: {
+      marginBottom: "10px"
+    },
+    gridStyle: {
+      textAlign: "right",
+      color: "#404040"
+    },
+    labelStyle: {
+      fontWeight: "bold",
+      marginLeft: 0,
+      paddingTop: "5%",
+      width: "100%"
+    },
+    textAlignLeft: {
+      textAlign: "left"
+    },
+    uploadForm: {
+      padding: "2rem",
+      marginTop: "1rem",
+      backgroundColor: "#d3d3d391",
+      borderRadius: "3px",
+      width: "100%"
+    },
+    uploadIcon: {
+      fontSize: "3rem",
+      marginTop: "5px",
+      marginLeft: "5px",
+      marginRight: "10px"
+    },
+    buttonStyle: {
+      placeSelf: "flex-end"
+    },
+    marginTop10: {
+      marginTop: "10px !important"
+    },
+    hospitalTitle: {
+      marginTop: "1rem"
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [showTitle && /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      item: true,
+      container: true,
+      xs: 12,
+      sm: 2,
+      md: 1,
+      className: "".concat(classes.gridStyle, " ").concat(classes.marginB10, " ").concat(classes.textAlignLeft),
+      style: {
+        textAlign: "right"
+      },
+      alignContent: "center",
+      children: /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+        variant: "h6",
+        className: classes.labelStyle,
+        children: [tr("Date"), "\uFF1A"]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      item: true,
+      container: true,
+      xs: (pickerSize === null || pickerSize === void 0 ? void 0 : pickerSize.xs) || 12,
+      sm: (pickerSize === null || pickerSize === void 0 ? void 0 : pickerSize.sm) || 6,
+      md: (pickerSize === null || pickerSize === void 0 ? void 0 : pickerSize.md) || 4,
+      className: classes.marginB10,
+      children: /*#__PURE__*/jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, {
+        dateAdapter: AdapterDateFns.AdapterDateFns,
+        children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+          container: true,
+          justifyContent: "center",
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+            item: true,
+            sm: 6,
+            style: {
+              width: "100%",
+              padding: 10
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(MobileDateTimePicker.MobileDateTimePicker, {
+              label: tr("Start Date"),
+              value: timestampFormat(startDate, "YYYY/MM/DD HH:mm"),
+              inputFormat: "yyyy/MM/dd HH:mm",
+              onChange: handleStartChange,
+              renderInput: function renderInput(params) {
+                return /*#__PURE__*/jsxRuntime.jsx(material.TextField, _objectSpread2(_objectSpread2({}, params), {}, {
+                  fullWidth: true
+                }));
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+            item: true,
+            sm: 6,
+            style: {
+              width: "100%",
+              padding: 10
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(MobileDateTimePicker.MobileDateTimePicker, {
+              label: tr("End Date"),
+              value: timestampFormat(endDate, "YYYY/MM/DD HH:mm"),
+              inputFormat: "yyyy/MM/dd HH:mm",
+              onChange: handleEndChange,
+              renderInput: function renderInput(params) {
+                return /*#__PURE__*/jsxRuntime.jsx(material.TextField, _objectSpread2(_objectSpread2({}, params), {}, {
+                  fullWidth: true
+                }));
+              }
+            })
+          })]
+        })
+      })
+    })]
+  });
 }
-function add(a, b) {
-  return a + b;
+DateRangePicker.propTypes = {
+  handleStartChange: PropTypes.func.isRequired,
+  handleEndChange: PropTypes.func.isRequired,
+  classes: PropTypes.shape({
+    marginB10: PropTypes.string,
+    gridStyle: PropTypes.string,
+    labelStyle: PropTypes.string,
+    textAlignLeft: PropTypes.string
+  }).isRequired,
+  startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object, PropTypes.string]).isRequired,
+  endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object, PropTypes.string]).isRequired
+};
+
+function releaseUpdateTest() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'test';
+  return "Hello, ".concat(name, "! this is a test 02/10-1");
 }
 
-exports.Button = Button;
+exports.DateRangePicker = DateRangePicker;
 exports.UdiTable = UdiTable;
-exports.add = add;
-exports.test = test;
+exports.releaseUpdateTest = releaseUpdateTest;
+exports.useDateRangePicker = useDateRangePicker;
 exports.useUdiTableSync = useUdiTableSync$1;
 exports.useUdiTableSyncMutipleTable = useUdiTableSync;
 //# sourceMappingURL=index.cjs.js.map