@os-design/core 1.0.169 → 1.0.170

package/dist/cjs/ListItem/index.js

@@ -4,73 +4,56 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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); }
 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) 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;
+});
 
 /**
  * The base list item.
  */
-exports.ListItemContainer = ListItemContainer;
 var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     description = _ref.description,
     left = _ref.left,
     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));
 });
 ListItem.displayName = 'ListItem';
 var _default = ListItem;

package/dist/cjs/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItemContainer","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","ListItem","forwardRef","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","useMemo","isTouchDevice","useSwipe","opened","handlers","e","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\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 ${(p) => clr(p.theme.listItemColorBorder)};\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  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,IAAMA,iBAAiB,GAAGC,kBAAM,CAACC,GAAG,2hBAUZ,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAkBlE,IAAAC,+BAAuB,GAAE,CAC5B;;AAED;AACA;AACA;AAFA;AAGA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAYEC,GAAG,EACA;EAAA,IAXDC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,yBACZC,YAAY;IAAZA,aAAY,kCAAG,YAAM,CAAC,CAAC;IAAA,wBACvBC,WAAW;IAAXA,YAAW,iCAAG,YAAM,CAAC,CAAC;IAAA,uBACtBC,UAAU;IAAVA,WAAU,gCAAG,YAAM,CAAC,CAAC;IAClBC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAM,IAAAC,oBAAa,GAAE;EAAA,GAAE,EAAE,CAAC;EACtD,gBAA6B,IAAAC,eAAQ,GAAE;IAA/BC,MAAM,aAANA,MAAM;IAAEC,QAAQ,aAARA,QAAQ;EAExB,oBACE,gCAAC,iBAAiB,eACZN,IAAI;IACR,YAAY,EAAE,sBAACO,CAAC,EAAK;MACnBD,QAAQ,CAACT,YAAY,CAACU,CAAC,CAAC;MACxBV,aAAY,CAACU,CAAC,CAAC;IACjB,CAAE;IACF,WAAW,EAAE,qBAACA,CAAC,EAAK;MAClBD,QAAQ,CAACR,WAAW,CAACS,CAAC,CAAC;MACvBT,YAAW,CAACS,CAAC,CAAC;IAChB,CAAE;IACF,UAAU,EAAE,oBAACA,CAAC,EAAK;MACjBD,QAAQ,CAACP,UAAU,CAACQ,CAAC,CAAC;MACtBR,WAAU,CAACQ,CAAC,CAAC;IACf,CAAE;IACF,GAAG,EAAEhB;EAAI,iBAET,gCAAC,2BAAe;IACd,KAAK,EAAEC,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,QAAQ,EAAEK,WAAY;IACtB,MAAM,EAAEI;EAAO,EACf,CACgB;AAExB,CAAC,CACF;AAEDhB,QAAQ,CAACmB,WAAW,GAAG,UAAU;AAAC,eAEnBnB,QAAQ;AAAA"}
+{"version":3,"file":"index.js","names":["Container","styled","ListItemActions","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","div","Title","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","forwardRef","ref","title","description","left","right","rest","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\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 ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {left && <LeftAddon>{left}</LeftAddon>}\n\n      <Content>\n        <Title>{title}</Title>\n        {description && <Description>{description}</Description>}\n      </Content>\n\n      {right && <RightAddon>{right}</RightAddon>}\n    </Container>\n  )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA2E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyB3E,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAACC,2BAAe,CAAC,wQASV,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAGlE,IAAAC,+BAAuB,GAAE,CAC5B;AAED,IAAMC,OAAO,GAAGP,kBAAM,CAACQ,GAAG,8FAEzB;AAED,IAAMC,KAAK,GAAGT,kBAAM,CAACQ,GAAG,wHACb,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACM,SAAS,CAAC;AAAA,GAEpCC,sBAAc,CACjB;AAED,IAAMC,WAAW,GAAGZ,kBAAM,CAACQ,GAAG,yHACnB,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACS,wBAAwB,CAAC;AAAA,GACxC,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACU,KAAK,CAACC,KAAK;AAAA,GACrCJ,sBAAc,CACjB;AAED,IAAMK,SAAS,GAAGhB,kBAAM,CAACQ,GAAG,oHACjB,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACM,SAAS,CAAC;AAAA,GACrB,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACa,8BAA8B;AAAA,EAC/D;AAED,IAAMC,UAAU,GAAGlB,kBAAM,CAACQ,GAAG,yIAClB,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACM,SAAS,CAAC;AAAA,GAEtB,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACa,8BAA8B;AAAA,EAC9D;;AAED;AACA;AACA;AACA,IAAME,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAA+CC,GAAG;EAAA,IAA/CC,KAAK,QAALA,KAAK;IAAEC,WAAW,QAAXA,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAAA,oBACzC,gCAAC,SAAS,eAAKA,IAAI;IAAE,GAAG,EAAEL;EAAI,IAC3BG,IAAI,iBAAI,gCAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,gCAAC,OAAO,qBACN,gCAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,gCAAC,WAAW,QAAEA,WAAW,CAAe,CAChD,EAETE,KAAK,iBAAI,gCAAC,UAAU,QAAEA,KAAK,CAAc,CAChC;AAAA,CACb,CACF;AAEDN,QAAQ,CAACQ,WAAW,GAAG,UAAU;AAAC,eAEnBR,QAAQ;AAAA"}

package/dist/cjs/ListItemActions/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _excluded = ["actions", "onTouchStart", "onTouchMove", "onTouchEnd", "children", "size"],
+  _excluded2 = ["icon", "onClick"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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); }
+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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\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"])));
+var swipeableStyles = function swipeableStyles(p) {
+  return p.swipeable && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateX(100%);\n    ", ";\n  "])), (0, _styles.transitionStyles)('transform')(p));
+};
+var openedStyles = function openedStyles(p) {
+  return p.opened && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    transform: translateX(0);\n  "])));
+};
+var Actions = (0, _styled["default"])('nav', (0, _utils.omitEmotionProps)('swipeable', 'opened', 'size'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ", "em;\n  background: linear-gradient(\n    to right,\n    ", ",\n    ", "\n      ", "em\n  );\n\n  ", ";\n  ", ";\n  ", "\n"])), function (p) {
+  return p.theme.listItemActionsPaddingLeft;
+}, function (p) {
+  return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.colorBg.slice(0, 3)), [0]));
+}, function (p) {
+  return (0, _theming.clr)(p.theme.colorBg);
+}, function (p) {
+  return p.theme.listItemActionsPaddingLeft;
+}, swipeableStyles, openedStyles, _styles.sizeStyles);
+var actionIndex = 0;
+
+/**
+ * Shows the menu in the list item.
+ */
+var ListItemActions = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var _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,
+    children = _ref.children,
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSwipe = (0, _utils.useSwipe)(),
+    opened = _useSwipe.opened,
+    handlers = _useSwipe.handlers;
+  var swipeable = (0, _react2.useMemo)(function () {
+    return (0, _utils.isTouchDevice)();
+  }, []);
+  var touchStartHandler = (0, _react2.useCallback)(function (e) {
+    handlers.onTouchStart(e);
+    onTouchStart(e);
+  }, [handlers, onTouchStart]);
+  var touchMoveHandler = (0, _react2.useCallback)(function (e) {
+    handlers.onTouchMove(e);
+    onTouchMove(e);
+  }, [handlers, onTouchMove]);
+  var touchEndHandler = (0, _react2.useCallback)(function (e) {
+    handlers.onTouchEnd(e);
+    onTouchEnd(e);
+  }, [handlers, onTouchEnd]);
+  var actionsComponent = (0, _react2.useMemo)(function () {
+    if (actions.length === 0) return null;
+    var items = actions.map(function (_ref2) {
+      var icon = _ref2.icon,
+        _ref2$onClick = _ref2.onClick,
+        _onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+        actionRest = _objectWithoutProperties(_ref2, _excluded2);
+      actionIndex += 1;
+      return /*#__PURE__*/_react2["default"].createElement(_Button["default"], _extends({
+        key: actionIndex,
+        type: "ghost",
+        wide: "never",
+        size: size,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          _onClick(e);
+        }
+      }, actionRest), icon);
+    });
+    return /*#__PURE__*/_react2["default"].createElement(Actions, {
+      swipeable: swipeable,
+      opened: opened,
+      size: size
+    }, items);
+  }, [actions, opened, size, swipeable]);
+  return /*#__PURE__*/_react2["default"].createElement(Container, _extends({
+    onTouchStart: touchStartHandler,
+    onTouchMove: touchMoveHandler,
+    onTouchEnd: touchEndHandler
+  }, rest, {
+    ref: ref
+  }), children, actionsComponent);
+});
+ListItemActions.displayName = 'ListItemActions';
+var _default = ListItemActions;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/ListItemActions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","clr","colorBg","slice","sizeStyles","actionIndex","ListItemActions","forwardRef","ref","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","e","touchMoveHandler","touchEndHandler","actionsComponent","length","items","map","icon","onClick","actionRest","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\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\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions swipeable={swipeable} opened={opened} size={size}>\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

