jrs-react 1.2.14 → 1.2.16

package/build/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('styled-components');
+var client = require('react-dom/client');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3543,6 +3544,8 @@ class JRSubmit extends React__default["default"].Component {
       const fullnamList = fullname.split('.');
       return this.#getValueByName(fullnamList, this[this.from]?.value);
     } else {
+      // po('ssssssssssssssssssssssssssssssssssssssssss')
+      // 忘記為甚麼這樣寫了 XDD
       return flexType(this[this.from]?.value, this, null, null);
     }
   }
@@ -3698,7 +3701,7 @@ class JRSubmit extends React__default["default"].Component {
   }
 }
 
-const FreeType$1 = ({
+const FreeType = ({
   tag: Tag,
   config,
   me,
@@ -3722,7 +3725,7 @@ const FreeType$1 = ({
     }, config);
   }
 };
-const StyledJRFrame$1 = styled__default["default"].div`
+const StyledJRFrame = styled__default["default"].div`
     display:flex;
     flex:1;
     overflow:hidden;
@@ -3765,36 +3768,36 @@ const StyledJRFrame$1 = styled__default["default"].div`
 `;
 class JRFrame extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame$1, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame, {
       id: this.props.id,
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.start,
       me: this,
       className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "header",
       config: this.props.top,
       me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.left,
       me: this,
       className: 'left'
     }), /*#__PURE__*/React__default["default"].createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.right,
       me: this,
       className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "footer",
       config: this.props.bottom,
       me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.end,
       me: this,
@@ -3803,1291 +3806,1502 @@ class JRFrame extends JRSubmit {
   }
 }
 
-const StyledSlider$1 = styled__default["default"].div`
-    position: absolute;
-    top: 0;
-    right: 0;
-    height:100%;
-    width:6px;
+var _path;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgX = function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M18 6 6 18M6 6l12 12"
+  })));
+};
+
+function JRButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/React__default["default"].createElement("button", props, icon, children);
+}
+
+const StyledTitle = styled__default["default"].div`
+    overflow: hidden;
+    display: flex;
+    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
+    background:#464646;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: min-content;
+    XX&:active{
+        cursor: grabbing;
+    }
+    
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
     user-select: none;
