@os-design/core 1.0.232 → 1.0.234
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/CheckboxSkeleton/index.js +11 -4
- package/dist/cjs/CheckboxSkeleton/index.js.map +1 -1
- package/dist/cjs/Link/index.js +1 -1
- package/dist/cjs/Link/index.js.map +1 -1
- package/dist/esm/CheckboxSkeleton/index.js +8 -1
- package/dist/esm/CheckboxSkeleton/index.js.map +1 -1
- package/dist/esm/Link/index.js +1 -0
- package/dist/esm/Link/index.js.map +1 -1
- package/dist/types/CheckboxSkeleton/index.d.ts +4 -2
- package/dist/types/CheckboxSkeleton/index.d.ts.map +1 -1
- package/dist/types/Link/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/CheckboxSkeleton/index.tsx +14 -3
- package/src/Link/index.tsx +1 -0
|
@@ -11,8 +11,8 @@ var _theming = require("@os-design/theming");
|
|
|
11
11
|
var _utils = require("@os-design/utils");
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
|
|
14
|
-
var _excluded = ["children"];
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
14
|
+
var _excluded = ["width", "children"];
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
16
16
|
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); }
|
|
17
17
|
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; }
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -39,19 +39,26 @@ var ImageSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObjec
|
|
|
39
39
|
var Text = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 0.4em;\n color: ", ";\n"])), function (p) {
|
|
40
40
|
return (0, _theming.clr)(p.theme.colorText);
|
|
41
41
|
});
|
|
42
|
+
var TextSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: 0.4em;\n margin-top: ", "em;\n"])), function (p) {
|
|
43
|
+
return (p.theme.lineHeight - 1) / 2;
|
|
44
|
+
});
|
|
42
45
|
|
|
43
46
|
/**
|
|
44
47
|
* Provides a checkbox placeholder while a user waits for the content to load.
|
|
45
48
|
*/
|
|
46
49
|
var CheckboxSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
47
|
-
var
|
|
50
|
+
var _ref$width = _ref.width,
|
|
51
|
+
width = _ref$width === void 0 ? '100%' : _ref$width,
|
|
52
|
+
children = _ref.children,
|
|
48
53
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
49
54
|
return /*#__PURE__*/_react["default"].createElement(Container, _extends({
|
|
50
55
|
role: "checkbox",
|
|
51
56
|
"aria-busy": true
|
|
52
57
|
}, rest, {
|
|
53
58
|
ref: ref
|
|
54
|
-
}), /*#__PURE__*/_react["default"].createElement(ImageSkeleton, null), children
|
|
59
|
+
}), /*#__PURE__*/_react["default"].createElement(ImageSkeleton, null), children ? /*#__PURE__*/_react["default"].createElement(Text, null, children) : /*#__PURE__*/_react["default"].createElement(TextSkeleton, {
|
|
60
|
+
width: width
|
|
61
|
+
}));
|
|
55
62
|
});
|
|
56
63
|
CheckboxSkeleton.displayName = 'CheckboxSkeleton';
|
|
57
64
|
var _default = exports["default"] = CheckboxSkeleton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_utils","_react","_interopRequireWildcard","_Skeleton","_excluded","_templateObject","_templateObject2","_templateObject3","_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","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","div","clr","colorText","CheckboxSkeleton","forwardRef","_ref","ref","children","rest","createElement","role","displayName","_default","exports"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport
|
|
1
|
+
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_utils","_react","_interopRequireWildcard","_Skeleton","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_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","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","div","clr","colorText","TextSkeleton","CheckboxSkeleton","forwardRef","_ref","ref","_ref$width","width","children","rest","createElement","role","displayName","_default","exports"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface CheckboxSkeletonProps extends JsxDivProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 100%\n */\n width?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst TextSkeleton = styled(Skeleton)`\n margin-left: 0.4em;\n margin-top: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ width = '100%', children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children ? <Text>{children}</Text> : <TextSkeleton width={width} />}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":"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"}
|
package/dist/cjs/Link/index.js
CHANGED
|
@@ -32,7 +32,7 @@ var underlineAlwaysStyles = exports.underlineAlwaysStyles = function underlineAl
|
|
|
32
32
|
var disabledStyles = function disabledStyles(p) {
|
|
33
33
|
return p.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n &,\n &:active,\n &:focus {\n color: ", ";\n }\n "])), (0, _theming.clr)(p.theme.inputColorPlaceholder));
|
|
34
34
|
};
|
|
35
|
-
var DisabledWrapper = exports.DisabledWrapper = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: not-allowed;\n"])));
|
|
35
|
+
var DisabledWrapper = exports.DisabledWrapper = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: not-allowed;\n line-height: 1.2;\n"])));
|
|
36
36
|
var StyledLink = (0, _styled["default"])('a', (0, _utils.omitEmotionProps)('size', 'underline', 'disabled', 'as'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", ";\n\n cursor: pointer;\n text-decoration: none;\n line-height: 1.2;\n padding-bottom: 0.1em;\n\n &,\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n"])), _styles.resetFocusStyles, function (p) {
|
|
37
37
|
return (0, _theming.clr)(p.theme.linkColor);
|
|
38
38
|
}, underlineHoverStyles, underlineAlwaysStyles, disabledStyles, _styles.sizeStyles);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_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","underlineBaseStyles","p","css","clr","theme","linkColor","underlineHoverStyles","exports","underline","transitionStyles","underlineAlwaysStyles","disabledStyles","disabled","inputColorPlaceholder","DisabledWrapper","styled","div","StyledLink","omitEmotionProps","resetFocusStyles","sizeStyles","Link","forwardRef","_ref","ref","_ref$underline","_ref$disabled","as","_ref$onMouseDown","onMouseDown","rest","createElement","preventDefault","displayName","_default"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n to?: string;\n replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n /**\n * Type of the underline styles.\n * @default hover\n */\n underline?: 'hover' | 'always' | 'never';\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The custom link component.\n * For example, the Link from react-router-dom.\n * @default undefined\n */\n as?: React.ElementType;\n}\n\nconst underlineBaseStyles = (p) => css`\n position: relative;\n display: inline-block;\n\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n content: '';\n height: 0.125em;\n background-color: ${clr(p.theme.linkColor)};\n }\n`;\n\nexport const underlineHoverStyles = (p) =>\n p.underline === 'hover' &&\n css`\n @media (hover: hover) {\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 0;\n opacity: 0;\n ${transitionStyles('width', 'opacity')(p)};\n }\n\n &:hover::after,\n &:focus::after {\n width: 100%;\n opacity: 1;\n }\n }\n `;\n\nexport const underlineAlwaysStyles = (p) =>\n p.underline === 'always' &&\n css`\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 100%;\n opacity: 1;\n }\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n\n &,\n &:active,\n &:focus {\n color: ${clr(p.theme.inputColorPlaceholder)};\n }\n `;\n\nexport const DisabledWrapper = styled.div`\n display: inline-block;\n cursor: not-allowed;\n`;\n\nconst StyledLink = styled(\n 'a',\n omitEmotionProps('size', 'underline', 'disabled', 'as')\n)<LinkProps>`\n ${resetFocusStyles};\n\n cursor: pointer;\n text-decoration: none;\n line-height: 1.2;\n padding-bottom: 0.1em;\n\n &,\n &:active,\n &:focus {\n color: ${(p) => clr(p.theme.linkColor)};\n }\n\n ${underlineHoverStyles};\n ${underlineAlwaysStyles};\n ${disabledStyles};\n ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n underline = 'hover',\n disabled = false,\n as,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n if (disabled) {\n return (\n <DisabledWrapper>\n <StyledLink disabled {...rest} ref={ref} />\n </DisabledWrapper>\n );\n }\n\n return (\n <StyledLink\n underline={underline}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_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","underlineBaseStyles","p","css","clr","theme","linkColor","underlineHoverStyles","exports","underline","transitionStyles","underlineAlwaysStyles","disabledStyles","disabled","inputColorPlaceholder","DisabledWrapper","styled","div","StyledLink","omitEmotionProps","resetFocusStyles","sizeStyles","Link","forwardRef","_ref","ref","_ref$underline","_ref$disabled","as","_ref$onMouseDown","onMouseDown","rest","createElement","preventDefault","displayName","_default"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n to?: string;\n replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n /**\n * Type of the underline styles.\n * @default hover\n */\n underline?: 'hover' | 'always' | 'never';\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The custom link component.\n * For example, the Link from react-router-dom.\n * @default undefined\n */\n as?: React.ElementType;\n}\n\nconst underlineBaseStyles = (p) => css`\n position: relative;\n display: inline-block;\n\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n content: '';\n height: 0.125em;\n background-color: ${clr(p.theme.linkColor)};\n }\n`;\n\nexport const underlineHoverStyles = (p) =>\n p.underline === 'hover' &&\n css`\n @media (hover: hover) {\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 0;\n opacity: 0;\n ${transitionStyles('width', 'opacity')(p)};\n }\n\n &:hover::after,\n &:focus::after {\n width: 100%;\n opacity: 1;\n }\n }\n `;\n\nexport const underlineAlwaysStyles = (p) =>\n p.underline === 'always' &&\n css`\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 100%;\n opacity: 1;\n }\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n\n &,\n &:active,\n &:focus {\n color: ${clr(p.theme.inputColorPlaceholder)};\n }\n `;\n\nexport const DisabledWrapper = styled.div`\n display: inline-block;\n cursor: not-allowed;\n line-height: 1.2;\n`;\n\nconst StyledLink = styled(\n 'a',\n omitEmotionProps('size', 'underline', 'disabled', 'as')\n)<LinkProps>`\n ${resetFocusStyles};\n\n cursor: pointer;\n text-decoration: none;\n line-height: 1.2;\n padding-bottom: 0.1em;\n\n &,\n &:active,\n &:focus {\n color: ${(p) => clr(p.theme.linkColor)};\n }\n\n ${underlineHoverStyles};\n ${underlineAlwaysStyles};\n ${disabledStyles};\n ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n underline = 'hover',\n disabled = false,\n as,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n if (disabled) {\n return (\n <DisabledWrapper>\n <StyledLink disabled {...rest} ref={ref} />\n </DisabledWrapper>\n );\n }\n\n return (\n <StyledLink\n underline={underline}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":"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"}
|
|
@@ -24,11 +24,16 @@ const Text = styled.div`
|
|
|
24
24
|
margin-left: 0.4em;
|
|
25
25
|
color: ${p => clr(p.theme.colorText)};
|
|
26
26
|
`;
|
|
27
|
+
const TextSkeleton = styled(Skeleton)`
|
|
28
|
+
margin-left: 0.4em;
|
|
29
|
+
margin-top: ${p => (p.theme.lineHeight - 1) / 2}em;
|
|
30
|
+
`;
|
|
27
31
|
|
|
28
32
|
/**
|
|
29
33
|
* Provides a checkbox placeholder while a user waits for the content to load.
|
|
30
34
|
*/
|
|
31
35
|
const CheckboxSkeleton = /*#__PURE__*/forwardRef(({
|
|
36
|
+
width = '100%',
|
|
32
37
|
children,
|
|
33
38
|
...rest
|
|
34
39
|
}, ref) => /*#__PURE__*/React.createElement(Container, _extends({
|
|
@@ -36,7 +41,9 @@ const CheckboxSkeleton = /*#__PURE__*/forwardRef(({
|
|
|
36
41
|
"aria-busy": true
|
|
37
42
|
}, rest, {
|
|
38
43
|
ref: ref
|
|
39
|
-
}), /*#__PURE__*/React.createElement(ImageSkeleton, null), children
|
|
44
|
+
}), /*#__PURE__*/React.createElement(ImageSkeleton, null), children ? /*#__PURE__*/React.createElement(Text, null, children) : /*#__PURE__*/React.createElement(TextSkeleton, {
|
|
45
|
+
width: width
|
|
46
|
+
})));
|
|
40
47
|
CheckboxSkeleton.displayName = 'CheckboxSkeleton';
|
|
41
48
|
export default CheckboxSkeleton;
|
|
42
49
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","TextSkeleton","CheckboxSkeleton","width","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface CheckboxSkeletonProps extends JsxDivProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 100%\n */\n width?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst TextSkeleton = styled(Skeleton)`\n margin-left: 0.4em;\n margin-top: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ width = '100%', children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children ? <Text>{children}</Text> : <TextSkeleton width={width} />}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAWlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;AAED,MAAMC,YAAY,GAAGlB,MAAM,CAACM,QAAQ,CAAE;AACtC;AACA,gBAAiBE,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAE;AACpD,CAAC;;AAED;AACA;AACA;AACA,MAAMK,gBAAgB,gBAAGd,UAAU,CACjC,CAAC;EAAEe,KAAK,GAAG,MAAM;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzCnB,KAAA,CAAAoB,aAAA,CAACjB,SAAS,EAAAkB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDnB,KAAA,CAAAoB,aAAA,CAACb,aAAa,MAAE,CAAC,EAChBU,QAAQ,gBAAGjB,KAAA,CAAAoB,aAAA,CAACT,IAAI,QAAEM,QAAe,CAAC,gBAAGjB,KAAA,CAAAoB,aAAA,CAACN,YAAY;EAACE,KAAK,EAAEA;AAAM,CAAE,CAC1D,CAEf,CAAC;AAEDD,gBAAgB,CAACQ,WAAW,GAAG,kBAAkB;AAEjD,eAAeR,gBAAgB"}
|
package/dist/esm/Link/index.js
CHANGED
|
@@ -55,6 +55,7 @@ const disabledStyles = p => p.disabled && css`
|
|
|
55
55
|
export const DisabledWrapper = styled.div`
|
|
56
56
|
display: inline-block;
|
|
57
57
|
cursor: not-allowed;
|
|
58
|
+
line-height: 1.2;
|
|
58
59
|
`;
|
|
59
60
|
const StyledLink = styled('a', omitEmotionProps('size', 'underline', 'disabled', 'as'))`
|
|
60
61
|
${resetFocusStyles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","disabledStyles","disabled","inputColorPlaceholder","DisabledWrapper","div","StyledLink","Link","as","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n to?: string;\n replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n /**\n * Type of the underline styles.\n * @default hover\n */\n underline?: 'hover' | 'always' | 'never';\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The custom link component.\n * For example, the Link from react-router-dom.\n * @default undefined\n */\n as?: React.ElementType;\n}\n\nconst underlineBaseStyles = (p) => css`\n position: relative;\n display: inline-block;\n\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n content: '';\n height: 0.125em;\n background-color: ${clr(p.theme.linkColor)};\n }\n`;\n\nexport const underlineHoverStyles = (p) =>\n p.underline === 'hover' &&\n css`\n @media (hover: hover) {\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 0;\n opacity: 0;\n ${transitionStyles('width', 'opacity')(p)};\n }\n\n &:hover::after,\n &:focus::after {\n width: 100%;\n opacity: 1;\n }\n }\n `;\n\nexport const underlineAlwaysStyles = (p) =>\n p.underline === 'always' &&\n css`\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 100%;\n opacity: 1;\n }\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n\n &,\n &:active,\n &:focus {\n color: ${clr(p.theme.inputColorPlaceholder)};\n }\n `;\n\nexport const DisabledWrapper = styled.div`\n display: inline-block;\n cursor: not-allowed;\n`;\n\nconst StyledLink = styled(\n 'a',\n omitEmotionProps('size', 'underline', 'disabled', 'as')\n)<LinkProps>`\n ${resetFocusStyles};\n\n cursor: pointer;\n text-decoration: none;\n line-height: 1.2;\n padding-bottom: 0.1em;\n\n &,\n &:active,\n &:focus {\n color: ${(p) => clr(p.theme.linkColor)};\n }\n\n ${underlineHoverStyles};\n ${underlineAlwaysStyles};\n ${disabledStyles};\n ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n underline = 'hover',\n disabled = false,\n as,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n if (disabled) {\n return (\n <DisabledWrapper>\n <StyledLink disabled {...rest} ref={ref} />\n </DisabledWrapper>\n );\n }\n\n return (\n <StyledLink\n underline={underline}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AA2BzC,MAAMC,mBAAmB,GAAIC,CAAC,IAAKV,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAIH,CAAC,IACpCA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBd,GAAI;AACN;AACA,QAAQS,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUN,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACM,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,OAAO,MAAMK,qBAAqB,GAAIL,CAAC,IACrCA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBd,GAAI;AACN,MAAMS,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,cAAc,GAAIN,CAAC,IACvBA,CAAC,CAACO,QAAQ,IACVjB,GAAI;AACN;AACA;AACA;AACA;AACA;AACA,eAAeK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,qBAAqB,CAAE;AAClD;AACA,GAAG;AAEH,OAAO,MAAMC,eAAe,GAAGlB,MAAM,CAACmB,GAAI;AAC1C;AACA;AACA,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CACvB,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,CACxD,CAAa;AACb,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcQ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIC,cAAe;AACnB,IAAIb,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMmB,IAAI,gBAAGd,UAAU,CACrB,CACE;EACEM,SAAS,GAAG,OAAO;EACnBG,QAAQ,GAAG,KAAK;EAChBM,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,IAAIT,QAAQ,EAAE;IACZ,oBACEV,KAAA,CAAAoB,aAAA,CAACR,eAAe,qBACdZ,KAAA,CAAAoB,aAAA,CAACN,UAAU,EAAAO,QAAA;MAACX,QAAQ;IAAA,GAAKQ,IAAI;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAC3B,CAAC;EAEtB;EAEA,oBACEnB,KAAA,CAAAoB,aAAA,CAACN,UAAU,EAAAO,QAAA;IACTd,SAAS,EAAEA,SAAU;IACrBS,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGK,CAAC,IAAK;MAClBL,WAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEL,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDJ,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","disabledStyles","disabled","inputColorPlaceholder","DisabledWrapper","div","StyledLink","Link","as","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n to?: string;\n replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n /**\n * Type of the underline styles.\n * @default hover\n */\n underline?: 'hover' | 'always' | 'never';\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The custom link component.\n * For example, the Link from react-router-dom.\n * @default undefined\n */\n as?: React.ElementType;\n}\n\nconst underlineBaseStyles = (p) => css`\n position: relative;\n display: inline-block;\n\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n content: '';\n height: 0.125em;\n background-color: ${clr(p.theme.linkColor)};\n }\n`;\n\nexport const underlineHoverStyles = (p) =>\n p.underline === 'hover' &&\n css`\n @media (hover: hover) {\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 0;\n opacity: 0;\n ${transitionStyles('width', 'opacity')(p)};\n }\n\n &:hover::after,\n &:focus::after {\n width: 100%;\n opacity: 1;\n }\n }\n `;\n\nexport const underlineAlwaysStyles = (p) =>\n p.underline === 'always' &&\n css`\n ${underlineBaseStyles(p)};\n\n &::after {\n width: 100%;\n opacity: 1;\n }\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n\n &,\n &:active,\n &:focus {\n color: ${clr(p.theme.inputColorPlaceholder)};\n }\n `;\n\nexport const DisabledWrapper = styled.div`\n display: inline-block;\n cursor: not-allowed;\n line-height: 1.2;\n`;\n\nconst StyledLink = styled(\n 'a',\n omitEmotionProps('size', 'underline', 'disabled', 'as')\n)<LinkProps>`\n ${resetFocusStyles};\n\n cursor: pointer;\n text-decoration: none;\n line-height: 1.2;\n padding-bottom: 0.1em;\n\n &,\n &:active,\n &:focus {\n color: ${(p) => clr(p.theme.linkColor)};\n }\n\n ${underlineHoverStyles};\n ${underlineAlwaysStyles};\n ${disabledStyles};\n ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n underline = 'hover',\n disabled = false,\n as,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n if (disabled) {\n return (\n <DisabledWrapper>\n <StyledLink disabled {...rest} ref={ref} />\n </DisabledWrapper>\n );\n }\n\n return (\n <StyledLink\n underline={underline}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AA2BzC,MAAMC,mBAAmB,GAAIC,CAAC,IAAKV,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAIH,CAAC,IACpCA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBd,GAAI;AACN;AACA,QAAQS,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUN,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACM,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,OAAO,MAAMK,qBAAqB,GAAIL,CAAC,IACrCA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBd,GAAI;AACN,MAAMS,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,cAAc,GAAIN,CAAC,IACvBA,CAAC,CAACO,QAAQ,IACVjB,GAAI;AACN;AACA;AACA;AACA;AACA;AACA,eAAeK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,qBAAqB,CAAE;AAClD;AACA,GAAG;AAEH,OAAO,MAAMC,eAAe,GAAGlB,MAAM,CAACmB,GAAI;AAC1C;AACA;AACA;AACA,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CACvB,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,CACxD,CAAa;AACb,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcQ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIC,cAAe;AACnB,IAAIb,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMmB,IAAI,gBAAGd,UAAU,CACrB,CACE;EACEM,SAAS,GAAG,OAAO;EACnBG,QAAQ,GAAG,KAAK;EAChBM,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,IAAIT,QAAQ,EAAE;IACZ,oBACEV,KAAA,CAAAoB,aAAA,CAACR,eAAe,qBACdZ,KAAA,CAAAoB,aAAA,CAACN,UAAU,EAAAO,QAAA;MAACX,QAAQ;IAAA,GAAKQ,IAAI;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAC3B,CAAC;EAEtB;EAEA,oBACEnB,KAAA,CAAAoB,aAAA,CAACN,UAAU,EAAAO,QAAA;IACTd,SAAS,EAAEA,SAAU;IACrBS,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGK,CAAC,IAAK;MAClBL,WAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEL,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDJ,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { WithSize } from '@os-design/styles';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
|
|
4
|
-
export
|
|
5
|
-
|
|
4
|
+
export interface CheckboxSkeletonProps extends JsxDivProps, WithSize {
|
|
5
|
+
width?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const CheckboxSkeleton: React.ForwardRefExoticComponent<CheckboxSkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
8
|
export default CheckboxSkeleton;
|
|
7
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,QAAQ;IAKlE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgCD,QAAA,MAAM,gBAAgB,8FAOrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Link/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,oBAAoB,EAAE,QAAQ;IAK1E,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAgBD,eAAO,MAAM,oBAAoB,+DAkB9B,CAAC;AAEJ,eAAO,MAAM,qBAAqB,+DAS/B,CAAC;AAcJ,eAAO,MAAM,eAAe;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Link/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,oBAAoB,EAAE,QAAQ;IAK1E,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAgBD,eAAO,MAAM,oBAAoB,+DAkB9B,CAAC;AAEJ,eAAO,MAAM,qBAAqB,+DAS/B,CAAC;AAcJ,eAAO,MAAM,eAAe;;;qFAI3B,CAAC;AA4BF,QAAA,MAAM,IAAI,qFAgCT,CAAC;AAIF,eAAe,IAAI,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.234",
|
|
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": "7a275e3eb2592b986e592e67b1af11432c02fc35"
|
|
63
63
|
}
|
|
@@ -6,7 +6,13 @@ import React, { forwardRef } from 'react';
|
|
|
6
6
|
import Skeleton from '../Skeleton';
|
|
7
7
|
|
|
8
8
|
type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
|
|
9
|
-
export
|
|
9
|
+
export interface CheckboxSkeletonProps extends JsxDivProps, WithSize {
|
|
10
|
+
/**
|
|
11
|
+
* The width of the skeleton.
|
|
12
|
+
* @default 100%
|
|
13
|
+
*/
|
|
14
|
+
width?: string;
|
|
15
|
+
}
|
|
10
16
|
|
|
11
17
|
const Container = styled('div', omitEmotionProps('size'))<WithSize>`
|
|
12
18
|
user-select: none;
|
|
@@ -30,14 +36,19 @@ const Text = styled.div`
|
|
|
30
36
|
color: ${(p) => clr(p.theme.colorText)};
|
|
31
37
|
`;
|
|
32
38
|
|
|
39
|
+
const TextSkeleton = styled(Skeleton)`
|
|
40
|
+
margin-left: 0.4em;
|
|
41
|
+
margin-top: ${(p) => (p.theme.lineHeight - 1) / 2}em;
|
|
42
|
+
`;
|
|
43
|
+
|
|
33
44
|
/**
|
|
34
45
|
* Provides a checkbox placeholder while a user waits for the content to load.
|
|
35
46
|
*/
|
|
36
47
|
const CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(
|
|
37
|
-
({ children, ...rest }, ref) => (
|
|
48
|
+
({ width = '100%', children, ...rest }, ref) => (
|
|
38
49
|
<Container role='checkbox' aria-busy {...rest} ref={ref}>
|
|
39
50
|
<ImageSkeleton />
|
|
40
|
-
{children
|
|
51
|
+
{children ? <Text>{children}</Text> : <TextSkeleton width={width} />}
|
|
41
52
|
</Container>
|
|
42
53
|
)
|
|
43
54
|
);
|