@onesy/ui-react 1.0.200 → 1.0.202

package/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IType } from '../Type/Type';
 export declare type ILink = IType & {
-    underline?: true | 'hover';
+    underline?: boolean | 'hover';
     href?: string;
     target?: string;
 };

package/ListItem/ListItem.js

@@ -41,7 +41,8 @@ const useStyle = (0, _styleReact.style)(theme => {
       boxSizing: 'border-box',
       position: 'relative',
       display: 'inline-flex',
-      width: '100%'
+      width: '100%',
+      textAlign: 'left'
     },
     shape_round_position_both: {
       borderRadius: theme.methods.shape.radius.value(40, 'px')
@@ -265,7 +266,7 @@ const ListItem = props_ => {
       onMouseEnter,
       onMouseLeave,
       onClose: onClose_,
-      RootComponent: RootComponentProps = 'div',
+      RootComponent: RootComponentProps,
       WrapperProps,
       RootProps,
       InteractionProps,
@@ -287,6 +288,7 @@ const ListItem = props_ => {
   } = useStyle();
   const [focus, setFocus] = _react.default.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
+    wrapper: _react.default.useRef(undefined),
     root: _react.default.useRef(undefined),
     props: _react.default.useRef(undefined),
     ids: {
@@ -313,7 +315,7 @@ const ListItem = props_ => {
     secondary: {},
     tertiary: {}
   };
-  let RootComponent = RootComponentProps;
+  let RootComponent = RootComponentProps || (button || interaction ? 'button' : 'div');
   if (href) RootComponent = 'a';
   const colorToUse = selected ? colorSelected : color;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread(_objectSpread({
@@ -321,7 +323,7 @@ const ListItem = props_ => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
       }
-      refs.root.current = item;
+      refs.wrapper.current = item;
     },
     tonal: tonal,
     color: colorToUse,
@@ -335,6 +337,7 @@ const ListItem = props_ => {
     style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style)
   }, other), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RootComponent, _objectSpread(_objectSpread({
+      ref: refs.root,
       href: href,
       tabIndex: tabIndex !== undefined ? tabIndex : button && !(readOnly || disabled) ? 0 : undefined,
       onClick: onClick,
@@ -348,7 +351,7 @@ const ListItem = props_ => {
       disabled: disabled,
       children: [(href || button || interaction) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
         border: false,
-        preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined,
+        preselected: preselected,
         pulse: focus,
         selected: selected,
         disabled: disabled

package/MenuItem/MenuItem.js

@@ -203,8 +203,6 @@ const MenuItem = props_ => {
       setOpenList(false);
       setHover(false);
       setFocus(false);
-
-      // if (is('function', onClose_)) onClose_();
     }
   };
   const onCloseMenu = () => {
@@ -212,8 +210,6 @@ const MenuItem = props_ => {
       setOpenMenu(false);
       setHover(false);
       setFocus(false);
-
-      // if (is('function', onClose_)) onClose_();
     }
   };
   ListTransitionComponentProps.in = !!openList;
@@ -241,11 +237,9 @@ const MenuItem = props_ => {
       onMouseLeave: onMouseLeave,
       "aria-haspopup": !!menu,
       "aria-expanded": openMenu,
+      button: !!onClick,
       menuItem: true,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
-      InteractionProps: {
-        focus
-      },
       RootProps: {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
       },

package/esm/ListItem/ListItem.js

@@ -34,7 +34,8 @@ const useStyle = styleMethod(theme => {
       boxSizing: 'border-box',
       position: 'relative',
       display: 'inline-flex',
-      width: '100%'
+      width: '100%',
+      textAlign: 'left'
     },
     shape_round_position_both: {
       borderRadius: theme.methods.shape.radius.value(40, 'px')
@@ -257,7 +258,7 @@ const ListItem = props_ => {
       onMouseEnter,
       onMouseLeave,
       onClose: onClose_,
-      RootComponent: RootComponentProps = 'div',
+      RootComponent: RootComponentProps,
       WrapperProps,
       RootProps,
       InteractionProps,
@@ -279,6 +280,7 @@ const ListItem = props_ => {
   } = useStyle();
   const [focus, setFocus] = React.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
+    wrapper: React.useRef(undefined),
     root: React.useRef(undefined),
     props: React.useRef(undefined),
     ids: {
@@ -305,7 +307,7 @@ const ListItem = props_ => {
     secondary: {},
     tertiary: {}
   };
-  let RootComponent = RootComponentProps;
+  let RootComponent = RootComponentProps || (button || interaction ? 'button' : 'div');
   if (href) RootComponent = 'a';
   const colorToUse = selected ? colorSelected : color;
   return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread(_objectSpread({
@@ -313,7 +315,7 @@ const ListItem = props_ => {
       if (ref) {
         if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
       }
-      refs.root.current = item;
+      refs.wrapper.current = item;
     },
     tonal: tonal,
     color: colorToUse,
@@ -327,6 +329,7 @@ const ListItem = props_ => {
     style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps?.style)
   }, other), {}, {
     children: [/*#__PURE__*/_jsxs(RootComponent, _objectSpread(_objectSpread({
+      ref: refs.root,
       href: href,
       tabIndex: tabIndex !== undefined ? tabIndex : button && !(readOnly || disabled) ? 0 : undefined,
       onClick: onClick,
@@ -340,7 +343,7 @@ const ListItem = props_ => {
       disabled: disabled,
       children: [(href || button || interaction) && /*#__PURE__*/_jsx(Interaction, _objectSpread({
         border: false,
-        preselected: InteractionProps?.focus || preselected || undefined,
+        preselected: preselected,
         pulse: focus,
         selected: selected,
         disabled: disabled

package/esm/MenuItem/MenuItem.js

@@ -194,8 +194,6 @@ const MenuItem = props_ => {
       setOpenList(false);
       setHover(false);
       setFocus(false);
-
-      // if (is('function', onClose_)) onClose_();
     }
   };
   const onCloseMenu = () => {
@@ -203,8 +201,6 @@ const MenuItem = props_ => {
       setOpenMenu(false);
       setHover(false);
       setFocus(false);
-
-      // if (is('function', onClose_)) onClose_();
     }
   };
   ListTransitionComponentProps.in = !!openList;
@@ -232,11 +228,9 @@ const MenuItem = props_ => {
       onMouseLeave: onMouseLeave,
       "aria-haspopup": !!menu,
       "aria-expanded": openMenu,
+      button: !!onClick,
       menuItem: true,
       className: classNames([staticClassName('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
-      InteractionProps: {
-        focus
-      },
       RootProps: {
         className: classNames([staticClassName('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
       },

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.199
+/** @license UiReact v1.0.201
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.199
+/** @license UiReact v1.0.201
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.200",
+  "version": "1.0.202",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",