-    &.resizing:hover,&.resizing{
-        border-right:1px dashed black;
+
+    > .title{
+
+        flex: 1;
+        padding:2px 0 2px 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
-    &:hover{
-        cursor: col-resize;
-        border-right:1px dashed gray;
+    > nav{
+        display: flex;
+        align-items: anchor-center;
+
+
+        >button{
+            outline: unset;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            border: unset;
+            background: unset;
+            cursor: pointer;
+            width:32px;
+            height:32px;
+            xborder:1px solid green;
+            padding: 0;
+            margin: 0;
+            &:hover{
+                background: #bbbbbb;
+                color:white;
+            }
+            >svg{
+                color:#bababa;
+                width:14px;
+                height:14px;
+                cursor: pointer;
+                stroke-width: 3;
+            }
+        }
+        >button.danger:hover{
+            background: red;
+            >svg{
+                color:white;
+            }
+        } 
     }
 `;
-class Slider$1 extends React__default["default"].Component {
-  constructor() {
-    super();
-    this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
-  }
+class TitleBar extends React__default["default"].Component {
+  pos1 = 0;
+  pos2 = 0;
+  pos3 = 0;
+  pos4 = 0;
+  x = 0;
+  y = 0;
+  remember = e => {
+    po('remember');
+    const {
+      clientX,
+      clientY
+    } = e;
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    this.props.window.orgHeight = height;
+    this.props.window.orgWidth = width;
+    this.props.window.orgTop = y;
+    this.props.window.orgLeft = x;
+    this.props.window.orgXd = clientX - x;
+    this.props.window.orgBodyOverflow = document.body.style.overflow;
+  };
+  adjustScreen = e => {
+    po('double click adjustScreen');
+    e.preventDefault();
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    if (y > 1 - this.props.thick) {
+      this.remember(e);
+      this.fullScreen(e);
+    } else {
+      this.floatScreen(e);
+    }
+  };
+  floatScreen = e => {
+    po('floatScreen');
+    this.props.windowRef.current;
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
+    this.props.windowRef.current.style.left = `${this.props.window.orgLeft}px`;
+    this.props.windowRef.current.style.top = `${this.props.window.orgTop}px`;
+    this.props.windowRef.current.style.width = `${this.props.window.orgWidth}px`;
+    this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
+    document.body.style.overflow = this.props.window.orgBodyOverflow;
+  };
+  fullScreen = e => {
+    po('fullScreen', this.props.thick);
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
+    this.props.windowRef.current.style.left = `${-this.props.thick}px`;
+    this.props.windowRef.current.style.top = `${-this.props.thick}px`;
+    this.props.windowRef.current.style.width = `calc(100vw + ${this.props.thick * 2}px)`; //`${window.innerWidth+(this.props.thick*2)}px`
+    this.props.windowRef.current.style.height = `calc(100vh + ${this.props.thick * 2}px)`; //`${window.innerHeight+(this.props.thick*2)}px`
+
+    setTimeout(() => {
+      document.body.style.overflow = 'hidden';
+      this.props.windowRef.current.style.transition = 'unset';
+    }, 50);
+  };
   stop = e => {
-    this.sliderRef.current.classList.remove('resizing');
+    po('stop');
+    e.preventDefault();
+    if (this.moved) {
+      const {
+        height: titleBarHeight
+      } = this.props.titleBarRef.current.getBoundingClientRect();
+      const {
+        x,
+        y,
+        width,
+        height
+      } = this.props.windowRef.current.getBoundingClientRect();
+      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y > window.innerHeight - titleBarHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
+      if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
+      if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
+    }
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
+    window.removeEventListener('mousemove', this.preMove);
   };
-  move = ({
-    clientX
-  }) => {
-    const {
-      th,
-      selectedCols,
-      widthRates
-    } = this.data;
+  move = e => {
+    po('move');
+    e.preventDefault();
+    this.moved = true;
     const {
-      left
-    } = th.getBoundingClientRect();
-    const min = left + 10;
-    const x = clientX >= min ? clientX : min;
-    const width = x - left;
-    selectedCols.forEach((col, index) => {
-      const _width = Math.round(width / 100 * widthRates[index]);
-      col.style.width = _width + 'px';
-    });
-  };
-  start(thPRef, column) {
-    const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
-    const totalWidth = selectedCols.reduce((aco, {
-      offsetWidth
-    }) => aco + offsetWidth, 0);
-    const widthRates = selectedCols.map(({
-      offsetWidth
-    }) => {
-      return 100 * (offsetWidth / totalWidth);
-    });
-    this.data = {
-      selectedCols,
-      th: thPRef.current,
-      widthRates
-    };
-    this.sliderRef.current.classList.add('resizing');
-    document.body.style.cursor = 'col-resize';
-    window.addEventListener('mousemove', this.move);
-    window.addEventListener('mouseup', this.stop);
-  }
-  render() {
-    const column = this.props.column;
-    return /*#__PURE__*/React__default["default"].createElement(StyledSlider$1, {
-      ref: this.sliderRef,
-      onMouseDown: e => {
-        this.start(this.props.thRef, column);
-      }
-    });
-  }
-}
+      clientX,
+      clientY
+    } = e;
+    const y = clientY < 1 ? 0 : clientY;
+    this.pos1 = this.pos3 - clientX;
+    this.pos2 = this.pos4 - y;
+    this.pos3 = clientX;
+    this.pos4 = y;
+    const w = this.props.windowRef.current;
+    this.y = w.offsetTop - this.pos2;
+    this.x = w.offsetLeft - this.pos1;
 
-const Colgroup = ({
-  leafColumns,
-  colGroupRef
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement("colgroup", {
-    ref: colGroupRef
-  }, leafColumns?.map((_column, index) => {
-    const {
-      width,
-      ...column
-    } = _column;
-    const style = {
-      width
-    };
-    return /*#__PURE__*/React__default["default"].createElement("col", {
-      style: style,
-      key: index
-    });
-  }));
-};
-const Ths$1 = ({
-  deep,
-  rowColumn,
-  rowIndex,
-  table
-}) => {
-  return rowColumn?.map((column, colIndex) => {
-    const thRef = /*#__PURE__*/React__default["default"].createRef();
-    return /*#__PURE__*/React__default["default"].createElement("th", {
-      key: colIndex,
-      ref: thRef,
-      colSpan: column.colSpan,
-      rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
-    }, flexType(column.label, table), (table.props.resizableColumns === undefined || table.props.resizableColumns) && /*#__PURE__*/React__default["default"].createElement(Slider$1, {
-      table: table,
-      thRef: thRef,
-      column: column
-    }));
-  });
-};
-const HeadTrs = ({
-  columns: _columns,
-  trClassName,
-  table
-}) => {
-  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
-  return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement("tr", {
-      className: trClassName,
-      key: rowIndex
-    }, /*#__PURE__*/React__default["default"].createElement(Ths$1, {
-      deep: columns.length - 1,
-      rowColumn: rowColumn,
-      rowIndex: rowIndex,
-      table: table
-    }));
-  });
-};
-const THead = ({
-  columns,
-  leafColumns,
-  table
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement(HeadTrs, {
-    columns: columns,
-    table: table
-  })), /*#__PURE__*/React__default["default"].createElement(Colgroup, {
-    leafColumns: leafColumns,
-    colGroupRef: table.colGroupRef
-  }));
-};
-const FootThs = ({
-  table,
-  groupData,
-  groupIndex,
-  deep,
-  columns,
-  rowIndex
-}) => {
-  return columns?.map((column, colIndex) => {
-    // let content
-    // if(type){
-    //     content='type'
-    // }else if(render){
-
-    //     content=render?.bind(table)({groupData,groupIndex,ths:111})
-    // }else{
-    //     content=column.label
+    // if(this.props.window.orgWidth){
+    //     w.style.width=`${this.props.window.orgWidth}px`
+    //     this.props.window.orgWidth=null
     // }
-    let style = flexType(column.style, table, {}, {});
-    const content = whatType(column, table, column.label);
-    return /*#__PURE__*/React__default["default"].createElement("th", {
-      style: style,
-      colSpan: column.colSpan,
-      rowSpan: column.rowSpan
-    }, content);
-  });
-};
-const TFoot = ({
-  table,
-  columns
-}) => {
-  const trs = columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement("tr", {
-      key: rowIndex
-    }, /*#__PURE__*/React__default["default"].createElement(FootThs, {
-      columns: rowColumn,
-      table: table
-    }));
-  });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tfoot", null, trs));
-};
-
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1.apply(null, arguments);
-}
-
-styled__default["default"].tbody`
-    th{
-        height:4px;
-        background:#c6c6c6;
-    }
-`;
-
-////////////////////////////////////////////////////////////////////////////
 
-const Ths = ({
-  table,
-  groupData,
-  groupIndex,
-  deep,
-  rowColumn,
-  rowIndex
-}) => {
-  return rowColumn?.map(({
-    style: _style,
-    align,
-    type,
-    render,
-    ...column
-  }, colIndex) => {
-    const style = flexType(_style, table, {}, {});
-    let content;
-    if (type) {
-      content = 'type';
-    } else if (render) {
-      content = render?.bind(table)({
-        groupData,
-        groupIndex,
-        ths: 111
-      });
+    this.y = this.y < -this.props.thick ? -this.props.thick : this.y;
+    w.style.transition = 'unset';
+    w.style.top = `${this.y}px`;
+    w.style.left = `${this.x}px`;
+  };
+  preMove = e => {
+    console.clear();
+    po('preMove');
+    const w = this.props.windowRef.current;
+    const {
+      clientX,
+      clientY,
+      ...oe
+    } = e;
+    po('e', e);
+    const {
+      x,
+      y,
+      width,
+      height
+    } = w.getBoundingClientRect();
+    po('width', width);
+    if (y <= -this.props.thick) ;
+    w.style.transition = 'left .05s ease-in, height .05s ease-in';
+    if (y <= 0) {
+      // contt browserWidth=
+      const w1 = window.innerWidth - this.props.thick * 2;
+      const x1 = clientX;
+      const w2 = this.props.window.orgWidth - 32;
+      const x2 = x1 / w1 * w2;
+      // po('xp'   , x2)
+      w.style.left = `${clientX - x2}px`;
+      w.style.width = `${this.props.window.orgWidth}px`;
+      w.style.height = `${this.props.window.orgHeight}px`;
     } else {
-      content = column.label;
+      this.remember(e);
     }
-    // style.textAlign=align
-    return /*#__PURE__*/React__default["default"].createElement("th", {
-      key: colIndex,
-      style: {
-        textAlign: align,
-        ...style
+    document.body.style.cursor = 'grabbing';
+    document.body.style.overflow = this.props.window.orgBodyOverflow;
+    setTimeout(() => {
+      window.addEventListener('mousemove', this.move);
+    }, 50);
+    window.removeEventListener('mousemove', this.preMove);
+  };
+  start(e) {
+    po('start');
+    e.preventDefault();
+    this.moved = false;
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
+    window.addEventListener('mousemove', this.preMove);
+    window.addEventListener('mouseup', this.stop);
+  }
+  onDoubleClick() {
+    po('onDoubleClick');
+  }
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+      ref: this.props.titleBarRef,
+      draggable: "false",
+      onMouseDown: e => {
+        this.start(e);
       },
-      colSpan: column.colSpan,
-      rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
-    }, content);
-  });
-};
-const GroupColumns = ({
-  table,
-  columns: _columns,
-  trClassName,
-  groupData,
-  tbodyIndex
-}) => {
-  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
-  return columns?.map((rowColumn, rowIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement("tr", {
-      className: trClassName,
-      key: rowIndex
-    }, /*#__PURE__*/React__default["default"].createElement(Ths, {
-      table: table,
-      groupData: groupData,
-      groupIndex: tbodyIndex,
-      deep: columns.length - 1,
-      rowColumn: rowColumn,
-      rowIndex: rowIndex
-    }));
-  });
-};
-styled__default["default"].tr`
-    z-index: 1;
-    XXposition: sticky;
-    XXtop: 50px;
-    th{
-        text-align: left;
-        border:1px solid #222222;
-    }
-`;
-const GroupHeader = props => {
-  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends$1({
-    trClassName: 'jr-group-header'
-  }, props));
-};
-styled__default["default"].tr`
-    th{
-        border:1px solid #222222;
-        text-align: left;
-    }
-`;
-const GroupFooter = props => {
-  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends$1({
-    trClassName: 'jr-group-footer'
-  }, props));
-};
+      onDoubleClick: this.adjustScreen
+    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      tag: "div",
+      config: this.props.title ?? '',
+      me: this.props.window,
+      className: 'title'
+    }), /*#__PURE__*/React__default["default"].createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default["default"].createElement(JRButton, {
+      icon: /*#__PURE__*/React__default["default"].createElement(SvgX, null),
+      className: 'danger',
+      onClick: e => {
+        e.stopPropagation();
+        if (this.props.window.orgBodyOverflow != null) {
+          document.body.style.overflow = this.props.window.orgBodyOverflow;
+        }
+        this.props.window.props.setOpen(false);
+      },
+      onMouseDown: e => {
+        e.stopPropagation();
+      }
+    }) : null));
+  }
+}
 
-////////////////////////////////////////////////////////////////////////////
-const Td = ({
-  column: _column,
-  record,
-  tbodyIndex,
-  trIndex,
-  tdIndex,
-  table
-}) => {
-  let content;
-  const {
-    style: _style,
-    align,
-    vAlign = 'baseline',
-    type,
-    typeStyle: _typeStyle,
-    render,
-    setValue,
-    getValue,
-    onChange: _onChange,
-    funcProps,
-    ...column
-  } = _column;
-  const onChange = inputValue => {
-    const targetValue = inputValue?.target?.value ?? inputValue;
-    setValue(record, targetValue);
-    table.setValue(table.getValue());
-  };
-  const value = getValue(record);
-  let style = render ? {} : flexType(_style, table, {
-    value,
-    record
-  }, {});
-  const setStyle = _style => {
-    style = _style;
-  };
-  setStyle.bind(table);
-  render?.bind(table);
-  if (type) {
-    const typeStyle = flexType(_typeStyle, table, {
-      record
-    }, {});
-    content = /*#__PURE__*/React__default["default"].createElement(type, {
-      onChange: _onChange ? e => {
-        _onChange?.bind(table)(e, {
-          value,
-          onChange,
-          me: content
-        });
-      } : onChange,
-      value,
-      style: typeStyle,
-      render,
-      ...column,
-      ...funcProps?.bind(table)({
-        value
-      })
-    });
-  } else if (render) {
-    content = render({
-      index: trIndex,
-      groupIndex: tbodyIndex,
-      value,
-      record,
-      onChange,
-      setStyle
-    });
-  } else {
-    content = value;
+const directions = ['n', 'e', 's', 'w', 'nww', 'nnw', 'nne', 'nee', 'sse', 'see', 'sww', 'ssw'];
+class Sliders extends React__default["default"].Component {
+  render() {
+    return directions.map((direction, index) => /*#__PURE__*/React__default["default"].createElement(Slider$1, {
+      direction: direction,
+      thick: this.props.thick,
+      windowRef: this.props.windowRef,
+      window: this.props.window,
+      titleBarRef: this.props.titleBarRef,
+      key: index
+    }));
   }
-  return /*#__PURE__*/React__default["default"].createElement("td", {
-    colSpan: style.colSpan,
-    rowSpan: style.rowSpan,
-    style: {
-      textAlign: align,
-      verticalAlign: vAlign,
-      ...style
-    },
-    key: tdIndex
-  }, content);
-};
-const Tds = ({
-  leafColumns,
-  record,
-  table,
-  tbodyIndex,
-  trIndex
-}) => {
-  return leafColumns?.map((column, tdIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement(Td, {
-      column: column,
-      key: tdIndex,
-      record: record,
-      table: table,
-      tbodyIndex: tbodyIndex,
-      trIndex: trIndex,
-      tdIndex: tdIndex
-    });
-  });
-};
-////////////////////////////////////////////////////////////////////////////
+}
+const StyledSlider$1 = styled__default["default"].div`
+    Xborder:1px solid ${({
+  $direction: {
+    color
+  }
+}) => color}; 
+    Xbackground:${({
+  $direction: {
+    color
+  }
+}) => color};
+    position: absolute;
+    top: ${({
+  $direction: {
+    top
+  }
+}) => top};
+    bottom: ${({
+  $direction: {
+    bottom
+  }
+}) => bottom};
+    right: ${({
+  $direction: {
+    right
+  }
+}) => right};
+    left: ${({
+  $direction: {
+    left
+  }
+}) => left};
+    height: ${({
+  $direction: {
+    height
+  }
+}) => height};
+    width: ${({
+  $direction: {
+    width
+  }
+}) => width};
+    cursor: ${({
+  $direction: {
+    cursor
+  }
+}) => cursor};
 
-const TBody = ({
-  groupData,
-  groupHeader,
-  leafColumns,
-  groupFooter,
-  table,
-  tbodyIndex
-}) => {
-  const neededProps = {
-    table,
-    tbodyIndex
-  };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tbody", {
-    key: `tbody${tbodyIndex}`
-  }, groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupHeader, _extends$1({
-    groupData: groupData,
-    columns: groupHeader
-  }, neededProps)), groupData?.map?.((record, trIndex) => {
-    const onRowClick = table.props.onRowClick?.bind(table);
-    return /*#__PURE__*/React__default["default"].createElement("tr", {
-      key: trIndex,
-      onClick: () => {
-        onRowClick?.({
-          record,
-          index: trIndex,
-          groupIndex: tbodyIndex
-        });
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(Tds, _extends$1({
-      record: record,
-      trIndex: trIndex
-    }, neededProps, {
-      leafColumns: leafColumns
-    })));
-  }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends$1({
-    groupData: groupData,
-    columns: groupFooter
-  }, neededProps))));
-};
-const TBodies = ({
-  groupHeader,
-  leafColumns,
-  groupFooter,
-  dataSource: _dataSource,
-  table
-}) => {
-  // po('--TBodies--')
-  const isGroupDataType = Array.isArray(_dataSource?.[0]);
-  const dataSource = isGroupDataType ? _dataSource : [_dataSource];
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 
-  // po('dataSource',dataSource)    
-  return dataSource?.map((groupData, tbodyIndex, c) => {
-    return /*#__PURE__*/React__default["default"].createElement(TBody, {
-      key: `tbody${tbodyIndex}`,
-      table: table
-      // dataSource={dataSource}
-      // dataGroup={groupData} 
-      ,
-      groupData: groupData,
-      tbodyIndex: tbodyIndex,
-      groupHeader: groupHeader,
-      leafColumns: leafColumns,
-      groupFooter: groupFooter
-    });
-  });
-};
-
-const StyledJRTable = styled__default["default"].div`
-    --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
-    --column-b-hover-color:#ffffff;
-
-    position: relative;
-    background: var(--column-b-color);
-    border:1px solid var(--column-bd-color);
-
-    display:flex;
-    flex-direction: column;
-    flex:1;
-    overflow: overlay;
-
-
-
-
-    &.row-highlightable{
-        tbody{
-            tr:not(.jr-group-header,.jr-group-footer):hover{
-                background:var(--column-b-hover-color);
-                cursor: pointer;
-                transition:  background-color .8s;
-                td{
-                    color:black;
-                    transition:color .8s;
-                }
-
-            }
-        }
-    }
-
-    table{
-        Xheight: 100%;
-        min-width:100%;
-        width: max-content;
-        border-spacing: 0;
-
-        thead{
-            position: sticky;
-            top: 0;
-
-            th{
-                position: relative;
-                padding: 2px 6px;
-                background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
-                color: #525252;
-                white-space: nowrap;
-            }
-        }
-
-        tfoot{
-            position: sticky;
-            bottom: -1px;
-
-            Xtr:nth-child(1){
-                th{
-                    Xborder-top:1px solid var(--column-bd-color);
-                }
-            }
-            Xth:nth-child(1){
-                Xborder-left:1px solid var(--column-bd-color);
-            }
-                
-            th{
-                height:32px;
-                padding: 4px;
-                background: #e4e4e4;
-                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
-                color: #525252;
-                white-space: nowrap;
-
-                border-left:2px solid #f4f4f4;
-                border-top:2px solid #f4f4f4;
-                border-right:2px solid var(--column-bd-color);
-                border-bottom:2px solid var(--column-bd-color);
-            }
-        }
-
-        tbody{
-            tr{
-                transition: background .3s linear;
-                background:var(--column-b-color);
-                a:#ededed;
-                th{
-                    color:#444444;
-                }
-                td{
-                    border-bottom: 1px solid var(--column-bd-color);
-                    color:#2e2e2e;
-                    padding: 4px;
-                }
-            }
-            tr:hover{
-                background:var(--column-b-hover-color);
-                
-            }
-            
-            tr.jr-group-header
-            ,tr.jr-group-footer{
-                text-align:left;
-                background:#dddbdb;
-
-                th{
-                    border-bottom: 1px solid var(--column-bd-color);
-                    border-right: 1px solid var(--column-bd-color);
-                    padding: 4px 8px;
-                }
-            }
-        }
-        tbody.empty-tbody{
-            td{
-                border:10px solid red;
-            }
-        }
-    } 
-        
-    
-
-
-    > .empty{
-        user-select: none;
-        color:#848484;
-        height:100%;
-        flex:1;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-
-        
-    }    
-
-    > .empty::after{
-        content:'無資料';
-        position: block;
+`;
+class Slider$1 extends React__default["default"].Component {
+  width = '3px';
+  borderWidth = 'px';
+  borderLong = 5;
+  constructor(props) {
+    super(props);
+    this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
+  }
+  directions = {
+    n: {
+      top: 0,
+      color: 'red',
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 'n-resize',
+      resize: props => {
+        this.resizeN(props);
+      }
+    },
+    e: {
+      color: 'yellow',
+      right: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'e-resize',
+      resize: props => {
+        this.resizeE(props);
+      }
+    },
+    s: {
+      color: 'blue',
+      bottom: 0,
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 's-resize',
+      resize: props => {
+        this.resizeS(props);
+      }
+    },
+    w: {
+      color: 'green',
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'w-resize',
+      resize: props => {
+        this.resizeW(props);
+      }
+    },
+    nw: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.borderLong}px`,
+      height: `${this.borderLong}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nww: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nnw: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nne: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    nee: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    sse: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    see: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    ssw: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: `${this.props.thick + this.borderLong}px`,
+      height: `${this.props.thick}px`,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
+      }
+    },
+    sww: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: `${this.props.thick + this.borderLong}px`,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
+      }
     }
