@neko-os/ui 0.2.3 → 0.3.0

package/dist/components/structure/overlay/smartPlacement.js

@@ -1 +1,32 @@
-export function smartPlacement(triggerRect,popoverRect,placement){var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;var screenWidth=window.innerWidth;var screenHeight=window.innerHeight;var viewportRect={left:triggerRect.left-scrollX,right:triggerRect.right-scrollX,top:triggerRect.top-scrollY,bottom:triggerRect.bottom-scrollY};var fitsRight=viewportRect.right+popoverRect.width<=screenWidth;var fitsLeft=viewportRect.left-popoverRect.width>=0;var fitsBottom=viewportRect.bottom+popoverRect.height<=screenHeight;var fitsTop=viewportRect.top-popoverRect.height>=0;if(placement.startsWith('right')&&!fitsRight&&fitsLeft)return placement.replace('right','left');if(placement.endsWith('Right')&&!fitsLeft&&fitsRight)return placement.replace('Right','Left');if(placement.startsWith('left')&&!fitsLeft&&fitsRight)return placement.replace('left','right');if(placement.endsWith('Left')&&!fitsRight&&fitsLeft)return placement.replace('Left','Right');if(placement.startsWith('bottom')&&!fitsBottom&&fitsTop)return placement.replace('bottom','top');if(placement.endsWith('Bottom')&&!fitsTop&&fitsBottom)return placement.replace('Bottom','Top');if(placement.startsWith('top')&&!fitsTop&&fitsBottom)return placement.replace('top','bottom');if(placement.endsWith('Top')&&!fitsBottom&&fitsTop)return placement.replace('Top','Bottom');return placement;}
+export function smartPlacement(triggerRect, popoverRect, placement) {
+  var scrollX = window.scrollX || window.pageXOffset;
+  var scrollY = window.scrollY || window.pageYOffset;
+  var screenWidth = window.innerWidth;
+  var screenHeight = window.innerHeight;
+
+  var viewportRect = {
+    left: triggerRect.left - scrollX,
+    right: triggerRect.right - scrollX,
+    top: triggerRect.top - scrollY,
+    bottom: triggerRect.bottom - scrollY
+  };
+
+  var fitsRight = viewportRect.right + popoverRect.width <= screenWidth;
+  var fitsLeft = viewportRect.left - popoverRect.width >= 0;
+  var fitsBottom = viewportRect.bottom + popoverRect.height <= screenHeight;
+  var fitsTop = viewportRect.top - popoverRect.height >= 0;
+
+  if (placement.startsWith('right') && !fitsRight && fitsLeft) return placement.replace('right', 'left');
+  if (placement.endsWith('Right') && !fitsLeft && fitsRight) return placement.replace('Right', 'Left');
+
+  if (placement.startsWith('left') && !fitsLeft && fitsRight) return placement.replace('left', 'right');
+  if (placement.endsWith('Left') && !fitsRight && fitsLeft) return placement.replace('Left', 'Right');
+
+  if (placement.startsWith('bottom') && !fitsBottom && fitsTop) return placement.replace('bottom', 'top');
+  if (placement.endsWith('Bottom') && !fitsTop && fitsBottom) return placement.replace('Bottom', 'Top');
+
+  if (placement.startsWith('top') && !fitsTop && fitsBottom) return placement.replace('top', 'bottom');
+  if (placement.endsWith('Top') && !fitsBottom && fitsTop) return placement.replace('Top', 'Bottom');
+
+  return placement;
+}

package/dist/components/structure/popover/Popover.js

