@os-design/core 1.0.235 → 1.0.237
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/Alert/index.js +1 -1
- package/dist/cjs/Alert/index.js.map +1 -1
- package/dist/cjs/Avatar/index.js +5 -4
- package/dist/cjs/Avatar/index.js.map +1 -1
- package/dist/esm/Alert/index.js +1 -1
- package/dist/esm/Alert/index.js.map +1 -1
- package/dist/esm/Avatar/index.js +5 -3
- package/dist/esm/Avatar/index.js.map +1 -1
- package/dist/types/Alert/index.d.ts.map +1 -1
- package/dist/types/Avatar/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/Alert/index.tsx +2 -1
- package/src/Avatar/index.tsx +13 -3
package/dist/cjs/Alert/index.js
CHANGED
|
@@ -70,7 +70,7 @@ var Alert = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
|
70
70
|
ref: ref
|
|
71
71
|
}), /*#__PURE__*/_react2["default"].createElement(IconContainer, {
|
|
72
72
|
type: type
|
|
73
|
-
}, /*#__PURE__*/_react2["default"].createElement(Icon, null)), /*#__PURE__*/_react2["default"].createElement("span", null, children));
|
|
73
|
+
}, /*#__PURE__*/_react2["default"].createElement(Icon, null)), typeof children === 'string' ? /*#__PURE__*/_react2["default"].createElement("span", null, children) : children);
|
|
74
74
|
});
|
|
75
75
|
Alert.displayName = 'Alert';
|
|
76
76
|
var _default = exports["default"] = Alert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","infoContainerStyles","p","type","css","clr","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","styled","omitEmotionProps","borderRadius","colorText","sizeStyles","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","InfoCircle","success","CheckCircle","error","CloseCircle","Alert","forwardRef","_ref","ref","size","children","rest","Icon","useMemo","createElement","role","displayName","_default","exports"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n <span>{children}</span
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","infoContainerStyles","p","type","css","clr","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","styled","omitEmotionProps","borderRadius","colorText","sizeStyles","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","InfoCircle","success","CheckCircle","error","CloseCircle","Alert","forwardRef","_ref","ref","size","children","rest","Icon","useMemo","createElement","role","displayName","_default","exports"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n\n {typeof children === 'string' ? <span>{children}</span> : children}\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
|
package/dist/cjs/Avatar/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
14
14
|
var _Image = _interopRequireDefault(require("../Image"));
|
|
15
15
|
var _nameToInitials = _interopRequireDefault(require("./utils/nameToInitials"));
|
|
16
16
|
var _strToHue = _interopRequireDefault(require("./utils/strToHue"));
|
|
17
|
-
var _excluded = ["firstName", "lastName", "image", "imageProps", "online", "size"];
|
|
17
|
+
var _excluded = ["firstName", "lastName", "image", "imageProps", "online", "size", "children"];
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
19
|
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); }
|
|
20
20
|
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 && Object.prototype.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; }
|
|
@@ -29,7 +29,7 @@ var AvatarContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps
|
|
|
29
29
|
}, function (p) {
|
|
30
30
|
return (0, _theming.clr)(p.bgColor);
|
|
31
31
|
}, _styles.sizeStyles);
|
|
32
|
-
var
|
|
32
|
+
var IconContainer = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 0.6em;\n line-height: 0.6;\n"])));
|
|
33
33
|
var Initials = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 0.35em;\n"])));
|
|
34
34
|
var INNER_SIZE = 0.25;
|
|
35
35
|
var OUTER_SIZE = INNER_SIZE * 1.2;
|
|
@@ -52,6 +52,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
52
52
|
online = _ref$online === void 0 ? false : _ref$online,
|
|
53
53
|
_ref$size = _ref.size,
|
|
54
54
|
size = _ref$size === void 0 ? '2em' : _ref$size,
|
|
55
|
+
children = _ref.children,
|
|
55
56
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
56
57
|
var _useTheme = (0, _theming.useTheme)(),
|
|
57
58
|
theme = _useTheme.theme;
|
|
@@ -82,7 +83,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
82
83
|
if (initials) return /*#__PURE__*/_react["default"].createElement(Initials, null, initials);
|
|
83
84
|
|
|
84
85
|
// Otherwise render the user icon
|
|
85
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
86
|
+
return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.User, null));
|
|
86
87
|
}, [image, imageProps, firstName, lastName]);
|
|
87
88
|
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
88
89
|
size: size
|
|
@@ -92,7 +93,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
92
93
|
"aria-label": fullName || 'User'
|
|
93
94
|
}, rest, {
|
|
94
95
|
ref: ref
|
|
95
|
-
}), renderChildren()), online && /*#__PURE__*/_react["default"].createElement(Online, null));
|
|
96
|
+
}), children ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, children) : renderChildren()), online && /*#__PURE__*/_react["default"].createElement(Online, null));
|
|
96
97
|
});
|
|
97
98
|
Avatar.displayName = 'Avatar';
|
|
98
99
|
var _default = exports["default"] = Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_icons","_styles","_theming","_utils","_react","_interopRequireWildcard","_Image","_nameToInitials","_strToHue","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","UserIcon","User","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","_ref","ref","firstName","lastName","image","_ref$imageProps","imageProps","_ref$online","online","_ref$size","size","rest","_useTheme","useTheme","useMemo","parts","push","strToHue","join","avatarDefaultColorBg","fullName","filter","undefined","renderChildren","useCallback","createElement","url","cropped","initials","nameToInitials","role","displayName","_default","exports"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return <UserIcon />;\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {renderChildren()}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_icons","_styles","_theming","_utils","_react","_interopRequireWildcard","_Image","_nameToInitials","_strToHue","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","_ref","ref","firstName","lastName","image","_ref$imageProps","imageProps","_ref$online","online","_ref$size","size","children","rest","_useTheme","useTheme","useMemo","parts","push","strToHue","join","avatarDefaultColorBg","fullName","filter","undefined","renderChildren","useCallback","createElement","url","cropped","initials","nameToInitials","User","role","displayName","_default","exports"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
package/dist/esm/Alert/index.js
CHANGED
|
@@ -73,7 +73,7 @@ const Alert = /*#__PURE__*/forwardRef(({
|
|
|
73
73
|
ref: ref
|
|
74
74
|
}), /*#__PURE__*/React.createElement(IconContainer, {
|
|
75
75
|
type: type
|
|
76
|
-
}, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement("span", null, children));
|
|
76
|
+
}, /*#__PURE__*/React.createElement(Icon, null)), typeof children === 'string' ? /*#__PURE__*/React.createElement("span", null, children) : children);
|
|
77
77
|
});
|
|
78
78
|
Alert.displayName = 'Alert';
|
|
79
79
|
export default Alert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n <span>{children}</span
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n\n {typeof children === 'string' ? <span>{children}</span> : children}\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
|
package/dist/esm/Avatar/index.js
CHANGED
|
@@ -36,8 +36,9 @@ const AvatarContainer = styled('div', omitEmotionProps('bgColor'))`
|
|
|
36
36
|
|
|
37
37
|
${sizeStyles};
|
|
38
38
|
`;
|
|
39
|
-
const
|
|
39
|
+
const IconContainer = styled.div`
|
|
40
40
|
font-size: 0.6em;
|
|
41
|
+
line-height: 0.6;
|
|
41
42
|
`;
|
|
42
43
|
const Initials = styled.div`
|
|
43
44
|
font-size: 0.35em;
|
|
@@ -75,6 +76,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
75
76
|
imageProps = {},
|
|
76
77
|
online = false,
|
|
77
78
|
size = '2em',
|
|
79
|
+
children,
|
|
78
80
|
...rest
|
|
79
81
|
}, ref) => {
|
|
80
82
|
const {
|
|
@@ -103,7 +105,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
103
105
|
if (initials) return /*#__PURE__*/React.createElement(Initials, null, initials);
|
|
104
106
|
|
|
105
107
|
// Otherwise render the user icon
|
|
106
|
-
return /*#__PURE__*/React.createElement(
|
|
108
|
+
return /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(User, null));
|
|
107
109
|
}, [image, imageProps, firstName, lastName]);
|
|
108
110
|
return /*#__PURE__*/React.createElement(Container, {
|
|
109
111
|
size: size
|
|
@@ -113,7 +115,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
113
115
|
"aria-label": fullName || 'User'
|
|
114
116
|
}, rest, {
|
|
115
117
|
ref: ref
|
|
116
|
-
}), renderChildren()), online && /*#__PURE__*/React.createElement(Online, null));
|
|
118
|
+
}), children ? /*#__PURE__*/React.createElement(IconContainer, null, children) : renderChildren()), online && /*#__PURE__*/React.createElement(Online, null));
|
|
117
119
|
});
|
|
118
120
|
Avatar.displayName = 'Avatar';
|
|
119
121
|
export default Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","children","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAIvD,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACpC;AA+ED,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAIvD,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACpC;AA+ED,QAAA,MAAM,KAAK,mFAcV,CAAC;AAIF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI7C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAKlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI7C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAKlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2ED,QAAA,MAAM,MAAM,oFAgEX,CAAC;AAIF,eAAe,MAAM,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.237",
|
|
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": "9724a7c0e9e501d993bb185b6894d6a2c3cf4ad8"
|
|
63
63
|
}
|
package/src/Alert/index.tsx
CHANGED
|
@@ -100,7 +100,8 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
|
|
|
100
100
|
<IconContainer type={type}>
|
|
101
101
|
<Icon />
|
|
102
102
|
</IconContainer>
|
|
103
|
-
|
|
103
|
+
|
|
104
|
+
{typeof children === 'string' ? <span>{children}</span> : children}
|
|
104
105
|
</Container>
|
|
105
106
|
);
|
|
106
107
|
}
|
package/src/Avatar/index.tsx
CHANGED
|
@@ -74,8 +74,9 @@ const AvatarContainer = styled(
|
|
|
74
74
|
${sizeStyles};
|
|
75
75
|
`;
|
|
76
76
|
|
|
77
|
-
const
|
|
77
|
+
const IconContainer = styled.div`
|
|
78
78
|
font-size: 0.6em;
|
|
79
|
+
line-height: 0.6;
|
|
79
80
|
`;
|
|
80
81
|
|
|
81
82
|
const Initials = styled.div`
|
|
@@ -118,6 +119,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
118
119
|
imageProps = {},
|
|
119
120
|
online = false,
|
|
120
121
|
size = '2em',
|
|
122
|
+
children,
|
|
121
123
|
...rest
|
|
122
124
|
},
|
|
123
125
|
ref
|
|
@@ -146,7 +148,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
146
148
|
if (initials) return <Initials>{initials}</Initials>;
|
|
147
149
|
|
|
148
150
|
// Otherwise render the user icon
|
|
149
|
-
return
|
|
151
|
+
return (
|
|
152
|
+
<IconContainer>
|
|
153
|
+
<User />
|
|
154
|
+
</IconContainer>
|
|
155
|
+
);
|
|
150
156
|
}, [image, imageProps, firstName, lastName]);
|
|
151
157
|
|
|
152
158
|
return (
|
|
@@ -158,7 +164,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
158
164
|
{...rest}
|
|
159
165
|
ref={ref}
|
|
160
166
|
>
|
|
161
|
-
{
|
|
167
|
+
{children ? (
|
|
168
|
+
<IconContainer>{children}</IconContainer>
|
|
169
|
+
) : (
|
|
170
|
+
renderChildren()
|
|
171
|
+
)}
|
|
162
172
|
</AvatarContainer>
|
|
163
173
|
{online && <Online />}
|
|
164
174
|
</Container>
|