npm - @os-design/core - Versions diffs - 1.0.175 → 1.0.177 - Mend

@os-design/core 1.0.175 → 1.0.177

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.

Files changed (13) hide show

package/dist/cjs/Modal/index.js +35 -32
package/dist/cjs/Modal/index.js.map +1 -1
package/dist/cjs/Switch/index.js +34 -24
package/dist/cjs/Switch/index.js.map +1 -1
package/dist/esm/Modal/index.js +11 -8
package/dist/esm/Modal/index.js.map +1 -1
package/dist/esm/Switch/index.js +20 -11
package/dist/esm/Switch/index.js.map +1 -1
package/dist/types/Modal/index.d.ts +1 -1
package/dist/types/Modal/index.d.ts.map +1 -1
package/dist/types/Switch/index.d.ts +1 -1
package/dist/types/Switch/index.d.ts.map +1 -1
package/package.json +2 -2

package/dist/cjs/Modal/index.js CHANGED Viewed

@@ -5,51 +5,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ModalMask = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _utils = require("@os-design/utils");
-var _styles = require("@os-design/styles");
-var _media = require("@os-design/media");
-var _react2 = require("@emotion/react");
 var _icons = require("@os-design/icons");
-var _theming = require("@os-design/theming");
+var _media = require("@os-design/media");
 var _portal = _interopRequireDefault(require("@os-design/portal"));
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 var _excluded = ["title", "okText", "okDanger", "okLoading", "okDisabled", "header", "footer", "visible", "locale", "onClose", "onOk", "size", "id", "onClick", "children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var MODAL_CONTAINER_Z_INDEX = 1000;
 var MODAL_BOX_SHADOW_SIZE_EM = 1;
-var maskFadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
-var maskFadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
+var maskFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
+var maskFadeOut = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
 var maskVisibleStyles = function maskVisibleStyles(p) {
-  return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeIn, p.theme.transitionDelay);
+  return p.visible && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeIn, p.theme.transitionDelay);
 };
 var maskInvisibleStyles = function maskInvisibleStyles(p) {
-  return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeOut, p.theme.transitionDelay);
+  return !p.visible && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeOut, p.theme.transitionDelay);
 };
 var ModalMask = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ", ";\n  z-index: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.modalMaskColorBg);
 }, MODAL_CONTAINER_Z_INDEX, maskVisibleStyles, maskInvisibleStyles);
 exports.ModalMask = ModalMask;
 var Container = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ", ";\n\n  ", " {\n    ", ";\n  }\n"])), MODAL_CONTAINER_Z_INDEX, _media.m.min.xs, (0, _styles.enableScrollingStyles)('y'));