@@ -1 +1,135 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.js";var _excluded=["renderContent","content","trigger","placement","unmountOnClose","children","parentWidth","parentMinWidth","useBottomDrawer","bottomDrawerProps","watch","disabled"],_excluded2=["children","content","renderContent","snapPoints"];import React from'react';import{BottomDrawer}from"../../modals/bottomDrawer";import{PopoverContent}from"./PopoverContent";import{useRegisterOverlay}from"../overlay/OverlayHandler";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export function Popover(_ref){var _this=this;var renderContent=_ref.renderContent,content=_ref.content,_ref$trigger=_ref.trigger,trigger=_ref$trigger===void 0?'hover':_ref$trigger,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,unmountOnClose=_ref.unmountOnClose,children=_ref.children,parentWidth=_ref.parentWidth,parentMinWidth=_ref.parentMinWidth,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,watch=_ref.watch,disabled=_ref.disabled,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _useRegisterOverlay=useRegisterOverlay({unmountOnClose:unmountOnClose}),onOpen=_useRegisterOverlay.onOpen,onUpdate=_useRegisterOverlay.onUpdate,onClose=_useRegisterOverlay.onClose,onFastClose=_useRegisterOverlay.onFastClose,stopDelayedClosing=_useRegisterOverlay.stopDelayedClosing;var click=trigger==='click';var hover=trigger==='hover';var focus=trigger==='focus';renderContent=renderContent||function(){return content;};var buildContent=function buildContent(){var _ref$current,_ref$current$getBound,_ref$current2,_ref$current2$getBoun;return _jsx(PopoverContent,Object.assign({placement:placement,width:parentWidth?(_ref$current=ref.current)==null?void 0:(_ref$current$getBound=_ref$current.getBoundingClientRect())==null?void 0:_ref$current$getBound.width:undefined,minWidth:parentMinWidth?(_ref$current2=ref.current)==null?void 0:(_ref$current2$getBoun=_ref$current2.getBoundingClientRect())==null?void 0:_ref$current2$getBoun.width:undefined},props,{onMouseEnter:hover?stopDelayedClosing:undefined,onMouseLeave:hover?onClose:undefined,children:renderContent({onClose:onFastClose})}));};var computeTriggerRect=function computeTriggerRect(){var rect=ref.current.getBoundingClientRect();var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;return{left:rect.left+scrollX,right:rect.right+scrollX,top:rect.top+scrollY,bottom:rect.bottom+scrollY,width:rect.width,height:rect.height};};var show=function show(e){if(e&&e.stopPropagation)e.stopPropagation();var triggerRect=computeTriggerRect();onOpen({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});};React.useEffect(function(){return function(){return onClose();};},[]);React.useEffect(function(){if(!ref.current||!watch)return;onUpdate({content:buildContent(),options:{dismissOnClickOutside:click||focus}});},watch);if(shouldUseDrawer){return _jsx(DrawerPopover,Object.assign({content:content,renderContent:renderContent,children:children},props,bottomDrawerProps));}var child=React.Children.only(children);var childProps={ref:ref,onClick:show};if(hover)childProps={ref:ref,onMouseEnter:show,onMouseLeave:onClose,disabled:disabled};if(focus)childProps={ref:ref,onFocus:show,disabled:disabled};return React.cloneElement(child,childProps);}function DrawerPopover(_ref2){var children=_ref2.children,content=_ref2.content,renderContent=_ref2.renderContent,snapPoints=_ref2.snapPoints,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var onClose=function onClose(){return setOpen(false);};var child=React.Children.only(children);var childProps={onClick:function onClick(){return setOpen(true);}};return _jsxs(_Fragment,{children:[React.cloneElement(child,childProps),_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},props,{children:renderContent({onClose:onClose})}))]});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.js";var _excluded = ["renderContent", "content", "trigger", "placement", "unmountOnClose", "children", "parentWidth", "parentMinWidth", "useBottomDrawer", "bottomDrawerProps", "watch", "disabled", "startsOpen", "onOpenChange"],_excluded2 = ["children", "content", "renderContent", "snapPoints", "onOpenChange"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import React from 'react';
+
+import { BottomDrawer } from "../../modals/bottomDrawer";
+import { PopoverContent } from "./PopoverContent";
+import { useRegisterOverlay } from "../overlay/OverlayHandler";
+import { useResponsiveValue } from "../../../responsive";import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function Popover(_ref)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var _this = this;var renderContent = _ref.renderContent,content = _ref.content,_ref$trigger = _ref.trigger,trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,_ref$placement = _ref.placement,placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,unmountOnClose = _ref.unmountOnClose,children = _ref.children,parentWidth = _ref.parentWidth,parentMinWidth = _ref.parentMinWidth,_ref$useBottomDrawer = _ref.useBottomDrawer,useBottomDrawer = _ref$useBottomDrawer === void 0 ? {} : _ref$useBottomDrawer,_ref$bottomDrawerProp = _ref.bottomDrawerProps,bottomDrawerProps = _ref$bottomDrawerProp === void 0 ? {} : _ref$bottomDrawerProp,watch = _ref.watch,disabled = _ref.disabled,startsOpen = _ref.startsOpen,onOpenChange = _ref.onOpenChange,props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseDrawer = useResponsiveValue(useBottomDrawer);
+  var ref = React.useRef(null);
+  var _useRegisterOverlay = useRegisterOverlay({
+      unmountOnClose: unmountOnClose,
+      onOpenChange: onOpenChange
+    }),onOpen = _useRegisterOverlay.onOpen,onUpdate = _useRegisterOverlay.onUpdate,onClose = _useRegisterOverlay.onClose,onFastClose = _useRegisterOverlay.onFastClose,stopDelayedClosing = _useRegisterOverlay.stopDelayedClosing;
+
+  var click = trigger === 'click';
+  var hover = trigger === 'hover';
+  var focus = trigger === 'focus';
+
+  renderContent = renderContent || function () {return content;};
+
+  var buildContent = function buildContent() {var _ref$current, _ref$current$getBound, _ref$current2, _ref$current2$getBoun;return (
+      _jsx(PopoverContent, Object.assign({
+        placement: placement,
+        width: parentWidth ? (_ref$current = ref.current) == null ? void 0 : (_ref$current$getBound = _ref$current.getBoundingClientRect()) == null ? void 0 : _ref$current$getBound.width : undefined,
+        minWidth: parentMinWidth ? (_ref$current2 = ref.current) == null ? void 0 : (_ref$current2$getBoun = _ref$current2.getBoundingClientRect()) == null ? void 0 : _ref$current2$getBoun.width : undefined },
+      props, {
+        onMouseEnter: hover ? stopDelayedClosing : undefined,
+        onMouseLeave: hover ? onClose : undefined, children:
+
+        renderContent({ onClose: onFastClose }) })
+      ));};
+
+
+  var computeTriggerRect = function computeTriggerRect() {
+    var rect = ref.current.getBoundingClientRect();
+    var scrollX = window.scrollX || window.pageXOffset;
+    var scrollY = window.scrollY || window.pageYOffset;
+    return {
+      left: rect.left + scrollX,
+      right: rect.right + scrollX,
+      top: rect.top + scrollY,
+      bottom: rect.bottom + scrollY,
+      width: rect.width,
+      height: rect.height
+    };
+  };
+
+  var show = function show(e) {
+    if (e && e.stopPropagation) e.stopPropagation();
+    var triggerRect = computeTriggerRect();
+    onOpen({
+      content: buildContent(),
+      triggerRect: triggerRect,
+      placement: placement,
+      options: { dismissOnClickOutside: click || focus }
+    });
+  };
+
+  React.useEffect(function () {
+    if (startsOpen && ref.current) show();
+    return function () {return onClose();};
+  }, []);
+
+  React.useEffect(function () {
+    if (!ref.current || !watch) return;
+    onUpdate({
+      content: buildContent(),
+      options: { dismissOnClickOutside: click || focus }
+    });
+  }, watch);
+
+  if (shouldUseDrawer) {
+    return (
+      _jsx(DrawerPopover, Object.assign({
+        content: content,
+        renderContent: renderContent,
+        children: children,
+        onOpenChange: onOpenChange },
+      props,
+      bottomDrawerProps)
+      ));
+
+  }
+
+  var child = React.Children.only(children);
+  var childProps = { ref: ref, onClick: show };
+
+  if (hover) childProps = { ref: ref, onMouseEnter: show, onMouseLeave: onClose, disabled: disabled };
+  if (focus) childProps = { ref: ref, onFocus: show, disabled: disabled };
+
+  return React.cloneElement(child, childProps);
+}
+
+function DrawerPopover(_ref2) {var children = _ref2.children,content = _ref2.content,renderContent = _ref2.renderContent,snapPoints = _ref2.snapPoints,onOpenChange = _ref2.onOpenChange,props = _objectWithoutProperties(_ref2, _excluded2);
+  var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),open = _React$useState2[0],setOpen = _React$useState2[1];
+  var onClose = function onClose() {
+    setOpen(false);
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  };
+
+  var child = React.Children.only(children);
+  var childProps = {
+    onClick: function onClick() {
+      setOpen(true);
+      onOpenChange == null ? void 0 : onOpenChange(true);
+    }
+  };
+
+  return (
+    _jsxs(_Fragment, { children: [
+      React.cloneElement(child, childProps),
+
+      _jsx(BottomDrawer, Object.assign({ open: open, onClose: onClose, snapPoints: snapPoints }, props, { children:
+        renderContent({ onClose: onClose }) })
+      )] }
+    ));
+
+}