package/dist/cjs/ListItemLink/index.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _utils = require("@os-design/utils");
-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 _theming = require("@os-design/theming");
+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); }
 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -28,12 +25,15 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 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;
+});
 
 /**
  * The list item with a link.
@@ -43,53 +43,16 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     description = _ref.description,
     left = _ref.left,
     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,
     description: description,
     left: left,
     right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
+    actions: actions
   }));
 });
 ListItemLink.displayName = 'ListItemLink';

package/dist/cjs/ListItemLink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["actionsBgStyles","p","touchDevice","css","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","styled","ListItemContainer","withComponent","omitEmotionProps","resetFocusStyles","ListItemLink","forwardRef","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","useMemo","isTouchDevice","useSwipe","opened","handlers","e","preventDefault","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Link","styled","a","resetFocusStyles","p","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","forwardRef","ref","title","description","left","right","actions","rest","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ListItemProps;\n\nconst Link = styled.a`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ${(p) =>\n              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n            ${(p) => clr(p.theme.listItemColorBgHover)}\n              ${(p) => p.theme.listItemActionsPaddingLeft}em\n          );\n        }\n      }\n    }\n  }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  ({ title, description, left, right, actions, ...rest }, ref) => (\n    <Link {...rest} ref={ref}>\n      <ListItem\n        title={title}\n        description={description}\n        left={left}\n        right={right}\n        actions={actions}\n      />\n    </Link>\n  )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtD,IAAMA,IAAI,GAAGC,kBAAM,CAACC,CAAC,ibACjBC,wBAAgB,EASQ,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,oBAAoB,CAAC;AAAA,GAKtD,UAACH,CAAC;EAAA,OACF,IAAAC,YAAG,+BAAKD,CAAC,CAACE,KAAK,CAACC,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAE,CAAC,GAAW;AAAA,GAC9D,UAACJ,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,oBAAoB,CAAC;AAAA,GACtC,UAACH,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACG,0BAA0B;AAAA,EAMxD;;AAED;AACA;AACA;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAU,EAC7B,gBAAwDC,GAAG;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,WAAW,QAAXA,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAKC,IAAI;EAAA,oBAClD,gCAAC,IAAI,eAAKA,IAAI;IAAE,GAAG,EAAEN;EAAI,iBACvB,gCAAC,oBAAQ;IACP,KAAK,EAAEC,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC;EAAQ,EACjB,CACG;AAAA,CACR,CACF;AAEDP,YAAY,CAACS,WAAW,GAAG,cAAc;AAAC,eAE3BT,YAAY;AAAA"}

package/dist/cjs/ListSkeleton/index.js

@@ -5,18 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _Skeleton = _interopRequireDefault(require("../Skeleton"));
+var _react = _interopRequireWildcard(require("react"));
 var _List = _interopRequireDefault(require("../List"));
-var _ListItemContent = require("../ListItem/ListItemContent");
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 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); }
 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -28,6 +27,16 @@ var Content = _styled["default"].div(_templateObject2 || (_templateObject2 = _ta
 var DescriptionSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "em;\n  margin-top: 0.3em;\n"])), function (p) {
   return p.theme.sizes.small;
 });
+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;
+});
 
 /**
  * Provides a list placeholder while a user waits for the content to load.
@@ -48,11 +57,11 @@ var ListSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var style = _ref2.style;
     return /*#__PURE__*/_react["default"].createElement(ListItem, {
       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]);
   return /*#__PURE__*/_react["default"].createElement(_List["default"], _extends({
     itemCount: itemCount,

package/dist/cjs/ListSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","DescriptionSkeleton","Skeleton","sizes","small","ListSkeleton","forwardRef","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","useCallback","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BpE,IAAMA,QAAQ,GAAGC,kBAAM,CAACC,GAAG,gQASI,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAGlE,IAAAC,+BAAuB,GAAE,CAC5B;AAED,IAAMC,OAAO,GAAGP,kBAAM,CAACC,GAAG,yFAEzB;AAED,IAAMO,mBAAmB,GAAG,IAAAR,kBAAM,EAACS,oBAAQ,CAAC,mHAChC,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACM,KAAK,CAACC,KAAK;AAAA,EAErC;;AAED;AACA;AACA;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAU,EAC7B,gBAUEC,GAAG,EACA;EAAA,+BATDC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,6BAClBC,gBAAgB;IAAhBA,gBAAgB,sCAAG,KAAK;IAAA,sBACxBC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC9B;IAAA,IAAGC,KAAK,SAALA,KAAK;IAAA,oBACN,gCAAC,QAAQ;MAAC,KAAK,EAAEA;IAAM,GACpBL,IAAI,iBAAI,gCAAC,0BAAS,QAAEA,IAAI,CAAa,eAEtC,gCAAC,OAAO,qBACN,gCAAC,oBAAQ;MAAC,KAAK,EAAEH;IAAW,EAAG,EAC9BD,cAAc,iBAAI,gCAAC,mBAAmB;MAAC,KAAK,EAAEE;IAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,gCAAC,2BAAU,QAAEA,KAAK,CAAc,CACjC;EAAA,CACZ,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,gCAAC,gBAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEI;EAAa,GACvBD,IAAI;IACR,GAAG,EAAEP;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,YAAY,CAACa,WAAW,GAAG,cAAc;AAAC,eAE3Bb,YAAY;AAAA"}
+{"version":3,"file":"index.js","names":["ListItem","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","DescriptionSkeleton","Skeleton","sizes","small","LeftAddon","colorText","listItemAddonPaddingHorizontal","RightAddon","ListSkeleton","forwardRef","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","useCallback","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BnC,IAAMA,QAAQ,GAAGC,kBAAM,CAACC,GAAG,gQASI,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAGlE,IAAAC,+BAAuB,GAAE,CAC5B;AAED,IAAMC,OAAO,GAAGP,kBAAM,CAACC,GAAG,yFAEzB;AAED,IAAMO,mBAAmB,GAAG,IAAAR,kBAAM,EAACS,oBAAQ,CAAC,mHAChC,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACM,KAAK,CAACC,KAAK;AAAA,EAErC;AAED,IAAMC,SAAS,GAAGZ,kBAAM,CAACC,GAAG,oHACjB,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACS,SAAS,CAAC;AAAA,GACrB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACU,8BAA8B;AAAA,EAC/D;AAED,IAAMC,UAAU,GAAGf,kBAAM,CAACC,GAAG,yIAClB,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACS,SAAS,CAAC;AAAA,GAEtB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACU,8BAA8B;AAAA,EAC9D;;AAED;AACA;AACA;AACA,IAAME,YAAY,gBAAG,IAAAC,iBAAU,EAC7B,gBAUEC,GAAG,EACA;EAAA,+BATDC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,6BAClBC,gBAAgB;IAAhBA,gBAAgB,sCAAG,KAAK;IAAA,sBACxBC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC9B;IAAA,IAAGC,KAAK,SAALA,KAAK;IAAA,oBACN,gCAAC,QAAQ;MAAC,KAAK,EAAEA;IAAM,GACpBL,IAAI,iBAAI,gCAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,gCAAC,OAAO,qBACN,gCAAC,oBAAQ;MAAC,KAAK,EAAEH;IAAW,EAAG,EAC9BD,cAAc,iBAAI,gCAAC,mBAAmB;MAAC,KAAK,EAAEE;IAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,gCAAC,UAAU,QAAEA,KAAK,CAAc,CACjC;EAAA,CACZ,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,gCAAC,gBAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEI;EAAa,GACvBD,IAAI;IACR,GAAG,EAAEP;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,YAAY,CAACa,WAAW,GAAG,cAAc;AAAC,eAE3Bb,YAAY;AAAA"}

package/dist/esm/ListItem/index.js

@@ -1,12 +1,10 @@
 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;
   min-height: 4em;
   overflow: hidden;
@@ -18,23 +16,30 @@ export const ListItemContainer = styled.div`
     border-bottom: 1px solid ${p => clr(p.theme.listItemColorBorder)};
   }
 
-  @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;
+`;
 
 /**
  * The base list item.
@@ -44,41 +49,10 @@ const ListItem = /*#__PURE__*/forwardRef(({
   description,
   left,
   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