@os-design/core 1.0.246 → 1.0.248
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ListItem/index.js +3 -2
- package/dist/cjs/ListItem/index.js.map +1 -1
- package/dist/cjs/ListItemLink/index.js +3 -2
- package/dist/cjs/ListItemLink/index.js.map +1 -1
- package/dist/esm/ListItem/index.js +2 -1
- package/dist/esm/ListItem/index.js.map +1 -1
- package/dist/esm/ListItemLink/index.js +2 -1
- package/dist/esm/ListItemLink/index.js.map +1 -1
- package/dist/types/ListItem/index.d.ts +1 -1
- package/dist/types/ListItem/index.d.ts.map +1 -1
- package/dist/types/ListItemLink/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/ListItem/index.tsx +8 -6
- package/src/ListItemLink/index.tsx +4 -2
|
@@ -10,7 +10,7 @@ var _styles = require("@os-design/styles");
|
|
|
10
10
|
var _theming = require("@os-design/theming");
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _ListItemActions = _interopRequireDefault(require("../ListItemActions"));
|
|
13
|
-
var _excluded = ["title", "description", "left", "right"];
|
|
13
|
+
var _excluded = ["title", "description", "left", "right", "children"];
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -50,10 +50,11 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
50
50
|
description = _ref.description,
|
|
51
51
|
left = _ref.left,
|
|
52
52
|
right = _ref.right,
|
|
53
|
+
children = _ref.children,
|
|
53
54
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
54
55
|
return /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
|
|
55
56
|
ref: ref
|
|
56
|
-
}), 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));
|
|
57
|
+
}), left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), children || /*#__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));
|
|
57
58
|
});
|
|
58
59
|
ListItem.displayName = 'ListItem';
|
|
59
60
|
var _default = exports["default"] = ListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItemActions","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","ListItemActions","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","div","Title","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","forwardRef","_ref","ref","title","description","left","right","rest","createElement","displayName","_default","exports"],"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItemActions","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","ListItemActions","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","div","Title","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","forwardRef","_ref","ref","title","description","left","right","children","rest","createElement","displayName","_default","exports"],"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, children, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n {children || (\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n )}\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,7 +10,7 @@ var _styles = require("@os-design/styles");
|
|
|
10
10
|
var _theming = require("@os-design/theming");
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _ListItem = _interopRequireDefault(require("../ListItem"));
|
|
13
|
-
var _excluded = ["title", "description", "left", "right", "actions"];
|
|
13
|
+
var _excluded = ["title", "description", "left", "right", "actions", "children"];
|
|
14
14
|
var _templateObject;
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -46,6 +46,7 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
46
46
|
left = _ref.left,
|
|
47
47
|
right = _ref.right,
|
|
48
48
|
actions = _ref.actions,
|
|
49
|
+
children = _ref.children,
|
|
49
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
51
|
return /*#__PURE__*/_react["default"].createElement(Link, _extends({}, rest, {
|
|
51
52
|
ref: ref
|
|
@@ -55,7 +56,7 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
55
56
|
left: left,
|
|
56
57
|
right: right,
|
|
57
58
|
actions: actions
|
|
58
|
-
}));
|
|
59
|
+
}, children));
|
|
59
60
|
});
|
|
60
61
|
ListItemLink.displayName = 'ListItemLink';
|
|
61
62
|
var _default = exports["default"] = ListItemLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItem","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","value","Link","styled","resetFocusStyles","p","clr","theme","listItemColorBorder","listItemColorBgHover","concat","listItemActionsPaddingLeft","ListItemLink","forwardRef","_ref","ref","title","description","left","right","actions","rest","createElement","displayName","_default","exports"],"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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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
|
|
1
|
+
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItem","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","value","Link","styled","resetFocusStyles","p","clr","theme","listItemColorBorder","listItemColorBgHover","concat","listItemActionsPaddingLeft","ListItemLink","forwardRef","_ref","ref","title","description","left","right","actions","children","rest","createElement","displayName","_default","exports"],"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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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, children, ...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 {children}\n </ListItem>\n </Link>\n )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -49,10 +49,11 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
49
49
|
description,
|
|
50
50
|
left,
|
|
51
51
|
right,
|
|
52
|
+
children,
|
|
52
53
|
...rest
|
|
53
54
|
}, ref) => /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
|
|
54
55
|
ref: ref
|
|
55
|
-
}), 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)));
|
|
56
|
+
}), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), children || /*#__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)));
|
|
56
57
|
ListItem.displayName = 'ListItem';
|
|
57
58
|
export default ListItem;
|
|
58
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","createElement","_extends","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
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","children","rest","ref","createElement","_extends","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, children, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n {children || (\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n )}\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,CAAC,CAAE;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC1DzB,KAAA,CAAA0B,aAAA,CAACvB,SAAS,EAAAwB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC3BJ,IAAI,iBAAIrB,KAAA,CAAA0B,aAAA,CAACX,SAAS,QAAEM,IAAgB,CAAC,EAErCE,QAAQ,iBACPvB,KAAA,CAAA0B,aAAA,CAACnB,OAAO,qBACNP,KAAA,CAAA0B,aAAA,CAACjB,KAAK,QAAEU,KAAa,CAAC,EACrBC,WAAW,iBAAIpB,KAAA,CAAA0B,aAAA,CAACf,WAAW,QAAES,WAAyB,CAChD,CACV,EAEAE,KAAK,iBAAItB,KAAA,CAAA0B,aAAA,CAACT,UAAU,QAAEK,KAAkB,CAChC,CAEf,CAAC;AAEDJ,QAAQ,CAACU,WAAW,GAAG,UAAU;AAEjC,eAAeV,QAAQ","ignoreList":[]}
|
|
@@ -42,6 +42,7 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
|
|
|
42
42
|
left,
|
|
43
43
|
right,
|
|
44
44
|
actions,
|
|
45
|
+
children,
|
|
45
46
|
...rest
|
|
46
47
|
}, ref) => /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
|
|
47
48
|
ref: ref
|
|
@@ -51,7 +52,7 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
|
|
|
51
52
|
left: left,
|
|
52
53
|
right: right,
|
|
53
54
|
actions: actions
|
|
54
|
-
})));
|
|
55
|
+
}, children)));
|
|
55
56
|
ListItemLink.displayName = 'ListItemLink';
|
|
56
57
|
export default ListItemLink;
|
|
57
58
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","rest","ref","createElement","_extends","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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","children","rest","ref","createElement","_extends","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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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, children, ...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 {children}\n </ListItem>\n </Link>\n )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAE;AACtB,IAAIN,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA,+BAAgCO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BF,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeH,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAU,CAAE;AAC7E,cAAeJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACvD,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGV,UAAU,CAC7B,CAAC;EAAEW,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnEnB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,EAAAkB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACvBnB,KAAA,CAAAoB,aAAA,CAAClB,QAAQ;EACPU,KAAK,EAAEA,KAAM;EACbC,WAAW,EAAEA,WAAY;EACzBC,IAAI,EAAEA,IAAK;EACXC,KAAK,EAAEA,KAAM;EACbC,OAAO,EAAEA;AAAQ,GAEhBC,QACO,CACN,CAEV,CAAC;AAEDN,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IAIzD,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IAIzD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA+CD,QAAA,MAAM,QAAQ,sFAeb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,aAAa,CAAC;AAmChB,QAAA,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,aAAa,CAAC;AAmChB,QAAA,MAAM,YAAY,oJAcjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.248",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react": ">=18",
|
|
60
60
|
"react-dom": ">=18"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "c691922faf42adbb300024cfd000e9f5a76b2844"
|
|
63
63
|
}
|
package/src/ListItem/index.tsx
CHANGED
|
@@ -8,7 +8,7 @@ export interface ListItemProps extends ListItemActionsProps {
|
|
|
8
8
|
/**
|
|
9
9
|
* The title of the item.
|
|
10
10
|
*/
|
|
11
|
-
title
|
|
11
|
+
title?: string;
|
|
12
12
|
/**
|
|
13
13
|
* The description of the item.
|
|
14
14
|
* @default undefined
|
|
@@ -73,14 +73,16 @@ const RightAddon = styled.div`
|
|
|
73
73
|
* The base list item.
|
|
74
74
|
*/
|
|
75
75
|
const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
|
|
76
|
-
({ title, description, left, right, ...rest }, ref) => (
|
|
76
|
+
({ title, description, left, right, children, ...rest }, ref) => (
|
|
77
77
|
<Container {...rest} ref={ref}>
|
|
78
78
|
{left && <LeftAddon>{left}</LeftAddon>}
|
|
79
79
|
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
{children || (
|
|
81
|
+
<Content>
|
|
82
|
+
<Title>{title}</Title>
|
|
83
|
+
{description && <Description>{description}</Description>}
|
|
84
|
+
</Content>
|
|
85
|
+
)}
|
|
84
86
|
|
|
85
87
|
{right && <RightAddon>{right}</RightAddon>}
|
|
86
88
|
</Container>
|
|
@@ -45,7 +45,7 @@ const Link = styled.a`
|
|
|
45
45
|
* The list item with a link.
|
|
46
46
|
*/
|
|
47
47
|
const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
|
|
48
|
-
({ title, description, left, right, actions, ...rest }, ref) => (
|
|
48
|
+
({ title, description, left, right, actions, children, ...rest }, ref) => (
|
|
49
49
|
<Link {...rest} ref={ref}>
|
|
50
50
|
<ListItem
|
|
51
51
|
title={title}
|
|
@@ -53,7 +53,9 @@ const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
|
|
|
53
53
|
left={left}
|
|
54
54
|
right={right}
|
|
55
55
|
actions={actions}
|
|
56
|
-
|
|
56
|
+
>
|
|
57
|
+
{children}
|
|
58
|
+
</ListItem>
|
|
57
59
|
</Link>
|
|
58
60
|
)
|
|
59
61
|
);
|