-
-`;
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M18 6 6 18M6 6l12 12"
-  })));
-};
-
-function JRButton({
-  icon,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/React__default["default"].createElement("button", props, icon, children);
-}
-
-const StyledTitle = styled__default["default"].div`
-    overflow: hidden;
-    display: flex;
-    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
-    background:#464646;
-    color: white;
-    display: flex;
-    align-items: center;
-    min-height: min-content;
-    XX&:active{
-        cursor: grabbing;
+  };
+  resizeN = ({
+    window,
+    cursorY,
+    startY,
+    startHeight,
+    titleBarHeight
+  }) => {
+    let y = cursorY - this.props.thick;
+    if (y < 0) y = 0;
+    let height = startHeight + (startY - y);
+    if (height < titleBarHeight + this.props.thick * 2) {
+      height = titleBarHeight + this.props.thick * 2;
+      y = startY + startHeight - titleBarHeight - this.props.thick * 2;
     }
-    
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-
-    > .title{
-
-        flex: 1;
-        padding:2px 0 2px 8px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+    window.style.top = `${y}px`;
+    window.style.height = `${height}px`;
+  };
+  resizeE = ({
+    window,
+    clientX,
+    left,
+    titleBarHeight
+  }) => {
+    let width = clientX - left - this.props.thick;
+    if (width < titleBarHeight) width = titleBarHeight;
+    window.style.width = `${width + this.props.thick * 2}px`;
+  };
+  resizeS = ({
+    window,
+    clientY,
+    top,
+    titleBarHeight
+  }) => {
+    let height = clientY - top - this.props.thick;
+    if (height < titleBarHeight) height = titleBarHeight;
+    window.style.height = `${height + this.props.thick * 2}px`;
+  };
+  resizeW = ({
+    window,
+    cursorX,
+    startX,
+    startWidth,
+    titleBarHeight
+  }) => {
+    let x = cursorX - this.props.thick;
+    if (x < 0) x = 0;
+    let width = startWidth + (startX - x);
+    if (width < titleBarHeight + this.props.thick * 2) {
+      width = titleBarHeight + this.props.thick * 2;
+      x = startX + startWidth - titleBarHeight - this.props.thick * 2;
     }
-    > nav{
-        display: flex;
-        align-items: anchor-center;
-
-
-        >button{
-            outline: unset;
-            display:flex;
-            align-items: center;
-            justify-content: center;
-            border: unset;
-            background: unset;
-            cursor: pointer;
-            width:32px;
-            height:32px;
-            xborder:1px solid green;
-            padding: 0;
-            margin: 0;
-            &:hover{
-                background: #bbbbbb;
-                color:white;
-            }
-            >svg{
-                color:#bababa;
-                width:14px;
-                height:14px;
-                cursor: pointer;
-                stroke-width: 3;
-            }
-        }
-        >button.danger:hover{
-            background: red;
-            >svg{
-                color:white;
-            }
-        } 
+    window.style.left = `${x}px`;
+    window.style.width = `${width}px`;
+  };
+  stop = e => {
+    e.preventDefault();
+    const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
+    if (y == 0 && this.data.direction.indexOf('n') > -1) {
+      this.props.window.orgHeight = height;
+      this.props.windowRef.current.style.height = `${window.innerHeight}px`;
     }
-`;
-class TitleBar extends React__default["default"].Component {
-  pos1 = 0;
-  pos2 = 0;
-  pos3 = 0;
-  pos4 = 0;
-  x = 0;
-  y = 0;
-  remember = e => {
-    po('remember');
+    if (y > window.innerHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
+    if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
+    if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mousemove', this.preMove);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = e => {
+    e.preventDefault();
+    this.props.windowRef.current.style.transition = 'unset';
     const {
       clientX,
-      clientY
+      clientY,
+      x: cursorX,
+      y: cursorY
     } = e;
+    const window = this.props.windowRef.current;
+    const {
+      left,
+      top
+    } = window.getBoundingClientRect();
+    let {
+      x: startX,
+      width: startWidth,
+      y: startY,
+      height: startHeight,
+      titleBarHeight
+    } = this.data;
+    this.directions[this.props.direction].resize({
+      window,
+      titleBarHeight,
+      clientX,
+      cursorX,
+      startX,
+      startWidth,
+      left,
+      clientY,
+      cursorY,
+      startY,
+      startHeight,
+      top
+    });
+  };
+  preMove = () => {
+    if (this.props.direction.indexOf('n') > -1) {
+      this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
+      this.data.height = this.props.window.orgHeight;
+      this.props.window.orgHeight = null;
+    }
+    window.removeEventListener('mousemove', this.preMove);
+    setTimeout(() => {
+      window.addEventListener('mousemove', this.move);
+    }, 100);
+  };
+  start = (e, direction) => {
+    e.preventDefault();
     const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    let {
       x,
       y,
       width,
       height
     } = this.props.windowRef.current.getBoundingClientRect();
-    this.props.window.orgHeight = height;
-    this.props.window.orgWidth = width;
-    this.props.window.orgTop = y;
-    this.props.window.orgLeft = x;
-    this.props.window.orgXd = clientX - x;
-    this.props.window.orgBodyOverflow = document.body.style.overflow;
-  };
-  adjustScreen = e => {
-    po('double click adjustScreen');
-    e.preventDefault();
-    const {
+    if (this.props.direction.indexOf('s') > -1) {
+      this.props.window.orgHeight = null;
+    }
+    this.data = {
       x,
       y,
       width,
-      height
-    } = this.props.windowRef.current.getBoundingClientRect();
-    if (y > 1 - this.props.thick) {
-      this.remember(e);
-      this.fullScreen(e);
+      height,
+      titleBarHeight,
+      direction
+    };
+    document.body.style.cursor = this.directions[this.props.direction].cursor;
+    if (this.props.window.orgHeight) {
+      window.addEventListener('mousemove', this.preMove);
     } else {
-      this.floatScreen(e);
+      window.addEventListener('mousemove', this.move);
     }
+    window.addEventListener('mouseup', this.stop);
   };
-  floatScreen = e => {
-    po('floatScreen');
-    this.props.windowRef.current;
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
-    this.props.windowRef.current.style.left = `${this.props.window.orgLeft}px`;
-    this.props.windowRef.current.style.top = `${this.props.window.orgTop}px`;
-    this.props.windowRef.current.style.width = `${this.props.window.orgWidth}px`;
-    this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
-    document.body.style.overflow = this.props.window.orgBodyOverflow;
-  };
-  fullScreen = e => {
-    po('fullScreen', this.props.thick);
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
-    this.props.windowRef.current.style.left = `${-this.props.thick}px`;
-    this.props.windowRef.current.style.top = `${-this.props.thick}px`;
-    this.props.windowRef.current.style.width = `calc(100vw + ${this.props.thick * 2}px)`; //`${window.innerWidth+(this.props.thick*2)}px`
-    this.props.windowRef.current.style.height = `calc(100vh + ${this.props.thick * 2}px)`; //`${window.innerHeight+(this.props.thick*2)}px`
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledSlider$1, {
+      $direction: this.directions[this.props.direction],
+      $padding: this.props.padding,
+      onMouseDown: e => {
+        this.start(e, this.props.direction);
+      }
+    });
+  }
+}
 
-    setTimeout(() => {
-      document.body.style.overflow = 'hidden';
-      this.props.windowRef.current.style.transition = 'unset';
-    }, 50);
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
+var style = {"test":"Style-module_test__LrdEc","withMask":"Style-module_withMask__LPcai"};
+styleInject(css_248z);
+
+const StyledJRWindow = styled__default["default"].div`
+    --jr-window-radius:3px;
+    --padding-child:8px;
+    --transition-x-y:height .05s ease-in, width .05s ease-in;
+    xborder:1px solid gray;
+    position: fixed;
+    padding: ${({
+  $thick
+}) => $thick}px;
+    border-radius: var(--jr-window-radius);
+user-select: text;
+
+    top: ${({
+  $y
+}) => $y}px;
+    left: ${({
+  $x
+}) => $x}px;
+    width: ${({
+  $width = 300
+}) => `${$width}px`};
+    height: ${({
+  $height = 300
+}) => `${$height}px`};
+    overflow: hidden;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    > main{
+        border-radius: var(--jr-window-radius);
+        box-shadow: 0px 0px 5px 1px gray;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+            min-height:32px;
+        }
+    }
+
+`;
+class JRWindow extends JRFrame {
+  x = 0;
+  y = 0;
+  width = 300;
+  height = 300;
+  padding = 1;
+  thick = 5;
+  constructor(props) {
+    super(props);
+    this.ref = /*#__PURE__*/React__default["default"].createRef();
+    this.titleBarRef = /*#__PURE__*/React__default["default"].createRef();
+    this.init();
+  }
+  addMaskToTarget = target => {
+    this.mask = document.createElement('div');
+    this.mask.style.background = '#868686cc';
+    this.mask.style.position = 'absolute';
+    this.mask.style.top = '0';
+    this.mask.style.left = '0';
+    this.mask.style.right = '0';
+    this.mask.style.bottom = '0';
+    this.mask.style.borderRadius = 'inherit';
+    this.mask.style.height = '10000px';
+    this.mask.style.width = '10000px';
+    target.appendChild(this.mask);
+    po('style.mask', style.mask);
+    po('addMask+++++++++++++++++++++++++++');
   };
-  stop = e => {
-    po('stop');
-    e.preventDefault();
-    if (this.moved) {
-      const {
-        height: titleBarHeight
-      } = this.props.titleBarRef.current.getBoundingClientRect();
-      const {
-        x,
-        y,
-        width,
-        height
-      } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1 - this.props.thick) this.fullScreen(e);
-      if (y > window.innerHeight - titleBarHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
-      if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
-      if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
+  removeMaskFromTarget = () => {
+    po('removeMask-----------------------');
+    this.mask.remove();
+  };
+  maskOnTarget(on) {
+    po('typeof this.props.maskOn', typeof this.props.maskOn);
+    const target = typeof this.props.maskOn === 'object' ? this.props.maskOn : typeof this.props.maskOn === 'string' ? document.getElementById(this.props.maskOn) : document.body;
+
+    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
+    target?.classList[on ? 'add' : 'remove']('withMask');
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.props.maskOn && this.props.open) {
+      this.maskOnTarget(this.props.open);
+    }
+    if (this.props.open) {
+      this.open();
+    }
+  }
+  open() {
+    this.props.onOpen?.bind(this)();
+  }
+  close() {
+    this.props.onClose?.bind(this)();
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.popup === true) {
+      if (this.props.open && prevProps.open === false) {
+        this.open();
+      } else if (this.props.open === false && prevProps.open) {
+        this.close();
+      }
+      if (this.props.maskOn && this.props.open != prevProps.open) {
+        this.maskOnTarget(this.props.open);
+      }
+    }
+  }
+  init() {
+    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
+    this.width = window.innerWidth >= (this.props.width ?? this.width) ? this.props.width ?? this.width : window.innerWidth;
+    this.x = this.props.x ?? (window.innerWidth - (this.width ?? 300)) / 2;
+    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
+  }
+  renderer() {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
+      ref: this.ref,
+      className: `jr-window ${this.props.className ?? ''}`,
+      $x: this.x,
+      $y: this.y,
+      $width: this.width,
+      $height: this.height,
+      $thick: this.thick
+    }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
+      titleBarRef: this.titleBarRef,
+      windowRef: this.ref,
+      window: this,
+      title: this.props.title,
+      thick: this.thick
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), /*#__PURE__*/React__default["default"].createElement(Sliders, {
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    })) : '' : super.renderer();
+  }
+}
+
+const StyledSlider = styled__default["default"].div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    height:100%;
+    width:6px;
+    user-select: none;
+    &.resizing:hover,&.resizing{
+        border-right:1px dashed black;
+    }
+    &:hover{
+        cursor: col-resize;
+        border-right:1px dashed gray;
     }
+`;
+class Slider extends React__default["default"].Component {
+  constructor() {
+    super();
+    this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
+  }
+  stop = e => {
+    this.sliderRef.current.classList.remove('resizing');
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
-    window.removeEventListener('mousemove', this.preMove);
-  };
-  move = e => {
-    po('move');
-    e.preventDefault();
-    this.moved = true;
-    const {
-      clientX,
-      clientY
-    } = e;
-    const y = clientY < 1 ? 0 : clientY;
-    this.pos1 = this.pos3 - clientX;
-    this.pos2 = this.pos4 - y;
-    this.pos3 = clientX;
-    this.pos4 = y;
-    const w = this.props.windowRef.current;
-    this.y = w.offsetTop - this.pos2;
-    this.x = w.offsetLeft - this.pos1;
-
-    // if(this.props.window.orgWidth){
-    //     w.style.width=`${this.props.window.orgWidth}px`
-    //     this.props.window.orgWidth=null
-    // }
-
-    this.y = this.y < -this.props.thick ? -this.props.thick : this.y;
-    w.style.transition = 'unset';
-    w.style.top = `${this.y}px`;
-    w.style.left = `${this.x}px`;
   };
-  preMove = e => {
-    console.clear();
-    po('preMove');
-    const w = this.props.windowRef.current;
+  move = ({
+    clientX
+  }) => {
     const {
-      clientX,
-      clientY,
-      ...oe
-    } = e;
-    po('e', e);
+      th,
+      selectedCols,
+      widthRates
+    } = this.data;
     const {
-      x,
-      y,
-      width,
-      height
-    } = w.getBoundingClientRect();
-    po('width', width);
-    if (y <= -this.props.thick) ;
-    w.style.transition = 'left .05s ease-in, height .05s ease-in';
-    if (y <= 0) {
-      // contt browserWidth=
-      const w1 = window.innerWidth - this.props.thick * 2;
-      const x1 = clientX;
-      const w2 = this.props.window.orgWidth - 32;
-      const x2 = x1 / w1 * w2;
-      // po('xp'   , x2)
-      w.style.left = `${clientX - x2}px`;
-      w.style.width = `${this.props.window.orgWidth}px`;
-      w.style.height = `${this.props.window.orgHeight}px`;
-    } else {
-      this.remember(e);
-    }
-    document.body.style.cursor = 'grabbing';
-    document.body.style.overflow = this.props.window.orgBodyOverflow;
-    setTimeout(() => {
-      window.addEventListener('mousemove', this.move);
-    }, 50);
-    window.removeEventListener('mousemove', this.preMove);
+      left
+    } = th.getBoundingClientRect();
+    const min = left + 10;
+    const x = clientX >= min ? clientX : min;
+    const width = x - left;
+    selectedCols.forEach((col, index) => {
+      const _width = Math.round(width / 100 * widthRates[index]);
+      col.style.width = _width + 'px';
+    });
   };
-  start(e) {
-    po('start');
-    e.preventDefault();
-    this.moved = false;
-    this.pos3 = e.clientX;
-    this.pos4 = e.clientY;
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
-    window.addEventListener('mousemove', this.preMove);
+  start(thPRef, column) {
+    const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
+    const totalWidth = selectedCols.reduce((aco, {
+      offsetWidth
+    }) => aco + offsetWidth, 0);
+    const widthRates = selectedCols.map(({
+      offsetWidth
+    }) => {
+      return 100 * (offsetWidth / totalWidth);
+    });
+    this.data = {
+      selectedCols,
+      th: thPRef.current,
+      widthRates
+    };
+    this.sliderRef.current.classList.add('resizing');
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
     window.addEventListener('mouseup', this.stop);
   }
-  onDoubleClick() {
-    po('onDoubleClick');
-  }
   render() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
-      ref: this.props.titleBarRef,
-      draggable: "false",
-      onMouseDown: e => {
-        this.start(e);
-      },
-      onDoubleClick: this.adjustScreen
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
-      tag: "div",
-      config: this.props.title ?? '',
-      me: this.props.window,
-      className: 'title'
-    }), /*#__PURE__*/React__default["default"].createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default["default"].createElement(JRButton, {
-      icon: /*#__PURE__*/React__default["default"].createElement(SvgX, null),
-      className: 'danger',
-      onClick: e => {
-        e.stopPropagation();
-        if (this.props.window.orgBodyOverflow != null) {
-          document.body.style.overflow = this.props.window.orgBodyOverflow;
-        }
-        this.props.window.props.setOpen(false);
-      },
+    const column = this.props.column;
+    return /*#__PURE__*/React__default["default"].createElement(StyledSlider, {
+      ref: this.sliderRef,
       onMouseDown: e => {
-        e.stopPropagation();
+        this.start(this.props.thRef, column);
       }
-    }) : null));
+    });
   }
 }
 
