@os-design/core - npm Package Compare versions

Comparing version 1.0.169 to 1.0.170

dist/cjs/ListItem/index.js

@@ -7,14 +7,13 @@ "use strict";
 });
-exports["default"] = exports.ListItemContainer = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports["default"] = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styles = require("@os-design/styles");
-var _utils = require("@os-design/utils");
 var _theming = require("@os-design/theming");
-var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-var _excluded = ["title", "description", "left", "right", "actions", "onTouchStart", "onTouchMove", "onTouchEnd"];
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _react = _interopRequireWildcard(require("react"));
+var _ListItemActions = _interopRequireDefault(require("../ListItemActions"));
+var _excluded = ["title", "description", "left", "right"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -24,5 +23,24 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var ListItemContainer = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ", ";\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ";\n"])), function (p) {
+var Container = (0, _styled["default"])(_ListItemActions["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ", ";\n  }\n\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.listItemColorBorder);
 }, (0, _styles.horizontalPaddingStyles)());
+var Content = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+var Title = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: 500;\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, _styles.ellipsisStyles);
+var Description = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "em;\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.listItemColorDescription);
+}, function (p) {
+  return p.theme.sizes.small;
+}, _styles.ellipsisStyles);
+var LeftAddon = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-right: ", "em;\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, function (p) {
+  return p.theme.listItemAddonPaddingHorizontal;
+});
+var RightAddon = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: auto;\n  padding-left: ", "em;\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, function (p) {
+  return p.theme.listItemAddonPaddingHorizontal;
+});
 
@@ -32,3 +50,2 @@ /**
  */
-exports.ListItemContainer = ListItemContainer;
 var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -39,40 +56,6 @@ var title = _ref.title,
     right = _ref.right,
-    _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? [] : _ref$actions,
-    _ref$onTouchStart = _ref.onTouchStart,
-    _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
-    _ref$onTouchMove = _ref.onTouchMove,
-    _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
-    _ref$onTouchEnd = _ref.onTouchEnd,
-    _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var touchDevice = (0, _react.useMemo)(function () {
-    return (0, _utils.isTouchDevice)();
-  }, []);
-  var _useSwipe = (0, _utils.useSwipe)(),
-    opened = _useSwipe.opened,
-    handlers = _useSwipe.handlers;
-  return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, rest, {
-    onTouchStart: function onTouchStart(e) {
-      handlers.onTouchStart(e);
-      _onTouchStart(e);
-    },
-    onTouchMove: function onTouchMove(e) {
-      handlers.onTouchMove(e);
-      _onTouchMove(e);
-    },
-    onTouchEnd: function onTouchEnd(e) {
-      handlers.onTouchEnd(e);
-      _onTouchEnd(e);
-    },
+  return /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
     ref: ref
-  }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
-    title: title,
-    description: description,
-    left: left,
-    right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
-  }));
+  }), left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description)), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right));
 });
@@ -79,0 +62,0 @@ ListItem.displayName = 'ListItem';

dist/cjs/ListItemLink/index.js

@@ -8,15 +8,12 @@ "use strict";
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _utils = require("@os-design/utils");
+var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
-var _styles = require("@os-design/styles");
-var _react2 = require("@emotion/react");
-var _ListItem = require("../ListItem");
-var _ListItemContent = _interopRequireDefault(require("../ListItem/ListItemContent"));
-var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown", "onTouchStart", "onTouchMove", "onTouchEnd"];
-var _templateObject, _templateObject2;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _react = _interopRequireWildcard(require("react"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _excluded = ["title", "description", "left", "right", "actions"];
+var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -32,8 +29,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var actionsBgStyles = function actionsBgStyles(p) {
-  return !p.touchDevice && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ", ",\n        ", "\n          ", "em\n      );\n    }\n  "])), (0, _theming.clr)([].concat(_toConsumableArray(p.theme.listItemColorBgHover.slice(0, 3)), [0])), (0, _theming.clr)(p.theme.listItemColorBgHover), p.theme.listItemActionsPaddingLeft);
-};
-var StyledLink = (0, _styled["default"])(_ListItem.ListItemContainer.withComponent('a'), (0, _utils.omitEmotionProps)('touchDevice', 'as'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
+var Link = _styled["default"].a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ", ";\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ", ",\n            ", "\n              ", "em\n          );\n        }\n      }\n    }\n  }\n"])), _styles.resetFocusStyles, function (p) {
   return (0, _theming.clr)(p.theme.listItemColorBgHover);
-}, actionsBgStyles);
+}, function (p) {
+  return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.listItemColorBgHover.slice(0, 3)), [0]));
+}, function (p) {
+  return (0, _theming.clr)(p.theme.listItemColorBgHover);
+}, function (p) {
+  return p.theme.listItemActionsPaddingLeft;
+});
 
