@os-design/core 1.0.254 → 1.0.255
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 +5 -5
- package/dist/cjs/Alert/index.js.map +1 -1
- package/dist/cjs/Avatar/index.js +5 -5
- package/dist/cjs/Avatar/index.js.map +1 -1
- package/dist/cjs/AvatarSkeleton/index.js +5 -5
- package/dist/cjs/AvatarSkeleton/index.js.map +1 -1
- package/dist/cjs/Badge/index.js +9 -9
- package/dist/cjs/Badge/index.js.map +1 -1
- package/dist/cjs/Breadcrumb/index.js +7 -7
- package/dist/cjs/Breadcrumb/index.js.map +1 -1
- package/dist/cjs/BreadcrumbItem/index.js +5 -5
- package/dist/cjs/BreadcrumbItem/index.js.map +1 -1
- package/dist/cjs/Button/ButtonContent.js +2 -2
- package/dist/cjs/Button/ButtonContent.js.map +1 -1
- package/dist/cjs/Button/index.js +5 -5
- package/dist/cjs/Button/index.js.map +1 -1
- package/dist/cjs/ButtonLink/index.js +5 -5
- package/dist/cjs/ButtonLink/index.js.map +1 -1
- package/dist/cjs/Checkbox/index.js +9 -9
- package/dist/cjs/Checkbox/index.js.map +1 -1
- package/dist/cjs/CheckboxSkeleton/index.js +5 -5
- package/dist/cjs/CheckboxSkeleton/index.js.map +1 -1
- package/dist/cjs/DatePicker/DatePickerCalendar.js +8 -8
- package/dist/cjs/DatePicker/DatePickerCalendar.js.map +1 -1
- package/dist/cjs/DatePicker/index.js +9 -9
- package/dist/cjs/DatePicker/index.js.map +1 -1
- package/dist/cjs/Drawer/index.js +5 -5
- package/dist/cjs/Drawer/index.js.map +1 -1
- package/dist/cjs/Form/FormConfigContext.js +1 -1
- package/dist/cjs/Form/FormConfigContext.js.map +1 -1
- package/dist/cjs/Form/index.js +5 -5
- package/dist/cjs/Form/index.js.map +1 -1
- package/dist/cjs/FormDivider/index.js +5 -5
- package/dist/cjs/FormDivider/index.js.map +1 -1
- package/dist/cjs/FormItem/index.js +5 -5
- package/dist/cjs/FormItem/index.js.map +1 -1
- package/dist/cjs/Gallery/Status.js +2 -2
- package/dist/cjs/Gallery/Status.js.map +1 -1
- package/dist/cjs/Gallery/index.js +9 -9
- package/dist/cjs/Gallery/index.js.map +1 -1
- package/dist/cjs/GlobalStyles/index.js +1 -1
- package/dist/cjs/GlobalStyles/index.js.map +1 -1
- package/dist/cjs/GlobalStyles/resetStyles.js +1 -1
- package/dist/cjs/GlobalStyles/resetStyles.js.map +1 -1
- package/dist/cjs/GlobalStyles/typographyStyles.js +2 -2
- package/dist/cjs/GlobalStyles/typographyStyles.js.map +1 -1
- package/dist/cjs/HeaderSkeleton/index.js +5 -5
- package/dist/cjs/HeaderSkeleton/index.js.map +1 -1
- package/dist/cjs/Image/index.js +5 -5
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/cjs/ImageSkeleton/index.js +3 -3
- package/dist/cjs/ImageSkeleton/index.js.map +1 -1
- package/dist/cjs/Input/index.js +9 -9
- package/dist/cjs/Input/index.js.map +1 -1
- package/dist/cjs/Input/utils/getFocusableElements.js +5 -5
- package/dist/cjs/InputNumber/index.js +8 -8
- package/dist/cjs/InputNumber/index.js.map +1 -1
- package/dist/cjs/InputPassword/index.js +9 -9
- package/dist/cjs/InputPassword/index.js.map +1 -1
- package/dist/cjs/InputSearch/index.js +9 -9
- package/dist/cjs/InputSearch/index.js.map +1 -1
- package/dist/cjs/InputSkeleton/index.js +3 -3
- package/dist/cjs/InputSkeleton/index.js.map +1 -1
- package/dist/cjs/Layout/LayoutContext.js +1 -1
- package/dist/cjs/Layout/LayoutContext.js.map +1 -1
- package/dist/cjs/Layout/index.js +1 -1
- package/dist/cjs/Layout/index.js.map +1 -1
- package/dist/cjs/Link/index.js +5 -5
- package/dist/cjs/Link/index.js.map +1 -1
- package/dist/cjs/LinkButton/index.js +5 -5
- package/dist/cjs/LinkButton/index.js.map +1 -1
- package/dist/cjs/List/index.js +9 -9
- package/dist/cjs/List/index.js.map +1 -1
- package/dist/cjs/List/utils/frameTimeout.js +3 -3
- package/dist/cjs/List/utils/frameTimeout.js.map +1 -1
- package/dist/cjs/ListItem/index.js +5 -5
- package/dist/cjs/ListItem/index.js.map +1 -1
- package/dist/cjs/ListItemActions/index.js +12 -12
- package/dist/cjs/ListItemActions/index.js.map +1 -1
- package/dist/cjs/ListItemLink/index.js +10 -10
- package/dist/cjs/ListItemLink/index.js.map +1 -1
- package/dist/cjs/ListItemSkeleton/index.js +5 -5
- package/dist/cjs/ListItemSkeleton/index.js.map +1 -1
- package/dist/cjs/ListSkeleton/index.js +4 -4
- package/dist/cjs/ListSkeleton/index.js.map +1 -1
- package/dist/cjs/LogoLink/index.js +5 -5
- package/dist/cjs/LogoLink/index.js.map +1 -1
- package/dist/cjs/Menu/index.js +9 -9
- package/dist/cjs/Menu/index.js.map +1 -1
- package/dist/cjs/Menu/utils/useFocusWithArrows.js +5 -5
- package/dist/cjs/Menu/utils/useFocusWithArrows.js.map +1 -1
- package/dist/cjs/MenuDivider/index.js +3 -3
- package/dist/cjs/MenuDivider/index.js.map +1 -1
- package/dist/cjs/MenuGroup/index.js +13 -13
- package/dist/cjs/MenuGroup/index.js.map +1 -1
- package/dist/cjs/MenuItem/index.js +5 -5
- package/dist/cjs/MenuItem/index.js.map +1 -1
- package/dist/cjs/Modal/index.js +5 -5
- package/dist/cjs/Modal/index.js.map +1 -1
- package/dist/cjs/Navigation/index.js +5 -5
- package/dist/cjs/Navigation/index.js.map +1 -1
- package/dist/cjs/Navigation/utils/useScrollFlags.js +4 -4
- package/dist/cjs/Navigation/utils/useScrollFlags.js.map +1 -1
- package/dist/cjs/NavigationItem/index.js +5 -5
- package/dist/cjs/NavigationItem/index.js.map +1 -1
- package/dist/cjs/PageContent/index.js +5 -5
- package/dist/cjs/PageContent/index.js.map +1 -1
- package/dist/cjs/PageHeader/index.js +5 -5
- package/dist/cjs/PageHeader/index.js.map +1 -1
- package/dist/cjs/PageHeaderInputSearch/index.js +9 -9
- package/dist/cjs/PageHeaderInputSearch/index.js.map +1 -1
- package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js +2 -2
- package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js.map +1 -1
- package/dist/cjs/PageHeaderSkeleton/index.js +4 -4
- package/dist/cjs/PageHeaderSkeleton/index.js.map +1 -1
- package/dist/cjs/ParagraphSkeleton/index.js +5 -5
- package/dist/cjs/ParagraphSkeleton/index.js.map +1 -1
- package/dist/cjs/Popover/index.js +9 -9
- package/dist/cjs/Popover/index.js.map +1 -1
- package/dist/cjs/Popover/utils/usePopoverPosition.js +6 -6
- package/dist/cjs/Popover/utils/usePopoverPosition.js.map +1 -1
- package/dist/cjs/Progress/index.js +5 -5
- package/dist/cjs/Progress/index.js.map +1 -1
- package/dist/cjs/RadioGroup/index.js +9 -9
- package/dist/cjs/RadioGroup/index.js.map +1 -1
- package/dist/cjs/RadioGroupSkeleton/index.js +5 -5
- package/dist/cjs/RadioGroupSkeleton/index.js.map +1 -1
- package/dist/cjs/Result/index.js +5 -5
- package/dist/cjs/Result/index.js.map +1 -1
- package/dist/cjs/ScrollButton/index.js +5 -5
- package/dist/cjs/ScrollButton/index.js.map +1 -1
- package/dist/cjs/ScrollButton/utils/useContainerPosition.js +4 -4
- package/dist/cjs/ScrollButton/utils/useContainerPosition.js.map +1 -1
- package/dist/cjs/ScrollButton/utils/useVisibility.js +4 -4
- package/dist/cjs/ScrollButton/utils/useVisibility.js.map +1 -1
- package/dist/cjs/Select/index.js +13 -13
- package/dist/cjs/Select/index.js.map +1 -1
- package/dist/cjs/Skeleton/index.js +5 -5
- package/dist/cjs/Skeleton/index.js.map +1 -1
- package/dist/cjs/Switch/index.js +9 -9
- package/dist/cjs/Switch/index.js.map +1 -1
- package/dist/cjs/SwitchSkeleton/index.js +3 -3
- package/dist/cjs/SwitchSkeleton/index.js.map +1 -1
- package/dist/cjs/Tag/index.js +5 -5
- package/dist/cjs/Tag/index.js.map +1 -1
- package/dist/cjs/TagLink/index.js +5 -5
- package/dist/cjs/TagLink/index.js.map +1 -1
- package/dist/cjs/TagList/index.js +9 -9
- package/dist/cjs/TagList/index.js.map +1 -1
- package/dist/cjs/TagListSkeleton/index.js +4 -4
- package/dist/cjs/TagListSkeleton/index.js.map +1 -1
- package/dist/cjs/TagSkeleton/index.js +5 -5
- package/dist/cjs/TagSkeleton/index.js.map +1 -1
- package/dist/cjs/TextArea/index.js +9 -9
- package/dist/cjs/TextArea/index.js.map +1 -1
- package/dist/cjs/TextAreaSkeleton/index.js +3 -3
- package/dist/cjs/TextAreaSkeleton/index.js.map +1 -1
- package/dist/cjs/ThemeSwitcher/index.js +4 -4
- package/dist/cjs/ThemeSwitcher/index.js.map +1 -1
- package/dist/cjs/TimePicker/index.js +8 -8
- package/dist/cjs/TimePicker/index.js.map +1 -1
- package/dist/cjs/Video/index.js +5 -5
- package/dist/cjs/Video/index.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/message/AlertIcon.js +2 -2
- package/dist/cjs/message/AlertIcon.js.map +1 -1
- package/dist/cjs/message/Message.js +2 -2
- package/dist/cjs/message/Message.js.map +1 -1
- package/dist/cjs/message/index.js +1 -1
- package/dist/cjs/message/index.js.map +1 -1
- package/dist/cjs/message/styles.js +4 -4
- package/dist/esm/Alert/index.js +1 -1
- package/dist/esm/Alert/index.js.map +1 -1
- package/dist/esm/Avatar/index.js +1 -1
- package/dist/esm/Avatar/index.js.map +1 -1
- package/dist/esm/Avatar/utils/nameToInitials.js.map +1 -1
- package/dist/esm/AvatarSkeleton/index.js +1 -1
- package/dist/esm/AvatarSkeleton/index.js.map +1 -1
- package/dist/esm/Badge/index.js +1 -1
- package/dist/esm/Badge/index.js.map +1 -1
- package/dist/esm/Breadcrumb/index.js +2 -2
- package/dist/esm/Breadcrumb/index.js.map +1 -1
- package/dist/esm/BreadcrumbItem/index.js +1 -1
- package/dist/esm/BreadcrumbItem/index.js.map +1 -1
- package/dist/esm/Button/ButtonContent.js.map +1 -1
- package/dist/esm/Button/index.js +1 -1
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Button/utils/useButtonColors.js.map +1 -1
- package/dist/esm/ButtonLink/index.js +1 -1
- package/dist/esm/ButtonLink/index.js.map +1 -1
- package/dist/esm/Checkbox/index.js +1 -1
- package/dist/esm/Checkbox/index.js.map +1 -1
- package/dist/esm/CheckboxSkeleton/index.js +1 -1
- package/dist/esm/CheckboxSkeleton/index.js.map +1 -1
- package/dist/esm/DatePicker/DatePickerCalendar.js +1 -1
- package/dist/esm/DatePicker/DatePickerCalendar.js.map +1 -1
- package/dist/esm/DatePicker/index.js +1 -1
- package/dist/esm/DatePicker/index.js.map +1 -1
- package/dist/esm/Drawer/index.js +1 -1
- package/dist/esm/Drawer/index.js.map +1 -1
- package/dist/esm/Form/index.js +1 -1
- package/dist/esm/Form/index.js.map +1 -1
- package/dist/esm/FormDivider/index.js +1 -1
- package/dist/esm/FormDivider/index.js.map +1 -1
- package/dist/esm/FormItem/index.js +1 -1
- package/dist/esm/FormItem/index.js.map +1 -1
- package/dist/esm/Gallery/Status.js.map +1 -1
- package/dist/esm/Gallery/index.js +1 -1
- package/dist/esm/Gallery/index.js.map +1 -1
- package/dist/esm/GlobalStyles/resetStyles.js.map +1 -1
- package/dist/esm/GlobalStyles/typographyStyles.js.map +1 -1
- package/dist/esm/HeaderSkeleton/index.js +1 -1
- package/dist/esm/HeaderSkeleton/index.js.map +1 -1
- package/dist/esm/Image/index.js +1 -1
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/esm/ImageSkeleton/index.js +1 -1
- package/dist/esm/ImageSkeleton/index.js.map +1 -1
- package/dist/esm/Input/index.js +1 -1
- package/dist/esm/Input/index.js.map +1 -1
- package/dist/esm/InputNumber/index.js +1 -1
- package/dist/esm/InputPassword/index.js +1 -1
- package/dist/esm/InputPassword/index.js.map +1 -1
- package/dist/esm/InputSearch/index.js +1 -1
- package/dist/esm/InputSearch/index.js.map +1 -1
- package/dist/esm/InputSkeleton/index.js +1 -1
- package/dist/esm/InputSkeleton/index.js.map +1 -1
- package/dist/esm/Link/index.js +1 -1
- package/dist/esm/Link/index.js.map +1 -1
- package/dist/esm/LinkButton/index.js +1 -1
- package/dist/esm/LinkButton/index.js.map +1 -1
- package/dist/esm/List/index.js +1 -1
- package/dist/esm/List/index.js.map +1 -1
- package/dist/esm/ListItem/index.js +1 -1
- package/dist/esm/ListItem/index.js.map +1 -1
- package/dist/esm/ListItemActions/index.js +1 -1
- package/dist/esm/ListItemActions/index.js.map +1 -1
- package/dist/esm/ListItemLink/index.js +1 -1
- package/dist/esm/ListItemLink/index.js.map +1 -1
- package/dist/esm/ListItemSkeleton/index.js +1 -1
- package/dist/esm/ListItemSkeleton/index.js.map +1 -1
- package/dist/esm/ListSkeleton/index.js +1 -1
- package/dist/esm/LogoLink/index.js +1 -1
- package/dist/esm/LogoLink/index.js.map +1 -1
- package/dist/esm/Menu/index.js +1 -1
- package/dist/esm/Menu/index.js.map +1 -1
- package/dist/esm/MenuDivider/index.js +1 -1
- package/dist/esm/MenuDivider/index.js.map +1 -1
- package/dist/esm/MenuGroup/index.js +1 -1
- package/dist/esm/MenuGroup/index.js.map +1 -1
- package/dist/esm/MenuItem/index.js +1 -1
- package/dist/esm/MenuItem/index.js.map +1 -1
- package/dist/esm/Modal/index.js +1 -1
- package/dist/esm/Modal/index.js.map +1 -1
- package/dist/esm/Navigation/index.js +1 -1
- package/dist/esm/Navigation/index.js.map +1 -1
- package/dist/esm/NavigationItem/index.js +1 -1
- package/dist/esm/NavigationItem/index.js.map +1 -1
- package/dist/esm/PageContent/index.js +1 -1
- package/dist/esm/PageContent/index.js.map +1 -1
- package/dist/esm/PageHeader/index.js +1 -1
- package/dist/esm/PageHeader/index.js.map +1 -1
- package/dist/esm/PageHeaderInputSearch/index.js +1 -1
- package/dist/esm/PageHeaderInputSearch/index.js.map +1 -1
- package/dist/esm/PageHeaderSkeleton/index.js +1 -1
- package/dist/esm/ParagraphSkeleton/index.js +1 -1
- package/dist/esm/ParagraphSkeleton/index.js.map +1 -1
- package/dist/esm/Popover/index.js +1 -1
- package/dist/esm/Popover/index.js.map +1 -1
- package/dist/esm/Progress/index.js +1 -1
- package/dist/esm/Progress/index.js.map +1 -1
- package/dist/esm/RadioGroup/index.js +1 -1
- package/dist/esm/RadioGroup/index.js.map +1 -1
- package/dist/esm/RadioGroupSkeleton/index.js +1 -1
- package/dist/esm/RadioGroupSkeleton/index.js.map +1 -1
- package/dist/esm/Result/index.js +1 -1
- package/dist/esm/Result/index.js.map +1 -1
- package/dist/esm/ScrollButton/index.js +1 -1
- package/dist/esm/ScrollButton/index.js.map +1 -1
- package/dist/esm/Select/index.js +1 -1
- package/dist/esm/Select/index.js.map +1 -1
- package/dist/esm/Skeleton/index.js +1 -1
- package/dist/esm/Skeleton/index.js.map +1 -1
- package/dist/esm/Switch/index.js +1 -1
- package/dist/esm/Switch/index.js.map +1 -1
- package/dist/esm/SwitchSkeleton/index.js +1 -1
- package/dist/esm/SwitchSkeleton/index.js.map +1 -1
- package/dist/esm/Tag/index.js +1 -1
- package/dist/esm/Tag/index.js.map +1 -1
- package/dist/esm/TagLink/index.js +1 -1
- package/dist/esm/TagLink/index.js.map +1 -1
- package/dist/esm/TagList/index.js +1 -1
- package/dist/esm/TagList/index.js.map +1 -1
- package/dist/esm/TagListSkeleton/index.js +1 -1
- package/dist/esm/TagSkeleton/index.js +1 -1
- package/dist/esm/TagSkeleton/index.js.map +1 -1
- package/dist/esm/TextArea/index.js +1 -1
- package/dist/esm/TextArea/index.js.map +1 -1
- package/dist/esm/TextAreaSkeleton/index.js +1 -1
- package/dist/esm/TextAreaSkeleton/index.js.map +1 -1
- package/dist/esm/ThemeSwitcher/index.js +1 -1
- package/dist/esm/TimePicker/index.js +1 -1
- package/dist/esm/Video/index.js +1 -1
- package/dist/esm/Video/index.js.map +1 -1
- package/dist/esm/message/AlertIcon.js.map +1 -1
- package/dist/esm/message/Message.js.map +1 -1
- package/dist/types/Button/index.d.ts +2 -2
- package/dist/types/Button/index.d.ts.map +1 -1
- package/dist/types/ButtonLink/index.d.ts +14 -13
- package/dist/types/ButtonLink/index.d.ts.map +1 -1
- package/dist/types/Input/index.d.ts +4 -4
- package/dist/types/Input/index.d.ts.map +1 -1
- package/dist/types/Link/index.d.ts +4 -4
- package/dist/types/Link/index.d.ts.map +1 -1
- package/dist/types/Menu/utils/useFocusWithArrows.d.ts.map +1 -1
- package/dist/types/Modal/index.d.ts +2 -2
- package/dist/types/Modal/index.d.ts.map +1 -1
- package/dist/types/Navigation/utils/useScrollFlags.d.ts.map +1 -1
- package/dist/types/PageHeader/index.d.ts +2 -2
- package/dist/types/PageHeader/index.d.ts.map +1 -1
- package/dist/types/ScrollButton/utils/useContainerPosition.d.ts.map +1 -1
- package/dist/types/Select/index.d.ts +21 -21
- package/dist/types/Select/index.d.ts.map +1 -1
- package/dist/types/Tag/index.d.ts +6 -6
- package/dist/types/Tag/index.d.ts.map +1 -1
- package/dist/types/ThemeSwitcher/index.d.ts +14 -13
- package/dist/types/ThemeSwitcher/index.d.ts.map +1 -1
- package/dist/types/message/styles.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.setStylesToHtmlElement = exports.messageContainerStyles = exports.containerStyles = void 0;
|
|
7
|
-
function _slicedToArray(
|
|
7
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
8
8
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
-
function _unsupportedIterableToArray(
|
|
10
|
-
function _arrayLikeToArray(
|
|
9
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
10
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
11
11
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
-
function _arrayWithHoles(
|
|
12
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
13
13
|
var containerStyles = exports.containerStyles = {
|
|
14
14
|
position: 'fixed',
|
|
15
15
|
top: '0',
|
package/dist/esm/Alert/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
|
|
@@ -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\n {typeof children === 'string' ? <span>{children}</span> : children}\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,WAAW,EAAEC,WAAW,EAAEC,UAAU,QAAQ,kBAAkB;AACvE,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAUlD,MAAMC,mBAAmB,GAAIC,CAAC,IAC5BA,CAAC,CAACC,IAAI,KAAK,MAAM,IACjBb,
|
|
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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","ignoreList":[]}
|
package/dist/esm/Avatar/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { User } from '@os-design/icons';
|
|
4
4
|
import { sizeStyles } from '@os-design/styles';
|
|
@@ -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","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":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAAgBC,GAAG,EAAEC,QAAQ,QAAQ,oBAAoB;AACzD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC/D,OAAOC,KAAK,MAAsB,UAAU;AAC5C,OAAOC,cAAc,MAAM,wBAAwB;AACnD,OAAOC,QAAQ,MAAM,kBAAkB;AA+BvC,MAAMC,SAAS,GAAGb,MAAM,CAAC,KAAK,EAAEK,gBAAgB,CAAC,MAAM,CAAC,
|
|
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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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAe,CAAC,KAAa;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,
|
|
1
|
+
{"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAe,CAAC,KAAa;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,OAAO,GAAGD,KAAK,GAAGE,MAAM,EAAE,CAACC,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,eAAeN,cAAc","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { sizeStyles } from '@os-design/styles';
|
|
4
4
|
import { omitEmotionProps } from '@os-design/utils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAW;AACnE,IAAID,UAAU;AACd,CAAC;;AAED;AACA;AACA;AACA,MAAMM,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEI,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7BP,KAAA,CAAAQ,aAAA,CAACL,SAAS,EAAAM,QAAA;EAACJ,IAAI,EAAEA;AAAK,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACxCP,KAAA,CAAAQ,aAAA,CAACN,QAAQ;EAACQ,KAAK,EAAC;AAAK,CAAE,CACd,CAEf,CAAC;AAEDN,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc","ignoreList":[]}
|
package/dist/esm/Badge/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { sizeStyles } from '@os-design/styles';
|
|
4
4
|
import { clr } from '@os-design/theming';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","showZero","offset","size","children","rest","ref","Array","isArray","undefined","createElement","_extends","Fragment","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\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 BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default undefined\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Whether the zero is shown.\n * @default false\n */\n showZero?: boolean;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n {\n count,\n max = 99,\n showZero = false,\n offset = '0',\n size = '1em',\n children,\n ...rest\n },\n ref\n ) => {\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return count === undefined || count < 0 || (count === 0 && !showZero) ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n\n <Sized size={size}>\n <Value top={top} right={right}>\n {count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n )}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AA2BlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","showZero","offset","size","children","rest","ref","Array","isArray","undefined","createElement","_extends","Fragment","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\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 BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default undefined\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Whether the zero is shown.\n * @default false\n */\n showZero?: boolean;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n {\n count,\n max = 99,\n showZero = false,\n offset = '0',\n size = '1em',\n children,\n ...rest\n },\n ref\n ) => {\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return count === undefined || count < 0 || (count === 0 && !showZero) ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n\n <Sized size={size}>\n <Value top={top} right={right}>\n {count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n )}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AA2BlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAG;AAC5B;AACA;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,KAAK,GAAGV,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAW;AAC/D,IAAIF,UAAU;AACd,CAAC;AAMD,MAAMU,KAAK,GAAGX,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAa;AACzE;AACA,SAAUS,CAAC,IAAKA,CAAC,CAACC,GAAG;AACrB,WAAYD,CAAC,IAAKA,CAAC,CAACE,KAAK;AACzB;AACA;AACA,YAAYL,SAAS;AACrB,eAAeA,SAAS;AACxB;AACA,mBAAmBA,SAAS,GAAG,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACC,YAAY,CAAC;AACtD,WAAYJ,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACE,cAAc,CAAC;AAC7C,sBAAuBL,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACG,OAAO,CAAC;AACjD;AACA,eAAgBN,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAK;AACzC;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACQ,GAAG;AACvB,eAAgBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAK;AACzC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,KAAK,gBAAGjB,UAAU,CACtB,CACE;EACEkB,KAAK;EACLC,GAAG,GAAG,EAAE;EACRC,QAAQ,GAAG,KAAK;EAChBC,MAAM,GAAG,GAAG;EACZC,IAAI,GAAG,KAAK;EACZC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACjB,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAOyB,KAAK,CAACC,OAAO,CAACN,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOH,KAAK,KAAKU,SAAS,IAAIV,KAAK,GAAG,CAAC,IAAKA,KAAK,KAAK,CAAC,IAAI,CAACE,QAAS,GACnEG,QAAQ,gBAERxB,KAAA,CAAA8B,aAAA,CAAC3B,SAAS,EAAA4B,QAAA,KAAKN,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eAETxB,KAAA,CAAA8B,aAAA,CAACxB,KAAK;IAACiB,IAAI,EAAEA;EAAK,gBAChBvB,KAAA,CAAA8B,aAAA,CAACvB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BS,KAAK,GAAGC,GAAG,gBACVpB,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAAgC,QAAA,QACGZ,GAAG,eACJpB,KAAA,CAAA8B,aAAA,CAACb,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KAEG,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDD,KAAK,CAACe,WAAW,GAAG,OAAO;AAE3B,eAAef,KAAK","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { enableScrollingStyles, sizeStyles } from '@os-design/styles';
|
|
4
4
|
import { clr } from '@os-design/theming';
|
|
@@ -41,7 +41,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef(({
|
|
|
41
41
|
};
|
|
42
42
|
if (child.type === BreadcrumbItem) {
|
|
43
43
|
element = /*#__PURE__*/React.cloneElement(child, breadcrumbItemProps);
|
|
44
|
-
} else if (
|
|
44
|
+
} else if (/*#__PURE__*/React.isValidElement(child.props.children) && child.props.children.type === BreadcrumbItem) {
|
|
45
45
|
const breadcrumbItem = /*#__PURE__*/React.cloneElement(child.props.children, breadcrumbItemProps);
|
|
46
46
|
element = /*#__PURE__*/React.cloneElement(child, {
|
|
47
47
|
...(child.props || {}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","enableScrollingStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","createElement","_extends","itemScope","itemType","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, ReactElement, useMemo } from 'react';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,qBAAqB,EAAEC,UAAU,QAAkB,mBAAmB;AAC/E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAgBC,OAAO,QAAQ,OAAO;AAChE,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,SAAS,GAAGT,MAAM,CAAC,IAAI,EAAEI,gBAAgB,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","enableScrollingStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","createElement","_extends","itemScope","itemType","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, ReactElement, useMemo } from 'react';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,qBAAqB,EAAEC,UAAU,QAAkB,mBAAmB;AAC/E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAgBC,OAAO,QAAQ,OAAO;AAChE,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,SAAS,GAAGT,MAAM,CAAC,IAAI,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAW;AAClE;AACA;AACA;AACA;AACA;AACA,WAAYM,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,SAAS,CAAC;AACxC;AACA,IAAIX,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAC;AACrC,IAAIC,UAAU;AACd,CAAC;AAED,IAAIW,UAAU,GAAG,CAAC;;AAElB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGR,UAAU,CAC3B,CAAC;EAAE,YAAY,EAAES,SAAS,GAAG,YAAY;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACtE,MAAMC,eAAe,GAAGZ,OAAO,CAAC,MAAM;IACpC,MAAMa,KAAqB,GAAG,EAAE;IAChC,MAAMC,aAAa,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC;IACtDK,aAAa,CAACG,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;MACtC,IAAI,eAACrB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAAC,EAAE;MAElC,IAAIG,OAAO;MACX,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UAAU;QACfkB,QAAQ,EAAEL,KAAK,GAAG,CAAC;QACnBM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAM,GAAG;MAChD,CAAC;MAED,IAAIR,KAAK,CAACS,IAAI,KAAK1B,cAAc,EAAE;QACjCoB,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAACV,KAAK,EAAEI,mBAAmB,CAAC;MAC1D,CAAC,MAAM,IACL,aAAAxB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAAC,IAC1CS,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAACkB,IAAI,KAAK1B,cAAc,EAC5C;QACA,MAAM6B,cAAc,gBAAGhC,KAAK,CAAC8B,YAAY,CACvCV,KAAK,CAACW,KAAK,CAACpB,QAAQ,EACpBa,mBACF,CAAC;QACDD,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAC1BV,KAAK,EACL;UACE,IAAIA,KAAK,CAACW,KAAK,IAAI,CAAC,CAAC,CAAC;UACtBN,GAAG,EAAEjB;QACP,CAAC,EACDwB,cACF,CAAC;MACH;MACA,IAAI,CAACT,OAAO,EAAE;MAEdR,KAAK,CAACkB,IAAI,CAACV,OAAO,CAAC;MACnBf,UAAU,IAAI,CAAC;IACjB,CAAC,CAAC;IACF,OAAOO,KAAK;EACd,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAIG,eAAe,CAACc,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE7C,oBACE5B,KAAA,CAAAkC,aAAA;IAAK,cAAYxB;EAAU,gBACzBV,KAAA,CAAAkC,aAAA,CAAC9B,SAAS,EAAA+B,QAAA;IACRC,SAAS;IACTC,QAAQ,EAAC;EAAmC,GACxCzB,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERC,eACQ,CACR,CAAC;AAEV,CACF,CAAC;AAEDL,UAAU,CAAC6B,WAAW,GAAG,YAAY;AAErC,eAAe7B,UAAU","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { Right } from '@os-design/icons';
|
|
4
4
|
import { ellipsisStyles } from '@os-design/styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","Right","ellipsisStyles","clr","React","forwardRef","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","createElement","_extends","itemProp","itemScope","itemType","underline","content","toString","role","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Right } from '@os-design/icons';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAqB,SAAS;AAoBzC,MAAMC,SAAS,GAAGP,MAAM,CAACQ,
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","Right","ellipsisStyles","clr","React","forwardRef","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","createElement","_extends","itemProp","itemScope","itemType","underline","content","toString","role","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Right } from '@os-design/icons';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAqB,SAAS;AAoBzC,MAAMC,SAAS,GAAGP,MAAM,CAACQ,EAAE;AAC3B;AACA,CAAC;AAED,MAAMC,IAAI,GAAGT,MAAM,CAACU,IAAI;AACxB;AACA,IAAIR,cAAc;AAClB,CAAC;AAED,MAAMS,SAAS,GAAGX,MAAM,CAACC,KAAK,CAAC;AAC/B,WAAYW,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACC,KAAK,CAACC,SAAS,CAAC;AACxC;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,gBAAGV,UAAU,CAC/B,CACE;EACEW,WAAW,GAAG,KAAK;EACnBC,aAAa,GAAG,KAAK;EACrBC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHlB,KAAA,CAAAmB,aAAA,CAAChB,SAAS,qBACRH,KAAA,CAAAmB,aAAA,CAACjB,IAAI,EAAAkB,QAAA;EACHC,QAAQ,EAAC,iBAAiB;EAC1BC,SAAS;EACTC,QAAQ,EAAC,6BAA6B;EACtCR,IAAI,EAAEA;AAAK,GACNH,WAAW,GACZ;EACEY,SAAS,EAAE,QAAQ;EACnB,cAAc,EAAE;AAClB,CAAC,GACD,CAAC,CAAC,EACFP,IAAI;EACRC,GAAG,EAAEA;AAAI,iBAETlB,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,MAAM;EAACN,IAAI,EAAEA;AAAK,CAAE,CAAC,EACnCD,QAAQ,iBAAId,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,UAAU;EAACI,OAAO,EAAEX,QAAQ,CAACY,QAAQ,CAAC;AAAE,CAAE,CAAC,eACvE1B,KAAA,CAAAmB,aAAA,CAACd,IAAI;EAACgB,QAAQ,EAAC;AAAM,GAAEL,QAAe,CAClC,CAAC,EACNH,aAAa,iBAAIb,KAAA,CAAAmB,aAAA,CAACZ,SAAS;EAACoB,IAAI,EAAC;AAAc,CAAE,CACzC,CAEf,CAAC;AAEDhB,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAE7C,eAAejB,cAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, ButtonLink\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,
|
|
1
|
+
{"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, ButtonLink\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAG;AAC5B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA4B;AAC9D,CAAC;AAED,MAAMC,UAAU,GAAGV,MAAM,CAACM,GAAG;AAC7B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA4B;AAC7D,CAAC;AAED,MAAME,OAAO,GAAGX,MAAM,CAACY,IAAI;AAC3B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAqB;AAC3D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGd,MAAM,CAACC,OAAO,CAAC;AACnC;AACA,CAAC;AAED,MAAMc,aAAa,GAAGhB,SAAS;AAC/B;AACA;AACA,CAAC;AAKD,MAAMiB,gBAAgB,GAAGhB,MAAM,CAC7B,KAAK,EACLG,gBAAgB,CAAC,QAAQ,CAC3B,CAAwB;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACC,IAAI,CAAC;AACpC,sBAAuBX,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACE,EAAE,CAAC;AAC7C,eAAeJ,aAAa,IAAKR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAe;AAC9D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACCtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,IAAI,iBAAIlB,KAAA,CAAAuB,aAAA,CAACtB,SAAS,QAAEiB,IAAgB,CAAC,eACtClB,KAAA,CAAAuB,aAAA,CAAChB,OAAO,QAAEe,QAAkB,CAAC,EAC5BH,KAAK,iBAAInB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,QAAEa,KAAkB,CAAC,EACzCC,OAAO,iBACNpB,KAAA,CAAAuB,aAAA,CAACX,gBAAgB;EAACC,MAAM,EAAEQ;AAAc,gBACtCrB,KAAA,CAAAuB,aAAA,CAACb,WAAW,MAAE,CACE,CAEpB,CACH;AAED,eAAeO,aAAa","ignoreList":[]}
|
package/dist/esm/Button/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { m } from '@os-design/media';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n resetButtonStyles,\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';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, ButtonLink\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for ButtonLink\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SACEC,iBAAiB,EACjBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,eAAe,MAAwB,yBAAyB;;AAOvE;;AAmDA,MAAMC,WAAW,GAAIC,CAAC,IACpB,CAACA,CAAC,CAACC,QAAQ,IACXd,
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n resetButtonStyles,\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';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, ButtonLink\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for ButtonLink\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, ButtonLink\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,
|
|
1
|
+
{"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, ButtonLink\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAC,SAASC,MAAM,kBAAkB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAC,SAASC,MAAM,gBAAgB,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAC,SAASC,MAAM,qBAAqB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAC,SAASC,MAAM,gBAAgB,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAC,SAASC,MAAM,mBAAmB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAC,SAASC,MAAM,yBAAyB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAC,SAASC,MAAM,uBAAuB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAC,SAASC,MAAM,uBAAuB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAC,SAASC,MAAM,qBAAqB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { omitEmotionProps } from '@os-design/utils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","DisabledWrapper","disabledStyles","p","disabled","StyledButtonLink","withComponent","ButtonLink","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","link","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/ButtonLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { DisabledWrapper, LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type ButtonLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n ButtonProps;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n `;\n\nconst StyledButtonLink = styled(\n StyledButton.withComponent('a'),\n omitEmotionProps('as', 'disabled')\n)`\n text-decoration: none;\n display: inline-flex;\n ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as a link.\n */\nconst ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n as,\n onMouseDown = () => {},\n onKeyDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n const link = (\n <StyledButtonLink\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n onKeyDown={(e) => {\n onKeyDown(e);\n if (disabled || loading) e.preventDefault();\n }}\n aria-disabled={disabled || loading}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButtonLink>\n );\n\n if (disabled || loading) {\n return <DisabledWrapper>{link}</DisabledWrapper>;\n }\n\n return link;\n }\n);\n\nButtonLink.displayName = 'ButtonLink';\n\nexport default ButtonLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,SAASC,eAAe,QAAyC,SAAS;AAQ1E,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVX,
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","DisabledWrapper","disabledStyles","p","disabled","StyledButtonLink","withComponent","ButtonLink","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","link","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/ButtonLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { DisabledWrapper, LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type ButtonLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n ButtonProps;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n `;\n\nconst StyledButtonLink = styled(\n StyledButton.withComponent('a'),\n omitEmotionProps('as', 'disabled')\n)`\n text-decoration: none;\n display: inline-flex;\n ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as a link.\n */\nconst ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n as,\n onMouseDown = () => {},\n onKeyDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n const link = (\n <StyledButtonLink\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n onKeyDown={(e) => {\n onKeyDown(e);\n if (disabled || loading) e.preventDefault();\n }}\n aria-disabled={disabled || loading}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButtonLink>\n );\n\n if (disabled || loading) {\n return <DisabledWrapper>{link}</DisabledWrapper>;\n }\n\n return link;\n }\n);\n\nButtonLink.displayName = 'ButtonLink';\n\nexport default ButtonLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,SAASC,eAAe,QAAyC,SAAS;AAQ1E,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVX,GAAG;AACL;AACA,GAAG;AAEH,MAAMY,gBAAgB,GAAGX,MAAM,CAC7BI,YAAY,CAACQ,aAAa,CAAC,GAAG,CAAC,EAC/BX,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAC;AACD;AACA;AACA,IAAIO,cAAc;AAClB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGV,UAAU,CAC3B,CACE;EACEW,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGtB,eAAe,CAAC;IACtDQ,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,MAAMmB,IAAI,gBACR3B,KAAA,CAAA4B,aAAA,CAACnB,gBAAgB,EAAAoB,QAAA;IACfC,OAAO,EAAElB,IAAK;IACdmB,MAAM,EAAEN,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGY,CAAC,IAAK;MAClBZ,WAAW,CAACY,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFZ,SAAS,EAAGW,CAAC,IAAK;MAChBX,SAAS,CAACW,CAAC,CAAC;MACZ,IAAIxB,QAAQ,IAAIS,OAAO,EAAEe,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAezB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETxB,KAAA,CAAA4B,aAAA,CAACzB,aAAa;IACZW,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CACnB;EAED,IAAId,QAAQ,IAAIS,OAAO,EAAE;IACvB,oBAAOjB,KAAA,CAAA4B,aAAA,CAACvB,eAAe,QAAEsB,IAAsB,CAAC;EAClD;EAEA,OAAOA,IAAI;AACb,CACF,CAAC;AAEDhB,UAAU,CAACuB,WAAW,GAAG,YAAY;AAErC,eAAevB,UAAU","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { Check } from '@os-design/icons';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","Check","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","createElement","_extends","tabIndex","onClick","e","includes","key","preventDefault","role","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\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 display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","Check","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","createElement","_extends","tabIndex","onClick","e","includes","key","preventDefault","role","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\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 display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { sizeStyles } from '@os-design/styles';
|
|
4
4
|
import { clr } from '@os-design/theming';
|
|
@@ -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","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 margin-bottom: ${(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,
|
|
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 margin-bottom: ${(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,CAAW;AACnE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAsB;AACjD,IAAIT,UAAU;AACd,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAC;AACtC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAY;AACtC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAY;AACvC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAY;AAC1C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAY;AAC3C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAY;AAC9C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAC;AACtE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAG;AACvB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAC;AACxC,CAAC;AAED,MAAMC,YAAY,GAAGlB,MAAM,CAACM,QAAQ,CAAC;AACrC;AACA,gBAAiBE,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAC;AACnD,mBAAoBN,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAC;AACtD,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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { getAccessibilityDateLabel, useDatePickerCalendar } from '@os-design/date-picker-utils';
|
|
4
4
|
import { Left, Right } from '@os-design/icons';
|