-const directions = ['n', 'e', 's', 'w', 'nww', 'nnw', 'nne', 'nee', 'sse', 'see', 'sww', 'ssw'];
-class Sliders extends React__default["default"].Component {
-  render() {
-    return directions.map((direction, index) => /*#__PURE__*/React__default["default"].createElement(Slider, {
-      direction: direction,
-      thick: this.props.thick,
-      windowRef: this.props.windowRef,
-      window: this.props.window,
-      titleBarRef: this.props.titleBarRef,
+const Colgroup = ({
+  leafColumns,
+  colGroupRef
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("colgroup", {
+    ref: colGroupRef
+  }, leafColumns?.map((_column, index) => {
+    const {
+      width,
+      ...column
+    } = _column;
+    const style = {
+      width
+    };
+    return /*#__PURE__*/React__default["default"].createElement("col", {
+      style: style,
       key: index
+    });
+  }));
+};
+const Ths$1 = ({
+  deep,
+  rowColumn,
+  rowIndex,
+  table
+}) => {
+  return rowColumn?.map((column, colIndex) => {
+    const thRef = /*#__PURE__*/React__default["default"].createRef();
+    return /*#__PURE__*/React__default["default"].createElement("th", {
+      key: colIndex,
+      ref: thRef,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
+    }, flexType(column.label, table), (table.props.resizableColumns === undefined || table.props.resizableColumns) && /*#__PURE__*/React__default["default"].createElement(Slider, {
+      table: table,
+      thRef: thRef,
+      column: column
+    }));
+  });
+};
+const HeadTrs = ({
+  columns: _columns,
+  trClassName,
+  table
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React__default["default"].createElement(Ths$1, {
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex,
+      table: table
+    }));
+  });
+};
+const THead = ({
+  columns,
+  leafColumns,
+  table
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement(HeadTrs, {
+    columns: columns,
+    table: table
+  })), /*#__PURE__*/React__default["default"].createElement(Colgroup, {
+    leafColumns: leafColumns,
+    colGroupRef: table.colGroupRef
+  }));
+};
+const FootThs = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  columns,
+  rowIndex
+}) => {
+  return columns?.map((column, colIndex) => {
+    // let content
+    // if(type){
+    //     content='type'
+    // }else if(render){
+
+    //     content=render?.bind(table)({groupData,groupIndex,ths:111})
+    // }else{
+    //     content=column.label
+    // }
+    let style = flexType(column.style, table, {}, {});
+    const content = whatType(column, table, column.label);
+    return /*#__PURE__*/React__default["default"].createElement("th", {
+      style: style,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan
+    }, content);
+  });
+};
+const TFoot = ({
+  table,
+  columns
+}) => {
+  const trs = columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: rowIndex
+    }, /*#__PURE__*/React__default["default"].createElement(FootThs, {
+      columns: rowColumn,
+      table: table
     }));
