@neko-os/ui 0.0.12 → 0.0.13

package/dist/components/actions/Dropdown.js

@@ -1 +1 @@
-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/actions/Dropdown.js";var _excluded=["items"],_excluded2=["onChange","label","trigger","icon","strong","color","popoverProps","iconLabelProps","children","placement","gap","useBottomDrawer"];import{pipe}from'ramda';import{IconLabel}from"../presentation/IconLabel";import{Link}from"./Link";import{Menu}from"./menu/Menu";import{Popover}from"../structure/popover/Popover";import{View}from"../structure/View";import{useResponsiveValue}from"../../responsive";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Dropdown(_ref){var _this=this;var items=_ref.items,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('Dropdown'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],formattedProps=_pipe2[1];var onChange=formattedProps.onChange,label=formattedProps.label,_formattedProps$trigg=formattedProps.trigger,trigger=_formattedProps$trigg===void 0?'click':_formattedProps$trigg,icon=formattedProps.icon,strong=formattedProps.strong,color=formattedProps.color,popoverProps=formattedProps.popoverProps,iconLabelProps=formattedProps.iconLabelProps,children=formattedProps.children,placement=formattedProps.placement,gap=formattedProps.gap,useBottomDrawer=formattedProps.useBottomDrawer,props=_objectWithoutProperties(formattedProps,_excluded2);useBottomDrawer=useResponsiveValue(useBottomDrawer||{native:true,sm:true,md:true});return _jsx(View,Object.assign({className:"neko-dropdown"},props,{children:_jsx(Popover,Object.assign({useParentMinWidth:true,placement:placement||'bottomLeft',trigger:trigger,padding:0,contentProps:{padding:0},useBottomDrawer:useBottomDrawer},popoverProps,{renderContent:function renderContent(_ref2){var onClose=_ref2.onClose;var handleChange=function handleChange(){if(onChange)onChange.apply(void 0,arguments);onClose();};return _jsx(Menu,{vertical:true,items:items,onChange:handleChange,linkPaddingH:useBottomDrawer?'md':'sm',linkMinHeight:useBottomDrawer?'xl':'md',withDivider:useBottomDrawer});},children:children||_jsx(Link,{children:_jsx(IconLabel,Object.assign({label:label||'---',icon:icon||'arrow-down-s-fill',strong:strong,color:color,invert:true,gap:gap},iconLabelProps))})}))}));}
+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/actions/Dropdown.js";var _excluded=["items"],_excluded2=["onChange","label","trigger","icon","strong","color","popoverProps","iconLabelProps","children","placement","gap","useBottomDrawer"];import{pipe}from'ramda';import{IconLabel}from"../presentation/IconLabel";import{Link}from"./Link";import{Menu}from"./menu/Menu";import{Popover}from"../structure/popover/Popover";import{ScrollView}from"../list";import{View}from"../structure/View";import{useResponsiveValue}from"../../responsive";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Dropdown(_ref){var _this=this;var items=_ref.items,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('Dropdown'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],formattedProps=_pipe2[1];var onChange=formattedProps.onChange,label=formattedProps.label,_formattedProps$trigg=formattedProps.trigger,trigger=_formattedProps$trigg===void 0?'click':_formattedProps$trigg,icon=formattedProps.icon,strong=formattedProps.strong,color=formattedProps.color,popoverProps=formattedProps.popoverProps,iconLabelProps=formattedProps.iconLabelProps,children=formattedProps.children,placement=formattedProps.placement,gap=formattedProps.gap,useBottomDrawer=formattedProps.useBottomDrawer,props=_objectWithoutProperties(formattedProps,_excluded2);useBottomDrawer=useResponsiveValue(useBottomDrawer||{native:true,sm:true,md:true});return _jsx(View,Object.assign({className:"neko-dropdown"},props,{children:_jsx(Popover,Object.assign({useParentMinWidth:true,placement:placement||'bottomLeft',trigger:trigger,padding:0,contentProps:{padding:0},useBottomDrawer:useBottomDrawer},popoverProps,{renderContent:function renderContent(_ref2){var onClose=_ref2.onClose;var handleChange=function handleChange(){if(onChange)onChange.apply(void 0,arguments);onClose();};return _jsx(ScrollView,{children:_jsx(Menu,{vertical:true,items:items,onChange:handleChange,linkPaddingH:useBottomDrawer?'md':'sm',linkMinHeight:useBottomDrawer?'xl':'md',withDivider:useBottomDrawer})});},children:children||_jsx(Link,{children:_jsx(IconLabel,Object.assign({label:label||'---',icon:icon||'arrow-down-s-fill',strong:strong,color:color,invert:true,gap:gap},iconLabelProps))})}))}));}

package/dist/components/actions/menu/VerticalMenu.js