@@ -48,42 +48,7 @@ /**
     right = _ref.right,
-    _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? [] : _ref$actions,
-    as = _ref.as,
-    _ref$onMouseDown = _ref.onMouseDown,
-    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    _ref$onTouchStart = _ref.onTouchStart,
-    _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
-    _ref$onTouchMove = _ref.onTouchMove,
-    _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
-    _ref$onTouchEnd = _ref.onTouchEnd,
-    _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
+    actions = _ref.actions,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var touchDevice = (0, _react.useMemo)(function () {
-    return (0, _utils.isTouchDevice)();
-  }, []);
-  var _useSwipe = (0, _utils.useSwipe)(),
-    opened = _useSwipe.opened,
-    handlers = _useSwipe.handlers;
-  return /*#__PURE__*/_react["default"].createElement(StyledLink, _extends({
-    touchDevice: touchDevice,
-    as: as
-  }, rest, {
-    onMouseDown: function onMouseDown(e) {
-      _onMouseDown(e);
-      e.preventDefault();
-    },
-    onTouchStart: function onTouchStart(e) {
-      handlers.onTouchStart(e);
-      _onTouchStart(e);
-    },
-    onTouchMove: function onTouchMove(e) {
-      handlers.onTouchMove(e);
-      _onTouchMove(e);
-    },
-    onTouchEnd: function onTouchEnd(e) {
-      handlers.onTouchEnd(e);
-      _onTouchEnd(e);
-    },
+  return /*#__PURE__*/_react["default"].createElement(Link, _extends({}, rest, {
     ref: ref
-  }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
     title: title,
@@ -93,5 +58,3 @@ description: description,
     right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
+    actions: actions
   }));
@@ -98,0 +61,0 @@ });

dist/cjs/ListSkeleton/index.js

@@ -8,14 +8,13 @@ "use strict";
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
+var _react = _interopRequireWildcard(require("react"));
+var _List = _interopRequireDefault(require("../List"));
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-var _List = _interopRequireDefault(require("../List"));
-var _ListItemContent = require("../ListItem/ListItemContent");
 var _excluded = ["hasDescription", "titleWidth", "descriptionWidth", "itemCount", "left", "right"];
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -32,2 +31,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 });
+var LeftAddon = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-right: ", "em;\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, function (p) {
+  return p.theme.listItemAddonPaddingHorizontal;
+});
+var RightAddon = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: auto;\n  padding-left: ", "em;\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, function (p) {
+  return p.theme.listItemAddonPaddingHorizontal;
+});
 
@@ -53,7 +62,7 @@ /**
       style: style
-    }, left && /*#__PURE__*/_react["default"].createElement(_ListItemContent.LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    }, left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
       width: titleWidth
     }), hasDescription && /*#__PURE__*/_react["default"].createElement(DescriptionSkeleton, {
       width: descriptionWidth
-    })), right && /*#__PURE__*/_react["default"].createElement(_ListItemContent.RightAddon, null, right));
+    })), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right));
   }, [descriptionWidth, hasDescription, left, right, titleWidth]);