-  }
-}
-const StyledSlider = styled__default["default"].div`
-    Xborder:1px solid ${({
-  $direction: {
-    color
-  }
-}) => color}; 
-    Xbackground:${({
-  $direction: {
-    color
-  }
-}) => color};
-    position: absolute;
-    top: ${({
-  $direction: {
-    top
-  }
-}) => top};
-    bottom: ${({
-  $direction: {
-    bottom
-  }
-}) => bottom};
-    right: ${({
-  $direction: {
-    right
-  }
-}) => right};
-    left: ${({
-  $direction: {
-    left
-  }
-}) => left};
-    height: ${({
-  $direction: {
-    height
-  }
-}) => height};
-    width: ${({
-  $direction: {
-    width
-  }
-}) => width};
-    cursor: ${({
-  $direction: {
-    cursor
-  }
-}) => cursor};
+  });
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tfoot", null, trs));
+};
 
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 
+styled__default["default"].tbody`
+    th{
+        height:4px;
+        background:#c6c6c6;
+    }
 `;
-class Slider extends React__default["default"].Component {
-  width = '3px';
-  borderWidth = 'px';
-  borderLong = 5;
-  constructor(props) {
-    super(props);
-    this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
-  }
-  directions = {
-    n: {
-      top: 0,
-      color: 'red',
-      width: '100%',
-      height: `${this.props.thick}px`,
-      cursor: 'n-resize',
-      resize: props => {
-        this.resizeN(props);
-      }
-    },
-    e: {
-      color: 'yellow',
-      right: 0,
-      width: `${this.props.thick}px`,
-      height: '100%',
-      cursor: 'e-resize',
-      resize: props => {
-        this.resizeE(props);
-      }
-    },
-    s: {
-      color: 'blue',
-      bottom: 0,
-      width: '100%',
-      height: `${this.props.thick}px`,
-      cursor: 's-resize',
-      resize: props => {
-        this.resizeS(props);
-      }
-    },
-    w: {
-      color: 'green',
-      left: 0,
-      width: `${this.props.thick}px`,
-      height: '100%',
-      cursor: 'w-resize',
-      resize: props => {
-        this.resizeW(props);
-      }
-    },
-    nw: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.borderLong}px`,
-      height: `${this.borderLong}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nww: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nnw: {
-      top: 0,
-      left: 0,
-      color: 'blue',
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'nw-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeW(props);
-      }
-    },
-    nne: {
-      top: 0,
-      right: 0,
-      color: 'green',
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'ne-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeE(props);
-      }
-    },
-    nee: {
-      top: 0,
-      right: 0,
-      color: 'green',
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'ne-resize',
-      resize: props => {
-        this.resizeN(props);
-        this.resizeE(props);
-      }
-    },
-    sse: {
-      color: 'red',
-      right: 0,
-      bottom: 0,
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'se-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeE(props);
-      }
-    },
-    see: {
-      color: 'red',
-      right: 0,
-      bottom: 0,
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'se-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeE(props);
-      }
-    },
-    ssw: {
-      color: 'yellow',
-      bottom: 0,
-      left: 0,
-      width: `${this.props.thick + this.borderLong}px`,
-      height: `${this.props.thick}px`,
-      cursor: 'sw-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeW(props);
-      }
-    },
-    sww: {
-      color: 'yellow',
-      bottom: 0,
-      left: 0,
-      width: `${this.props.thick}px`,
-      height: `${this.props.thick + this.borderLong}px`,
-      cursor: 'sw-resize',
-      resize: props => {
-        this.resizeS(props);
-        this.resizeW(props);
-      }
+
+////////////////////////////////////////////////////////////////////////////
+
+const Ths = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  rowColumn,
+  rowIndex
+}) => {
+  return rowColumn?.map(({
+    style: _style,
+    align,
+    type,
+    render,
+    ...column
+  }, colIndex) => {
+    const style = flexType(_style, table, {}, {});
+    let content;
+    if (type) {
+      content = 'type';
+    } else if (render) {
+      content = render?.bind(table)({
+        groupData,
+        groupIndex,
+        ths: 111
+      });
+    } else {
+      content = column.label;
     }
-  };
-  resizeN = ({
-    window,
-    cursorY,
-    startY,
-    startHeight,
-    titleBarHeight
-  }) => {
-    let y = cursorY - this.props.thick;
-    if (y < 0) y = 0;
-    let height = startHeight + (startY - y);
-    if (height < titleBarHeight + this.props.thick * 2) {
-      height = titleBarHeight + this.props.thick * 2;
-      y = startY + startHeight - titleBarHeight - this.props.thick * 2;
+    // style.textAlign=align
+    return /*#__PURE__*/React__default["default"].createElement("th", {
+      key: colIndex,
+      style: {
+        textAlign: align,
+        ...style
+      },
+      colSpan: column.colSpan,
+      rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
+    }, content);
+  });
+};
+const GroupColumns = ({
+  table,
+  columns: _columns,
+  trClassName,
+  groupData,
+  tbodyIndex
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React__default["default"].createElement(Ths, {
+      table: table,
+      groupData: groupData,
+      groupIndex: tbodyIndex,
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex
+    }));
+  });
+};
+styled__default["default"].tr`
+    z-index: 1;
+    XXposition: sticky;
+    XXtop: 50px;
+    th{
+        text-align: left;
+        border:1px solid #222222;
     }