-var contentFadeIn = (0, _react2.keyframes)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeOut = (0, _react2.keyframes)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeInXs = (0, _react2.keyframes)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(-100% - ", "em)); }\n  to { transform: translateY(6em); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeOutXs = (0, _react2.keyframes)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeIn = (0, _react.keyframes)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeOut = (0, _react.keyframes)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeInXs = (0, _react.keyframes)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(-100% - ", "em)); }\n  to { transform: translateY(6em); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeOutXs = (0, _react.keyframes)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
 var contentVisibleStyles = function contentVisibleStyles(p) {
-  return p.visible && (0, _react2.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeIn, p.theme.transitionDelay, _media.m.min.xs, contentFadeInXs, p.theme.transitionDelay);
+  return p.visible && (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeIn, p.theme.transitionDelay, _media.m.min.xs, contentFadeInXs, p.theme.transitionDelay);
 };
 var contentInvisibleStyles = function contentInvisibleStyles(p) {
-  return !p.visible && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeOut, p.theme.transitionDelay, _media.m.min.xs, contentFadeOutXs, p.theme.transitionDelay);
+  return !p.visible && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeOut, p.theme.transitionDelay, _media.m.min.xs, contentFadeOutXs, p.theme.transitionDelay);
 };
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible', 'size'))(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ", "em\n    ", "em 0 0;\n\n  ", " {\n    width: ", "em;\n    max-height: unset;\n    border-radius: ", "em;\n\n    left: 50%;\n    margin-left: ", "em;\n  }\n\n  ", ";\n  ", "\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorBg);
@@ -106,7 +106,7 @@ var Footer = _styled["default"].div(_templateObject17 || (_templateObject17 = _t
 /**
  * The base pop-up window.
  */
-var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     _ref$okText = _ref.okText,
     okText = _ref$okText === void 0 ? 'OK' : _ref$okText,
@@ -131,26 +131,29 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var contentRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react2.useRef)(null);
   var _useTheme = (0, _theming.useTheme)(),
     theme = _useTheme.theme;
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
-  var titleId = (0, _react.useMemo)(function () {
+  var titleId = (0, _react2.useMemo)(function () {
     return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
-  var bodyId = (0, _react.useMemo)(function () {
+  var bodyId = (0, _react2.useMemo)(function () {
     return id || "modal-body-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]);
   if (!mounted) return null;
-  return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(ModalMask, {
+  return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/_react["default"].createElement(Container, {
-    onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
+  }), /*#__PURE__*/_react2["default"].createElement(Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClose();
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
     autoFocus: false
-  }, /*#__PURE__*/_react["default"].createElement(Content, {
+  }, /*#__PURE__*/_react2["default"].createElement(Content, {
     visible: visible,
     size: size,
     onClick: function onClick(e) {
@@ -162,24 +165,24 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-labelledby": header === undefined ? titleId : undefined,
     "aria-describedby": bodyId,
     ref: contentRef
-  }, header === undefined ? /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }, header === undefined ? /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(t) {
       return {
         buttonPaddingHorizontal: t.modalCloseButtonPaddingHorizontal
       };
     }
-  }, /*#__PURE__*/_react["default"].createElement(Header, null, /*#__PURE__*/_react["default"].createElement(Title, {
+  }, /*#__PURE__*/_react2["default"].createElement(Header, null, /*#__PURE__*/_react2["default"].createElement(Title, {
     id: titleId
-  }, title), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, title), /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
     type: "ghost",
     wide: "never",
     onClick: onClose,
     "aria-label": locale.closeLabel
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Close, null)))) : header, /*#__PURE__*/_react["default"].createElement(Body, _extends({
+  }, /*#__PURE__*/_react2["default"].createElement(_icons.Close, null)))) : header, /*#__PURE__*/_react2["default"].createElement(Body, _extends({
     id: bodyId
   }, rest, {
     ref: ref
-  }), children), footer === undefined ? /*#__PURE__*/_react["default"].createElement(Footer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), children), footer === undefined ? /*#__PURE__*/_react2["default"].createElement(Footer, null, /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
     danger: okDanger,
     loading: okLoading,
     disabled: okDisabled,

package/dist/cjs/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n useBodyScroll,\n useKeyPress,\n useClosable,\n omitEmotionProps,\n} from '@os-design/utils';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n /*\n The title of the modal.\n * @default undefined\n /\n title?: string;\n /\n The text of the OK button.\n * @default OK\n /\n okText?: string;\n /\n Sets the danger styles to the OK button.\n * @default false\n /\n okDanger?: boolean;\n /\n Whether the OK button is loading.\n * @default false\n /\n okLoading?: boolean;\n /\n Whether the OK button is disabled.\n * @default false\n /\n okDisabled?: boolean;\n /\n The header component.\n * Set as null if you don't need the default header.\n * @default undefined\n /\n header?: React.ReactNode;\n /\n The footer component.\n * Set as null if you don't need the default footer.\n * @default undefined\n /\n footer?: React.ReactNode;\n /\n Whether the modal is visible.\n * @default false\n /\n visible?: boolean;\n /\n The locale of the modal.\n * @default undefined\n /\n locale?: ModalLocale;\n /\n Specifies a callback that will be called when a user clicks the mask or\n * the close button. The callback should set the visible state to false.\n * @default undefined\n /\n onClose?: () => void;\n /\n Specifies a callback that will be called when a user clicks the OK button.\n * @default undefined\n /\n onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst maskInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n ${maskVisibleStyles};\n ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n ${m.min.xs} {\n ${enableScrollingStyles('y')};\n }\n`;\n\nconst contentFadeIn = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n from { transform: translateY(6em); }\n to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\nconst contentInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\ntype ContentProps = Pick<ModalProps, 'visible' \| 'size'>;\nconst Content = styled(\n 'div',\n omitEmotionProps('visible', 'size')\n)<ContentProps>`\n position: absolute;\n display: flex;\n flex-direction: column;\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n width: 100%;\n max-height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em\n ${(p) => p.theme.borderRadius}em 0 0;\n\n ${m.min.xs} {\n width: ${(p) => p.theme.modalWidth}em;\n max-height: unset;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n left: 50%;\n margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n }\n\n ${contentVisibleStyles};\n ${contentInvisibleStyles}\n ${sizeStyles};\n`;\n\nconst Header = styled.div`\n flex-shrink: 0;\n height: ${(p) => p.theme.modalHeaderHeight}em;\n border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n\n ${m.min.xs} {\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n }\n`;\n\nconst Title = styled.div`\n flex: 1;\n font-size: ${(p) => p.theme.sizes.large}em;\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n flex-grow: 1;\n\n padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n ${m.min.xs} {\n padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n }\n\n ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n ${m.min.xs} {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n }\n`;\n\n/*\n The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n title,\n okText = 'OK',\n okDanger = false,\n okLoading = false,\n okDisabled = false,\n header,\n footer,\n visible = false,\n locale = defaultLocale,\n onClose = () => {},\n onOk,\n size,\n id,\n onClick = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n useBodyScroll(!visible);\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n onClose\n );\n\n const titleId = useMemo(\n () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n const bodyId = useMemo(\n () => id \|\| `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n [id]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <ModalMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus={false}>\n <Content\n visible={visible}\n size={size}\n onClick={(e) => {\n e.stopPropagation();\n onClick(e);\n }}\n role='dialog'\n aria-modal\n aria-labelledby={header === undefined ? titleId : undefined}\n aria-describedby={bodyId}\n ref={contentRef}\n >\n {header === undefined ? (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal:\n t.modalCloseButtonPaddingHorizontal,\n })}\n >\n <Header>\n <Title id={titleId}>{title}</Title>\n <Button\n type='ghost'\n wide='never'\n onClick={onClose}\n aria-label={locale.closeLabel}\n >\n <Close />\n </Button>\n </Header>\n </ThemeOverrider>\n ) : (\n header\n )}\n\n <Body id={bodyId} {...rest} ref={ref}>\n {children}\n </Body>\n\n {footer === undefined ? (\n <Footer>\n <Button\n danger={okDanger}\n loading={okLoading}\n disabled={okDisabled}\n onClick={onOk}\n >\n {okText}\n </Button>\n </Footer>\n ) : (\n footer\n )}\n </Content>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBodyScroll,\n useClosable,\n useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n /*\n The title of the modal.\n * @default undefined\n /\n title?: string;\n /\n The text of the OK button.\n * @default OK\n /\n okText?: string;\n /\n Sets the danger styles to the OK button.\n * @default false\n /\n okDanger?: boolean;\n /\n Whether the OK button is loading.\n * @default false\n /\n okLoading?: boolean;\n /\n Whether the OK button is disabled.\n * @default false\n /\n okDisabled?: boolean;\n /\n The header component.\n * Set as null if you don't need the default header.\n * @default undefined\n /\n header?: React.ReactNode;\n /\n The footer component.\n * Set as null if you don't need the default footer.\n * @default undefined\n /\n footer?: React.ReactNode;\n /\n Whether the modal is visible.\n * @default false\n /\n visible?: boolean;\n /\n The locale of the modal.\n * @default undefined\n /\n locale?: ModalLocale;\n /\n Specifies a callback that will be called when a user clicks the mask or\n * the close button. The callback should set the visible state to false.\n * @default undefined\n /\n onClose?: () => void;\n /\n Specifies a callback that will be called when a user clicks the OK button.\n * @default undefined\n /\n onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst maskInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n ${maskVisibleStyles};\n ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n ${m.min.xs} {\n ${enableScrollingStyles('y')};\n }\n`;\n\nconst contentFadeIn = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n from { transform: translateY(6em); }\n to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\nconst contentInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\ntype ContentProps = Pick<ModalProps, 'visible' \| 'size'>;\nconst Content = styled(\n 'div',\n omitEmotionProps('visible', 'size')\n)<ContentProps>`\n position: absolute;\n display: flex;\n flex-direction: column;\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n width: 100%;\n max-height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em\n ${(p) => p.theme.borderRadius}em 0 0;\n\n ${m.min.xs} {\n width: ${(p) => p.theme.modalWidth}em;\n max-height: unset;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n left: 50%;\n margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n }\n\n ${contentVisibleStyles};\n ${contentInvisibleStyles}\n ${sizeStyles};\n`;\n\nconst Header = styled.div`\n flex-shrink: 0;\n height: ${(p) => p.theme.modalHeaderHeight}em;\n border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n\n ${m.min.xs} {\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n }\n`;\n\nconst Title = styled.div`\n flex: 1;\n font-size: ${(p) => p.theme.sizes.large}em;\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n flex-grow: 1;\n\n padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n ${m.min.xs} {\n padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n }\n\n ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n ${m.min.xs} {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n }\n`;\n\n/*\n The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n title,\n okText = 'OK',\n okDanger = false,\n okLoading = false,\n okDisabled = false,\n header,\n footer,\n visible = false,\n locale = defaultLocale,\n onClose = () => {},\n onOk,\n size,\n id,\n onClick = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n useBodyScroll(!visible);\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n onClose\n );\n\n const titleId = useMemo(\n () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n const bodyId = useMemo(\n () => id \|\| `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n [id]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <ModalMask visible={visible} />\n <Container\n onClick={(e) => {\n e.stopPropagation();\n onClose();\n }}\n >\n <FocusLock autoFocus={false}>\n <Content\n visible={visible}\n size={size}\n onClick={(e) => {\n e.stopPropagation();\n onClick(e);\n }}\n role='dialog'\n aria-modal\n aria-labelledby={header === undefined ? titleId : undefined}\n aria-describedby={bodyId}\n ref={contentRef}\n >\n {header === undefined ? (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal:\n t.modalCloseButtonPaddingHorizontal,\n })}\n >\n <Header>\n <Title id={titleId}>{title}</Title>\n <Button\n type='ghost'\n wide='never'\n onClick={onClose}\n aria-label={locale.closeLabel}\n >\n <Close />\n </Button>\n </Header>\n </ThemeOverrider>\n ) : (\n header\n )}\n\n <Body id={bodyId} {...rest} ref={ref}>\n {children}\n </Body>\n\n {footer === undefined ? (\n <Footer>\n <Button\n danger={okDanger}\n loading={okLoading}\n disabled={okDisabled}\n onClick={onOk}\n >\n {okText}\n </Button>\n </Footer>\n ) : (\n footer\n )}\n </Content>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/cjs/Switch/index.js CHANGED Viewed

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react2 = require("@emotion/react");
 var _styles = require("@os-design/styles");
-var _utils = require("@os-design/utils");
 var _theming = require("@os-design/theming");
-var _excluded = ["disabled", "value", "defaultValue", "onChange", "size", "onMouseDown"];
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
+var _excluded = ["disabled", "value", "defaultValue", "onChange", "size", "onMouseDown", "onKeyDown"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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."); }
@@ -28,28 +28,28 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var FRACTION_DIGITS = 4;
 var uncheckedStyles = function uncheckedStyles(p) {
-  return !p.checked && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    &::after {\n      left: ", "em;\n    }\n  "])), (0, _theming.clr)(p.theme.switchUncheckedColorBg), +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS));
+  return !p.checked && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    &::after {\n      left: ", "em;\n    }\n  "])), (0, _theming.clr)(p.theme.switchUncheckedColorBg), +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS));
 };
 var checkedStyles = function checkedStyles(p) {
-  return p.checked && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    &::after {\n      left: ", "em;\n    }\n  "])), (0, _theming.clr)(p.theme.switchCheckedColorBg), +(p.theme.switchWidth - p.theme.switchCircleSize - (p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS));
+  return p.checked && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    &::after {\n      left: ", "em;\n    }\n  "])), (0, _theming.clr)(p.theme.switchCheckedColorBg), +(p.theme.switchWidth - p.theme.switchCircleSize - (p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS));
 };
 var hoverUncheckedStyles = function hoverUncheckedStyles(p) {
-  return !p.checked && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchUncheckedColorBgHover));
+  return !p.checked && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchUncheckedColorBgHover));
 };
 var hoverCheckedStyles = function hoverCheckedStyles(p) {
-  return p.checked && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchCheckedColorBgHover));
+  return p.checked && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchCheckedColorBgHover));
 };
 var hoverStyles = function hoverStyles(p) {
-  return !p.disabled && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        ", ";\n        ", ";\n      }\n    }\n  "])), hoverUncheckedStyles(p), hoverCheckedStyles(p));
+  return !p.disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        ", ";\n        ", ";\n      }\n    }\n  "])), hoverUncheckedStyles(p), hoverCheckedStyles(p));
 };
 var disabledUncheckedStyles = function disabledUncheckedStyles(p) {
-  return !p.checked && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchDisabledUncheckedColorBg));
+  return !p.checked && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchDisabledUncheckedColorBg));
 };
 var disabledCheckedStyles = function disabledCheckedStyles(p) {
-  return p.checked && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchDisabledCheckedColorBg));
+  return p.checked && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.switchDisabledCheckedColorBg));
 };
 var disabledStyles = function disabledStyles(p) {
-  return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    ", ";\n    ", ";\n  "])), disabledUncheckedStyles(p), disabledCheckedStyles(p));
+  return p.disabled && (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    ", ";\n    ", ";\n  "])), disabledUncheckedStyles(p), disabledCheckedStyles(p));
 };
 var StyledSwitch = (0, _styled["default"])('button', (0, _utils.omitEmotionProps)('size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n\n  width: ", "em;\n  height: ", "em;\n  border-radius: ", "em;\n\n  &::after {\n    position: absolute;\n    top: ", "em;\n\n    width: ", "em;\n    height: ", "em;\n    border-radius: 50%;\n\n    background-color: ", ";\n    content: ' ';\n\n    ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n"])), _styles.resetButtonStyles, function (p) {
   return p.theme.switchWidth;
@@ -70,7 +70,7 @@ var StyledSwitch = (0, _styled["default"])('button', (0, _utils.omitEmotionProps
 /**
  * The switch that can be enabled or disabled.
  */
-var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Switch = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     value = _ref.value,
@@ -79,7 +79,9 @@ var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     size = _ref.size,
     _ref$onMouseDown = _ref.onMouseDown,
-    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedState = (0, _utils.useForwardedState)({
       value: value,
@@ -89,18 +91,26 @@ var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
     forwardedValue = _useForwardedState2[0],
     setForwardedValue = _useForwardedState2[1];
-  return /*#__PURE__*/_react["default"].createElement(StyledSwitch, _extends({
+  var clickHandler = (0, _react2.useCallback)(function () {
+    if (disabled) return;
+    setForwardedValue(!forwardedValue);
+  }, [disabled, forwardedValue, setForwardedValue]);
+  var mouseDownHandler = (0, _react2.useCallback)(function (e) {
+    onMouseDown(e);
+    e.preventDefault();
+  }, [onMouseDown]);
+  var keyDownHandler = (0, _react2.useCallback)(function (e) {
+    if (e.key === ' ') setForwardedValue(!forwardedValue);
+    onKeyDown(e);
+    e.preventDefault();
+  }, [forwardedValue, onKeyDown, setForwardedValue]);
+  return /*#__PURE__*/_react2["default"].createElement(StyledSwitch, _extends({
     disabled: disabled,
     checked: forwardedValue,
     size: size,
-    onClick: function onClick() {
-      if (disabled) return;
-      setForwardedValue(!forwardedValue);
-    },
-    onMouseDown: function onMouseDown(e) {
-      _onMouseDown(e);
-      e.preventDefault();
-    },
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    onKeyDown: keyDownHandler,
     role: "switch",
     "aria-checked": forwardedValue
   }, rest, {

package/dist/cjs/Switch/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["FRACTION_DIGITS","uncheckedStyles","p","checked","css","clr","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","styled","omitEmotionProps","resetButtonStyles","switchColorCircleBg","transitionStyles","sizeStyles","Switch","forwardRef","ref","value","defaultValue","onChange","size","onMouseDown","rest","useForwardedState","forwardedValue","setForwardedValue","e","preventDefault","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import ~~React,~~ { ~~forwardRef~~ } from 'react';\nimport styled from '@emotion/styled';\nimport { ~~css } from '@emotion/react';\nimport {~~\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { ~~omitEmotionProps,~~ ~~useForwardedState~~ } from '@os-design/~~utils~~';\nimport { ~~clr~~ } from '@os-design/~~theming~~';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'value' \| 'defaultValue' \| 'onChange' \| 'onClick' \| 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n /*\n Whether the switch is disabled.\n * @default false\n /\n disabled?: boolean;\n /\n Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBg)};\n &::after {\n left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n }\n `;\n\nconst checkedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBg)};\n &::after {\n left: ${+(\n p.theme.switchWidth -\n p.theme.switchCircleSize -\n (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n ).toFixed(FRACTION_DIGITS)}em;\n }\n `;\n\nconst hoverUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n ${hoverUncheckedStyles(p)};\n ${hoverCheckedStyles(p)};\n }\n }\n `;\n\nconst disabledUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n `;\n\nconst disabledCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n ${disabledUncheckedStyles(p)};\n ${disabledCheckedStyles(p)};\n `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' \| 'size'> {\n checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n 'button',\n omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n ${resetButtonStyles};\n position: relative;\n cursor: pointer;\n user-select: none;\n display: block;\n\n width: ${(p) => p.theme.switchWidth}em;\n height: ${(p) => p.theme.switchHeight}em;\n border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n &::after {\n position: absolute;\n top: ${(p) =>\n +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n\n width: ${(p) => p.theme.switchCircleSize}em;\n height: ${(p) => p.theme.switchCircleSize}em;\n border-radius: 50%;\n\n background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n content: ' ';\n\n ${transitionStyles('left')};\n }\n\n ${uncheckedStyles};\n ${checkedStyles};\n ${hoverStyles};\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color')};\n`;\n\n/\n The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n ~~return~~ (\n ~~<StyledSwitch\n~~ disabled~~={disabled}\~~n ~~checked={~~forwardedValue}\n ~~size~~=~~{size}~~\n ~~onClick={~~() => {\n if (~~disabled~~) ~~return~~;\n ~~setForwardedValue~~(~~!forwardedValue~~);\n }}\n ~~onMouseDown~~={(e) => {\n ~~onMouseDown~~(e);\n e.preventDefault();\n }}\n role='switch'\n aria-checked={forwardedValue}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;~~AACA;~~AAMA;AACA;~~AAAyC~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA6BzC~~,IAAMA,eAAe,GAAG,CAAC;AAEzB,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAC;EAAA,OACxB,CAACA,CAAC,CAACC,OAAO,QACVC,~~WAAG~~,oJACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,sBAAsB,CAAC,EAE7C,CAAC,CAAC,CAACL,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CACtEV,eAAe,CAChB,CAEJ;AAAA;AAEH,IAAMW,aAAa,GAAG,SAAhBA,aAAa,CAAIT,CAAC;EAAA,OACtBA,CAAC,CAACC,OAAO,QACTC,~~WAAG~~,sJACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACM,oBAAoB,CAAC,EAE3C,CAAC,CACPV,CAAC,CAACI,KAAK,CAACO,WAAW,GACnBX,CAAC,CAACI,KAAK,CAACG,gBAAgB,GACxB,CAACP,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EACrDC,OAAO,CAACV,eAAe,CAAC,CAE7B;AAAA;AAEH,IAAMc,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIZ,CAAC;EAAA,OAC7B,CAACA,CAAC,CAACC,OAAO,QACVC,~~WAAG~~,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACS,2BAA2B,CAAC,CAC7D;AAAA;AAEH,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAId,CAAC;EAAA,OAC3BA,CAAC,CAACC,OAAO,QACTC,~~WAAG~~,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACW,yBAAyB,CAAC,CAC3D;AAAA;AAEH,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIhB,CAAC;EAAA,OACpB,CAACA,CAAC,CAACiB,QAAQ,QACXf,~~WAAG~~,yLAIKU,oBAAoB,CAACZ,CAAC,CAAC,EACvBc,kBAAkB,CAACd,CAAC,CAAC,CAG5B;AAAA;AAEH,IAAMkB,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIlB,CAAC;EAAA,OAChC,CAACA,CAAC,CAACC,OAAO,QACVC,~~WAAG~~,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACe,8BAA8B,CAAC,CAChE;AAAA;AAEH,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIpB,CAAC;EAAA,OAC9BA,CAAC,CAACC,OAAO,QACTC,~~WAAG~~,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACiB,4BAA4B,CAAC,CAC9D;AAAA;AAEH,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAItB,CAAC;EAAA,OACvBA,CAAC,CAACiB,QAAQ,QACVf,~~WAAG~~,6HAECgB,uBAAuB,CAAClB,CAAC,CAAC,EAC1BoB,qBAAqB,CAACpB,CAAC,CAAC,CAC3B;AAAA;AAKH,IAAMuB,YAAY,GAAG,IAAAC,kBAAM,EACzB,QAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,EAAE,SAAS,CAAC,CACpC,qeACGC,yBAAiB,EAMV,UAAC1B,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,WAAW;AAAA,GACzB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACE,YAAY;AAAA,GACpB,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACE,YAAY,GAAG,CAAC;AAAA,GAIvC,UAACN,CAAC;EAAA,OACP,CAAC,CAAC,CAACA,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CAC9DV,eAAe,CAChB;AAAA,GAEM,UAACE,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACG,gBAAgB;AAAA,GAC9B,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACG,gBAAgB;AAAA,GAGrB,UAACP,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACuB,mBAAmB,CAAC;AAAA,GAGzD,IAAAC,wBAAgB,EAAC,MAAM,CAAC,EAG1B7B,eAAe,EACfU,aAAa,EACbO,WAAW,EACXM,cAAc,EAEdO,kBAAU,EACV,IAAAD,wBAAgB,EAAC,kBAAkB,CAAC,CACvC;;AAED;AACA;AACA;AACA,IAAME,MAAM,gBAAG,IAAAC,~~iBAAU~~,EACvB,~~gBAUEC~~,GAAG,EACA;EAAA,~~yBATDf~~,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBgB,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,IAAI,QAAJA,IAAI;IAAA,wBACJC,WAAW;IAAXA,~~YAAW~~,iCAAG,YAAM,CAAC,CAAC;~~IACnBC~~,IAAI;EAIT,yBAA4C,IAAAC,wBAAiB,EAAC;~~MAC5DN~~,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;~~IAJKK~~,cAAc;IAAEC,iBAAiB;EAMxC,~~oBACE~~,~~gCAAC~~,~~YAAY~~;~~IACX~~,QAAQ,~~EAAExB~~,~~QAAS~~;~~IACnB~~,~~OAAO~~,~~EAAEuB~~,~~cAAe~~;~~IACxB~~,~~IAAI~~,~~EAAEJ~~,~~IAAK~~;~~IACX~~,~~OAAO~~,~~EAAE~~,~~mBAAM~~;~~MACb~~,~~IAAInB~~,~~QAAQ~~,EAAE;~~MACdwB~~,~~iBAAiB~~,CAAC,~~CAACD~~,cAAc,CAAC~~;IACpC~~,~~CAAE~~;~~IACF~~,~~WAAW~~,~~EAAE~~,~~qBAACE~~,CAAC,~~EAAK~~;~~MAClBL~~,~~YAAW~~,~~CAACK~~,CAAC,CAAC;~~MACdA~~,CAAC,CAACC,cAAc,EAAE;~~IACpB~~,~~CAAE~~;~~IACF~~,IAAI,EAAC,QAAQ;IACb,~~gBAAcH~~;EAAe,GACzBF,IAAI;IACR,GAAG,~~EAAEN~~;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,MAAM,~~CAACc~~,WAAW,GAAG,QAAQ;AAAC,~~eAEfd~~,MAAM;AAAA"}
1	+ {"version":3,"file":"index.js","names":["FRACTION_DIGITS","uncheckedStyles","p","checked","css","clr","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","styled","omitEmotionProps","resetButtonStyles","switchColorCircleBg","transitionStyles","sizeStyles","Switch","forwardRef","ref","value","defaultValue","onChange","size","onMouseDown","onKeyDown","rest","useForwardedState","forwardedValue","setForwardedValue","clickHandler","useCallback","mouseDownHandler","e","preventDefault","keyDownHandler","key","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\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, useCallback } from 'react';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'value' \| 'defaultValue' \| 'onChange' \| 'onClick' \| 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n /*\n Whether the switch is disabled.\n * @default false\n /\n disabled?: boolean;\n /\n Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBg)};\n &::after {\n left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n }\n `;\n\nconst checkedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBg)};\n &::after {\n left: ${+(\n p.theme.switchWidth -\n p.theme.switchCircleSize -\n (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n ).toFixed(FRACTION_DIGITS)}em;\n }\n `;\n\nconst hoverUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n ${hoverUncheckedStyles(p)};\n ${hoverCheckedStyles(p)};\n }\n }\n `;\n\nconst disabledUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n `;\n\nconst disabledCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n ${disabledUncheckedStyles(p)};\n ${disabledCheckedStyles(p)};\n `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' \| 'size'> {\n checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n 'button',\n omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n ${resetButtonStyles};\n position: relative;\n cursor: pointer;\n user-select: none;\n display: block;\n\n width: ${(p) => p.theme.switchWidth}em;\n height: ${(p) => p.theme.switchHeight}em;\n border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n &::after {\n position: absolute;\n top: ${(p) =>\n +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n\n width: ${(p) => p.theme.switchCircleSize}em;\n height: ${(p) => p.theme.switchCircleSize}em;\n border-radius: 50%;\n\n background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n content: ' ';\n\n ${transitionStyles('left')};\n }\n\n ${uncheckedStyles};\n ${checkedStyles};\n ${hoverStyles};\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color')};\n`;\n\n/\n The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onMouseDown = () => {},\n onKeyDown = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const clickHandler = useCallback(() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }, [disabled, forwardedValue, setForwardedValue]);\n\n const mouseDownHandler = useCallback(\n (e) => {\n onMouseDown(e);\n e.preventDefault();\n },\n [onMouseDown]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === ' ') setForwardedValue(!forwardedValue);\n onKeyDown(e);\n e.preventDefault();\n },\n [forwardedValue, onKeyDown, setForwardedValue]\n );\n\n return (\n <StyledSwitch\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n onClick={clickHandler}\n onMouseDown={mouseDownHandler}\n onKeyDown={keyDownHandler}\n role='switch'\n aria-checked={forwardedValue}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAMA;AACA;AACA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BvD,IAAMA,eAAe,GAAG,CAAC;AAEzB,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAC;EAAA,OACxB,CAACA,CAAC,CAACC,OAAO,QACVC,UAAG,oJACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,sBAAsB,CAAC,EAE7C,CAAC,CAAC,CAACL,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CACtEV,eAAe,CAChB,CAEJ;AAAA;AAEH,IAAMW,aAAa,GAAG,SAAhBA,aAAa,CAAIT,CAAC;EAAA,OACtBA,CAAC,CAACC,OAAO,QACTC,UAAG,sJACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACM,oBAAoB,CAAC,EAE3C,CAAC,CACPV,CAAC,CAACI,KAAK,CAACO,WAAW,GACnBX,CAAC,CAACI,KAAK,CAACG,gBAAgB,GACxB,CAACP,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EACrDC,OAAO,CAACV,eAAe,CAAC,CAE7B;AAAA;AAEH,IAAMc,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIZ,CAAC;EAAA,OAC7B,CAACA,CAAC,CAACC,OAAO,QACVC,UAAG,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACS,2BAA2B,CAAC,CAC7D;AAAA;AAEH,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAId,CAAC;EAAA,OAC3BA,CAAC,CAACC,OAAO,QACTC,UAAG,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACW,yBAAyB,CAAC,CAC3D;AAAA;AAEH,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIhB,CAAC;EAAA,OACpB,CAACA,CAAC,CAACiB,QAAQ,QACXf,UAAG,yLAIKU,oBAAoB,CAACZ,CAAC,CAAC,EACvBc,kBAAkB,CAACd,CAAC,CAAC,CAG5B;AAAA;AAEH,IAAMkB,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIlB,CAAC;EAAA,OAChC,CAACA,CAAC,CAACC,OAAO,QACVC,UAAG,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACe,8BAA8B,CAAC,CAChE;AAAA;AAEH,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIpB,CAAC;EAAA,OAC9BA,CAAC,CAACC,OAAO,QACTC,UAAG,0GACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACiB,4BAA4B,CAAC,CAC9D;AAAA;AAEH,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAItB,CAAC;EAAA,OACvBA,CAAC,CAACiB,QAAQ,QACVf,UAAG,6HAECgB,uBAAuB,CAAClB,CAAC,CAAC,EAC1BoB,qBAAqB,CAACpB,CAAC,CAAC,CAC3B;AAAA;AAKH,IAAMuB,YAAY,GAAG,IAAAC,kBAAM,EACzB,QAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,EAAE,SAAS,CAAC,CACpC,qeACGC,yBAAiB,EAMV,UAAC1B,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,WAAW;AAAA,GACzB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACE,YAAY;AAAA,GACpB,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACE,YAAY,GAAG,CAAC;AAAA,GAIvC,UAACN,CAAC;EAAA,OACP,CAAC,CAAC,CAACA,CAAC,CAACI,KAAK,CAACE,YAAY,GAAGN,CAAC,CAACI,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CAC9DV,eAAe,CAChB;AAAA,GAEM,UAACE,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACG,gBAAgB;AAAA,GAC9B,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACG,gBAAgB;AAAA,GAGrB,UAACP,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACuB,mBAAmB,CAAC;AAAA,GAGzD,IAAAC,wBAAgB,EAAC,MAAM,CAAC,EAG1B7B,eAAe,EACfU,aAAa,EACbO,WAAW,EACXM,cAAc,EAEdO,kBAAU,EACV,IAAAD,wBAAgB,EAAC,kBAAkB,CAAC,CACvC;;AAED;AACA;AACA;AACA,IAAME,MAAM,gBAAG,IAAAC,kBAAU,EACvB,gBAWEC,GAAG,EACA;EAAA,yBAVDf,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBgB,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,IAAI,QAAJA,IAAI;IAAA,wBACJC,WAAW;IAAXA,WAAW,iCAAG,YAAM,CAAC,CAAC;IAAA,sBACtBC,SAAS;IAATA,SAAS,+BAAG,YAAM,CAAC,CAAC;IACjBC,IAAI;EAIT,yBAA4C,IAAAC,wBAAiB,EAAC;MAC5DP,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKM,cAAc;IAAEC,iBAAiB;EAMxC,IAAMC,YAAY,GAAG,IAAAC,mBAAW,EAAC,YAAM;IACrC,IAAI3B,QAAQ,EAAE;IACdyB,iBAAiB,CAAC,CAACD,cAAc,CAAC;EACpC,CAAC,EAAE,CAACxB,QAAQ,EAAEwB,cAAc,EAAEC,iBAAiB,CAAC,CAAC;EAEjD,IAAMG,gBAAgB,GAAG,IAAAD,mBAAW,EAClC,UAACE,CAAC,EAAK;IACLT,WAAW,CAACS,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EACD,CAACV,WAAW,CAAC,CACd;EAED,IAAMW,cAAc,GAAG,IAAAJ,mBAAW,EAChC,UAACE,CAAC,EAAK;IACL,IAAIA,CAAC,CAACG,GAAG,KAAK,GAAG,EAAEP,iBAAiB,CAAC,CAACD,cAAc,CAAC;IACrDH,SAAS,CAACQ,CAAC,CAAC;IACZA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EACD,CAACN,cAAc,EAAEH,SAAS,EAAEI,iBAAiB,CAAC,CAC/C;EAED,oBACE,iCAAC,YAAY;IACX,QAAQ,EAAEzB,QAAS;IACnB,OAAO,EAAEwB,cAAe;IACxB,IAAI,EAAEL,IAAK;IACX,OAAO,EAAEO,YAAa;IACtB,WAAW,EAAEE,gBAAiB;IAC9B,SAAS,EAAEG,cAAe;IAC1B,IAAI,EAAC,QAAQ;IACb,gBAAcP;EAAe,GACzBF,IAAI;IACR,GAAG,EAAEP;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,MAAM,CAACoB,WAAW,GAAG,QAAQ;AAAC,eAEfpB,MAAM;AAAA"}

package/dist/esm/Modal/index.js CHANGED Viewed

@@ -1,14 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useMemo, useRef } from 'react';
-import FocusLock from 'react-focus-lock';
-import styled from '@emotion/styled';
-import { useBodyScroll, useKeyPress, useClosable, omitEmotionProps } from '@os-design/utils';
-import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
-import { m } from '@os-design/media';
 import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Close } from '@os-design/icons';
-import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
+import { m } from '@os-design/media';
 import Portal from '@os-design/portal';
+import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
+import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBodyScroll, useClosable, useKeyPress } from '@os-design/utils';
+import React, { forwardRef, useMemo, useRef } from 'react';
+import FocusLock from 'react-focus-lock';
 import Button from '../Button';
 import defaultLocale from './utils/defaultLocale';
 const MODAL_CONTAINER_Z_INDEX = 1000;
@@ -191,7 +191,10 @@ const Modal = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
-    onClick: onClose
+    onClick: e => {
+      e.stopPropagation();
+      onClose();
+    }
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: false
   }, /*#__PURE__*/React.createElement(Content, {

package/dist/esm/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n useBodyScroll,\n useKeyPress,\n useClosable,\n omitEmotionProps,\n} from '@os-design/utils';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n /*\n The title of the modal.\n * @default undefined\n /\n title?: string;\n /\n The text of the OK button.\n * @default OK\n /\n okText?: string;\n /\n Sets the danger styles to the OK button.\n * @default false\n /\n okDanger?: boolean;\n /\n Whether the OK button is loading.\n * @default false\n /\n okLoading?: boolean;\n /\n Whether the OK button is disabled.\n * @default false\n /\n okDisabled?: boolean;\n /\n The header component.\n * Set as null if you don't need the default header.\n * @default undefined\n /\n header?: React.ReactNode;\n /\n The footer component.\n * Set as null if you don't need the default footer.\n * @default undefined\n /\n footer?: React.ReactNode;\n /\n Whether the modal is visible.\n * @default false\n /\n visible?: boolean;\n /\n The locale of the modal.\n * @default undefined\n /\n locale?: ModalLocale;\n /\n Specifies a callback that will be called when a user clicks the mask or\n * the close button. The callback should set the visible state to false.\n * @default undefined\n /\n onClose?: () => void;\n /\n Specifies a callback that will be called when a user clicks the OK button.\n * @default undefined\n /\n onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst maskInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n ${maskVisibleStyles};\n ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n ${m.min.xs} {\n ${enableScrollingStyles('y')};\n }\n`;\n\nconst contentFadeIn = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n from { transform: translateY(6em); }\n to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\nconst contentInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\ntype ContentProps = Pick<ModalProps, 'visible' \| 'size'>;\nconst Content = styled(\n 'div',\n omitEmotionProps('visible', 'size')\n)<ContentProps>`\n position: absolute;\n display: flex;\n flex-direction: column;\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n width: 100%;\n max-height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em\n ${(p) => p.theme.borderRadius}em 0 0;\n\n ${m.min.xs} {\n width: ${(p) => p.theme.modalWidth}em;\n max-height: unset;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n left: 50%;\n margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n }\n\n ${contentVisibleStyles};\n ${contentInvisibleStyles}\n ${sizeStyles};\n`;\n\nconst Header = styled.div`\n flex-shrink: 0;\n height: ${(p) => p.theme.modalHeaderHeight}em;\n border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n\n ${m.min.xs} {\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n }\n`;\n\nconst Title = styled.div`\n flex: 1;\n font-size: ${(p) => p.theme.sizes.large}em;\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n flex-grow: 1;\n\n padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n ${m.min.xs} {\n padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n }\n\n ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n ${m.min.xs} {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n }\n`;\n\n/*\n The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n title,\n okText = 'OK',\n okDanger = false,\n okLoading = false,\n okDisabled = false,\n header,\n footer,\n visible = false,\n locale = defaultLocale,\n onClose = () => {},\n onOk,\n size,\n id,\n onClick = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n useBodyScroll(!visible);\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n onClose\n );\n\n const titleId = useMemo(\n () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n const bodyId = useMemo(\n () => id \|\| `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n [id]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <ModalMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus={false}>\n <Content\n visible={visible}\n size={size}\n onClick={(e) => {\n e.stopPropagation();\n onClick(e);\n }}\n role='dialog'\n aria-modal\n aria-labelledby={header === undefined ? titleId : undefined}\n aria-describedby={bodyId}\n ref={contentRef}\n >\n {header === undefined ? (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal:\n t.modalCloseButtonPaddingHorizontal,\n })}\n >\n <Header>\n <Title id={titleId}>{title}</Title>\n <Button\n type='ghost'\n wide='never'\n onClick={onClose}\n aria-label={locale.closeLabel}\n >\n <Close />\n </Button>\n </Header>\n </ThemeOverrider>\n ) : (\n header\n )}\n\n <Body id={bodyId} {...rest} ref={ref}>\n {children}\n </Body>\n\n {footer === undefined ? (\n <Footer>\n <Button\n danger={okDanger}\n loading={okLoading}\n disabled={okDisabled}\n onClick={onOk}\n >\n {okText}\n </Button>\n </Footer>\n ) : (\n footer\n )}\n </Content>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","clr","ThemeOverrider","useTheme","omitEmotionProps","useBodyScroll","useClosable","useKeyPress","React","forwardRef","useMemo","useRef","FocusLock","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBodyScroll,\n useClosable,\n useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n /*\n The title of the modal.\n * @default undefined\n /\n title?: string;\n /\n The text of the OK button.\n * @default OK\n /\n okText?: string;\n /\n Sets the danger styles to the OK button.\n * @default false\n /\n okDanger?: boolean;\n /\n Whether the OK button is loading.\n * @default false\n /\n okLoading?: boolean;\n /\n Whether the OK button is disabled.\n * @default false\n /\n okDisabled?: boolean;\n /\n The header component.\n * Set as null if you don't need the default header.\n * @default undefined\n /\n header?: React.ReactNode;\n /\n The footer component.\n * Set as null if you don't need the default footer.\n * @default undefined\n /\n footer?: React.ReactNode;\n /\n Whether the modal is visible.\n * @default false\n /\n visible?: boolean;\n /\n The locale of the modal.\n * @default undefined\n /\n locale?: ModalLocale;\n /\n Specifies a callback that will be called when a user clicks the mask or\n * the close button. The callback should set the visible state to false.\n * @default undefined\n /\n onClose?: () => void;\n /\n Specifies a callback that will be called when a user clicks the OK button.\n * @default undefined\n /\n onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst maskInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n ${maskVisibleStyles};\n ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n ${m.min.xs} {\n ${enableScrollingStyles('y')};\n }\n`;\n\nconst contentFadeIn = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n from { transform: translateY(6em); }\n to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\nconst contentInvisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n ${m.min.xs} {\n animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n }\n `;\n\ntype ContentProps = Pick<ModalProps, 'visible' \| 'size'>;\nconst Content = styled(\n 'div',\n omitEmotionProps('visible', 'size')\n)<ContentProps>`\n position: absolute;\n display: flex;\n flex-direction: column;\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n width: 100%;\n max-height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em\n ${(p) => p.theme.borderRadius}em 0 0;\n\n ${m.min.xs} {\n width: ${(p) => p.theme.modalWidth}em;\n max-height: unset;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n left: 50%;\n margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n }\n\n ${contentVisibleStyles};\n ${contentInvisibleStyles}\n ${sizeStyles};\n`;\n\nconst Header = styled.div`\n flex-shrink: 0;\n height: ${(p) => p.theme.modalHeaderHeight}em;\n border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n\n ${m.min.xs} {\n padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n padding-right: ${(p) =>\n Math.max(\n p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n 0\n )}em;\n }\n`;\n\nconst Title = styled.div`\n flex: 1;\n font-size: ${(p) => p.theme.sizes.large}em;\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n flex-grow: 1;\n\n padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n ${m.min.xs} {\n padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n }\n\n ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n ${m.min.xs} {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n }\n`;\n\n/*\n The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n title,\n okText = 'OK',\n okDanger = false,\n okLoading = false,\n okDisabled = false,\n header,\n footer,\n visible = false,\n locale = defaultLocale,\n onClose = () => {},\n onOk,\n size,\n id,\n onClick = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n useBodyScroll(!visible);\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n onClose\n );\n\n const titleId = useMemo(\n () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n const bodyId = useMemo(\n () => id \|\| `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n [id]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <ModalMask visible={visible} />\n <Container\n onClick={(e) => {\n e.stopPropagation();\n onClose();\n }}\n >\n <FocusLock autoFocus={false}>\n <Content\n visible={visible}\n size={size}\n onClick={(e) => {\n e.stopPropagation();\n onClick(e);\n }}\n role='dialog'\n aria-modal\n aria-labelledby={header === undefined ? titleId : undefined}\n aria-describedby={bodyId}\n ref={contentRef}\n >\n {header === undefined ? (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal:\n t.modalCloseButtonPaddingHorizontal,\n })}\n >\n <Header>\n <Title id={titleId}>{title}</Title>\n <Button\n type='ghost'\n wide='never'\n onClick={onClose}\n aria-label={locale.closeLabel}\n >\n <Close />\n </Button>\n </Header>\n </ThemeOverrider>\n ) : (\n header\n )}\n\n <Body id={bodyId} {...rest} ref={ref}>\n {children}\n </Body>\n\n {footer === undefined ? (\n <Footer>\n <Button\n danger={okDanger}\n loading={okLoading}\n disabled={okDisabled}\n onClick={onOk}\n >\n {okText}\n </Button>\n </Footer>\n ) : (\n footer\n )}\n </Content>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/esm/Switch/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef, useCallback } from 'react';
 const FRACTION_DIGITS = 4;
 const uncheckedStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.switchUncheckedColorBg)};
@@ -88,6 +88,7 @@ const Switch = /*#__PURE__*/forwardRef(({
   onChange = () => {},
   size,
   onMouseDown = () => {},
+  onKeyDown = () => {},
   ...rest
 }, ref) => {
   const [forwardedValue, setForwardedValue] = useForwardedState({
@@ -95,18 +96,26 @@ const Switch = /*#__PURE__*/forwardRef(({
     defaultValue,
     onChange
   });
+  const clickHandler = useCallback(() => {
+    if (disabled) return;
+    setForwardedValue(!forwardedValue);
+  }, [disabled, forwardedValue, setForwardedValue]);
+  const mouseDownHandler = useCallback(e => {
+    onMouseDown(e);
+    e.preventDefault();
+  }, [onMouseDown]);
+  const keyDownHandler = useCallback(e => {
+    if (e.key === ' ') setForwardedValue(!forwardedValue);
+    onKeyDown(e);
+    e.preventDefault();
+  }, [forwardedValue, onKeyDown, setForwardedValue]);
   return /*#__PURE__*/React.createElement(StyledSwitch, _extends({
     disabled: disabled,
     checked: forwardedValue,
     size: size,
-    onClick: () => {
-      if (disabled) return;
-      setForwardedValue(!forwardedValue);
-    },
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    onKeyDown: keyDownHandler,
     role: "switch",
     "aria-checked": forwardedValue
   }, rest, {

package/dist/esm/Switch/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["~~React~~","~~forwardRef","~~styled","~~css","~~resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","~~clr~~","FRACTION_DIGITS","uncheckedStyles","p","checked","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","switchColorCircleBg","Switch","value","defaultValue","onChange","size","onMouseDown","rest","ref","forwardedValue","setForwardedValue","e","preventDefault","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import ~~React,~~ { ~~forwardRef~~ } from 'react';\nimport styled from '@emotion/styled';\nimport { ~~css } from '@emotion/react';\nimport {~~\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { ~~omitEmotionProps,~~ ~~useForwardedState~~ } from '@os-design/~~utils~~';\nimport { ~~clr~~ } from '@os-design/~~theming~~';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'value' \| 'defaultValue' \| 'onChange' \| 'onClick' \| 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n /*\n Whether the switch is disabled.\n * @default false\n /\n disabled?: boolean;\n /\n Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBg)};\n &::after {\n left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n }\n `;\n\nconst checkedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBg)};\n &::after {\n left: ${+(\n p.theme.switchWidth -\n p.theme.switchCircleSize -\n (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n ).toFixed(FRACTION_DIGITS)}em;\n }\n `;\n\nconst hoverUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n ${hoverUncheckedStyles(p)};\n ${hoverCheckedStyles(p)};\n }\n }\n `;\n\nconst disabledUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n `;\n\nconst disabledCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n ${disabledUncheckedStyles(p)};\n ${disabledCheckedStyles(p)};\n `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' \| 'size'> {\n checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n 'button',\n omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n ${resetButtonStyles};\n position: relative;\n cursor: pointer;\n user-select: none;\n display: block;\n\n width: ${(p) => p.theme.switchWidth}em;\n height: ${(p) => p.theme.switchHeight}em;\n border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n &::after {\n position: absolute;\n top: ${(p) =>\n +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n\n width: ${(p) => p.theme.switchCircleSize}em;\n height: ${(p) => p.theme.switchCircleSize}em;\n border-radius: 50%;\n\n background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n content: ' ';\n\n ${transitionStyles('left')};\n }\n\n ${uncheckedStyles};\n ${checkedStyles};\n ${hoverStyles};\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color')};\n`;\n\n/\n The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n ~~return~~ (\n ~~<StyledSwitch\n~~ disabled~~={disabled}\~~n ~~checked={~~forwardedValue}\n ~~size~~=~~{size}~~\n ~~onClick={~~() => {\n if (~~disabled~~) ~~return~~;\n ~~setForwardedValue~~(~~!forwardedValue~~);\n }}\n ~~onMouseDown~~={(e) => {\n ~~onMouseDown~~(e);\n e.preventDefault();\n }}\n role='switch'\n aria-checked={forwardedValue}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";AAAA,~~OAAOA~~,~~KAAK~~,~~IAAIC,UAAU,~~QAAQ,~~OAAO~~;~~AACzC~~,OAAOC,MAAM,MAAM,iBAAiB;AACpC,~~SAASC,GAAG,QAAQ,gBAAgB;AACpC,~~SACEC,iBAAiB,EACjBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACtE,~~SAASC~~,~~GAAG~~,QAAQ,~~oBAAoB~~;~~AA6BxC~~,MAAMC,eAAe,GAAG,CAAC;AAEzB,MAAMC,eAAe,GAAIC,CAAC,IACxB,CAACA,CAAC,CAACC,OAAO,~~IACVV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACC,sBAAsB,CAAE;AAC5D;AACA,cAAc,CAAC,CAAC,CAACH,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CACtER,eAAe,CACf;AACR;AACA,GAAG;AAEH,MAAMS,aAAa,GAAIP,CAAC,IACtBA,CAAC,CAACC,OAAO,~~IACTV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACM,oBAAoB,CAAE;AAC1D;AACA,cAAc,CAAC,CACPR,CAAC,CAACE,KAAK,CAACO,WAAW,GACnBT,CAAC,CAACE,KAAK,CAACG,gBAAgB,GACxB,CAACL,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EACrDC,OAAO,CAACR,eAAe,CAAE;AACjC;AACA,GAAG;AAEH,MAAMY,oBAAoB,GAAIV,CAAC,IAC7B,CAACA,CAAC,CAACC,OAAO,~~IACVV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACS,2BAA2B,CAAE;AACjE,GAAG;AAEH,MAAMC,kBAAkB,GAAIZ,CAAC,IAC3BA,CAAC,CAACC,OAAO,~~IACTV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACW,yBAAyB,CAAE;AAC/D,GAAG;AAEH,MAAMC,WAAW,GAAId,CAAC,IACpB,CAACA,CAAC,CAACe,QAAQ,~~IACXxB~~,GAAI;AACN;AACA;AACA;AACA,~~UAAUmB~~,oBAAoB,CAACV,CAAC,CAAE;AAClC,UAAUY,kBAAkB,CAACZ,CAAC,CAAE;AAChC;AACA;AACA,GAAG;AAEH,MAAMgB,uBAAuB,GAAIhB,CAAC,IAChC,CAACA,CAAC,CAACC,OAAO,~~IACVV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACe,8BAA8B,CAAE;AACpE,GAAG;AAEH,MAAMC,qBAAqB,GAAIlB,CAAC,IAC9BA,CAAC,CAACC,OAAO,~~IACTV~~,GAAI;AACN,~~wBAAwBM~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACiB,4BAA4B,CAAE;AAClE,GAAG;AAEH,MAAMC,cAAc,GAAIpB,CAAC,IACvBA,CAAC,CAACe,QAAQ,~~IACVxB~~,GAAI;AACN;AACA,~~MAAMyB~~,uBAAuB,CAAChB,CAAC,CAAE;AACjC,MAAMkB,qBAAqB,CAAClB,CAAC,CAAE;AAC/B,GAAG;AAKH,MAAMqB,YAAY,~~GAAG/B~~,MAAM,CACzB,QAAQ,EACRK,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,CAChB;AACrB,~~IAAIH~~,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA,~~WAAYQ~~,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACO,WAAY;AACtC,YAAaT,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,YAAa;AACxC,mBAAoBJ,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,YAAY,GAAG,CAAE;AACnD;AACA;AACA;AACA,WAAYJ,CAAC,IACP,CAAC,CAAC,CAACA,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CAC9DR,eAAe,CACf;AACR;AACA,aAAcE,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,gBAAiB;AAC7C,cAAeL,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,gBAAiB;AAC9C;AACA;AACA,wBAAyBL,CAAC,~~IAAKH~~,GAAG,~~CAACG~~,CAAC,CAACE,KAAK,CAACoB,mBAAmB,CAAE;AAChE;AACA;AACA,~~MAAM5B~~,gBAAgB,CAAC,MAAM,CAAE;AAC/B;AACA;AACA,~~IAAIK~~,eAAgB;AACpB,IAAIQ,aAAc;AAClB,IAAIO,WAAY;AAChB,IAAIM,cAAe;AACnB;AACA,~~IAAI3B~~,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAkB,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,~~MAAM6B~~,MAAM,~~gBAAGlC~~,UAAU,CACvB,CACE;~~EACE0B~~,QAAQ,GAAG,KAAK;EAChBS,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC,IAAI;EACJC,WAAW,GAAG,MAAM,CAAC,CAAC;~~EACtB~~,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,~~GAAGpC~~,iBAAiB,CAAC;~~IAC5D4B~~,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF,~~oBACE~~,~~oBAAC~~,~~YAAY~~;~~IACX~~,QAAQ,~~EAAEX~~,~~QAAS~~;~~IACnB~~,~~OAAO~~,~~EAAEgB~~,~~cAAe~~;~~IACxB~~,~~IAAI~~,~~EAAEJ~~,IAAK;~~IACX~~,~~OAAO~~,~~EAAE~~,~~MAAM~~;~~MACb~~,~~IAAIZ~~,~~QAAQ~~,EAAE;~~MACdiB~~,~~iBAAiB,~~CAAC,~~CAACD~~,~~cAAc~~,CAAC~~;IACpC~~,~~CAAE~~;~~IACF~~,WAAW,~~EAAGE~~,CAAC,IAAK;~~MAClBL~~,~~WAAW~~,~~CAACK~~,CAAC,CAAC;~~MACdA~~,CAAC,CAACC,cAAc,EAAE;~~IACpB~~,~~CAAE~~;~~IACF~~,IAAI,EAAC,QAAQ;IACb,~~gBAAcH~~;EAAe,GACzBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;~~AAEDP~~,MAAM,~~CAACY~~,WAAW,GAAG,QAAQ;AAE7B,~~eAAeZ~~,MAAM"}
1	+ {"version":3,"file":"index.js","names":["css","styled","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","useCallback","FRACTION_DIGITS","uncheckedStyles","p","checked","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","switchColorCircleBg","Switch","value","defaultValue","onChange","size","onMouseDown","onKeyDown","rest","ref","forwardedValue","setForwardedValue","clickHandler","mouseDownHandler","e","preventDefault","keyDownHandler","key","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\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, useCallback } from 'react';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'value' \| 'defaultValue' \| 'onChange' \| 'onClick' \| 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n /*\n Whether the switch is disabled.\n * @default false\n /\n disabled?: boolean;\n /\n Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBg)};\n &::after {\n left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n }\n `;\n\nconst checkedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBg)};\n &::after {\n left: ${+(\n p.theme.switchWidth -\n p.theme.switchCircleSize -\n (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n ).toFixed(FRACTION_DIGITS)}em;\n }\n `;\n\nconst hoverUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n ${hoverUncheckedStyles(p)};\n ${hoverCheckedStyles(p)};\n }\n }\n `;\n\nconst disabledUncheckedStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n `;\n\nconst disabledCheckedStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n ${disabledUncheckedStyles(p)};\n ${disabledCheckedStyles(p)};\n `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' \| 'size'> {\n checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n 'button',\n omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n ${resetButtonStyles};\n position: relative;\n cursor: pointer;\n user-select: none;\n display: block;\n\n width: ${(p) => p.theme.switchWidth}em;\n height: ${(p) => p.theme.switchHeight}em;\n border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n &::after {\n position: absolute;\n top: ${(p) =>\n +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n FRACTION_DIGITS\n )}em;\n\n width: ${(p) => p.theme.switchCircleSize}em;\n height: ${(p) => p.theme.switchCircleSize}em;\n border-radius: 50%;\n\n background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n content: ' ';\n\n ${transitionStyles('left')};\n }\n\n ${uncheckedStyles};\n ${checkedStyles};\n ${hoverStyles};\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color')};\n`;\n\n/\n The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onMouseDown = () => {},\n onKeyDown = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const clickHandler = useCallback(() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }, [disabled, forwardedValue, setForwardedValue]);\n\n const mouseDownHandler = useCallback(\n (e) => {\n onMouseDown(e);\n e.preventDefault();\n },\n [onMouseDown]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === ' ') setForwardedValue(!forwardedValue);\n onKeyDown(e);\n e.preventDefault();\n },\n [forwardedValue, onKeyDown, setForwardedValue]\n );\n\n return (\n <StyledSwitch\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n onClick={clickHandler}\n onMouseDown={mouseDownHandler}\n onKeyDown={keyDownHandler}\n role='switch'\n aria-checked={forwardedValue}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":"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"}

package/dist/types/Modal/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react';
 import { WithSize } from '@os-design/styles';
+import React from 'react';
 import { ModalLocale } from './utils/defaultLocale';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface ModalProps extends JsxDivProps, WithSize {

package/dist/types/Modal/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~KAAsC~~,MAAM,~~OAAO~~,CAAC;~~AAS3D~~,OAAO,~~EAIL~~,~~QAAQ,EACT,~~MAAM,~~mBAAmB~~,CAAC;~~AAO3B~~,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,aAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,~~mFA4GV~~,CAAC;AAIF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,aAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFAiHV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/types/Switch/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react';
 import { WithSize } from '@os-design/styles';
+import React from 'react';
 declare type JsxButtonProps = Omit<JSX.IntrinsicElements['button'], 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'>;
 export interface SwitchProps extends JsxButtonProps, WithSize {
     disabled?: boolean;

package/dist/types/Switch/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Switch/index.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~KAAqB~~,MAAM,~~OAAO~~,CAAC;~~AAG1C~~,OAAO,~~EAIL~~,~~QAAQ,EACT,~~MAAM,~~mBAAmB~~,CAAC;~~AAI3B~~,aAAK,cAAc,GAAG,IAAI,CACxB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAC1D,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,QAAQ;IAK3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAKhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAsHD,QAAA,MAAM,MAAM,~~uFAuCX~~,CAAC;AAIF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,aAAK,cAAc,GAAG,IAAI,CACxB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAC1D,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,QAAQ;IAK3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAKhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAsHD,QAAA,MAAM,MAAM,uFAyDX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.175",
+  "version": "1.0.177",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "58227706f196414567ac68b7d200d9afe1b1fe59"
+  "gitHead": "050f234718c73502f13347623abe8c243ac1a79f"
 }