package/dist/components/structure/popover/Popover.native.js

@@ -1 +1,105 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.native.js";var _excluded=["content","renderContent","placement","children","useBottomDrawer","bottomDrawerProps","snapPoints"];import{Modal,TouchableWithoutFeedback}from"react-native-web";import React from'react';import{BottomDrawer}from"../../modals/bottomDrawer";import{PopoverContent}from"./PopoverContent";import{View}from"../View";import{calculatePosition}from"../overlay/calculatePosition";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export function Popover(_ref){var _position$y,_position$x;var content=_ref.content,renderContent=_ref.renderContent,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,children=_ref.children,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,snapPoints=_ref.snapPoints,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var _React$useState3=React.useState(null),_React$useState4=_slicedToArray(_React$useState3,2),triggerRect=_React$useState4[0],setTriggerRect=_React$useState4[1];var _React$useState5=React.useState(null),_React$useState6=_slicedToArray(_React$useState5,2),position=_React$useState6[0],setPosition=_React$useState6[1];renderContent=renderContent||function(){return content;};var onOpen=function onOpen(){if(shouldUseDrawer){setOpen(true);return;}if(ref.current){ref.current.measureInWindow(function(x,y,width,height){setTriggerRect({left:x,top:y,right:x+width,bottom:y+height,width:width,height:height});setOpen(true);});}};var onClose=function onClose(){setOpen(false);setTriggerRect(null);setPosition(null);};children=React.cloneElement(React.Children.only(children),{onPress:onOpen});if(shouldUseDrawer){return _jsxs(View,{ref:ref,children:[children,_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},bottomDrawerProps,{children:renderContent({onClose:onClose})}))]});}return _jsxs(_Fragment,{children:[_jsx(View,{ref:ref,children:children}),open&&_jsx(Modal,{transparent:true,visible:open,animationType:"fade",onRequestClose:onClose,children:_jsx(View,{fullW:true,flex:true,fullH:true,bg:"backdrop_op50",children:_jsx(TouchableWithoutFeedback,{onPress:onClose,children:_jsx(View,{style:{flex:1},children:triggerRect&&_jsx(View,{style:{position:'absolute',top:(_position$y=position==null?void 0:position.y)!=null?_position$y:-9999,left:(_position$x=position==null?void 0:position.x)!=null?_position$x:-9999},onLayout:function onLayout(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;var popoverRect={width:width,height:height};var pos=calculatePosition(triggerRect,popoverRect,placement,8);setPosition(pos);},children:_jsx(PopoverContent,Object.assign({placement:placement},props,{children:renderContent({onClose:onClose})}))})})})})})]});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.native.js";var _excluded = ["content", "renderContent", "placement", "children", "useBottomDrawer", "bottomDrawerProps", "snapPoints"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { Modal, TouchableWithoutFeedback } from "react-native-web";
+import React from 'react';
+
+import { BottomDrawer } from "../../modals/bottomDrawer";
+import { PopoverContent } from "./PopoverContent";
+import { View } from "../View";
+import { calculatePosition } from "../overlay/calculatePosition";
+import { useResponsiveValue } from "../../../responsive";import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
+export function Popover(_ref)
+
+
+
+
+
+
+
+
+{var _position$y, _position$x;var content = _ref.content,renderContent = _ref.renderContent,_ref$placement = _ref.placement,placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,children = _ref.children,_ref$useBottomDrawer = _ref.useBottomDrawer,useBottomDrawer = _ref$useBottomDrawer === void 0 ? {} : _ref$useBottomDrawer,_ref$bottomDrawerProp = _ref.bottomDrawerProps,bottomDrawerProps = _ref$bottomDrawerProp === void 0 ? {} : _ref$bottomDrawerProp,snapPoints = _ref.snapPoints,props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseDrawer = useResponsiveValue(useBottomDrawer);
+  var ref = React.useRef(null);
+  var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),open = _React$useState2[0],setOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(null),_React$useState4 = _slicedToArray(_React$useState3, 2),triggerRect = _React$useState4[0],setTriggerRect = _React$useState4[1];
+  var _React$useState5 = React.useState(null),_React$useState6 = _slicedToArray(_React$useState5, 2),position = _React$useState6[0],setPosition = _React$useState6[1];
+
+  renderContent = renderContent || function () {return content;};
+
+  var onOpen = function onOpen() {
+    if (shouldUseDrawer) {
+      setOpen(true);
+      return;
+    }
+    if (ref.current) {
+      ref.current.measureInWindow(function (x, y, width, height) {
+        setTriggerRect({
+          left: x,
+          top: y,
+          right: x + width,
+          bottom: y + height,
+          width: width,
+          height: height
+        });
+        setOpen(true);
+      });
+    }
+  };
+
+  var onClose = function onClose() {
+    setOpen(false);
+    setTriggerRect(null);
+    setPosition(null);
+  };
+
+  children = React.cloneElement(React.Children.only(children), {
+    onPress: onOpen
+  });
+
+  if (shouldUseDrawer) {
+    return (
+      _jsxs(View, { ref: ref, children: [
+        children,
+
+        _jsx(BottomDrawer, Object.assign({ open: open, onClose: onClose, snapPoints: snapPoints }, bottomDrawerProps, { children:
+          renderContent({ onClose: onClose }) })
+        )] }
+      ));
+
+  }
+
+  return (
+    _jsxs(_Fragment, { children: [
+      _jsx(View, { ref: ref, children: children }),
+
+      open &&
+      _jsx(Modal, { transparent: true, visible: open, animationType: "fade", onRequestClose: onClose, children:
+        _jsx(View, { fullW: true, flex: true, fullH: true, bg: "backdrop_op50", children:
+          _jsx(TouchableWithoutFeedback, { onPress: onClose, children:
+            _jsx(View, { style: { flex: 1 }, children:
+              triggerRect &&
+              _jsx(View, {
+                style: {
+                  position: 'absolute',
+                  top: (_position$y = position == null ? void 0 : position.y) != null ? _position$y : -9999,
+                  left: (_position$x = position == null ? void 0 : position.x) != null ? _position$x : -9999
+                },
+                onLayout: function onLayout(e) {
+                  var _e$nativeEvent$layout = e.nativeEvent.layout,width = _e$nativeEvent$layout.width,height = _e$nativeEvent$layout.height;
+                  var popoverRect = { width: width, height: height };
+                  var pos = calculatePosition(triggerRect, popoverRect, placement, 8);
+                  setPosition(pos);
+                }, children:
+
+                _jsx(PopoverContent, Object.assign({ placement: placement }, props, { children:
+                  renderContent({ onClose: onClose }) })
+                ) }
+              ) }
+
+            ) }
+          ) }
+        ) }
+      )] }
+
+    ));
+
+}