-    window.style.top = `${y}px`;
-    window.style.height = `${height}px`;
-  };
-  resizeE = ({
-    window,
-    clientX,
-    left,
-    titleBarHeight
-  }) => {
-    let width = clientX - left - this.props.thick;
-    if (width < titleBarHeight) width = titleBarHeight;
-    window.style.width = `${width + this.props.thick * 2}px`;
-  };
-  resizeS = ({
-    window,
-    clientY,
-    top,
-    titleBarHeight
-  }) => {
-    let height = clientY - top - this.props.thick;
-    if (height < titleBarHeight) height = titleBarHeight;
-    window.style.height = `${height + this.props.thick * 2}px`;
-  };
-  resizeW = ({
-    window,
-    cursorX,
-    startX,
-    startWidth,
-    titleBarHeight
-  }) => {
-    let x = cursorX - this.props.thick;
-    if (x < 0) x = 0;
-    let width = startWidth + (startX - x);
-    if (width < titleBarHeight + this.props.thick * 2) {
-      width = titleBarHeight + this.props.thick * 2;
-      x = startX + startWidth - titleBarHeight - this.props.thick * 2;
+`;
+const GroupHeader = props => {
+  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-header'
+  }, props));
+};
+styled__default["default"].tr`
+    th{
+        border:1px solid #222222;
+        text-align: left;
     }
-    window.style.left = `${x}px`;
-    window.style.width = `${width}px`;
+`;
+const GroupFooter = props => {
+  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-footer'
+  }, props));
+};
+
+////////////////////////////////////////////////////////////////////////////
+const Td = ({
+  column: _column,
+  record,
+  tbodyIndex,
+  trIndex,
+  tdIndex,
+  table
+}) => {
+  let content;
+  const {
+    style: _style,
+    align,
+    vAlign = 'baseline',
+    type,
+    typeStyle: _typeStyle,
+    render,
+    setValue,
+    getValue,
+    onChange: _onChange,
+    funcProps,
+    ...column
+  } = _column;
+  const onChange = inputValue => {
+    const targetValue = inputValue?.target?.value ?? inputValue;
+    setValue(record, targetValue);
+    table.setValue(table.getValue());
   };
-  stop = e => {
-    e.preventDefault();
-    const {
-      height: titleBarHeight
-    } = this.props.titleBarRef.current.getBoundingClientRect();
-    const {
-      x,
-      y,
-      width,
-      height
-    } = this.props.windowRef.current.getBoundingClientRect();
-    this.props.windowRef.current.style.transition = 'var(--transition-x-y)';
-    if (y == 0 && this.data.direction.indexOf('n') > -1) {
-      this.props.window.orgHeight = height;
-      this.props.windowRef.current.style.height = `${window.innerHeight}px`;
-    }
-    if (y > window.innerHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
-    if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
-    if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
-    document.body.style.cursor = 'default';
-    window.removeEventListener('mousemove', this.move);
-    window.removeEventListener('mousemove', this.preMove);
-    window.removeEventListener('mouseup', this.stop);
+  const value = getValue(record);
+  let style = render ? {} : flexType(_style, table, {
+    value,
+    record
+  }, {});
+  const setStyle = _style => {
+    style = _style;
   };
-  move = e => {
-    e.preventDefault();
-    this.props.windowRef.current.style.transition = 'unset';
-    const {
-      clientX,
-      clientY,
-      x: cursorX,
-      y: cursorY
-    } = e;
-    const window = this.props.windowRef.current;
-    const {
-      left,
-      top
-    } = window.getBoundingClientRect();
-    let {
-      x: startX,
-      width: startWidth,
-      y: startY,
-      height: startHeight,
-      titleBarHeight
-    } = this.data;
-    this.directions[this.props.direction].resize({
-      window,
-      titleBarHeight,
-      clientX,
-      cursorX,
-      startX,
-      startWidth,
-      left,
-      clientY,
-      cursorY,
-      startY,
-      startHeight,
-      top
+  setStyle.bind(table);
+  render?.bind(table);
+  if (type) {
+    const typeStyle = flexType(_typeStyle, table, {
+      record
+    }, {});
+    content = /*#__PURE__*/React__default["default"].createElement(type, {
+      onChange: _onChange ? e => {
+        _onChange?.bind(table)(e, {
+          value,
+          onChange,
+          me: content
+        });
+      } : onChange,
+      value,
+      style: typeStyle,
+      render,
+      ...column,
+      ...funcProps?.bind(table)({
+        value
+      })
+    });
+  } else if (render) {
+    content = render({
+      index: trIndex,
+      groupIndex: tbodyIndex,
+      value,
+      record,
+      onChange,
+      setStyle
+    });
+  } else {
+    content = value;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("td", {
+    colSpan: style.colSpan,
+    rowSpan: style.rowSpan,
+    style: {
+      textAlign: align,
+      verticalAlign: vAlign,
+      ...style
+    },
+    key: tdIndex
+  }, content);
+};
+const Tds = ({
+  leafColumns,
+  record,
+  table,
+  tbodyIndex,
+  trIndex
+}) => {
+  return leafColumns?.map((column, tdIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement(Td, {
+      column: column,
+      key: tdIndex,
+      record: record,
+      table: table,
+      tbodyIndex: tbodyIndex,
+      trIndex: trIndex,
+      tdIndex: tdIndex
     });
+  });
+};
+////////////////////////////////////////////////////////////////////////////
+
+const TBody = ({
+  groupData,
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  table,
+  tbodyIndex
+}) => {
+  const neededProps = {
+    table,
+    tbodyIndex
   };
-  preMove = () => {
-    if (this.props.direction.indexOf('n') > -1) {
-      this.props.windowRef.current.style.height = `${this.props.window.orgHeight}px`;
-      this.data.height = this.props.window.orgHeight;
-      this.props.window.orgHeight = null;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tbody", {
+    key: `tbody${tbodyIndex}`
+  }, groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupHeader, _extends({
+    groupData: groupData,
+    columns: groupHeader
+  }, neededProps)), groupData?.map?.((record, trIndex) => {
+    const onRowClick = table.props.onRowClick?.bind(table);
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: trIndex,
+      onClick: () => {
+        onRowClick?.({
+          record,
+          index: trIndex,
+          groupIndex: tbodyIndex
+        });
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Tds, _extends({
+      record: record,
+      trIndex: trIndex
+    }, neededProps, {
+      leafColumns: leafColumns
+    })));
+  }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends({
+    groupData: groupData,
+    columns: groupFooter
+  }, neededProps))));
+};
+const TBodies = ({
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  dataSource: _dataSource,
+  table
+}) => {
+  // po('--TBodies--')
+  const isGroupDataType = Array.isArray(_dataSource?.[0]);
+  const dataSource = isGroupDataType ? _dataSource : [_dataSource];
+
+  // po('dataSource',dataSource)    
+  return dataSource?.map((groupData, tbodyIndex, c) => {
+    return /*#__PURE__*/React__default["default"].createElement(TBody, {
+      key: `tbody${tbodyIndex}`,
+      table: table
+      // dataSource={dataSource}
+      // dataGroup={groupData} 
+      ,
+      groupData: groupData,
+      tbodyIndex: tbodyIndex,
+      groupHeader: groupHeader,
+      leafColumns: leafColumns,
+      groupFooter: groupFooter
+    });
+  });
+};
+
+const StyledJRTable = styled__default["default"].div`
+    --column-bd-color:#cccccc;
+    --column-b-color:#eeeeee;
+    --column-b-hover-color:#ffffff;
+
+    position: relative;
+    background: var(--column-b-color);
+    border:1px solid var(--column-bd-color);
+
+    display:flex;
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+
+
+
+
+    &.row-highlightable{
+        tbody{
+            tr:not(.jr-group-header,.jr-group-footer):hover{
+                background:var(--column-b-hover-color);
+                cursor: pointer;
+                transition:  background-color .8s;
+                td{
+                    color:black;
+                    transition:color .8s;
+                }
+
+            }
+        }
     }
-    window.removeEventListener('mousemove', this.preMove);
-    setTimeout(() => {
-      window.addEventListener('mousemove', this.move);
-    }, 100);
-  };
-  start = (e, direction) => {
-    e.preventDefault();
-    const {
-      height: titleBarHeight
-    } = this.props.titleBarRef.current.getBoundingClientRect();
-    let {
-      x,
-      y,
-      width,
-      height
-    } = this.props.windowRef.current.getBoundingClientRect();
-    if (this.props.direction.indexOf('s') > -1) {
-      this.props.window.orgHeight = null;
+
+    table{
+        Xheight: 100%;
+        min-width:100%;
+        width: max-content;
+        border-spacing: 0;
+
+        thead{
+            position: sticky;
+            top: 0;
+
+            th{
+                position: relative;
+                padding: 2px 6px;
+                background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+            }
+        }
+
+        tfoot{
+            position: sticky;
+            bottom: -1px;
+
+            Xtr:nth-child(1){
+                th{
+                    Xborder-top:1px solid var(--column-bd-color);
+                }
+            }
+            Xth:nth-child(1){
+                Xborder-left:1px solid var(--column-bd-color);
+            }
+                
+            th{
+                height:32px;
+                padding: 4px;
+                background: #e4e4e4;
+                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+
+                border-left:2px solid #f4f4f4;
+                border-top:2px solid #f4f4f4;
+                border-right:2px solid var(--column-bd-color);
+                border-bottom:2px solid var(--column-bd-color);
+            }
+        }
+
+        tbody{
+            tr{
+                transition: background .3s linear;
+                background:var(--column-b-color);
+                a:#ededed;
+                th{
+                    color:#444444;
+                }
+                td{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    color:#2e2e2e;
+                    padding: 4px;
+                }
+            }
+            tr:hover{
+                background:var(--column-b-hover-color);
+                
+            }
+            
+            tr.jr-group-header
+            ,tr.jr-group-footer{
+                text-align:left;
+                background:#dddbdb;
+
+                th{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    border-right: 1px solid var(--column-bd-color);
+                    padding: 4px 8px;
+                }
+            }
+        }
+        tbody.empty-tbody{
+            td{
+                border:10px solid red;
+            }
+        }
+    } 
+        
+    
+
+
+    > .empty{
+        user-select: none;
+        color:#848484;
+        height:100%;
+        flex:1;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+
+        
+    }    
+
+    > .empty::after{
+        content:'無資料';
+        position: block;
+    }
+
+`;
+
+styled__default["default"].div`
+    display:flex;
+    flex:1;
+    overflow:hidden;
+
+    > *{
+        Xborder:1px solid gray;
     }
-    this.data = {
-      x,
-      y,
-      width,
-      height,
-      titleBarHeight,
-      direction
-    };
-    document.body.style.cursor = this.directions[this.props.direction].cursor;
-    if (this.props.window.orgHeight) {
-      window.addEventListener('mousemove', this.preMove);
-    } else {
-      window.addEventListener('mousemove', this.move);
+    >main{
+        display:flex;
+        flex:1;
+        overflow:overlay;
+        flex-direction: column;
+        > *{
+            XXborder:1px solid gray;
+            XXmin-height:30px;
+        }
+
+        >header{
+            XXborder:1px solid  red;
+            XXoverflow: overlay;
+        }
+        >main{
+            display:flex;
+            flex:1;
+            overflow:hidden;
+        }
+        >footer{
+            XXborder:1px solid  blue;
+            overflow: overlay;
+        }
+
     }
-    window.addEventListener('mouseup', this.stop);
-  };
-  render() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledSlider, {
-      $direction: this.directions[this.props.direction],
-      $padding: this.props.padding,
-      onMouseDown: e => {
-        this.start(e, this.props.direction);
-      }
-    });
-  }
-}
+
+`;
 
 const StyleJRFields = styled__default["default"].main`
     --column-bd-color:#cccccc;