@@ -1 +1 @@
-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/actions/menu/VerticalMenu.js";var _excluded=["item","linkPaddingH","linkPaddingV","linkMinHeight","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["item"],_excluded4=["gap","items","onChange","onChangeIndex","withDivider"];import{omit,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{Divider}from"../../helpers/Separator";import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{List}from"../../list/FlatList";import{SubmenuWrapper}from"./SubmenuWrapper";import{Text}from"../../text/Text";import{View}from"../../structure/View";import{moveScale}from"../../../theme/helpers/sizeScale";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";function LinkItem(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,_ref$linkPaddingV=_ref.linkPaddingV,linkPaddingV=_ref$linkPaddingV===void 0?'xs':_ref$linkPaddingV,linkMinHeight=_ref.linkMinHeight,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;var bg=active&&tinycolor(color).setAlpha(0.03).toString();linkMinHeight=linkMinHeight||moveScale(sizeCode,1);return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,children:_jsx(Link,Object.assign({fullW:true,center:true,paddingH:linkPaddingH,paddingV:linkPaddingV,minHeight:linkMinHeight,marginR:3,borderL:3,brColor:active?activeColor:'transparent',bg:bg,transition:"border-color 0.5s ease, background 0.3s ease",hover:{br:0}},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({addingV:active&&4,color:active?activeColor:color,fullW:true,size:sizeCode},childProps))}))});}function DividerItem(_ref2){var _ref2$linkPaddingH=_ref2.linkPaddingH,linkPaddingH=_ref2$linkPaddingH===void 0?'md':_ref2$linkPaddingH,item=_ref2.item;var content=_jsx(Divider,Object.assign({height:"xxs",line:true},item));if(!item.label)return content;return _jsxs(_Fragment,{children:[content,_jsx(Text,Object.assign({size:"xs",color:"text4",paddingV:"xs",paddingH:linkPaddingH||'md',strong:true},item))]});}function Item(_ref3){var item=_ref3.item,props=_objectWithoutProperties(_ref3,_excluded3);if(item.type==='divider')return _jsx(DividerItem,Object.assign({item:item},props));return _jsx(LinkItem,Object.assign({item:item},props));}export function VerticalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter('text'),useSizeConverter('icons','md'),useThemeComponentModifier('VerticalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,withDivider=formattedProps.withDivider,props=_objectWithoutProperties(formattedProps,_excluded4);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:_jsx(List,{data:items,keyExtractor:function keyExtractor(item,index){return item.key||index;},divider:withDivider,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);}})}));return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);})}));}
+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/actions/menu/VerticalMenu.js";var _excluded=["item","linkPaddingH","linkPaddingV","linkMinHeight","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["item"],_excluded4=["gap","items","onChange","onChangeIndex","withDivider"];import{omit,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{Divider}from"../../helpers/Separator";import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{List}from"../../list/FlatList";import{SubmenuWrapper}from"./SubmenuWrapper";import{Text}from"../../text/Text";import{View}from"../../structure/View";import{moveScale}from"../../../theme/helpers/sizeScale";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";function LinkItem(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,_ref$linkPaddingV=_ref.linkPaddingV,linkPaddingV=_ref$linkPaddingV===void 0?'xs':_ref$linkPaddingV,linkMinHeight=_ref.linkMinHeight,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;var bg=active&&tinycolor(color).setAlpha(0.03).toString();linkMinHeight=linkMinHeight||moveScale(sizeCode,1);return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,children:_jsx(Link,Object.assign({flex:true,center:true,paddingH:linkPaddingH,paddingV:linkPaddingV,minHeight:linkMinHeight,borderL:3,brColor:active?activeColor:'transparent',bg:bg,transition:"border-color 0.5s ease, background 0.3s ease",hover:{br:0}},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({addingV:active&&4,color:active?activeColor:color,fullW:true,size:sizeCode},childProps))}))});}function DividerItem(_ref2){var _ref2$linkPaddingH=_ref2.linkPaddingH,linkPaddingH=_ref2$linkPaddingH===void 0?'md':_ref2$linkPaddingH,item=_ref2.item;var content=_jsx(Divider,Object.assign({height:"xxs",line:true},item));if(!item.label)return content;return _jsxs(_Fragment,{children:[content,_jsx(Text,Object.assign({size:"xs",color:"text4",paddingV:"xs",paddingH:linkPaddingH||'md',strong:true},item))]});}function Item(_ref3){var item=_ref3.item,props=_objectWithoutProperties(_ref3,_excluded3);if(item.type==='divider')return _jsx(DividerItem,Object.assign({item:item},props));return _jsx(LinkItem,Object.assign({item:item},props));}export function VerticalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter('text'),useSizeConverter('icons','md'),useThemeComponentModifier('VerticalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,withDivider=formattedProps.withDivider,props=_objectWithoutProperties(formattedProps,_excluded4);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:_jsx(List,{data:items,keyExtractor:function keyExtractor(item,index){return item.key||index;},divider:withDivider,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);}})}));return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);})}));}

package/dist/components/structure/drawer/Drawer.web.js

@@ -0,0 +1 @@
+import{BottomDrawer}from"../bottomDrawer/native/BottomDrawer";export var Drawer=BottomDrawer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/actions/Dropdown.js

@@ -4,6 +4,7 @@ import { IconLabel } from '../presentation/IconLabel'
 import { Link } from './Link'
 import { Menu } from './menu/Menu'
 import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
 import { View } from '../structure/View'
 import { useResponsiveValue } from '../../responsive'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
@@ -58,14 +59,16 @@ export function Dropdown({ items, ...rootProps }) {
             onClose()
           }
           return (
-            <Menu
-              vertical
-              items={items}
-              onChange={handleChange}
-              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
-              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
-              withDivider={useBottomDrawer}
-            />
+            <ScrollView>
+              <Menu
+                vertical
+                items={items}
+                onChange={handleChange}
+                linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+                linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+                withDivider={useBottomDrawer}
+              />
+            </ScrollView>
           )
         }}
       >

package/src/components/actions/menu/VerticalMenu.js

@@ -39,12 +39,11 @@ function LinkItem({
   return (
     <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
       <Link
-        fullW
+        flex
         center
         paddingH={linkPaddingH}
         paddingV={linkPaddingV}
         minHeight={linkMinHeight}
-        marginR={3}
         borderL={3}
         brColor={active ? activeColor : 'transparent'}
         bg={bg}

package/src/components/structure/drawer/Drawer.web.js

@@ -0,0 +1,3 @@
+import { BottomDrawer } from '../bottomDrawer/native/BottomDrawer'
+
+export const Drawer = BottomDrawer