@@ -60,0 +69,0 @@ return /*#__PURE__*/_react["default"].createElement(_List["default"], _extends({

dist/esm/ListItem/index.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { horizontalPaddingStyles } from '@os-design/styles';
-import { isTouchDevice, useSwipe } from '@os-design/utils';
+import { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import ListItemContent from './ListItemContent';
-export const ListItemContainer = styled.div`
-  position: relative;
+import React, { forwardRef } from 'react';
+import ListItemActions from '../ListItemActions';
+const Container = styled(ListItemActions)`
   box-sizing: border-box;
@@ -21,19 +19,26 @@ min-height: 4em;
 
-  @media (hover: hover) {
-    // Hide actions by default
-    & > nav {
-      opacity: 0;
-    }
-
-    // Display actions either on focus, or on hover
-    &:hover,
-    &:focus-within {
-      & > nav {
-        opacity: 1;
-      }
-    }
-  }
-
   ${horizontalPaddingStyles()};
 `;
+const Content = styled.div`
+  overflow: hidden;
+`;
+const Title = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+const Description = styled.div`
+  color: ${p => clr(p.theme.listItemColorDescription)};
+  font-size: ${p => p.theme.sizes.small}em;
+  ${ellipsisStyles};
+`;
+const LeftAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
 
@@ -48,39 +53,8 @@ /**
   right,
-  actions = [],
-  onTouchStart = () => {},
-  onTouchMove = () => {},
-  onTouchEnd = () => {},
   ...rest
-}, ref) => {
-  const touchDevice = useMemo(() => isTouchDevice(), []);
-  const {
-    opened,
-    handlers
-  } = useSwipe();
-  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, rest, {
-    onTouchStart: e => {
-      handlers.onTouchStart(e);
-      onTouchStart(e);
-    },
-    onTouchMove: e => {
-      handlers.onTouchMove(e);
-      onTouchMove(e);
-    },
-    onTouchEnd: e => {
-      handlers.onTouchEnd(e);
-      onTouchEnd(e);
-    },
-    ref: ref
-  }), /*#__PURE__*/React.createElement(ListItemContent, {
-    title: title,
-    description: description,
-    left: left,
-    right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
-  }));
-});
+}, ref) => /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+  ref: ref
+}), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description)), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
 ListItem.displayName = 'ListItem';
 export default ListItem;
 //# sourceMappingURL=index.js.map

dist/esm/ListItemLink/index.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
+import { resetFocusStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import { resetFocusStyles } from '@os-design/styles';
-import { css } from '@emotion/react';
-import { ListItemContainer } from '../ListItem';
-import ListItemContent from '../ListItem/ListItemContent';
-const actionsBgStyles = p => !p.touchDevice && css`
-    & > nav {
-      background: linear-gradient(
-        to right,
-        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
-        ${clr(p.theme.listItemColorBgHover)}
-          ${p.theme.listItemActionsPaddingLeft}em
-      );
-    }
-  `;
-const StyledLink = styled(ListItemContainer.withComponent('a'), omitEmotionProps('touchDevice', 'as'))`
+import React, { forwardRef } from 'react';
+import ListItem from '../ListItem';
+const Link = styled.a`
   ${resetFocusStyles};
+
   cursor: pointer;
@@ -28,7 +16,16 @@ text-decoration: none;
     &:focus-within {
-      background-color: ${p => clr(p.theme.listItemColorBgHover)};
+      & > div {
+        background-color: ${p => clr(p.theme.listItemColorBgHover)};
+
+        & > nav {
+          background: linear-gradient(
+            to right,
+            ${p => clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
+            ${p => clr(p.theme.listItemColorBgHover)}
+              ${p => p.theme.listItemActionsPaddingLeft}em
+          );
+        }
+      }
     }
   }
-
-  ${actionsBgStyles};
 `;
@@ -44,48 +41,15 @@
   right,
-  actions = [],
-  as,
-  onMouseDown = () => {},
-  onTouchStart = () => {},
-  onTouchMove = () => {},
-  onTouchEnd = () => {},
+  actions,
   ...rest
-}, ref) => {
-  const touchDevice = useMemo(() => isTouchDevice(), []);
-  const {
-    opened,
-    handlers
-  } = useSwipe();
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
-    touchDevice: touchDevice,
-    as: as
-  }, rest, {
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
-    onTouchStart: e => {
-      handlers.onTouchStart(e);
-      onTouchStart(e);
-    },
-    onTouchMove: e => {
-      handlers.onTouchMove(e);
-      onTouchMove(e);
-    },
-    onTouchEnd: e => {
-      handlers.onTouchEnd(e);
-      onTouchEnd(e);
-    },
-    ref: ref
-  }), /*#__PURE__*/React.createElement(ListItemContent, {
-    title: title,
-    description: description,
-    left: left,
-    right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
-  }));
-});
+}, ref) => /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+  ref: ref
+}), /*#__PURE__*/React.createElement(ListItem, {
+  title: title,
+  description: description,
+  left: left,
+  right: right,
+  actions: actions
+})));
 ListItemLink.displayName = 'ListItemLink';
 export default ListItemLink;
 //# sourceMappingURL=index.js.map

dist/esm/ListSkeleton/index.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import { horizontalPaddingStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
+import React, { forwardRef, useCallback } from 'react';
+import List from '../List';
 import Skeleton from '../Skeleton';
-import List from '../List';
-import { LeftAddon, RightAddon } from '../ListItem/ListItemContent';
 const ListItem = styled.div`
@@ -30,2 +29,11 @@ width: 100%;
 `;
+const LeftAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
 
@@ -32,0 +40,0 @@ /**

dist/types/ListItem/index.d.ts

 import React from 'react';
-import { ListItemContentProps } from './ListItemContent';
-declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
-export declare type ListItemProps = JsxDivProps & Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;
-export declare const ListItemContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const ListItem: React.ForwardRefExoticComponent<JsxDivProps & Omit<ListItemContentProps, "opened" | "hasSwipe"> & React.RefAttributes<HTMLDivElement>>;
+import { ListItemActionsProps } from '../ListItemActions';
+export interface ListItemProps extends ListItemActionsProps {
+    title: string;
+    description?: string;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;
 //# sourceMappingURL=index.d.ts.map

dist/types/ListItemLink/index.d.ts

 import React from 'react';
-import { ListItemContentProps } from '../ListItem/ListItemContent';
 import { LinkProps, ReactRouterLinkProps } from '../Link';
+import { ListItemProps } from '../ListItem';
 declare type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
-export declare type ListItemLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> & Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;
-declare const ListItemLink: React.ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> & Omit<ListItemContentProps, "opened" | "hasSwipe"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare type ListItemLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> & ListItemProps;
+declare const ListItemLink: React.ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> & ListItemProps & React.RefAttributes<HTMLAnchorElement>>;
 export default ListItemLink;
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@os-design/core",
-  "version": "1.0.169",
+  "version": "1.0.170",
   "license": "UNLICENSED",
@@ -61,3 +61,3 @@ "repository": "[e-mail]:os-team/libs/os-design.git",
   },
-  "gitHead": "94430262c8c667c197c9bcf09cdd9b69301c2a8b"
+  "gitHead": "f8f0c23877ffa6db63eaa33313df54cd0bd36df0"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1961530

decreased by-0.2%

Lines of code

16989

decreased by-0.35%

No dependency changes