@@ -5491,270 +5705,44 @@ class JRFields extends JRWindow {
       key: `f${index}`,
       style: _style,
       className: 'jr-column',
-      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
-      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
-    }, label != null && /*#__PURE__*/React__default["default"].createElement(StyledColumnLabel, {
-      style: labelStyle,
-      $required: column.required,
-      className: 'label',
-      $layout: layout,
-      $colon: colon
-    }, label), content, /*#__PURE__*/React__default["default"].createElement(StyledColumnFooter, {
-      $layout: layout
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "left"
-    }, this.getTestValue(_parentName.join('.'))?.msg?.map(msg => {
-      return msg;
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "right"
-    })));
-  }
-  createColumns(parentValue, columns, parentName, fullname, labelProps) {
-    return columns?.map((column, index) => {
-      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname, labelProps);
-    });
-  }
-  renderMe() {
-    return /*#__PURE__*/React__default["default"].createElement(StyleJRFields, {
-      className: 'jr-fields',
-      style: this.props.typeStyle
-    }, /*#__PURE__*/React__default["default"].createElement(StyledGrid, {
-      cols: this.props.cols,
-      style: this.props.gridStyle,
-      className: 'jr-grid',
-      $gap: this.props.gap
-    }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.labelProps)));
-  }
-}
-
-// export const FFields=JRFrameHOC(JRFields)
-// export const WFields=JRWindowHOC(FFields)
-
-const StyledInput = styled__default["default"].div`
-    display:flex;
-    input:focus{
-        outline: none; 
-    }
-`;
-class JRInput extends React__default["default"].Component {
-  setValue(value) {
-    this.props?.onChange?.(value);
-  }
-  render() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledInput, null, this.input());
-  }
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
-var style = {"test":"Style-module_test__LrdEc","withMask":"Style-module_withMask__LPcai"};
-styleInject(css_248z);
-
-const StyledJRWindow = styled__default["default"].div`
-    --jr-window-radius:3px;
-    --padding-child:8px;
-    --transition-x-y:height .05s ease-in, width .05s ease-in;
-    xborder:1px solid gray;
-    position: fixed;
-    padding: ${({
-  $thick
-}) => $thick}px;
-    border-radius: var(--jr-window-radius);
-user-select: text;
-
-    top: ${({
-  $y
-}) => $y}px;
-    left: ${({
-  $x
-}) => $x}px;
-    width: ${({
-  $width = 300
-}) => `${$width}px`};
-    height: ${({
-  $height = 300
-}) => `${$height}px`};
-    overflow: hidden;
-    z-index: 2;
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    
-    > main{
-        border-radius: var(--jr-window-radius);
-        box-shadow: 0px 0px 5px 1px gray;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        flex:1;
-        > main {
-            Xpadding:var(--padding-child);
-            overflow: overlay;
-            flex:1;
-            display: flex;
-            min-height:32px;
-        }
-    }
-
-`;
-class JRWindow extends JRFrame {
-  x = 0;
-  y = 0;
-  width = 300;
-  height = 300;
-  padding = 1;
-  thick = 5;
-  constructor(props) {
-    super(props);
-    this.ref = /*#__PURE__*/React__default["default"].createRef();
-    this.titleBarRef = /*#__PURE__*/React__default["default"].createRef();
-    this.init();
-  }
-  addMaskToTarget = target => {
-    this.mask = document.createElement('div');
-    this.mask.style.background = '#868686cc';
-    this.mask.style.position = 'absolute';
-    this.mask.style.top = '0';
-    this.mask.style.left = '0';
-    this.mask.style.right = '0';
-    this.mask.style.bottom = '0';
-    this.mask.style.borderRadius = 'inherit';
-    this.mask.style.height = '10000px';
-    this.mask.style.width = '10000px';
-    target.appendChild(this.mask);
-    po('style.mask', style.mask);
-    po('addMask+++++++++++++++++++++++++++');
-  };
-  removeMaskFromTarget = () => {
-    po('removeMask-----------------------');
-    this.mask.remove();
-  };
-  maskOnTarget(on) {
-    po('typeof this.props.maskOn', typeof this.props.maskOn);
-    const target = typeof this.props.maskOn === 'object' ? this.props.maskOn : typeof this.props.maskOn === 'string' ? document.getElementById(this.props.maskOn) : document.body;
-
-    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
-    target?.classList[on ? 'add' : 'remove']('withMask');
-  }
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.maskOn && this.props.open) {
-      this.maskOnTarget(this.props.open);
-    }
-    if (this.props.open) {
-      this.open();
-    }
-  }
-  open() {
-    this.props.onOpen?.bind(this)();
-  }
-  close() {
-    this.props.onClose?.bind(this)();
-  }
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.props.popup === true) {
-      if (this.props.open && prevProps.open === false) {
-        this.open();
-      } else if (this.props.open === false && prevProps.open) {
-        this.close();
-      }
-      if (this.props.maskOn && this.props.open != prevProps.open) {
-        this.maskOnTarget(this.props.open);
-      }
-    }
+      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
+      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
+    }, label != null && /*#__PURE__*/React__default["default"].createElement(StyledColumnLabel, {
+      style: labelStyle,
+      $required: column.required,
+      className: 'label',
+      $layout: layout,
+      $colon: colon
+    }, label), content, /*#__PURE__*/React__default["default"].createElement(StyledColumnFooter, {
+      $layout: layout
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "left"
+    }, this.getTestValue(_parentName.join('.'))?.msg?.map(msg => {
+      return msg;
+    })), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "right"
+    })));
   }
