@os-design/core 1.0.235 → 1.0.236
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
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/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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"}
|
|
@@ -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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.236",
|
|
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": "472a5d2519bc0892befd10898920e0c5317eb54a"
|
|
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
|
}
|