package/dist/components/structure/popover/PopoverContent.js

@@ -1 +1,18 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/PopoverContent.js";var _excluded=["children","placement"];import{Card}from"../Card";import{jsx as _jsx}from"react/jsx-runtime";export function PopoverContent(_ref){var children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,props=_objectWithoutProperties(_ref,_excluded);return _jsx(Card,Object.assign({shadow:true,padding:"sm",br:"sm",className:"neko-popover-content",bg:"overlayBG",border:true,borderColor:"divider_op40"},props,{children:children}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/PopoverContent.js";var _excluded = ["children", "placement"];function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { Card } from "../Card";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function PopoverContent(_ref) {var children = _ref.children,_ref$placement = _ref.placement,placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,props = _objectWithoutProperties(_ref, _excluded);
+  return (
+    _jsx(Card, Object.assign({
+      shadow: true,
+      padding: "sm",
+      br: "sm",
+      className: "neko-popover-content",
+      bg: "overlayBG",
+      border: true,
+      borderColor: "divider_op40" },
+    props, { children:
+
+      children })
+    ));
+
+}

package/dist/components/structure/popover/Popover_BU.js

@@ -1 +1,157 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover_BU.js";var _excluded=["renderContent","content","trigger","placement","unmountOnClose","children","parentWidth","parentMinWidth","useBottomDrawer","bottomDrawerProps","watch"],_excluded2=["children","content","renderContent","snapPoints"];import React from'react';import{BottomDrawer}from"../../modals/bottomDrawer";import{PopoverContent}from"./PopoverContent";import{useRegisterOverlay}from"../overlay/OverlayHandler";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export function Popover(_ref){var _this=this;var renderContent=_ref.renderContent,content=_ref.content,_ref$trigger=_ref.trigger,trigger=_ref$trigger===void 0?'hover':_ref$trigger,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,unmountOnClose=_ref.unmountOnClose,children=_ref.children,parentWidth=_ref.parentWidth,parentMinWidth=_ref.parentMinWidth,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,watch=_ref.watch,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _useRegisterOverlay=useRegisterOverlay({unmountOnClose:unmountOnClose}),onOpen=_useRegisterOverlay.onOpen,onUpdate=_useRegisterOverlay.onUpdate,onClose=_useRegisterOverlay.onClose,onFastClose=_useRegisterOverlay.onFastClose,stopDelayedClosing=_useRegisterOverlay.stopDelayedClosing;var click=trigger==='click';var hover=trigger==='hover';var focus=trigger==='focus';renderContent=renderContent||function(){return content;};var buildContent=function buildContent(){var _ref$current,_ref$current$getBound,_ref$current2,_ref$current2$getBoun;return _jsx(PopoverContent,Object.assign({placement:placement,width:parentWidth?(_ref$current=ref.current)==null?void 0:(_ref$current$getBound=_ref$current.getBoundingClientRect())==null?void 0:_ref$current$getBound.width:undefined,minWidth:parentMinWidth?(_ref$current2=ref.current)==null?void 0:(_ref$current2$getBoun=_ref$current2.getBoundingClientRect())==null?void 0:_ref$current2$getBoun.width:undefined},props,{onMouseEnter:hover?stopDelayedClosing:undefined,onMouseLeave:hover?onClose:undefined,children:renderContent({onClose:onFastClose})}));};var computeTriggerRect=function computeTriggerRect(){var rect=ref.current.getBoundingClientRect();var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;return{left:rect.left+scrollX,right:rect.right+scrollX,top:rect.top+scrollY,bottom:rect.bottom+scrollY,width:rect.width,height:rect.height};};var show=function show(e){if(e&&e.stopPropagation)e.stopPropagation();var triggerRect=computeTriggerRect();onOpen({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});};React.useEffect(function(){return function(){return onClose();};},[]);React.useEffect(function(){if(!ref.current)return;var triggerRect=computeTriggerRect();onUpdate({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});},[watch,renderContent]);if(shouldUseDrawer){return _jsx(DrawerPopover,Object.assign({content:content,renderContent:renderContent,children:children},props,bottomDrawerProps));}var child=React.Children.only(children);var childProps={ref:ref,onClick:show};if(hover)childProps={ref:ref,onMouseEnter:show,onMouseLeave:onClose};if(focus)childProps={ref:ref,onFocus:show};return React.cloneElement(child,childProps);}function DrawerPopover(_ref2){var children=_ref2.children,content=_ref2.content,renderContent=_ref2.renderContent,snapPoints=_ref2.snapPoints,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var onClose=function onClose(){return setOpen(false);};var child=React.Children.only(children);var childProps={onClick:function onClick(){return setOpen(true);}};return _jsxs(_Fragment,{children:[React.cloneElement(child,childProps),_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},props,{children:renderContent({onClose:onClose})}))]});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover_BU.js";var _excluded = ["renderContent", "content", "trigger", "placement", "unmountOnClose", "children", "parentWidth", "parentMinWidth", "useBottomDrawer", "bottomDrawerProps", "watch"],_excluded2 = ["children", "content", "renderContent", "snapPoints"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import React from 'react';
+
+import { BottomDrawer } from "../../modals/bottomDrawer";
+import { PopoverContent } from "./PopoverContent";
+import { useRegisterOverlay } from "../overlay/OverlayHandler";
+import { useResponsiveValue } from "../../../responsive";import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function Popover(_ref)
+
+
+
+
+
+
+
+
+
+
+
+
+{var _this = this;var renderContent = _ref.renderContent,content = _ref.content,_ref$trigger = _ref.trigger,trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,_ref$placement = _ref.placement,placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,unmountOnClose = _ref.unmountOnClose,children = _ref.children,parentWidth = _ref.parentWidth,parentMinWidth = _ref.parentMinWidth,_ref$useBottomDrawer = _ref.useBottomDrawer,useBottomDrawer = _ref$useBottomDrawer === void 0 ? {} : _ref$useBottomDrawer,_ref$bottomDrawerProp = _ref.bottomDrawerProps,bottomDrawerProps = _ref$bottomDrawerProp === void 0 ? {} : _ref$bottomDrawerProp,watch = _ref.watch,props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseDrawer = useResponsiveValue(useBottomDrawer);
+  var ref = React.useRef(null);
+  var _useRegisterOverlay = useRegisterOverlay({ unmountOnClose: unmountOnClose }),onOpen = _useRegisterOverlay.onOpen,onUpdate = _useRegisterOverlay.onUpdate,onClose = _useRegisterOverlay.onClose,onFastClose = _useRegisterOverlay.onFastClose,stopDelayedClosing = _useRegisterOverlay.stopDelayedClosing;
+
+  var click = trigger === 'click';
+  var hover = trigger === 'hover';
+  var focus = trigger === 'focus';
+
+  renderContent = renderContent || function () {return content;};
+
+  var buildContent = function buildContent() {var _ref$current, _ref$current$getBound, _ref$current2, _ref$current2$getBoun;return (
+      _jsx(PopoverContent, Object.assign({
+        placement: placement,
+        width: parentWidth ? (_ref$current = ref.current) == null ? void 0 : (_ref$current$getBound = _ref$current.getBoundingClientRect()) == null ? void 0 : _ref$current$getBound.width : undefined,
+        minWidth: parentMinWidth ? (_ref$current2 = ref.current) == null ? void 0 : (_ref$current2$getBoun = _ref$current2.getBoundingClientRect()) == null ? void 0 : _ref$current2$getBoun.width : undefined },
+      props, {
+        onMouseEnter: hover ? stopDelayedClosing : undefined,
+        onMouseLeave: hover ? onClose : undefined, children:
+
+        renderContent({ onClose: onFastClose }) })
+      ));};
+
+
+  var computeTriggerRect = function computeTriggerRect() {
+    var rect = ref.current.getBoundingClientRect();
+    var scrollX = window.scrollX || window.pageXOffset;
+    var scrollY = window.scrollY || window.pageYOffset;
+    return {
+      left: rect.left + scrollX,
+      right: rect.right + scrollX,
+      top: rect.top + scrollY,
+      bottom: rect.bottom + scrollY,
+      width: rect.width,
+      height: rect.height
+    };
+  };
+
+  var show = function show(e) {
+    if (e && e.stopPropagation) e.stopPropagation();
+    var triggerRect = computeTriggerRect();
+    onOpen({
+      content: buildContent(),
+      triggerRect: triggerRect,
+      placement: placement,
+      options: { dismissOnClickOutside: click || focus }
+    });
+  };
+
+  React.useEffect(function () {return function () {return onClose();};}, []);
+
+
+  React.useEffect(function () {
+    if (!ref.current) return;
+    var triggerRect = computeTriggerRect();
+    onUpdate({
+      content: buildContent(),
+      triggerRect: triggerRect,
+      placement: placement,
+      options: { dismissOnClickOutside: click || focus }
+    });
+  }, [watch, renderContent]);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  if (shouldUseDrawer) {
+    return (
+      _jsx(DrawerPopover, Object.assign({
+        content: content,
+        renderContent: renderContent,
+        children: children },
+      props,
+      bottomDrawerProps)
+      ));
+
+  }
+
+  var child = React.Children.only(children);
+  var childProps = { ref: ref, onClick: show };
+
+  if (hover) childProps = { ref: ref, onMouseEnter: show, onMouseLeave: onClose };
+  if (focus) childProps = { ref: ref, onFocus: show };
+
+  return React.cloneElement(child, childProps);
+}
+
+function DrawerPopover(_ref2) {var children = _ref2.children,content = _ref2.content,renderContent = _ref2.renderContent,snapPoints = _ref2.snapPoints,props = _objectWithoutProperties(_ref2, _excluded2);
+  var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),open = _React$useState2[0],setOpen = _React$useState2[1];
+  var onClose = function onClose() {return setOpen(false);};
+
+  var child = React.Children.only(children);
+  var childProps = { onClick: function onClick() {return setOpen(true);} };
+
+  return (
+    _jsxs(_Fragment, { children: [
+      React.cloneElement(child, childProps),
+
+      _jsx(BottomDrawer, Object.assign({ open: open, onClose: onClose, snapPoints: snapPoints }, props, { children:
+        renderContent({ onClose: onClose }) })
+      )] }
+    ));
+
+}