-  init() {
-    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
-    this.width = window.innerWidth >= (this.props.width ?? this.width) ? this.props.width ?? this.width : window.innerWidth;
-    this.x = this.props.x ?? (window.innerWidth - (this.width ?? 300)) / 2;
-    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
+  createColumns(parentValue, columns, parentName, fullname, labelProps) {
+    return columns?.map((column, index) => {
+      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname, labelProps);
+    });
   }
-  renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
-      ref: this.ref,
-      className: `jr-window ${this.props.className ?? ''}`,
-      $x: this.x,
-      $y: this.y,
-      $width: this.width,
-      $height: this.height,
-      $thick: this.thick
-    }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
-      titleBarRef: this.titleBarRef,
-      windowRef: this.ref,
-      window: this,
-      title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), /*#__PURE__*/React__default["default"].createElement(Sliders, {
-      thick: this.thick,
-      windowRef: this.ref,
-      window: this,
-      titleBarRef: this.titleBarRef
-    })) : '' : super.renderer();
+  renderMe() {
+    return /*#__PURE__*/React__default["default"].createElement(StyleJRFields, {
+      className: 'jr-fields',
+      style: this.props.typeStyle
+    }, /*#__PURE__*/React__default["default"].createElement(StyledGrid, {
+      cols: this.props.cols,
+      style: this.props.gridStyle,
+      className: 'jr-grid',
+      $gap: this.props.gap
+    }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.labelProps)));
   }
 }
 
-styled__default["default"].div`
-    display:flex;
-    flex:1;
-    overflow:hidden;
-
-    > *{
-        Xborder:1px solid gray;
-    }
-    >main{
-        display:flex;
-        flex:1;
-        overflow:overlay;
-        flex-direction: column;
-        > *{
-            XXborder:1px solid gray;
-            XXmin-height:30px;
-        }
-
-        >header{
-            XXborder:1px solid  red;
-            XXoverflow: overlay;
-        }
-        >main{
-            display:flex;
-            flex:1;
-            overflow:hidden;
-        }
-        >footer{
-            XXborder:1px solid  blue;
-            overflow: overlay;
-        }
-
-    }
-
-`;
+// export const FFields=JRFrameHOC(JRFields)
+// export const WFields=JRWindowHOC(FFields)
 
 styled__default["default"].div`
     --jr-window-radius:3px;
@@ -6043,95 +6031,15 @@ class JRTable extends JRWindow {
 // export const FTable=JRFrameHOC(JRTable)
 // export const WTable=JRWindowHOC(JRTable)
 
-const StyledJRFrame = styled__default["default"].div`
-    display:flex;
-    flex:1;
-    overflow:hidden;
-
-    > *{
-        Xborder:1px solid gray;
-    }
-    >main{
-        display:flex;
-        flex:1;
-        overflow:overlay;
-        flex-direction: column;
-        > *{
-            XXborder:1px solid gray;
-            min-height:30px;
-        }
-
-        >header{
-            XXborder:1px solid  red;
-            XXoverflow: overlay;
-        }
-        >main{
-            display:flex;
-            flex:1;
-            overflow:hidden;
-        }
-        >footer{
-            XXborder:1px solid  blue;
-            overflow: overlay;
-        }
-
-    }
-
+const StyledJRTest = styled__default["default"].div`
+  
 `;
-const FreeType = ({
-  tag: Tag,
-  config,
-  me,
-  className
-}) => {
-  if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
-    const content = config.bind(me)({
-      setStyle
-    });
-    return /*#__PURE__*/React__default["default"].createElement(Tag, {
-      className: className,
-      style: style
-    }, content);
-  }
-};
 class JRTestReact extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledJRTest, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.start,
-      me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "header",
-      config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.left,
-      me: this,
-      className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.right,
-      me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "footer",
-      config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.end,
-      me: this,
-      className: 'end'
-    }));
+    });
   }
   renderMe() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6142,9 +6050,228 @@ class JRTestReact extends JRSubmit {
   }
 }
 
+class AlertWindow extends JRWindow {
+  renderMe() {
+    return this.getValue()?.message;
+  }
+}
+const StyledAlert = styled__default["default"](AlertWindow)`
+    .body{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+    }
+        
+    footer{
+        display: flex;
+        justify-content: end;
+        padding: 8px;
+    }
+`;
+function JRAlertWindow({
+  title,
+  message,
+  container,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(true);
+  return /*#__PURE__*/React__default["default"].createElement(StyledAlert, _extends({
+    initValue: {
+      message
+    },
+    width: 440,
+    height: 180,
+    maskOn: 'play'
+  }, props, {
+    open: open,
+    setOpen: setOpen,
+    popup: true,
+    title: title ?? ''
+    // onOpen={()=>{
+    //     po('Open+++++++++++++++++')
+    // }}
+    ,
+    onClose: () => {
+      container.remove();
+    },
+    bottom: function () {
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: () => {
+          setOpen(false);
+        }
+      }, "OK");
+    }
+  }), message);
+}
+function JRAlert(props) {
+  const body = document.body;
+  const containerId = 'jr-alert-div';
+  let container = document.getElementById(containerId);
+  if (container == null) {
+    container = document.createElement('div');
+    container.id = containerId;
+    body.appendChild(container);
+  }
+  const jrAlerDiv = document.createElement('div');
+  container.appendChild(jrAlerDiv);
+  client.createRoot(jrAlerDiv).render(/*#__PURE__*/React__default["default"].createElement(JRAlertWindow, _extends({}, props, {
+    container: jrAlerDiv
+  })));
+}
+
+const StyledInput = styled__default["default"].div`
+    display:flex;
+    input:focus{
+        outline: none; 
+    }
+`;
+class JRInput extends React__default["default"].Component {
+  setValue(value) {
+    this.props?.onChange?.(value);
+  }
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput, null, this.input());
+  }
+}
+
+class JROptions extends JRSubmit {
+  get optionsFrom() {
+    return this.props.options === undefined ? 'state' : 'props';
+  }
+  setOptions(options) {
+    if (this.props.setOptions) {
+      this.props.setOptions(options);
+    } else {
+      this.setState({
+        options: options
+      });
+    }
+  }
+  getOptions() {
+    return this[this.optionsFrom]?.options;
+  }
+  setRes(isSuccess, response, config) {
+    if (isSuccess) {
+      const options = config.formatValue?.bind(this)(response.data) ?? response.data;
+      response.data = options;
+      this.setOptions(options);
+    }
+  }
+}
+
+const StyledOption = styled__default["default"].option`
+`;
+const StyledSelect = styled__default["default"].select`
+    ${({
+  size,
+  multiple
+}) => `${size == 1 || size == undefined && multiple != true ? 'height:30px;' : ''}`}
+    width: 100%;
+
+    option{
+        padding: 4px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+    }
+`;
+class JRSelect extends JROptions {
+  renderer() {
+    const {
+      showBlank,
+      valueName = 'id',
+      labelName = 'name',
+      multiple,
+      size
+    } = this.props;
+    const options = [...(this.getOptions() ?? [])];
+    if (multiple != true && showBlank != false) options.unshift({
+      [valueName]: '',
+      [labelName]: ''
+    });
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledSelect, {
+      value: this.getValue() ?? (multiple ? [] : ''),
+      className: 'jr-select',
+      onChange: e => {
+        if (multiple) {
+          const selectedIndex = [...e.target.selectedOptions].map(option => option.index);
+          this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
+        } else {
+          const selectedIndex = e.target.selectedOptions[0].index;
+          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+        }
+      },
+      size: size,
+      multiple: multiple
+    }, options.map((record, key) => {
+      const props = {
+        value: record[valueName],
+        key: key
+      };
+      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+        props.className = 'selected';
+      }
+      return /*#__PURE__*/React__default["default"].createElement(StyledOption, props, record[labelName]);
+    })));
+  }
+}
+
+const StyledPick = styled__default["default"].div`
+    >label{
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        padding-right: 12px;
+    }
+`;
+
+class JRCheckbox extends JROptions {
+  renderer() {
+    const {
+      valueName = 'value',
+      labelName = 'label'
+    } = this.props;
+    const multiple = Array.isArray(this.getOptions() ?? []);
+    const options = multiple ? this.getOptions() : [this.getOptions()];
+    const value = multiple ? [...(this.getValue() ?? [])] : this.getValue();
+    const checked = multiple ? checkValue => {
+      return value.indexOf(checkValue) > -1;
+    } : checkValue => {
+      return checkValue == value;
+    };
+    return /*#__PURE__*/React__default["default"].createElement(StyledPick, {
+      className: 'jr-checkbox'
+    }, options?.map((record, key) => {
+      const recordValue = record[valueName];
+      return /*#__PURE__*/React__default["default"].createElement("label", {
+        key: key
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        type: 'checkbox',
+        multiple: multiple,
+        value: recordValue,
+        checked: checked(recordValue),
+        onChange: multiple ? e => {
+          if (e.target.checked) {
+            value.push(recordValue);
+          } else {
+            value.splice(value.indexOf(recordValue), 1);
+          }
+          this.setValue(value.length ? value : null);
+        } : e => {
+          this.setValue(e.target.checked ? recordValue : null);
+        }
+      }), record[labelName]);
+    }));
+  }
+}
+
+exports.JRAlert = JRAlert;
 exports.JRButton = JRButton;
+exports.JRCheckbox = JRCheckbox;
 exports.JRFields = JRFields;
 exports.JRFrame = JRFrame;
+exports.JRSelect = JRSelect;
 exports.JRSubmit = JRSubmit;
 exports.JRTable = JRTable;
 exports.JRTestReact = JRTestReact;