package/dist/components/table/DataTable.js

@@ -1 +1,62 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["render","field","key","label"],_excluded2=["data","columns","rowKey","stickyHeader","grid"],_excluded3=["key"];var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/table/DataTable.js";import{pipe}from'ramda';import{Table}from'..';import{TableCol}from"./TableCol";import{TableHeader}from"./TableHeader";import{TableHeaderRow}from"./TableHeaderRow";import{TableRow}from"./TableRow";import{useSizeConverter}from"../../modifiers/sizeConverter";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function RowItem(_ref){var _this=this;var record=_ref.record,columns=_ref.columns,size=_ref.size,grid=_ref.grid;return _jsx(TableRow,{children:columns.map(function(_ref2,index){var render=_ref2.render,field=_ref2.field,key=_ref2.key,label=_ref2.label,column=_objectWithoutProperties(_ref2,_excluded);render=render||function(v){return v;};var value=record[field];var colProps=Object.assign({},column,{size:size});if(!column.borderR&&columns.length-1>index&&grid)colProps.borderR=true;return _jsx(TableCol,Object.assign({},colProps,{children:render(value,record)}),key);})});}export function DataTable(_ref3){var _this2=this;var data=_ref3.data,columns=_ref3.columns,_ref3$rowKey=_ref3.rowKey,rowKey=_ref3$rowKey===void 0?'key':_ref3$rowKey,stickyHeader=_ref3.stickyHeader,grid=_ref3.grid,props=_objectWithoutProperties(_ref3,_excluded2);var _pipe=pipe(useSizeConverter('padding','md'))([{},props]),_pipe2=_slicedToArray(_pipe,2),sizeCode=_pipe2[0].sizeCode,_=_pipe2[1];return _jsxs(Table,Object.assign({},props,{children:[_jsx(TableHeaderRow,{sticky:stickyHeader,children:columns.map(function(_ref4,index){var key=_ref4.key,column=_objectWithoutProperties(_ref4,_excluded3);var headerProps=Object.assign({},column,{size:sizeCode});if(!column.borderR&&columns.length-1>index&&grid)headerProps.borderR=true;return _jsx(TableHeader,Object.assign({},headerProps),column.key);})}),data.map(function(record,index){return _jsx(RowItem,{columns:columns,record:record,size:sizeCode,grid:grid},record[rowKey]||(record==null?void 0:record.id)||index);})]}));}
+var _excluded = ["render", "field", "key", "label"],_excluded2 = ["data", "columns", "rowKey", "stickyHeader", "grid"],_excluded3 = ["key", "render", "renderHeader", "field", "label"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/table/DataTable.js";function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe } from 'ramda';
+
+import { Table } from '..';
+import { TableCol } from "./TableCol";
+import { TableHeader } from "./TableHeader";
+import { TableHeaderRow } from "./TableHeaderRow";
+import { TableRow } from "./TableRow";
+import { useSizeConverter } from "../../modifiers/sizeConverter";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+function RowItem(_ref) {var _this = this;var record = _ref.record,columns = _ref.columns,size = _ref.size,grid = _ref.grid;
+  return (
+    _jsx(TableRow, { children:
+      columns.map(function (_ref2, index) {var render = _ref2.render,field = _ref2.field,key = _ref2.key,label = _ref2.label,column = _objectWithoutProperties(_ref2, _excluded);
+        render = render || function (v) {return v;};
+        var value = record[field];
+
+        var colProps = Object.assign({}, column, { size: size });
+        if (!column.borderR && columns.length - 1 > index && grid) colProps.borderR = true;
+
+        return (
+          _jsx(TableCol, Object.assign({}, colProps, { children:
+            render(value, record) }), key
+          ));
+
+      }) }
+    ));
+
+}
+
+export function DataTable(_ref3) {var _this2 = this;var data = _ref3.data,columns = _ref3.columns,_ref3$rowKey = _ref3.rowKey,rowKey = _ref3$rowKey === void 0 ? 'key' : _ref3$rowKey,stickyHeader = _ref3.stickyHeader,grid = _ref3.grid,props = _objectWithoutProperties(_ref3, _excluded2);
+  var _pipe = pipe(
+      useSizeConverter('padding', 'md')
+    )([{}, props]),_pipe2 = _slicedToArray(_pipe, 2),sizeCode = _pipe2[0].sizeCode,_ = _pipe2[1];
+
+  return (
+    _jsxs(Table, Object.assign({}, props, { children: [
+      _jsx(TableHeaderRow, { sticky: stickyHeader, children:
+        columns.map(function (rawColumn, index) {
+          var key = rawColumn.key,render = rawColumn.render,renderHeader = rawColumn.renderHeader,field = rawColumn.field,label = rawColumn.label,column = _objectWithoutProperties(rawColumn, _excluded3);
+          var headerProps = Object.assign({}, column, { size: sizeCode });
+          if (!column.borderR && columns.length - 1 > index && grid) headerProps.borderR = true;
+
+          return (
+            _jsx(TableHeader, Object.assign({}, headerProps, { children:
+              renderHeader ? renderHeader(rawColumn) : label }), key
+            ));
+
+        }) }
+      ),
+
+      data.map(function (record, index) {return (
+          _jsx(RowItem, {
+
+            columns: columns,
+            record: record,
+            size: sizeCode,
+            grid: grid }, record[rowKey] || (record == null ? void 0 : record.id) || index
+          ));}
+      )] })
+    ));
+
+}